如何在ion-fab-list中不断设置ion-fab-buttons命令

Question

我有这个离子工厂列表

<ion-fab-list side="top">
      <button *ngIf="!loggedIn" [navPush]="Signup" (click)="fab.close()" ion-fab>
        <ion-icon name="md-clipboard" color="primary"></ion-icon>
        <ion-label>register</ion-label>
      </button>
      <button *ngIf="!loggedIn" [navPush]="Login" (click)="fab.close()" ion-fab>
        <ion-icon name="log-in" color="secondary"></ion-icon>
        <ion-label>Login</ion-label>
      </button>

      <button [navPush]="cartPage" (click)="fab.close()" *ngIf="loggedIn" ion-fab>
        <ion-icon name="cart" color="danger"></ion-icon>
        <ion-label>cart</ion-label>
      </button>
      <button [navPush]="MyordersPage" *ngIf="loggedIn" [navParams]="{'userId': user.id}" (click)="fab.close()" ion-fab>
        <ion-icon name="logo-buffer" color="secondary"></ion-icon>
        <ion-label>My orders</ion-label>
      </button>

      <button (click)="platform.exitApp();" (click)="fab.close()" ion-fab>
        <ion-icon name="log-out" color="secondary"></ion-icon>
        <ion-label>Exit</ion-label>
      </button>

    </ion-fab-list>

  </ion-fab>

我想在列表末尾的离子工厂列表中显示“退出”按钮，但它出现在顶部！

有没有办法解决离子制造列表中按钮的位置？

Answer 1

Fab按钮应该是反向排序的，因为它们可以作为堆栈使用。将退出按钮放在顶部。

<ion-fab-list side="top">
      <button (click)="platform.exitApp();" (click)="fab.close()" ion-fab>
        <ion-icon name="log-out" color="secondary"></ion-icon>
        <ion-label>Exit</ion-label>
      </button>

      <button *ngIf="!loggedIn" [navPush]="Signup" (click)="fab.close()" ion-fab>
        <ion-icon name="md-clipboard" color="primary"></ion-icon>
        <ion-label>register</ion-label>
      </button>
      <button *ngIf="!loggedIn" [navPush]="Login" (click)="fab.close()" ion-fab>
        <ion-icon name="log-in" color="secondary"></ion-icon>
        <ion-label>Login</ion-label>
      </button>

      <button [navPush]="cartPage" (click)="fab.close()" *ngIf="loggedIn" ion-fab>
        <ion-icon name="cart" color="danger"></ion-icon>
        <ion-label>cart</ion-label>
      </button>
      <button [navPush]="MyordersPage" *ngIf="loggedIn" [navParams]="{'userId': user.id}" (click)="fab.close()" ion-fab>
        <ion-icon name="logo-buffer" color="secondary"></ion-icon>
        <ion-label>My orders</ion-label>
      </button>

    </ion-fab-list>

  </ion-fab>