Tabs with Link-tos

[clov3r]

Best way to use the md-tabs component as a navigation item?

Something like:

  {{#md-tabs}}
    {{#md-tab}}
      {{link-to "Demographics" "dashboard.facilities.show.index" model}}
    {{/md-tab}}
    {{#md-tab}}
      {{link-to "Documents" "dashboard.facilities.show.documents" model}}
    {{/md-tab}}
    {{#md-tab}}
      {{link-to "Credentialing" "dashboard.facilities.show.credentialing" model}}
    {{/md-tab}}
    {{#md-tab}}
      {{link-to "Lodging" "dashboard.facilities.show.lodging" model}}
    {{/md-tab}}
    {{#md-tab}}
      {{link-to "Jobs" "dashboard.facilities.show.jobs" model}}
    {{/md-tab}}
    {{#md-tab}}
      {{link-to "Providers" "dashboard.facilities.show.providers" model}}
    {{/md-tab}}
    {{#md-tab}}
      {{link-to "Activity" "dashboard.facilities.show.activity" model}}
    {{/md-tab}}
    {{#md-tab}}
      {{link-to "Upcoming" "dashboard.facilities.show.upcoming" model}}
    {{/md-tab}}
  {{/md-tabs}}

[mike-north]

I would suggest binding to the "active" tab (selected attribute of md-tabs) to a computed property, and putting a transitionTo in the setter.

We should really have an action binding on the set of tabs for on-change or something, but that doesn't currently exist.

[floqqi]

I for one would also prefer a built-in solution for this, because this is a really common use case. :+1:

[mike-north]

as common of a use case as this is, it's difficult to figure out an idiomatic way to allow components to be aware of router state without using private APIs (i.e., the same stuff Ember.LinkToComponent uses)