Arhn - архитектура программирования

Как постоянно устанавливать порядок кнопок ion-fab в ion-fab-list

У меня есть этот 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?

floating-action-button ionic3
13.03.2019

Ответы:


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>
13.03.2019
Новые материалы
Коллекции публикаций по глубокому обучению
Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
Представляем: Pepita
Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
Советы по коду Laravel #2
1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
3 способа решить квадратное уравнение (3-й мой любимый) -
1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
Создание VR-миров с A-Frame
Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
Демистификация рекурсии
КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..