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 en uso y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más sorprendente. Las variaciones de pasos de la interfaz de usuario semántica nos ofrecen una variedad diferente de pasos, apilables, fluidos, no apilables, adjuntos, divididos uniformemente y tamaño.
En este artículo, conoceremos la variante apilable de variaciones de pasos de la interfaz de usuario semántica. Esta variante se utiliza para crear escalones que harán que el escalón sea apilable. Variaciones de pasos de interfaz de usuario semántica La variante apilable se usa para que el paso pueda apilarse verticalmente solo en pantallas más pequeñas.
Clase de variante apilable de variaciones de pasos de interfaz de usuario semántica:
- apilable: esta clase se usa para hacer que los pasos sean apilables, debe usarse en el padre.
Sintaxis:
<div class="ui Device stackable steps"> ... </dib>
Nota: Puede hacer que los pasos se puedan apilar en diferentes tamaños de dispositivos.
El siguiente ejemplo ilustra la variante apilable de variaciones de pasos de interfaz de usuario semántica:
Ejemplo 1: En este ejemplo, crearemos dos pasos, uno será apilable en dispositivos de tamaño de tableta y otro será predeterminado.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green">Geeksforgeeks</h1> <strong> Semantic-UI Step Stackable Content </strong> <br /><br /> </center> <strong>Step Stackable Content on Tablet:</strong> <br /> <div class="ui tablet stackable steps"> <div class="step"> <i class="truck icon"></i> <div class="content"> <div class="title">Shipping</div> <div class="description">Choose your shipping options</div> </div> </div> <div class="step"> <i class="dollar icon"></i> <div class="content"> <div class="title">Billing</div> <div class="description">Enter billing information</div> </div> </div> <div class="step"> <i class="file icon"></i> <div class="content"> <div class="title">Confirm Order</div> <div class="description">Verify order details</div> </div> </div> </div> <br /> <strong>Step non Stackable Content on Tablet:</strong> <br /> <div class="ui steps"> <div class="step"> <i class="truck icon"></i> <div class="content"> <div class="title">Shipping</div> <div class="description">Choose your shipping options</div> </div> </div> <div class="step"> <i class="dollar icon"></i> <div class="content"> <div class="title">Billing</div> <div class="description">Enter billing information</div> </div> </div> <div class="step"> <i class="file icon"></i> <div class="content"> <div class="title">Confirm Order</div> <div class="description">Verify order details</div> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo haremos coloridos los iconos de los pasos.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green">Geeksforgeeks</h1> <strong> Semantic-UI Step Stackable Content </strong> <br /><br /> </center> <strong>Step Stackable Content on Tablet:</strong> <br /> <div class="ui tablet stackable steps"> <div class="step"> <i class="truck icon green"></i> <div class="content"> <div class="title">Shipping</div> <div class="description">Choose your shipping options</div> </div> </div> <div class="step"> <i class="dollar icon blue"></i> <div class="content"> <div class="title">Billing</div> <div class="description">Enter billing information</div> </div> </div> <div class="step"> <i class="file icon yellow"></i> <div class="content"> <div class="title">Confirm Order</div> <div class="description">Verify order details</div> </div> </div> </div> <br /> <strong>Step non Stackable Content on Tablet:</strong> <br /> <div class="ui steps"> <div class="step"> <i class="truck icon green"></i> <div class="content"> <div class="title">Shipping</div> <div class="description">Choose your shipping options</div> </div> </div> <div class="step"> <i class="dollar icon blue"></i> <div class="content"> <div class="title">Billing</div> <div class="description">Enter billing information</div> </div> </div> <div class="step"> <i class="file icon yellow"></i> <div class="content"> <div class="title">Confirm Order</div> <div class="description">Verify order details</div> </div> </div> </div> </body> </html>
Producción:
Variaciones de pasos de interfaz de usuario semántica Variante apilable
Referencia: https://semantic-ui.com/elements/step.html#stackable
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA