ionic2基础（三）

知道如何启动服务和添加页面，下面我来介绍下常用的组件，以及样式的更改：

首先是头部，大部分的APP产品的头部布局基本差不多，但是总要考虑到特殊性，比如，头部有搜索框，有包含图标的按钮，等等....这些特殊的布局，我会在后面提到，希望能帮到你，先来看下常见的布局：

<ion-header>
    <ion-navbar>
        <ion-title>我是头部</ion-title>
    </ion-navbar>
</ion-header>

这是最基本的头部布局，header必须有，navbar必须有，这样你的头部才会美观

看，是不是觉得还是不太美观，大部分头部的文字是居中的，那么我们在组件标签里加上text-center属性，就不用再写样式了，像这样：

<ion-header>
  <ion-navbar>
    <ion-title text-center>我是头部</ion-title>
  </ion-navbar>
</ion-header>

这样就让文字居中了，ionic2定义了很多这样的标签属性，减少了样式的编辑量，提高了工作效率，但有时如果你设置了全局样式，由于某些子页面样式的特殊性，无法更改全局样式，使得子页面达不到想要的效果，那就需要单独处理了，以后我会介绍如何覆写全局样式。

如果UI设计图给出的头部颜色不是组件提供的，那么没关系，我们来覆写下局部样式，找到与之对应的scss文件，我们来定义头部的背景颜色：

page-home{
      .toolbar-background{
        background-color: red;
    }
}

像这样，头部就变成了红色这是覆写局部页面的样式，我们为了节省时间，如果没有特别特殊的要求，各子页面的头部颜色一样，那么我们可以定义全局样式，找到src文件夹下theme文件夹下的variables.scss文件，这个是控制整个项目的全局样式，我们可以在此定义，根据文档提供的变量，我们更改$toolbar-ios-background和$toolbar-md-background的样式，顾名思义，就是更改Ios系统和android系统下的样式，像这样：

$toolbar-ios-background: red
$toolbar-md-background: red;

我们也可以更改ion-title文字的颜色，$toolbar-ios-title-text-color:white;或者$toolbar-ios-title-text-color:#FFFFFF;

喏，文字变为了白色，根据类似的变量，我们可以更改header的高度，文字的大小等等，非常方便。

介绍了头部，下面来介绍另一个常用的组件tab，这是大多数单页面应用总会用到的组件，同样的像上回我说的如何添加页面那样添加一个tab文件，需要注意的是：我们需要在app.component.ts文件里更改默认显示的页面，像这样

之前是HomePage，但由于你要显示tab组件，所以你需要更改默认显示的页面，然后在tab.html页面像这样构建组件

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

然后你需要在ts里面引入你想用的页面，像这样

import { Component } from '@angular/core';

import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = HomePage;
  tab2Root: any = AboutPage;
  tab3Root: any = ContactPage;

  constructor() {

  }
}

这样就可以实现页面的切换了，是不是很方便~~

好了，这次就介绍这些，下回我会介绍更多的常用组件，以及特殊情况如何处理，多谢支持，不足之处望各位大神多多提点~~~