ionic2 + cordova app - header header (custom style)

8.1 Use of the title bar (welcome to join the Q group to learn and discuss together 657185219)

<ion-header>
  <ion-navbar>
    <ion-title>
      <ion-searchbar></ion-searchbar>
    </ion-title>
    <!--begin left; end right end -->
    <ion-buttons bigin>
      <button ion-button>
        Nanjing
        <ion-icon name="ios-arrow-down" style="margin:2px 0px 0px 4px"></ion-icon>
      </button>
    </ion-buttons>

  </ion-navbar>
</ion-header>

 <ion-title> The title can be a sentence directly, here is the searchbar

 

8.2 Style customization

Official website style variables (look for color variables corresponding to different labels)

All icons on the official website  (find the icon you want to use)

Here I customized the entire bottom color of ion-navbar

 

8.3 Add back button

<!--Add a select city button under the toolbar-->
<ion-buttons bigin>
      <button ion-button>
        Nanjing
        <ion-icon name="ios-arrow-down" style="margin:2px 0px 0px 4px"></ion-icon>
      </button>
    </ion-buttons>

 

8.4 Illustration