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.
El comentario semántico de la interfaz de usuario se utiliza para mostrar comentarios en el contenido. El comentario se utiliza para obtener y mostrar comentarios sobre el contenido del usuario. El comentario viene con un botón de respuesta, formulario, fecha, etc.
Los metadatos del contenido de los comentarios de la interfaz de usuario semántica se utilizan para mostrar detalles arbitrarios, como la cantidad de Me gusta en el comentario, las vistas o las calificaciones, o la fecha en que se publicó el contenido en el contenido.
Clase de metadatos de contenido de comentario de IU semántica :
- metadatos : el contenedor div con esta clase se usa para mostrar los metadatos sobre el comentario. El contenedor div también puede contener otros contenedores div .
Sintaxis : agregue la clase de metadatos al contenedor div dentro del contenedor de contenido de la siguiente manera:
<div class="ui comments">
<div class="comment">
<div class="content">
...
<div class="metadata"> ... </div>
...
</div>
</div>
</div>
El siguiente ejemplo ilustra el contenido de metadatos de comentarios de la interfaz de usuario semántica:
Ejemplo : en este ejemplo, tenemos la fecha y la calificación dentro del contenido de los metadatos.
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" /> </head> <body> <center> <h1 class="ui" style="color:green"> GeeksforGeeks </h1> <strong>Semantic-UI Comment Metadata Content</strong> </center> <div class="ui mini comments" id="comments"> <h3 class="ui dividing header" id="commentsHeader"> Comments </h3> <div class="comment"> <div class="content"> <a class="author"> Manav </a> <div class="metadata"> <span class="date"> Today at 5:42PM </span> <div class="rating"> <i class="star icon yellow"></i> 04 </div> </div> <div class="text"> How artistic! </div> <div class="actions"> <a class="reply"> Reply </a> </div> </div> </div> <div class="comment"> <div class="content"> <a class="author"> Elliot Fu </a> <div class="metadata"> <span class="date"> Yesterday at 12:30AM </span> <div class="rating"> <i class="star icon yellow"></i> 30 </div> </div> <div class="text"> <p> This has been very useful for my research. Thanks as well! </p> </div> <div class="actions"> <a class="reply"> Reply </a> </div> </div> </div> </div> </body> </html>
Producción:
Enlace de referencia: https://semantic-ui.com/views/comment.html#metadata
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA