首页 文章

默认情况下打开ion-fab-list

提问于
浏览 次
0

当离子页面加载时，我需要默认打开top open ion-fab-list .

请提供一些帮助 .

我尝试过以下解决方案，但没有奏效：

1. write (click) event on fab-button in .html and call event from .ts.

ionViewDidEnter() {
  this.calculateButtons();
}

calculateButtons() {
  // buttonList list populated code
  this.fabButtonClicked(); 
}
fabButtonClicked() {
  console.log('Fab Button clicked.');
}

<ion-fab bottom right #fab class="space-fab-list">
      <button ion-fab #fabBtn mini class="fab-button" [disabled]="!isButtonsFound" (click)="fabButtonClicked()"><ion-icon name="add"></ion-icon></button>
      <ion-fab-list side="top" class="spaces-side-list">
      <button ion-fab *ngFor="let buttonObj of buttonList" class="button-fab-object" (click)="doSomthing(buttonObj)">buttonObj.title</button>
      </ion-fab-list>
</ion-fab>

2. Call setActiveLists method of FabContainer class

问题：使用此解决方案，默认情况下打开ion-fab-list，但不会从* ngFor填充按钮 . 空的fab-list开张了 .

@ViewChild('fab') fabElement: FabContainer;

ionViewDidEnter() {
  this.calculateButtons();
}

calculateButtons() {
  // buttonList list populated code
  this.fabElement.setActiveLists(true);
}

这个解决方案对我不起作用 .

请帮我解决这个问题 .

Dynamically generate buttons into ion-fab-list: 从Web服务获取的按钮列表

<ion-fab bottom right #fab class="space-fab-list">
  <button ion-fab #fabBtn mini class="fab-button" ><ion-icon name="add"></ion-icon></button>
  <ion-fab-list #fabList side="top" class="side-list">
      <button ion-fab class="space-fab-button home" (click)="openHome()">Home</button>
      <button ion-fab *ngFor="let button of buttonList" class="fab-button" (click)="doSomething(button)">{{ button.name }}</button>
  </ion-fab-list>
</ion-fab>

谢谢，Punita

angular ionic3 fab

2 回答

  • 1

    这里是，

    Component side :

    import { FabContainer } from 'ionic-angular';

@ViewChild('fab')fab : FabContainer;

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

    Template side :

    <ion-fab top right edge #fab>
    <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>

    WORKING DEMO

    使用动态生成按钮到ion-fab-list中：

    Component side :

    //Logic is same as above
buttonList = [
    { name : '1'},
    { name : '2'},
    { name : '3'},
    { name : '4'},
    { name : '5'},
]

    Template side :

    <ion-fab bottom right #fab class="space-fab-list">
  <button ion-fab #fabBtn mini class="fab-button" ><ion-icon name="add"></ion-icon></button>
  <ion-fab-list #fabList side="top" class="side-list">
      <button ion-fab class="space-fab-button home" (click)="openHome()">Home</button>
      <button ion-fab *ngFor="let button of buttonList" class="fab-button" (click)="doSomething(button)">{{ button.name }}</button>
  </ion-fab-list>
</ion-fab>

    WORKING DEMO

    回复于
  • 1

    谢谢你的建议 . 我使用ChangeDetectorRef解决了这个问题 .

    在setActiveLists（）方法执行之前调用detectChange（）方法

    this.changeDetectorRef.detectChanges();
this.fabElement.setActiveLists(true);

    谢谢

    回复于

相关问题