FAB button backdrop


#1

Hey! I’m trying to add backdrop to view when opening FAB list button. I tried to add it manually with css class like: .backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.7); z-index: 99; }. But it’s not working, even when forcing it by !important. Is there any ionic2 way of adding backdrop to FAB?


#2

I’m looking for this too… Any examples?


#3

My 2 cents:
Adding a local variable to the ion-fab-list

<ion-fab-list side="top" #fabList>
      <div *ngIf="fabList.classList.contains('fab-list-active')" class="backdrop"></div>

#4

here is little demo .it may help

<button ion-button (click)="toggle!=toggle ">Add</button>
<div [ngClass]="{ 'blur' : toggle }">
your content
</div>

and your css script is

.blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    transition: -webkit-filter 200ms linear;
}