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请点击这里