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.
El elemento de interfaz de usuario semántica presenta una gran colección de tipos de datos similares en un sitio web. El elemento puede contener una imagen, encabezado, descripción, botones, fecha, etc. El elemento es la colección de elementos en la interfaz de usuario semántica.
La variación relajada de elementos de la interfaz de usuario semántica hace que haya más relleno disponible para los elementos agrupados para hacer que un elemento sea más espacioso con espacio negativo.
Clases de variación relajada de elemento de interfaz de usuario semántica:
- relajado : esta clase relaja los elementos y agrega algo de relleno.
- muy relajado : esta clase agrega más relleno y es más relajada.
Sintaxis : agregue una clase relajada o muy relajada para agregar más relleno a los elementos de la siguiente manera:
<div class="ui relaxed items">
...
</div>
Ejemplo 1 : En el siguiente ejemplo, tenemos tres botones de opción para seleccionar entre nada relajado, relajado o muy relajado y podemos ver las respectivas salidas.
HTML
<!DOCTYPE html>
<html>
<head>
<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>
body {
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="ui container">
<center>
<div class="ui header green">
<h1>
GeeksforGeeks
</h1>
</div>
<strong>
Semantic UI Item Relaxed Variation
</strong>
</center>
</div>
<center>
<div>
<div class="ui button"
onclick="relaxedOption('')">Not Relaxed</div>
<div class="ui button"
onclick="relaxedOption('relaxed')">Relaxed</div>
<div class="ui button"
onclick="relaxedOption('very relaxed')">
Very Relaxed
</div>
</div>
</center>
<div class="ui items" id="gfgrelaxed">
<div class="item">
<div class="ui small image">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220204210810/avatar-200x200.png"/>
</div>
<div class="middle aligned content">
<div class="header">
Data Structures and Algorithms
</div>
<div class="meta">
<i class="like icon"></i>
<span class="likes">
31 Likes
</span>
</div>
</div>
</div>
<div class="item">
<div class="ui small image">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220204210810/avatar-200x200.png"/>
</div>
<div class="middle aligned content">
<div class="header">
Machine Learning
</div>
<div class="meta">
<i class="favorite icon"></i>
<span class="likes">
123 Favourites
</span>
</div>
</div>
</div>
</div>
<script>
function relaxedOption(option) {
$('#gfgrelaxed').removeClass('very relaxed').removeClass('relaxed')
$('#gfgrelaxed').addClass(option)
}
</script>
</body>
</html>
Producción
Referencia: https://semantic-ui.com/views/item.html#relaxed
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA