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 comprobado.
Estado de casilla de verificación de IU semántica marcada: Es posible que el usuario deba mostrar una casilla de verificación como marcada de forma predeterminada. El valor de algunas opciones generalmente puede ser verdadero y para ahorrar tiempo al usuario al marcarlo cada vez que se usa este estado de la casilla de verificación. Los usuarios también pueden hacerlo falso haciendo clic en él. Solo el estado inicial de la casilla de verificación marcada es verdadero.
Sintaxis:
<div class="ui checkbox"> <input type="checkbox"> <label>....</label> </div>
Ejemplo 1: este ejemplo demuestra el estado de solo lectura de la casilla de verificación utilizando la clase marcada .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> </head> <body> <div class="ui container"> <h2 style="color:green"> GeeksforGeeks </h2> <b> <p>Semantic UI Checkbox Checked State</p> </b><hr><br/> <strong>Checked Checkbox:</strong> <br/><br/> <div class="ui form"> <div class="inline fields"> <label> What is your favourite Javascript framework? </label> <div class="field"> <div class="ui checked checkbox"> <input type="checkbox" name="example" checked=""> <label>React</label> </div> </div> <div class="field"> <div class="ui checked checkbox"> <input type="checkbox" name="example" checked=""> <label>Vue</label> </div> </div> <div class="field"> <div class="ui checked checkbox"> <input type="checkbox" name="example" checked=""> <label>Angular</label> </div> </div> </div> </div> </div> </body> </html>
Salida: puede ver la casilla de verificación cargándose como predeterminada marcada en la imagen a continuación. Los usuarios también pueden hacerlo falso haciendo clic en él.
Estado marcado
Referencia: https://semantic-ui.com/modules/checkbox.html#checked
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA