Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que Bootstrap para su uso y tiene diferentes elementos 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 para que los usuarios elijan. Los usuarios pueden seleccionar entre ellos según su elección. Hay diferentes tipos de casillas de verificación según su forma y estilo. Uno de ellos es el tipo de palanca.
El tipo de alternancia de casilla de verificación de IU semántica se usa para hacer que la casilla de verificación tenga la forma de una alternancia que el usuario puede usar para seleccionar un valor verdadero o falso. Agrega un aspecto diferente al de la casilla de verificación predeterminada.
Clase de tipo de alternancia de casilla de verificación de interfaz de usuario semántica:
- alternar: esta clase se utiliza para mostrar la casilla de verificación en forma de alternar.
Sintaxis:
<div class="ui toggle checkbox">
<input type="checkbox">
<label>...</label>
</div>
Ejemplo: Este ejemplo demuestra el tipo de alternancia de casilla de verificación utilizando la clase de alternancia .
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container"> <h2 style="color:green"> GeeksforGeeks </h2> <b> <p>Semantic UI Checkbox Toggle Type</p> </b> <hr> <br /> <strong>Toggle Checkboxes:</strong> <br /><br /> <div class="ui toggle checkbox"> <input type="checkbox" name="public"> <label> Subscribe to GFG weekly newsletters . </label> </div> </div> </body> </html>
Salida: puede ver la casilla de verificación como una palanca en la salida a continuación. El usuario puede alternar entre las opciones haciendo clic en la casilla de verificación.
Casilla de verificación de tipo de alternar
Referencia: https://semantic-ui.com/modules/checkbox.html#toggle
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA