ionic2 文檔說明參考

時間 2019-12-08

標籤 ionic2 ionic 文檔說明參考简体版

原文原文鏈接

參考地址： https://git.oschina.net/hesop/ionic2

# ionic2.0@beta版本文檔整理

*本文檔不是英文文檔的徹底翻譯，是我的的閱讀筆記。若是閱讀後有不明白或者不懂，[請移步英文版閱讀](http://ionicframework.com/docs/v2/api/)。

若是本文有錯誤，請在本頁末尾留言或者提交[Issues](https://github.com/Raineye/ionic2/issues)。*

*您能夠點擊小標題跳轉到相應的ionic2英文文檔。*

## 前言

聲明：本倉庫中的例子程序使用了ionic官方的例子[ionic-preview-app](https://github.com/driftyco/ionic-preview-app)。

運行：

- `git clone git@github.com:Raineye/ionic2.git`

- `cd ionic-preview-app`

- `npm install`

- `ionic serve`

## [ActionSheet](http://ionicframework.com/docs/v2/api/components/action-sheet/ActionSheet/)

ActionSheet是一個對話框，讓用戶選擇一個選項。並且用戶必需要選擇其中一個選項才能恢復與應用程序的交互（點擊背景會執行`cancel`的事件）。固然也能夠利用背景或者後退鍵來取消對話框從而恢復和程序的交互。

ActionSheet會從一個`button`數組建立它的按鈕選項。每個按鈕都擁有一些屬性，例如`text` `handler` `role` 等等。若是`handler`返回`false`時，ActionSheet將不會消失。ActionSheet還能夠選擇有一個標題和副標題。

若是有一個button的`role`被設置爲`cancel`那麼這個按鈕無論位於按鈕數組的哪一個位置它都會位於底部。ionic官方建議`destructive`類型的按鈕最好位於數組的第一個位置。另外，若是ActionSheet是因爲點擊背景而被取消的，那麼它將會執行和`cancle`類型的按鈕點擊同樣的事件。

注意：若是有兩個`cancle`類型的按鈕，那麼最後一個`cancel`類型的按鈕會覆蓋掉前面全部的`cancel`類型的按鈕。

在建立ActionSheet的第一個參數中，你能夠將全部的選項傳遞進去：`ActionSheet.create(opts)。

```TypeScript

openMenu(){

this.actionSheet = ActionSheet.create({

title: 'Albums',

buttons: [

{

text: 'Destructive',

role: 'destructive',

handler: () => {

console.log('Destructive clicked');

}

{

text: 'Archive',

handler: () => {

console.log('Archive clicked');

}

{

text: 'Cancel',

role: 'cancel',

handler: () => {

console.log('Cancel clicked');

}

]

})

this.nav.present(this.actionSheet);

}

```

### 靜態方法

#### create(opts)

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

| title | `string` |ActionSheet的標題 |

| subTitle| `string`|ActionSheet的副標題|

| cssClass|`string`|自定義樣式的css類|

| enableBackdropDismiss|`boolean`|用戶點擊背景是否關閉ActionSheet|

| buttons|`array<any>`|顯示的按鈕的數組|

**按鈕的屬性**

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

| text|`string`|按鈕上顯示的文字|

| icon|`icon`|按鈕上顯示的圖標|

| handler|`any`|點擊後執行的函數|

| cssClass|`stirng`|

|role|`string`|如何顯示按鈕，`destructive`或者`cancel`。若是沒有設置此選項，那麼將顯示默認的按鈕。|

### 實例方法

#### `setTitle(title)`

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

| title |`string`|設置ActionSheet的標題|

#### `setSubTitle(subTitle)`

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

| subTitle |`string`|設置ActionSheet的子標題|

#### `addButton(button)`

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

| button |`object `| ActionSheet的按鈕。 |

## [Alert](http://ionicframework.com/docs/v2/api/components/alert/Alert/)

Alert是一個對話框，能夠向用戶提供信息或者收集用戶輸入的信息。一樣用戶必須點擊某個按鈕才能銷燬這個對話框。

和ActionSheet十分類似的是，點擊`role`被設置成`cancle`的按鈕和點擊背景所觸發的事件是同樣的。

```

constructor(nav: NavController) {

this.nav = nav;

}

presentAlert() {

let alert = Alert.create({

title: 'Low battery',

subTitle: '10% of battery remaining',

buttons: ['Dismiss']

});

this.nav.present(alert);

}

presentConfirm() {

let alert = Alert.create({

title: 'Confirm purchase',

message: 'Do you want to buy this book?',

buttons: [

{

text: 'Cancel',

role: 'cancel',

handler: () => {

console.log('Cancel clicked');

}

{

text: 'Buy',

handler: () => {

console.log('Buy clicked');

}

]

});

this.nav.present(alert);

}

presentPrompt() {

let alert = Alert.create({

title: 'Login',

inputs: [

{

placeholder: 'Username'

{

placeholder: 'Password',

type: 'password'

}

buttons: [

{

text: 'Cancel',

role: 'cancel',

handler: data => {

console.log('Cancel clicked');

}

{

text: 'Login',

handler: data => {

if (User.isValid(data.username, data.password)) {

// logged in!

} else {

// invalid login

return false;

}

]

});

this.nav.present(alert);

}

```

### 靜態方法

#### `creat(opts)`

Alert選項

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

| title|`string`|

| subTitle |`string`|

| message |`string`|Alert顯示的信息|

| cssClass|`string`|

| inputs|`array`|Alert顯示的輸入框數組|

| buttons|`array`|

| enableBackdropDismiss|`boolean`|點擊背景是否銷燬Alert|

Input選項

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

| type|`string`|input的類型，例如：text、tel、number等等|

| name|`string`|

| placeHolder|`string`|input的佔位符，未輸入時的提示信息。|

| value|`string`|checkbox的值|

| label|`string`|checkbox顯示的文字|

| checked|`boolean`|是否選中|

| id|`string`|input的標識|

Button的選項

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

| text|`string`|

| handler |`any `|

| cssClass |`string`|

| role |`string`|`null`或者`cancel`

### 實例方法

#### `setTitle(title)`

- title `stirng`

#### `setSubTitle(subTitle)`

#### `setMessage(message)`

#### `addButton(button)`

#### `setCssClass(cssClass)`

- cssClass `string`

添加css class 到alert的外層。

## [App](http://ionicframework.com/docs/v2/api/decorators/App/)

app是一個ionic的裝飾器，它能夠啓動應用，是整個ionic應用的主入口。經過一系列的參數做爲應用程序的全局配置變量。`@App`能夠接受一個模板屬性或者一個模板地址。

```

import {App} from 'ionic-angular';

@App({

templateUrl: 'app/app.html',

providers: [DataService]

})

export class MyApp{

// Anything we would want to do at the root of our app

}

```

### 屬性

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

| config|`object`|app的配置信息|

| prodMode|`boolean`|激活Angular的生產模式，在框架內關閉斷言和其餘檢查。默認是`false`。

| pipes|`array`

| providers |`array`

| template |`string `

| templateUrl |`string `

## [Badges](http://ionicframework.com/docs/v2/components/#badges)

Badges是一種小部件，一般用於數值顯示。

```

<ion-item>

<ion-icon name="logo-twitter" item-left></ion-icon>

Followers

<ion-badge item-right>260k</ion-badge>

</ion-item>

```

Badges也能夠給與顏色屬性`<ion-badge secondary></ion-badge>

## [Buttons](http://ionicframework.com/docs/v2/api/components/button/Button/)

Button是ionic中的簡單句子，能夠顯示文本、圖標或者都顯示。

### 屬性

- outline

帶有邊框的透明按鈕

- clear

不帶邊框的透明按鈕

- round

大圓角的按鈕

- block

一個填充其父容器的小圓角按鈕

- full

填充其父容器的直角按鈕

- small

一個小尺寸按鈕

- large

一個大尺寸按鈕

- disabled

一個不能點擊的按鈕

- fab

一個浮動的按鈕

- fab-left/fab-right/fab-center/fab-top/fab-bottom

控制浮動按鈕的位置

- color

動態設置按鈕的顏色屬性。

- start\end

在`<ion-navbar>`中的位置控制

### Icon Buttons

```

<ion-icon name="home"></ion-icon>

Left Icon

</button>

Right Icon

<ion-icon name="home"></ion-icon>

</button>

<ion-icon name="home"></ion-icon>

</button>

```

## [Cards](http://ionicframework.com/docs/v2/components/#cards)

Cards是一個css組件

### Card的組成

就像一個普通的頁面同樣，cards擁有一個頭部和內容。

```

<ion-card>

<ion-card-header>

Header

</ion-card-header>

<ion-card-content>

The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.

</ion-card-content>

</ion-card>

```

## [Checkbox](http://ionicframework.com/docs/v2/api/components/checkbox/Checkbox/)

複選框擁有一個布爾值來標記本身是否被選中，使用`checked`能夠來默認選中複選框，使用`disabled`來禁用該複選框。

```

<ion-item>

<ion-label>Daenerys Targaryen</ion-label>

<ion-checkbox dark checked="true"></ion-checkbox>

</ion-item>

<ion-item>

<ion-label>Arya Stark</ion-label>

<ion-checkbox disabled="true"></ion-checkbox>

</ion-item>

<ion-item>

<ion-label>Jon Snow</ion-label>

<ion-checkbox [(ngModel)]="sausage"></ion-checkbox>

</ion-item>

```

### 特性

- checked `boolean`

複選框是否被選中

- disabled `boolean`

複選框是否禁用

### 事件

- change

當複選框狀態變化時觸發

## [Config](http://ionicframework.com/docs/v2/api/config/Config/)

用來配置整個應用程序。

### 屬性

| 名稱 | IOS默認 |MD默認 |

| ------------- |------------- |------------- |

|activator| highlight |ripple

|actionSheetEnter|action-sheet-slide-in|action-sheet-md-slide-in

|actionSheetLeave|action-sheet-slide-out|action-sheet-md-slide-out

alertEnter|alert-pop-in |alert-md-pop-in

alertLeave|alert-pop-out|alert-md-pop-out

backButtonText| Back

backButtonIcon| ion-ios-arrow-back| ion-md-arrow-back

iconMode| ios |md

menuType |reveal |overlay

modalEnter| modal-slide-in| modal-md-slide-in

modalLeave| modal-slide-out| modal-md-slide-out

pageTransition| ios-transition| md-transition

pageTransitionDelay| 16| 120

tabbarPlacement |bottom| top

tabbarHighlight | |top

tabbarLayout|

tabSubPages| |true

### 實例方法

#### `get(key, fallbackValue)`

- key `string`

config的鍵

- fallbackValue `any`

#### `getBoolean(key)`

#### `set(platform,key,value)`

- platform `string`

"ios"或者"android"

## [Content](http://ionicframework.com/docs/v2/api/components/content/Content/)

Content組件提供了易於使用的方法來控制滾動，同時能夠和其餘組件配合實現下拉刷新和上拉加載的功能。

### 實例方法

#### `onScrollElementTransitionEnd()`

#### `scrollTo(x,y,duration,tolerance)`

滾動到具體的座標

- x `number`

x軸距離

- y `number`

y軸距離

- duration `number`

滾動動畫的持續時間

- tolerance `TODO`

此函數執行完畢後，返回一個`Promise`

#### `scrollToTop()`

滾動到頂部，執行完畢後返回一個`Promise`

#### `getContentDimensions()`

獲取content的尺寸

## [Events](http://ionicframework.com/docs/v2/api/util/Events/)

Events是一個發佈訂閱式的事件系統。

```

// first page (publish an event when a user is created)

function createUser(user) {

console.log('User created!')

events.publish('user:created', user);

}

// second page (listen for the user created event)

events.subscribe('user:created', (user) => {

console.log('Welcome', user);

});

```

### 實例方法

#### `subscribe(topic,handler)`

訂閱某個事件，當有該事件被髮布時，執行handler。

- topic `string`

訂閱的主題

- handler `function`

#### `unsubscribe(topic, handler)`

取消訂閱某個主題。handler再也不接受該主題發佈的事件。

若是handler成功移除，改函數返回`true`

#### `publish(topic,eventData)

將事件發佈到給定的主題

## [Grid](http://ionicframework.com/docs/v2/components/#grid)

ionic基於flexbox製做了一套網格框架。

```

<ion-col width-10>This column will take 10% of space</ion-col>

```

列的百分比屬性：

- width-10 10%

- width-20 20%

- width-25 25%

- width-33 33.3333%

- width-50 50%

- width-67 66.6666%

- width-75 75%

- width-80 80%

- width-90 90%

用`offset`屬性來設置列偏移（例如：`offset-25`）

## [HideWhen](http://ionicframework.com/docs/v2/api/components/show-hide-when/HideWhen/)

HideWhen用來設置某個平臺或者某個屏幕方向時顯示的元素。

```

I am hidden on Android!

</div>

I am hidden on iOS!

</div>

I am hidden on Android and iOS!

</div>

I am hidden on Portrait!

</div>

I am hidden on Landscape!

</div>

```

## [Icon](http://ionicframework.com/docs/v2/api/components/icon/Icon/)

Icon會自動識別平臺並使用該平臺的設計Icon。

```

<ion-icon name="star"></ion-icon>

<ion-icon ios="ios-home" md="md-home"></ion-icon>

<ion-icon name="ios-clock"></ion-icon>

<ion-icon name="logo-twitter"></ion-icon>

<ion-icon [name]="myIcon"></ion-icon>

```

### 屬性

- name `string`

- ios `string`

- md `string`

- isActive `bool`

設置該圖標是不是活躍的圖標。通常會用在tabbar中來將選中的tab圖標置爲活躍。

## [Id](http://ionicframework.com/docs/v2/api/components/app/Id/)

Id是一個應用程序中元素的惟一標識，能夠經過它來獲取到元素從而進行訪問。

### 使用

```

<ion-checkbox id="myCheckbox"></ion-checkbox>

```

constructor(app: IonicApp) {

this.app = app

}

ngAfterViewInit() {

var checkbox = this.app.getComponent("myCheckbox");

if (checkbox.checked) {

console.log('checkbox is checked');

}

```

經過IonicApp服務來訪問元素。

注意：不建議使用Id，由於不能保證註冊組件所在的頁面是否已經被銷燬或者離開當前視圖。

## [InfiniteScroll](http://ionicframework.com/docs/v2/api/components/infinite-scroll/InfiniteScroll/)

當用戶滾動到頁面底部時，能夠經過InfiniteScroll執行一個動做。

能夠用來實現上拉加載。

### 使用方法

```

<ion-content>

<ion-list>

<ion-item *ngFor="#i of items"></ion-item>

</ion-list>

<ion-infinite-scroll (infinite)="doInfinite($event)">

<ion-infinite-scroll-content></ion-infinite-scroll-content>

</ion-infinite-scroll>

</ion-content>

```

@Page({...})

export class NewsFeedPage {

constructor() {

this.items = [];

for (var i = 0; i < 30; i++) {

this.items.push( this.items.length );

}

doInfinite(infiniteScroll) {

console.log('Begin async operation');

setTimeout(() => {

for (var i = 0; i < 30; i++) {

this.items.push( this.items.length );

}

console.log('Async operation has ended');

infiniteScroll.complete();

}, 500);

}

```

### Infinite Scroll Content

```

<ion-content>

<ion-infinite-scroll (infinite)="doInfinite($event)">

<ion-infinite-scroll-content

loadingSpinner="bubbles"

loadingText="Loading more data...">

</ion-infinite-scroll-content>

</ion-infinite-scroll>

</ion-content>

```

### 實例方法

#### `state()`

#### `complete()`

調用該方法來表示加載已經完成。

#### `enable(shouldEnable)`

調用該方法能夠設置InfiniteScroll是否處於激活狀態。當shouldEnable是`false`時，InfiniteScroll將被禁用。

- shouldEnable `boolean`

### 屬性

- threshold `string`

設置滾動觸發的闕值。例如距離底部還有10%的時候觸發事件。

### 輸出事件

- infinite

## [Input](http://ionicframework.com/docs/v2/api/components/input/Input/)

`ion-input`擁有不少文本類型，例如：`text` `password` `email` `number` `search` `tel` 和 `url`。

## [IonicApp](http://ionicframework.com/docs/v2/api/components/app/IonicApp/)

### 實例方法

#### `setTitle(val)`

設置網頁標題。

#### `isProd()`

返回是否生產模式。默認爲`false`。能夠在`@App`中的`config`中配置。

#### `isScrolling()`

返回布爾值。

#### `getComponent()`

獲取給定鍵值的組件。

## [Item](http://ionicframework.com/docs/v2/api/components/item/Item/)

Item的使用有三種方法：

- 使用`<ion-item>`來建立一個不可點擊文本。

- 使用 `<button ion-item>`。一般這個元素會有一個(click)處理程序

- 使用`<a ion-item>`當項目須要包含一個連接。

## [ItemSliding](http://ionicframework.com/docs/v2/api/components/item/ItemSliding/)

建立一個可滑動的Item。

```

<ion-list>

<ion-item-sliding *ngFor="#item of items">

</button>

<ion-item-options>

<button (click)="favorite(item)">Favorite</button>

<button (click)="share(item)">Share</button>

</ion-item-options>

</ion-item-sliding>

</ion-list>

```

## [Keyboard](http://ionicframework.com/docs/v2/api/util/Keyboard/)

Keyboard容許你使用ionic鍵盤插件提供的鍵盤事件。

```

export class MyClass{

constructor(keyboard: Keyboard){

this.keyboard = keyboard;

}

```

### 實例方法

- `isOpen()`

檢查鍵盤是否打開，返回一個boolean

- `onClose(callback)`

當鍵盤被關閉時回調一個callback

返回callback

- `close()`

關閉鍵盤

## [List](http://ionicframework.com/docs/v2/api/components/list/List/)

### 實例方法

#### `enableSlidingItems(shouldEnable)`

是否開啓滑動。

#### closeSlidingItems()

關閉滑動做

## [LocalStorage](http://ionicframework.com/docs/v2/api/platform/storage/LocalStorage/)

LocalStorage的儲存引擎使用瀏覽器的本地儲存系統儲存鍵值對。

它只應用於臨時儲存的數據。

爲保證長期的儲存，請使用sqlstorage引擎將數據儲存在一個文件。

```

import {Page, Storage, LocalStorage} from 'ionic-angular';

@Page({

});

export class MyClass{

constructor(){

this.local = new Storage(LocalStorage);

this.local.set('didTutorial', true);

}

```

### 實例方法

#### `get(key)`

經過鍵名來訪問LocalStorage中儲存的值。

#### `set(key,value)`

經過鍵值對儲存到LocalStorage

#### `remove(key)`

刪除LocalStorage中儲存的鍵值對

#### `clear()`

## [Menu](http://ionicframework.com/docs/v2/api/components/menu/Menu/)

Menu是一個側滑菜單。

### 使用方法

Menu必須指定一個參考的`content`。

```

<ion-menu [content]="mycontent">

<ion-content>

<ion-list>

...

</ion-list>

</ion-content>

</ion-menu>

<ion-nav #mycontent [root]="rootPage"></ion-nav>

```

默認狀況下菜單在左邊滑動，你也可使用`side`屬性來讓它從右邊滑出。

```

<ion-menu side="right" [content]="mycontent">...</ion-menu>

```

若是你只是想簡單的使用menu那麼你可使用`menuToggle` `menuClose`來控制menu的滑出和收回。

```

Close Menu

</button>

<ion-icon name='menu'></ion-icon>

</button>

```

若是你有多個menu從同一邊滑出，你能夠經過id來控制。

```

<ion-menu id="authenticated" side="left" [content]="mycontent">...</ion-menu>

<ion-menu id="unauthenticated" side="left" [content]="mycontent">...</ion-menu>

<ion-nav #mycontent [root]="rootPage"></ion-nav>

```

enableAuthenticatedMenu() {

this.menu.enable(true, 'authenticated');

this.menu.enable(false, 'unauthenticated');

}

```

注意：若是你只有一個menu那麼請不用使用id控制。儘可能避免使用id。

### Menu Types

menu能夠設置顯示的類型。

- overlay是傳統的MD設計

- reveal是傳統的ios設計

默認狀況下，它們將自動使用當前平臺的類型。

注：原文中還提到了一個`push`，我試事後發現和`reveal`是同樣的，並且文章中也沒有對`push`進行過多的解釋。

### 實例方法

#### `open()`

打開菜單。返回一個`Promise`,當菜單被徹底打開時，你能夠執行一個事件。

#### `close(menuId)`

若是menuId爲空，那麼將關閉全部打開的菜單，若是menuId被設置，那麼將關閉指定的菜單。返回一個`Promise`

#### `toggle(menuId)`

菜單開關。若是菜單當前關閉，那麼將打開，若是菜單當前打開，將被關閉。

返回一個`Promise`。

#### `enable(menuId)`

當你有多個menu的時候，用於啓用或禁用menu。當你啓用一個menu那麼同方向的其餘menu將被禁用。

返回一個menu實例。

#### `swipeEnable(shouldEnable,menuId)`

#### `isOpen()`

返回一個布爾值來表示menu是否處於打開狀態

#### `isEnabled`

返回一個布爾值來表示menu是否被啓用

#### `get(menuId)`

返回一個menu實例，若是menuId的menu沒有找到，那麼將會返回`null`

#### `getMenus()`

返回menu實例數組

## [MenuClose](http://ionicframework.com/docs/v2/api/components/menu/MenuClose/)

該指令能夠放在任何按鈕，自動的關閉打開的菜單。

## [MenuToggle](http://ionicframework.com/docs/v2/api/components/menu/MenuToggle/)

該指令能夠放在任何按鈕，自動的開關menu。

## [Modals](http://ionicframework.com/docs/v2/api/components/modal/Modal/)

Modals是一個當前頁面上的內容窗口。一般它是用來作選擇或者編輯一個項目。

### 使用方法

```

import {Page, Modal, NavController, NavParams} from 'ionic-angular';

@Page(...)

class HomePage {

constructor(nav: NavController) {

this.nav = nav;

}

presentProfileModal() {

let profileModal = Modal.create(Profile, { userId: 8675309 });

this.nav.present(profileModal);

}

@Page(...)

class Profile {

constructor(params: NavParams) {

console.log('UserId', params.get('userId'));

}

```

### 靜態方法

#### create(componentType,data)

- componentType `any`

Modal類

- data `object`

傳給Modal的數據

### 實例方法

註明：本實例方法在當前英文文檔中沒有。

#### `onDismiss(call)`

當Modal被銷燬的時候執行的回調函數。

call是一個回調函數。

### 例子

```

import {IonicApp, Modal, Platform, NavController, NavParams, Page, ViewController} from 'ionic-angular';

@Page({

templateUrl: './build/pages/modals/basic/template.html'

})

export class BasicPage {

constructor(public nav: NavController) { }

openModal(characterNum) {

let modal = Modal.create(ModalsContentPage,{charNum:1});

this.nav.present(modal);

modal.onDismiss(data=>{console.log(data)});

}

@Page({

templateUrl: './build/pages/modals/basic/modal-content.html'

})

class ModalsContentPage {

character;

constructor(

public platform: Platform,

public params: NavParams,

public viewCtrl: ViewController

) {

this.character = this.params.get('charNum');

}

dismiss() {

this.viewCtrl.dismiss({a:1,b:2});

}

```

## Nav

這是一個基本的導航控制器。

### 使用方法

```

import {GettingStartedPage} from 'getting-started';

@App({

})

class MyApp {

constructor(){

this.rootPage = GettingStartedPage;

}

```

### Back navigation

`swipeBackEnabled`用來控制滑動返回。

```

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

```

下圖是一個App的架構

+-------+

| App |

+---+---+

<ion-app>

+------------+-------------+

| Ionic Nav Controller |

+------------+-------------+

<ion-nav>

Page 3 +--------------------+ LoginPage

Page 2 +--------------------+ |

Page 1 +--------------------+ | | +--------------------+

| | Header |<-----------------| Login |

+--------------------+ | | +--------------------+

| | | |<-----------------| |

| | | | | | | |

| +------------------|-+ | | |

| | Footer |-|-+ | |

| +------------------|-+ | |

+--------------------+ +--------------------+

+--------------------+ +--------------------+ +--------------------+

+--------------------+ | | | |

| | | | | |

| | +--------------------+ | |

+--------------------+ +--------------------+ +--------------------+

### 輸入屬性

- root `Page`

當前打開的頁面。

- swipeBackEnabled `boolean`

是否開啓滑動返回

## Navbar

### 輸入屬性

- hideBackButton `boolean`

是否隱藏回退鍵。

## NavController

### 注入NavController

```

class MyComponent {

constructor(nav: NavController) {

this.nav = nav;

}

```

### 頁面展現

頁面建立可使用`@Page`裝飾器。

當頁面被添加到navigation棧的時候，頁面就被展現了，使用`push()`方法。

頁面銷燬時將從navigation棧中移除（使用`pop()`或者`setRoot()`）。

### 生命週期

```

@Page({

})

class HelloWorld {

onPageLoaded() {

console.log("I'm alive!");

}

onPageWillLeave() {

console.log("Looks like I'm about to leave :(");

}

```

- `onPageLoaded`

當頁面加載時運行，每被建立而且添加到DOM樹時執行一次。若是頁面切換可是被緩存下來，再次進入此頁面時，將不會觸發該事件。

- `onPageWillEnter`

當頁面即將進入併成爲活動頁時觸發

- `onPageDidEnter`

當頁面徹底進入成爲活動頁面時執行，不論是否被緩存，都將執行。

- `onPageWillLeave`

頁面即將成爲非活動頁時觸發

- `onPageDidLeave`

當頁面切換，該頁面已經成爲非活動頁時觸發

- `onPageWillUnload`

當頁面即將被銷燬時執行

- `onPageDidUnload`

當頁面已經被銷燬時執行

### 實例方法

#### `setRoot(page,params,opts)`

設置當前navigation棧的根節點

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

|page|Type|頁面的類型|

|params|object|傳遞到下一個視圖的參數|

|opts|object|過渡選項|

返回：`Promise`

#### `setPages(pages,opts)`

用來設置navigation棧。你能夠用它改變navigation的歷史記錄和切換動畫。

```

import {Page, NavController} from 'ionic-angular';

import {Info} from '../info/info';

import {List} from '../list/list';

import {Detail} from '../detail/detail';

export class Home {

constructor(nav: NavController) {

this.nav = nav;

}

setPages() {

this.nav.setPages([{

page: Info

}, {

page: List,

params: {tags: 'css'}

}, {

page: Detail,

params: {id: 325}

}], {

animate: true

});

}

```

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

|pages|array<Type>|頁面類型和參數組成的數組|

|opts|object|過渡選項|

返回：`Promise`

#### `push(page,params,opts)`

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

|page|Type|頁面的類型|

|params|object|傳遞到下一個視圖的參數|

|opts|object|過渡選項|

返回：`Promise`

#### `present(enteringView,opts)`

添加組件到navigation棧中，例如：`ActionSheet` `Alert` `Modal`等

```

class MyClass{

constructor(nav: NavController) {

this.nav = nav;

}

presentModal() {

let modal = Modal.create(ProfilePage);

this.nav.present(modal);

}

```

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

|enteringView| ViewController | 組件的控制器 |

|opts|object|過渡選項|

返回：`Promise`

#### `insert(insertIndex,page,params,opts)`

插入一個視圖到navigation棧。

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

| insertIndex | number | 插入的索引 |

|page|Type|頁面的類型|

|params|object|傳遞到下一個視圖的參數|

|opts|object|過渡選項|

返回：`Promise`

#### `insertPages(insertIndex,insertPages,opts)`

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

| insertIndex | number | 插入的索引 |

| insertPages |array<Type>|頁面類型和參數組成的數組|

|opts|object|過渡選項|

返回：`Promise`

#### `pop(opts)`

若是你想後退，那麼能夠調用該方法。

```

class SecondView{

constructor(nav:NavController){

this.nav = nav;

}

goBack(){

this.nav.pop();

}

```

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

|opts|object|過渡選項|

#### `popToRoot(opts)`

直接跳轉到根導航，無論在navigite棧中有多少視圖。

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

|opts|object|過渡選項|

#### `popTo(view,opts)`

將當前視圖到該視圖的歷史記錄彈出，並跳轉到指定視圖。

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

|view|ViewController|

|opts|object|過渡選項|

#### `remove(startIndex,removeCount,opts)`

刪除棧裏指定索引段的元素。

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

|startIndex|number|從棧中刪除頁面的起始索引，默認爲最後一頁的索引|

|removeCount|number|從棧中刪除多少個頁面，默認爲1|

|opts|object|過渡選項|

返回一個`Promise`

#### `canSwipeBack()`

返回一個布爾值，來表示當前是否支持滑動返回

#### `canGoBack()`

返回一個布爾值，來表示是否還有可返回的頁面

#### `getByIndex(index)`

返回指定索引的組件

#### `getActive()`

返回當前活動頁面的視圖控制器

#### `isActive(view)`

返回一個布爾值，來表示該視圖是不是當前活動頁面。

#### `getPrevious(view)`

返回指定頁面的視圖控制器

#### `first()`

返回當前棧中第一個的視圖控制器

#### `last()`

返回當前棧中最後一個的視圖控制器

#### `indexOf(view)`

返回某個視圖在棧中的索引

#### `length()`

返回棧的長度。

#### `rootNav()`

返回`NavController`

## NavParams

相似於在Ionic V1版本中的`$stateParams`用來在頁面中傳遞數據。

```

export class MyClass{

constructor(params: NavParams){

this.params = params;

// userParams is an object we have in our nav-parameters

this.params.get('userParams');

}

```

### 實例方法

#### `data()`

#### `get(parameter)`

- parameter `string`

是數據中鍵值對中的鍵名。

## NavPop

返回上一頁的指令

```

<ion-content>

</ion-content>

```

## NavPush

跳轉到一個新的頁面。

```

```

## Option

`ion-option`是`ion-select`的子組件。

### 輸入

- checked `boolean`

是否被選中

- value `any`

該選項的值

## Page

`@Page`裝飾器包含`IONIC_DIRECTIVE`中全部的組件和指令以及Angular中的`CORS_DIRECTIVES`和 `FORM_DIRECTIVES`。因此你只須要將你自定義的指令和組件依賴進去就好。

### 使用方法

```

@Page({

<ion-content>

I am a page!

</ion-content>

})

class MyPage {}

```

此時`@Page`已經幫你把那些指令注入進去了，因此你無需再次增長`directives`數組。

若是你須要自定義一個組件，並且須要依賴某個指令時，你須要手動加入。

```

import {IONIC_DIRECTIVES} from 'ionic-angular';

@Component({

selector: 'my-component'

<ion-checkbox></ion-checkbox>

</div>`,

directives: [IONIC_DIRECTIVES]

})

class MyCustomCheckbox {}

```

或者你能夠指定明確的指令來獲取，並單獨添加它。

```

import {Checkbox, Icon} from 'ionic-angular'

@Component({

...

directives: [Checkbox, Icon]

})

```

然而，使用`IONIC_DIRECTIVES`不會產生額外的性能開銷，因此，又有什麼理由不用它呢。

## Platform

用來返回當前平臺信息。它比ionic V1版本複雜，並非單純的返回一個平臺信息，還有更多的信息，例如：設備系統，手機仍是平板，移動app仍是瀏覽器。

### 實例方法

#### `is(platformName)`

返回一個布爾值來表示當前平臺是不是`platformName`。

注意：同一個環境下，當platformName不一樣時，可能不止有一個返回`true`。例如，Ipad可能返回`true`的platformName有：`mobile` `ios` `ipad` `tablet`等。

可能有的平臺名有：

- android

- cordova

- core

- ios

- ipad

- iphone

- mobile

- mobileweb

- phablet

- tablet

- windows

```

import {Platform} from 'ionic-angular';

@Page({...})

export MyPage {

constructor(platform: Platform) {

if (platform.is('ios')) {

// what ever you need to do

// if the platform is ios

}

```

### `platforms()`

返回一個平臺數組。

同一個環境下，可能會返回多個平臺信息。

### `versions(platformName)`

返回一個包含系統相關信息的對象。

### `ready()`

返回一個`Promise`來表示設備是否準備好開始運行程序了。

### `setDir(dir)`

設置文字的排列方向。

- dir `string`

ltr表明從左到右的排列

rtl表明從右到左的排列

### `dir()`

返回文字排列方向。

### `isRTL()`

返回一個布爾值，來表示當前文本是不是從右到左排列的。

### `setLang(language)`

設置語言。

- language `string`

`en-US` `en-GB` `ar` `de` `zh` `es-MX`等。

#### `lang()`

返回當前語言

## RadioButton

單選按鈕必須包含在`<ion-list radio-group>`中，而且至少有兩個。

### 使用方法

```

<ion-item>

<ion-label>Radio Label</ion-label>

<ion-radio value="radio-value"></ion-radio>

</ion-item>

```

### 輸出事件

- select

選擇的時候執行的事件。

## RadioGroup

```

<ion-list radio-group [(ngModel)]="autoManufacturers">

<ion-list-header>

Auto Manufacturers

</ion-list-header>

<ion-item>

<ion-label>Cord</ion-label>

<ion-radio value="cord"></ion-radio>

</ion-item>

<ion-item>

<ion-label>Duesenberg</ion-label>

<ion-radio value="duesenberg"></ion-radio>

</ion-item>

<ion-item>

<ion-label>Hudson</ion-label>

<ion-radio value="hudson"></ion-radio>

</ion-item>

<ion-item>

<ion-label>Packard</ion-label>

<ion-radio value="packard"></ion-radio>

</ion-item>

<ion-item>

<ion-label>Studebaker</ion-label>

<ion-radio value="studebaker"></ion-radio>

</ion-item>

</ion-list>

```

### 輸出事件

- change

在選擇改變時執行的事件。

## [Refresher](http://ionicframework.com/docs/v2/api/components/refresher/Refresher/)

用來實現下拉刷新功能。

### 使用方法

```

<ion-content>

<ion-refresher (refresh)="doRefresh($event)">

<ion-refresher-content></ion-refresher-content>

</ion-refresher>

</ion-content>

```

@Page({...})

export class NewsFeedPage {

doRefresh(refresher) {

console.log('Begin async operation', refresher);

setTimeout(() => {

console.log('Async operation has ended');

refresher.complete();

}, 2000);

}

```

### Refresher Content

```

<ion-content>

<ion-refresher (refresh)="doRefresh($event)">

<ion-refresher-content

pullingIcon="arrow-dropdown"

pullingText="Pull to refresh"

refreshingSpinner="circles"

refreshingText="Refreshing...">

</ion-refresher-content>

</ion-refresher>

</ion-content>

```

### 實例方法

#### `state`

獲取當前的刷新狀態。狀態有：

- `inactive`

沒有下拉，被隱藏狀態

- `pulling`

用戶正在下拉，但還沒鬆手。

- `cancelling`

用戶下拉放手後，沒有達到觸發刷新的距離的狀態。

- `ready`

用戶下拉的足夠遠，若是放手就開始更新。

- `refreshing`

正在刷新，等待異步操做結束。

- `completing`

刷新成功的狀態。

#### `startY`

返回用戶開始下拉的Y座標

#### `currentY`

返回當前觸摸或鼠標事件的Y座標。

#### `deltaY`

返回開始下拉的Y座標距離當前觸摸或鼠標事件的Y座標的差值。

#### `progress`

0表明尚未到達某個距離，不觸發刷新，1表明已經到達某個距離，鬆手觸發刷新。

#### `complete()`

當你異步操做完成後，調用這個函數來關閉刷新動畫，同時改變了狀態。

#### `cancel()`

將狀態從`refreshing`改變成`cancelling`

### 輸入

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

|pullMin|number|用戶最小的下拉距離，默認爲60|

|pullMax|number|用戶下拉的最大距離，超過該距離後，自動進入刷新。默認最大距離爲：pullmin+60。

|closeDuration|number|多少毫秒它須要關閉組件，默認爲280|

| snapbackDuration|number|默認280|

|enabled|boolean|是否啓用該組件|

### 輸出事件

- `refresh`

刷新事件。不要忘記在異步事件執行完成後調用`complete()`

- `pulling`

當用戶下拉的時候調用。

- `start`

當用戶開始下拉的時候調用。

## Scroll

```

<ion-scroll scrollX="true">

</ion-scroll>

<ion-scroll scrollY="true">

</ion-scroll>

<ion-scroll scrollX="true" scrollY="true">

</ion-scroll>

```

### 屬性

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

|scrollX|boolean|是否啓用x軸滾動|

|scrollY|boolean|是否啓用Y軸滾動|

|zoom|boolean|是否啓動縮放|

|maxZoom|number|設置縮放的最大級別

## Searchbar

管理一個搜索欄，能夠搜索或篩選項目的顯示。

### 使用方法

```

<ion-searchbar

[(ngModel)]="myInput"

[hideCancelButton]="shouldHideCancel"

(input)="onInput($event)"

(cancel)="onCancel($event)">

</ion-searchbar>

```

### 輸入屬性

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

|cancelButtonText|string|設置取消按鈕的文本值|

| hideCancelButton|boolean|是否隱藏取消按鈕|

|debounce|number|每次鍵入字符等待觸發事件的時間有多長，默認爲250毫秒|

| placeholder|string|佔位提示符|

|ngModel|any|搜索欄值的雙向綁定|

### 輸出事件

- `input`

當Searchbar中值變化的時候觸發

- `blur`

當Searchbar失去焦點的時候觸發

- `focus`

當Searchbar獲得焦點的時候觸發

- `cancel`

當取消按鈕被點擊的時候觸發

- `clear`

當清空按鈕被點擊的時候觸發

## Segment

Segment是一組按鈕，容許用戶和一組按鈕進行交互，相似於標籤頁的功能。

### 使用方法

```

<ion-segment [(ngModel)]="relationship" (change)="onSegmentChanged($event)" danger>

<ion-segment-button value="friends">

Friends

</ion-segment-button>

<ion-segment-button value="enemies">

Enemies

</ion-segment-button>

</ion-segment>

```

### 輸出事件

- `change`

當按鈕改變時觸發事件。

## Select

`ion-select`和html中的select有點類似。

### 單選

```

<ion-item>

<ion-label>Gender</ion-label>

<ion-select [(ngModel)]="gender">

<ion-option value="f" checked="true">Female</ion-option>

<ion-option value="m">Male</ion-option>

</ion-select>

</ion-item>

```

### 多選

```

<ion-item>

<ion-label>Toppings</ion-label>

<ion-select [(ngModel)]="toppings" multiple="true">

<ion-option>Bacon</ion-option>

<ion-option>Black Olives</ion-option>

<ion-option>Extra Cheese</ion-option>

<ion-option>Mushrooms</ion-option>

<ion-option>Pepperoni</ion-option>

<ion-option>Sausage</ion-option>

</ion-select>

<ion-item>

```

### Alert按鈕

默認爲`Cancel`和`OK`

```

<ion-select okText="Okay" cancelText="Dismiss">

...

</ion-select>

```

### Alert選項

使用`alertOptions`能夠覆蓋Alert的配置。例如能夠更改標題。

```

<ion-select [alertOptions]="alertOptions">

...

</ion-select>

this.alertOptions = {

title: 'Pizza Toppings',

subTitle: 'Select your toppings'

};

```

### 輸入

- multiple `boolean`

是否能夠接受多個選項

- disabled `boolean`

組件是否被禁用

### 輸出事件

- change

當選項改變時觸發

- cancel

取消時觸發

## ShowWhen

用來表示某平臺或者某屏幕方向時時顯示該元素。

```

I am visible on Android!

</div>

I am visible on iOS!

</div>

I am visible on Android and iOS!

</div>

I am visible on Portrait!

</div>

I am visible on Landscape!

</div>

```

## Slides

Slides是基於Swiper.js實現的。

```

@Page({

<ion-slides pager (change)="onSlideChanged($event)" (move)="onSlideMove($event)">

<ion-slide>

<h3>Thank you for choosing the Awesome App!</h3>

<p>

The number one app for everything awesome.

</p>

</ion-slide>

<ion-slide>

<h3>Using Awesome</h3>

<h5>Just three steps:</h5>

<ol>

<li>Be awesome</li>

<li>Stay awesome</li>

<li>There is no step 3</li>

</ol>

</div>

</ion-slide>

<ion-slide>

<h3>Any questions?</h3>

</ion-slide>

</ion-slides>

})

```

### 輸入

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

|pager|boolean|是否顯示索引點|

| options|any|任何Slider須要配置的參數，能夠參考[http://www.idangero.us/swiper/api/](http://www.idangero.us/swiper/api/)|

|zoom|number|該組件是否能夠縮放|

|zoomDuration|number|縮放該組件須要多長時間|

|zoomMax|number|最大的縮放|

### 輸出事件

- change

當滑塊變化的時候觸發

- slideChangeStart

當滑塊開始更改時觸發

- move

當滑塊移動時觸發

## SqlStorage

SqlStorage採用SQLite查詢。在文件系統中持久的儲存數據，這是首選的儲存引擎。引擎支持簡單的鍵值對存儲和完整的Sql查詢。

```

let storage = new Storage(SqlStorage, options);

storage.set('name', 'Max');

storage.get('name').then((name) => {

});

// Sql storage also exposes the full engine underneath

storage.query('insert into projects(name, data) values("Cool Project", "blah")');

storage.query('select * from projects').then((resp) => {})

```

### 靜態方法

#### `BACKUP_LOCAL()`

#### `BACKUP_LIBRARY()`

#### `BACKUP_DOCUMENTS()`

### 實例方法

#### `query(query,params)`

在數據庫中執行SQL操做。

- query `string`

sql字符串

- params `array`

返回一個`Promise`

#### `get(key)`

從數據庫中獲取給定的鍵名所對應的鍵值。

返回一個`Promise`

#### `set(key,value)`

從數據庫中插入鍵值對

返回一個`Promise`

#### `remove(key)`

從數據庫中刪除鍵值對。

返回一個`Promise`

#### `clear()`

清空數據庫

## Tab

底部的標籤按鈕

### 使用方法

通常`ion-tab`都有一個`[root]`值來加載該組件。

```

<ion-tabs>

<ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="chat"><ion-tab>

</ion-tabs>

import {Chat} from '../chat/chat';

export class Tabs {

constructor(){

// here we'll set the property of chatRoot to

// the imported class of Chat

this.chatRoot = Chat

}

```

### 輸入

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

|root|Page|設置根頁面|

|rootParams|object|傳遞數據到該頁面|

|tabTitle|string|頁面標題

|tabIcon|string|頁面圖標|

|tabBadge|string|設置徽章

|tabBadgeStyle|string|設置徽章顏色

### 輸出事件

- select

選中時觸發。

## Tabs

### 實例方法

#### `select(index)`

選中某個索引的選項卡

#### `getByIndex(index)`

返回一個和索引匹配的選項卡

#### `getSelected()`

返回當前選中的選項卡

### 輸入

| 屬性名稱 | 類型 |描述 |

| ------------- |:------------- |:------------- |

|selectedIndex|number|第一次加載時默認選中的選項卡，若是不提供那麼默認是0

| preloadTabs|boobean|是否預加載全部標籤|

| tabbarIcons|string|這個屬性是過期的，請使用TabBarLayout代替，設置圖標的位置`top` `bottom` `left` `right` `hide`|

|tabbarLayout|string|設置tabbar的佈局 `icon-top` `icon-left` `icon-right` `icon-bottom` `icon-hide` `title-hide`|

|tabbarPlacement|string|設置tabbar的位置：`top` `bottom`

### 輸出事件

- change

當標籤頁改變時觸發

## TextArea

```

<ion-item>

<ion-label stacked>Message</ion-label>

<ion-textarea [(ngModel)]="msg"></ion-textarea>

</ion-item>

```

## Toggle

```

<ion-list>

<ion-item>

<ion-label>Pepperoni</ion-label>

<ion-toggle [(ngModel)]="pepperoni"></ion-toggle>

</ion-item>

<ion-item>

<ion-label>Sausage</ion-label>

<ion-toggle [(ngModel)]="sausage" disabled="true"></ion-toggle>

</ion-item>

<ion-item>

<ion-label>Mushrooms</ion-label>

<ion-toggle [(ngModel)]="mushrooms"></ion-toggle>

</ion-item>

</ion-list>

```

### 屬性

- checked `boolean`

是否打開

- disabled `boolean`

是否禁用

### 輸入

- checked

- disabled

### 輸出事件

- change

切換時觸發

## Toolbar

Toolbar是一條在上面或者在下面的通用欄。

### 使用方法

```

<ion-toolbar>

<ion-title>My Toolbar Title</ion-title>

</ion-toolbar>

<ion-toolbar>

<ion-title>I'm a subheader</ion-title>

</ion-toolbar>

<ion-content></ion-content>

<ion-toolbar position="bottom">

<ion-title>I'm a subfooter</ion-title>

</ion-toolbar>

<ion-toolbar position="bottom">

<ion-title>I'm a footer</ion-title>

</ion-toolbar>

```

### 屬性

- position `any`

設置toolbar的位置，默認是`top`

## ViewController

訪問當前視圖的功能和信息

### 使用方法

```

import {Page, ViewController} from 'ionic-angular';

@Page....

export class MyPage{

constructor(viewCtrl: ViewController){

this.viewCtrl = viewCtrl;

}

```

### 實例方法

- `componentType()`

- `subscribe()`

- `onDismiss()`

- `dismiss()`

- `enableBack(Check)`

檢查navigation棧中是否能夠返回

- `index()`

查詢在當前視圖navigation棧中的索引

- `isFirst()`

返回一個布爾值，來表示是不是棧中第一個視圖

- `isLast()`

- `hasNavbar()`

返回一個布爾值，來表示是否擁有navBar

- `setBackButtonText(backButtonText)`

更改後退按鈕的文本

- `showBackButton(Set)`

設置當前視圖的後退按鈕是否可見

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。