Question

我正在使用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按钮？

Answer 1

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

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

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

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

使用ngClass根据条件添加类

<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);
}

ionic3-晶圆厂对开时如何添加背景

1 个答案: