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. Consiste en componentes semánticos preconstruidos con la ayuda de los cuales se pueden crear diseños hermosos y receptivos.
Un paso muestra el estado de finalización de una actividad en una serie de actividades. Es un componente esencial que ayuda al usuario a realizar un seguimiento de sus actividades. Por ejemplo: si solicita un artículo desde una aplicación, la aplicación le muestra el estado de finalización de su pedido, desde el pedido realizado hasta la entrega exitosa. Esto mismo se puede lograr con la ayuda de Steps in Semantic-UI.
Hay momentos en los que tenemos que crear un paso de cierta manera, de modo que debe ser horizontal, es decir, los pasos no deben apilarse uno encima del otro, incluso en la vista móvil. Este resultado deseado se puede lograr con la ayuda de Step Unstackable Variation en el marco Semantic-UI que no permite que los pasos se apilen uno encima del otro.
Clase de variación no apilable de paso de interfaz de usuario semántica:
- unstackable: esta clase se usa para hacer que los pasos no se puedan apilar y debe usarse en el padre. Esto significa que los escalones no se apilan unos sobre otros y residen uno al lado del otro.
Sintaxis:
<div class="ui unstackable steps">
...
</div>
Ahora echemos un vistazo a un par de ejemplos en los que usaremos la variación no apilable de pasos.
Ejemplo 1:
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <br> <div class="ui green huge header"> GeeksforGeeks </div> <div class="ui large header"> Step Stackable Variation </div> <!--Stackable Step Created--> <div class="ui tablet stackable steps"> <div class="active step"> <i class="truck icon"></i> <div class="content"> <div class="title"> Transporting </div> <div class="description"> Will Reach In 2 Days </div> </div> </div> <div class="disabled step"> <i class="thumbs up icon"></i> <div class="content"> <div class="title"> Delivered </div> <div class="description"> Package Successfully Delivered </div> </div> </div> <div class="disabled step"> <i class="info circle icon"></i> <div class="content"> <div class="title"> Feedback </div> <div class="description"> Please Do Give A Feedback </div> </div> </div> </div> <div class="ui large header"> Step Unstackable Variation </div> <!--Unstackable Step Created--> <div class="ui unstackable steps"> <div class="active step"> <i class="truck icon"></i> <div class="content"> <div class="title"> Transporting </div> <div class="description"> Will Reach In 2 Days </div> </div> </div> <div class="disabled step"> <i class="thumbs up icon"></i> <div class="content"> <div class="title"> Delivered </div> <div class="description"> Package Successfully Delivered </div> </div> </div> <div class="disabled step"> <i class="info circle icon"></i> <div class="content"> <div class="title"> Feedback </div> <div class="description"> Please Do Give A Feedback </div> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <br> <div class="ui green huge header"> GeeksforGeeks </div> <div class="ui large header"> Step Stackable Variation </div> <div class="ui tablet stackable steps"> <!--stackable Step Created--> <div class="step"> <i class="money icon"></i> <div class="content"> <div class="title"> Payment </div> <div class="description"> Payment Accepted </div> </div> </div> <div class="active step"> <i class="food icon"></i> <div class="content"> <div class="title"> Chef </div> <div class="description"> Food Prepared </div> </div> </div> <div class="disabled step"> <i class="motorcycle icon"></i> <div class="content"> <div class="title"> Order Delivered </div> <div class="description"> Enjoy Your Meal </div> </div> </div> </div> <div class="ui large header"> Step Unstackable Variation </div> <!--Unstackable Step Created--> <div class="ui unstackable steps"> <div class="step"> <i class="money icon"></i> <div class="content"> <div class="title"> Payment </div> <div class="description"> Payment Accepted </div> </div> </div> <div class="active step"> <i class="food icon"></i> <div class="content"> <div class="title"> Chef </div> <div class="description"> Food Prepared </div> </div> </div> <div class="disabled step"> <i class="motorcycle icon"></i> <div class="content"> <div class="title"> Order Delivered </div> <div class="description"> Enjoy Your Meal </div> </div> </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/step.html
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA