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 deshabilitados del Paso de la interfaz de usuario semántica. Este estado se utiliza para crear pasos que se desactivarán.
Semantic UI Step Disabled Step se usa para deshabilitar cualquier paso en particular , no podemos deshabilitar todos los pasos usando esta clase.
Paso de interfaz de usuario semántica Clase de paso deshabilitada:
- disabled: esta clase se utiliza para desactivar el paso.
Sintaxis:
<div class="step disabled"> ... </div>
Ejemplo 1: El siguiente ejemplo ilustra el estado Deshabilitado del paso de IU semántica . En este ejemplo, deshabilitaremos solo un paso específico.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Step Disabled 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 Disabled State </strong> <br><br> </center> <strong>Disabled Steps:</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 disabled"> <i class="recycle 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 deshabilitado
Ejemplo 2: Deshabilitaremos los tres primeros pasos.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Step Disabled 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 Disabled State </strong> <br><br> </center> <strong>Disabled Steps:</strong> <div class="ui steps"> <div class="disabled 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="disabled 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="disabled 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"> <i class="recycle icon"></i> <div class="content"> <div class="title">Return</div> <div class="description"> Refund initated </div> </div> </div> </div> </body> </html>
Producción:
Estado deshabilitado del paso de la interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/elements/step.html#disabled
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA