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

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轻松完成此操作。

1. 首先，您在fab-button添加click处理程序

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

2. 在您的.ts文件中创建hasClass函数

    hasClass : boolean = false 

3. 使用ngClass根据条件添加类

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

4. 将适当的CSS添加到.scss文件中的类

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