<!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
>