android - Ionic2 导航栏在 android 中左右带有图标

Question

<ion-header>
    <ion-navbar align-title="center" color="primary" hideBackButton>
        <ion-buttons ion-button icon-only start class="card-buttons">
            <button class="card-buttons" (tap)="openMenu()">
                <ion-icon name="menu"></ion-icon>
            </button>
        </ion-buttons>
        
        <ion-title class="card-title">        
            {{title | translate}}
        </ion-title>
        <ion-buttons  ion-button icon-only end>
            <button ion-button (tap)="goBack()">
                <ion-icon name="md-arrow-round-back"></ion-icon>
            </button>
            <button ion-button (tap)="share()">
                <ion-icon name="share" class="ion-md-share"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

菜单图标应显示在左侧，但显示在右侧。在 iOS 上没问题。在android中是这个问题:

谁能帮忙？

谢谢

Answer 1

这是为 android 和 windows 设计的。

检查这个github issue

start places it to the left of the title in ios and to the right of the title in md and wp mode. If you'd like a button to always be on the left, regardless of the mode, use the left property instead.

尝试:

<ion-header>
    <ion-navbar align-title="center" color="primary" hideBackButton>
        <ion-buttons icon-only left class="card-buttons">
            <button ion-button class="card-buttons" (tap)="openMenu()">
                <ion-icon name="menu"></ion-icon>
            </button>
        </ion-buttons>

        <ion-title class="card-title">        
            {{title | translate}}
        </ion-title>
        <ion-buttons icon-only right>
            <button ion-button (tap)="goBack()">
                <ion-icon name="md-arrow-round-back"></ion-icon>
            </button>
            <button ion-button (tap)="share()">
                <ion-icon name="share" class="ion-md-share"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

同时检查 here