Introduction

We’re pleased to introduce a new ZK Addon – Drawer.
A Drawer is a component that acts as a panel but sticks to the boundary of a web page. With this, you can make the page cleaner and put detail into the Drawer for better user experience.

Demo

The demo below demonstrates the basic usage of a Drawer component.

Required Configuration

Version

• ZK 8.0.0 or later

ZUL

<zk>
  <button label="Open" onClick="dr1.open()"/>
  <drawer id="dr1" title="The drawer" width="300px">
    Hello world
  </drawer>
</zk>

Drawer Component

We provide several APIs to set the drawer:

• setTitle(String title)
  Set the title text. (Default: null)
• setPosition(String position)
  Supported value: “left”, (default) “right”, “top” or “bottom”.
• setMask(boolean mask)
  Set if a fullscreen mask is needed. (Default: true)
• setClosable(boolean closable)
  Set if a closable button is visible for users. (Default: false)
• open() / close()
  Calling these methods to open or close the drawer. For MVVM, use the visible attribute to control it.
• onOpen (OpenEvent)
  An OpenEvent will be triggered once the drawer is opened or closed.

The animation speed can be adjusted by using data-animationspeed client attribute. To completely remove the animation, just set 0 instead.

This component is currently in beta. If you are interested in using this component please contact us at [email protected].

Downloads

The whole demo project can be found on the GitHub project.