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 CSS y jQuery predefinidos para incorporar diferentes marcos.
Los estados de casilla de verificación de la interfaz de usuario semántica nos ofrecen diferentes estados de casillas de verificación, por lo que podemos usar diferentes estados de casillas de verificación durante nuestro desarrollo. A continuación, se mencionan y describen bien los 4 estados de las casillas de verificación.
Clase de estado de casilla de verificación de IU semántica:
- solo lectura : esta clase se utiliza para crear una casilla de verificación de solo lectura.
- marcada : esta clase se utiliza para crear una casilla de verificación ya marcada.
- intermedio : esta clase se utiliza para crear una casilla de verificación normal.
- disabled : esta clase se utiliza para crear una casilla de verificación deshabilitada.
Sintaxis:
<div class="ui checkbox-status-class">
El siguiente ejemplo ilustra los estados 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 Status</strong> </center> <br><br> <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> </body> </html>
Producción:
Estados de casilla de verificación de interfaz de usuario semántica
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA