Content
It is common to put v-tabs
inside the extension slot of v-toolbar
.
The v-tabs
component is used for hiding content behind a selectable item. This can also be used as a pseudo-navigation for a page, where the tabs are links and the tab-items are the content.
The v-tabs
component is a styled extension of v-slide-group. It provides an easy to use interface for organizing content into separate sections.
The align-tabs prop will align tabs to the start
, center
, or end
of its container.
Make v-tabs
line up with the v-toolbar-title
component by setting the align-tabs prop to title
(v-app-bar-nav-icon
or v-btn
must be used in v-toolbar
).
The center-active prop will make the active tab always centered.
prev-icon and next-icon can be used for applying custom pagination icons.
The fixed-tabs prop forces v-tab
items to take up all available space up to their maximum width (300px), and centers them.
The grow prop will make the tab items take up all available space with no limit.
Using stacked increases the v-tabs
height to 72px to allow for both icons and text to be displayed.
If the tab items overflow their container, pagination controls will appear on desktop. For mobile devices, arrows will only display with the show-arrows prop.
The direction prop allows for v-tab
components to stack vertically.
It is common to put v-tabs
inside the extension slot of v-toolbar
.
On mobile you can use v-tab
items with just icons to conserve space.
Tabs can be dynamically added and removed. In this example when we add a new tab, we automatically change our model to match. As we add more tabs and overflow the container, the selected item will be automatically scrolled into view. Remove all v-tab
items and the slider will disappear.