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>

Material Design Lite组件之徽章相关推荐

Material Design Lite组件之按钮
1.介绍 Material Design Lite(MDL)按钮组件是标准HTML <button>元素的增强版. 一个按钮由文字和/或图像组成,清楚地表明用户点击或触摸时会发生什么动作. ...
Material Design Lite，简洁惊艳的前端工具箱。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...
Vue2.0 的 Material Design UI 组件库 Muse-UI
Muse-UI 基于 Vue2.0 的 Material Design UI 组件库安装 npm install muse-ui --save 使用 import Vue from 'vue' im ...
开启Fluter基础之旅二-------Future再论、常用组件、Material Design风格组件学习
Future再论: 这里在继续往下学习之前,先来看一下Dart语言关于Event-Queue和Microtask Queue需要注意的一个小点,这个在之前https://www.cnblogs.com ...
开启Fluter基础之旅三-------Material Design风格组件、Cupertino风格组件、Flutter页面布局篇...
Material Design风格组件: 继续接着上一次https://www.cnblogs.com/webor2006/p/12545701.html的Material Design进行学习. A ...
详解Material Design体系组件
iOS 或 Material Design的设计指南,都是按照组件的属性来系统介绍. 一般把Control翻译成控件,把Component翻译成组件.通俗的解释说法就是组件为多个元素组合而成,控件为单 ...
Flutter 入门学习（五）— Material Design风格组件
文章目录 1. 概述 2. App结构和导航组件 2.1 MaterialApp(应用组件) 2.1.1 设置主页 2.1.2 路由处理 2.1.3 自定义主题 2.2 Scaffold(脚手架组件) ...
微信小程序之Material Design——input组件
We-MaterialDesign 微信小程序之MaterialDesign– input组件主要通过input输入事件配合css的transform动态改变实现这种效果. 实际调试过程中,inpu ...
Muse UI - 优雅的 Material Design 风格 UI 组件
一款基于 Vue 2.0 的 UI 组件库,按 Material Design 设计规范实现,体验优秀,使用简单. Muse UI 介绍 Muse UI 是一款基于 Vue.js 的优雅 UI 组件库 ...