La interfaz de usuario semántica es un marco de interfaz de usuario de código abierto que utiliza CSS y jQuery para permitir que los desarrolladores desarrollen excelentes experiencias web más rápido. También se puede usar con otros marcos CSS como Bootstrap .
Se utiliza un módulo Dimmer para que el usuario se concentre en un contenido específico y atenúe las otras distracciones. En este artículo, veremos el estado activo del atenuador en la interfaz de usuario semántica. Un atenuador activo atenuará su contenedor principal.
Clases de estado activo del atenuador de interfaz de usuario semántica:
- active : esta clase se usa en el módulo dimmer para activarlo.
Sintaxis:
<div class="ui dimmer active"></div>
Ejemplo 1: El siguiente ejemplo muestra un atenuador activo simple con atenuaciones en su contenedor principal.
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">
GeeksforGeeks
</h1>
<strong>Semantic UI - Dimmer Active State</strong>
</div>
<div class="ui segment">
<div class="ui dimmer active"></div>
<p>
GeeksforGeeks is a computer science portal
for geeks. 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>
Producción:
Ejemplo: El siguiente ejemplo muestra un atenuador activo con contenido.
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">
GeeksforGeeks
</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>
GeeksforGeeks is a computer science
portal for geeks. 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>
Producción:
Referencia: https://semantic-ui.com/modules/dimmer.html#active