Dropdowns 的 Materialise 类是什么？

Materialize 是一个基于谷歌 Material Design 的现代响应式 CSS 框架。它的目标是开发一个设计系统，允许在任何平台上的所有服务中集成用户体验。 Materialise 是一种设计语言，它结合了成功设计的经典原则以及创新和技术。 Materialize 带有各种有用的组件，可帮助开发人员创建响应式网站。

Dropdown 是物化 CSS 的内置组件之一。 Materialize CSS 中的下拉菜单主要用于允许用户选择列表中的一个值。 Materialize CSS 有一个时尚的下拉列表，其中包含各种交互选项。

Materialize CSS 提供了各种 CSS 类来以一种简单的方式创建一个漂亮的下拉列表。以下是可用的类及其用法。

• dropdown-content：用于将无序列表（ul）标识为物化下拉组件。它是ul元素所必需的。
• data-activates ：用于指定下拉无序列表 (ul) 元素的 ID。

Materialize CSS 中的下拉菜单提供了几个 CSS 类来为任何按钮添加下拉列表。只需要确保data-activates属性id与无序列表元素标记中的id匹配，即

。您可以添加一个分隔符来分隔ul标签的两个元素，类为“divider”。您还可以添加在以下示例中实现的图标。

示例 1：以下示例演示了一个简单的下拉框。

HTML

  

  
    
    
  
    
    
    
  
    
    

  

    GeeksforGeeks
    
        Materialize CSS Dropdown
    
  
    
    
        CSS
        HTML
        PHP
        Java
  
        
        
        End
    
  
    
  
    
        Tutorials
  
        
        
        
    

  





输出：



示例 2：以下示例演示了具有 Materialize CSS 徽章组件的下拉菜单，其中在下拉插件的初始化中设置了一些选项。

HTML

  

  
    
    
    
    
    
    
    

  

  
    
    GeeksforGeeks
    
        Materialize badge classes
    
  
    
    
        
            
            Checked89+
            
        
        
            Unchecked
                20
            
        
        Spam
  
        
        Junk14
        
    
  
    
    
        My mails
  
        
        
    
  
    
        $('.dropdown-button').dropdown({
            inDuration: 250,// Enter transition in ms
            outDuration: 250,// Out transition in ms
            constrainWidth: true,// Width takes size of activator
            hover: true, // Activate on hover    
            belowOrigin: true, //Dropdown is below activator
            alignment: 'right'
        });
    

  

输出：