El marco de código abierto de la interfaz de usuario semántica brinda íconos o glifos que se usan para mostrar imágenes relacionadas con algunos elementos usando CSS y jQuery que se usan para crear excelentes interfaces de usuario. Es un marco de desarrollo utilizado para crear diseños hermosos y receptivos.
Semantic-UI Feed se utiliza para mostrar actualizaciones en orden cronológico. El feed de un usuario o las actualizaciones de sus redes sociales o blog se presentan de forma secuencial estándar. Los contenidos, fechas, como botones y enlaces, se pueden colocar incluyendo imágenes en el Feed.
El contenido de la etiqueta de alimentación de la interfaz de usuario semántica se utiliza para mostrar el remitente o de quién proviene la notificación. Generalmente se usa para un icono o una imagen.
Clase de contenido de etiqueta de fuente de interfaz de usuario semántica :
- etiqueta : el contenedor div con esta clase generalmente contiene imágenes o íconos.
Sintaxis : agregue la clase de etiqueta a un contenedor div y agregue la imagen o el icono.
<div class="event">
<div class="label"> ... </div>
...
</div>
El siguiente ejemplo ilustra la etiqueta de contenido de fuente de interfaz de usuario semántica:
Ejemplo : en el siguiente ejemplo, hemos utilizado diferentes iconos para las etiquetas.
HTML
<!DOCTYPE html> <html lang="en"> <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> </head> <body> <h1> GeeksforGeeks </h1> <strong> Semantic-UI Feed Content Label </strong> <div class="ui feed"> <div class="event"> <div class="label"> <i class="edit red icon hover"></i> </div> <div class="content"> <div class="date"> 3 days ago </div> <div class="summary"> Your post was liked. </div> <div class="extra text"> Your post is reaching new heights </div> </div> </div> <div class="event"> <div class="label"> <i class="like green round icon"></i> </div> <div class="content"> <div class="date"> 2 Days Ago </div> <div class="summary"> Wow! amazing </div> <div class="extra text"> Comment from Guru </div> <div class="meta"> <a class="like"> <i class="like icon"> </i> 8 Likes </a> </div> </div> </div> </div> </body> </html>
Producción:
Etiqueta de contenido de fuente de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/label.html
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA