A layout for navigating between sections of 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
Two stylistic variants are available, quiet (the default) and 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
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.
|Whether or not the component should be displayed in a framed visual style.|
|Programmatically select a tab based on its "name" prop||Params: |
|Set the next tab to active, if one exists||Returns: |
|Set the previous tab to active, if one exists||Returns: |
|active ||Emitted whenever the active tab changes|
|default||One or more Tab components must be provided here|