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 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 fluida de variaciones de pasos de la interfaz de usuario semántica. Esta variante se utiliza para crear escalones que ocuparán todo el ancho del contenedor.
Variaciones de pasos de la interfaz de usuario semántica La variante fluida ocupa el ancho de su contenedor. Entonces, si desea diseñar un paso que ocupe todo el ancho del contenedor, simplemente puede agregar esta clase.
Clase de variante fluida de variaciones de paso de IU semántica:
- fluido: esta clase se usa para ocupar el ancho de su contenedor
Sintaxis:
<div class="ui fluid steps">
...
</div>
Ejemplo: El siguiente ejemplo ilustra la variante fluida de variaciones de pasos de la interfaz de usuario semántica:
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 Fluid Variant </strong> <br><br> </center> <strong>Fluid Steps:</strong> <div class="ui fluid 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>Non Fluid Steps:</strong> <div class="ui 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 pasos de la interfaz de usuario semántica Variante fluida
Referencia: https://semantic-ui.com/elements/step.html#fluid
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA