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.
La interfaz de usuario semántica tiene un montón de componentes para el diseño de la interfaz de usuario. Uno de ellos es «Casillas de verificación». Las casillas de verificación se utilizan para mostrar diferentes opciones para que los usuarios elijan. Los usuarios pueden seleccionar entre ellos según su elección. Hay diferentes tipos de casillas de verificación según su forma y estilo.
Estado de desactivación de la casilla de verificación de la interfaz de usuario semántica: este estado se usa en situaciones en las que el usuario puede necesitar mostrar casillas de verificación cuyos valores no se deben cambiar o el usuario no tiene el acceso necesario para realizar esa acción. En ese caso, el estado deshabilitado es útil. A los usuarios se les puede mostrar la casilla de verificación en un estado deshabilitado y no pueden cambiar el valor de la casilla de verificación.
Casilla de verificación de interfaz de usuario semántica Clase de estado deshabilitada:
- disabled: esta clase se utiliza para mostrar la casilla de verificación en un estado deshabilitado y también para evitar el cambio del valor.
Sintaxis:
<div class="ui checkbox disabled">
<input type="checkbox">
<label>...</label>
</div>
Ejemplo: este ejemplo demuestra el estado deshabilitado de la casilla de verificación utilizando la clase deshabilitada .
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container"> <h2 style="color:green"> GeeksforGeeks </h2> <p><b>Semantic UI Checkbox Disabled State</b></p> <hr> <br /> <strong>Disabled Checkboxes:</strong><br /><br /> <div class="ui form"> <div class="inline fields"> <div class="field"> <div class="ui checkbox disabled"> <input type="checkbox" disabled="disabled" checked=""> <label>Disabled checked checkbox</label> </div> </div> <div class="read-only field"> <div class="ui checkbox disabled checked"> <input type="checkbox" disabled="disabled"> <label>Disabled unchecked checkbox</label> </div> </div> </div> </div> </div> </body> </html>
Producción:
Estado deshabilitado
Referencia: https://semantic-ui.com/modules/checkbox.html#disabled
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA