Tab
Tab
- Demonstration: Tabbox Demo
- Java API:
org.zkoss.zul.Tab
- JavaScript API:
zul.tab.Tab
Employment/Purpose
The ZK Tab component is used to represent a specific tab within a tab container. Clicking on a tab brings the corresponding tab panel to the front. Tabs can be customized with labels and images using the label
and image
properties.
Example
The example below demonstrates a tabbox
with two tabs, each displaying a label and an image. The first tab is not closable, while the second tab is closable with a close button that allows the user to remove it.
<tabbox width="400px">
<tabs>
<tab label="Tab 1" image="/img/folder.gif" />
<tab label="Tab 2" image="/img/folder.gif" closable="true" />
</tabs>
<tabpanels>
<tabpanel>This is panel 1</tabpanel>
<tabpanel>This is panel 2</tabpanel>
</tabpanels>
</tabbox>
Try it
Properties and Features
Caption
Tabs can have a caption by declaring a child component called caption
. The example below shows a tab with a search caption containing a textbox component. This feature is available in ZK Enterprise Edition starting from version 6.5.0.
<tabbox width="400px">
<tabs>
<tab label="Tab 1" image="/img/folder.gif" />
<tab label="Tab 2" image="/img/folder.gif" closable="true" />
<tab>
<caption hflex="min" label="search">
<textbox />
</caption>
</tab>
</tabs>
<tabpanels>
<tabpanel>This is panel 1</tabpanel>
<tabpanel>This is panel 2</tabpanel>
<tabpanel>This is panel 3</tabpanel>
</tabpanels>
</tabbox>
Try it
Closable
By setting the closable
property to true, a close button is displayed on the tab. When clicked, the tab and its corresponding tab panel are detached from the component. An onClose
event is triggered, which can be handled to perform custom actions upon tab closure.
Dynamically-created Tab
In ZK version 7.0.0 and above, when dynamically creating tabs using a model, special handling is required. To remove the corresponding item from the model upon tab closure, developers need to listen to the onClose
event and manually remove the item. The example below demonstrates how to handle the onClose
event when using a model in the MVC pattern.
<zk>
<tabbox id="tabbox" apply="pkg$.TabboxComposer">
<template name="model:tab">
<tab closable="true" label="${each}" onClose="self.detach()"/>
</template>
</tabbox>
</zk>
public class TabboxComposer extends SelectorComposer {
@Wire
Tabbox tabbox;
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
ListModelList model = new ListModelList();
model.add("Tab1");
model.add("Tab2");
model.add("Tab3");
tabbox.setModel(model);
}
}
Try it
Supported Events
Name | Event Type | Description |
---|---|---|
onSelect |
Event: SelectEvent | Denotes user has selected a tab. onSelect is sent to both tab and tabbox. |
onClose |
Event: Event | Denotes the close button is pressed by a user, and the component shall detach itself. |
Supported Children
Caption
: Indicates that theTab
component can only have one child component of typeCaption
.