Material Design Lite - 徽章
MDL 徽章组件是屏幕上的通知，可以是数字或图标。它通常用于强调项目的数量。
MDL 提供了一系列 CSS 类，用于将各种预定义的视觉和行为增强功能应用于徽章。下表列出了可用的类及其效果。
| Sr.No. | 类名和说明 |
|---|---|
| 1 | mdl-badge 将元素标识为 MDL 徽章组件。对于 span 或 link 元素是必需的。 |
| 2 | mdl-badge--no-background 将开圆效果应用于徽章，是可选的。 |
| 3 | mdl-badge--overlap 使徽章与其容器重叠，是可选的。 |
| 4 | data-badge="value" 为徽章分配一个字符串值用作属性;span 或 link 上必需。 |
示例
以下示例将帮助您了解如何使用 mdl-badge 类向 span 和 link 元素添加通知。
此示例中将使用下面给出的 MDL 类。
mdl-badge − 将元素标识为 MDL 徽章组件。
data-badge − 为徽章分配一个字符串值。可以使用 HTML 符号为其分配图标。
mdl_badges.htm
<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>
结果
验证结果。
