VTabs API
name | type | default |
|---|---|---|
'title' | 'start' | 'end' | 'center' | 'start' | |
Aligns the tabs to the | ||
string
| undefined | |
Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors with or without | ||
boolean
| false | |
Forces the selected tab to be centered. | ||
string
| undefined | |
Applies specified color to the selected tab - supports utility colors (for example | ||
any
| undefined | |
Adds classes to the slide group item. | ||
'default' | 'comfortable' | 'compact' | 'default' | |
Adjusts the vertical height used by the component. | ||
'horizontal' | 'vertical' | 'horizontal' | |
Changes the direction of the tabs. Can be either | ||
boolean
| false | |
Puts all children components into a disabled state. | ||
boolean
| false | |
Tabs will be centered and each tab item will grow up to 300px width. | ||
boolean
| false | |
Forces tabs to take up all available space. | ||
string | number | undefined | |
Sets the height of the tabs bar. | ||
boolean
| false | |
Hide’s the generated | ||
boolean
| false | |
Changes the slider to take full height. Tabs will also get some spacing and customizable rounding. | ||
string | number | undefined | |
Sets custom spacing between tabs for | ||
string | number | undefined | |
Sets custom border radius for the tabs container | ||
unknown[] | [] | |
The items to display in the component. This can be an array of strings or objects with a property | ||
boolean | 'force' | 'force' | |
Forces at least one item to always be selected (if available). | ||
number
| undefined | |
Sets a maximum number of selections that can be made. | ||
boolean
| null | |
Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint | ||
number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | undefined | |
Sets the designated mobile breakpoint for the component. | ||
unknown
| undefined | |
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. | ||
boolean
| false | |
Allows one to select multiple items. | ||
| string | (new () => any) | FunctionalComponent | (string | [string, number])[] | '$next' | |
Right pagination icon. | ||
| string | (new () => any) | FunctionalComponent | (string | [string, number])[] | '$prev' | |
Left pagination icon. | ||
boolean
| true | |
Keeps the last active element visible when resizing the scrollable container. | ||
string
| 'v-tab-item--selected' | |
Configure the active CSS class applied when an item is selected. | ||
string | boolean | false | |
Show pagination arrows if the tab items overflow their container. For mobile devices, arrows will only display when using this prop. | ||
string
| undefined | |
Changes the background color of an auto-generated | ||
'shift' | 'grow' | 'fade' | undefined | |
Changes slider transition to one of the predefined animation presets. | ||
string | number | undefined | |
Applies custom slider transition duration. Default duration depends on transition type (fade: 400, grow: 350, shift: 225). | ||
'start' | 'end' | 'both' | undefined | |
Extends content to the edges to move main content from prepend and append slots. | ||
boolean
| false | |
Apply the stacked prop to all children v-tab components. | ||
any
| undefined | |
The Symbol used to hook into group functionality for components like v-btn-toggle and v-bottom-navigation. | ||
string | (new () => any) | FunctionalComponent | 'div' | |
Specify a custom tag used on the root element. | ||
name | type | |
|---|---|---|
[unknown] | ||
Event that is emitted when the component’s model changes. | ||
Dynamic slot to define custom slots for specific tab window items | ||
Dynamic slot to define custom slots for specific tab headers in the slide group | ||
The default Vue slot. | ||
Define a custom item appearance. | ||
The next slot. | ||
The prev slot. | ||
Slot for custom tab header content. | ||
Slot for custom tab window content. | ||
name | default |
|---|---|
42px | |
0 | |
4px | |
settings.$border-radius-root | |
360px | |
90px | |
2px | |
( 'default': 0, 'comfortable' : -1, 'compact': -3) | |
48px | |
72px |