Html Ionic 2 / 3 / 4：如何将标题中的按钮与标题右侧对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36005630/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ionic 2 / 3 / 4 : How to align button in the header to the right side of header
提问by blackHawk
How can I align with the right side, the button is showing on the left of the header without compose icon.
如何与右侧对齐，按钮显示在标题左侧，没有撰写图标。
Here is what I'm doing:
这是我在做什么：
<ion-toolbar>
<ion-title>TODO APP</ion-title>
<button class = "button button-icon">
<i class="icon ion-compose"></i>
</button>
</ion-toolbar>
回答by Guillaume Le Mière
Ionic 2 / Ionic 3 has something for that, just look at the following code :
Ionic 2 / Ionic 3 有一些东西，看看下面的代码：
<ion-header>
<ion-navbar primary>
<ion-buttons start>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title>
My Page
</ion-title>
<ion-buttons end>
<button (click)="myFunction()" ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
The advantage of solving your problem this way is that your navbar will automatically respect the android/ios/windows guidelines. So this way you improve the quality of your app.
以这种方式解决您的问题的优点是您的导航栏将自动遵守 android/ios/windows 指南。因此，您可以通过这种方式提高应用程序的质量。
More informations about the guidelines :
有关准则的更多信息：
Android: https://developer.android.com/guide/practices/ui_guidelines/index.html
安卓：https: //developer.android.com/guide/practices/ui_guidelines/index.html
iOS: https://developer.apple.com/ios/human-interface-guidelines/
iOS：https: //developer.apple.com/ios/human-interface-guidelines/
Windows: https://developer.microsoft.com/en-us/windows/design
回答by Hari
ionic 4 ion-navbar is replaced by ion-back-button and in Ionic 4back button be like
ionic 4 ion-navbar 被 ion-back-button 取代，在Ionic 4back button 中就像
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>
Home
</ion-title>
<ion-button slot="secondary">
<ion-icon name="search"></ion-icon>
</ion-buttons>
</ion-toolbar>
</ion-header>
回答by Abdullah Pariyani
It's work for me.
这对我有用。
Ionic 4 - Header
离子 4 - 标题
<ion-header>
<ion-toolbar color="primary">
<ion-title class="titleHeader">User Detail</ion-title>
<ion-buttons slot="end">
<ion-back-button defaultHref="/"></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>回答by Ved
You can add button in right side in header in ionic 2.0
您可以在ionic 2.0 的标题右侧添加按钮
<ion-navbar *navbar>
<ion-title>
TODO APP
</ion-title>
<ion-buttons end>
<button ><ion-icon name="home"></ion-icon></button>
</ion-buttons>
</ion-navbar>
You can add your custom icon's css class like this
您可以像这样添加自定义图标的 css 类
css
css
.ion-ios-custom:before {
background-image: url("image-icon.png");
}
OR
或者
.ion-ios-custom:before {
content: "\f439"; /* your font code */
}
OR
或者
.ion-ios-custom:before {
content: url("image-icon.png") !important;
}
html
html
<ion-icon name="custom"></ion-icon>
回答by Ajay Gupta
I solved my problem with this:
我用这个解决了我的问题：
ion-buttons {
order: 10
}
Try adding it to your stylesheet
尝试将其添加到您的样式表
Note:I used this in ionic2.
注意：我在ionic2中使用过这个。
回答by SABDAR SHAIK
<ion-toolbar color='primary'>
<button ion-button menuToggle>
<ion-icon name='menu'></ion-icon>
</button>
<ion-title>TODO APP</ion-title>
<ion-buttons start>
<button (click)='YOUR_FUNCTION_CALL' ion-button icon-only>
<ion-icon name='YOUR_ICON_NAME'></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
Replace:
代替：
- YOUR_FUNCTION_CALL with the function call you need to call when click
- YOUR_ICON_NAME with icon name
- YOUR_FUNCTION_CALL 带有单击时需要调用的函数调用
- 带有图标名称的 YOUR_ICON_NAME
for icons please visit this website http://ionicframework.com/docs/v2/ionicons/
有关图标，请访问此网站http://ionicframework.com/docs/v2/ionicons/
回答by nitin
<ion-view title="home" align-title="center">
<ion-nav-buttons side="right">
<button ng-click="search()" class="button button-icon icon ion-android-search"></button>
</ion-nav-buttons>
<ion-content has-bouncing="0px">
</ion-content>
</ion-view>
this should work for you ......
这应该适合你......
