ion-modal
Modal是一个出现在应用程序内容顶部的对话框,在恢复交互之前必须被应用程序取消。当有很多选项可供选择时,或者在列表中筛选项目时,以及在许多其他用例时,它作为选择组件非常有用。
解雇
创建后,可以通过调用
把()
方法在模态控制器上。的
ondiddismiss.
可以调用函数以在拆除模态后执行操作。
定制
Modal使用限定范围的封装,这意味着它会通过在运行时为每个样式添加一个额外的类来自动限定CSS的范围。在CSS中重写作用域选择器需要 高特异性 选择器。
我们建议将自定义类传递给
CSSCLASS.
在
创建
方法,并使用该方法向宿主元素和内部元素添加自定义样式。这个属性还可以接受由空格分隔的多个类。查看
CSSCLASS.
.
/*不工作-不够具体*/
.modal-wrapper
{
背景
:
#222
;
}
/*工作-在cssClass中传递“my-custom-class”来增加特异性*/
.my-custom-class .modal-wrapper
{
背景
:
#222
;
}
任何定义的
.my-定制课程
{
- 背景
:
#222
;
}
如果你正在构建一个Ionic Angular应betway东盟体育app用,样式需要添加到一个全局样式表文件中。读
风格安排 在下面的角度部分以获取更多信息。
ion-modal
在假设堆叠模块的规模下工作是相同的。结果,每个后续的模态都没有盒子阴影和反背景不透明度0
.这是为了避免阴影和背景随着每一个添加模态而变暗的效果。可以通过设置——不必
和——backdrop-opacity
CSS变量:
ION-MODAL.STACK-MOLAL { - 框阴影:0 28px 48px RGBA(0,0,0,0.4);- 无透明度:var( - 离子背景不透明度,0.32);}
界面
modalOptions.
接口
modalOptions.
<
T
延伸
Componentref.
=
Componentref.
>
{
组件
:
T
;
组成份额
?
:
ComponentProps
<
T
>
;
呈现
?
:
HTMLElement
;
ShowBackDrop.
?
:
布尔
;
backdropDismiss
?
:
布尔
;
CSSCLASS.
?
:
细绳
|
细绳
[
]
;
动画
?
:
布尔
;
swipeToClose
?
:
布尔
;
模式
?
:
模式
;
keyboardClose
?
:
布尔
;
id
?
:
细绳
;
htmlAttributes
?
:
ModalAttributes
;
肠炎
?
:
AmimationBuilder.
;
leaveAnimation
?
:
AmimationBuilder.
;
}
ModalAttributes
接口
ModalAttributes
延伸
JSXBase.
.
HTMLAttributes
<
HTMLElement
>
{
}
使用
进口
{
组件
}
从
“@angular /核心”
;
进口
{
ModalController.
}
从
“@betway东盟体育appionic /角”
;
进口
{
modalpage.
}
从
'../modal/modal.page'
;
@
组件
(
{
选择器
:
'Modal-example'
,
templateUrl
:
“modal-example.html”
,
样式堡垒
:
[
'./modal-example.css'
]
}
)
出口
类
ModalExample
{
构造函数
(
公共
ModalController.
:
ModalController.
)
{
}
异步
TheertModal.
(
)
{
Const.
模态
=
等待
这个
.
ModalController.
.
创建
(
{
组件
:
modalpage.
,
CSSCLASS.
:
'我的自定义班'
}
)
;
返回
等待
模态
.
展示
(
)
;
}
}
进口
{
组件
,
输入
}
从
“@angular /核心”
;
@
组件
(
{
选择器
:
“modal-page”
,
}
)
出口
类
modalpage.
{
构造函数
(
)
{
}
}
如果您需要在您的模态组件中使用包装器元素,我们建议使用
< div class = " ion-page”>
这样组件的尺寸仍然可以正确计算。
通过数据
在创建模态期间,数据可以通过
组成份额
.上面的例子可以包含数据:
异步
TheertModal.
(
)
{
Const.
模态
=
等待
这个
.
ModalController.
.
创建
(
{
组件
:
modalpage.
,
CSSCLASS.
:
'我的自定义班'
,
组成份额
:
{
'名'
:
'道格拉斯'
,
“姓”
:
“亚当斯”
,
'中间初始'
:
“N”
}
}
)
;
返回
等待
模态
.
展示
(
)
;
}
将数据传递到
组成份额
,将它设置为
@输入
:
出口
类
modalpage.
{
// ComponentProps传递的数据
@
输入
(
)
名
:
细绳
;
@
输入
(
)
姓
:
细绳
;
@
输入
(
)
middleInitial
:
细绳
;
}
解雇一个模态
可以通过在模态控制器上调用DISPISS方法并可选择从模态传递任何数据来解除模态。
出口
类
modalpage.
{
......
驳回
(
)
{
//使用注入的ModalController
//可以“解散”自己,并可选地传递回数据
这个
.
ModalController.
.
驳回
(
{
“开除”
:
真的
}
)
;
}
}
删除后,数据可以通过
onWillDismiss
或者
ondiddismiss.
创建后附加到模态:
Const.
{
数据
}
=
等待
模态
.
onWillDismiss
(
)
;
安慰
.
日志
(
数据
)
;
懒惰的装载
当懒惰加载模态时,重要的是要注意,在打开时不会加载模态,而是加载导入模块的模块时的模块。
例如,假设存在一个
CalendarComponent.
和一个
EventModal
.控件中的一个按钮显示该模式
CalendarComponent.
.在角,
EventModalModule
需要包括在
CalendarComponentModule.
由于模态在中创建
CalendarComponent.
:
进口
{
NgModule
}
从
“@angular /核心”
;
进口
{
commonmodule.
}
从
'@ Angular / Common'
;
进口
{
betway东盟体育appIonicModule
}
从
“@betway东盟体育appionic /角”
;
进口
{
CalendarComponent.
}
从
”。/ calendar.component '
;
进口
{
EventModalModule
}
从
'../modals/event/event.module'
;
@
NgModule
(
{
宣言
:
[
CalendarComponent.
]
,
进口
:
[
betway东盟体育appIonicModule
,
commonmodule.
,
EventModalModule
]
,
出口
:
[
CalendarComponent.
]
}
)
出口
类
CalendarComponentModule.
{
}
可擦拭模块
iOS模式的模块具有能够以卡式呈现并刷新以关闭。卡式演示文稿和刷新到闭合手势不是互斥的,这意味着您可以选择和选择要使用的功能。例如,您可以使用无法刷新的卡式模态或可以刷新的全尺寸模态。
在iphone大小的设备上运行的卡片样式模态没有背景。因此,
——backdrop-opacity
变量不会有任何效果。
如果您正在创建的应用程序使用
ion-tabs
,建议你得到父母
离子路由器出口
使用
this.routerOutlet.parentOutlet.nativeEl
,否则选项卡在模式打开时不会缩小。
进口
{
IonRoutOutlet.
}
从
“@betway东盟体育appionic /角”
;
构造函数
(
私人
routerOutlet
:
IonRoutOutlet.
)
{
}
异步
TheertModal.
(
)
{
Const.
模态
=
等待
这个
.
ModalController.
.
创建
(
{
组件
:
modalpage.
,
CSSCLASS.
:
'我的自定义班'
,
swipeToClose
:
真的
,
呈现
:
这个
.
routerOutlet
.
母语
}
)
;
返回
等待
模态
.
展示
(
)
;
}
在大多数情况下,使用
离子路由器出口
元素作为
呈现
很好。在您在另一个模态中呈现的卡式模态的情况下,您应该通过顶级
ion-modal
元素作为
呈现
.
进口
{
ModalController.
}
从
“@betway东盟体育appionic /角”
;
构造函数
(
私人
ModalController.
:
ModalController.
)
{
}
异步
TheertModal.
(
)
{
Const.
模态
=
等待
这个
.
ModalController.
.
创建
(
{
组件
:
modalpage.
,
CSSCLASS.
:
'我的自定义班'
,
swipeToClose
:
真的
,
呈现
:
等待
这个
.
ModalController.
.
getTop
(
)
//获取最顶层的离子模态
}
)
;
返回
等待
模态
.
展示
(
)
;
}
风格安排
在Angular中,特定页面的CSS仅作用于该页面的元素。虽然Modal可以在页面中显示,但是
ion-modal
元素附加到当前页之外。这意味着任何自定义样式都需要放在全局样式表文件中。在离子角起动betway东盟体育app器中,这可能是
src / global.scss
文件,或者您可以通过
增加了
风格
构建选项
angular.json
.
customElements
.
定义
(
“modal-page”
,
类
延伸
HTMLElement
{
connectedCallback
(
)
{
这个
.
innerHTML
=
`
Modal Header Modal Content
`
;
}
}
)
;
函数
TheertModal.
(
)
{
//使用`modal-page`组件创建模态
Const.
modalElement
=
文档
.
createElement
(
'离子模态'
)
;
modalElement
.
组件
=
“modal-page”
;
modalElement
.
CSSCLASS.
=
'我的自定义班'
;
//呈现模态
文档
.
身体
.
列表末尾
(
modalElement
)
;
返回
modalElement
.
展示
(
)
;
}
如果您需要在您的模态组件中使用包装器元素,我们建议使用
< div class = " ion-page”>
这样组件的尺寸仍然可以正确计算。
通过数据
在创建模态期间,数据可以通过
组成份额
.上面的例子可以包含数据:
Const.
modalElement
=
文档
.
createElement
(
'离子模态'
)
;
modalElement
.
组件
=
“modal-page”
;
modalElement
.
CSSCLASS.
=
'我的自定义班'
;
modalElement
.
组成份额
=
{
'名'
:
'道格拉斯'
,
“姓”
:
“亚当斯”
,
'中间初始'
:
“N”
}
;
将数据传递到
组成份额
,查询
莫代尔页面
:
customElements
.
定义
(
“modal-page”
,
类
延伸
HTMLElement
{
connectedCallback
(
)
{
Const.
modalElement
=
文档
.
QuerySelector.
(
'离子模态'
)
;
安慰
.
日志
(
modalElement
.
组成份额
.
名
)
;
......
}
}
解雇一个模态
通过调用DISMISS方法并可选择从模态传递任何数据,可以解除模态。
异步
函数
解雇
(
)
{
等待
模态
.
驳回
(
{
“开除”
:
真的
}
)
;
}
删除后,数据可以通过
onWillDismiss
或者
ondiddismiss.
创建后附加到模态:
Const.
{
数据
}
=
等待
modalElement
.
onWillDismiss
(
)
;
安慰
.
日志
(
数据
)
;
可擦拭模块
iOS模式的模块具有能够以卡式呈现并刷新以关闭。卡式演示文稿和刷新到闭合手势不是互斥的,这意味着您可以选择和选择要使用的功能。例如,您可以使用无法刷新的卡式模态或可以刷新的全尺寸模态。
在iphone大小的设备上运行的卡片样式模态没有背景。因此,
——backdrop-opacity
变量不会有任何效果。
Const.
modalElement
=
文档
.
createElement
(
'离子模态'
)
;
modalElement
.
组件
=
“modal-page”
;
modalElement
.
CSSCLASS.
=
'我的自定义班'
;
modalElement
.
swipeToClose
=
真的
;
modalElement
.
呈现
=
文档
.
QuerySelector.
(
“ion-nav”
)
;
在大多数情况下,使用
ion-nav
元素作为
呈现
很好。如果你在一个模态中呈现一个卡片样式的模态,你应该在最上面传递
ion-modal
元素作为
呈现
.
Const.
modalElement
=
文档
.
createElement
(
'离子模态'
)
;
modalElement
.
组件
=
“modal-page”
;
modalElement
.
CSSCLASS.
=
'我的自定义班'
;
modalElement
.
swipeToClose
=
真的
;
modalElement
.
呈现
=
等待
ModalController.
.
getTop
(
)
;
//获取最顶层的离子模态
/*使用useIonModal钩子*/
进口
反应
,
{
useState
}
从
'反应'
;
进口
{
IonButton
,
离子联系
,
IonPage
,
useIonModal
}
从
“@betway东盟体育appionic /反应”
;
Const.
身体
:
反应
.
足球俱乐部
<
{
数
:
数量
;
onDismiss
:
(
)
=>
无效
;
奴役
:
(
)
=>
无效
;
}
>
=
(
{
数
,
onDismiss
,
奴役
}
)
=>
(
<
div
>
数数:
{
数
}
<
IonButton
扩张
=
"
块
"
onClick
=
{
(
)
=>
奴役
(
)
}
>
增量计算
IonButton
>
<
IonButton
扩张
=
"
块
"
onClick
=
{
(
)
=>
onDismiss
(
)
}
>
关闭
IonButton
>
div
>
)
;
Const.
ModalExample
:
反应
.
足球俱乐部
=
(
)
=>
{
Const.
[
数
,
setcount.
]
=
useState
(
0
)
;
Const.
手柄征收
=
(
)
=>
{
setcount.
(
数
+
1
)
;
}
;
Const.
handleDismiss
=
(
)
=>
{
驳回
(
)
;
}
;
/** *第一个参数是要显示的组件,第二个是要传递的道具*/
Const.
[
展示
,
驳回
]
=
useIonModal
(
身体
,
{
数
,
onDismiss
:
handleDismiss
,
奴役
:
手柄征收
,
}
)
;
返回
(
<
IonPage
>
<
离子联系
全屏
>
<
IonButton
扩张
=
"
块
"
onClick
=
{
(
)
=>
{
展示
(
{
CSSCLASS.
:
'我的课'
,
}
)
;
}
}
>
显示模式
IonButton
>
<
div
>
数:
{
数
}
div
>
离子联系
>
IonPage
>
)
;
}
;
/ *使用离子阳极组分* /
进口
反应
,
{
useState
}
从
'反应'
;
进口
{
IonModal
,
IonButton
,
离子联系
}
从
“@betway东盟体育appionic /反应”
;
出口
Const.
ModalExample
:
反应
.
足球俱乐部
=
(
)
=>
{
Const.
[
showModal
,
setshowmodal.
]
=
useState
(
假
)
;
返回
(
<
离子联系
>
<
IonModal
isOpen
=
{
showModal
}
CSSCLASS.
=
'
my-custom-class
'
>
<
p
>
这是模态内容
p
>
<
IonButton
onClick
=
{
(
)
=>
setshowmodal.
(
假
)
}
>
关闭模态
IonButton
>
IonModal
>
<
IonButton
onClick
=
{
(
)
=>
setshowmodal.
(
真的
)
}
>
显示模式
IonButton
>
离子联系
>
)
;
}
;
可擦拭模块
iOS模式的模块具有能够以卡式呈现并刷新以关闭。卡式演示文稿和刷新到闭合手势不是互斥的,这意味着您可以选择和选择要使用的功能。例如,您可以使用无法刷新的卡式模态或可以刷新的全尺寸模态。
在iphone大小的设备上运行的卡片样式模态没有背景。因此,
——backdrop-opacity
变量不会有任何效果。
Const.
应用程序
:
反应
.
足球俱乐部
=
(
)
=>
{
Const.
REREREREF.
=
useRef
<
htmlionrouteroutletelement.
|
空值
>
(
空值
)
;
返回
(
<
IonApp
>
<
IonReactRouter
>
<
IonRoutOutlet.
裁判
=
{
REREREREF.
}
>
<
路线
路径
=
"
/家庭
"
使成为
=
{
(
)
=>
<
首页
路由器
=
{
REREREREF.
.
当前的
}
/>
}
确切的
=
{
真的
}
/>
IonRoutOutlet.
>
IonReactRouter
>
IonApp
>
)
}
;
......
接口
HomePageProps
{
路由器
:
htmlionrouteroutletelement.
|
空值
;
}
Const.
首页
:
反应
.
足球俱乐部
<
HomePageProps
>
=({路由器})=>
{
Const.
[
showModal
,
setshowmodal.
]
=
useState
(
假
)
;
返回
(
......
<
IonModal
isOpen
=
{
showModal
}
CSSCLASS.
=
'
my-custom-class
'
swipeToClose
=
{
真的
}
呈现
=
{
路由器
||
不明确的
}
ondiddismiss.
=
{
(
)
=>
setshowmodal.
(
假
)
}
>
<
p
>
这是模态内容
p
>
IonModal
>
......
)
;
}
;
在大多数情况下,设置一个参考
IonRoutOutlet.
并传递裁判
当前的
价值
呈现
很好。在您在另一个模态中呈现的卡式模态的情况下,您应该通过顶级
ion-modal
裁判的
呈现
.
<
IonModal
裁判
=
{
Firstmodalref.
}
isOpen
=
{
showModal
}
CSSCLASS.
=
'
my-custom-class
'
swipeToClose
=
{
真的
}
呈现
=
{
路由器
||
不明确的
}
ondiddismiss.
=
{
(
)
=>
setshowmodal.
(
假
)
}
>
<
p
>
这是模态内容
p
>
<
IonButton
onClick
=
{
(
)
=>
setShow2ndModal
(
真的
)
}
>
展示第二次莫代尔
IonButton
>
<
IonButton
onClick
=
{
(
)
=>
setshowmodal.
(
假
)
}
>
关闭模态
IonButton
>
IonModal
>
<
IonModal
isOpen
=
{
show2ndModal
}
CSSCLASS.
=
'
my-custom-class
'
呈现
=
{
Firstmodalref.
.
当前的
}
swipeToClose
=
{
真的
}
ondiddismiss.
=
{
(
)
=>
setShow2ndModal
(
假
)
}
>
<
p
>
这是更多的模态内容
p
>
<
IonButton
onClick
=
{
(
)
=>
setShow2ndModal
(
假
)
}
>
关闭模态
IonButton
>
IonModal
>
进口
{
组件
,
h
}
从
'@模板/核心'
;
进口
{
ModalController.
}
从
'@betway东盟体育app离子/核心'
;
@
组件
(
{
标签
:
'Modal-example'
,
styleurl.
:
“modal-example.css”
}
)
出口
类
ModalExample
{
异步
TheertModal.
(
)
{
Const.
模态
=
等待
ModalController.
.
创建
(
{
组件
:
“page-modal”
,
CSSCLASS.
:
'我的自定义班'
}
)
;
等待
模态
.
展示
(
)
;
}
}
进口
{
组件
,
h
}
从
'@模板/核心'
;
@
组件
(
{
标签
:
“page-modal”
,
styleurl.
:
“page-modal.css”
,
}
)
出口
类
PageModal.
{
使成为
(
)
{
返回
[
<
离子清单
>
<
ion-item
>
<
ion-label
>
文档
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
反馈
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
设置
ion-label
>
ion-item
>
离子清单
>
]
;
}
}
如果您需要在您的模态组件中使用包装器元素,我们建议使用
< div class = " ion-page”>
这样组件的尺寸仍然可以正确计算。
通过数据
在创建模态期间,数据可以通过
组成份额
.上面的例子可以包含数据:
异步
TheertModal.
(
)
{
Const.
模态
=
等待
ModalController.
.
创建
(
{
组件
:
“page-modal”
,
CSSCLASS.
:
'我的自定义班'
,
组成份额
:
{
'名'
:
'道格拉斯'
,
“姓”
:
“亚当斯”
,
'中间初始'
:
“N”
}
}
)
;
等待
模态
.
展示
(
)
;
}
将数据传递到
组成份额
,将每个人设置为一个
@Prop
:
进口
{
组件
,
道具
,
h
}
从
'@模板/核心'
;
@
组件
(
{
标签
:
“page-modal”
,
styleurl.
:
“page-modal.css”
,
}
)
出口
类
PageModal.
{
// ComponentProps传递的数据
@
道具
(
)
名
:
细绳
;
@
道具
(
)
姓
:
细绳
;
@
道具
(
)
middleInitial
:
细绳
;
}
解雇一个模态
可以通过在模态控制器上调用DISPISS方法并可选择从模态传递任何数据来解除模态。
出口
类
modalpage.
{
......
驳回
(
数据
?
:
任何
)
{
//关闭最近的模态并返回数据
(
这个
.
埃尔
.
最近的
(
'离子模态'
)
作为
任何
)
.
驳回
(
{
“开除”
:
真的
}
)
;
}
}
删除后,数据可以通过
onWillDismiss
或者
ondiddismiss.
创建后附加到模态:
Const.
{
数据
}
=
等待
模态
.
onWillDismiss
(
)
;
安慰
.
日志
(
数据
)
;
可擦拭模块
iOS模式的模块具有能够以卡式呈现并刷新以关闭。卡式演示文稿和刷新到闭合手势不是互斥的,这意味着您可以选择和选择要使用的功能。例如,您可以使用无法刷新的卡式模态或可以刷新的全尺寸模态。
在iphone大小的设备上运行的卡片样式模态没有背景。因此,
——backdrop-opacity
变量不会有任何效果。
进口
{
组件
,
元素
,
h
}
从
'@模板/核心'
;
进口
{
ModalController.
}
从
'@betway东盟体育app离子/核心'
;
@
组件
(
{
标签
:
'Modal-example'
,
styleurl.
:
“modal-example.css”
}
)
出口
类
ModalExample
{
@
元素
(
)
埃尔
:
任何
;
异步
TheertModal.
(
)
{
Const.
模态
=
等待
ModalController.
.
创建
(
{
组件
:
“page-modal”
,
CSSCLASS.
:
'我的自定义班'
,
swipeToClose
:
真的
,
呈现
:
这个
.
埃尔
.
最近的
(
'离子路由器 - 出口'
)
,
}
)
;
等待
模态
.
展示
(
)
;
}
}
在大多数情况下,使用
离子路由器出口
元素作为
呈现
很好。在您在另一个模态中呈现的卡式模态的情况下,您应该通过顶级
ion-modal
元素作为
呈现
.
异步
TheertModal.
(
)
{
Const.
模态
=
等待
ModalController.
.
创建
(
{
组件
:
“page-modal”
,
CSSCLASS.
:
'我的自定义班'
,
swipeToClose
:
真的
,
呈现
:
等待
ModalController.
.
getTop
(
)
//获取最顶层的离子模态
}
)
;
等待
模态
.
展示
(
)
;
}
<
模板
>
<
离子标题
>
<
离子工具栏
>
<
ion-title
>
{{标题}}
ion-title
>
离子工具栏
>
离子标题
>
<
离子内容
类
=
"
离子填充
"
>
{{ 内容 }}
离子内容
>
模板
>
<
脚本
>
进口
{
离子联系
,
IonHeader
,
IonTitle
,
Iontoolbar.
}
从
'@betway东盟体育app ionic / vue'
;
进口
{
defineComponent
}
从
'vue'
;
出口
默认
defineComponent
(
{
姓名
:
'模态'
,
道具
:
{
标题
:
{
类型
:
字符串
,
默认
:
'超级模态'
}
,
}
,
数据
(
)
{
返回
{
内容
:
“内容”
,
}
}
,
成分
:
{
离子联系
,
IonHeader
,
IonTitle
,
Iontoolbar.
}
}
)
;
脚本
>
<
模板
>
<
ion-page
>
<
离子内容
类
=
"
离子填充
"
>
<
ion-button
@click
=
"
OpenModal.
"
>
开模态
ion-button
>
离子内容
>
ion-page
>
模板
>
<
脚本
>
进口
{
IonButton
,
离子联系
,
IonPage
,
ModalController.
}
从
'@betway东盟体育app ionic / vue'
;
进口
莫代尔
从
”。/ modal.vue '
出口
默认
{
成分
:
{
IonButton
,
离子联系
,
IonPage
}
,
方法
:
{
异步
OpenModal.
(
)
{
Const.
模态
=
等待
ModalController.
.
创建
(
{
组件
:
莫代尔
,
CSSCLASS.
:
'我的自定义班'
,
组成份额
:
{
标题
:
“新标题”
}
,
}
)
返回
模态
.
展示
(
)
;
}
,
}
,
}
脚本
>
开发人员还可以直接在其模板中使用此组件:
<
模板
>
<
ion-button
@click
=
"
Setopen(真实)
"
>
显示模式
ion-button
>
<
ion-modal
:开了
=
"
isOpenRef
"
css类
=
"
my-custom-class
"
@didDismiss
=
"
setopen(false)
"
>
<
莫代尔
:数据
=
"
数据
"
>
莫代尔
>
ion-modal
>
模板
>
<
脚本
>
进口
{
IonModal
,
IonButton
}
从
'@betway东盟体育app ionic / vue'
;
进口
{
defineComponent
,
裁判
}
从
'vue'
;
进口
莫代尔
从
”。/ modal.vue '
出口
默认
defineComponent
(
{
成分
:
{
IonModal
,
IonButton
,
莫代尔
}
,
设置
(
)
{
Const.
isOpenRef
=
裁判
(
假
)
;
Const.
setOpen
=
(
状态
:
布尔
)
=>
isOpenRef
.
价值
=
状态
;
Const.
数据
=
{
内容
:
'新内容'
}
;
返回
{
isOpenRef
,
setOpen
,
数据
}
}
}
)
;
脚本
>
如果您在模态组件内部需要一个包装元素,我们建议使用
< ion-page >
这样组件的尺寸仍然可以正确计算。
可擦拭模块
iOS模式的模块具有能够以卡式呈现并刷新以关闭。卡式演示文稿和刷新到闭合手势不是互斥的,这意味着您可以选择和选择要使用的功能。例如,您可以使用无法刷新的卡式模态或可以刷新的全尺寸模态。
在iphone大小的设备上运行的卡片样式模态没有背景。因此,
——backdrop-opacity
变量不会有任何效果。
<
模板
>
<
ion-page
>
<
离子内容
>
<
ion-button
@click
=
"
Setopen(真实)
"
>
显示模式
ion-button
>
<
ion-modal
:开了
=
"
isOpenRef
"
css类
=
"
my-custom-class
"
:刷新关闭
=
"
真的
"
: presenting-element
=
"
$父。$ refs.ionrouteroutlet
"
@didDismiss
=
"
setopen(false)
"
>
<
莫代尔
:数据
=
"
数据
"
>
莫代尔
>
ion-modal
>
离子内容
>
ion-page
>
模板
>
<
脚本
l
=
"
TS.
"
>
进口
{
IonModal
,
IonButton
,
离子联系
,
IonPage
}
从
'@betway东盟体育app ionic / vue'
;
进口
{
defineComponent
,
裁判
}
从
'vue'
;
进口
莫代尔
从
”。/ modal.vue '
出口
默认
defineComponent
(
{
成分
:
{
IonModal
,
IonButton
,
莫代尔
,
离子联系
,
IonPage
}
,
设置
(
)
{
Const.
isOpenRef
=
裁判
(
假
)
;
Const.
setOpen
=
(
状态
:
布尔
)
=>
isOpenRef
.
价值
=
状态
;
Const.
数据
=
{
内容
:
'新内容'
}
;
返回
{
isOpenRef
,
setOpen
,
数据
}
}
}
)
;
脚本
>
特性
动画 |
|
---|---|
描述 |
如果 |
属性 |
动画 |
类型 |
布尔 |
默认的 |
真的 |
backdropDismiss |
|
描述 |
如果 |
属性 |
背面解雇 |
类型 |
布尔 |
默认的 |
真的 |
组件 |
|
描述 |
要显示在模态内部的组件。 |
属性 |
组件 |
类型 |
功能|htmlelement |null |细绳 |
组成份额 |
|
描述 |
要传递给模态组件的数据。 |
类型 |
Undefined | {[key: string]:任意;} |
CSSCLASS. |
|
描述 |
申请自定义CSS的其他类。如果提供多个类,则应通过空格分隔。 |
属性 |
css类 |
类型 |
字符串|字符串[] |不明确的 |
肠炎 |
|
描述 |
显示模态时使用的动画。 |
类型 |
((baseEl:任何,选择?:任何)=>Animation) | undefined |
htmlAttributes |
|
描述 |
要传递给模态的其他属性。 |
类型 |
ModalAttributes |未定义 |
keyboardClose |
|
描述 |
如果 |
属性 |
keyboard-close |
类型 |
布尔 |
默认的 |
真的 |
leaveAnimation |
|
描述 |
当模态被解雇时使用动画。 |
类型 |
((baseEl:任何,选择?:任何)=>Animation) | undefined |
模式 |
|
描述 |
该模式确定要使用的平台样式。 |
属性 |
模式 |
类型 |
“ios”|“MD” |
呈现 |
|
描述 |
表示模态的元素。这用于卡片显示效果,并将多个模态叠加在一起。仅适用于iOS模式。 |
类型 |
HTMLElement |未定义 |
ShowBackDrop. |
|
描述 |
如果 |
属性 |
展示背景 |
类型 |
布尔 |
默认的 |
真的 |
swipeToClose |
|
描述 |
如果 |
属性 |
swipe-to-close |
类型 |
布尔 |
默认的 |
假 |
事件
姓名 | 描述 |
---|---|
Ionmodaldiddismiss |
在莫代尔解雇后发出。 |
Ionmodaldidpresent |
在模态出现后触发。 |
ionModalWillDismiss |
在模态解散之前发出。 |
ionModalWillPresent |
在模态提出之前发出。 |
方法
驳回 |
|
---|---|
描述 |
取消模态覆盖后,它已经被提出。 |
签名 |
解雇(数据?:任何,角色?:String |未定义)=> promise |
ondiddismiss. |
|
描述 |
返回一个承诺,该承诺在模态被解散时解析。 |
签名 |
ondiddismiss |
onWillDismiss |
|
描述 |
返回一个承诺,该承诺将在模态关闭时解析。 |
签名 |
onwilldismiss |
展示 |
|
描述 |
在创建后呈现模态叠加。 |
签名 |
呈现()=>承诺 |
CSS自定义属性
姓名 | 描述 |
---|---|
——backdrop-opacity |
背景的不透明度 |
- 背景 |
模态内容的背景 |
- 边框颜色 |
模态内容的边框颜色 |
——这个特性 |
模态内容的边界半径 |
——边框样式 |
模态内容的边框样式 |
——边框宽度 |
模态内容的边框宽度 |
——高度 |
莫代尔的高度 |
——max-height |
模态的最大高度 |
——max-width |
模态的最大宽度 |
- 米高 |
模态的最小高度 |
——min-width |
模态的最小宽度 |
——宽度 |
模态的宽度 |