在离子框架中将菜单图标对齐到左侧

Question

我在左边对齐图标时遇到了很大的问题.无论我做什么,它都会与屏幕右侧对齐.其他页面没有问题,并与左侧完美对齐.我使用选项卡时会发生此问题.

我该如何解决？因为我使用默认代码,所以没有CSS代码.

这是我的离子代码:

<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:我正在使用最新版本的离子.

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文档:

如果将其放置menuToggle在导航栏或工具栏中,则应将其放置为<ion-navbar>或的子项<ion-toolbar>,而不是放在 <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>

您也可以通过Ionic人员在会议应用程序演示中查看此页面来确认这是推荐的方法.