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.
Semantic-UI Checkbox Variations nos ofrece diferentes variaciones de checkbox, por lo que podemos usar diferentes variaciones de checkbox durante nuestro desarrollo.
Clase de variaciones de casilla de verificación de IU semántica:
- equipado : esta clase se usa cuando el desarrollador no quiere que la casilla de verificación no deje relleno para una etiqueta.
Sintaxis:
<div class="ui fitted checkbox">
<input type="checkbox">
<label></label>
</div>
El siguiente ejemplo ilustra las variaciones de la 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 Variations</strong> </center> <br><br> <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:
Variaciones de la casilla de verificación de la 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