Tab
El componente v-tabs se usa para esconder contenido detrás de un item seleccionable. También puede usarse como pseudo-navegación para una página, donde los tabs son links y los tab-items son el contenido.
API
Components.Tabs.
Hace que v-tabs se alineen con el título del toolbar
Centra los tabs
Aplica el color especificado al control.
Aplica la variante del tema dark
v-tabs-item min-width 160px (72px mobile), max-width 264px
Components.Tabs.
Configura la altura del componente
Components.Tabs.
Components.Tabs.
Aplica la variante del tema light
Components.Tabs.
Configura el ancho máximo
Configura el breakpoint designado para móviles
Components.Tabs.
Components.Tabs.
Components.Tabs.
Alinear tabs a la derecha
Components.Tabs.
Components.Tabs.
Controla la visibilidad
Ejemplos
Fixed tabs
The fixed-tabs prop sets a higher minimum width and applies a new maximum width to v-tabs-items. On desktop screens, the tab items will be centered within the v-tabs component and switch to evenly fill on mobile.
Right aligned tabs
The right prop aligns the tabs to the right
Content
Tabs are not the only thing you can put inside the v-tabs component. In this example we've also added a toolbar.
With search
Here is another example of additional content inside the v-tabs component.
Icons and text
By using the icons-and-text prop you can add icons to each tab item.
Desktop tabs
Align tabs with toolbar title
Make v-tabs lined up with the v-toolbar-title component (v-toolbar-side-icon or v-btn must be used in v-toolbar). May not work if the tab text is wrapped.
Grow
The grow prop will make the tab items take up all available space.
With menu
You can use a menu to hold additional tabs, swapping them out on the fly
Pagination
If the tab items overflow their container, pagination controls will appear.
Custom icons
prev-icon and next-icon can be used for applying custom pagination icons.