语义 UI 侧边栏状态

Semantic UI是一个开源框架，它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可用于使您的网站看起来更令人惊叹。它使用一个类将 CSS 添加到元素中。

除非需要，否则边栏是向用户隐藏其他内容的好方法。 Semantic UI 为我们提供了一个样式化的侧边栏。在进入侧边栏状态之前，让我们看一下各种侧边栏状态类。

语义 UI 侧边栏状态：

• Visible ：这用于将侧边栏设置为在初始屏幕加载时可见。
• Dimmed ：这用于在切换侧边栏时使推送器容器变暗。

句法：

    ...

示例 1：在下面的示例中，我们创建了一个可见的侧边栏，它始终在屏幕加载时出现。

HTML

    Semantic UI Sidebar States
    
  
    
    
  
    
    

  

    
        Web Development
        Machine Learning
        Data Science
        Blockchain
    
    
        GeeksforGeeks
        Semantic UI Sidebar States
        
        
    

输出：

语义 UI 侧边栏状态

示例 2：在下面的示例中，我们创建了一个暗淡的推送器，当侧边栏被切换时，推送的内容总是暗淡的。

HTML

  

    Semantic UI Sidebar States
    
  
    
    
  
    
    

  

    
        Web Development
        Machine Learning
        Data Science
        Blockchain
    
    
        GeeksforGeeks
        Semantic UI Sidebar States
        
        
        
          Toggle Sidebar
        
    
  
    
        const toggle = () => $('.ui.sidebar')
            .sidebar('setting', 'transition', 
            'scale down').sidebar('toggle');
    

输出：

语义 UI 侧边栏状态

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