语义 UI 下拉类型

Semantic-UI是一个开源开发框架，它提供预定义的类，使我们的网站看起来漂亮、令人惊叹且响应迅速。它类似于具有预定义类的 Bootstrap。它使用 jQuery 和 CSS 来创建接口。它也可以像 bootstrap 一样通过 CDN 直接使用。

语义 UI有一堆用于用户界面设计的组件。其中之一是“下拉”。下拉菜单用于向用户显示不同的选项以供选择。用户可以根据自己的选择在其中进行选择。根据菜单方向及其显示方式，有不同类型的下拉菜单。让我们看看这种类型的下拉菜单。

语义 UI 下拉类型：

• Dropdown：这表示需要一个下拉菜单。
• 选择：这将设置仅选择类型的下拉菜单。
• 搜索选择：这使我们能够从选择下拉列表中搜索选项。如果我们使用选择 HTML 标签，则不需要选择类，否则需要将其作为类提及。
• 多项选择：这用于创建允许多项选择的选择下拉列表。
• 多重搜索选择：这用于 用于创建允许多个搜索选择的选择下拉列表。
• 搜索下拉菜单：这用于创建可搜索的下拉菜单。
• 在菜单中搜索：这用于制作一个下拉菜单，其中包括菜单内的搜索提示。
• Inline ：用于指定下拉列表的内联类型。
• Pointing ：这用于使菜单指向特定方向。
• 浮动：这用于使下拉菜单浮动在元素下方。
• Simple ：用于指定下拉列表的简单类型。

句法：

    .......

示例 1：以下示例说明了 Semantic-UI Dropdown下拉类型。

HTML

  

    
      Semantic-UI Dropdown Types
    
    
  
    
    
  
    
    

  

  
    
      GeeksforGeeks
    
  
    
      Semantic-UI Dropdown Types
    
  
    
      
        Data Structure
            
      
  
      
        
          Algorithms
        
  
        
          Gate
        
  
        
  
        
          
            Jobs
          
            Apply for Jobs
            Post a Job
          
        
  
        
          Write an Article
        
      
    
  
    
  
      $('.ui.dropdown').dropdown();
  

  

输出：

语义 UI 下拉类型

示例 2：以下示例说明了 Semantic-UI 下拉选择类型。

HTML

  

  
  
  
  
  


  
    Geeksforgeeks
    Semantic UI Dropdown Selection Type
    
    
    
      
      
      WEB DEVELOPMENT COURSES
      
        
          HTML
        
        
          CSS
        
        
          JAVASCRIPT
        
        
          FRONT-END
        
        
          BACK-END
        
        
          FULL STACK
        
      
    
  
  
  
    $('.ui.dropdown').dropdown();
  

  

输出：

语义 UI 下拉选择类型

示例 3：以下示例说明了 Semantic-UI 下拉搜索选择类型。

HTML

  

    
    
    
    
    

  

    
        Geeksforgeeks
        Semantic UI Search Selection Dropdown Type
        
        
        
            Select Languages
            C
            C++
            Java
            Python
            C#
            JavaScript
        
        
  
    
        $('.ui.dropdown').dropdown();
    

输出：

语义 UI 下拉类型

示例 4：以下示例说明了 Semantic-UI Dropdown多选类型。

HTML

  

    
    
    
    
    

  

  
    
      
        GeeksforGeeks
      
  
      Semantic-UI Dropdown Multiple Selection Type
      
        
        Departments
        
        
        HR
        
        
        Sales
        
        
        Marketing
        
        
        Development
        
        
        Testing
        
        
        Delivery
        
      
    
  
    
  
    $('.ui.dropdown').dropdown();
  

  

输出：

语义 UI 下拉类型

示例 5：以下示例说明了 Semantic-UI Dropdown多重搜索选择类型。

HTML

  

    Semantic-UI Dropdown Types
    
    
    
    
    

  

    
        
            
                GeeksforGeeks
            
            Semantic-UI Dropdown Multiple Search Selection Type
            
                Company Name
                GeeksforGeeks
                Apple
                Amazon
            
        
        
            $('.ui.dropdown').dropdown();
        
    

  

输出：

语义 UI 下拉类型

示例 6：以下示例说明了 Semantic-UI Dropdown搜索下拉类型。

HTML

  

    Semantic-UI Dropdown Types
    
    
    
    
    

  

    
        Geeksforgeeks
        Semantic UI Search Selection Dropdown Type
        
        
  
        
              
              Select Course
              
                DSA
                OOP's
                DBMS
                OS
              
        
        
  
    
        $('.ui.dropdown').dropdown();
    

    

输出：

语义 UI 下拉类型

示例 7：以下示例说明了 Semantic-UI 下拉内联类型。

HTML

    Semantic-UI Dropdown Types
    
    

    



    
        
        GeeksforGeeks
        Semantic UI Dropdown Inline Type
        
        
        Inline Dropdown:
         This is a 
            
                Dropdown
                
                
                    
                        option 1
                    
                    
                        option 2
                    
                    
                        option 3
                    
                    
                        option 4
                    
                    
                        option 5
                    
                
            
        inline with text .
        
        
            $('.ui.dropdown').dropdown();
        
    

输出：

语义 UI 下拉类型

示例 8：下面的示例说明了 Semantic-UI Dropdown Pointing Type。

HTML

  

    Semantic-UI Dropdown Types
    
    
    
    
    

  

    
        
        GeeksforGeeks
        
            Semantic UI Dropdown Pointing Type
        
        
         Choose your road and path:
        
        
            
                North Road
                
                    Bottom pointing dropdown
                    Path 1
                    Path 2
                
            
            
            
                Right Road
                
                    Right pointing dropdown
                    Path 1
                    Path 2
                
            
            
                Left Road
                
                    Left pointing dropdown
                    Path 1
                    Path 2
                
            
            
            
                South Road
                
                    Top pointing dropdown
                    Path 1
                    Path 2
                
            
        
  
        
            $('.ui.dropdown').dropdown();
        
    

输出：

语义 UI 下拉类型

示例 9：以下示例说明了 Semantic-UI Dropdown Floating类型。

HTML

  

  Semantic-UI Dropdown Types
  
  
  
  
  
  
  

  

  
    Geeksforgeeks
    Semantic UI floating Type
    
  
    
      Select
      
        
        
          
            
            Mail Us
          
          
            
            Contac Us
          
        
      
    
      
  
  
      $('.ui.dropdown').dropdown();
  

  

输出：

语义 UI 下拉类型

示例 10：下面的示例说明了 Semantic-UI Dropdown Simple Type。

HTML

    
    

  

    

        


        
GeeksforGeeks
            
            
Semantic UI Dropdown Simple Type
        
        

        

        Simple Dropdown:
        


        

            

                 Access
                
                

                    
Public
                    
Private
                    
Protected
                
            
        
    

    

输出：

语义 UI 下拉类型

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