feat(title): add large iOS toolbar title

[liamdebeasi]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue Number: #16885

What is the new behavior?

Adds the iOS 11 header design.

Does this introduce a breaking change?

• Yes
• No

Other information

[mutatedplague]

So how do I implement the large toolbar looking through the merge i cant seem to find how to enable it

[liamdebeasi]

See https://ionicframework.com/docs/api/title#collapsible-large-titles

[t8]

I'm having an issue utilizing this new feature with header colors.

<ion-header>
  <ion-toolbar id="collapsedToolbar" color="primary">
    <ion-buttons slot="start" collapse="true">
      <ion-back-button
              [text]="'Back'"
              [icon]="'arrow-back'">
      </ion-back-button>
    </ion-buttons>
    <ion-title>
      add a task ✏️
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-header collapse="condense">
    <ion-toolbar color="primary">
      <ion-buttons slot="start" collapse="true">
        <ion-back-button
                [text]="''"
                [icon]="'arrow-back'">
        </ion-back-button>
      </ion-buttons>
      <ion-title size="large">
        add a task ✏️
      </ion-title>
    </ion-toolbar>
  </ion-header>
// Rest of irrelevant code here
<ion-content>

This displays a toolbar with a correctly colored header in the content, but the collapsed header does not have this color: https://imgur.com/a/zAdA1rn
Note: I'm using the new Ionic Dark Mode feature as well. I noticed that the error was the same even without dark mode enabled.

[mutatedplague]

I had to add this inside the class .ios body.dark to get the header color to come out right in dark mode

.header-ios {
    background-color: #0d0d0d;
}

[t8]

@mutatedplague That solution appears to work for dark mode, but if I want things to be able to transition automatically from dark to light mode, would that still work?

Also thank you so much for the quick reply!

[mutatedplague]

It works on my end as long as you have it inside .ios body.dark

[liamdebeasi]

This is a known issue, and we are currently working on a fix for this 👍

[t8]

@liamdebeasi Thank you!

Is there any current way to add a back button to this type of header or is that in the works as well?