Ionic framework 在ionic framework中向左对齐菜单图标
我有一个大问题,对齐图标的左侧。无论我做什么,它都与屏幕的右侧对齐。其他页面没有问题,完全向左对齐。当我使用选项卡时会发生此问题 我该如何解决这个问题?没有CSS代码,因为我使用的是默认代码 这是我的爱奥尼亚密码:Ionic framework 在ionic framework中向左对齐菜单图标,ionic-framework,menu,ionic2,ionic3,alignment,Ionic Framework,Menu,Ionic2,Ionic3,Alignment,我有一个大问题,对齐图标的左侧。无论我做什么,它都与屏幕的右侧对齐。其他页面没有问题,完全向左对齐。当我使用选项卡时会发生此问题 我该如何解决这个问题?没有CSS代码,因为我使用的是默认代码 这是我的爱奥尼亚密码: <ion-header> <ion-toolbar> <ion-buttons start> <button ion-button menuToggle> <ion-icon name="m
<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:我使用的是最新版本的爱奥尼亚。试试这个
<ion-header>
<ion-navbar>
//*** Rest of the header code ***//
</ion-navbar>
</ion-header>
正如@Sam5487所说,您应该使用
ion导航栏
而不是ion工具栏
(如果您使用工具栏是为了避免在按下页面时出现后箭头图标,那么您应该将该页面设置为根,而不是仅仅将其推到导航堆栈)
关于结束
/开始
/左
/右
我还看到您在离子按钮
中使用了开始
属性,但这并不意味着它将被放置在左侧,因为开始
和结束
遵循平台的UI模式
因此,ios的
将位于左侧,android的将位于右侧的第一个按钮
对于ios来说,
位于右侧,对于android来说,最后一个按钮位于右侧
因此,无论是开始
还是结束
,该按钮都将放置在Android的右侧。
如果要在两个平台的左侧或右侧放置按钮,应使用left
或right
,因为提供这些属性是为了克服这一点
使用菜单切换
按钮
也就是说,如果你看一下:
如果在导航栏或工具栏中放置菜单切换
,则应将其放置
作为
或
的子级,而不是
因此,为了达到预期的效果,您只需更改此布局:
<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>
标题
新的
您还可以通过查看爱奥尼亚公司的员工制作的来确认这是推荐的方法,谢谢。仅
图标的用途是什么?我在谷歌上搜索了一下,但找不到任何好的解释。常见的CSS主题。它删除了一些额外的填充,并稍微增加了图标的大小。使其仅显示为图标,而不是看起来应该有一些文字。非常感谢。你的信解释了很多。2天前刚开始学习爱奥尼亚框架并热爱它:)很高兴听到这个消息!有这么多的东西正在改进,这么多的功能正在添加到离子,我仍然每天学习新的东西。。。享受与爱奥尼亚的学习和工作:)耶!到目前为止,这是一个很好的学习。再次感谢:)
<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>