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 de apilamiento de elementos de la interfaz de usuario semántica puede especificar cómo se apila una tabla de elementos. La variación de apilamiento establece cómo responden los elementos a la capacidad de respuesta.
Clases de variación de apilamiento de elementos de interfaz de usuario semántica:
- apilable : los elementos de la tabla responden a los diferentes tamaños de pantalla y cambia el diseño.
- unstackable : los elementos de la tabla no responden a diferentes tamaños de pantalla y no cambian el diseño.
Sintaxis :
<div class="ui unstackable items">
....
</div>
Ejemplo : en el siguiente ejemplo, tenemos algunos elementos y un botón. Al hacer clic en el botón, el diseño cambia como apilable o no apilable.
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 Stacking Variation </strong>
</center>
</div>
<center>
<br />
<div class="ui button" onclick="stackReverse()">
Stackable/Unstackable
</div>
</center>
<div class="ui unstackable items" id="gfgstack">
<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 stackReverse() {
$('#gfgstack').toggleClass('unstackable').toggleClass('stackable')
}
</script>
</body>
</html>
Producción:
Variación de apilamiento de elementos de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/views/item.html#stacking
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA