Vue-material: Using md-tabs for application-wide navigation

[icehaunter]

As per Material Design spec, "Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app."
I think, this high-level content organisation is distributed between different urls. As such, I would like to use tabs in the header (i.e. in toolbar component) to organize application-wide navigation (switching between 2-3 main functions). Right now integrating it with vue-router is a pain. Could you add a modifier to display tabs without lower content or some such? Or maybe I am just using them wrong.
Thank you for an amazing library and swift development!

[marcosmoura]

You are not using it wrong. The md-tabs don't have a way to change routes or control HTML content based on them. With the tabs implementation that I create here is hard to reason about the route changes and templates inside them.

A possible workaround is:

• Create a empty tabs component with a @change event.

<md-tabs class="page-tabs" @change="changeRoute">
  <md-tab id="movies" md-label="Movies"></md-tab>
  <md-tab id="music" md-label="Music"></md-tab>
  <md-tab id="books" md-label="Books"></md-tab>
  <md-tab id="pictures" md-label="Pictures"></md-tab>
</md-tabs>

• Remove the empty content visually:

.page-tabs .md-tabs-content {
  display: none;
}

• Change the route programatically in the event hook:

changeRoute(tab) {
  // Do your logic here...
}

I will create another component (or change the tabs) to achieve this behaviour. I will close this issue and open another on the future!
Thank you!