Los botones de alternar son básicamente botones de encendido/apagado . Un botón se puede cambiar del estado activado al desactivado y viceversa. Este proceso se llama alternar.
Ejemplos de botón de alternar:
- Los botones de nuestras centralitas son el mejor ejemplo de botones de alternancia.
- Algunos de los botones de nuestros teléfonos: el botón de la antorcha, el botón de datos móviles, el botón wifi, el modo de vuelo, el botón Bluetooth pueden estar activados o desactivados. Estos son todos los botones de alternancia.
Enfoque:
ahora veamos cómo diseñar estos botones en HTML con la ayuda de Bootstrap.
Ejemplo 1: el código del botón de alternar predeterminado
en HTML (usando Bootstrap):
html
<div class="toggle"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="toggleSwitches"> <label class="custom-control-label" for="toggleSwitches"> TOGGLE</label> </div> </div>
Estilo usando CSS:
html
<style>
.toggle,
{
margin-top: 100px;
font-size: 20px;
}
h1{
color: green;
font-size: 30px;
}
</style>
Código completo:
html
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<!-- jQuery library -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Popper JS -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<!-- Latest compiled JavaScript -->
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">
</script>
<meta name="viewport"
content="width=device-width,
initial-scale=1" />
<link rel="stylesheet"
type="text/css"
href="style.css" />
<link href=
"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet" />
<link href=
"https://fonts.googleapis.com/css2?family=Lato:ital, wght@0, 100;0, 300;0, 400;1, 300&display=swap"
rel="stylesheet" />
<script src=
"https://cdn.jsdelivr.net/npm/gijgo@1.8.1/combined/js/gijgo.min.js"
type="text/javascript"></script>
<link href=
"https://cdn.jsdelivr.net/npm/gijgo@1.8.1/combined/css/gijgo.min.js"
rel="stylesheet"
type="text/css" />
<link rel="stylesheet"
type="text/css"
href="css/lightbox.min.css" />
<script type="text/javascript"
src="js/lightbox-plus-jquery.min.js">
</script>
<title>Buttons</title>
<h1>GeeksforGeeks</h1>
<style>
.toggle {
margin-top: 100px;
font-size: 20px;
}
h1 {
color: green;
font-size: 30px;
}
</style>
</head>
<body>
<div class="toggle">
<div class="custom-control custom-switch">
<input type="checkbox"
class="custom-control-input"
id="toggleSwitches" />
<label class="custom-control-label"
for="toggleSwitches">
TOGGLE
</label>
</div>
</div>
</body>
</html>
Producción:
Los interruptores usan una clase de interruptor personalizado para convertirlo en interruptores de palanca.
Se pueden hacer ligeras modificaciones en el código para obtener los resultados deseados
Ejemplo 2: Los interruptores de palanca también se pueden dar un atributo marcado . Si se hace así, el botón de alternar siempre estará preseleccionado cuando se cargue la página.
El atributo marcado es un atributo booleano.
Fragmento de código:
html
<div class="toggle"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="toggleSwitches" checked /> <label class="custom-control-label" for="toggleSwitches"> CHECKED TOGGLE BUTTON </label> </div> </div>
Producción:
Ejemplo 3: También podemos agregar el atributo deshabilitado al botón de alternancia. Si se hace esto, nunca se podrá usar ni hacer clic en el interruptor.
Fragmento de código:
html
<div class="toggle"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="toggleSwitches" disabled /> <label class="custom-control-label" for="toggleSwitches"> DISABLED TOGGLE BUTTON</label> </div> </div>
Producción:
Publicación traducida automáticamente
Artículo escrito por madhumanti_gupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA