以编程方式隐藏/显示ion fab按钮

Question

有人可以帮我从hide/show的{​​{1}}列表中找到button特定按钮的方法

Answer 1

如果您使用Ionic框架，请使用此示例代码

<IonFabList side="top">

  <IonFabButton *ngIf="..." color="primary">
    <IonIcon icon="logo-facebook" />
  </IonFabButton>

  <IonFabButton *ngIf="..." color="primary">
    <IonIcon icon="logo-twitter" />
  </IonFabButton>

  <IonFabButton *ngIf="..." color="primary">
    <IonIcon icon="logo-youtube" />
  </IonFabButton>

  <IonFabButton *ngIf="..." color="primary">
    <IonIcon icon="logo-vimeo" />
  </IonFabButton>

</IonFabList>

在*ngIf中写下您的条件

Answer 2

我将动态呈现fabButtons列表，以便您仅将示例所需的按钮添加到列表中

这不是完整的解决方案，但可以帮助您入门

import { Component } from "@angular/core";

@Component({
  selector: "app-tab1",
  templateUrl: "tab1.page.html",
  styleUrls: ["tab1.page.scss"]
})
export class Tab1Page {
  fButtons = [
    { iconName: "logo-vimeo", isActive : true },
    { iconName: "logo-instagram", isActive : false },
    { iconName: "logo-facebook", isActive : true }
  ];
  constructor() {}

  getActive() {
    return this.fButtons.filter((i:any) => {
      return i.isActive === true
    })
  }
}

模板

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="share"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top">
      <ion-fab-button *ngFor="let b of getActive()">
        <ion-icon name={{b.iconName}}></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>