Employment/Purpose

A tabpanels component is a container for tab panels, which are a collection of tabpanel components.

Example

The example below demonstrates the usage of the tabpanels component within a tabbox. In this example, two sets of tabs and tab panels are defined within separate tabbox components. The first tabbox displays tabs horizontally, while the second tabbox uses an accordion-style layout.

Tabpanels 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

Tabpanel: Represents a single Tabpanel within the Tabpanels component. The Tabpanels component can include multiple Tabpanel components as its children.