ionic3 - How to add backrop when fab buttion open

Question

I am using ionic3 framework. I have 4 fabs button in a page like :

<ion-fab top right edge>
    <button ion-fab mini><ion-icon name="add"></ion-icon></button>
    <ion-fab-list>
      <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
    </ion-fab-list>
  </ion-fab>

How to add backdrop when fab button is open and show one fab button visible at time?

Answer 1

You can easily do this by using css.

1. First you add the click handler in fab-button

    <button ion-fab mini (click)="hasClass = !hasClass"><ion-icon name="add"></ion-icon></button> 

2. Create hasClass function in your .ts file

    hasClass : boolean = false 

3. Use ngClass in to add the class based on condition

    <ion-content> <div *ngIf="backdrop" class="back-drop"></div> ... </ion-content> 

4. Add appropriate CSS to the class in your .scss file

    .back-drop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(100, 100, 100, 0.5); }