Elegant way to customise Tabs header

Ionic Framework ionic-v3
1

I’m using a <ion-tabs> in my project and instead of a navbar in the header, I would like to show a custom header with some elements (avatar, a header, some extra info).

The ion-tabs directive creates a <template navbar-anchor></template> in which it usually renders the navbar.
I would like to place my own custom element in it.
Instead of hacking my element into it with some DOM replace-element script, I wonder if there is an elegant solution to this. Is there some way I can hook the navbar-anchor to my own element?

2

Hey there!

Hmm :thinking:

So maybe you could explain a bit more as to what you’re trying to do. Not sure I follow

3

I want to accomplish the following rendering of ion-tabs;

<ion-tabs>
    <ion-navbar-section>
        <section class="header">
            <ion-row>
                <ion-col width-20="">
                    <img src="some-image">
                </ion-col>
            <ion-col width-80="">
                <h1>Heading</h1>
            </ion-col>
            </ion-row>
        </section>
    </ion-navbar-section>
    <ion-tabbar-section>
        <tabbar role="tablist">
            ...
        </tabbar>
    </ion-tabbar-section>
    <ion-content-section>
        <ion-tab></ion-tab>
        ...
    </ion-content-section>
</ion-tabs>

The ion-navbar-section is normally used for the navbar, but in this case I would like to place other content in it.

4

So something like this isn’t currently possible with ion-navbar.

5

actually, I found that by not treating the tabs as it’s own ViewController I can accomplish what I want;

I have a page with ion-tabs as well as other elements (the header I tried to squeeze into the ion-tabs).
When navigating back, only the ion-tabs are animated (slide-effect) but the other content is not animated.

If I go to tabs.js and comment out the if (viewCtrl) block in the constructor, my main page is treated as the ViewController and the ion-tabs are static.
So I have to figure out how to prevent the dependency injector to not pass a ViewController to the Tabs element.

6

Regarding this, I am trying to insert the navbar into a custom component like this:

<my-navbar [title] = "pageTitle"></my-navbar> <ion-content> ...... ...... ..... </ion-content>

my-navbar.html

<ion-navbar *navbar primary> <ion-title>{{ title }}</ion-title> </ion-navbar>

But when I am using Tabs my-navbar component is not inserted in ion-navbar-section, but in ion-content.
With side-menu works fine.

How can I make it work?