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.
- Atributos de alerta de Blaze UI : 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.
- Métodos de alerta de la interfaz de usuario de Blaze : los métodos de alerta de la interfaz de usuario de Blaze se utilizan para notificar al usuario sobre alguna acción que se debe realizar o que se ha llevado a cabo. También podemos mostrar y ocultar las alertas mediante programación.
- Clase de alerta de Blaze-UI: las clases se utilizan para crear los componentes, solo hay
- blaze-alert: esta clase se utiliza para agregar el mensaje de alerta.
Sintaxis:
<div>
<blaze-alert open type=" ..." ...>
...
</blaze-alert>
</div>
Ejemplo 1: el siguiente código demuestra las alertas de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html> <head> <title>Hello World!</title> <link rel="stylesheet" href="styles.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> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h2> Blaze UI Alerts </h2> <br/> <blaze-alert open dismissible> Hello Geek </blaze-alert> <blaze-alert open dismissible type="info"> Site: GeeksforGeeks </blaze-alert> </body> </html>
Producción:
Alertas de interfaz de usuario de Blaze
Ejemplo 2: el siguiente código muestra las alertas de la interfaz de usuario de Blaze de tipo advertencia, éxito, error y marca.
HTML
<!DOCTYPE html> <html> <head> <title>Hello World!</title> <link rel="stylesheet" href="styles.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> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h2> Blaze UI Alerts </h2> <br/> <blaze-alert open dismissible type="warning"> Warning </blaze-alert> <blaze-alert open dismissible type="success"> Success </blaze-alert> <blaze-alert open dismissible type="error"> Error </blaze-alert> <blaze-alert open dismissible type="brand"> Brand </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