| Sr.No. | 类名和描述 |
| 1 |
mdl-badge
将元素标识为 MDL 徽章组件。 span 或 link 元素是必需的。
|
| 2 |
mdl-badge--no-background
对徽章应用开环效果并且是可选的。
|
| 3 |
mdl-badge--overlap
使徽章与其容器重叠并且是可选的。
|
| 4 |
data-badge="value"
将字符串值分配给用作属性的徽章；跨度或链接需要。
|
<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>
