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 en uso y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más sorprendente. 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 variación uniformemente dividida del paso de la interfaz de usuario semántica. La variación dividida uniformemente se usa para mostrar los pasos en un espacio de igual ancho.
Paso de interfaz de usuario semántica Clase de variación dividida uniformemente:
- *número: esta clase se usa para dividir los pasos en anchos iguales.
Sintaxis:
<div class="ui *number steps">
<div class="step">
...
</div>
...
</div>
Ejemplo 1: En este ejemplo, describiremos la variación dividida uniformemente del paso de la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Step Evenly Divided Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container center aligned"> <h2 class="header ui green"> GeeksforGeeks </h2> <h3>Semantic-UI Step Evenly Divided Variation</h3> <div class="ui three steps"> <div class="step"> <i class="address book icon green"></i> <div class="content"> <div class="title">Contact List</div> <div class="description"> Open Contact List </div> </div> </div> <div class="step"> <i class="phone blue icon"></i> <div class="content"> <div class="title">Number</div> <div class="description"> Select Contact Number </div> </div> </div> <div class="step"> <i class="tasks icon"></i> <div class="content"> <div class="title">Detailed Info</div> <div class="description"> Contact Number Information </div> </div> </div> </div> </div> </body> </html>
Producción:
Variación uniformemente dividida del paso de la interfaz de usuario semántica
Ejemplo 2: En este ejemplo, describiremos la variación dividida uniformemente del paso de la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Step Evenly Divided Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container center aligned"> <h2 class="header ui green"> GeeksforGeeks </h2> <h3>Semantic-UI Step Evenly Divided Variation</h3> <div class="ui four steps"> <div class="active step"> <i class="address book icon green"></i> <div class="content"> <div class="title">Contact List</div> <div class="description"> Open Contact List </div> </div> </div> <div class="step"> <i class="phone blue icon"></i> <div class="content"> <div class="title">Number</div> <div class="description"> Select Contact Number </div> </div> </div> <div class="step"> <i class="tasks icon"></i> <div class="content"> <div class="title">Detailed Info</div> <div class="description"> Contact Number Information </div> </div> </div> <div class="disabled step"> <i class="trash alternate icon"></i> <div class="content"> <div class="title">Delete</div> <div class="description"> Delete Contact Information </div> </div> </div> </div> </div> </body> </html>
Producción:
Variación uniformemente dividida del paso de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/step.html#evenly-divided
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA