Blaze UI 抽屉方法

Blaze UI是一个 CSS 开源框架。它是一个轻量级的 UI 工具包，为构建定制和可扩展的应用程序提供了很好的工具。它可以与任何存在的框架一起使用。它可以适应任何生态系统。所有设计或 CSS 都是移动优先的，因此是响应式的。它项目是开源的，因此有一个大型社区维护它。

Blaze UI Drawers是带有一些详细信息、链接和按钮的滑入式菜单，可在网站上提供额外的功能和导航。抽屉可以在任何方向打开、关闭和停靠。我们可以将任何 HTML 内容放入抽屉中，如果打开，它们会部分隐藏网页。

Blaze UI 抽屉方法：

• show()：此方法打开抽屉。
• close()：此方法关闭抽屉。
• isOpen()：此方法返回一个布尔值，说明抽屉是否打开。

语法：抽屉的语法如下：

    ...

示例 1：在下面的示例中，我们将在抽屉方法的帮助下打开和关闭抽屉，并且将可关闭的设置为 false。

HTML

  

    
    
    
    
    
    
    
    

  

    
        
            
                GeeksforGeeks
            
              
            Blaze UI Drawers Methods
            
            
            
                Open Drawer
            
        
  
        
            
                
                    
                        Welcome to GeeksforGeeks
                        Sub-heading
                    
                
                
                    
                        Blaze UI Drawer Methods
                    
  
                
                
                    
                        
                            Close
                        
                    
                
            
        
    
      
    
        async function toggleDrawer() {
            const isOpen = await document
                .getElementById('gfgdrawer').isOpen()
            if (isOpen) {
                document.getElementById('gfgdrawer').close()
            } else {
                document.getElementById('gfgdrawer').show()
            }
        }
    

  

输出

示例 2：在下面的示例中，我们在主页和抽屉上都有一个按钮，无论抽屉是否打开，它都会在单击时显示警报。

HTML

  

    
    
    
    
    
    
    
    

  

    
        
            
                GeeksforGeeks
            
              
            Blaze UI Drawers Methods
            
            
            
                Open Drawer
            
            
            
                Check Drawer is Open
            
        
  
        
            
                
                    
                        Welcome to GeeksforGeeks
                        
                            Sub-heading
                    
                
                
                    
                        Blaze UI Drawer Methods
                    
  
                    
                    
                    
                        Check Drawer is Open
                    
                
  
                
                    
                        
                            Close
                        
                    
                
            
        
    
    
        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'))
        }
    

  

输出：

参考： https://www.blazeui.com/objects/drawers/