Semantic-UI 简单调光器变体

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

Semantic UI Dimmer 用于隐藏干扰或网站内容并将焦点移至主要内容。它可用于查看重要的更新或通知。

Semantic UI Simple Dimmer Variation 用于在没有 javascript 的情况下控制调光器。可以使用父容器类控制调光器。

语义 UI 简单调光器变体类：

• simple dimmer：用于在没有 javascript 的情况下显示调光器。

语法：将类simple添加到调光器容器中。那么父类应该是ui dimmable dimmed 。

    ...
    

        ...
    
    ...

示例：在以下示例中，我们将在容器上创建一个简单的调光器。

HTML

  

    
    
    
    
    
    
    

  

    
        
            
                GeeksforGeeks
            
  
            
                Semantic UI Simple Dimmer Variation
            
        
  
        
            
                
                    Welcome to GeeksforGeeks
                    
                    
                        Hide
                    
                
            
            
                Welcome to GeeksforGeeks
                Find the best programming tutorials here.
                
                    Show
                
            
        
    
      
    
        const showDimmer = () => {
            $('#gfgdimmer').dimmer('show')
        }
        const hideDimmer = () => {
            $('#gfgdimmer').dimmer('hide')
        }
    

  

输出：

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