Blaze UI es un kit de herramientas de interfaz de usuario de código abierto sin marco que utiliza componentes de JavaScript para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. Este marco nos permite usar varios de sus estilos y propiedades para hacer que un sitio web sea más fácil de usar.
Blaze UI permite mostrar los mensajes de alerta en el sitio web utilizando clases predefinidas. Estas alertas se pueden utilizar para mostrar los mensajes relacionados con el sitio web, como errores y mensajes de éxito.
Hay dos atributos que ofrece la alerta de interfaz de usuario de Blaze:
- abierto: abre/cierra el estado de la alerta, inicialmente está configurado para abrir. El tipo de este atributo es booleano.
- descartable: permitir que se cierre la alerta. El tipo de este atributo es booleano.
Clase de alerta Blaze-UI:
- blaze-alert: esta clase se utiliza para agregar el mensaje de alerta.
Sintaxis:
<blaze-alert open dismissible ...>
...
</blaze-alert>
Ejemplo 1: el siguiente código muestra el atributo abierto de alertas de Blaze UI.
HTML
<!DOCTYPE html>
<html>
<head>
<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>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
<style>
.Logo {
color: green;
}
</style>
</head>
<body>
<h1 class="Logo">
GeeksforGeeks
</h1>
<h2>
Blaze UI Alerts open attribute
</h2>
<br />
<blaze-alert open>Hello Geek</blaze-alert>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código muestra el atributo descartable de alertas de la interfaz de usuario de Blaze. El atributo descartable agrega la opción de cerrar en la esquina de la alerta.
HTML
<!DOCTYPE html>
<html>
<head>
<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>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
<style>
.Logo {
color: green;
}
</style>
</head>
<body>
<h1 class="Logo">
GeeksforGeeks
</h1>
<h2>
Blaze UI Alerts open and dismissible attribute
</h2>
<br />
<blaze-alert open dismissible>
Hello Geek
</blaze-alert>
<blaze-alert open dismissible type="success">
Site: GeeksforGeeks
</blaze-alert>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/alerts/
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA