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 de alineación vertical del atenuador de interfaz de usuario semántica se utiliza para alinear el contenido del atenuador con la parte superior o inferior del atenuador.
Clases de variación de alineación vertical del atenuador de interfaz de usuario semántica:
- alineado en la parte superior : Esto hace que el contenido del dimmer esté alineado en la parte superior.
- alineado en la parte inferior : Esto hace que el contenido del atenuador se alinee en la parte inferior.
Sintaxis : agregue la alineación deseada al contenedor de dimmer de la siguiente manera:
<div class="ui top aligned dimmer">
...
</div>
Ejemplo : En el siguiente ejemplo, tenemos dos botones para cambiar la alineación del contenido del dimmer.
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 Dimmer Vertical Alignment Variation
</strong>
</center>
<div class="ui segment" id="gfgdimmer">
<div class="ui top aligned 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>
<br />
<br />
<button class="ui button"
onclick="changeAlignment('top')">
Top
</button>
<button class="ui button"
onclick="changeAlignment('bottom')">
Bottom
</button>
</div>
</div>
</div>
<script>
const showDimmer = () => {
$('#gfgdimmer').dimmer('show')
}
const hideDimmer = () => {
$('#gfgdimmer').dimmer('hide')
}
const changeAlignment = (alignment) => {
$('#dimmer').removeClass('top aligned')
.removeClass('bottom aligned')
$('#dimmer').addClass(alignment + ' aligned')
}
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/modules/dimmer.html#vertical-alignment
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA