Tab
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.
API
Components.Tabs.
Components.Tabs.
Centraliza as abas
Components.Tabs.
Components.Tabs.
v-tabs-item
min-width 160px (72px mobile), max-width 264px
Components.Tabs.
Define a altura do componente
Components.Tabs.
Components.Tabs.
Components.Tabs.
Components.Tabs.
Define a largura máxima
Define o ponto de troca para mobile
Components.Tabs.
Components.Tabs.
Components.Tabs.
Components.Tabs.
Components.Tabs.
Components.Tabs.
Controla visibilidade
Exemplos
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.