Material Design Lite元件之徽章

騎著程式碼去流浪發表於2018-05-29
Material Design元件

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>

相關文章