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.
Los avisos de Blaze UI son tipos especiales de alertas que aparecen en alguna posición definida en la pantalla. Se utilizan para notificar al usuario de alguna acción para su respuesta inmediata. Son más pequeños que el tamaño de las alertas.
Atributos y métodos de Blaze UI Toasts:
- position : aquí debemos mencionar la posición para anclar el brindis, que es topright , bottomright , bottomleft o topleft .
- descartable : el campo solicita un tipo de valor booleano y hace que el brindis sea descartable si es verdadero o viceversa.
- abierto : este campo solicita un tipo de valor booleano y establece que el brindis debe estar abierto en el estado inicial.
- show() : este método abre el brindis.
- close() : este método cierra el brindis.
- isOpen() : Devuelve un valor booleano si el brindis está abierto.
Sintaxis: La sintaxis para un brindis es la siguiente:
<blaze-alerts position="bottomright">
<blaze-alert open dismissible type="success">
Hello
</blaze-alert>
</blaze-alerts>
Ejemplo 1: En el siguiente ejemplo, tenemos algunos brindis abiertos por defecto en la página web con diferentes colores.
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>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> </div> <strong>Blaze UI Toasts</strong> </center> <blaze-alerts position="bottomleft"> <blaze-alert open dismissible type="success"> Data Structures </blaze-alert> <blaze-alert open dismissible type="warning"> Algorithms </blaze-alert> <blaze-alert open dismissible type="info"> Competitive Programming </blaze-alert> <blaze-alert open dismissible type="brand"> Machine Learning </blaze-alert> </blaze-alerts> </div> <script></script> </body> </html>
Producción:
Ejemplo 2: En el siguiente ejemplo, tenemos unos botones que muestran los diferentes brindis.
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>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>
</div>
<strong>Blaze UI Toasts</strong>
<br/>
<br/>
<button onclick="opentToast('toast1')">
Toast 1
</button>
<button onclick="opentToast('toast2')">
Toast 2
</button>
<button onclick="opentToast('toast3')">
Toast 3
</button>
<button onclick="opentToast('toast4')">
Toast 4
</button>
</center>
<blaze-alerts position="bottomleft">
<blaze-alert id="toast1" dismissible type="success">
Data Structures
</blaze-alert>
<blaze-alert id="toast2" dismissible type="warning">
Algorithms
</blaze-alert>
<blaze-alert id="toast3" dismissible type="info">
Competitive Programming
</blaze-alert>
<blaze-alert id="toast4" dismissible type="brand">
Machine Learning
</blaze-alert>
</blaze-alerts>
</div>
<script>
function opentToast(toastName) {
document.getElementById(toastName).show()
}
</script>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/toasts/
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA