ionic-framework - 在 ionic 框架中将菜单图标向左对齐

Question

我在将图标左对齐时遇到了一个大问题。无论我做什么，它都会与屏幕右侧对齐。其他页面没有问题并且与左侧完美对齐。当我使用选项卡时会发生此问题。

我该如何解决？没有 CSS 代码，因为我使用的是默认代码。

这是我的 ionic 代码:

<ion-header>
  <ion-toolbar>
    <ion-buttons start>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
    <ion-segment end [(ngModel)]="stories">
      <ion-segment-button value="headlines">
        Headlines
      </ion-segment-button>
      <ion-segment-button value="new">
        New
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

无论我做什么，这都是最终结果:


PS:我使用的是最新版本的 ionic 。

Answer 1

正如@Sam5487 所说，你应该使用 ion-navbar而不是 ion-toolbar (如果您使用工具栏是为了避免在推送页面时出现后退箭头图标，您应该将该页面设置为 root 而不是将其推送到导航堆栈)。

关于 end/start/left/right
我还看到您使用了 start ion-buttons 中的属性，但这并不意味着它会被放置在左边，因为 start和 end遵循平台的 UI 模式

所以<ion-buttons start>将在 留给 ios 并成为 android 右侧的第一个按钮 .

和 <ion-buttons end>将在 适用于 ios 和 android 右侧的最后一个按钮 .

因此，两者 start或 end该按钮将放置在 Android 的右侧。

如果你想在两个平台的左侧或右侧放置一个按钮，你应该使用 left或 right ，因为提供这些属性是为了克服它。

使用 menuToggle按钮

话虽如此，如果你看看 menuToggle docs :

If placing the menuToggle in a navbar or toolbar, it should be placed as a child of the <ion-navbar> or <ion-toolbar>, and not in the <ion-buttons>.

所以为了达到预期的结果，你只需要改变你的布局:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-segment [(ngModel)]="stories">
      <ion-segment-button value="headlines">
        Headlines
      </ion-segment-button>
      <ion-segment-button value="new">
        New
      </ion-segment-button>
    </ion-segment>
  </ion-navbar>
</ion-header>

您还可以通过查看 来确认这是推荐的方法。 this page from the Conference App demo 由 Ionic 的人制作