Tabs
A layout containing multiple sections, only one of which is visible at any given time. A header row is automatically generated from the provided content.
One or more <Tab>
components must be provided in the default slot of the <Tabs>
component. Each child <Tab>
component must have a name
property. The <Tabs>
component must have an active prop which matches the name of one of the child <Tab>
components in the slot.
In order for the active tabs to change, the name
of the active tab must be bound in the parent somehow, either using v-model:active
or by manually binding the active
prop and listening for update:active
events.
Demos
Basic Example
Two stylistic variants are available, quiet (the default) and framed.
Name | Value |
---|---|
Props | |
framed |
Header row scroll
When the width of the header row exceeds the width of its container, arrow buttons will appear to enable scrolling through tab names.
Content for tab1
This is the content for the First Tab
Name | Value |
---|---|
Props | |
framed |
Dynamic replacement of slot content
The Tabs component will re-render if the provided slot content changes. Clicking the button below will replace the initial tabs with a new set; the header row will update to match.
Content for tab1
This is the content for the First Tab
Usage
Props
Prop name | Description | Type | Default |
---|---|---|---|
active (required) | The name of the currently active Tab in the layout.Provided by v-model:active binding in the parent component. | string | |
framed | Whether or not the component should be displayed in a framed visual style. | boolean | false |
Methods
Method name | Description | Signature |
---|---|---|
select | Programmatically select a tab based on its "name" prop | Params:
void |
next | Set the next tab to active, if one exists | Returns: void |
prev | Set the previous tab to active, if one exists | Returns: void |
Events
Event name | Properties | Description |
---|---|---|
update:active | active string - The name of the current active tab | Emitted whenever the active tab changes |
Slots
Name | Description | Bindings |
---|---|---|
default | One or more Tab components must be provided here |