Ionic change ion-view header color
Ionic change ion-view header color : Sometimes you need to change the default ion-view header color in ionic framework. You can use ion-nav-bar in each view and add the ionic inbuilt color css or add you custom css to change the ion-view header color. Here in this tutorial we are going to explain how to change the ion-view color in ionic framework with example and demo.
Ionic change ion-view header color
Add the ion-nav-bar to each ion-view and add the color css in this. Here is an example for this –
Ionic change ion-view header color:
<ion-view view-title="Demo Page">
<ion-nav-bar class="bar-calm">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-content>
Dummy Content..
</ion-content>
</ion-view>
|
The above example will change the default ion-view header color.
If you will run the above example it will produce the following output-
More About
Let us do more customization.
Add Custom Color
If you want to add your custom color add a class and add the css for this –
Ionic change ion-view header color: Add custom color
<ion-view view-title="Demo Page">
<ion-nav-bar class="my-color">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-content>
Dummy Content..
</ion-content>
</ion-view>
<style>
.my-color{
background-color:yellow !important;
}
</style>
|
The above example will change the default ion-view header color.
If you will run the above example it will produce the following output-
Advertisements
