Semantic-UI 下拉滚动变化

Semantic UI 是一个开源框架，它为我们提供了特殊的类来创建令人惊叹的响应式用户界面。它利用 jQuery 和 CSS 创建令人愉悦的用户界面，非常类似于 bootstrap。它有许多类用于在 HTML 网页结构中设置不同元素的样式。在本文中，我们将了解 Semantic UI Dropdown Scrolling Variation。

下拉菜单是网页中最常用的输入法之一。 Semantic UI 为下拉内容的格式提供了专门的类。滚动下拉菜单是下拉菜单的一种特殊情况，其中下拉菜单是可滚动的。在下拉项目数量很大的情况下，它非常有用。要创建滚动下拉菜单，我们使用主 div 中的滚动类。这使得完整的下拉列表可滚动，这意味着下拉列表一开始只会显示前 6 个选项，并且在滚动时会显示所有项目。

Semantic-UI 下拉滚动变体类：

• 滚动：此类用于使下拉菜单可滚动。

句法：

   ...

要实例化下拉函数，我们使用以下语法：

句法：

    $('.ui.dropdown').dropdown();

示例：这里是一个描述正常语义 UI 下拉列表和可滚动语义 UI 下拉列表的示例。

HTML

 

    Index
    

 

    
        
      Normal DropDown
    
 
        
        
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
        
    
 
    
        
      Scrolling DropDown
    
 
        
        
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
        
    
 
    
    
     
    
    
   
    
        $('.ui.dropdown').dropdown();
    

 

输出：

输出

注意：滚动下拉菜单与子菜单的使用不兼容。

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