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 a great approach to direct the user’s attention to a certain portion of the website while disregarding distractions. A dimmer can be used to obscure unwanted information and draw the user’s attention to a specific portion of the webpage. Semantic UI provides us with an awesome approach to display dimmer content.
Semantic UI Content Dimmer Type Class:
- content: Creates a container for the dimmer content.
Syntax:
<div class="ui dimmer"> <div class="content"> ... </div> </div>
Example 1: In the below example, we have created a standard dimmer with content.
<!DOCTYPE html> < html >
< head >
< title >Semantic UI Dimmer Content Type</ title >
< link href =
rel = "stylesheet" />
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body style = "width: 100vw; height: 100vh;" >
< div class = "ui container" >
< h2 style = "color: green;" >GeeksForGeeks</ h2 >
< h4 >Semantic UI Dimmer Content Type</ h4 >
< hr >
< br />
< div class = "ui segment" >
< div class = "ui dimmer" >
< div class = "content" >
< h2 class = "ui icon inverted header" >
< i class = "star outline icon" ></ i >
We just want to let you know
that GeeksForGeeks is Awesome!
</ h2 >
</ div >
</ 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. It uses a class to add CSS to the elements.
</ p >
< 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. It uses a class to add CSS to the elements.
</ p >
< 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. It uses a class to add CSS to the elements.
</ p >
< 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. It uses a class to add CSS to the elements.
</ p >
</ div >
< button class = "ui button" onclick = "openDimmer()" >
Open
</ button >
< button class = "ui button" onclick = "closeDimmer()" >
Close
</ button >
</ div >
< script >
const openDimmer = () => {
$('.dimmer').dimmer('show');
}
const closeDimmer = () => {
$('.dimmer').dimmer('hide');
}
</ script >
</ body >
</ html >
|
Output:
Example 2: In the below example, we have created a dimmer with content and a blurred background.
<!DOCTYPE html> < html >
< head >
< title >Semantic UI Dimmer Content Type</ title >
< link href =
rel = "stylesheet" />
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body style = "width: 100vw; height: 100vh;" >
< div class = "ui container" >
< h2 style = "color: green;" >GeeksForGeeks</ h2 >
< h4 >Semantic UI Dimmer Content Type</ h4 >
< hr >
< br />
< div class = "ui blurring segment" >
< div class = "ui dimmer" >
< div class = "content" >
< h2 class = "ui icon inverted header" >
< i class = "star outline icon" ></ i >
We just want to let you know
that GeeksForGeeks is Awesome!
</ h2 >
</ div >
</ 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. It uses a class to add CSS to the elements.
</ p >
< 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. It uses a class to add CSS to the elements.
</ p >
< 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. It uses a class to add CSS to the elements.
</ p >
< 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. It uses a class to add CSS to the elements.
</ p >
</ div >
< button class = "ui button"
onclick = "openDimmer()" >
Open
</ button >
< button class = "ui button" onclick = "closeDimmer()" >
Close
</ button >
</ div >
< script >
const openDimmer = () => {
$('.dimmer').dimmer('show');
}
const closeDimmer = () => {
$('.dimmer').dimmer('hide');
}
</ script >
</ body >
</ html >
|
Output:
Reference: https://semantic-ui.com/modules/dimmer.html#content-dimmer