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.

Tab Example

<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.

Tab Caption Example

<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 the Tab component can only have one child component of type Caption.