Tabs

Employment/Purpose

The tabs component serves as a container for multiple tab components. It allows organizing content within a tabbed interface where users can switch between different sections or views by clicking on tabs.

Example

The example below demonstrates the usage of the Tabs component in a ZK application:

Tabs Example

<zk>
    <tabbox width="400px">
        <tabs>
            <tab label="Tab 1" />
            <tab label="Tab 2" />
        </tabs>
        <tabpanels>
            <tabpanel>This is panel 1</tabpanel>
            <tabpanel>This is panel 2</tabpanel>
        </tabpanels>
    </tabbox>
	<space />
    <tabbox width="400px" mold="accordion">
        <tabs>
            <tab label="Tab 3" />
            <tab label="Tab 4" />
        </tabs>
        <tabpanels>
            <tabpanel>This is panel 3</tabpanel>
            <tabpanel>This is panel 4</tabpanel>
        </tabpanels>
    </tabbox>
</zk>

Try it

Supported Children

Tab: Represents a single tab within the Tabs component. The Tabs component can include multiple Tab components as its children.