Skip to content
Related Articles

Related Articles

Semantic-UI Dimmer Types

View Discussion
Improve Article
Save Article
  • Last Updated : 16 Mar, 2022
View Discussion
Improve Article
Save Article

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.

Dimmer is a great approach to direct the user’s attention to a certain portion of the website while disregarding distractions. A dimmer can be used to obscure unwanted information and draw the user’s attention to a specific portion of the webpage. Semantic UI provides us with various types of Dimmers. Let’s have a look at the various dimmer type classes before understanding the dimmer types.

Semantic UI Dimmer Type:

  • Dimmer: Creates a standard Semantic UI dimmer.
  • Content: This class is used to create content in a dimmer container.
  • Page: This class is used to create a dimmer which spans across the entire page.

Let’s have a look at the various Dimmer Types that are Standard Dimmer, Content Dimmer, and Page Dimmer. 

Syntax:

<div class="ui Dimmer-Type dimmer">
  <div class="content">
    ...
  </div>
</div>

Example 1: In the below example, we have created a standard dimmer.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Semantic UI Dimmer Types</title>
    <link href=
          rel="stylesheet" />
  
    <script src=
            crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
  
<body style="width:100vw; height:100vh;">
  
    <div class="ui container">
        <h2 class="ui green header">
          GeeksforGeeks
        </h2>
        <h4>Semantic UI Dimmer Types</h4>
        <hr>
        <br/>
        <div class="ui segment">
            <div class="ui dimmer">
            </div>
            <p>This is a standard Dimmer</p>
            <p>This is a standard Dimmer</p>
            <p>This is a standard Dimmer</p>
            <p>This is a standard Dimmer</p>
            <p>This is a standard Dimmer</p>
            <p>This is a standard Dimmer</p>
            <p>This is a standard Dimmer</p>
  
        </div>
        <button class="ui button"
                onclick="openDimmer()">
          Open
        </button>
        <button class="ui button" 
                onclick="closeDimmer()">
          Close
        </button>
    </div>
    <script>
        const openDimmer = () => {
            $('.dimmer').dimmer('show');
        }
        const closeDimmer = () => {
            $('.dimmer').dimmer('hide');
        }
    </script>
</body>
</html>


Output:

Semantic-UI Dimmer Types

Semantic-UI Dimmer Types

Example 2: In the below example, we have created a dimmer with content.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI Dimmer Types</title>
    <link href=
          rel="stylesheet" />
  
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
            crossorigin="anonymous">
    </script>
  
    <script src=
    </script>
</head>
  
<body style="width: 100vw; height: 100vh;">
  
    <div class="ui container">
        <h2 class="ui green header">
          GeeksforGeeks
        </h2>
        <h4>Semantic UI Dimmer Types</h4>
        <hr>
        <br />
        <div class="ui segment">
            <div class="ui dimmer">
                <div class="content">
                    <h2 class="ui icon inverted header">
                        <i class="hand point up icon"></i>
                        Content Dimmer
                    </h2>
                </div>
            </div>
            <p>This is a Content Dimmer</p>
            <p>This is a Content Dimmer</p>
            <p>This is a Content Dimmer</p>
            <p>This is a Content Dimmer</p>
            <p>This is a Content Dimmer</p>
            <p>This is a Content Dimmer</p>
            <p>This is a Content Dimmer</p>
        </div>
        <button class="ui button" 
                onclick="openDimmer()">
          Open
        </button>
        <button class="ui button" 
                onclick="closeDimmer()">
          Close
        </button>
    </div>
    <script>
        const openDimmer = () => {
            $('.dimmer').dimmer('show');
        }
        const closeDimmer = () => {
            $('.dimmer').dimmer('hide');
        }
    </script>
</body>
</html>


Output:

Semantic-UI Dimmer Types

Semantic-UI Dimmer Types

Example 3: In the below example, we have created a page dimmer.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI Dimmer Types</title>
    <link href=
          rel="stylesheet" />
  
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
            crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
  
<body style="width:100vw; height:100vh;">
  
    <div class="ui container">
        <h2 class="ui green header">
          GeeksforGeeks
        </h2>
        <h4>Semantic UI Dimmer Types</h4>
        <hr>
        <br />
        <div class="ui segment">
            <div class="ui page dimmer">
                <div class="content">
                    <h2 class="ui icon inverted header">
                        <i class="hand point down icon"></i>
                        Page Dimmer
                    </h2>
                </div>
            </div>
            <p>This is a Page Dimmer</p>
            <p>This is a Page Dimmer</p>
            <p>This is a Page Dimmer</p>
            <p>This is a Page Dimmer</p>
            <p>This is a Page Dimmer</p>
            <p>This is a Page Dimmer</p>
            <p>This is a Page Dimmer</p>
        </div>
        <button class="ui button" 
                onclick="openDimmer()">
          Open
        </button>
    </div>
  
    <script>
        const openDimmer = () => {
            $('.dimmer').dimmer('show');
        }
    </script>
</body>
</html>


Output:

Semantic-UI Dimmer Types

Semantic-UI Dimmer Types

Reference: https://semantic-ui.com/modules/dimmer.html


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!