Ionic 4 Fab List 默认打开

Question

我正在开发一个新的 Ionic 4 项目，其中包含一个 fab 列表。此列表工作正常，但我希望默认打开它。

我在这里读了一些东西，但代码不适用于 Ionic 4。

有人能告诉我解决办法吗？谢谢！

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-fab vertical="bottom" horizontal="start" slot="fixed" #fab >
    <ion-fab-button>
      <ion-icon name="arrow-dropup-circle"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top">

        <ion-fab-button>
            <ion-icon name="navigate"  (click) ="this.startNavigation()" ></ion-icon>
          </ion-fab-button>

    <ion-fab-button>
      <ion-icon name="thumbs-down" (click) ="this.doRating('-1')"></ion-icon>
    </ion-fab-button>

    <ion-fab-button>
      <ion-icon name="thumbs-up" (click) ="this.doRating('1')"></ion-icon>
    </ion-fab-button>
    </ion-fab-list>
  </ion-fab>
</ion-content>

page.ts 文件如下所示：

import { Component,ViewChild } from '@angular/core';
import { IonFabList } from '@ionic/angular'

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  @ViewChild('IonFabList',{static: false}) fab: IonFabList;

  constructor() {}

  ionViewDidEnter()
  {
    this.fab.toggleList();
  }

}

Answer 1

您需要在 ion-fab 元素上设置 activated 属性。

<ion-fab vertical="bottom" horizontal="start" slot="fixed" activated="true" #fab >
</ion-fab>

看看ion-fab docs

Ionic 4 Fab List 默认打开

Ionic 4 Fab List opened by default

javascript

ionic-framework

angular

ionic4