ion-header
上面就是一個典型的<ion-navbar>標簽的使用場景。<ion-navbar>標簽中可以設置三個屬性，分別是color,hideBackButton,mode。
hideBackButton屬性如果布爾值為true的話，back按鈕就會被隱藏。mode屬性值有三個分別為“ios”，“md”，”wp”，分別代表三個不同手機平台的風格樣式。color也就是導航條顏色的設置，也就是sass$colors的映射，選項分別有"primary","secondary","danger","light","dark"
1 <ion-header> 2 3 <ion-navbar color="secondary"> 4 <ion-title>訂單詳情</ion-title> 5 </ion-navbar> 6 7 </ion-header>
頭部加菜單按鈕：
menuToggle指令可以放置在任何按鈕上，以切換菜單的打開或關閉。 如果將其添加到頁面的NavBar中，則該按鈕僅在其所在的頁面當前是根頁面時才會顯示。 有關詳細信息，請參閱菜單導航欄行為文檔。
1 ion-header> 2 3 <ion-navbar> 4 <button ion-button menuToggle>//一起 融入 5 <ion-icon name="menu"></ion-icon>//圖標 6 </button> 7 <ion-title>注冊</ion-title> 8 </ion-navbar> 9 10 </ion-header>
<ion-header no-shadow>
1 <ion-header> 2 <ion-navbar no-border-bottom> 3 <ion-title> 4 Segments 5 </ion-title> 6 </ion-navbar> 7 8 <ion-toolbar no-border-top> 9 <ion-segment [(ngModel)]="pet"> 10 <ion-segment-button value="puppies"> 11 Puppies 12 </ion-segment-button> 13 <ion-segment-button value="kittens"> 14 Kittens 15 </ion-segment-button> 16 <ion-segment-button value="ducklings"> 17 Ducklings 18 </ion-segment-button> 19 </ion-segment> 20 </ion-toolbar> 21 </ion-header>
官方
1 <ion-header> 2 <ion-navbar no-border-bottom> 3 <button ion-button menuToggle> 4 <ion-icon name="menu"></ion-icon> 5 </button> 6 7 <ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()"> 8 <ion-segment-button value="all">所有</ion-segment-button> 9 <ion-segment-button value="Favorites">喜歡</ion-segment-button> 10 </ion-segment> 11 12 <ion-buttons end> 13 <button ion-button icon-only (click)="presentFilter"> 14 <ion-icon ios="ios-options-outline" md="md-options"></ion-icon> 15 </button> 16 </ion-buttons> 17 </ion-navbar> 18 19 <ion-toolbar no-border-top> 20 <ion-searchbar color="primary" 21 [(ngModel)]="queryText" 22 (ionInput)="updateSchedule()" 23 placeholder="Search"> 24 </ion-searchbar> 25 </ion-toolbar> 26 </ion-header>
