语义 UI 手风琴类型

Semantic UI 是一个现代框架，用于为网站开发无缝设计，它为用户提供了轻量级的组件体验。它使用预定义的 CSS 和 jQuery 来合并到不同的框架中。

在本文中，我们将了解 Semantic UI 中可用的不同类型的手风琴。拥有不同类型的手风琴对任何开发人员都有好处。手风琴类型用于指定用于特定条件的手风琴类型。 Semantics UI 中有两种类型的手风琴，如下所述。

手风琴类型：

• Accordion：这是一个标准的手风琴，具有基本的折叠功能来呈现内容，没有任何装饰或样式。
• Style Accordion：这是一种风格化的手风琴，包含可用于装饰手风琴的不同预定义类。风格化的手风琴增加了基本的格式。

句法：

 Content 

我们将通过示例了解 Semantic-UI Accordion Types 的实现。

示例 1：此示例说明了 Semantic-UI 标准手风琴类型。

HTML

 

    Semantic UI Accordion Types
    
    
    
    
    

 

    
        
            GeeksforGeeks
        
        
            Semantic UI Accordion Types
        
        Accordion:
        
            
                 GeeksforGeeks
            
            
                 

                    GeeksforGeeks is a computer science portal.
                    It is the best platform to lean programming.
                
 
 
            
            
                 Semantic UI
            
            
                 

                    Semantic UI is a modern framework used in
                    developing seamless designs for the website,
                    It gives the user a lightweight experience
                    with its components. It uses the predefined
                    CSS and jQuery to incorporate in different
                    frameworks.
                
 
 
            
            
                 HTML
            
            
                 

                    HTML stands for HyperText Markup Language.
                    It is used to design web pages using markup
                    language.
                
 
 
            
        
    
    
        $('.ui.accordion').accordion();
    

 

输出：

Semantic-UI 标准手风琴类型。

示例 2 ：此示例说明了语义 UI 样式的手风琴类型。

HTML

 

    Semantic UI Accordion Types
    
    
    
    
    

 

    
        
            GeeksforGeeks
        
        
            Semantic UI Accordion Types
        
        Style Accordion:
        
            
                  GeeksforGeeks
            
            
                 

                    GeeksforGeeks is a computer science portal.
                    It is the best platform to lean programming.
                
 
 
            
            
                 Semantic UI
            
            
                 

                    Semantic UI is a modern framework used
                    in developing seamless designs for the
                    website, It gives the user a lightweight
                    experience with its components. It uses
                    the predefined CSS and jQuery to incorporate
                    in different frameworks.
                
 
 
            
            
                 HTML
            
            
                 

                    HTML stands for HyperText Markup Language.
                    It is used to design web pages using markup
                    language.
                
 
 
            
        
    
    
        $('.ui.accordion').accordion();
    

 

输出：

Semantic-UI 风格的手风琴类型

参考： https ://semantic-ui.com/modules/accordion.html#accordion