Blaze UI es un marco de código abierto de CSS. Es un kit de herramientas de interfaz de usuario liviano que 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.
Los cajones de la interfaz de usuario de Blaze son menús deslizables con algunos detalles, enlaces y botones que brindan funciones adicionales y navegación en el sitio web. Los cajones se pueden abrir, cerrar y acoplar en cualquiera de las direcciones. Podemos poner cualquier contenido HTML dentro del cajón y, si se abre, oculta parcialmente la página web.
Atributos de los cajones de Blaze UI:
- abierto: este atributo toma un valor booleano que indica que el cajón debe abrirse en su estado inicial.
- descartable: este atributo también toma un valor booleano que indica si el cajón debe ser descartable o no.
- posición: Este atributo pregunta la posición donde aparecerá el cajón. Las direcciones son izquierda , arriba , abajo y derecha .
Sintaxis: Cree un cajón con atributos de la siguiente manera:
<blaze-drawer id="gfgdrawer" position="left" dismissible="true">
...
</blaze-drawer>
Ejemplo 1: En el siguiente ejemplo, tenemos un cajón descartable .
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" />
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.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>
</head>
<body>
<div class="o-container">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Drawers Attributes</strong>
<br />
<br />
<button onclick="toggleDrawer()">
Open Drawer
</button>
</center>
<blaze-drawer id="gfgdrawer" position="left"
dismissible="true">
<blaze-card>
<blaze-card-header>
<h2 class="c-heading u-xlarge">
Welcome to GeeksforGeeks
<div class="c-heading__sub">
Sub-heading
</div>
</h2>
</blaze-card-header>
<blaze-card-body>
<p class="c-paragraph">
Blaze UI Drawer Attributes
</p>
</blaze-card-body>
<blaze-card-footer>
<div class="c-input-group">
<button onclick="toggleDrawer()"
class="c-button c-button--block
c-button--error">
Close
</button>
</div>
</blaze-card-footer>
</blaze-card>
</blaze-drawer>
</div>
<script>
async function toggleDrawer() {
const isOpen = await document
.getElementById('gfgdrawer').isOpen()
if (isOpen) {
document.getElementById('gfgdrawer').close()
}
else {
document.getElementById('gfgdrawer').show()
}
}
</script>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, cambiaremos la posición del cajón usando el atributo de posición con la ayuda de botones.
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" />
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.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>
</head>
<body>
<div class="o-container">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Drawers Attributes</strong>
<br />
<br />
<button onclick="toggleDrawer()">
Open Drawer
</button>
<br />
<br />
<button onclick="changePosition('left')"
class="c-button c-button--warning">
Left
</button>
<button onclick="changePosition('right')"
class="c-button c-button--warning">
Right
</button>
<button onclick="changePosition('top')"
class="c-button c-button--warning">
Top
</button>
<button onclick="changePosition('bottom')"
class="c-button c-button--warning">
Bottom
</button>
</center>
<blaze-drawer id="gfgdrawer"
position="left" dismissible="true">
<blaze-card>
<blaze-card-header>
<h2 class="c-heading u-xlarge">
Welcome to GeeksforGeeks
<div class="c-heading__sub">
Sub-heading
</div>
</h2>
</blaze-card-header>
<blaze-card-body>
<p class="c-paragraph">
Blaze UI Drawer Attributes
</p>
</blaze-card-body>
<blaze-card-footer>
<div class="c-input-group">
<button onclick="toggleDrawer()"
class="c-button c-button--block
c-button--error">
Close
</button>
</div>
</blaze-card-footer>
</blaze-card>
</blaze-drawer>
</div>
<script>
async function toggleDrawer() {
const isOpen = await document
.getElementById('gfgdrawer').isOpen()
if (isOpen) {
document.getElementById('gfgdrawer').close()
}
else {
document.getElementById('gfgdrawer').show()
}
}
function changePosition(position) {
document.getElementById('gfgdrawer').position = position
}
</script>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/objects/drawers
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA