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

Question

我正在使用 ionic 3 框架。我在页面中有 4 个选项卡按钮，例如：

<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 按钮？

Answer 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根据条件添加class

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

将适当的 CSS 添加到您的 .scss 文件中的 class

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

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

ionic3 - How to add backrop when fab buttion open

hybrid-mobile-app

ionic-framework

ionic3

angular