操作表控制器

操作表是一个对话框，可让用户从一组选项中进行选择。它会显示在应用内容的顶部，并且必须在用户恢复与应用的互动之前由用户手动关闭。危险（破坏性）选项在ios模式下显而易见。有很多方法可以取消操作页面，例如点击背景幕或在桌面上点击转义键。

从一个按钮数组创建一个操作表，每个按钮包括其文本的属性，以及可选的处理程序和角色。如果处理程序返回false，则不会关闭操作工作表。操作表还可以选择具有标题，子标题和图标。

按钮的角色属性可能是破坏性的或取消的。没有角色属性的按钮将具有该平台的默认外观。具有取消角色的按钮将始终作为底部按钮加载，无论它们在阵列中的位置。所有其他按钮将按照它们添加到按钮阵列的顺序显示。注意：我们建议破坏性按钮始终是阵列中的第一个按钮，使其成为顶部按钮。另外，如果通过点击背景来解除操作表，那么它将从具有取消角色的按钮触发处理程序。

您可以在create方法的第一个参数中传递所有操作工作表的选项：ActionSheet.create（opts）。否则，操作表的实例有添加选项的方法，如setTitle（）或addButton（）。

使用

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();
 }
}

效果：

静态成员

config

create(opts)

打开一个带有标题，子标题和一系列按钮的动作表

高级

ActionSheet创建选项

ActionSheet 按钮选项

取消和异步导航

在一个动作表被关闭后，应用程序可能还需要根据处理程序的逻辑转换到另一个页面。 然而，由于在大致相同的时间触发了多个转换，导航控制器很难对可能异步启动的多个转换进行动画生成动画。 这在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，所以操作表不会自动关闭。 相反，您现在可以完全控制操作表完成转换的时间，以及在开始新的转换之前等待操作表完成转换的功能。

Sass 变量

• All

Sass Variables

• iOS

• Material Design

• Windows Platform

相关

操作表组件文档