Semantic-UI Dimmer States
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
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
Reference: https://semantic-ui.com/modules/dimmer.html#states
Last Updated :
20 Apr, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...