Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iOS 11 Header Style for Ionic 4 #16885

Closed
mariusbolik opened this issue Dec 26, 2018 · 3 comments

Comments

@mariusbolik
Copy link

commented Dec 26, 2018

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request

No IMG

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

This comment has been minimized.

Copy link
Member

commented Jan 3, 2019

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

@brandyscarney brandyscarney added this to Backlog 🤖 in Ionic Core via automation Mar 7, 2019
@brandyscarney brandyscarney moved this from Backlog 🤖 to On deck ⚾️ in Ionic Core Mar 7, 2019
@brandyscarney brandyscarney moved this from On deck ⚾️ to In progress 🤺 in Ionic Core Mar 27, 2019
@brandyscarney brandyscarney self-assigned this Mar 27, 2019
@brandyscarney brandyscarney referenced this issue Apr 8, 2019
2 of 13 tasks complete
@brandyscarney brandyscarney moved this from In progress 🤺 to On deck ⚾️ in Ionic Core Apr 24, 2019
@brandyscarney brandyscarney moved this from On deck ⚾️ to In progress 🤺 in Ionic Core Jun 24, 2019
@brandyscarney brandyscarney added this to the iOS Design Improvements milestone Jun 28, 2019
@liamdebeasi liamdebeasi referenced this issue Sep 4, 2019
4 of 13 tasks complete
@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Sep 4, 2019

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/angular@4.10.0-dev.201909041543.923312e
If using Ionic Core: npm i @ionic/core@4.10.0-dev.201909041543.923312e

Thanks!

@liamdebeasi liamdebeasi closed this Sep 4, 2019
Ionic Core automation moved this from In progress 🤺 to Done 🎉 Sep 4, 2019
@ionitron-bot

This comment has been minimized.

Copy link

commented Oct 4, 2019

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Oct 4, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
Ionic Core
  
Done 🎉
4 participants
You can’t perform that action at this time.