ionic 2 中的菜单

Question

美好的一天。你能用 ionic 2 中的菜单组件向我解释一件事吗？我写了这段代码：

<ion-menu [content]="content">
    <ion-toolbar>
        <ion-title>Menu</ion-title>
    </ion-toolbar>
    <ion-content>
        <ion-list>
            <button ion-item (click)="open(profileRoot)">Profile</button>
            <button ion-item (click)="open(farmPage)">Farms</button>
            <button ion-item (click)="open(feedsRoot)">Feeds</button>
            <button ion-item (click)="open(calculatorRoot)">Calculator</button>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-nav id="nav" #content [root]="calculatorRoot"></ion-nav>

在每个组件中我都有这个代码：

<ion-navbar *navbar>
<ion-buttons start>
    <button menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>
</ion-buttons>
<ion-title>Profile</ion-title>
</ion-navbar>
<ion-content class="calculator-page">
    Profile
</ion-content>

但是，问题是 - 菜单图标出现在 iOS 上，它应该出现在左侧，但在 android 设备上它出现在右侧。有人可以解释为什么会这样吗？

Answer 1

这是因为 css 与 Android 和 iOS 不同。

如果您检查 <ion-buttons>，您将看到：

对于Android

ion-buttons { order: 4; }

对于iOS

ion-buttons { order: 3; }

这是FLEX订单，决定按钮的位置。

如果你想在 iOS 和 Android 上有相同的位置，你应该在你的 app.md.scss 中写：

ion-buttons { order: 3; }

Answer 2

Ionic2 Android md 主题不包含 .ion-button[start] 的设置，尽管它包含 .ion-button[end].

的设置

我发现使用 left（和 right）属性按预期工作，所以只需将 <ion-buttons start> 更改为 <ion-buttons left>:

<ion-navbar *navbar>
<ion-buttons left>
    <button menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>
</ion-buttons>
<ion-title>Profile</ion-title>
</ion-navbar>
<ion-content class="calculator-page">
    Profile
</ion-content>

我没有看到关于何时使用 start/end 与 left/right 的文档。虽然直接在 css 中覆盖 flex order 将在您的特定情况下起作用，但它可能导致应用程序其余部分中的按钮乱序。

ionic 2 中的菜单

Menu in ionic 2

javascript

typescript

ionic2

angular