Blaze UI Drawers

Last Updated : 13 Jun, 2022

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.

Syntax:

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

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"/>
    <title>Blaze UI</title>
    <link rel="stylesheet"
          href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"/>
</head>
<body style="background-color: rgb(145, 242, 145);">
    <div class="u-centered">
        <h1 style="color: white">GeeksforGeeks</h1>
        <h2>Drawers in Blaze UI</h2>
    </div>
    <img class="o-image"
         src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"
        style="width: 500px; height: 500px; 
        margin-left: auto; margin-right: auto; 
        display: block;"/>
    <div aria-hidden class="c-overlay 
            c-overlay--dismissible">
    </div>
    <aside aria-label="Demo drawer"
           aria-expanded 
           class="o-drawer u-highest
                  o-drawer--right 
                  o-drawer--visible">
        <div class="c-card">
            <header class="c-card__header">
                <h1 class="c-heading">
                    GFG Courses
                    <div class="c-heading__sub"
                        style="color: green">
                        Buy Courses
                    </div>
                </h1>
            </header>
            <div class="c-card__body">
                Find courses on ReactJS, Data structures 
                and algorithm, Fork Java, etc.
            </div>
            <footer class="c-card__footer">
                <div class="c-input-group">
                    <button class="c-button c-button--block 
                    c-button--info">
                        Buy
                    </button>
                    <button class="c-button c-button--block 
                    c-button--success">
                        Share
                    </button>
                </div>
            </footer>
        </div>
    </aside>
</body>
</html>

Output:

Example 2: Below example demonstrates the drawers at the bottom position.

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"/>
    <title>Blaze UI</title>
    <link rel="stylesheet"
          href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"/>
</head>
<body style="background-color: rgb(138, 236, 214)">
    <div class="u-centered">
        <h1 style="color: white">GeeksforGeeks</h1>
        <h2>Drawers in Blaze UI</h2>
    </div>
    <div aria-hidden class="c-overlay 
            c-overlay--dismissible">
      </div>
    <aside aria-label="Demo drawer"
           aria-expanded class="o-drawer u-highest 
                                o-drawer--bottom 
                                o-drawer--visible">
        <div class="c-card">
            <header class="c-card__header">
                <h2 class="c-heading">
                    Welcome to GeeksforGeeks
                    <div class="c-heading__sub">
                        Learn more
                    </div>
                </h2>
            </header>
            <div class="c-card__body">
                GeeksforGeeks is a portal for geeks. 
                It is a place where you can learn, share 
                and get help from other geeks. Find 
                various things on the portal like Jobs, 
                Hackathons, Programming Competitions, 
                Coding Questions, etc. You can also 
                learn various things like programming 
                lanaguages, algorithms, data 
                structures, etc.
            </div>
            <footer class="c-card__footer">
                <div class="c-input-group">
                    <button class="c-button c-button--block 
                    c-button--warning">
                        Visit
                    </button>
                    <button class="c-button c-button--block 
                    c-button--success">
                        Sign Up
                    </button>
                    <button class="c-button c-button--block 
                    c-button--info">
                        Log In
                    </button>
                </div>
            </footer>
        </div>
    </aside>
</body>
</html>