CodexTab
A section of content within a Tabs layout.
This component can display arbitrary content via its default slot. Provided markup is wrapped inside of a <section> tag and given a unique HTML ID.
Must be used with Tabs component
This component is only meant to be used inside the default <slot> of the <Tabs> component. It cannot be used as a stand-alone component. See the Tabs documentation for more information.
Demos
Configurable example
The demo below allows for configuration of name, label, and disabled props, as well as slot content.
Usage
Props
| Prop name | Description | Type | Default |
|---|---|---|---|
name(required) | String name of the tab, used for programmatic selection. Each Tab inside a layout must have a unique name. This prop will also be used as the tab label if no "label" prop is provided. | string | |
label | Label that corresponds to this Tab in the Tabs component's header. Lengthy labels will be truncated. | string | '' |
disabled | Whether or not the tab is disabled. Disabled tabs cannot be accessed via label clicks or keyboard navigation. | boolean | false |
Slots
| Name | Description | Bindings |
|---|---|---|
| default | Tab content |
CSS-only version
See the Tabs page to learn how to build a CSS-only tabbed layout.