ionic3 -如何在fab按钮打开时添加backrop

Question

我正在使用ionic3框架。我在一页中有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轻松地做到这一点。

1. 首先，在click中添加fab-button处理程序 <按钮离子-fab mini (单击)=“hasClass= !hasClass">
2. 在hasClass文件中创建.ts函数 hasClass : boolean = false
3. 使用ngClass中添加基于条件的类 .
4. 向.scss文件中的类添加适当的CSS ..back下拉{位置:固定；顶部: 0；右: 0；底部: 0；左: 0；背景: rgba(100,100,100，0.5)；}