Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar 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 a los usuarios para elegir. 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 de tipo slider.
Tipo de control deslizante de casilla de verificación de IU semántica: el usuario puede mostrar la casilla de verificación en forma de control deslizante según sus requisitos. Da un aspecto único al sitio web para que los usuarios seleccionen un valor verdadero o falso.
Clase de control deslizante de casilla de verificación de IU semántica:
- control deslizante: esta clase se utiliza para establecer un control deslizante para la entrada de la casilla de verificación del usuario.
Sintaxis:
<div class="ui slider checkbox">
<input type="checkbox">
<label>...</label>
</div>
Ejemplo: Este ejemplo demuestra el tipo de control deslizante de casilla de verificación utilizando la clase de control deslizante . Puede ver el control deslizante de la casilla de verificación moviéndose en la imagen a continuación. Los usuarios pueden deslizarlo haciendo clic en él.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h2 class="ui green green">GeeksforGeeks</h2> <b> <p>Semantic UI Checkbox Slider Type</p> </b> <hr> <br/> <strong>Slider Checkbox:</strong><br /><br /> <div class="ui slider checkbox"> <input type="checkbox" name="newsletter"> <label>Subscribe to GFG weekly newsletters .</label> </div> </div> </body> </html>
Producción:
Casilla de verificación de tipo de control deslizante
Referencia: https://semantic-ui.com/modules/checkbox.html#slider
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA