📌  相关文章
📜  材料设计精简版-徽章

📅  最后修改于: 2020-10-22 05:51:24             🧑  作者: Mango

MDL徽标组件是一个屏幕通知，可以是数字或图标。通常用于强调项数。

MDL提供了一系列CSS类，以对徽章应用各种预定义的视觉和行为增强。下表列出了可用的类及其效果。

Sr.No. Class Name & Description
1

mdl-badge

Identifies element as an MDL badge component. Required for span or link element.
2

mdl-badge–no-background

Applies open-circle effect to badge and is optional.
3

mdl-badge–overlap

Makes the badge overlap with its container and is optional.
4

data-badge=”value”

Assigns a string value to badgeused as attribute; required on span or link.

例

以下示例将帮助您了解使用mdl-badge类向跨度和链接元素添加通知的用法。

下面给出的MDL类将在此示例中使用。

  • mdl-badge-将元素标识为MDL标志组件。

  • 数据徽章–为徽章分配一个字符串值。可以使用HTML符号将图标分配给它。

mdl_badges.htm

现场演示

      
      
      
      
   
   
   
      account_box    
      account_box    
      Unread Messages
      Rating
      Inbox

结果

验证结果。