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元件
- Material Design元件之AppBarLayoutMaterial Design元件APP
- Material Design 元件之FloatingActionButtonMaterial Design元件
- Material Design 元件之FloatingActionBuMaterial Design元件
- Material Design Lite,簡潔驚豔的前端工具箱。Material Design前端
- Android之Material DesignAndroidMaterial Design
- Material Design 之 TabLayout 使用Material DesignTabLayout
- Material Design之AppBarLayoutMaterial DesignAPP
- Material Design 之 TextInputLayout和TextInputEditTextMaterial Design
- flutter的進階之路之Material Design與IOS風格元件FlutterMaterial DesigniOS元件
- Material DesignMaterial Design
- Material Design - 常用控制元件介紹和使用Material Design控制元件
- Material Design 相容性控制元件學習Material Design控制元件
- Material Design 控制元件知識梳理(8) TabLayoutMaterial Design控制元件TabLayout
- Material Design 控制元件知識梳理(9) TextInputLayoutMaterial Design控制元件
- Material Design 控制元件知識梳理(6) SnackbarMaterial Design控制元件
- Material Design AnimationMaterial Design
- Material Design時代Material Design
- Material Design 系列之 CardView、FAB 和 SnackbarMaterial DesignView
- 微信小程式 MinUI 元件庫系列之 badge 徽章元件微信小程式UI元件
- Material Design實戰Material Design
- 安卓Material Design(2)安卓Material Design
- 安卓Material Design(3)安卓Material Design
- 安卓Material Design(5)安卓Material Design
- Material Design 控制元件知識梳理(5) DrawerLayout && NavigationViewMaterial Design控制元件NavigationView
- Material Design 控制元件知識梳理(4) FloatingActionButtonMaterial Design控制元件
- Angular Material 攻略 03 angular Material Design 安裝AngularMaterial Design
- Material Design 之 Behavior 的使用和自定義 BehaviorMaterial Design
- Material Design 控制元件知識梳理(7) BottomNavigationBarMaterial Design控制元件Navigation
- Material Design之-互動效果炸裂的 FloatingActionMenuMaterial Design
- Material Design 實戰 之第一彈——Toolbar詳解Material Design
- Material Design之 AppbarLayout 開發實踐總結Material DesignAPP
- Android UI進階之旅7 Material Design之PaletteAndroidUIMaterial Design
- Material Design 控制元件知識梳理(1) Android Design Support Library 是什麼Material Design控制元件Android
- Android Material Design控制元件使用(二)——FloatButton TextInputEditText TextInputLayout 按鈕AndroidMaterial Design控制元件
- Material Design 控制元件知識梳理(2) AppBarLayout & CollapsingToolbarLayoutMaterial Design控制元件APP
- Material Design 相關資源Material Design
- Android UI進階之旅7--Material Design之PaletteAndroidUIMaterial Design