# Material Tabs and ionic: any demo/codepen?

**URL:** <https://forum.ionicframework.com/t/material-tabs-and-ionic-any-demo-codepen/15875>\
**Category:** uncategorized\
**Created:** [January 17, 2015, 11:09am UTC](https://forum.ionicframework.com/t/material-tabs-and-ionic-any-demo-codepen/15875 "2015-01-17T11:09:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ziobudda](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ziobudda/32/66730_2.png) [@ziobudda](https://forum.ionicframework.com/u/ziobudda)\
**Post date:** [January 17, 2015, 11:09am UTC](https://forum.ionicframework.com/t/material-tabs-and-ionic-any-demo-codepen/15875/1 "2015-01-17T11:09:20Z")

</div>

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](https://global.discourse-cdn.com/ionicframework/original/3X/5/d/5d8bdcff6420e9caaf977f7ff8cfb071b0ce16ba.png)  
(Account is the name of my current tab).

Where is my error ?

Thanks.

---

<div class="post-metadata">

**Author:** ![naveenkarippai1](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/naveenkarippai1/32/91429_2.png) [@naveenkarippai1](https://forum.ionicframework.com/u/naveenkarippai1)\
**Post date:** [January 17, 2015, 1:54pm UTC](https://forum.ionicframework.com/t/material-tabs-and-ionic-any-demo-codepen/15875/2 "2015-01-17T13:54:20Z")

</div>

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. 😉

---

<div class="post-metadata">

**Author:** ![ziobudda](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ziobudda/32/66730_2.png) [@ziobudda](https://forum.ionicframework.com/u/ziobudda)\
**Post date:** [January 17, 2015, 11:49pm UTC](https://forum.ionicframework.com/t/material-tabs-and-ionic-any-demo-codepen/15875/3 "2015-01-17T23:49:04Z")

</div>

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

M.

---

<div class="post-metadata">

**Author:** ![arlo](https://avatars.discourse-cdn.com/v4/letter/a/ee7513/32.png) [@arlo](https://forum.ionicframework.com/u/arlo)\
**Post date:** [September 4, 2015, 12:31am UTC](https://forum.ionicframework.com/t/material-tabs-and-ionic-any-demo-codepen/15875/4 "2015-09-04T00:31:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![splaktar](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/splaktar/32/83755_2.png) [@splaktar](https://forum.ionicframework.com/u/splaktar)\
**Post date:** [November 15, 2015, 8:49pm UTC](https://forum.ionicframework.com/t/material-tabs-and-ionic-any-demo-codepen/15875/5 "2015-11-15T20:49:03Z")

</div>

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.

> **[Splaktar/Ionic-Angular-Material-Tabs](https://github.com/Splaktar/Ionic-Angular-Material-Tabs)**
>
> Ionic-Angular-Material-Tabs - A starter project which utilizes angular-material and ionic. Based on the ionic starter project 'tabs'