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. La variación del atenuador invertido de la interfaz de usuario semántica se utiliza para invertir los colores del atenuador. Los colores dentro del atenuador también se invierten.
Clases de variación de atenuación invertida de interfaz de usuario semántica:
- invertido : esta clase invertirá los colores del dimmer.
Sintaxis : agregue la clase invertida al dimmer de la siguiente manera:
<div class="ui inverted dimmer">
...
</div>
Ejemplo : en el siguiente ejemplo, tenemos un atenuador invertido en un 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>
<style>
.icon {
margin: 16px;
}
</style>
</head>
<body>
<div class="ui container">
<center>
<div class="ui header green">
<h1>
GeeksforGeeks
</h1>
</div>
<strong>
Semantic UI Inverted Dimmer Variation
</strong>
</center>
<div class="ui segment" id="gfgdimmer">
<div class="ui inverted dimmer" id="dimmer">
<div class="content">
<h3 style="color: black;">
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
Variación de atenuación invertida de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/dimmer.html#inverted-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