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

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!

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

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.

1 Like