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.
Los tipos de casillas de verificación de interfaz de usuario semántica nos ofrecen diferentes tipos de casillas de verificación, por lo que podemos usar diferentes tipos de casillas de verificación durante nuestro desarrollo. A continuación, se mencionan y describen bien los 4 tipos de casillas de verificación.
Clase de tipos de casilla de verificación de interfaz de usuario semántica:
- casilla de verificación: esta clase se utiliza para crear una casilla de verificación normal.
- radio : esta clase se utiliza para crear una casilla de verificación de radio.
- alternar : esta clase se usa para crear una casilla de verificación alternar.
- control deslizante : esta clase se utiliza para crear la casilla de verificación del control deslizante.
Sintaxis:
<div class="ui checkbox-types-class">
El siguiente ejemplo ilustra los tipos de casilla de verificación de la interfaz de usuario de semántica:
Ejemplo:
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 Types</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> </body> </html>
Producción:
Tipos de casillas de verificación de IU 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