Materialize-可折叠 - 芒果文档

📌 相关文章

📜 Materialize-可折叠

📅 最后修改于: 2020-10-22 08:29:23 🧑 作者: Mango

Materialize提供了各种CSS类，以应用各种预定义的视觉和行为增强来显示各种类型的手风琴。下表列出了可用的类及其效果。

Sr.No.	Class Name & Description
1	collapsible Identifies an element as a materialize collapsible component. Required for ul element.
2	collapsible-header Sets div as a section header.
3	collapsible-body Sets div as a section content container.
4	popout Creates a popout collapsible.
5	active Opens a section.
6	expandable Marks a collapsible component as expandable.
7	accordion Marks a collapsible component as accordion.

以下是以不同方式使用手风琴的示例。

例

materialize_collapsible.htm

The Materialize Collapsible Example
            
      
      
                 
      
   
   
    
      Simple Accordion
      
         
            
               filter_dramaFirst Section
            This is first section.
         
         
         
            
               placeSecond Section
            This is second section.
         
         
         
            
               whatshotThird Section
            This is third section.
         
      
      
      Popout Accordion
      
         
            
               filter_dramaFirst Section
            This is first section.
         
         
         
            
               placeSecond Section
            This is second section.
         
         
         
            
               whatshotThird Section
            This is third section.
         
      
      
      Accordion with Preselected Section
      
         
            
               filter_dramaFirst Section
            This is first section.
         
         
         
            
               placeSecond Section
            This is second section.
         
         
         
            
               whatshotThird Section
            This is third section.
         
      
      
      Expandables
      
         
            
               filter_dramaFirst Section
            This is first section.
         
         
         
            
               placeSecond Section
            This is second section.
         
         
         
            
               whatshotThird Section
            This is third section.

结果

验证结果。