时间戳

首页 > 解决方案 > ionic3 - 如何在 fab 按钮打开时添加背景

angular - ionic3 - 如何在 fab 按钮打开时添加背景

问题描述

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

标签： angularionic-frameworkionic3hybrid-mobile-app

解决方案

您可以使用 css 轻松完成此操作。

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

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

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

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

推荐阅读