Tabs make it easy to explore, switch between different views and enable content organization at a high level, such as different data sets or functional aspects of an app.
Tabs are really powerfull and have deep integration with Vue Core features and router.
Sometimes you may need a tab to be the main navigational element of your application and you can do this. Tabs integrate with Vue Router by default and will be able to use single tab just like a regular button or link, by using the
router-link props. The tabs will sync with the page URL and will produce effects when transitioning between tabs. AUTOMATIC!
In the previous example, the tabs worked just like navigation buttons, without content. With that you would need to render the content by yourself. Although this is not a hard thing, because you can use Vue Router, you can pass arbitrary content to your tabs. And it can also work syncing with router:
Tabs have four types of alignments for the navigation buttons: Left, Center, Right and Fixed. You can use them with any tabs:
Tabs accept icons, to make it easier for your user to assimilate the contents of a tab:
You can use a custom template for the navigation buttons. This will be applied to all navigation buttons and allows you to make updates on your tab, like this great example of unread/new content: Simple, uh?
The following options can be applied to any tabs:
|md-active-tab String|Number||Set the current selected tab. Works by providing the id of the desired |
|md-sync-route Boolean||Syncs the table selection with the current route, matching by the single tab |
|md-alignment String||Sets the tab navigation alignment. See below the detailed description of each layout.|
|md-alignment="left" String||Align the tabs navigation buttons to left|
|md-alignment="center" String||Align the tabs navigation buttons on center|
|md-alignment="right" String||Align the tabs navigation buttons on right|
|md-alignment="fixed" String||Make the navigation buttons to fill all the available space.|
|md-dynamic-height Boolean||Apply a dynamic transition to the table height. Be careful with this option to not hurt the performance of your page.|
|md-elevation Number||Add an elevation to tab navigation element.|
The following options can be applied to any tab. All options of
router-link can be simply used here:
|id String||The tab id. Used when changing the active tab dynamically|
|href String||The tab href link. Useful when you don't have Vue Router on your app, but you still want to change the current URL based on the tab.|
|md-label String||The tab label|
|md-icon String||The tab icon. Accepts an string or a asset URL. The tab will know how to handle the icon based on this.|
|md-disabled Boolean||Disable/enable a tab|
|md-template-data Object||The data to be passed to the respective tab button, when using custom template.|