Ionic 3 页脚中的多个按钮

Question

我正在尝试在 Ionic 3 项目的页脚部分添加两个按钮（左按钮和右按钮）。它要么并排出现，要么在不同的两排出现。以下是我的代码。

<ion-footer>
  <ion-buttons text-start>
    <button ion-button clear (click)="backPage()">Back</button>
  </ion-buttons>
  <ion-buttons text-end>
    <button ion-button clear (click)="nextPage()">Next</button>
  </ion-buttons>
</ion-footer>

结果如下

Answer 1

<ion-footer no-border text-center>
    <ion-toolbar>
        <ion-buttons left>
            <button ion-button icon-only clear large (click)="formSlider.slideTo(0)">
                <ion-icon name="skip-backward"></ion-icon>
            </button>
        </ion-buttons>
        <ion-buttons right>
            <button ion-button icon-only clear large (click)="formSlider.slideTo(formSlider.length() - 1)">
                <ion-icon name="skip-forward"></ion-icon>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-footer>

Answer 2

使用<ion-buttons start>或<ion-buttons end>

<ion-footer>
<ion-toolbar>
<ion-buttons start>
  <button ion-button (click)="func1()"> Back
  </button>
</ion-buttons>

<ion-buttons end>
  <button ion-button (click)="func2()"> Next
  </button>
</ion-buttons>
</ion-toolbar>
</ion-footer>

Ionic 3 页脚中的多个按钮

Multiple buttons in footer in Ionic 3

button

footer

ionic-framework

ionic3