Material Design Lite组件之徽章

1.介绍

Material Design Lite（MDL）徽章组件是一个屏幕上的通知元素。徽章由一个小圆圈组成，通常包含数字或其他字符，这些圆圈出现在另一个物体附近。徽章既可以是通知者，也可以是与对象相关的其他项目以及有多少项目的指示符。
您可以使用徽章不显眼地将用户的注意力吸引到他们可能不会注意到的物品上，或强调物品可能需要他们的注意。例如：
一个“新消息”通知后面可能会有一个包含未读邮件数量的徽章。
一个“您的购物车中有未购买的物品”提醒可能包含显示购物车中物品数量的徽章。
一个“加入讨论！”按钮可能会附带一个标志，指示当前参与讨论的用户数量。
徽章几乎总是位于链接附近，因此用户可以方便地访问徽章指示的附加信息。

徽章是用户界面中的一项新功能，并为用户提供了一条直观的线索，帮助他们发现更多相关内容。因此，它们的设计和使用是整体用户体验的重要因素。

2.配置选项

MDL CSS类将各种预定义的视觉增强应用于徽章。 下表列出了可用的类及其效果。

类名	效果	备注
mdl-badge	定义当前标签为MDL徽章组件	必需
mdl-badge--no-background	不显示徽章背景颜色，默认显示圆圈效果	可选
mdl-badge--overlap	选用此类徽章将包含在容器内	可选
data-badge="value"	徽章显示的值	非class类名，而是一个标签属性

3.使用举例

3.1.容器作为icon图标使用

<!-- Number badge on icon -->
<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="1">account_box</div>
<!-- Icon badge on icon -->
<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="♥">account_box</div>

注意：作为icon图标的容易内容不能为空

3.2.显示容器值使用

<!-- Number badge -->
<span class="mdl-badge" data-badge="4">Inbox</span>
<!-- Icon badge -->
<span class="mdl-badge" data-badge="♥">Mood</span>

3.3.包含在a标签内使用

<a href="#" class="mdl-badge" data-badge="7">This link contains a badge.</a>

3.4.在a标签旁边使用

<a href="#">This link is followed by a badge.</a>
<span class="mdl-badge" data-badge="12"></span>

3.5.徽章内值过长的显示中间部分

<a href="#" class="mdl-badge" data-badge="123456789">
This badge has too many characters.</a>

3.6.徽章不包含背景色

<a href="#" class="mdl-badge mdl-badge--no-background" data-badge="123">
This badge has no background color.</a>