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 interfaz de usuario semántica muestra el contenido del sitio de manera similar a un naipe que utiliza las clases de interfaz de usuario semántica. Las tarjetas de interfaz de usuario semántica tienen varias secciones, como contenido, contenido adicional y descripción.
En este artículo, aprenderemos sobre el bloque de contenido adicional de la tarjeta de interfaz de usuario semántica. El bloque de contenido adicional de la tarjeta de IU semántica se usa para contener contenido adicional destinado a formatearse por separado del contenido principal. Para agregar contenido adicional a la tarjeta en la interfaz de usuario semántica, usamos las clases adicional y de contenido. En una sola tarjeta, puede haber varios <div> con las clases extra y content .
Clase de bloque de contenido adicional de tarjeta de interfaz de usuario semántica:
- contenido adicional: esta clase se utiliza para convertir un bloque de contenido normal en un bloque de contenido adicional que se formatea por separado del contenido principal.
Sintaxis:
<div class="ui card">
<div class="extra content">
...
</div>
</div>
Ejemplo 1: el siguiente ejemplo muestra la tarjeta básica con una sección de contenido adicional mediante la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body style="padding:20px;"> <center> <h1 class="ui green header">GeeksforGeeks</h1> <strong>Semantic UI card extra content block</strong> </center><br> <div class="ui card"> <div class="content"> <h1 class="ui header green">GeeksforGeeks</h1> <div class="description"> This is a basic card made using Semantic UI. </div> </div> <div class="extra content"> Extra content block </div> </div> </body> </html>
Producción:
Producción
Ejemplo 2: el siguiente ejemplo muestra la tarjeta básica con varias secciones de contenido adicional mediante la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body style="padding:20px;"> <center> <h1 class="ui header green">GeeksforGeeks</h1> <strong>Semantic UI card extra content block</strong> </center><br> <div class="ui card"> <div class="extra content"> Extra content block 1 </div> <div class="content"> <h1 class="ui header green">GeeksforGeeks</h1> <div class="description"> This is a basic card made using Semantic UI. </div> </div> <div class="extra content"> <i class="check icon"></i> Extra content block 2 </div> <div class="extra content"> <i class="like icon"></i> Extra content block 3 </div> </div> </body> </html>
Producción:
Producción
Referencia: https://semantic-ui.com/views/card.html#extra-content
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA