La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza el CSS y jQuery predefinidos para incorporar en diferentes marcos.
La interfaz de usuario semántica nos ofrece casillas de verificación para usar casillas de verificación, podemos aplicar la etiqueta de entrada dentro de una etiqueta div y usar la clase de casilla de verificación ui dentro de la etiqueta div. Y el campo de entrada debe tener el tipo de atributo requerido con el valor de la casilla de verificación.
Clase de casilla de verificación de interfaz de usuario semántica:
- casilla de verificación: esta clase se utiliza para aplicar el tema de la casilla de verificación de la interfaz de usuario semántica en la casilla de verificación.
Opciones de casilla de verificación de interfaz de usuario semántica:
- Tipos de casilla de verificación de IU semántica : se utiliza para definir el tipo de tema de casilla de verificación que desea aplicar, hay casillas de verificación predeterminadas, radio, control deslizante y alternar tipos de casilla de verificación.
- Estados de la casilla de verificación de la interfaz de usuario semántica : Esto se usa para definir el estado de la casilla de verificación que puede ser de solo lectura o marcada.
- Variación de la casilla de verificación de la interfaz de usuario semántica : Esto se usa para definir la variación de la casilla de verificación, solo hay una variante en lugar de la casilla de verificación normal que se ajusta
Sintaxis:
<div class="ui checkbox"> <input type="checkbox"> <label>....</label> </div>
El siguiente ejemplo ilustra la casilla de verificación de la interfaz de usuario de semántica:
Ejemplo: Todas las casillas de verificación se utilizan en este ejemplo como 4 tipos de casillas de verificación, 4 estados de casillas de verificación y una variante.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1>Geeksforgeeks</h1> <strong>Semantic UI Checkbox</strong> </center> <br><br> <hr> <strong>Semantic-UI Checkbox-Types:</strong> <br><br> <div class="ui grid"> <strong>Radio Checkbox:</strong> <div class="four wide column"> <div class="ui radio checkbox"> <input type="radio" name="radio"> <label>Accept terms and conditions</label> </div> </div> <strong>Checkbox:</strong> <div class="four wide column"> <div class="ui checkbox"> <input type="checkbox" name="example"> <label>Accept terms and conditions</label> </div> </div> <strong>Slider Checkbox:</strong> <div class="four wide column"> <div class="ui slider checkbox"> <input type="checkbox" name="newsletter"> <label>Accept terms and conditions</label> </div> </div> <strong>Toggle Checkbox:</strong> <div class="four wide column"> <div class="ui toggle checkbox"> <input type="checkbox" name="public"> <label>Accept terms and conditions</label> </div> </div> </div> <hr> <strong>Semantic-UI Checkbox-Status:</strong> <br><br> <div class="ui grid"> <strong>Read-only Checkbox:</strong> <div class="four wide column"> <div class="ui read-only checkbox"> <input type="checkbox"> <label>Accept terms and conditions</label> </div> </div> <strong>Checked Checkbox:</strong> <div class="four wide column"> <div class="ui checked checkbox"> <input type="checkbox" name="example" checked=""> <label>Accept terms and conditions</label> </div> </div> <strong>Checkbox:</strong> <div class="four wide column"> <div class="ui checkbox"> <input type="checkbox" name="example"> <label>Accept terms and conditions</label> </div> </div> <strong>Disabled Checkbox:</strong> <div class="four wide column"> <div class="ui checkbox disabled"> <input type="checkbox" name="example"> <label>Accept terms and conditions</label> </div> </div> </div> <hr> <strong>Semantic-UI Checkbox-Variations:</strong> <br><br> <div class="ui grid"> <strong>fitted checkbox:</strong> <div class="three wide column"> <div class="ui fitted checkbox"> <input type="checkbox"> <label></label> </div> </div> <strong>fitted slider checkbox:</strong> <div class="three wide column"> <div class="ui fitted slider checkbox"> <input type="checkbox"> <label></label> </div> </div> <strong>fitted toggle checkbox:</strong> <div class="three wide column"> <div class="ui fitted toggle checkbox"> <input type="checkbox"> <label></label> </div> </div> </div> </body> </html>
Producción:
Casilla de verificación de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/checkbox.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA