📜  材料设计精简版-徽章

📅  最后修改于: 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
   

结果

验证结果。