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>
Ionic 2 / Ionic 3 has something for that, just look at the following code :
<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.
More informations about the guidelines :
Android : https://developer.android.com/guide/practices/ui_guidelines/index.html
iOS : https://developer.apple.com/ios/human-interface-guidelines/
Windows : https://developer.microsoft.com/en-us/windows/design
ionic 4 ion-navbar is replaced by ion-back-button and in Ionic 4 back button be like
<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>
You can add button in right side in header in 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
.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
<ion-icon name="custom"></ion-icon>
I solved my problem with this:
ion-buttons {
order: 10
}
Try adding it to your stylesheet
Note: I used this in 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>
Replace:
for icons please visit this website http://ionicframework.com/docs/v2/ionicons/
It can be done as follow:
<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>
this should work for you ......
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.