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 a los usuarios para elegir. Los usuarios pueden seleccionar entre ellos según su elección. Dependiendo de los requisitos del uso de casillas de verificación, existen diferentes estados de casillas de verificación. Uno de ellos es el estado de sólo lectura.
Estado de solo lectura de la casilla de verificación de la IU semántica: es posible que el usuario deba mostrar algunas casillas de verificación en la IU cuyos valores no se deben cambiar o la persona no tiene acceso para realizar esta acción. En ese caso, el estado de solo lectura es útil. Los usuarios pueden mostrar el valor e informar a la persona en la interfaz de usuario de la opción, pero no permitirle cambiar el estado. Entonces, la casilla de verificación es de solo lectura para él.
Clase de estado de solo lectura de casilla de verificación de interfaz de usuario semántica:
- solo lectura: esta clase se utiliza para mostrar la casilla de verificación en un estado de solo lectura y también para evitar el cambio del valor.
Sintaxis:
<div class="ui checkbox"> <input type="checkbox"> <label>....</label> </div>
Para instanciar la función de casilla de verificación, usamos la siguiente sintaxis:
<script>
$('.ui.checkbox').checkbox();
</script>
Ejemplo 1: este ejemplo demuestra el estado de solo lectura de la casilla de verificación utilizando la clase de solo lectura . Muestra tanto la condición verdadera como la falsa en condición de solo lectura.
HTML
<!DOCTYPE html>
<html>
<head>
<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>
<br/><br/>
<div class="ui container">
<h2 style="color:green">
GeeksforGeeks
</h2>
<p>
Semantic UI Checkbox Read-only State
</p>
<hr><br/>
<strong>
Read-only Checkboxes:
</strong><br/><br/>
<div class="ui form">
<div class="inline fields">
<div class="field">
<div class="ui checkbox read-only">
<input type="checkbox" checked="checked">
<label>Read only checked checkbox</label>
</div>
</div>
<div class="field">
<div class="ui checkbox read-only">
<input type="checkbox">
<label>Read only unchecked checkbox</label>
</div>
</div>
</div>
</div>
</div>
<script>
$('.ui.checkbox').checkbox();
</script>
</body>
</html>
Salida: el usuario solo puede ver los valores relacionados con las casillas de verificación. El usuario no puede cambiar el estado.
Estado de solo lectura
Referencia: https://semantic-ui.com/modules/checkbox.html#read-only
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA