Vue Material -

Tabs

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.

More features for tabs will be come in the next weeks, like pagination scroll and touch events. :)

Navigational tabs

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!

Seamless integration with Vue Router

Tab with inner content

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:

Content syncing with Router
Home Tab
Pages tab

Unde provident nemo reiciendis officia, possimus repellendus. Facere dignissimos dicta quis rem. Aliquam aspernatur dolor atque nisi id deserunt laudantium quam repellat.

Posts tab

Qui, voluptas repellat impedit ducimus earum at ad architecto consectetur perferendis aspernatur iste amet ex tempora animi, illum tenetur quae assumenda iusto.

Favorites tab

Maiores, dolorum. Beatae, optio tempore fuga odit aperiam velit, consequuntur magni inventore sapiente alias sequi odio qui harum dolorem sunt quasi corporis.

Alignments

Tabs have four types of alignments for the navigation buttons: Left, Center, Right and Fixed. You can use them with any tabs:

With different hue colors
Left aligned (default)
Centered
Right aligned
Fixed

Icons

Tabs accept icons, to make it easier for your user to assimilate the contents of a tab:

With svg support

Custom Template

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?

Template Slot

API - md-tabs

The following options can be applied to any tabs:

NameDescriptionDefault
md-active-tab String|Number Set the current selected tab. Works by providing the id of the desired md-tab. null
md-sync-route Boolean Syncs the table selection with the current route, matching by the single tab to prop. false
md-alignment String Sets the tab navigation alignment. See below the detailed description of each layout. left
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. false
md-elevation Number Add an elevation to tab navigation element. 0

API - md-tab

The following options can be applied to any tab. All options of router-link can be simply used here:

NameDescriptionDefault
id String The tab id. Used when changing the active tab dynamically a random string
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. null
md-label String The tab label null
md-label String The tab icon. Accepts an string or a asset URL. The tab will know how to handle the icon based on this. null
md-disabled Boolean Disable/enable a tab null
md-template-data Object The data to be passed to the respective tab button, when using custom template. null