Within an ion-view
, I would like the ability to switch between three regions or subviews, with only one view visible at a time. Could sort of view it as "tabs" within the view.
... content above ...
+-----------------------+
| Tab 1 | Tab 2 | Tab 3 |
+-----------------------+
| |
| tab 1 content |
+-----------------------+
... content below ...
Is it possible to use ion-tabs
to do this (or some other mechanism), or would this require a custom directive?
Sure you can.
You have to use the Tabs directive.
You can place a <ion-tabs>
inside your <ion-view>
.
Now you can add <ion-tab>
to declare the content of each tab.
<ion-view view-title="home">
<ion-tabs class="tabs-positive tabs-icon-only tabs-striped tabs-top">
<ion-tab title="Tab1" icon-on="ion-ios-home" icon-off="ion-ios-home-outline">
<ion-nav-view name="tab-1">
<ion-content padding="true" has-header="true">
<h1>HOME</h1>
</ion-content>
</ion-nav-view>
</ion-tab>
<ion-tab title="Tab2" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
<ion-nav-view name="tab-2">
<ion-content padding="true" has-header="true">
<h1>SETTINGS</h1>
</ion-content>
</ion-nav-view>
</ion-tab>
<ion-tab title="Tab3" icon-on="ion-ios-information" icon-off="ion-ios-information-outline">
<ion-nav-view name="tab-3">
<ion-content padding="true" has-header="true">
<h1>INFO</h1>
</ion-content>
</ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
If you want to see how it works you can check this plunker.
You can read this documentation to find out how to apply different styles.