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 la 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 libro 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 pasos en Semantic-UI.
Hay momentos en los que tenemos que crear un paso de cierta manera. Aquí significa si un paso en particular debe estar en orden, vertical, etc. Estos resultados deseados se pueden lograr con la ayuda de Grupos de pasos en el marco Semantic-UI que se usa para modificar/manipular la vista del paso.
Clases de grupos de pasos de interfaz de usuario semántica:
- pasos: esta clase crea el conjunto predeterminado de pasos.
- ordenada : esta clase crea pasos que muestran el orden de la secuencia de actividades.
- vertical : esta clase crea pasos que se pueden mostrar verticalmente.
Sintaxis: la sintaxis para todos los demás grupos de pasos será la misma y la única diferencia será el nombre del grupo.
<div class="ui ordered steps">
Veamos ahora un par de ejemplos en los que usaremos los grupos de pasos mencionados anteriormente.
Ejemplo 1: En este ejemplo, se utiliza el Grupo de pasos .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Step Groups</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 Groups</div> <div class="ui steps"> <!--Steps Group--> <!--Completed State --> <div class="completed step"> <i class="payment icon"></i> <div class="content"> <div class="title">Order Placed</div> <div class="information">Accepted</div> </div> </div> <!--Completed State --> <div class="completed step"> <i class="payment icon"></i> <div class="content"> <div class="title">Order Packaged</div> <div class="information">Order 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> </div> </body> </html>
Producción:
Grupos de pasos de interfaz de usuario semántica
Ejemplo 2: En este ejemplo, se utiliza el Grupo Ordenado .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Step Groups</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 Groups</div> <div class="ui ordered steps"> <!--Steps Group--> <!--Completed State --> <div class="completed step"> <div class="content"> <div class="title">Game Time</div> <div class="information">Game Started</div> </div> </div> <!--Active State --> <div class="active step"> <i class="futbol icon"></i> <div class="content"> <div class="title">Game Score</div> <div class="information">0-0</div> </div> </div> <!--Disabled State --> <div class="disabled step"> <i class="futbol icon"></i> <div class="content"> <div class="title">Game Over</div> <div class="information">Result</div> </div> </div> </div> </body> </html>
Producción:
Grupos de pasos de interfaz de usuario semántica
Ejemplo 3: En este ejemplo, se utiliza el Grupo Vertical .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Step Groups</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 Groups</div> <div class="ui vertical steps"> <!--Steps Group--> <!--Completed State --> <div class="completed step"> <i class="payment icon"></i> <div class="content"> <div class="title">Order Placed</div> <div class="information">Order Accepted</div> </div> </div> <!--Active State --> <div class="active step"> <i class="food icon"></i> <div class="content"> <div class="title">Food Prepared</div> <div class="information">Food Prepared</div> </div> </div> <!--Disabled State --> <div class="disabled step"> <i class="motorcycle icon"></i> <div class="content"> <div class="title">Out For Delivery</div> <div class="information">Delivery Incoming</div> </div> </div> </div> </body> </html>
Producción:
Grupos de pasos de interfaz de usuario semántica
Enlace de 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