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 de clasificación de elementos de la interfaz de usuario semántica se utiliza para colocar iconos como «me gusta», acciones «favoritas» que responden a la interacción del usuario.
Clasificación de elementos de IU semántica Clases de contenido:
- Ícono de me gusta : El ícono significa calificación de agrado y, por lo tanto, puede usarse como calificación.
- icono de favorito : el icono indica la calificación de favorito y, por lo tanto, se puede utilizar como calificación.
Sintaxis : agregue cualquier ícono que signifique acciones favoritas o me gusta de la siguiente manera:
<div class="item">
...
<div class="content">
...
<i class="like icon"></i>
</div>
</div>
Ejemplo : En el siguiente ejemplo, tenemos dos íconos que significan calificación.
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 Rating 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">
<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="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>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/views/item.html#rating
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA