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.


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

Required Configuration


  • ZK 8.0.0 or later


  <button label="Open" onClick=""/>
  <drawer id="dr1" title="The drawer" width="300px">
    Hello world

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


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

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

6 Responses to “[ZK 9 Preview] Introduce a new ZK Addon: Drawer”

  1. andreas boos says:


    Very nice. I certainly want to use it.
    I currently use the borderlayout, for menu, but for mobile it is not very “ordinary”.
    That component was missing.


  2. Tomas says:


    Wonderful feature is detect mouse close to screen border and auto open the panel.

  3. chin yu says:

    Opening drawing with animation is good , please provide the same animation while closing also

  4. Rudy Huang says:

    Hi, thanks for your feedback.
    We’ll add the closing animation and auto drop feature in the final version, which will be included in ZK 9.

  5. chin yu says:

    In release 9.0, the vflex in sub components is not working as
    supposed to be

  6. Rudy Huang says:

    Hi, chin yu. Thanks, the issue will be fixed in ZK 9.0.1.

Leave a Reply