Double IonHeader in starters

Ionic Framework Ionic React
1

I noticed that everytime i start a project (blank, or tab r any other) the scaffolded page got header two times with the same content
something like:

<IonPage>
<IonHeader><IonToolbar><IonTitle>Title</IonTitle><IonToolbar></IonHeader>
<IonContent>
<IonHeader collapse="condense"><IonToolbar><IonTitle>Title</IonTitle><IonToolbar></IonHeader>
</IonContent>
</IonPage>

it looks like it is something platform dependent (i see only one header on different platform) but i cant really nail how useful can it be and also i found it very difficult to maintain, especially in apps with lot of “pages” and dinamically created header (buttons, title, and so on)
i did not find any explanation about it
are there any reason for it?

2

This is the collapsible large title feature on iOS: ion-title: Ionic Framework API Docs

In the device demo here: Open-Source UI Toolkit to Create Your Own Mobile or Desktop Apps

Notice that the larger “Ionic Framework” title in the content hides as you scroll down and a smaller “Ionic Framework” title appears in the main header.

3

Thank you, this make more sense now, Trying to extract all my header to a single component to keep the feature active everywhere!

1 Like