Blaze UI es un marco de código abierto de CSS. Es un conjunto de herramientas de interfaz de usuario liviano y proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos. Su proyecto está disponible en código abierto, por lo que una gran comunidad lo mantiene.
Blaze UI Toggles se puede usar para marcar o desmarcar, según la condición, alternando el botón, que tiene un estilo con botones de alternar atractivos y hermosos. Además de eso, los conmutadores tienen muchos atributos y métodos para controlarlos mediante programación. Los conmutadores tienen diferentes colores según el caso de uso.
La interfaz de usuario de Blaze alterna los atributos:
- alternar : este atributo acepta los valores booleanos y representa el estado inicial de la alternancia.
- type : este atributo se utiliza para especificar el color de la palanca.
Método de alternancia de la interfaz de usuario de Blaze:
- isToggled : este método devuelve el valor booleano, es decir, si la alternancia está marcada o no.
Blaze UI Alternar tipos de color:
- predeterminado : se puede representar con el color gris predeterminado del mango.
- marca : Se puede representar por el color azul grisáceo del mango.
- info : Se puede representar con el color azul del mango.
- advertencia : Puede ser representado por el color amarillo del mango.
- exito : Puede ser representado por el color Verde del mango.
- error : se puede representar con el color rojo del mango.
Sintaxis: para crear una interfaz de usuario de Blaze, use la siguiente sintaxis:
<blaze-toggle toggled type="colorType">Content</blaze-toggle>
Ejemplo 1: este ejemplo ilustra los conmutadores de la interfaz de usuario de Blaze con diferentes colores de conmutadores.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>GeeksforGeeks BlazeUI</title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/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> </head> <body> <div class="o-container"> <center> <div> <h1 style="color: green;">GeeksforGeeks</h1> <h3>Blaze UI Toggles</h3> </div> <div class="u-center-block__content u-center-block__content--horizontal"> <blaze-toggle toggled type="error"> Error Toggle </blaze-toggle> <blaze-toggle toggled type="info"> Info Toggle </blaze-toggle> <blaze-toggle toggled> Default Toggle </blaze-toggle> <blaze-toggle toggled type="warning"> Warning Toggle </blaze-toggle> <blaze-toggle toggled type="success"> Success Toggle </blaze-toggle> <blaze-toggle toggled type="brand"> Brand Toggle </blaze-toggle> </div> </center> </div> </body> </html>
Producción:
Ejemplo 2: En el siguiente ejemplo, cuando hacemos clic en el botón, recibimos una alerta de que el interruptor de la página está activado o no.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>GeeksforGeeks BlazeUI</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/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>
</head>
<body>
<div class="o-container">
<center>
<div>
<h2 style="color: green;">GeeksforGeeks</h2>
<h4>Blaze UI Toggles</h4>
</div>
<blaze-toggle toggled type="success"
id="toggle">
GeeksforGeeks is the Best Website for
Computer Science
</blaze-toggle>
<button onclick="checkAnswer()">Check Answer</button>
</center>
</div>
<script>
async function checkAnswer() {
let toggled =
await document.getElementById('toggle').isToggled()
alert('The answer is ' + toggled)
}
</script>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/toggles
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA