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.
(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.
Thanks, but the only changes are: I have no more “Account” label and the line is now green.
M.
arlo
September 4, 2015, 12:31am
4
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:
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.
The swipe feature sometimes doesn’t load the tab content. (could just disable it…)
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.