Ionic-framework: iOS 11 Header Style for Ionic 4

[mariusbolik]

Feature Request

Ionic version:


[x] 4.x

Describe the Feature Request

Image by Mohamed Kerroudj

Describe Preferred Solution

A property for iOS Toolbar Tag like <ion-toolbar appearance="modern"> or something similar.

Describe Alternatives

Currently I'm using <ion-card-title> and <ion-card-subtitle> to let the header look like in iOS 11:

<ion-header>
  <ion-toolbar color="light">
    <ion-card-header>
      <ion-card-title>Settings</ion-card-title>
    </ion-card-header>
  </ion-toolbar>
  <ion-toolbar color="light">
    <ion-searchbar [(ngModel)]="searchFilter.name"
      placeholder="Search Coins..." animated="true" showCancelButton></ion-searchbar>
  </ion-toolbar>
</ion-header>

_But as you know there isn't this nice animation you can see on the GIF!_

Additional Context

   ionic (Ionic CLI)             : 4.6.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

[brandyscarney]

Thanks for the issue! This is on our list of things to do.

[liamdebeasi]

This feature has been added to the framework. It will be available in the next minor release of Ionic. You can use the following dev build to test it out:

If using Ionic Angular: npm i @ionic/[email protected]
If using Ionic Core: npm i @ionic/[email protected]

Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.