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.
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.
Métodos de cajones de Blaze UI:
- show(): este método abre el cajón.
- close(): Este método cierra el cajón.
- isOpen(): este método devuelve un valor booleano que indica si el cajón está abierto o no.
Sintaxis: La sintaxis para el cajón es la siguiente:
<blaze-drawer id="gfgdrawer"
position="left" dismissible="true">
...
</blaze-drawer>
Ejemplo 1: En el siguiente ejemplo, abriremos y cerraremos el cajón con la ayuda de los métodos del cajón y descartable se establecerá en falso.
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 Methods</strong>
<br />
<br />
<button onclick="toggleDrawer()">
Open Drawer
</button>
</center>
<blaze-drawer id="gfgdrawer" position="bottom">
<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 Methods
</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, tenemos un botón tanto en la página principal como en el cajón que mostrará una alerta al hacer clic si el cajón está abierto o no.
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 Methods</strong>
<br />
<br />
<button onclick="toggleDrawer()">
Open Drawer</button>
<br />
<br />
<button onclick="checkOpen()">
Check Drawer is Open
</button>
</center>
<blaze-drawer id="gfgdrawer" position="bottom">
<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 Methods
</p>
<br />
<br />
<button onclick="checkOpen()">
Check Drawer is Open
</button>
</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()
}
}
async function checkOpen() {
const isOpen = await document
.getElementById('gfgdrawer').isOpen()
alert('The drawer is '
+ (isOpen ? 'opened' : 'closed'))
}
</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