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. Utiliza una clase para agregar CSS a los elementos.
La casilla de verificación es una excelente manera de recibir información del usuario cuando el rango de entradas aceptadas es limitado. Aumenta la interactividad de los formularios HTML. La interfaz de usuario semántica nos proporciona casillas de verificación de estilo personalizado. La casilla de verificación ajustada es una variación de la casilla de verificación que no proporciona ningún relleno para el elemento de la etiqueta.
Casilla de verificación de IU semántica Clases de variación ajustadas:
- encajado: Sirve para quitar el relleno previsto para el elemento de la etiqueta.
Sintaxis:
<div class="ui fitted toggle checkbox">
<input type="checkbox">
<label>...</label>
</div>
Ejemplo 1: en el siguiente ejemplo, hemos ilustrado la diferencia entre una casilla de verificación normal y una casilla de verificación ajustada
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Checkbox Fitted Variation</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<h2 style="color: green;">GeeksForGeeks</h2>
<h4>Semantic UI Checkbox Fitted Variation</h4>
<hr>
<br />
<form class="ui form">
<h2 style="color: green;">Without Fitted Class</h2>
<h5>Default Fitted Checkbox</h5>
<div class="inline-field">
<div class="ui checkbox">
<input type="checkbox">
<label>Default</label>
</div>
</div>
<h5>Fitted Slider Checkbox</h5>
<div class="inline-field">
<div class="ui slider checkbox">
<input type="checkbox">
<label>Slider</label>
</div>
</div>
<h5>Fitted Toggle Checkbox</h5>
<div class="inline-field">
<div class="ui toggle checkbox">
<input type="checkbox">
<label>Toggle</label>
</div>
</div>
<h2 style="color: green;">With Fitted Class</h2>
<h5>Default Fitted Checkbox</h5>
<div class="inline-field">
<div class="ui fitted checkbox">
<input type="checkbox">
<label>Default</label>
</div>
</div>
<h5>Fitted Slider Checkbox</h5>
<div class="inline-field">
<div class="ui fitted slider checkbox">
<input type="checkbox">
<label>Slider</label>
</div>
</div>
<h5>Fitted Toggle Checkbox</h5>
<div class="inline-field">
<div class="ui fitted toggle checkbox">
<input type="checkbox">
<label>Toggle</label>
</div>
</div>
</form>
</div>
<script>
$('.ui.checkbox').checkbox();
</script>
</body>
</html>
Producción:
Variación ajustada de casilla de verificación de interfaz de usuario semántica
Ejemplo 2: en el siguiente ejemplo, hemos ilustrado el uso de casillas de verificación ajustadas, activando el modo oscuro al marcar la casilla de verificación.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Checkbox Fitted Variation</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body style="width: 100vw; height: 100vh;">
<div class="ui container">
<h2 style="color: green;">GeeksForGeeks</h2>
<h4>Semantic UI Checkbox Fitted Variation</h4>
<hr>
<br />
<form class="ui form">
<h5>Fitted Toggle Checkbox</h5>
<div class="inline-field">
<div class="ui fitted toggle checkbox">
<input type="checkbox"
onclick="trigger()">
</div>
</div>
</form>
</div>
<script>
const input = document.querySelector("input");
const h4 = document.querySelector("h4");
const h5 = document.querySelector("h5");
const body = document.querySelector("body");
$('.ui .checkbox').checkbox({
onChecked: function (){
console.log("Checked");
h4.style.color = "white";
h5.style.color = "white";
body.style.backgroundColor = "black";
},
onUnchecked: function (){
console.log("Unchecked");
h4.style.color = "black";
h5.style.color = "black";
body.style.backgroundColor = "white";
}
});
</script>
</body>
</html>
Producción:
Variación ajustada de casilla de verificación de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/checkbox.html#fitted
Publicación traducida automáticamente
Artículo escrito por tejsidda34 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA