Content above tabs

ionic-v1
1

I want to build a tabbed-view but display a fixed content above the tabs always. I have done a small mockup indicating what I want to achieve:

image
image.png996×1886 232 KB

I tried this but it didn’t work as expected:

<ion-view view-title="Profile">

    <ion-content>

        <div class="my-fixed-header">
            <img src="my-profile-img.png">
            <span class="my-email">test@test.de</span>
        </div>

        <ion-tabs>

            <ion-tab title="Info" ui-sref="app.group.info">
                <ion-nav-view name="group-info"></ion-nav-view>
            </ion-tab>

            <ion-tab title="Activities" ui-sref="app.group.activities">
                <ion-nav-view name="group-activities"></ion-nav-view>
            </ion-tab>

        </ion-tabs>

    </ion-content>

</ion-view>

Besides the documentation says not to use <ion-tabs> inside <ion-content> because of some css issues.

So how can I get what I want?

Thanks a lot.

2

Does no one have an idea?

3

You could do something like this.

4

Thanks a lot for your help.