How can I make a transparent toolbar?

Ionic Framework ionic-v3
41

Hi,all
So awesome @HsuanXyz

I have a idea!
(thans @peterbetos @saademotion_dev)

Firstly, Please distinguish between toolBar and statusBar.The discussion hear is about toolBar.

For transparent toolbar:You can simply add some styles in your code. @luukschoen has given the answer
. ionic-2-beta-10.

The first way：

<ion-header class="opaque">
...
</ion-header>

<ion-content fullscreen>
  ...
</ion-content>

.opaque {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.opaque .toolbar-background {
  background-color: rgba(#f8f8f8, 0.55);
}

The second way：

<ion-header>
...
</ion-header>

.scroll-content {
    margin-top: 0 !important;
  }
ion-header, .toolbar-background {
    background-color: initial !important;
    // background-color: rgba(0,0,0,0) !important;

    &:after {
      height: 0  !important;
    }
  }

That’s ok!

If you are confused.and If you want a Translucent statusBar for android.Look at the following demo.Here Mixed with statusBar and toolbar.

image

1 Like