语义 UI 调光器类型

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

Dimmer是一种很好的方法，可以将用户的注意力引导到网站的某个部分，同时忽略干扰。调光器可用于隐藏不需要的信息并将用户的注意力吸引到网页的特定部分。 Semantic UI 为我们提供了各种类型的调光器。在了解调光器类型之前，让我们先看看各种调光器类型类。

语义 UI 调光器类型：

• 调光器：创建标准语义 UI 调光器。
• Content ：此类用于在调光器容器中创建内容。
• Page ：这个类用于创建一个跨越整个页面的调光器。

让我们看看标准调光器、内容调光器和页面调光器的各种调光器类型。

句法：

  

    ...
  

示例 1：在下面的示例中，我们创建了一个标准调光器。

HTML

    Semantic UI Dimmer Types
    
  
    
    
    
    

  

  
    
        
          GeeksforGeeks
        
        Semantic UI Dimmer Types
        
        
        
            
            
            This is a standard Dimmer
            This is a standard Dimmer
            This is a standard Dimmer
            This is a standard Dimmer
            This is a standard Dimmer
            This is a standard Dimmer
            This is a standard Dimmer
  
        
        
          Open
        
        
          Close
        
    
    
        const openDimmer = () => {
            $('.dimmer').dimmer('show');
        }
        const closeDimmer = () => {
            $('.dimmer').dimmer('hide');
        }
    

输出：

语义 UI 调光器类型

示例 2：在下面的示例中，我们创建了一个带有content的调光器。

HTML

  

    Semantic UI Dimmer Types
    
  
    
    
  
    
    

  

  
    
        
          GeeksforGeeks
        
        Semantic UI Dimmer Types
        
        
        
            
                
                    
                        
                        Content Dimmer
                    
                
            
            This is a Content Dimmer
            This is a Content Dimmer
            This is a Content Dimmer
            This is a Content Dimmer
            This is a Content Dimmer
            This is a Content Dimmer
            This is a Content Dimmer
        
        
          Open
        
        
          Close
        
    
    
        const openDimmer = () => {
            $('.dimmer').dimmer('show');
        }
        const closeDimmer = () => {
            $('.dimmer').dimmer('hide');
        }
    

输出：

语义 UI 调光器类型

示例 3：在下面的示例中，我们创建了一个页面调光器。

HTML

  

    Semantic UI Dimmer Types
    
  
    
    
    
    

  

  
    
        
          GeeksforGeeks
        
        Semantic UI Dimmer Types
        
        
        
            
                
                    
                        
                        Page Dimmer
                    
                
            
            This is a Page Dimmer
            This is a Page Dimmer
            This is a Page Dimmer
            This is a Page Dimmer
            This is a Page Dimmer
            This is a Page Dimmer
            This is a Page Dimmer
        
        
          Open
        
    
  
    
        const openDimmer = () => {
            $('.dimmer').dimmer('show');
        }
    

输出：

语义 UI 调光器类型

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