Semantic-UI Dimmer Disabled State - Coding

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 an excellent way to get the user’s attention to a specific part of the webpage, ignoring the distractions. A dimmer can be enabled and disabled at will based on the user’s behavior or interactivity. Semantic UI provides us with the disabled class to disable a dimmer.

Semantic UI Dimmer Disabled State Classes:

disabled: This class is used to make the dimmer disabled.

Syntax:

<div class="ui segment">
  <div class="ui disabled dimmer"></div>
  <p></p>
  <p></p>
</div>

Example 1: In the below example, we have created a dimmer which is disabled.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Dimmer Disabled State</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
            integrity=
            "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous">
        </script>
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body style="width: 100vw; height: 100vh;">
 
    <div class="ui container">
        <h2 style="color: green;">GeeksForGeeks</h2>
        <h4>Semantic UI Dimmer Disabled State</h4>
        <hr>
        <br />
        <div class="ui segment">
            <div class="ui disabled dimmer"></div>
             
 
<p>
              Greetings to all the Geeks out there! We welcome
              you to the platform where we consistently strive
              to offer the best of education.
            </p>
 
 
 
             
 
<p>
              This platform has been designed for every geeks
              wishing to expand knowledge, share their knowledge
              and is ready to grab their dream job. We have millions 
              of articles,live as well as online courses, thousands 
              of tutorials and much more just for the geek inside you. 
              Thank you for choosing and supporting us!
            </p>
 
 
 
             
 
<p>
              GeeksForGeeks is an amazing website to learn coding.
            </p>
 
 
 
             
 
<p>
              Machine Learning, Web Development, Android Development,
              Data Science, you name it, it's all available on 
              GeeksForGeeks.
            </p>
 
 
 
        </div>
    </div>
 
    <script>
        $('.dimmer').dimmer('show');
    </script>
</body>
 
</html>

Output:

Semantic-UI Dimmer Disabled State

Example 2: In the below example, we disabled and enabled the dimmer at will.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Semantic UI Dimmer Disabled State</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous">
        </script>
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body style="width: 100vw; height: 100vh;">
 
    <div class="ui container">
        <h2 style="color: green;">GeeksForGeeks</h2>
        <h4>Semantic UI Dimmer Disabled State</h4>
        <hr>
        <br />
        <div class="ui segment">
            <div class="ui dimmer"></div>
             
 
<p>
              Greetings to all the Geeks out there! We welcome
              you to the platform where we consistently strive
              to offer the best of education.
            </p>
 
 
 
             
 
<p>
              This platform has been designed for every geeks
              wishing to expand knowledge, share their knowledge
              and is ready to grab their dream job. We have millions 
              of articles,live as well as online courses, thousands 
              of tutorials and much more just for the geek inside you. 
              Thank you for choosing and supporting us!
            </p>
 
 
 
             
 
<p>
              GeeksForGeeks is an amazing website to learn coding.
            </p>
 
 
 
             
 
<p>
              Machine Learning, Web Development, Android Development,
              Data Science, you name it, it's all available on 
              GeeksForGeeks.
            </p>
 
 
 
        </div>
        <button class="ui button" onclick="enable()">Enable</button>
        <button class="ui button" onclick="disable()">Disable</button>
        <button class="ui button" onclick="hide()">Hide</button>
        <button class="ui button" onclick="show()">Show</button>
 
    </div>
    <script>
        const dimmer = document.querySelector(".dimmer");
        const enable = () => {
            dimmer.classList.remove("disabled");
        }
        const disable = () => {
            dimmer.classList.add("disabled");
        }
        const hide = () => {
            $('.dimmer').dimmer('show');
        }
        const show = () => {
            $('.dimmer').dimmer('hide');
        }
    </script>
</body>
 
</html>

Output:

Semantic-UI Dimmer Disabled State

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

Reffered: https://www.geeksforgeeks.org

CSS

Related
Semantic-UI Menu Borderless Variation
Semantic-UI Reveal States
Semantic-UI Menu Dropdown Item Content
Semantic-UI Menu Search Content
Foundation CSS Prototyping Utilities Display Classes

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	9