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