Blaze UI es un kit de herramientas de interfaz de usuario ligero de código abierto de CSS que 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.
Las alertas de Blaze UI son alertas personalizables que pueden tener una gama diferente de colores y se entregan con muchas funcionalidades. Las alertas se utilizan para notificar al usuario sobre alguna acción que se va a realizar o que se ha llevado a cabo. También podemos mostrar y ocultar las alertas mediante programación.
Métodos de alertas de la interfaz de usuario de Blaze:
- show(): este método se utiliza para mostrar una alerta.
- close(): este método se utiliza para ocultar una alerta.
- isOpen(): este método devuelve un valor booleano ya sea que la alerta esté abierta o no.
Sintaxis: Cree un cuadro de alerta usando Blaze UI de la siguiente manera:
<blaze-alert open dismissible>
GeeksforGeeks
</blaze-alert>
Ejemplo 1: En el siguiente ejemplo, tenemos algunas alertas que se pueden abrir y cerrar.
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" />
<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 src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Alerts Methods</strong>
<br />
<br />
<div>
<button onclick="showAlert('alert1')">
Alert 1
</button>
<button onclick="showAlert('alert2')">
Alert 2
</button>
<button onclick="showAlert('alert3')">
Alert 3
</button>
</div>
<blaze-alert id="alert1" open dismissible>
GeeksforGeeks</blaze-alert>
<blaze-alert id="alert2" open dismissible type="warning">
Data Structures
</blaze-alert>
<blaze-alert id="alert3" open dismissible type="success">
Algorithms
</blaze-alert>
</center>
</div>
<script>
function showAlert(alertName) {
document.getElementById(alertName).show()
}
</script>
</body>
</html>
Producción
Ejemplo 2: En el siguiente ejemplo, comprobaremos si una alerta está abierta haciendo clic en el botón de verificación.
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" />
<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 src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Alerts Methods</strong>
<br />
<br />
<div>
<button onclick="showAlert()">
Alert 1
</button>
<button onclick="checkOpen()">
Check Open
</button>
</div>
<blaze-alert type="success" id="alert1"
open dismissible>
GeeksforGeeks
</blaze-alert>
</center>
</div>
<script>
function showAlert() {
document.getElementById('alert1').show()
}
async function checkOpen() {
let isOpen = await document
.getElementById('alert1').isOpen();
alert(`The Alert is ${isOpen ? 'open' : 'closed'}`)
}
</script>
</body>
</html>
Producción
Referencia: https://www.blazeui.com/components/alerts
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA