ionic3 UI Components學習1：Action Sheets 動做面板

1.概述

ionic Apps由稱爲組件的高級構建塊組成。組件容許您快速構建應用程序的界面。Ionic配備了許多組件，包括模塊，彈出窗口和卡片。查看下面的示例，瞭解每一個組件的外觀，並瞭解如何使用每一個組件。熟悉了基礎知識後，能夠詳細閱讀API文檔，瞭解如何自定義每一個組件。

2.Action Sheets 動做面板

動做面板從設備屏幕的底部邊緣向上滑動，並顯示一組選項，能夠確認或取消操做。動做面板有時能夠用做菜單的替代，可是，它們不該該用於導航。

動做面板老是出如今頁面上的任何其餘組件之上，而且必須被解除後才能與底層內容交互。當它被觸發時，頁面的其他部分會變暗以給予操做表選項更多的焦點。
如下爲iOS 和 Android的表現樣式：

Demo 源代碼

3.ActionSheetController API文檔

一個動做面板是一個對話框，讓用戶從一組選項中進行選擇。它出如今應用程序內容的頂部，而且必須在用戶恢復與應用程序交互以前手動解除。危險（destructive）選項在ios模式中很明顯，例如Delete選項。有不少簡單的方法能夠取消操做表，例如點擊背景或在桌面上點擊退出鍵。

一個動做面板是從一個數組中建立的buttons，每一個按鈕都包含它的屬性text，還能夠有一個handler和role。若是處理程序返回，false則操做表不會被解除。一個動做面板選項也可任選地具備一個title，subTitle和一個icon。

按鈕的role屬性能夠是destructive或cancel。沒有角色屬性的按鈕將具備平臺的默認外觀。具備cancel角色的按鈕將始終做爲底部按鈕加載，不管它們在數組中的哪一個位置。全部其餘按鈕將按照它們添加到buttons 數組的順序顯示。注意：咱們建議destructive 按鈕始終是數組中的第一個按鈕，使它們成爲頂部按鈕。另外，若是經過點擊背景消除了動做面板，那麼它將從具備取消角色的按鈕中觸發處理程序。

您能夠在create方法的第一個參數中傳遞全部操做表的選項：ActionSheet.create(opts)。不然，操做表的實例會添加方法來添加選項，如setTitle()或addButton()。

3.1用法

import { ActionSheetController } from 'ionic-angular'

export class MyClass{

 constructor(public actionSheetCtrl: ActionSheetController) {}

 presentActionSheet() {
   let actionSheet = this.actionSheetCtrl.create({
     title: 'Modify your album',
     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');
         }
       }
     ]
   });

   actionSheet.present();
 }
}

3.2 Instance Members 實例成員

打開一個帶有標題，子標題和一組按鈕的動做面板

Param	Type	Details
opts	ActionSheetOptions	動做面板選項

3.3 Advanced 高級用法

ActionSheet 建立選項

Option	Type	Description
title	string	動做面板的標題。
subTitle	string	動做面板的子標題。
cssClass	string	自定義樣式的其餘類，以空格分隔。
enableBackdropDismiss	boolean	若是用戶點擊背景幕時動做面板是否應關閉。
buttons	array<any>	要顯示的一組按鈕。

ActionSheet按鈕選項

Option	Type	Description
text	string	按鈕文本。
icon	icon	按鈕圖標。
handler	any	點擊選項後的執行方法寫在這裏
cssClass	string	自定義樣式的附加類，由空格分隔。
role	string	如何顯示按鈕，destructive或者cancel。若是未提供角色，則將顯示沒有任何其餘樣式的按鈕。

3.4 Dismissing And Async Navigation 解除和異步導航

在動做面板被解除後，應用程序可能還須要根據處理程序的邏輯轉換到另外一個頁面。可是，因爲多個轉換大體同時發生，所以導航控制器難以清晰地動畫化可能異步啓動的多個轉換。這部分將進一步描述 Nav Transition Promises。對於動做面板而言，這意味着最好等待動做面板完成其轉換，而後在同一個導航控制器上開始新的轉換。

在下面的例子中，點擊按鈕後，它的處理程序等待異步操做完成，而後用它pop在同一個堆棧中導航回頁面。潛在的問題是異步操做可能在動做面板完成轉換以前完成。在這種狀況下，最好確保動做面板首先完成轉換，而後開始下一個轉換。

let actionSheet = this.actionSheetCtrl.create({
  title: 'Hello',
  buttons: [{
    text: 'Ok',
    handler: () => {
      // user has clicked the action sheet button
      // begin the action sheet's dimiss transition
      let navTransition = actionSheet.dismiss();

      // start some async method
      someAsyncOperation().then(() => {
        // once the async operation has completed
        // then run the next nav transition after the
        // first transition has finished animating out

        navTransition.then(() => {
          this.nav.pop();
        });
      });
      return false;
    }
  }]
});

actionSheet.present();

注意處理程序返回false很重要。按鈕處理程序的一個功能是，當按鈕被點擊時，它們會自動關閉動做面板，可是，咱們須要對轉換進行更多的控制。由於處理程序返回false，因此動做面板不會自動退出。相反，您如今能夠徹底控制完成轉換的時間，而且能夠等待動做面板在完成轉換以前完成轉換。

3.5 Sass Variables 變量

All

Property	Default	Description
$action-sheet-width	100%	動做面板的寬度。
$action-sheet-max-width	500px	動做面板的最大寬度。

iOS和Material Design 的 Sass Variables請點擊這裏