Menu
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>
912
You can use item-end and item-start to set the alignment. Note that it only works if your component with item-start/end is inside a ion-item. I actually tried something similar earlier. While this does work for some reason it makes the buttons small and has an underline.
Adding Header If you want to create a header, you need to add bar-header after your main bar class. Open your www/index. html file and add the header class inside your body tag. We are adding a header to the index.
Header is a parent component that holds the toolbar component. It's important to note that ion-header needs to be the one of the three root elements of a page.
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
130
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>
It's work for me.
Ionic 4 - Header
<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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
