feat: Add option to remove the shadow of the header.

[infacto]

Feature Request

Ionic version: @ionic/angular: '5.3.2'

Describe the Feature Request Add an option / attribute to the ion-header / ion-toolbar to remove the shadow for a full flat header which can be combined with the page content (not line / shadow).

Describe Preferred Solution <ion-header no-shadow></ion-header> or <ion-header flat></ion-header>

Describe Alternatives My current solution is to hack the Ionic styles:

.header-md::after {
  /* Removes the toolbar shadow. */
  background: none;
}

Because the shadow is a background image.

Related Code

html

<ion-app>
  <ion-header [class.hotfix]="hotfix">
    <ion-toolbar color="primary">
      <ion-title> About </ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <div class="about-header">
      <span>My Logo</span>
    </div>

    <ion-list>
      <ion-item>
        <ion-label>Enable Workaround</ion-label>
        <ion-toggle [(ngModel)]="hotfix"></ion-toggle>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-app>

scss

.about-header {
  /* Same color like the header toolbar color. */
  background-color: #3880ff;
  color: white;
  padding: 16px;
  width: 100%;
  min-height: 150px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hotfix.header-md::after {
  /* Removes the toolbar shadow. */
  background: none;
}

ts

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  hotfix = false;
}

StackBlitz Example

Additional Context

https://ionicframework.com/docs/api/header https://ionicframework.com/docs/api/toolbar

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of https://github.com/ionic-team/ionic-framework/issues/17544.

[infacto]

@liamdebeasi Hmm,,, 🤔 this issue is not exactly the duplicate of the issue you referred. It's about setting a box-shadow in ios-mode. Especially on page transition. My issue is about removing the shadow in md-mode, which is not a box-shaodw. It's a background image. A solution with a html attribute on the component. Not a css solution. Maybe the open issue can fix both problems, but I just notice. Not sure.

[liamdebeasi]

The iOS shadow/border on the toolbar and the MD shadow on the header are treated as platform equivalents even though they are added in different manners. Normally we would just say you can add/remove the box shadow yourself, but since you would need to apply 2 different styles, we should probably find an easy way to do it in one pass.

[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.