La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
Semantic UI Dimmer se utiliza para ocultar las distracciones o el contenido del sitio y mover el foco al contenido principal. Se puede usar para ver actualizaciones o notificaciones importantes.
Semantic UI Simple Dimmer Variation se utiliza para controlar un atenuador sin javascript. El atenuador se puede controlar mediante la clase de contenedor principal.
Clases de variación de dimmer simple de interfaz de usuario semántica:
- dimmer simple: se utiliza para mostrar dimmer sin javascript.
Sintaxis : agregue la clase simple al contenedor de dimmer. Luego, la clase principal debe ser ui dimmable dimmed .
<div class="ui dimmable dimmed segment" id="gfgdimmer">
...
<div class="ui simple dimmer">
...
</div>
...
</div>
Ejemplo: En el siguiente ejemplo, crearemos un atenuador simple en el contenedor.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<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"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<center>
<div class="ui header green">
<h1>GeeksforGeeks</h1>
</div>
<strong>
Semantic UI Simple Dimmer Variation
</strong>
</center>
<div class="ui dimmable dimmed segment" id="gfgdimmer">
<div class="ui simple dimmer" id="dimmer">
<div class="content">
<h3>Welcome to GeeksforGeeks</h3>
<br />
<button class="ui red button"
onclick="hideDimmer()">
Hide
</button>
</div>
</div>
<div class="content">
<h1>Welcome to GeeksforGeeks</h1>
<p>Find the best programming tutorials here.</p>
<button class="ui green button"
onclick="showDimmer()">
Show
</button>
</div>
</div>
</div>
<script>
const showDimmer = () => {
$('#gfgdimmer').dimmer('show')
}
const hideDimmer = () => {
$('#gfgdimmer').dimmer('hide')
}
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/modules/dimmer.html#simple-dimmer
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA