Semantic-UI Dimmer Active State
Last Updated :
14 Mar, 2022
Semantic UI is an open-source UI framework that uses CSS and jQuery to enable developers to develop great web experiences faster. It can also be used with other CSS frameworks like Bootstrap.
A Dimmer module is used to make the user focus on specific content and dims the other distractions. In this article, we will be seeing the Dimmer Active State in Semantic UI. An active dimmer will dim its parent container.
Semantic UI Dimmer Active State Classes:
- active: This class is used on the dimmer module to make it active.
Syntax:
<div class="ui dimmer active"></div>
Example1: The below example shows a simple active dimmer with dims its parent container.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI - Dimmer Active State</ title >
< link rel = "stylesheet" href =
< style >
.ui.container {
text-align: center;
}
</ style >
</ head >
< body >
< div class = "ui container" >
< div >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< strong >Semantic UI - Dimmer Active State</ strong >
</ div >
< div class = "ui segment" >
< div class = "ui dimmer active" ></ div >
< p >
GeeksforGeeks is a computer science portal
for geeks. You can read article on various
computer science subjects like Data
Structures, Algorithms, DBMS , etc.
You can also enroll in courses to get video
lectures on various subjects.
</ p >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example: The below example shows an active dimmer with content.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI - Dimmer Active State with Content</ title >
< link rel = "stylesheet" href =
</ script >
< style >
.ui.container {
text-align: center;
}
</ style >
</ head >
< body >
< div class = "ui container" >
< div >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< strong >
Semantic UI - Dimmer Active
State with Content
</ strong >
</ div >
< div class = "ui segment" >
< div class = "ui dimmer active" >
< div class = "content" >
< p >Active Dimmer with Content.</ p >
</ div >
</ div >
< p >
GeeksforGeeks is a computer science
portal for geeks. You can read article
on various computer science subjects
like Data Structures, Algorithms, DBMS,
etc. You can also enroll in courses to
get video lectures on various subjects.
</ p >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://semantic-ui.com/modules/dimmer.html#active
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...