Open In App

Semantic-UI Dimmer States

Improve
Improve
Like Article
Like
Save
Share
Report

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. Semantic UI provides us with a very easy way to style the web app instead of using CSS. To focus attention on a specific element and hide other distractions, we use Dimmer. Semantic-UI offers dimmers in different variations, types, groups, and states.

In this article, we will learn about the Semantic-UI Dimmer States along with implementation and example codes.

Semantic-UI Dimmer States: Semantic-UI offers Dimmer in two different states which include active and disabled. Let us now understand each of them.

  • Active: The parent container will be dimmed by a dimmer inactive state. It makes the parent container dark but still displays content in the segment.
  • Disabled: In the Semantic-UI dimmer disabled state, we can observe that dimmer cannot be activated. It is similar to a normal segment and we cannot focus attention on a specific element and hide other distractions.

Syntax :

<div class="ui segment">
  <div class="ui Dimmer-State dimmer">
      ...
  </div>
</div>

Example 1: In this example, we can observe that the parent container is dark.

HTML




<html>
 
<head>
    <title>Semantic-UI Dimmer State</title>
    <link href=
          rel="stylesheet"/>
 
     <script src=
             integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
             crossorigin="anonymous">
   </script>
 
    <script src=
    </script>
</head>
 
<body>
  <center>
    <div class="ui container">
      <h2 class="ui header green">
        Geeksforgeeks
      </h2>
      <strong>
        Semantic-UI Dimmer Active State
      </strong><br><br>
       
      <div class="ui segment">
        <div class="ui active dimmer"></div>
         
<p>
          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
        </p>
 
      </div>
    </div>
  </center>
</body>
</html>


Output :

Semantic-UI Dimmer States

Semantic-UI Dimmer States

Example 2: In this example, we can observe that dimmer cannot be activated.

HTML




<html>
   
<head>
    <title>Semantic-UI Dimmer Disabled State</title>
 
    <link href=
          rel="stylesheet"/>
     <script src=
             integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
             crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
 
<body>
  <center>
    <div class="ui container">
      <h2 class="ui header green">
        Geeksforgeeks
      </h2>
 
      <strong>
        Semantic-UI Dimmer Disabled State
      </strong><br><br>
       
      <div class="ui segment">
        <div class="ui disabled dimmer"></div>
         
<p>
          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
        </p>
 
      </div>
    </div>
  </center>
</body>
 
</html>


Output :

Semantic-UI Dimmer States

Semantic-UI Dimmer States

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



Last Updated : 20 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads