Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. Its project is available open-source so a large community maintains it.
Blaze UI Drawers are slide-in menus with some details, links, and buttons that provide extra features and navigation on the website. The drawers can be opened, closed, and docked in any of the directions. We can put any HTML content inside the drawer and if opened, they partially hide the webpage.
Blaze UI Drawers Attributes:
- open: This attribute takes a boolean value that the drawer should be opened in its initial state.
- dismissible: This attribute also takes a boolean value that states whether the drawer should be dismissible or not.
- position: This attribute asks the position where the drawer will appear. The directions are left, top, bottom, and right.
Syntax: Create a drawer with attributes as follows:
<blaze-drawer id="gfgdrawer" position="left" dismissible="true">
...
</blaze-drawer>Example 1: In the following example, we have a dismissible drawer.
<!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=
<script type="module" src=
</script>
<script nomodule="" src=
</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>
|
Output:
Example 2: In the following example, we will change the position of the drawer using the position attribute with the help of buttons.
<!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=
<script type="module" src=
</script>
<script nomodule="" src=
</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>
|
Output:
Reference: https://www.blazeui.com/objects/drawers