如何不断设置ion-fab-list中的ion-fab-buttons顺序

时间:2019-03-13 16:46:16

标签: ionic3 floating-action-button

我有这个ion-fab-list

site.com/20190520/../../../../../../etc/passwd

我想在离子织物列表中的列表末尾显示“退出”按钮,但是它显示在顶部!

enter image description here

有什么办法可以固定按钮在ion-fab-list中的位置?

1 个答案:

答案 0 :(得分: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>