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	要显示的一组按钮。

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