我在将图标左对齐时遇到了一个大问题。无论我做什么,它都会与屏幕右侧对齐。其他页面没有问题并且与左侧完美对齐。当我使用选项卡时会发生此问题。
我该如何解决?没有 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 。
最佳答案
正如@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 的人制作
关于ionic-framework - 在 ionic 框架中将菜单图标向左对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45472049/