Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para su uso y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más sorprendente y receptivo.
El elemento Tarjeta de IU semántica muestra el contenido del sitio de manera similar a un naipe que usa las clases de IU semántica. Las tarjetas de interfaz de usuario semántica tienen varias secciones, como contenido, contenido adicional, metadatos y descripción. En este artículo, aprenderemos sobre el metabloque de la tarjeta de interfaz de usuario semántica.
El metabloque de la tarjeta de interfaz de usuario semántica almacena los metadatos de la tarjeta. Para agregar metadatos a la tarjeta en la interfaz de usuario semántica, usamos la metaclase. En una sola tarjeta, puede haber múltiples <div> con la clase meta. Esta clase aumenta la transparencia del texto haciéndolo menos focal a la vista.
Clase de metabloque de tarjeta de interfaz de usuario semántica:
- meta: esta clase se usa para agregar metadatos a la tarjeta y contiene la información menos importante en la tarjeta que debería estar presente en la tarjeta pero no debería ser el punto focal de interés.
Sintaxis:
<div class="ui card">
<div class="meta">
......
</div>
</div>
Ejemplo 1: el siguiente ejemplo demuestra la metaclase de la tarjeta de interfaz de usuario semántica. Podemos observar diferencias entre el texto normal y el texto de metaclase.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body style="padding: 40px;"> <center> <h1 style="color: green">GeeksforGeeks</h1> <strong>Semantic UI card meta block</strong> </center><br> <div class="ui card"> <div class="content"> This is normal content text. <div class="meta">This is text with meta class.</div> <h1> Normal H1 heading.</h1> <h1 class="meta">Meta H1 heading</h1> </div> </div> </body> </html>
Producción:
Producción
Ejemplo 2: el siguiente ejemplo demuestra el metabloque de la tarjeta de interfaz de usuario semántica. Podemos observar diferentes secciones de la tarjeta con la clase meta.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body style="padding: 40px;"> <center> <h1 style="color: green">GeeksforGeeks</h1> <strong>Semantic UI card meta block</strong> </center><br> <div class="ui card"> <div class="content"> <div class="header" style="color: green;">Header</div> <div class="meta" style="color: green;">Meta</div> </div> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> <div class="content"> <h4 class="meta">Meta</h4> <div class="ui small feed"> <div class="content"> <div class="summary"> This is implementation of summary class. </div> <div class="meta"> This is implementation of meta class. </div> </div> </div> </div> </div> </body> </html>
Producción:
Producción
Referencia: https://semantic-ui.com/views/card.html#metadata
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA