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.
- ZK CE: 8.0.0 or later
- ZK PE and EE: (Optional)
<button label="Open" onClick="dr1.open()"/>
<drawer id="dr1" title="The drawer" width="300px">
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 firstname.lastname@example.org.
The whole demo project can be found on the GitHub project.