Blaze UI Drawers Methods

Last Updated : 19 Apr, 2022

Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit and 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. It 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 Methods:

show(): This method opens the drawer.
close(): This method closes the drawer.
isOpen(): This method returns a boolean value stating whether the drawer is open or not.

Syntax: The syntax for the drawer is as follows:

<blaze-drawer id="gfgdrawer"
      position="left" dismissible="true">
    ...
</blaze-drawer>

Example 1: In the following example, we will open and close the drawer with the help of drawer methods and the dismissible will be set to false.

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" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
    <script nomodule="" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> 
    </script> 
</head> 
  
<body> 
    <div class="o-container"> 
        <center> 
            <h1 style="color: green;"> 
                GeeksforGeeks 
            </h1> 
              
            <strong>Blaze UI Drawers Methods</strong> 
            <br /> 
            <br /> 
            <button onclick="toggleDrawer()"> 
                Open Drawer 
            </button> 
        </center> 
  
        <blaze-drawer id="gfgdrawer" position="bottom"> 
            <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 Methods 
                    </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 have a button on both the main page and drawer which will show an alert on click whether the drawer is open or not.

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" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
    <script nomodule="" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> 
    </script> 
</head> 
  
<body> 
    <div class="o-container"> 
        <center> 
            <h1 style="color: green;"> 
                GeeksforGeeks 
            </h1> 
              
            <strong>Blaze UI Drawers Methods</strong> 
            <br /> 
            <br /> 
            <button onclick="toggleDrawer()"> 
                Open Drawer</button> 
            <br /> 
            <br /> 
            <button onclick="checkOpen()"> 
                Check Drawer is Open 
            </button> 
        </center> 
  
        <blaze-drawer id="gfgdrawer" position="bottom"> 
            <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 Methods 
                    </p> 
  
                    <br /> 
                    <br /> 
                    <button onclick="checkOpen()"> 
                        Check Drawer is Open 
                    </button> 
                </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() 
            } 
        } 
        async function checkOpen() { 
            const isOpen = await document 
                .getElementById('gfgdrawer').isOpen() 
            alert('The drawer is '  
                + (isOpen ? 'opened' : 'closed')) 
        } 
    </script> 
</body> 
  
</html>