ion-action-sheet
动作表单是一个显示一组选项的对话框。它出现在应用程序的内容之上，必须由用户手动删除，然后才能恢复与应用程序的交互
ios
模式。有多种方法可以关闭动作表单，包括点击背景或按下桌面的退出键。
按钮
一个按钮的
角色
属性可以是
具有破坏性的
或
取消
．没有role属性的按钮将具有平台的默认查找。按钮的
取消
角色将始终作为底部按钮加载，无论它们在数组中的哪个位置。所有其他按钮将按照它们被添加到的顺序显示
按钮
数组中。注意:我们建议这样做
具有破坏性的
按钮总是数组中的第一个按钮，使它们成为最上面的按钮。此外，如果动作表单通过点击背景而被解除，那么它将从具有取消角色的按钮触发处理程序。
定制
Action Sheet使用限定范围的封装，这意味着它会通过在运行时为每个样式添加一个额外的类来自动限定CSS的范围。在CSS中重写作用域选择器需要 高特异性 选择器。
我们建议将自定义类传递给
cssClass
在
创建
方法，并使用该方法向宿主元素和内部元素添加自定义样式。这个属性还可以接受由空格分隔的多个类。查看
cssClass
．
/*不工作-不够具体*/
.action-sheet-group
｛
背景
：
# e5e5e5
；
｝
/*工作-在cssClass中传递“my-custom-class”来增加特异性*/
.my-custom-class .action-sheet-group
｛
背景
：
# e5e5e5
；
｝
复制
复制
任何定义的
.my-custom-class
｛
——背景
：
# e5e5e5
；
｝
复制
复制
如果你正在构建一个Ionic Angular应betway东盟体育app用，样式需要添加到一个全局样式表文件中。读
风格的位置 在下面的Angular部分中了解更多信息。
接口
ActionSheetButton
接口
ActionSheetButton
｛
文本
？
：
字符串
；
角色
？
：
“取消”
|
“破坏性的”
|
“选择”
|
字符串
；
图标
？
：
字符串
；
cssClass
？
：
字符串
|
字符串
［
］
；
处理程序
？
：
（
）
＝＞
布尔
|
无效
|
承诺
<
布尔
|
无效
>
；
｝
复制
复制
ActionSheetOptions
接口
ActionSheetOptions
｛
头
？
：
字符串
；
小标题
？
：
字符串
；
cssClass
？
：
字符串
|
字符串
［
］
；
按钮
：
（
ActionSheetButton
|
字符串
）
［
］
；
backdropDismiss
？
：
布尔
；
半透明的
？
：
布尔
；
动画
？
：
布尔
；
模式
？
：
模式
；
keyboardClose
？
：
布尔
；
id
？
：
字符串
；
htmlAttributes
？
：
ActionSheetAttributes
；
enterAnimation
？
：
AnimationBuilder
；
leaveAnimation
？
：
AnimationBuilder
；
｝
复制
复制
ActionSheetAttributes
接口
ActionSheetAttributes
扩展
JSXBase
．
HTMLAttributes
<
HTMLElement
>
｛
｝
复制
复制
使用
进口
｛
组件
｝
从
“@angular /核心”
；
进口
｛
ActionSheetController
｝
从
“@betway东盟体育appionic /角”
；
＠
组件
（
｛
选择器
：
“action-sheet-example”
，
templateUrl
：
“action-sheet-example.html”
，
styleUrls
：
［
”。/ action-sheet-example.css '
］
，
｝
）
出口
类
ActionSheetExample
｛
构造函数
（
公共
actionSheetController
：
ActionSheetController
）
｛
｝
异步
presentActionSheet
（
）
｛
常量
actionSheet
＝
等待
这
．
actionSheetController
．
创建
（
｛
头
：
“专辑”
，
cssClass
：
“my-custom-class”
，
按钮
：
［
｛
文本
：
“删除”
，
角色
：
“破坏性的”
，
图标
：
“垃圾”
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“删除点击”
）
；
｝
｝
，
｛
文本
：
“分享”
，
图标
：
“分享”
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“分享点击”
）
；
｝
｝
，
｛
文本
：
“玩(开模态)”
，
图标
：
“caret-forward-circle”
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“玩点”
）
；
｝
｝
，
｛
文本
：
“最喜欢的”
，
图标
：
“心”
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“最喜欢的点击”
）
；
｝
｝
，
｛
文本
：
“取消”
，
图标
：
“关闭”
，
角色
：
“取消”
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“取消点击”
）
；
｝
｝
］
｝
）
；
等待
actionSheet
．
现在
（
）
；
常量
｛
角色
｝
＝
等待
actionSheet
．
onDidDismiss
（
）
；
控制台
．
日志
（
'onDidDismiss resolve with role'
，
角色
）
；
｝
｝
复制
复制
风格的位置
在Angular中，特定页面的CSS仅作用于该页面的元素。虽然动作表单可以在页面内显示，但是
ion-action-sheet
元素附加到当前页之外。这意味着任何自定义样式都需要放在全局样式表文件中。在离子角起动betway东盟体育app器中，这可能是
src / global.scss
文件，或者您可以通过
增加了
风格
构建选项
angular.json
．
异步
函数
presentActionSheet
（
）
｛
常量
actionSheet
＝
文档
．
createElement
（
“ion-action-sheet”
）
；
actionSheet
．
头
＝
“专辑”
；
actionSheet
．
cssClass
＝
“my-custom-class”
；
actionSheet
．
按钮
＝
［
｛
文本
：
“删除”
，
角色
：
“破坏性的”
，
图标
：
“垃圾”
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“删除点击”
）
；
｝
｝
，
｛
文本
：
“分享”
，
图标
：
“分享”
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“分享点击”
）
；
｝
｝
，
｛
文本
：
“玩(开模态)”
，
图标
：
“caret-forward-circle”
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“玩点”
）
；
｝
｝
，
｛
文本
：
“最喜欢的”
，
图标
：
“心”
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“最喜欢的点击”
）
；
｝
｝
，
｛
文本
：
“取消”
，
图标
：
“关闭”
，
角色
：
“取消”
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“取消点击”
）
；
｝
｝
］
；
文档
．
身体
．
列表末尾
（
actionSheet
）
；
等待
actionSheet
．
现在
（
）
；
常量
｛
角色
｝
＝
等待
actionSheet
．
onDidDismiss
（
）
；
控制台
．
日志
（
'onDidDismiss resolve with role'
，
角色
）
；
｝
复制
复制
/*使用useIonActionSheet钩子*/
进口
反应
从
“反应”
；
进口
｛
IonButton
，
IonContent
，
IonPage
，
useIonActionSheet
，
｝
从
“@betway东盟体育appionic /反应”
；
常量
ActionSheetExample
：
反应
．
足球俱乐部
＝
（
）
＝＞
｛
常量
［
现在
，
驳回
］
＝
useIonActionSheet
（
）
；
返回
（
<
IonPage
>
<
IonContent
>
<
IonButton
扩大
＝
＂
块
＂
onClick
＝
｛
（
）
＝＞
现在
（
｛
按钮
：
［
｛
文本
：
“好吧”
｝
，
｛
文本
：
“取消”
｝
］
，
头
：
“动作表单”
｝
）
｝
>
显示ActionSheet
IonButton
>
<
IonButton
扩大
＝
＂
块
＂
onClick
＝
｛
（
）
＝＞
现在
（
［
｛
文本
：
“好吧”
｝
，
｛
文本
：
“取消”
｝
］
，
“动作表单”
）
｝
>
使用参数显示ActionSheet
IonButton
>
<
IonButton
扩大
＝
＂
块
＂
onClick
＝
｛
（
）
＝＞
｛
现在
（
［
｛
文本
：
“好吧”
｝
，
｛
文本
：
“取消”
｝
］
，
“动作表单”
）
；
setTimeout
（
驳回
，
3000
）
；
｝
｝
>
显示ActionSheet, 3秒后隐藏
IonButton
>
IonContent
>
IonPage
>
）
；
｝
；
复制
复制
/*使用与IonActionSheet组件*/
进口
反应
，
｛
useState
｝
从
“反应”
；
进口
｛
IonActionSheet
，
IonContent
，
IonButton
｝
从
“@betway东盟体育appionic /反应”
；
进口
｛
垃圾
，
分享
，
caretForwardCircle
，
心
，
关闭
｝
从
“betway东盟体育appionicons /图标”
；
出口
常量
ActionSheetExample
：
反应
．
足球俱乐部
＝
（
）
＝＞
｛
常量
［
showActionSheet
，
setShowActionSheet
］
＝
useState
（
假
）
；
返回
（
<
IonContent
>
<
IonButton
onClick
＝
｛
（
）
＝＞
setShowActionSheet
（
真正的
）
｝
扩大
＝
＂
块
＂
>
显示动作表单
IonButton
>
<
IonActionSheet
isOpen
＝
｛
showActionSheet
｝
onDidDismiss
＝
｛
（
）
＝＞
setShowActionSheet
（
假
）
｝
cssClass
＝
＇
my-custom-class
＇
按钮
＝
｛
［
｛
文本
：
“删除”
，
角色
：
“破坏性的”
，
图标
：
垃圾
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“删除点击”
）
；
｝
｝
，
｛
文本
：
“分享”
，
图标
：
分享
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“分享点击”
）
；
｝
｝
，
｛
文本
：
“玩(开模态)”
，
图标
：
caretForwardCircle
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“玩点”
）
；
｝
｝
，
｛
文本
：
“最喜欢的”
，
图标
：
心
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“最喜欢的点击”
）
；
｝
｝
，
｛
文本
：
“取消”
，
图标
：
关闭
，
角色
：
“取消”
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“取消点击”
）
；
｝
｝
］
｝
>
IonActionSheet
>
IonContent
>
）
；
｝
复制
复制
进口
｛
组件
，
h
｝
从
“@stencil /核心”
；
进口
｛
actionSheetController
｝
从
“@betway东盟体育appionic /核心”
；
＠
组件
（
｛
标签
：
“action-sheet-example”
，
styleUrl
：
“action-sheet-example.css”
｝
）
出口
类
ActionSheetExample
｛
异步
presentActionSheet
（
）
｛
常量
actionSheet
＝
等待
actionSheetController
．
创建
（
｛
头
：
“专辑”
，
cssClass
：
“my-custom-class”
，
按钮
：
［
｛
文本
：
“删除”
，
角色
：
“破坏性的”
，
图标
：
“垃圾”
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“删除点击”
）
；
｝
｝
，
｛
文本
：
“分享”
，
图标
：
“分享”
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“分享点击”
）
；
｝
｝
，
｛
文本
：
“玩(开模态)”
，
图标
：
“caret-forward-circle”
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“玩点”
）
；
｝
｝
，
｛
文本
：
“最喜欢的”
，
图标
：
“心”
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“最喜欢的点击”
）
；
｝
｝
，
｛
文本
：
“取消”
，
图标
：
“关闭”
，
角色
：
“取消”
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“取消点击”
）
；
｝
｝
］
｝
）
；
等待
actionSheet
．
现在
（
）
；
常量
｛
角色
｝
＝
等待
actionSheet
．
onDidDismiss
（
）
；
控制台
．
日志
（
'onDidDismiss resolve with role'
，
角色
）
；
｝
渲染
（
）
｛
返回
［
<
离子含量
>
<
ion-button
onClick
＝
｛
（
）
＝＞
这
．
presentActionSheet
（
）
｝
>
当前的行为表
ion-button
>
离子含量
>
］
；
｝
｝
复制
复制
<
模板
>
<
ion-button
@click
＝
＂
presentActionSheet
＂
>
显示动作表单
ion-button
>
模板
>
<
脚本
>
进口
｛
IonButton
，
actionSheetController
｝
从
“@betway东盟体育appionic / vue”
；
进口
｛
defineComponent
｝
从
“vue”
；
进口
｛
caretForwardCircle
，
关闭
，
心
，
垃圾
，
分享
｝
从
“betway东盟体育appionicons /图标”
；
出口
默认的
defineComponent
（
｛
组件
：
｛
IonButton
｝
，
方法
：
｛
异步
presentActionSheet
（
）
｛
常量
actionSheet
＝
等待
actionSheetController
．
创建
（
｛
头
：
“专辑”
，
cssClass
：
“my-custom-class”
，
按钮
：
［
｛
文本
：
“删除”
，
角色
：
“破坏性的”
，
图标
：
垃圾
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“删除点击”
）
｝
，
｝
，
｛
文本
：
“分享”
，
图标
：
分享
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“分享点击”
）
｝
，
｝
，
｛
文本
：
“玩(开模态)”
，
图标
：
caretForwardCircle
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“玩点”
）
｝
，
｝
，
｛
文本
：
“最喜欢的”
，
图标
：
心
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“最喜欢的点击”
）
｝
，
｝
，
｛
文本
：
“取消”
，
图标
：
关闭
，
角色
：
“取消”
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“取消点击”
）
｝
，
｝
，
］
，
｝
）
；
等待
actionSheet
．
现在
（
）
；
常量
｛
角色
｝
＝
等待
actionSheet
．
onDidDismiss
（
）
；
控制台
．
日志
（
'onDidDismiss resolve with role'
，
角色
）
；
｝
，
｝
，
｝
）
；
脚本
>
复制
复制
开发人员也可以在他们的模板中直接使用这个组件:
<
模板
>
<
ion-button
@click
＝
＂
setOpen(真正的)
＂
>
显示动作表单
ion-button
>
<
ion-action-sheet
:是开放的
＝
＂
isOpenRef
＂
头
＝
＂
专辑
＂
css类
＝
＂
my-custom-class
＂
:按钮
＝
＂
按钮
＂
@didDismiss
＝
＂
setOpen(假)
＂
>
ion-action-sheet
>
模板
>
<
脚本
>
进口
｛
IonActionSheet
，
IonButton
｝
从
“@betway东盟体育appionic / vue”
；
进口
｛
defineComponent
，
裁判
｝
从
“vue”
；
进口
｛
caretForwardCircle
，
关闭
，
心
，
垃圾
，
分享
｝
从
“betway东盟体育appionicons /图标”
；
出口
默认的
defineComponent
（
｛
组件
：
｛
IonActionSheet
，
IonButton
｝
，
设置
（
）
｛
常量
isOpenRef
＝
裁判
（
假
）
；
常量
setOpen
＝
（
状态
：
布尔
）
＝＞
isOpenRef
．
价值
＝
状态
；
常量
按钮
＝
［
｛
文本
：
“删除”
，
角色
：
“破坏性的”
，
图标
：
垃圾
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“删除点击”
）
｝
，
｝
，
｛
文本
：
“分享”
，
图标
：
分享
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“分享点击”
）
｝
，
｝
，
｛
文本
：
“玩(开模态)”
，
图标
：
caretForwardCircle
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“玩点”
）
｝
，
｝
，
｛
文本
：
“最喜欢的”
，
图标
：
心
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“最喜欢的点击”
）
｝
，
｝
，
｛
文本
：
“取消”
，
图标
：
关闭
，
角色
：
“取消”
，
处理程序
：
（
）
＝＞
｛
控制台
．
日志
（
“取消点击”
）
｝
，
｝
，
］
；
返回
｛
按钮
，
isOpenRef
，
setOpen
｝
｝
｝
）
；
脚本
>
复制
复制
属性
动画 |
|
|---|---|
| 描述 |
如果 |
| 属性 |
动画 |
| 类型 |
布尔 |
| 默认的 |
真正的 |
backdropDismiss |
|
| 描述 |
如果 |
| 属性 |
backdrop-dismiss |
| 类型 |
布尔 |
| 默认的 |
真正的 |
按钮 |
|
| 描述 |
动作表单的按钮数组。 |
| 类型 |
(字符串| ActionSheetButton) [] |
| 默认的 |
［］ |
cssClass |
|
| 描述 |
申请自定义CSS的其他类。如果提供了多个类，它们应该用空格分隔。 |
| 属性 |
css类 |
| 类型 |
String | String [] | undefined |
enterAnimation |
|
| 描述 |
当动作表单出现时使用的动画。 |
| 类型 |
((baseEl:任何,选择?：any) => Animation) | undefined |
头 |
|
| 描述 |
动作表单的标题。 |
| 属性 |
头 |
| 类型 |
字符串|未定义 |
htmlAttributes |
|
| 描述 |
要传递给动作表单的附加属性。 |
| 类型 |
ActionSheetAttributes |未定义 |
keyboardClose |
|
| 描述 |
如果 |
| 属性 |
keyboard-close |
| 类型 |
布尔 |
| 默认的 |
真正的 |
leaveAnimation |
|
| 描述 |
动作表单被取消时使用的动画。 |
| 类型 |
((baseEl:任何,选择?：any) => Animation) | undefined |
模式 |
|
| 描述 |
模式决定使用哪种平台样式。 |
| 属性 |
模式 |
| 类型 |
“ios”|“医学博士” |
小标题 |
|
| 描述 |
动作表单的副标题。 |
| 属性 |
分联箱 |
| 类型 |
字符串|未定义 |
半透明的 |
|
| 描述 |
如果 |
| 属性 |
半透明的 |
| 类型 |
布尔 |
| 默认的 |
假 |
事件
| 的名字 | 描述 |
|---|---|
ionActionSheetDidDismiss |
警报解除后发出。 |
ionActionSheetDidPresent |
在警报出现后发出。 |
ionActionSheetWillDismiss |
在警报解除前发出。 |
ionActionSheetWillPresent |
在警报出现之前发出。 |
方法
驳回 |
|
|---|---|
| 描述 |
在动作表单被呈现后，将其取消覆盖。 |
| 签名 |
解雇(数据?:任何作用?：字符串|未定义）＝＞承诺<布尔> |
onDidDismiss |
|
| 描述 |
返回一个承诺，该承诺在动作表单diddismiss时解析。 |
| 签名 |
onDidDismiss |
onWillDismiss |
|
| 描述 |
返回一个承诺，该承诺在动作表单将被解散时解析。 |
| 签名 |
onWillDismiss |
现在 |
|
| 描述 |
在创建后呈现动作表单覆盖。 |
| 签名 |
礼物()= > < >无效承诺 |
CSS自定义属性
| 的名字 | 描述 |
|---|---|
——backdrop-opacity |
背景的不透明度 |
——背景 |
动作表单组的背景 |
——button-background |
动作表单按钮的背景 |
——button-background-activated |
当按下时动作表单按钮的背景。注意:设置此参数会干扰材质设计波纹。 |
——button-background-activated-opacity |
按下时动作表单按钮背景的不透明度 |
——button-background-focused |
操作表单按钮的背景 |
——button-background-focused-opacity |
操作表单按钮背景的不透明度 |
——button-background-hover |
悬停时动作表单按钮的背景 |
——button-background-hover-opacity |
鼠标悬停时动作表单按钮背景的不透明度 |
——button-background-selected |
所选动作表单按钮的背景 |
——button-background-selected-opacity |
所选动作表单按钮背景的不透明度 |
——按钮的颜色 |
动作表单按钮的颜色 |
——button-color-activated |
按下动作表按钮时的颜色 |
——button-color-focused |
当选项卡切换到时动作表单按钮的颜色 |
——button-color-hover |
悬停时动作表单按钮的颜色 |
——button-color-selected |
所选动作表单按钮的颜色 |
——颜色 |
动作表单文本的颜色 |
——高度 |
动作表单的高度 |
——max-height |
动作表单的最大高度 |
——max-width |
动作表单的最大宽度 |
——最小高度 |
动作表单的最小高度 |
——min-width |
动作表单的最小宽度 |
——宽度 |
动作表单的宽度 |