Blaze UI Drawers Attributes

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.

Output:

👁 Image

Example 2: In the following example, we will change the position of the drawer using the position attribute with the help of buttons.

Output:

👁 Image

Reference: https://www.blazeui.com/objects/drawers/