如何在 ion-fab-list 中不断设置 ion-fab-buttons 顺序答案

【问题标题】：How to Set ion-fab-buttons order in ion-fab-list constantly如何在 ion-fab-list 中不断设置 ion-fab-buttons 顺序
【发布时间】：2019-03-13 16:46:15
【问题描述】：

我有这个 ion-fab-list

<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>

我想在列表末尾的 ion-fab-list 中显示“退出”按钮，但它出现在顶部！

有什么方法可以修复 ion-fab-list 中按钮的位置吗？

【问题讨论】：

标签： ionic3 floating-action-button

【解决方案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>

【讨论】：