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 usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
Las variaciones de tamaño de paso de la interfaz de usuario semántica nos ofrecen una variedad diferente de pasos, apilable, fluido, no apilable, adjunto, dividido uniformemente y tamaño. En este artículo, conoceremos la variante de tamaño de las variaciones de tamaño de paso de la interfaz de usuario semántica. Esta variante se utiliza para crear escalones de diferentes tamaños.
Variaciones de tamaño de paso de IU semántica Clase de variante de tamaño:
- mini: Esta clase se utiliza para establecer el tamaño de paso mini.
- tiny: esta clase se utiliza para establecer el tamaño de paso tiny.
- pequeño: esta clase se utiliza para establecer el tamaño de paso pequeño.
- grande: esta clase se utiliza para establecer el tamaño de paso grande.
- grande: esta clase se utiliza para establecer el tamaño de paso grande.
- enorme: esta clase se utiliza para establecer el tamaño de paso enorme.
- masivo: esta clase se utiliza para establecer el tamaño de paso masivo.
Sintaxis:
<div class="ui Size-Variant-Class steps"> ... </div>
El siguiente ejemplo ilustra la variante de tamaño de las variaciones de tamaño de paso de la interfaz de usuario semántica:
Ejemplo 1: EN este ejemplo usaremos 5 de las clases de tamaño de mini a grande.
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 Variations Size Variant </strong> <br><br> </center> <strong>Mini Size Steps:</strong> <div class="ui mini steps"> <div class="step"> <i class="truck icon green"></i> <div class="content"> <div class="title">Shipping</div> <div class="description"> Select your Address </div> </div> </div> <div class="step"> <i class="file alternate blue icon"></i> <div class="content"> <div class="title">Billing</div> <div class="description"> Select your way to pay </div> </div> </div> <div class="step"> <i class="file alternate icon"></i> <div class="content"> <div class="title">Delivered</div> <div class="description"> Check you package </div> </div> </div> </div> <br><br> <strong>Tiny Size Steps:</strong> <div class="ui tiny steps"> <div class="step"> <i class="truck icon green"></i> <div class="content"> <div class="title">Shipping</div> <div class="description"> Select your Address </div> </div> </div> <div class="step"> <i class="file alternate blue icon"></i> <div class="content"> <div class="title">Billing</div> <div class="description"> Select your way to pay </div> </div> </div> <div class="step"> <i class="file alternate icon"></i> <div class="content"> <div class="title">Delivered</div> <div class="description"> Check you package </div> </div> </div> </div> <br><br> <strong>Small Size Steps:</strong> <div class="ui small steps"> <div class="step"> <i class="truck icon green"></i> <div class="content"> <div class="title">Shipping</div> <div class="description"> Select your Address </div> </div> </div> <div class="step"> <i class="file alternate blue icon"></i> <div class="content"> <div class="title">Billing</div> <div class="description"> Select your way to pay </div> </div> </div> <div class="step"> <i class="file alternate icon"></i> <div class="content"> <div class="title">Delivered</div> <div class="description"> Check you package </div> </div> </div> </div> <br><br> <strong>Large Size Steps:</strong> <div class="ui large steps"> <div class="step"> <i class="truck icon green"></i> <div class="content"> <div class="title">Shipping</div> <div class="description"> Select your Address </div> </div> </div> <div class="step"> <i class="file alternate blue icon"></i> <div class="content"> <div class="title">Billing</div> <div class="description"> Select your way to pay </div> </div> </div> <div class="step"> <i class="file alternate icon"></i> <div class="content"> <div class="title">Delivered</div> <div class="description"> Check you package </div> </div> </div> </div> <br><br> <strong>Big Size Steps:</strong> <div class="ui big steps"> <div class="step"> <i class="truck icon green"></i> <div class="content"> <div class="title">Shipping</div> <div class="description"> Select your Address </div> </div> </div> <div class="step"> <i class="file alternate blue icon"></i> <div class="content"> <div class="title">Billing</div> <div class="description"> Select your way to pay </div> </div> </div> <div class="step"> <i class="file alternate icon"></i> <div class="content"> <div class="title">Delivered</div> <div class="description"> Check you package </div> </div> </div> </div> </body> </html>
Producción:
Variaciones de tamaño de paso de IU semántica Variante de tamaño
Ejemplo 2: En este ejemplo usaremos el resto de las 2 clases que es Enorme y Masivo.
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 Variations Size Variant </strong> <br><br> </center> <strong>Huge Size Steps:</strong> <div class="ui huge steps"> <div class="step"> <i class="truck icon green"></i> <div class="content"> <div class="title">Shipping</div> <div class="description"> Select your Address </div> </div> </div> <div class="step"> <i class="file alternate blue icon"></i> <div class="content"> <div class="title">Billing</div> <div class="description"> Select your way to pay </div> </div> </div> <div class="step"> <i class="file alternate icon"></i> <div class="content"> <div class="title">Delivered</div> <div class="description"> Check you package </div> </div> </div> </div> <br><br> <strong>Massive Size Steps:</strong> <div class="ui massive steps"> <div class="step"> <i class="truck icon green"></i> <div class="content"> <div class="title">Shipping</div> <div class="description"> Select your Address </div> </div> </div> <div class="step"> <i class="file alternate blue icon"></i> <div class="content"> <div class="title">Billing</div> <div class="description"> Select your way to pay </div> </div> </div> <div class="step"> <i class="file alternate icon"></i> <div class="content"> <div class="title">Delivered</div> <div class="description"> Check you package </div> </div> </div> </div> </body> </html>
Producción:
Variaciones de tamaño de paso de IU semántica Variante de tamaño
Referencia: https://semantic-ui.com/elements/step.html#size
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA