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 cronológicamente. 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 información adicional de la fuente de interfaz de usuario semántica se utiliza para mostrar cualquier texto o imágenes adicionales con los eventos en la fuente. La información adicional está menos resaltada y, por lo tanto, debe colocarse debajo y no está en negrita ni enfatizada.
Clases de información adicional de contenido de fuente de interfaz de usuario semántica:
- texto adicional: se utiliza para que el mensaje adicional o el texto de los chats se muestren como contenido adicional.
- Imágenes adicionales : se utiliza para mostrar imágenes como contenido adicional.
Sintaxis : dentro del elemento div de contenido, agregue los elementos de contenido adicionales como texto o imágenes como elementos div con las clases que se muestran arriba.
<div class="content">
...
<div class="extra text"> ... </div>
<div class="extra images"> ... </div>
</div>
Ejemplo : En el siguiente ejemplo, tenemos dos eventos con contenido adicional.
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> <center> <h1> GeeksforGeeks </h1> <strong> Semantic-UI Feed Content Additional Information </strong> </center> <br> <strong>Extra Text Content:</strong> <div class="ui feed"> <div class="event"> <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> <br> <br> <strong>Extra Images Content:</strong> <div class="content"> <div class="date"> 3 days ago </div> <div class="summary"> <a href="#">Geeksforgeeks</a> added 1 photo </div> <div class="extra images"> <a><img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo-100x100.png"> </a> </div> </div> </div> </body> </html>
Producción:
Contenido de fuente de interfaz de usuario semántica Información adicional
Referencia: https://legacy.semantic-ui.com/views/feed.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