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 Basic Modal se usa para mostrar el contenido estructurado en forma de tarjetas. Podemos usar la clase c-overlay para llenar el espacio actual en la página. Podemos poner cualquier tipo de contenido dentro del modal para mostrar la información. En este artículo, hablaremos sobre Blaze UI Basic Modal.
Clases modales básicas de Blaze UI:
- o-modal: esta clase se utiliza para crear el modal.
- o-modal–visible: esta clase se usa para mostrar el modal en la página.
- c-overlay: esta clase se utiliza para llenar el espacio actual en la página.
Sintaxis:
<div aria-hidden class="c-overlay c-overlay--visible"></div>
<div role="dialog" class="o-modal o-modal--visible">
...
</div>
Ejemplo 1: el siguiente ejemplo muestra el modal básico de la interfaz de usuario de Blaze con algo de texto .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Basic Modal </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <div class="u-centered"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Basic Modal </h3> <div aria-hidden class="c-overlay c-overlay--visible"></div> <div role="dialog" class="o-modal o-modal--visible"> <div class="c-card"> <header class="c-card__header"> <h2 class="c-heading"> GeeksforGeeks Basic Modal </h2> </header> <div class="c-card__body"> A Computer Science portal for geeks. </div> </div> </div> </div> </body> </html>
Producción:
Modo básico de la interfaz de usuario de Blaze
Ejemplo 2: el siguiente ejemplo muestra el modal básico de la interfaz de usuario de Blaze con una imagen y botones .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Basic Modal </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <div class="u-centered"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Basic Modal </h3> <div aria-hidden class="c-overlay c-overlay--visible"></div> <div role="dialog" class="o-modal o-modal--visible"> <div class="c-card"> <header class="c-card__header"> <h2 class="c-heading"> GeeksforGeeks Basic Modal </h2> <h4> GeeksforGeeks Image </h4> </header> <div class="c-card__body"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt=""> </div> <footer class="c-card__footer"> <button type="button" class="c-button c-button--error"> Cancel </button> <button type="button" class="c-button c-button--success"> Submit </button> </footer> </div> </div> </div> </body> </html>
Producción:
Modo básico de la interfaz de usuario de Blaze
Referencia: https://www.blazeui.com/objects/modals/
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA