ionic2 学习笔记（一）头部设置

 

ion-header 

上面就是一个典型的<ion-navbar>标签的使用场景。<ion-navbar>标签中可以设置三个属性，分别是color,hideBackButton,mode。

 

1. hideBackButton 属性如果布尔值为true的话，back按钮就会被隐藏。
2. mode 属性值有三个分别为“ios”，“md”，”wp”，分别代表三个不同手机平台的风格样式。
3. color 也就是导航条颜色的设置，也就是sass$colors的映射，选项分别有"primary", "secondary", "danger", "light", "dark"

<ion-header>  
  
  <ion-navbar color="secondary">  
    <ion-title>订单详情</ion-title>  
  </ion-navbar>  
  
</ion-header> 

头部加菜单按钮：

menuToggle指令可以放置在任何按钮上，以切换菜单的打开或关闭。 如果将其添加到页面的NavBar中，则该按钮仅在其所在的页面当前是根页面时才会显示。 有关详细信息，请参阅菜单导航栏行为文档。

ion-header>

  <ion-navbar>
    <button ion-button menuToggle>//一起 融入
      <ion-icon name="menu"></ion-icon>//图标
    </button>
    <ion-title>注册</ion-title>
  </ion-navbar>

</ion-header>

<ion-header no-shadow>  

<ion-header>
  <ion-navbar no-border-bottom>
    <ion-title>
      Segments
    </ion-title>
  </ion-navbar>

  <ion-toolbar no-border-top>
    <ion-segment [(ngModel)]="pet">
      <ion-segment-button value="puppies">
        Puppies
      </ion-segment-button>
      <ion-segment-button value="kittens">
        Kittens
      </ion-segment-button>
      <ion-segment-button value="ducklings">
        Ducklings
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

官方

<ion-header>
  <ion-navbar no-border-bottom>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>

    <ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()">
      <ion-segment-button value="all">所有</ion-segment-button>
      <ion-segment-button value="Favorites">喜欢</ion-segment-button>
    </ion-segment>

    <ion-buttons end>
      <button ion-button icon-only (click)="presentFilter">
        <ion-icon ios="ios-options-outline" md="md-options"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

  <ion-toolbar no-border-top>
    <ion-searchbar color="primary"
                   [(ngModel)]="queryText"
                   (ionInput)="updateSchedule()"
                   placeholder="Search">
    </ion-searchbar>
  </ion-toolbar>
</ion-header>