Material Design Lite-バッジ

MDLバッジコンポーネントは、画面上の通知であり、数字またはアイコンにすることができます。通常、アイテムの数を強調するために使用されます。

MDLは、さまざまな事前定義された視覚的および動作の強化をバッジに適用するための一連のCSSクラスを提供します。次の表に、使用可能なクラスとその効果を示します。

Sr.No.	Class Name & Description
1	mdl-badge 要素をMDLバッジコンポーネントとして識別します。スパンまたはリンク要素に必要です。
2	mdl-badge—no-background バッジに白丸効果を適用し、オプションです。
3	mdl-badge—overlap バッジをコンテナとオーバーラップさせ、オプションです。
4	data-badge="value" 属性として使用されるバッジに文字列値を割り当てます。スパンまたはリンクで必要です。

例

次の例は、 mdl-badge クラスを使用して通知をスパンおよびリンク要素に追加する方法を理解するのに役立ちます。

この例では、以下に示すMDLクラスが使用されます。

mdl-badge -要素をMDLバッジコンポーネントとして識別します。
data-badge -文字列値をバッジに割り当てます。 HTMLシンボルを使用して、アイコンを割り当てることができます。

mdl_badges

<html>
   <head>
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>

      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
         body {
            padding: 20px;
            background: #fafafa;
            position: relative;
         }
      </style>
   </head>

   <body>
      <span class = "material-icons mdl-badge" data-badge = "1">account_box</span>
      <span class = "material-icons mdl-badge" data-badge = "★">account_box</span>
      <span class = "mdl-badge" data-badge = "4">Unread Messages</span>
      <span class = "mdl-badge" data-badge = "⚑">Rating</span>
      <a href = "#" class = "mdl-badge" data-badge = "5">Inbox</a>
   </body>
</html>

結果

結果を確認します。

Materialdesignlite-badges

Material Design Lite-バッジ

例

mdl_badges

結果

目次