VTabs API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| align-tabs | ||
| Aligns the tabs to the start, center, or end of container. Also accepts title to align with the v-toolbar-title component. | ||
| bg-color | ||
| Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| center-active | ||
| Forces the selected tab to be centered. | ||
| color | ||
| Applies specified color to the selected tab - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| density | ||
| Adjusts the vertical height used by the component. | ||
| direction | ||
| Changes the direction of the tabs. Can be either horizontal or vertical. | ||
| disabled | ||
| Puts all children components into a disabled state. | ||
| fixed-tabs | ||
| v-tabs-item min-width 160px, max-width 360px. | ||
| grow | ||
| Force v-tab’s to take up all available space. | ||
| height | ||
| Sets the height of the tabs bar. | ||
| hide-slider | ||
| Hide’s the generated v-tabs-slider. | ||
| items | ||
| The items to display in the component. This can be an array of strings or objects with a property title. | ||
| mandatory | ||
| Forces at least one item to always be selected (if available). | ||
| max | ||
| Sets a maximum number of selections that can be made. | ||
| mobile | ||
| 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 | ||
| mobile-breakpoint | ||
| Sets the designated mobile breakpoint for the component. | ||
| model-value | ||
| The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. | ||
| multiple | ||
| Allows one to select multiple items. | ||
| next-icon | ||
| Right pagination icon. | ||
| prev-icon | ||
| Left pagination icon. | ||
| selected-class | ||
| Configure the active CSS class applied when an item is selected. | ||
| show-arrows | ||
| Show pagination arrows if the tab items overflow their container. For mobile devices, arrows will only display when using this prop. | ||
| slider-color | ||
| Changes the background color of an auto-generated v-tabs-slider. | ||
| stacked | ||
| Apply the stacked prop to all children v-tab components. | ||
| symbol | ||
| The Symbol used to hook into group functionality for components like v-btn-toggle and v-bottom-navigation . | ||
| tag | ||
| Specify a custom tag used on the root element. | ||
事件
| 名称 | 类型 |
|---|---|
| update:modelValue | |
| Event that is emitted when the component’s model changes. | |
插槽
| default |
| The default Vue slot. |
| item |
| Define a custom item appearance. |
| tab |
| MISSING DESCRIPTION |
| window |
| MISSING DESCRIPTION |
| [`item.${string}`] |
| MISSING DESCRIPTION |
| [`tab.${string}`] |
| MISSING DESCRIPTION |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $tab-align-tabs-title-margin | |
| $tab-border-radius | |
| $tab-max-width | |
| $tab-min-width | |
| $tab-slider-size | |
| $tabs-density | |
| $tabs-height | |
| $tabs-stacked-height | |