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

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属性，但这并不意味着它会放在左侧，因为 {{1} }和start遵循平台的UI模式

因此，end将位于左侧的ios ，并且是右侧的第一个按钮。

<ion-buttons start>将位于右侧的ios 和右侧的最后一个按钮。

因此，对于<ion-buttons end>或start，该按钮将位于Android的右侧。

如果您想在两个平台的左侧或右侧放置一个按钮，您应该使用end或left，因为这些属性是作为过度使用的方式提供的。

使用right按钮

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

  

如果将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> 。

因此，为了达到理想的效果，您只需更改此布局：

library(tidyverse)
df <- subscribers %>%
  gather(key, value, start, end) %>%
  mutate(key = ifelse(key == "start",1,-1)) %>%
  arrange(value)

df$cum <- cumsum(df$key)  

ggplot(data = df,
       aes(x = value, y = cum)) +
  geom_step() 

您也可以通过查看Ionic家伙的 this page from the Conference App demo 来确认这是推荐的方法

Answer 2

试试这个

<ion-header>
 <ion-navbar>
      //*** Rest of the header code ***//
  </ion-navbar>
</ion-header>

同样在您的按钮中，我只建议添加icon-only。

  <button ion-button icon-only menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>