samedi 25 avril 2015

Tabs and sidemenu in Ionic


I am trying to create a Ionic app with the sidemenu starter project. For one of my menu options I would like to have a tab view with two tabs. I've replaced the search.html content with the following code:

<ion-view title="Profile">
        <ion-tabs class="tabs-positive tabs-icon-top">

            <ion-tab title="Option1" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
                <h1>HELLO OPTION 1</h1>
            </ion-tab>

            <ion-tab title="Option2" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
                <h1>HELLO OPTION 2</h1>
            </ion-tab>

        </ion-tabs>
</ion-view>

But with this, the H1 gets overlapped by the menu header. In previous versions of Ionic, this could be fixed with the has-header option, but this has been removed and should be managed automatically. From what I've read I should put my content within a ion-content block, but when I do this with the ion-tabs tabs are not shown (they're actually shown below the header bar, I can see them if I pull down). For reference this is the code I used:

<ion-view title="Profile">
      <ion-content>
            <ion-tabs class="tabs-positive tabs-icon-top">

                <ion-tab title="Option1" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
                    <h1>HELLO OPTION 1</h1>
                </ion-tab>

                <ion-tab title="Option2" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
                    <h1>HELLO OPTION 2</h1>
                </ion-tab>

            </ion-tabs>
      </ion-content>
    </ion-view>

How can I fix this?


Aucun commentaire:

Enregistrer un commentaire