Tab
A Tab is one of the selectable items included within Tabs.
Name | Value |
---|---|
Props | |
disabled | |
tabName | |
label | |
Slots | |
default | |
View | |
Reading direction |
Overview
When to use Tab
Two or more Tab items are grouped to create a Tabs component. Tab items cannot be used individually. For example, different Tab items can represent the different sections of an article.
About Tab
Tab includes the following elements.
Label
Avoid mixing verbs and nouns for the labels. Consistent & Clear
Content
Tab content appears underneath the Tab when selected, and can include any type of content or components.
Technical implementations
Vue usage
This component can display arbitrary content, including markup, via its default slot. The provided content is wrapped in a <section>
tag and given an 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 standalone component. Visit the Tabs documentation for more information.
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.