Processing...
Description & Source Code

Drawer offers a sleek, space-saving navigation solution for modern web applications. Designed to elegantly slide in and out from the edge of the screen. Drawer provides quick access to menus, tools, or content without overwhelming the main interface. Ideal for enhancing responsive design, it allows for a seamless user experience across devices of varying screen sizes. Explore the Drawer demo to see how it can be used into your ZK application, offering a user-friendly and intuitive way to navigate complex applications with ease.

drawer.zul
<zk>
    <button label="Show File Info" onClick="drawer.open()"/>
    <drawer id="drawer" title="File information" autodrop="true">
        <grid>
            <rows>
                <row>
                    <label value="Name"/>
                    person.jpg
                </row>
                <row>
                    <label value="Size"/>
                    1.8 Megabytes
                </row>
                <row>
                    <label value="Dimensions"/>
                    1920x1080
                </row>
            </rows>
        </grid>
    </drawer>
</zk>