Semantic-UI 页面调光器类型

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

Dimmer是一种很好的方法，可以将用户的注意力引导到网站的某个部分，同时忽略干扰。调光器可用于隐藏不需要的信息并将用户的注意力吸引到网页的特定部分。语义 UI 为我们提供了一种将调光器跨越整个页面的方法，只需使用页面类即可。

语义 UI 内容调光器类型：

• page：使用此类，因此可以将调光器格式化为固定在页面上。

句法：

  

    ...
  

示例 1：在下面的示例中，我们创建了一个跨越整个页面的标准语义调光器。

HTML

  

    Semantic UI Dimmer Page Type
    
  
    
    
    
    

  

  
    
        GeeksForGeeks
        Semantic UI Dimmer Page Type
        
        
        
            
                
                    
                        
                        We just want to let you know 
                        that GeeksForGeeks is Awesome!
                    
                
            
            Semantic UI is an open-source framework that uses
               CSS and jQuery to build great user interfaces. It is
               the same as a bootstrap for use and has great different
               elements to use to make your website look more
               amazing. It uses a class to add CSS to the elements. 
            
  
            Semantic UI is an open-source framework that uses
               CSS and jQuery to build great user interfaces. It is
               the same as a bootstrap for use and has great different
               elements to use to make your website look more
               amazing. It uses a class to add CSS to the elements. 
            
  
            Semantic UI is an open-source framework that uses
               CSS and jQuery to build great user interfaces. It is
               the same as a bootstrap for use and has great different 
               elements to use to make your website look more
               amazing. It uses a class to add CSS to the elements.
            
  
            Semantic UI is an open-source framework that uses 
               CSS and jQuery to build great user interfaces. It is
               the same as a bootstrap for use and has great different
               elements to use to make your website look more
               amazing. It uses a class to add CSS to the elements. 
            
  
        
        
          Show
        
    
    
        const openDimmer = () => {
            $('.dimmer').dimmer('show');
        }
    

  

输出：

Semantic-UI 页面调光器类型

示例 2：在下面的示例中，我们创建了一个横跨整个页面的模糊调光器。

HTML

  

    Semantic UI Dimmer Page Type
    
  
    
        
  
    
    

  

  
    
        
            
                
                We just want to let you know that
                GeeksForGeeks is Awesome!
            
        
    
  
    
        GeeksForGeeks
        Semantic UI Dimmer Page Type
        
        
        
            Semantic UI is an open-source framework that uses
               CSS and jQuery to build great user interfaces. It is
               the same as a bootstrap for use and has great 
               different elements to use to make your website look more
               amazing. It uses a class to add CSS to the elements.
            
            Semantic UI is an open-source framework that uses 
               CSS and jQuery to build great user interfaces. It is
               the same as a bootstrap for use and has great different
               elements to use to make your website look more
               amazing. It uses a class to add CSS to the elements.
            
            Semantic UI is an open-source framework that uses
               CSS and jQuery to build great user interfaces. It is
               the same as a bootstrap for use and has great different
               elements to use to make your website look more
               amazing. It uses a class to add CSS to the elements.
            
  
            Semantic UI is an open-source framework that uses 
               CSS and jQuery to build great user interfaces. It is
               the same as a bootstrap for use and has great different
               elements to use to make your website look more
               amazing. It uses a class to add CSS to the elements.
            
  
        
        
          Show
        
    
    
        const openDimmer = () => {
            $('.dimmer').dimmer('show');
        }
    

输出：

Semantic-UI 页面调光器类型

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