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 [email protected].


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