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>

Try it »

The above example will change the default ion-view header color.

If you will run the above example it will produce the following output-

Ionic change ion-view header color css

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>

Try it »

The above example will change the default ion-view header color.

If you will run the above example it will produce the following output-

Ionic change ion-view header color


Advertisements

Add Comment

📖 Read More