Why does the default home.page.html have 2 ion-headers?

Ionic Framework
1

I’m teaching a course that includes an introduction to Ionic and I’m sure the students are going to ask me to explain the default HTML that is provided in home.page.html – and I can’t explain it.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <strong>Ready to create an app?</strong>
    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
  </div>
</ion-content>

I’m hoping someone can enlighten me on why there is an ion-header with translucent set to true and then inside ion-content, another ion-header with fullscreen set to true and the header’s collapse="condense".

Are both ion-headers really needed? If so, why?

Thanks!

1 Like
2

The two headers are there to have the ios large header design.

402×833 1.18 MB

When on iOS, the second header will be displayed, and the first header will only show when the users start to scroll. This follows the iOS design guidelines.

2 Likes
3

  1. The documents at https://ionicframework.com/docs/api/header state: “It’s important to note that ion-header needs to be the one of the three root elements of a page”. Why isn’t that applied here?

  2. Can anyone recommend some way to structure the code so this duplication is avoided? It looks awful.

Thank you.

4

  1. Key word is “one” of the root elements in a page. With the collapsible headers, we still have one ion-header as the root element, but we can have an additional one in the content to get the header effect.

  2. “looks awful” is more of a personal opinion. Since the headers tend to be specific to each page, I don’t see the benefit to making a higher level component to avoid an extra line or 2. Plus, with the way animations work, having an extra component involved would mess with how headers enter and leave a view.

5

Thank you, Mike. On #2, I didn’t think “code duplication” was much of a personal opinion, but maybe when the app is fully fleshed it won’t look as duplicated as it does in the starter template.

6

Hi @mhartington ,

This is somewhat related with the issue I am having. I have an instance of ion-header inside my main view in App.vue that also holds ion-menu, code looks like this:

<ion-header>
      <ion-toolbar>
        <ion-buttons slot="end">
          <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>{{ $router.currentRoute.value.name }}</ion-title>
      </ion-toolbar>
    </ion-header>

But I’m still forced to have ion-header on every single view, otherwise all the content goes behind the header, even if fullscreen is set to false. I’d like to avoid duplicating ion-header code if possible from my view components. Is this possible?

Thank you.

7

This is by design, so you can have a customized header per page.
It’s not really duplicating, as you change the header on each page, and the router animates the content of those headers in an out as routes change.

What you are trying to do is not possible and should not be attempted.