Blaze UI Drawers
Blaze UI is a free open-source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.
In this article, we’ll see drawers in Blaze UI. The drawers are the slide menus that are used in web applications. It provides a special layout for card elements.
Blaze UI Drawers Classes:
- o-drawer: This class is used to create a drawer in Blaze UI.
- o-drawer-visible: This class is used to make the drawer visible in Blaze UI and If you don’t want to make the drawer visible, just remove this class from the <aside> tag.
Blaze UI Drawers:
- Blaze UI Drawers Attributes: There are three attributes in drawers each of them played different roles
- Blaze UI Drawers Methods: There are 3 methods in drawers show, close and isOpen.
- Blaze UI Drawers Positions: In Blaze UI Drawers, the drawers can be placed in 4 different positions top, bottom, left, and right.
<div aria-hidden class="c-overlay c-overlay--dismissible"></div> <aside aria-label="Demo drawer" aria-expanded class="o-drawer o-drawer--top o-drawer--visible"> <div class="c-card"> <header class="c-card__header"> <h2 class="c-heading"> Main header <div class="c-heading__sub">Sub header</div> </h2> </header> <div class="c-card__body"> Drawer content goes here... </div> <footer class="c-card__footer"> <div class="c-input-group"> <button class="c-button c-button--block"> Button </button> </div> </footer> </div> </aside>
Note: To make the drawer appear on the website and disappear, then change the .o-drawer–visible modifier in the <aside> tag.
Example 1: Below example demonstrates the drawer.
Example 2: Below example demonstrates the drawers at the bottom position.