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. La interfaz de usuario semántica trata las palabras y las clases como conceptos intercambiables.
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 apilables de las tarjetas de interfaz de usuario semántica.
Variaciones de tarjeta de interfaz de usuario semántica La variante de grupo de tarjeta apilable hace que el grupo de tarjetas se organice en un diseño de una sola columna, es decir, se apilan uno tras otro si el ancho de la ventana es inferior a un umbral, es decir, 766 px. Usamos la clase «apilable» de interfaz de usuario semántica para crear la variación del grupo de tarjetas apilables.
Variaciones de tarjetas de interfaz de usuario semántica Clase de variante de grupo de tarjetas apilables:
- apilable: esta clase se usa para obligar al grupo de tarjetas a un diseño de una sola columna tan pronto como el ancho de la ventana cruza el punto de interrupción de ancho inferior a 766 px. Una cuadrícula puede tener sus columnas apiladas una encima de la otra después de alcanzar los puntos de interrupción móviles.
Sintaxis:
<div class="ui stackable cards">
<div class="ui card">
</div>
</div>
Ejemplo 1: El siguiente ejemplo demuestra la variación apilable del grupo de tarjetas de IU semánticas. Podemos observar que el recuento de columnas disminuye a uno 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 Stackable 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 stackable Variation</strong> <br> <div class="ui four stackable cards"> <div class="ui fluid card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400.jpg"> </div> </div> <div class="ui fluid card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400.jpg"> </div> </div> <div class="ui fluid card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400.jpg"> </div> </div> <div class="ui fluid card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400.jpg"> </div> </div> <div class="ui fluid card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400.jpg"> </div> </div> </div> </body> </html>
Producción:
Producción
Ejemplo 2: El siguiente ejemplo muestra varios grupos de tarjetas con diferentes longitudes de columna, todas disminuyendo a un diseño de una sola columna.
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 Stackable 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 stackable Variation</strong> <br> <div class="ui six stackable cards"> <div class="ui fluid card"> <div class="content"> <h1>Card 1</h1> </div> </div> <div class="ui fluid card"> <div class="content"> <h1>Card 2</h1> </div> </div> <div class="ui fluid card"> <div class="content"> <h1>Card 3</h1> </div> </div> <div class="ui fluid card"> <div class="content"> <h1>Card 4</h1> </div> </div> <div class="ui fluid card"> <div class="content"> <h1>Card 5</h1> </div> </div> <div class="ui fluid card"> <div class="content"> <h1>Card 6</h1> </div> </div> </div> <div class="ui three stackable cards"> <div class="ui fluid card"> <div class="content"> <h1>Card 1</h1> </div> </div> <div class="ui fluid card"> <div class="content"> <h1>Card 2</h1> </div> </div> <div class="ui fluid card"> <div class="content"> <h1>Card 3</h1> </div> </div> </div> <div class="ui two stackable cards"> <div class="ui fluid card"> <div class="content"> <h1>Card 1</h1> </div> </div> <div class="ui fluid card"> <div class="content"> <h1>Card 2</h1> </div> </div> <div class="ui fluid card"> <div class="content"> <h1>Card 3</h1> </div> </div> <div class="ui fluid card"> <div class="content"> <h1>Card 4</h1> </div> </div> </div> </body> </html>
Producción:
Producción
Referencia: https://semantic-ui.com/views/card.html#stackable
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA