解释 Materialise CSS 中的徽章？

徽章是 Materialise CSS 中非常有用的组件之一。它就像一个图标，帮助我们显示未读消息、通知、电子邮件和所有其他此类内容。在本文中，我们将讨论如何在 Materialise CSS 中使用徽章。可以通过在 span 元素中添加徽章类来定义徽章。我们可以使用新类为徽章添加背景。

句法：

Badge Text
New Badge Text

下面的示例展示了在 Materialize CSS 中添加徽章的多种方式。

示例 1：在集合中使用徽章。

HTML

  

    
    

  

    Using Badges with Collection
    
        
            1Item One
        
        
            4Item Two
        
        
            Item Three
        
        
            14Item Four
        
    
    
    

  

输出：

示例 2：在 Collapsible 中使用徽章。

HTML

  

    
    

  

    Using Badges with collapsible
    
        
            
                First Header
                4
            
            
                Body of First Item
            
        
        
            
                Second Header
                1
            
            
                Body of Second Item
            
        
    
    
    
    
        document.addEventListener('DOMContentLoaded', function () {
            var elems = document.querySelectorAll('.collapsible');
            var instances = M.Collapsible.init(elems, {
                accordion: false
            });
        });
    

  

输出：

示例 3：在下拉菜单中使用徽章

HTML

  

    
    

  

    Using Badges with Dropdown
    
    
        Dropdown
        
            arrow_drop_down
        
    
  
    
    
        
            one
                1
            
        
        
            two
                1
            
        
        
            three
        
    
  
    
    
    
        document.addEventListener(
            'DOMContentLoaded', function () {
                var elems =
                    document.querySelectorAll('.dropdown-trigger');
                var instances =
                    M.Dropdown.init(elems, { coverTrigger: false });
            });
    

  

输出：

示例 4：在导航栏中使用徽章

HTML

  

    
    

  

    Using Badges with navbar
    
        
            Logo
            
                Item One
                
                  Item Two
                      4
                  
                  
                Item Three
            
        
    
    
    

  

输出：

示例 5：更改徽章的背景颜色

HTML

  

    
    

  

    Using Badges with Collection
    
        
          1Item One
          
        
          4Item Two
          
        
          Item Three
          
        
          14Item Four
          
    
    
    

  

输出：