v-tabscomponent 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.
v-tabscomponent is highly customizable to suit your needs. You can get and set the currently active tab by using the
v-modelprop on the
Tabs can be centered by using the
centeredprop. Here we have also applied the
fixedprop which gives all tab items a fixed size, regardless of content.
Tabs are not the only thing you can put inside the
v-tabscomponent. In this example we've also added a toolbar.
Here is another example of additional content inside the
By using the
iconsprop you can add icons to each tab item.
growprop will make the tab items take up all available space.
If the tab items overflow their container, pagination controls will appear.
You can disable the pagination controls by setting the
false. This also has the effect of removing the margins around the tab item container.