截至2016-05-13已经阅读完，完成0.8.0整理

总览

COMPONENTS（样式组件）：官方文档，构建及设计原型时候参考

API（功能接口）：官方文档，实现数据处理/业务逻辑时参考

继承了angularjs2最吸引人的组件式开发规范的优势，ionic2框架为我们预置了非常多的实用的组件。官方将Components与API分成两部分介绍，其实它们是同一个组件的不同方面（样式、功能接口），所以，本文档根据组件的不同用途，分为一下几大类，便于我们对ionic2的整体掌握：

• 导航类组件
• 布局类组件
• 功能类组件
• 数据类组件
• 配置类组件

导航类组件

Tab

Segment 二级分页

相当于二级Tab

SegmentButton

二级分页的按钮组件

Menu

Nav

• swipeBackEnabled 滑动返回

  <ion-nav swipeBackEnabled="false" [root]="rootPage"></ion-nav>

NavPop

带有nav-pop属性的元素，点击后直接关闭当前页面，包括：Page、Modal、Alert等。

用法类似于ViewController.dismiss();

<ion-content>
 <div block button nav-pop>go back</div>
</ion-content>

NavPush

带有nav-push属性的元素，点击后弹出所绑定的页面。

用法类似于let modal = Modal.create(){};

import {LoginPage} from 'login';
@Page({
  template: `<button [navPush]="pushPage" [navParams]="params"></button>`
})
class MyPage {
  constructor(){
    this.pushPage = LoginPage;
    this.params = { id: 42 };
  }
}

// template语法糖
<button [navPush]="[pushPage, params]"></button>

NavController

• Page creation 页面创建
• Lifecycle events 生命周期事件

ViewController

用于控制当前所在页面，方式.dismiss(data)即pop掉当前页面，同时data数据传入上级页面。

布局类组件

Navbar 界面中的导航条

Title 导航条位置的标题

Searchbar 局面中的搜索条

Slides 幻灯图

功能类组件

Alert 消息警示框

用于用户操作中触发的重要事件，需要操作或确认的通知，与Toast配合使用。

Toast 消息提示框

用于用户操作中触发的非主要事件，无需操作的通知，与Alert配合使用。

注意需要与ionic-native中的toast实现方式区分开。

数据类组件

NavParams 导航过程中数据传输

Loading 数据加载

InfiniteScroll 无限滚动（瀑布流）

Refresher 数据下拉刷新

Spinner 数据加载时图片样式

LocalStorage H5本地存储（临时）

用于存放登录信息、浏览缓存等非重要性数据

SqlStorage Sql文件存储（永久）

用于存放用户编辑资料、离线阅读资料等长期使用数据

• 支持SQL方式 query(query, params)

• 支持NOSQL方式 get(key) set(key, value) remove(key)

• 快速清理 clear()

配置类组件

Config

App

IonicApp

HideWhen

标签加入hidewhen=“ios,android”属性后，在属性包含的平台不显示此标签。

<div hideWhen="android,ios">
 I am hidden on Android and iOS!
</div>

<div hideWhen="portrait">
 I am hidden on Portrait! 竖屏
</div>

<div hideWhen="landscape">
 I am hidden on Landscape! 横屏
</div>

ShowWhen

类似HideWhen。

Platform

用于检测设备平台及版本语言信息，检测后可根据不同平台设置不同业务逻辑/界面，与HideWhen、ShowWhen属性用法类似但更底层。

目前支持检测如下平台：

• android on a device running Android.
• cordova on a device running Cordova.
• core on a desktop device.
• ios on a device running iOS.
• ipad on an iPad device.
• iphone on an iPhone device.
• mobile on a mobile device.
• mobileweb in a browser on a mobile device.
• phablet on a phablet device.
• tablet on a tablet device.
• windows on a device running Windows.