FAB button backdrop

Ionic Framework ionic-v3
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 Likes
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;
}
5

Hi @ hirenkorat3 - am trying to implement this from a FAB button, however the eventHandler doesn’t seem to blur the content I’ve placed inside the

tags: 
<!-- fab placed to the bottom & center -->
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button (click)="toggle!=toggle ">
      <ion-icon name="arrow-dropup"></ion-icon>
    </ion-fab-button>
      <ion-fab-list side="top">
      <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
      <ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
      <ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
      <ion-fab-button><ion-icon name="restaurant"></ion-icon>
        <div class="list-label">Meals</div>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>

<div [ngClass]="{ 'blur' : toggle }">
  <ion-content
    <ion-card class="welcome-card">
      <ion-img src="/assets/shapes.svg"></ion-img>
      <ion-card-header>
        <ion-card-subtitle>Get Started</ion-card-subtitle>
        <ion-card-title>Welcome to Ionic</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
      </ion-card-content>
    </ion-card>
  </ion-content
</div>
6

the .css code has been added to the home.page.scss file only

7

yes because i do silly typing mistake :sweat_smile:

just change your click event (click)="toggle!=toggle " to (click)="toggle=!toggle "

8

Perfect! hahaha - thank you!

9

if I may offer an even simpler solution…

add a div before the buttons in each of your FAB lists:

<ion-fab bottom right>
  <button ion-fab><ion-icon name="your-menu-icon"></ion-icon></button> <!-- button to open list -->
  <ion-fab-list side="top">
    <div class="fab-backdrop"></div>
    <button ion-fab><ion-icon name="option-1-icon"></ion-icon></button>
    <button ion-fab><ion-icon name="option-1-icon"></ion-icon></button>
    <button ion-fab><ion-icon name="option-1-icon"></ion-icon></button>
  </ion-fab-list>
</ion-fab>

then add the following to your app.scss file:

ion-fab .fab-list-active .fab-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(100, 100, 100, 0.5);
}

…and that’s it. all it takes to add a backdrop to any FAB list is to add that div element.

I took mine a little further and added:

  • #fabList to my top ion-fab element
  • @ViewChild("fabList") fabList FabContainer; to the component class
  • (click)="fabList.close()" to my div.fab-backdrop

with this the FAB list even closes when I tap the backdrop.