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 powerful 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:
Unde provident nemo reiciendis officia, possimus repellendus. Facere dignissimos dicta quis rem. Aliquam aspernatur dolor atque nisi id deserunt laudantium quam repellat.
Qui, voluptas repellat impedit ducimus earum at ad architecto consectetur perferendis aspernatur iste amet ex tempora animi, illum tenetur quae assumenda iusto.
Maiores, dolorum. Beatae, optio tempore fuga odit aperiam velit, consequuntur magni inventore sapiente alias sequi odio qui harum dolorem sunt quasi corporis.
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?
Tabs are kept in the order they appear in the HTML template.
Tabs can be dynamically shown/hidden or added/removed: they will always be kept in the HTML template order.
When an active tab is reordered in the HTML template, it is kept active, at its new place.
When an active tab is removed or hidden, the following tab will be activated; or the preceding tab, if there is no following tab.
The following options can be applied to any tabs:
| Name | Description | Default |
|---|---|---|
| md-active-tab String|Number | Set the current selected tab. Works by providing the id of the desired md-tab. | null |
| md-swipeable Boolean | Option used to enable touch support to move between tabs by swipe. For more option see API - Swipeable | false |
| md-sync-route Boolean | Syncs the tab 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 |
| md-is-rtl Boolean | Set the RTL support | false |
The following options can be applied to any tab. All options of router-link can be simply used here:
| Name | Description | Default |
|---|---|---|
| id String|Number | The tab id. Used when changing the active tab dynamically. Note: string representation of numbers are considered different than their number ids. Eg. the id number 3 is different than the id string "3". An id can also be NaN, as it is a valid number | 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-icon 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 |
The following options can be applied to any md-tabs component that is using md-swipeable prop.
| Name | Description | Default |
|---|---|---|
| md-swipe-threshold Number | The minimal distance traveled to be considered swipe. | 50 |
| md-swipe-restraint Number | The maximum distance allowed at the same time in perpendicular direction. | 100 |
| md-swipe-time Number | The maximum time allowed to detect swipe. | 400 |