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, aprobación y descripción. En este artículo, aprenderemos sobre el bloque de aprobación de la tarjeta de interfaz de usuario semántica.
El bloque de aprobación de la tarjeta de IU semántica contiene una acción Me gusta o una estrella. Esto ayuda a los usuarios a mostrar aprobación o desaprobación del contenido. Para agregar un bloque de aprobación a la tarjeta en la interfaz de usuario semántica, usamos las clases de ícono y forma. En una sola tarjeta, puede haber múltiples bloques de aprobación.
Clase de bloque de aprobación de tarjeta de interfaz de usuario semántica:
- icono: esta clase se utiliza para agregar iconos proporcionados por la interfaz de usuario semántica.
- estrella/corazón: esta clase se usa para agregar el ícono del corazón o el ícono de la estrella.
Sintaxis:
<div class="ui card"> <i class="right/left floated star/heart icon"></i> </div>
Ejemplo 1: el siguiente ejemplo muestra el bloque de aprobación de la tarjeta de IU semántica con un botón Me gusta.
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: 20px;"> <h1 style="color:green">GeeksforGeeks</h1> <strong>Semantic UI card Approval block</strong> <br> <div class="ui card"> <div class="content"> <div class="header">Geeksforgeeks</div> <div class="description"> <p>This is from GeeksforGeeks.</p> </div> </div> <div class="extra content"> <span class="left floated like"> <i class="like icon"></i> Like </span> </div> </div> </body> </html>
Producción:
Producción
Ejemplo 2: el siguiente ejemplo muestra el bloque de aprobación de la tarjeta de interfaz de usuario semántica con la estrella flotante superior y el botón Me gusta.
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: 20px;"> <h1 style="color:green">GeeksforGeeks</h1> <strong>Semantic UI card Approval block</strong> <br> <div class="ui card"> <div class="content"> <i class="right floated like icon"></i> <i class="right floated star icon"></i> <div class="header">GeeksforGeeks</div> <div class="description"> <p>This is from geeksforgeeks.</p> </div> </div> <div class="extra content"> Priyank Mishra </div> </div> </body> </html>
Producción:
Producción
Referencia: https://semantic-ui.com/views/card.html#approval
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA