免费AI编程助手
Material Design Lite 徽章
2018-12-19 18:17 更新
一个MDL徽章组分是屏幕上的通知可以是一个数字或图标。它通常用于强调的项目数。
该MDL提供多种CSS类各种预先定义的外观和行为增强功能适用于徽章。下表中提到的可用类和它们的影响。
| SN | 类名称和说明 |
|---|---|
| 1 | MDL-徽章 标识元件作为一个MDL徽章组件。需要跨越或链接元素。 |
| 2 | MDL-徽章-无背景 适用开放式循环效果徽章是可选的。 |
| 3 | MDL-徽章-重叠 使得其容器徽章重叠，是可选的。 |
| 4 | 数据徽章=“值” 分配给徽章用作属性字符串值;在跨度或链路所需。 |
例
下面的例子展示了使用MDL-徽章类的补充通知跨度和链接元素。
这里使用以下MDL类。
MDL-徽章 -识别元素作为MDL徽章组成部分。
数据徽章 -Assigns一个字符串值徽章。图标可以使用HTML码元被分配给它。
mdl_badges.htm
<html>
<head>
<script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="external nofollow" target="_blank" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" target="_blank" >
<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>
结果
验证结果。
以上内容是否对您有帮助：
更多建议：