Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y mantenible. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las funciones nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.
En este artículo, veremos cajones en la interfaz de usuario de Blaze. Los cajones son los menús deslizantes que se utilizan en las aplicaciones web. Proporciona un diseño especial para los elementos de la tarjeta.
Clases de cajones de Blaze UI:
- o-drawer: esta clase se usa para crear un cajón en la interfaz de usuario de Blaze.
- o-drawer-visible: esta clase se usa para hacer que el cajón sea visible en la interfaz de usuario de Blaze y, si no desea que el cajón sea visible, simplemente elimine esta clase de la etiqueta <aside>.
Cajones de la interfaz de usuario de Blaze:
- Atributos de los cajones de la interfaz de usuario de Blaze : hay tres atributos en los cajones, cada uno de los cuales jugó un papel diferente
- Métodos de cajones de Blaze UI : hay 3 métodos en los cajones show, close y isOpen.
- Posiciones de los cajones de la interfaz de usuario de Blaze: en los cajones de la interfaz de usuario de Blaze, los cajones se pueden colocar en 4 posiciones diferentes arriba, abajo, izquierda y derecha.
Sintaxis:
<div aria-hidden class="c-overlay c-overlay--dismissible"></div>
<aside aria-label="Demo drawer" aria-expanded
class="o-drawer o-drawer--top o-drawer--visible">
<div class="c-card">
<header class="c-card__header">
<h2 class="c-heading">
Main header
<div class="c-heading__sub">Sub header</div>
</h2>
</header>
<div class="c-card__body">
Drawer content goes here...
</div>
<footer class="c-card__footer">
<div class="c-input-group">
<button class="c-button c-button--block">
Button
</button>
</div>
</footer>
</div>
</aside>
Nota: para que el cajón aparezca en el sitio web y desaparezca, cambie el modificador .o-drawer–visible en la etiqueta <aside>.
Ejemplo 1: El siguiente ejemplo muestra el cajó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"/> <title>Blaze UI</title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"/> </head> <body style="background-color: rgb(145, 242, 145);"> <div class="u-centered"> <h1 style="color: white">GeeksforGeeks</h1> <h2>Drawers in Blaze UI</h2> </div> <img class="o-image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png" style="width: 500px; height: 500px; margin-left: auto; margin-right: auto; display: block;"/> <div aria-hidden class="c-overlay c-overlay--dismissible"> </div> <aside aria-label="Demo drawer" aria-expanded class="o-drawer u-highest o-drawer--right o-drawer--visible"> <div class="c-card"> <header class="c-card__header"> <h1 class="c-heading"> GFG Courses <div class="c-heading__sub" style="color: green"> Buy Courses </div> </h1> </header> <div class="c-card__body"> Find courses on ReactJS, Data structures and algorithm, Fork Java, etc. </div> <footer class="c-card__footer"> <div class="c-input-group"> <button class="c-button c-button--block c-button--info"> Buy </button> <button class="c-button c-button--block c-button--success"> Share </button> </div> </footer> </div> </aside> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra los cajones en la posición inferior.
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>Blaze UI</title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"/> </head> <body style="background-color: rgb(138, 236, 214)"> <div class="u-centered"> <h1 style="color: white">GeeksforGeeks</h1> <h2>Drawers in Blaze UI</h2> </div> <div aria-hidden class="c-overlay c-overlay--dismissible"> </div> <aside aria-label="Demo drawer" aria-expanded class="o-drawer u-highest o-drawer--bottom o-drawer--visible"> <div class="c-card"> <header class="c-card__header"> <h2 class="c-heading"> Welcome to GeeksforGeeks <div class="c-heading__sub"> Learn more </div> </h2> </header> <div class="c-card__body"> GeeksforGeeks is a portal for geeks. It is a place where you can learn, share and get help from other geeks. Find various things on the portal like Jobs, Hackathons, Programming Competitions, Coding Questions, etc. You can also learn various things like programming lanaguages, algorithms, data structures, etc. </div> <footer class="c-card__footer"> <div class="c-input-group"> <button class="c-button c-button--block c-button--warning"> Visit </button> <button class="c-button c-button--block c-button--success"> Sign Up </button> <button class="c-button c-button--block c-button--info"> Log In </button> </div> </footer> </div> </aside> </body> </html>
Producción:
Referencia: https://www.blazeui.com/objects/drawers/
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA