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 various types of Dimmers. Let’s have a look at the various dimmer type classes before understanding the dimmer types.
Semantic UI Dimmer Type:
- Dimmer: Creates a standard Semantic UI dimmer.
- Content: This class is used to create content in a dimmer container.
- Page: This class is used to create a dimmer which spans across the entire page.
Let’s have a look at the various Dimmer Types that are Standard Dimmer, Content Dimmer, and Page Dimmer.
Syntax:
<div class="ui Dimmer-Type dimmer">
<div class="content">
...
</div>
</div>Example 1: In the below example, we have created a standard dimmer.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dimmer Types</title>
<link href=
rel="stylesheet" />
<script src=
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body style="width:100vw; height:100vh;">
<div class="ui container">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h4>Semantic UI Dimmer Types</h4>
<hr>
<br/>
<div class="ui segment">
<div class="ui dimmer">
</div>
<p>This is a standard Dimmer</p>
<p>This is a standard Dimmer</p>
<p>This is a standard Dimmer</p>
<p>This is a standard Dimmer</p>
<p>This is a standard Dimmer</p>
<p>This is a standard Dimmer</p>
<p>This is a standard Dimmer</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:
Semantic-UI Dimmer Types
Example 2: In the below example, we have created a dimmer with content.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dimmer Types</title>
<link href=
rel="stylesheet" />
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body style="width: 100vw; height: 100vh;">
<div class="ui container">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h4>Semantic UI Dimmer Types</h4>
<hr>
<br />
<div class="ui segment">
<div class="ui dimmer">
<div class="content">
<h2 class="ui icon inverted header">
<i class="hand point up icon"></i>
Content Dimmer
</h2>
</div>
</div>
<p>This is a Content Dimmer</p>
<p>This is a Content Dimmer</p>
<p>This is a Content Dimmer</p>
<p>This is a Content Dimmer</p>
<p>This is a Content Dimmer</p>
<p>This is a Content Dimmer</p>
<p>This is a Content Dimmer</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:
Semantic-UI Dimmer Types
Example 3: In the below example, we have created a page dimmer.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dimmer Types</title>
<link href=
rel="stylesheet" />
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body style="width:100vw; height:100vh;">
<div class="ui container">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h4>Semantic UI Dimmer Types</h4>
<hr>
<br />
<div class="ui segment">
<div class="ui page dimmer">
<div class="content">
<h2 class="ui icon inverted header">
<i class="hand point down icon"></i>
Page Dimmer
</h2>
</div>
</div>
<p>This is a Page Dimmer</p>
<p>This is a Page Dimmer</p>
<p>This is a Page Dimmer</p>
<p>This is a Page Dimmer</p>
<p>This is a Page Dimmer</p>
<p>This is a Page Dimmer</p>
<p>This is a Page Dimmer</p>
</div>
<button class="ui button"
onclick="openDimmer()">
Open
</button>
</div>
<script>
const openDimmer = () => {
$('.dimmer').dimmer('show');
}
</script>
</body>
</html>
|
Output:
Semantic-UI Dimmer Types
Reference: https://semantic-ui.com/modules/dimmer.html