Semantic UI is the open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive website.
Semantic-UI Dimmer is used to hide distractions and focus on important content. It is used to focus the main content on our webpage and ignore the distractions. In this article, we will discuss Dimmer Variations in Semantic-UI.
Semantic-UI Dimmer Variations:
- Blurring: This variation is used to blur the content.
- Vertical Alignment: This variation is used to align the content on top or bottom.
- Simple Dimmer: This variation can be controlled without using javascript.
- Inverted Dimmer: This variation is used to invert the colors.
Syntax:
<div class="ui Dimmer-Variations-Class segment">
<div class="ui dimmer"></div>
....
</div>Example 1: The following code demonstrates the Semantic-UI Blurring and Vertical Alignment Dimmer Variations.
<!DOCTYPE html><html>
<head>
<title> Semantic UI Dimmer Variations </title>
<link href=
rel="stylesheet"/>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container center aligned">
<h2 class="ui green header"> GeeksforGeeks </h2>
<h3> Semantic UI Dimmer Variations </h3>
<strong>
Blurring:
</strong> <br>
<div class="ui blurring segment" id="blur">
<div class="ui dimmer"></div>
<p></p>
<p></p>
</div>
<button class="ui button" onclick="hide1()">
-
</button>
<button class="ui button" onclick="show1()">
+
</button> <br> <br>
<strong>
Vertical Alignment:
</strong>
<div class="ui segment" id="align">
<div class="ui top aligned dimmer">
<div class="content">
<h5 class="ui inverted header">
Top aligned GFG
</h5>
</div>
</div>
<p>
A Computer Science portal for geeks
</p>
<p>
Computer Science portal
</p>
<p>
Computer Science portal
</p>
</div>
<button class="ui button" onclick="hide2()">
-
</button>
<button class="ui button" onclick="show2()">
+
</button>
</div>
<script>
const hide1 = () => {
$('#blur').dimmer('hide');
}
const show1 = () => {
$('#blur').dimmer('show');
}
const hide2 = () => {
$('#align').dimmer('hide');
}
const show2 = () => {
$('#align').dimmer('show');
}
</script>
</body>
</html>
|
Output:
Example 2: The following code demonstrates the Semantic-UI Simple Dimmer and Inverted Dimmer Variations.
<!DOCTYPE html><html>
<head>
<title> Semantic UI Dimmer Variations </title>
<link href=
rel="stylesheet"/>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container center aligned">
<h2 class="ui green header"> GeeksforGeeks </h2>
<h3> Semantic UI Dimmer Variations </h3>
<strong>
Simple Dimmer:
</strong> <br>
<div class="ui dimmable dimmed segment" id="simple">
<div class="ui simple dimmer">
<div class="content">
<h3>GeeksforGeeks</h3>
</div>
</div>
<div class="content">
<h1>
A Computer Science portal
</h1>
<p>
portal for geeks
</p>
</div>
</div>
<button class="ui button" onclick="hide1()">
Hide this
</button>
<button class="ui button" onclick="show1()">
Show this
</button> <br> <br>
<strong>
Inverted Dimmer:
</strong>
<div class="ui segment" id="invert">
<div class="ui inverted dimmer"> </div>
<p>
GeeksforGeeks
</p>
<p>
A Computer Science portal
</p>
</div>
<button class="ui button" onclick="hide2()">
-
</button>
<button class="ui button" onclick="show2()">
+
</button>
</div>
<script>
const hide1 = () => {
$('#simple').dimmer('hide');
}
const show1 = () => {
$('#simple').dimmer('show');
}
const hide2 = () => {
$('#invert').dimmer('hide');
}
const show2 = () => {
$('#invert').dimmer('show');
}
</script>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/modules/dimmer.html