Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y mantenible. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las funciones nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.
En este artículo, veremos los métodos de alternancia de la interfaz de usuario de Blaze . El método isToggled() devuelve una Promesa que se resuelve en un valor booleano que se refiere al estado actual del componente de alternancia, devuelve «verdadero» si la alternancia está activada y devuelve «falso» de lo contrario.
Sintaxis:
document.querySelector(".selector").isToggled();
Ejemplo 1: este ejemplo representa cómo usar el método isToggled() para obtener el estado actual del componente de alternar.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Blaze UI - Toggle Methods</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
<style>
body {
font-family: sans-serif;
text-align: center;
}
.wrapper{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.c-button{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="u-centered">
<h2 style="color:green;">GeeksforGeeks</h2>
<h3>Toggle Methods - Blaze UI</h3>
</div>
<div class="wrapper u-window-box-super">
<blaze-toggle id="toggle1" toggled>
Toggle Me
</blaze-toggle>
<div>
<button class="c-button" onclick="getToggleValue()">
Check isToggled
</button>
</div>
<p>The returned value of isToggled method is: <b>
<span id="result"></span></b></p>
</div>
<script>
function getToggleValue(){
document.querySelector("#toggle1")
.isToggled().then(function (result) {
document.querySelector("#result")
.innerText = result;
})
}
</script>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/toggles
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA