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 CE: 8.0.0 or later
  • ZK PE and EE: (Optional)

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 info@zkoss.org.

Downloads

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.

2 Responses to “Introduce a new ZK Addon: Drawer”

  1. andreas boos says:

    Hi.

    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.

    Congratulations.

  2. Tomas says:

    Congratulations!.

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

Leave a Reply