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 ya que ayuda al usuario a realizar un seguimiento de sus actividades. Por ejemplo: si solicita un plato de comida desde la aplicación de un restaurante, la aplicación le muestra el estado de finalización de su pedido, desde en la cocina 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, como un paso con un estado particular. Aquí, el estado de un paso significa si el paso en particular está activo, completado, etc. Estos resultados deseados se pueden lograr con la ayuda de Step States en el marco Semantic-UI que se usa para modificar los estados del paso.
Estados del paso de la interfaz de usuario semántica:
- active : Al utilizar esta clase, se resalta el paso, lo que indica que está activo.
- completado : al usar esta clase, hay una marca de verificación de color verde en el paso que indica que el paso se ha completado.
- disabled : al usar esta clase, el paso está deshabilitado, lo que indica que no se puede seleccionar.
Sintaxis: la sintaxis para todos los demás estados de paso será la misma y la única diferencia será el nombre del estado.
<div class="completed step">
Veamos ahora un par de ejemplos en los que usaremos los estados de paso mencionados anteriormente.
Ejemplo 1: Paso que muestra el estado de la entrega de alimentos.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Step States</title> <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"> Semantic-UI Step States </div> <div class="ui vertical steps"> <!--To make steps vertical--> <!--Completed State --> <div class="completed step"> <i class="payment icon"></i> <div class="content"> <div class="title">Accepted</div> <div class="information"> Payment Accepted </div> </div> </div> <!--Completed State --> <div class="completed step"> <i class="payment icon"></i> <div class="content"> <div class="title">In Kitchen</div> <div class="information"> Order Cooked </div> </div> </div> <!--Completed State --> <div class="completed step"> <i class="payment icon"></i> <div class="content"> <div class="title">Order Prepared</div> <div class="information"> Food is ready </div> </div> </div> <!--Active State --> <div class="active step"> <i class="motorcycle icon"></i> <div class="content"> <div class="title">Out For Delivery</div> <div class="information"> Delivery incoming </div> </div> </div> <!--Disabled State --> <div class="disabled step"> <i class="thumbs up icon"></i> <div class="content"> <div class="title">Delivered</div> <div class="information"> Order Successfully Delivered </div> </div> </div> </div> </body> </html>
Producción:
Estados de paso de interfaz de usuario semántica
Ejemplo 2: Paso que muestra el estado de la entrega de un artículo
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Step States</title> <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">Semantic-UI Step States</div> <div class="ui vertical steps"> <!--To make steps vertical--> <!--Completed State --> <div class="completed step"> <i class="payment icon"></i> <div class="content"> <div class="title">Ordered</div> <div class="information"> Order Placed </div> </div> </div> <!--Completed State --> <div class="completed step"> <i class="payment icon"></i> <div class="content"> <div class="title">Shipped</div> <div class="information"> Package Shipped </div> </div> </div> <!--Active State --> <div class="active step"> <i class="truck icon"></i> <div class="content"> <div class="title">Out For Delivery</div> <div class="information"> Delivery incoming </div> </div> </div> <!--Disabled State --> <div class="disabled step"> <i class="thumbs up icon"></i> <div class="content"> <div class="title">Arriving Tomorrow</div> <div class="information"> Arriving Status </div> </div> </div> </div> </body> </html>
Producción:
Estados de paso de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/step.html#states
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA