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 在 ios 中将其放置在标题的左侧，在 md 和 wp 模式中将其放置在标题的右侧。如果您希望按钮始终位于左侧，无论模式如何，请改用left 属性。

试试：

<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