OTabPane

OTabPane declares one tab of a parent OTabs: its value, its label, and the content, such as a component, shown when the tab is selected.

Usage

Step by step

1. Import OTabPane with OTabs from the ooko-ui/tabs public subpath.
2. Place one OTabPane per tab directly inside OTabs, with a unique value and a label.
3. Put the tab's content in the default slot. Add lazy to mount it only while the tab is selected, or lazy-once to mount it on the first selection and keep it afterwards.

Example

The rendered example and its source come from the same Vue single-file component.

Content of the overview tab.

Interactive playground

Disable a pane to see keyboard navigation skip its tab.

Content of the overview tab.

Selected tab overviewactivitysettings Variant linebottom-bar Disable "Activity"

Props

Prop	Type	Default	Description
value	string	undefined	Unique value bound to the parent OTabs v-model when the tab is selected.
label	string	undefined	Visible text and accessible name of the tab.
disabled	boolean	false	Prevents selecting the tab and skips it during keyboard navigation.
lazy	boolean	false	Mounts the content only while the tab is selected, and unmounts it when another tab is selected.
lazyOnce	boolean	false	Mounts the content the first time the tab is selected, then keeps it mounted and hidden.

Events

Event	Payload	Description
none	none	No custom Vue events are emitted.

Slots

Slot	Props	Description
default	none	Content of the panel; without it, the tab has no panel.

CSS custom properties

Custom property	Default	Description
none	none	No component-specific custom properties are exposed.

Override example

OTabPane has no public CSS custom properties. Style its tab and panel through the OTabs custom properties.

Accessibility

label is the visible text and accessible name of the tab. OTabs renders the tab and its tabpanel, labels the panel by the tab, and links them with aria-controls; disabled uses the native disabled attribute and removes the tab from keyboard navigation.

Behavior and edge cases

• OTabPane only renders its content; OTabs reads its props to build the tab list, so a pane rendered outside OTabs has no tab.
• By default the content stays mounted and its panel is hidden while another tab is selected, so components keep their local state. lazy unmounts it when another tab is selected; lazy-once defers mounting until the first selection. lazy wins when both are set.
• A pane without a default slot renders a tab but no panel, for content that lives elsewhere, such as a RouterView.