How to switch between subviews in a single view in an Ionic app? -
within ion-view
, ability switch between 3 regions or subviews, 1 view visible @ time. sort of view "tabs" within view.
... content above ... +-----------------------+ | tab 1 | tab 2 | tab 3 | +-----------------------+ | | | tab 1 content | +-----------------------+ ... content below ...
is possible use ion-tabs
(or other mechanism), or require custom directive?
sure can.
you have use tabs directive.
you can place <ion-tabs>
inside <ion-view>
. can add <ion-tab>
declare 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 want see how works can check plunker.
you can read documentation find out how apply different styles.
Comments
Post a Comment