Semantic-UI Page Dimmer Type
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 a way to span the dimmer across the entire page, simply by using the page class.
Semantic UI Content Dimmer Type:
- page: This class is used so the dimmer can be formatted to be fixed to the page.
Syntax:
<div class="ui page dimmer"> <div class="content"> ... </div> </div>
Example 1: In the below example, we have created a standard semantic dimmer that spans across the entire page.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic UI Dimmer Page Type</ 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;" >w3wiki</ h2 > < h4 >Semantic UI Dimmer Page Type</ h4 > < hr > < br /> < div class = "ui segment" > < div class = "ui page dimmer" > < div class = "content" > < h2 style = "color: green;" class = "ui icon inverted header" > < i class = "star outline icon" ></ i > We just want to let you know that w3wiki 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()" > Show </ button > </ div > < script > const openDimmer = () => { $('.dimmer').dimmer('show'); } </ script > </ body > </ html > |
Output:
Example 2: In the below example, we have created a blurred dimmer that spans across the entire page.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic UI Dimmer Page Type</ 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 class = "ui blurring" style = "width: 100vw; height: 100vh;" > < div class = "ui page dimmer" > < div class = "content" > < h2 style = "color: green;" class = "ui icon inverted header" > < i class = "star outline icon" ></ i > We just want to let you know that w3wiki is Awesome! </ h2 > </ div > </ div > < div class = "ui container" > < h2 style = "color: green;" >w3wiki</ h2 > < h4 >Semantic UI Dimmer Page Type</ h4 > < hr > < br /> < div class = "ui segment" > < 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()" > Show </ button > </ div > < script > const openDimmer = () => { $('.dimmer').dimmer('show'); } </ script > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/modules/dimmer.html#page-dimmer