Semantic-UI Dimmer Active State
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> < script src = "https://code.jquery.com/jquery-3.1.1.min.js" ></ script > < style > .ui.container { text-align: center; } </ style > </ head > < body > < div class = "ui container" > < div > < h1 style = "color:green" > w3wiki </ h1 > < strong >Semantic UI - Dimmer Active State</ strong > </ div > < div class = "ui segment" > < div class = "ui dimmer active" ></ div > < p > w3wiki is a computer science portal for Beginner. 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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> < script src = "https://code.jquery.com/jquery-3.1.1.min.js" > </ script > < style > .ui.container { text-align: center; } </ style > </ head > < body > < div class = "ui container" > < div > < h1 style = "color:green" > w3wiki </ h1 > < strong > Semantic UI - Dimmer Active State with Content </ strong > </ div > < div class = "ui segment" > < div class = "ui dimmer active" > <!-- Dimmer Content --> < div class = "content" > < p >Active Dimmer with Content.</ p > </ div > </ div > < p > w3wiki is a computer science portal for Beginner. 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