免費(fèi)AI編程助手
Material Design Lite 徽章
2018-12-19 18:17 更新
一個(gè)MDL徽章組分是屏幕上的通知可以是一個(gè)數(shù)字或圖標(biāo)。它通常用于強(qiáng)調(diào)的項(xiàng)目數(shù)。
該MDL提供多種CSS類各種預(yù)先定義的外觀和行為增強(qiáng)功能適用于徽章。下表中提到的可用類和它們的影響。
| SN | 類名稱和說(shuō)明 |
|---|---|
| 1 | MDL-徽章 標(biāo)識(shí)元件作為一個(gè)MDL徽章組件。需要跨越或鏈接元素。 |
| 2 | MDL-徽章-無(wú)背景 適用開(kāi)放式循環(huán)效果徽章是可選的。 |
| 3 | MDL-徽章-重疊 使得其容器徽章重疊，是可選的。 |
| 4 | 數(shù)據(jù)徽章=“值” 分配給徽章用作屬性字符串值;在跨度或鏈路所需。 |
例
下面的例子展示了使用MDL-徽章類的補(bǔ)充通知跨度和鏈接元素。
這里使用以下MDL類。
MDL-徽章 -識(shí)別元素作為MDL徽章組成部分。
數(shù)據(jù)徽章 -Assigns一個(gè)字符串值徽章。圖標(biāo)可以使用HTML碼元被分配給它。
mdl_badges.htm
<html>
<head>
<script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
<link rel="stylesheet" rel="external nofollow" target="_blank" >
<link rel="stylesheet" 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>
結(jié)果
驗(yàn)證結(jié)果。
以上內(nèi)容是否對(duì)您有幫助：
更多建議：