I am using ionic and trying to use tab control in a view. The tab control has static text along with an icon. But when I try to run ionic emulate android
, only tab control appear and switching to tabs doesn't display content.
<ion-tabs class="tabs-positive tabs-icon-only">
<ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<!-- Tab 1 content -->
</ion-tab>
<ion-tab title="About" icon-on="ion-ios-location" icon-off="ion-ios-location-outline">
<ion-nav-view>
<ion-view view-title="About">
<ion-content>
<i class="ion-bag"></i>Hello
</ion-content>
</ion-view>
</ion-nav-view>
</ion-tab>
</ion-tabs>
I have gone through examples on ionic site, but the examples are making use of templates to render content, which is overkill in my case.
EDIT 1:
I tried remove ion-nav-view
and kept only ion-view
but that too didn't work.
For static tabs, wrap the ion-content with an ion-pane.
<ion-tabs class="tabs-positive tabs-icon-only">
<ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<!-- Tab 1 content -->
</ion-tab>
<ion-tab title="About" icon-on="ion-ios-location" icon-off="ion-ios-location-outline">
<ion-pane>
<ion-content>
<i class="ion-bag"></i>Hello
</ion-content>
</ion-pane>
</ion-tab>
</ion-tabs>