It is common to put v-tabs inside the extension slot of v-toolbar. Using v-toolbar's tabs prop auto adjusts its height to 48px to match v-tabs.
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-item-group. It provides an easy to use interface for organizing groups of content.
When using the dark prop and NOT providing a custom color, the v-tabs component will default its color to white.
When using v-tab-item's that contain required input fields you must use the eager prop in order to validate the required fields that are not yet visible.
Wählen Sie unten Ihren gewünschte Komponente aus und sehen Sie die verfügbaren Attribute, Slots, Ereignisse und Funktionen.
Unten finden Sie eine Sammlung einfacher bis komplexer Beispiele.
The fixed-tabs prop forces v-tab to take up all available space up to the maximum width (300px).
Active tab is always centered
The v-tabs-items component allows for you to customize the content per tab. Using a shared v-model, the v-tabs-items will sync with the currently selected v-tab.
The grow prop will make the tab items take up all available space up to a maximum width of 300px.
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.
prev-icon and next-icon can be used for applying custom pagination icons.
Tabs can be toggled to stack its v-tab components vertically.
v-tab's can contain icons as well as text. This increases the v-tabs height to 72px.
The right prop aligns the tabs to the right.
Make v-tabs lined up with the v-toolbar-title component (v-app-bar-nav-icon or v-btn must be used in v-toolbar).
Tabs can be dynamically added and removed. This allows you to update to any number and the v-tabs component will react. 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-tabs and the slider will disappear.
When changing your v-tab-item, the content area will smoothly scale to the new size.
You can represent v-tab actions by using single icons. This is useful when it is easy to correlate content to each tab.
Caught a mistake or want to contribute to the documentation?
Edit Layout
on GitHub!