Material Tabs and ionic: any demo/codepen?

Hi all, I’m trying to use tabs from material design.

I have created an empty tabs ionic app. I have insert CSS/JS for material and i have checked that my app load them.

Now, I have tried to substitute ionic tabs file content with this:

<md-tabs>
  <md-tab label="Tab #1">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </md-tab>
  <md-tab label="Tab #2"><ion-nav-view name="tab-chats"></ion-nav-view>
  </md-tab>
  <md-tab label="Tab #3"><ion-nav-view name="tab-account"></ion-nav-view></md-tab>
</md-tabs>

But in my device I see only a blu line. image
(Account is the name of my current tab).

Where is my error ?

Thanks.

1 Like

Hi @ziobudda,

Can you try this:

<md-tabs class="md-accent">
  <md-tab label="tab1"></md-tab>
  <md-tab label="tab2"></md-tab>
  <md-tab label="tab3"></md-tab>
<md-tabs> 

I’m not sure about how external content navigation in md-tabs works. Maybe, the active Tab should make a function call to change state to a new view.

Even I do have a problem with pagination of title in md-tabs. Waiting for a response/better documentation. :wink:

Thanks, but the only changes are: I have no more “Account” label and the line is now green.

M.

Ionic 1.1.0, Angular 1.4.5, Angular Material 0.10.1
I got tabs working in Ionic; this is what my code looks like:

 <div layout="column" layout-fill>
    <md-tabs class="has-header" md-swipe-content="true" md-dynamic-height="false" flex>
      <md-tab label="Upcoming" ui-sref="app.activities.mine">
        <div ui-view="mine-tab"></div>
      </md-tab>
      <md-tab label="Friend's" ui-sref="app.activities.friends">
        <div ui-view="friends-tab"></div>
      </md-tab>
    </md-tabs>
  </div>

The layout stuff is so md-tabs fills vertical space. I found that using ion-nav-view (my old way with ion-tabs) inside md-tab screws up md-tabs animations.

Tab state definition in app.js

.state('app.activities.mine', {
        url: '/mine',
        views: {
          'mine-tab': {
            templateUrl: 'templates/activities_list.html',
            controller: 'ActivitiesCtrl'
          }
        }
      })

ion-nav-view seems to be ok in the view template, activities_list.html:

<ion-nav-view>
  <!-- Undo .has-header effect -->
  <ion-content style="top: 0px;">
    <ion-refresher on-refresh="refresh()"></ion-refresher>
    <ion-list>
      <ion-item ng-repeat="act in activities track by act.id">
        {{act.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-nav-view>

Unfortunately, I do have a few bugs; I haven’t worked on them yet:

  1. There’s some kind of race condition loading the default selected tab. Sometimes the content is blank, but switching to another tab and back works. Removing ion-nav-view from template didn’t help.
  2. The swipe feature sometimes doesn’t load the tab content. (could just disable it…)
  3. URL changes don’t change the selected tab. Shouldn’t be difficult, I just need to figure out how to hook this up.
1 Like

That was quite helpful. Thank you.

I’ve updated an example/starter project to use md-tabs with Ionic. It’s not perfect, but it is generally working.