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 las posiciones de los cajones en la interfaz de usuario de Blaze. Los cajones son los menús deslizantes que se utilizan en las aplicaciones web. Hay cuatro posiciones dadas en Blaze UI para definir un objeto de cajón, y estas son: .c-cajón–superior, .c-cajón–derecha , .c-cajón–izquierda y .c-cajón–inferior .
Clases de posiciones de cajones de Blaze UI:
- o-drawer–left: esta clase se utiliza para crear un cajón situado a la izquierda en la interfaz de usuario de Blaze.
- o-drawer–right: esta clase se usa para crear un cajón colocado a la derecha en la interfaz de usuario de Blaze.
- o-drawer–top: esta clase se usa para crear un cajón en la parte superior de la interfaz de usuario de Blaze.
- o-drawer–bottom : esta clase se usa para crear un cajón en la parte inferior de la interfaz de usuario de Blaze.
Sintaxis:
<div aria-hidden class="c-overlay c-overlay--dismissible"></div>
<aside aria-label="Demo drawer" aria-expanded
class="o-drawer o-drawer--bottom 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>
Ejemplo 1: El siguiente ejemplo muestra el cajón colocado en la parte 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 Position 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"> GeeksforGeeks <div class="c-heading__sub"> Courses </div> </h2> </header> <div class="c-card__body"> This is a Left position drawer created with Blaze UI. </div> <footer class="c-card__footer"> <div class="c-input-group"> <button class="c-button c-button--block c-button--success"> Buy </button> </div> </footer> </div> </aside> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el cajón en la parte superior.
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 Position 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--top o-drawer--visible"> <div class="c-card"> <header class="c-card__header"> <h2 class="c-heading"> GeeksforGeeks <div class="c-heading__sub"> Jobs </div> </h2> </header> <div class="c-card__body"> This is a Top position drawer created with Blaze UI. </div> <footer class="c-card__footer"> <div class="c-input-group"> <button class="c-button c-button--block c-button--info"> Find Jobs </button> </div> </footer> </div> </aside> </body> </html>
Producción:
Ejemplo 3: El siguiente ejemplo muestra el cajón colocado a la izquierda.
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 Position 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--left o-drawer--visible"> <div class="c-card"> <header class="c-card__header"> <h2 class="c-heading"> GeeksforGeeks <div class="c-heading__sub"> Premium Portal </div> </h2> </header> <div class="c-card__body"> This is a Left position drawer created with Blaze UI. </div> <footer class="c-card__footer"> <div class="c-input-group"> <button class="c-button c-button--block c-button--success"> Practice </button> <button class="c-button c-button--block c-button--info"> Premium </button> </div> </footer> </div> </aside> </body> </html>
Producción:
Ejemplo 4: El siguiente ejemplo muestra el cajón colocado a la derecha.
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 Position 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--right o-drawer--visible"> <div class="c-card"> <header class="c-card__header"> <h2 class="c-heading"> GeeksforGeeks <div class="c-heading__sub"> Computer Science Portal </div> </h2> </header> <div class="c-card__body"> This is a Right position drawer created with Blaze UI. </div> <footer class="c-card__footer"> <div class="c-input-group"> <button class="c-button c-button--block c-button--success"> Sign Up </button> <button class="c-button c-button--block c-button--warning"> 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