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. La interfaz de usuario semántica ofrece varias variaciones de tarjetas, como tarjeta fluida, tarjeta centrada, tarjeta en relieve, tarjeta de enlace, contenido flotante, alineación de texto, color, recuento de columnas, apilable, duplicación. En este artículo, analizaremos las variaciones de duplicación de las tarjetas de interfaz de usuario semántica.
Variaciones de tarjetas de IU semánticas La variante de grupo de tarjetas duplicadas hace que el grupo de tarjetas se organice en un diseño de columna con el ancho de la tarjeta el doble que el original si el ancho de la ventana es inferior a un umbral, es decir, 990 px. Usamos la clase de «duplicación» de la interfaz de usuario semántica para crear la variación del grupo de tarjetas de duplicación.
Variaciones de tarjeta de interfaz de usuario semántica Clase de variante de grupo de tarjeta de duplicación:
- duplicación: esta clase se usa para forzar al grupo de tarjetas a un diseño de columna con el ancho de la tarjeta el doble que el original tan pronto como el ancho de la ventana cruza el punto de interrupción de ancho inferior a 990px. Esta clase ayuda a crear un grupo de tarjetas que pueden duplicar el ancho de su columna para dispositivos móviles.
Sintaxis:
<div class="ui doubling cards">
<div class="ui card">
</div>
</div>
Ejemplo 1: El siguiente ejemplo demuestra la variación de duplicación del grupo de tarjetas de IU semánticas. Podemos observar que el recuento de columnas se reduce a dos a medida que se acerca al tamaño del punto de ruptura.
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"> <title>Semantic UI card Doubling variation</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body style="padding: 20px;"> <h1>GeeksforGeeks</h1> <strong>Semantic UI card Doubling Variation</strong> <br> <!-- doubling refers to a group of cards can double its column width for mobile--> <div class="ui three doubling cards"> <!-- fluid card takes up the width of its parent container--> <div class="ui fluid card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> </div> </div> <div class="ui fluid card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> </div> </div> <div class="ui fluid card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> </div> </div> <div class="ui fluid card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> </div> </div> <div class="ui fluid card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> </div> </div> </div> </body> </html>
Producción:
Producción
Ejemplo 2: El siguiente ejemplo demuestra la variación de duplicación del grupo de tarjetas de IU semánticas. Podemos observar que el recuento de columnas disminuye a tres al principio cuando se acerca al punto de interrupción y luego desciende a un diseño de dos columnas a medida que el ancho se reduce aún más.
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"> <title>Semantic UI card Doubling variation</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body style="padding: 20px;"> <h1>GeeksforGeeks</h1> <strong>Semantic UI card Doubling Variation</strong> <br> <div class="ui six doubling cards"> <!-- doubling refers to a group of cards can double its column width for mobile--> <div class="ui fluid card"> <!--fluid card takes up the width of its parent container--> <div class="header"> <h3>Geeksforgeeks</h3> </div> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> </div> <div class="content">This is a basic card.</div> </div> <div class="ui fluid card"> <div class="header"> <h3>Geeksforgeeks</h3> </div> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> </div> <div class="content">This is a basic card.</div> </div> <div class="ui fluid card"> <div class="header"> <h3>Geeksforgeeks</h3> </div> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> </div> <div class="content">This is a basic card.</div> </div> <div class="ui fluid card"> <div class="header"> <h3>Geeksforgeeks</h3> </div> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> </div> <div class="content">This is a basic card.</div> </div> <div class="ui fluid card"> <div class="header"> <h3>Geeksforgeeks</h3> </div> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> </div> <div class="content">This is a basic card.</div> </div> <div class="ui fluid card"> <div class="header"> <h3>Geeksforgeeks</h3> </div> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> </div> <div class="content">This is a basic card.</div> </div> </div> </body> </html>
Producción:
Producción
Referencia: https://semantic-ui.com/views/card.html#doubling
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA