Semantic-UI 侧边栏宽度变化

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

语义 UI 侧边栏用于放置附加链接，以便我们可以轻松导航到 Web 应用程序的不同位置。侧边栏元素将网页的一部分隐藏在其下方以显示页面。

Semantic UI Sidebar Width Variation 设置侧边栏的宽度。侧边栏可以显示为从非常薄到非常宽的不同尺寸，从而有助于满足网页的所有可能需求和要求。

语义 UI 侧边栏宽度变化类：

• thin ：添加此类以使侧边栏变薄。
• 非常薄：添加这个类使侧边栏非常薄。
• normal：对于正常大小，我们不需要在侧边栏添加任何类。
• 宽：添加此类以使侧边栏变宽。
• 非常宽：添加此类以使侧边栏非常宽。

语法：将上述类中所需的宽度添加到侧边栏，如下所示：

 
    ...

示例：在以下示例中，我们有五个按钮用于侧边栏的不同宽度变化。

HTML

  

    
    
    
    
    
    
    

  

    
        
            
                Data Structures
            
            
                Algorithms
            
            
                Machine Learning
            
            
                Close Sidebar
            
        
        
            
                
                    
                        GeeksforGeeks
                    
                
                
                    Semantic UI Sidebar Width Variation
                
            
            
                Welcome to GeeksforGeeks
  
                Find the best programming tutorials here.
  
                
                    
                        
                            Thin
                        
                        
                            Very Thin
                        
                        
                            Normal
                        
                        
                            Wide
                        
                        
                            Very Wide
                        
                    
                    
                        Open Sidebar
                    
                
            
        
    
  
    
        const changeWidth = (width) => {
            $('.ui.sidebar')
                .removeClass('thin')
                .removeClass('very thin')
                .removeClass('wide')
                .removeClass('very wide')
            $('.ui.sidebar').addClass(width)
        }
        const openSidebar = () => {
            $('.ui.sidebar').sidebar('toggle')
        }
    

  

输出：

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