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. Utiliza una clase para agregar CSS a los elementos.
Un paso muestra la finalización de una serie de actividades.
Ejemplo 1: este ejemplo crea un paso simple de finalización.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2>Step</h2> <div class="ui steps"> <div class="step"> Placing Order </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: Este ejemplo crea un grupo de pasos.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2>Steps</h2> <div class="ui ordered steps"> <div class="completed step"> <div class="content"> <div class="title">Order</div> <div class="description"> Order the food </div> </div> </div> <div class="completed step"> <div class="content"> <div class="title">Preparing</div> <div class="description"> Preparing the food </div> </div> </div> <div class="step"> <div class="content"> <div class="title">On the way</div> <div class="description"> Food is on your way </div> </div> </div> <div class="disabled step"> <div class="content"> <div class="title">Delieverd</div> <div class="description"> Food Delieverd </div> </div> </div> </div> </div> </body> </html>
- Agregue la clase ‘completada’ a los pasos que se volvieron a completar.
- Agregue la clase ‘activa’ al paso que está en curso.
- Agregue la clase ‘deshabilitada’ al paso que está después del paso activo.
Producción:
Para mostrar estos pasos en orden vertical, reemplace la clase ‘ordenada’ con la clase ‘vertical’.
Ejemplo 3: Este ejemplo crea los Pasos con Icon.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2>Steps</h2> <div class="ui ordered steps"> <div class="completed step"> <i class="code icon"></i> <div class="content"> <div class="title">Code</div> <div class="description"> Write Code. </div> </div> </div> <div class="completed step"> <i class="terminal icon"></i> <div class="content"> <div class="title">Compile</div> <div class="description"> Compile Code. </div> </div> </div> <div class="step"> <i class="window close icon"></i> <div class="content"> <div class="title">Fix Error</div> <div class="description"> If it gives error fix </div> </div> </div> <div class="disabled step"> <i class="terminal icon"></i> <div class="content"> <div class="title">Compile Again</div> <div class="description"> Compile Code. </div> </div> </div> <div class="disabled step"> <i class="computer icon"></i> <div class="content"> <div class="title">Output</div> <div class="description"> See the output </div> </div> </div> </div> </div> </body> </html>
Producción:
Nota: puede agregar la etiqueta <a> para que se vincule
Ejemplo 4: Este ejemplo crea el estado Completado, activo, deshabilitado en pasos.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2>Active Step</h2> <div class="ui steps"> <div class="active step"> <i class="code icon"></i> <div class="content"> <div class="title">Coding</div> <div class="description"> Writing the Code </div> </div> </div> </div> <h2>Completed Step</h2> <div class="ui steps"> <div class="completed step"> <i class="code icon"></i> <div class="content"> <div class="title">Coding</div> <div class="description"> Finsished Coding </div> </div> </div> </div> <h2>Disabled Step</h2> <div class="ui steps"> <div class="disabled step"> <i class="code icon"></i> <div class="content"> <div class="title">Coding</div> <div class="description"> Pending </div> </div> </div> </div> </div> </body> </html>
Producción:
Nota:
- Puede agregar una clase apilable para hacer que los pasos de grupo sean apilables.
- Puede agregar la clase ‘UI pasos pequeños’ para que los pasos los muestren pequeños para otro tamaño, simplemente reemplace los pequeños con pequeños, grandes, masivos.
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA