ionic 3 - 如何在 fab 按钮打开时添加背景

【问题标题】：ionic3 - How to add backrop when fab buttion openionic 3 - 如何在 fab 按钮打开时添加背景
【发布时间】：2019-12-01 03:25:33
【问题描述】：

我正在使用 ionic3 框架。我在一个页面中有 4 个 fabs 按钮，例如：

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

当fab按钮打开时如何添加背景并显示一个fab按钮有时可见？

【问题讨论】：

标签： angular ionic-framework ionic3 hybrid-mobile-app

【解决方案1】：

您可以使用 css 轻松做到这一点。

首先在fab-button 中添加click 处理程序

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

在您的 .ts 文件中创建 hasClass 函数
```
hasClass : boolean = false
```

使用ngClass in 根据条件添加类

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

在 .scss 文件中的类中添加适当的 CSS

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

【讨论】：