Diwa Design System

Tabs

A full-featured tabbed interface that combines a tab bar with associated panel content.

diwa-tabs Properties

NameTypeDefaultDescription
activeTabIndexnumber0Zero-based index of the currently active tab.
theme'dark' | 'light''dark'Per-component theme override.

diwa-tabs Events

NameDetail typeBubblesDescription
update{ activeTabIndex: number }NoEmitted when the user selects a different tab.

diwa-tabs Slots

Default slot — accepts one or more diwa-tabs-item elements. The component reads the label prop from each item to render the tab buttons.

diwa-tabs-item Properties

NameTypeDefaultDescription
labelstring''Tab button label rendered in the tab bar by the parent diwa-tabs.
activebooleanfalseWhether this panel is currently visible. Managed by the parent diwa-tabs.
theme'dark' | 'light''dark'Per-component theme override.

diwa-tabs-item Slots

Default slot — the panel content shown when this tab is active.