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. 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.
El contenido adicional del elemento de la interfaz de usuario semántica se utiliza para colocar contenido adicional en el elemento que debe estar separado del contenido principal. Por lo tanto, el contenido se formatea por separado.
Clases de contenido adicional de elemento de interfaz de usuario semántica:
- extra: el contenedor con esta clase se formatea por separado del contenedor de contenido.
Sintaxis: agregue el contenedor con clase extra para mostrar contenido adicional de la siguiente manera:
<div class="item">
...
<div class="content">
...
<div class="extra"> ... </div>
</div>
</div>
Ejemplo: en el siguiente ejemplo, tenemos dos elementos con contenido adicional que contienen iconos y texto.
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 Extra Content</strong>
</center>
</div>
<div class="ui items">
<div class="item">
<div class="ui small image">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220204210810/avatar-200x200.png" />
</div>
<div class="content">
<div class="header">Data Structures and Algorithms</div>
<div class="meta">
<span class="likes">30 Likes</span>
<span class="views">10000 Views</span>
</div>
<div class="description">
<p>Lots of high quality tutorials in GeeksforGeeks</p>
</div>
<div class="extra">
<i class="chart line icon"></i>
Trending
</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="content">
<div class="header">Machine Learning</div>
<div class="meta">
<span class="likes">123 Likes</span>
<span class="views">2300 Views</span>
</div>
<div class="description">
<p>
Get started with Machine Learning with GeeksforGeeks
</p>
</div>
<div class="extra">
<i class="chart line icon"></i>
Top Grossing
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/views/item.html#extra-content
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA