Geek Answers Handbook

How to switch between subviews in one view in an Ionic app?

Inside, ion-viewI need the ability to switch between three areas or subzones, and only one view is displayed at a time. You can view it as “tabs” in the view.

  ... content above ...
+-----------------------+
| Tab 1 | Tab 2 | Tab 3 |
+-----------------------+
|                       |
|     tab 1 content     |
+-----------------------+
  ... content below ...

Is it possible to use ion-tabsfor this (or some other mechanism), or does this require a custom directive?

+4
source share
1 answer

Of course you can.

You must use the Tabs directive .

You can put <ion-tabs>in your own <ion-view>. Now you can add <ion-tab>to declare the contents 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>

, , plunker.

, , .

+5

More articles:


All Articles