[英]Ionic 2 / 3 / 4 : How to align button in the header to the right side of header
如何与右侧对齐,按钮显示在标题左侧,没有撰写图标。
这是我在做什么:
<ion-toolbar>
<ion-title>TODO APP</ion-title>
<button class = "button button-icon">
<i class="icon ion-compose"></i>
</button>
</ion-toolbar>
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>
以这种方式解决您的问题的优点是您的导航栏将自动遵守 android/ios/windows 指南。 因此,您可以通过这种方式提高应用程序的质量。
有关准则的更多信息:
安卓: https : //developer.android.com/guide/practices/ui_guidelines/index.html
iOS : https : //developer.apple.com/ios/human-interface-guidelines/
ionic 4 ion-navbar 被 ion-back-button 取代,在Ionic 4 back 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>
您可以在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>
您可以像这样添加自定义图标的 css 类
css
.ion-ios-custom:before {
background-image: url("image-icon.png");
}
或
.ion-ios-custom:before {
content: "\f439"; /* your font code */
}
或
.ion-ios-custom:before {
content: url("image-icon.png") !important;
}
html
<ion-icon name="custom"></ion-icon>
我用这个解决了我的问题:
ion-buttons {
order: 10
}
尝试将其添加到您的样式表
注意:我在ionic2中使用过这个。
<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>
替换:
有关图标,请访问此网站http://ionicframework.com/docs/v2/ionicons/
可以按如下方式完成:
<ion-header class="ion-no-border">
<ion-toolbar>
<ion-button slot="start">
<ion-icon name="search"></ion-icon>
</ion-button>
<ion-title>
utenze
</ion-title>
<ion-button slot="end">
<ion-icon name="menu"></ion-icon>
</ion-button>
</ion-toolbar>
</ion-header>
<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>
这应该适合你......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.