Semantic UI es un marco de código abierto para crear interfaces de usuario sobresalientes con CSS y jQuery . Funciona de la misma manera que Bootstrap y ofrece muchas partes que puede utilizar para que su sitio web se vea aún mejor. Agrega CSS a los elementos usando una clase.
La clase de paso Semantic-UI nos proporciona un solo paso para mostrar un proceso. Podemos crear escalones con varios tipos de variaciones según nuestro requerimiento. En la interfaz de usuario semántica, existen diferentes tipos de variaciones de pasos , como apilables, no apilables, fluidos, adjuntos, divididos uniformemente, etc. A veces, cuando el tamaño de la pantalla difiere, nos gustaría ver diferentes variaciones.
Tipos de pasos de interfaz de usuario semántica:
- paso: Esto se utiliza para construir un solo paso. podemos generar pasos usando varios pasos, pero primero debemos agregar pasos al elemento principal.
Semántica: clases de variación de la interfaz de usuario:
- stackable : esta clase se agrega cuando queremos pasos apilables. Cuando el tamaño de la pantalla disminuye, los pasos se apilan verticalmente uno debajo del otro.
- fluido : usamos esta clase cuando queremos que el paso tome el ancho de todo el contenedor
- unstackable : esta clase se usa cuando no necesitamos pasos para apilar uno debajo del otro cuando cambia el tamaño de la pantalla
- adjunto superior : esta clase se agrega cuando queremos que los pasos se adjunten en la parte superior.
- adjunto inferior: esta clase se agrega cuando queremos que los pasos se adjunten al fondo.
En este artículo, veamos varias variaciones de pasos.
apilable : solo en pantallas más pequeñas se puede apilar un escalón verticalmente. Cuando intentamos cambiar el tamaño de la pantalla, los pasos se apilan unos sobre otros.
Sintaxis:
<div class="ui stackable steps">
<div class="step">
...
</div>
</div>
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Step Variations</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green">Geeksforgeeks</h1> <strong> Semantic-UI Step Variations </strong> <br /><br /> </center> <div class="ui tablet stackable steps"> <div class="step"> <i class="pencil alternate icon"></i> <div class="content"> <div class="title">Write in gfg</div> <div class="description"> Pick and article and write it. </div> </div> </div> <div class="active step"> <i class="eye icon"></i> <div class="content"> <div class="title">In review</div> <div class="description"> The article is reviewed once submitted </div> </div> </div> <div class="step"> <i class="redo icon"></i> <div class="content"> <div class="title">Make changes if asked</div> <div class="description"> If any changes are suggested, correct them </div> </div> </div> <div class="step completed"> <div class="content"> <div class="title">Published</div> <div class="description"> Your article is published! </div> </div> </div> </div> </body> </html>
Producción:
fluido: Un paso de fluido ocupa todo el ancho de su contenedor. En el ejemplo, podemos visualizar eso.
Sintaxis:
<div class="ui fluid vertical steps">
<div class="step">
...
</div>
</div>
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Step Variations</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green">Geeksforgeeks</h1> <strong> Semantic-UI Step Variations </strong> <br /><br /> </center> <div class="ui fluid vertical steps"> <div class="step"> <i class="pencil alternate icon"></i> <div class="content"> <div class="title">Write in gfg</div> <div class="description">Pick and article and write it.</div> </div> </div> <div class="active step"> <i class="eye icon"></i> <div class="content"> <div class="title">In review</div> <div class="description"> The article is reviewed once submitted </div> </div> </div> <div class="step"> <i class="redo icon"></i> <div class="content"> <div class="title">Make changes if asked</div> <div class="description"> If any changes are suggested, correct them </div> </div> </div> <div class="step completed"> <div class="content"> <div class="title">Published</div> <div class="description">Your article is published!</div> </div> </div> </div> </body> </html>
Producción:
unstackable : en dispositivos móviles, un paso puede evitar que se apilen. Cuando se minimiza el tamaño de la pantalla, los pasos no se apilan unos sobre otros.
Sintaxis:
<div class="ui unstackable steps">
<div class="step">
...
</div>
</div>
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Step Variations</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green">Geeksforgeeks</h1> <strong> Semantic-UI Step Variations </strong> <br /><br /> </center> <div class="ui unstackable steps"> <div class="step"> <i class="pencil alternate icon"></i> <div class="content"> <div class="title">Write in gfg</div> <div class="description">Pick and article and write it.</div> </div> </div> <div class="active step"> <i class="eye icon"></i> <div class="content"> <div class="title">In review</div> <div class="description"> The article is reviewed once submitted </div> </div> </div> <div class="step"> <i class="redo icon"></i> <div class="content"> <div class="title">Make changes if asked</div> <div class="description"> If any changes are suggested, correct them </div> </div> </div> <div class="step completed"> <div class="content"> <div class="title">Published</div> <div class="description">Your article is published!</div> </div> </div> </div> </body> </html>
Producción:
Adjunto : se pueden adjuntar otros elementos a los pasos. Podemos adjuntar pasos en la parte superior o inferior del contenido adicional.
Sintaxis:
<div class="ui top attached steps">
<div class="step">
...
</div>
</div>
<div class="ui bottom attached steps">
<div class="step">
...
</div>
</div>
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Step Variations</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green">Geeksforgeeks</h1> <strong> Semantic-UI Step Variations </strong> <br /><br /> </center> <div class="ui top attached steps"> <div class="step"> <i class="pencil alternate icon"></i> <div class="content"> <div class="title">Write in gfg</div> <div class="description">Pick and article and write it.</div> </div> </div> <div class="active step"> <i class="eye icon"></i> <div class="content"> <div class="title">In review</div> <div class="description"> The article is reviewed once submitted </div> </div> </div> </div> <p>This might take a week's time</p> <div class="ui bottom attached steps"> <div class="step"> <i class="redo icon"></i> <div class="content"> <div class="title">Make changes if asked</div> <div class="description"> If any changes are suggested, correct them </div> </div> </div> <div class="step completed"> <div class="content"> <div class="title">Published</div> <div class="description">Your article is published!</div> </div> </div> </div> </body> </html>
Producción:
dividido uniformemente : los pasos se pueden distribuir uniformemente dentro de su padre. Cuando se proporciona el número de pasos en la clase, los pasos se dividen en partes iguales.
Sintaxis:
<div class="ui number_of_steps_to_be_evenly_divided steps">
<div class="step">
...
</div>
</div>
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Step Variations</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green">Geeksforgeeks</h1> <strong> Semantic-UI Step Variations </strong> <br /><br /> </center> <div class="ui four steps"> <div class="step"> <i class="pencil alternate icon"></i> <div class="content"> <div class="title">Write in gfg</div> <div class="description"> Pick and article and write it. </div> </div> </div> <div class="active step"> <i class="eye icon"></i> <div class="content"> <div class="title">In review</div> <div class="description"> The article is reviewed once submitted </div> </div> </div> <div class="step"> <i class="redo icon"></i> <div class="content"> <div class="title">Make changes if asked</div> <div class="description"> If any changes are suggested, correct them </div> </div> </div> <div class="step completed"> <div class="content"> <div class="title">Published</div> <div class="description"> Your article is published! </div> </div> </div> </div> </body> </html>
Producción:
tamaño : Los escalones vienen en una variedad de tamaños, como mini, diminuto, pequeño, grande, grande, enorme y masivo. Se pueden visualizar claramente con el ejemplo que se da a continuación.
Sintaxis:
<div class="ui size steps">
<div class="step">
...
</div>
</div>
// In the place of size in the above syntax we
// can use mini, tiny, small, large, big, huge
// and massive.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Step Variations</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green">Geeksforgeeks</h1> <strong> Semantic-UI Step Variations </strong> <br /><br /> </center> <p>Mini:</p> <div class="ui mini steps"> <div class="step"> <i class="pencil alternate icon"></i> <div class="content"> <div class="title">Write in gfg</div> <div class="description"> Pick and article and write it. </div> </div> </div> <div class="active step"> <i class="eye icon"></i> <div class="content"> <div class="title">In review</div> <div class="description"> The article is reviewed once submitted </div> </div> </div> </div> </br> <p>Tiny:</p> <div class="ui tiny steps"> <div class="step"> <i class="pencil alternate icon"></i> <div class="content"> <div class="title">Write in gfg</div> <div class="description"> Pick and article and write it. </div> </div> </div> <div class="active step"> <i class="eye icon"></i> <div class="content"> <div class="title">In review</div> <div class="description"> The article is reviewed once submitted </div> </div> </div> </div> </br> <p>Small:</p> <div class="ui small steps"> <div class="step"> <i class="pencil alternate icon"></i> <div class="content"> <div class="title">Write in gfg</div> <div class="description"> Pick and article and write it. </div> </div> </div> <div class="active step"> <i class="eye icon"></i> <div class="content"> <div class="title">In review</div> <div class="description"> The article is reviewed once submitted </div> </div> </div> </div> </br> <p>Large:</p> <div class="ui large steps"> <div class="step"> <i class="pencil alternate icon"></i> <div class="content"> <div class="title">Write in gfg</div> <div class="description"> Pick and article and write it. </div> </div> </div> <div class="active step"> <i class="eye icon"></i> <div class="content"> <div class="title">In review</div> <div class="description"> The article is reviewed once submitted </div> </div> </div> </div> </br> <p>Big:</p> <div class="ui big steps"> <div class="step"> <i class="pencil alternate icon"></i> <div class="content"> <div class="title">Write in gfg</div> <div class="description"> Pick and article and write it. </div> </div> </div> <div class="active step"> <i class="eye icon"></i> <div class="content"> <div class="title">In review</div> <div class="description"> The article is reviewed once submitted </div> </div> </div> </div> </br> <p>Huge:</p> <div class="ui huge steps"> <div class="step"> <i class="pencil alternate icon"></i> <div class="content"> <div class="title">Write in gfg</div> <div class="description"> Pick and article and write it. </div> </div> </div> <div class="active step"> <i class="eye icon"></i> <div class="content"> <div class="title">In review</div> <div class="description"> The article is reviewed once submitted </div> </div> </div> </div> </br> <p>Massive:</p> <div class="ui massive steps"> <div class="step"> <i class="pencil alternate icon"></i> <div class="content"> <div class="title">Write in gfg</div> <div class="description"> Pick and article and write it. </div> </div> </div> <div class="active step"> <i class="eye icon"></i> <div class="content"> <div class="title">In review</div> <div class="description"> The article is reviewed once submitted </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 sarahjane3102 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA