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.
Semantic UI Step States nos ofrece diferentes estados como activo, completado y deshabilitado. En este artículo, conoceremos los estados completados del Paso de la interfaz de usuario semántica. Este estado se utiliza para crear pasos que se completarán.
El paso completado de la interfaz de usuario semántica se usa para completar cualquier paso en particular, no podemos desactivar todos los pasos usando esta clase.
Paso de interfaz de usuario semántica Clase de paso completada:
- completado: esta clase se utiliza para marcar el paso completado.
Sintaxis:
<div class="step completed"> ... </div>
Ejemplo 1: El siguiente ejemplo ilustra el estado del paso de la interfaz de usuario semántica completado .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Step Completd State</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 Completed Step </strong> <br><br> </center> <strong>Completed Step:</strong> <div class="ui steps"> <div class="step"> <i class="truck icon green"></i> <div class="content"> <div class="title">Shipping</div> <div class="description"> Select your Address </div> </div> </div> <div class="step"> <i class="file alternate blue icon"></i> <div class="content"> <div class="title">Billing</div> <div class="description"> Select your way to pay </div> </div> </div> <div class="step "> <i class="file alternate icon"></i> <div class="content"> <div class="title">Delivered</div> <div class="description"> Check you package </div> </div> </div> <div class="step completed"> <i class="icon"></i> <div class="content"> <div class="title">Return</div> <div class="description"> Refund initated </div> </div> </div> </div> </body> </html>
Producción:
Paso de interfaz de usuario semántica Paso completado
Ejemplo 2: En este ejemplo, activaremos el paso completo.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Step Completd State</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 Completed Step </strong> <br><br> </center> <strong>Completed Step:</strong> <div class="ui steps"> <div class="step"> <i class="truck icon green"></i> <div class="content"> <div class="title">Shipping</div> <div class="description"> Select your Address </div> </div> </div> <div class="step"> <i class="file alternate blue icon"></i> <div class="content"> <div class="title">Billing</div> <div class="description"> Select your way to pay </div> </div> </div> <div class="step active completed"> <i class="icon"></i> <div class="content"> <div class="title">Return</div> <div class="description"> Refund initated </div> </div> </div> </div> </body> </html>
Producción:
Estado completado del paso de la interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/elements/step.html#completed
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA