ion-popover
弹出窗口是一个出现在当前页面顶部的对话框。它可以用于任何事情，但通常用于不适合导航栏的溢出操作。
展示
要呈现弹出窗口，调用
现在
方法。为了将弹出窗口相对于所单击的元素定位，需要将单击事件传递到
现在
方法。如果事件没有被传递，弹出窗口将被定位在视口的中心。
定制
Popover使用作用域封装，这意味着它会通过在运行时为每个样式附加一个额外的类来自动限定CSS的范围。在CSS中重写作用域选择器需要 高特异性 选择器。
我们建议将自定义类传递给
cssClass
在
创建
方法，并使用该方法向宿主元素和内部元素添加自定义样式。这个属性还可以接受由空格分隔的多个类。查看
cssClass
．
/*不工作-不够具体*/
.popover-content
｛
背景
：
# 222
；
｝
/*工作-在cssClass中传递“my-custom-class”来增加特异性*/
.my-custom-class .popover-content
｛
背景
：
# 222
；
｝
复制
复制
任何定义的
.my-custom-class
｛
——背景
：
# 222
；
｝
复制
复制
如果你正在构建一个Ionic Angular应betway东盟体育app用，样式需要添加到一个全局样式表文件中。读
风格的位置 在下面的Angular部分中了解更多信息。
接口
PopoverOptions
接口
PopoverOptions
｛
组件
：
任何
；
componentProps
？
：
｛
［
关键
：
字符串
］
：
任何
｝
；
showBackdrop
？
：
布尔
；
backdropDismiss
？
：
布尔
；
半透明的
？
：
布尔
；
cssClass
？
：
字符串
|
字符串
［
］
；
事件
？
：
事件
；
动画
？
：
布尔
；
模式
？
：
“苹果”
|
“医学博士”
；
keyboardClose
？
：
布尔
；
id
？
：
字符串
；
htmlAttributes
？
：
PopoverAttributes
；
enterAnimation
？
：
AnimationBuilder
；
leaveAnimation
？
：
AnimationBuilder
；
｝
复制
复制
PopoverAttributes
接口
PopoverAttributes
扩展
JSXBase
．
HTMLAttributes
<
HTMLElement
>
｛
｝
复制
复制
使用
进口
｛
组件
｝
从
“@angular /核心”
；
进口
｛
PopoverController
｝
从
“@betway东盟体育appionic /角”
；
进口
｛
PopoverComponent
｝
从
“. . / . . /组件/窗/ popover.component”
；
＠
组件
(
｛
选择器
：
“popover-example”
，
templateUrl
：
“popover-example.html”
，
styleUrls
：
［
”。/ popover-example.css '
］
｝
)
出口
类
PopoverExample
｛
构造函数
(
公共
popoverController
：
PopoverController
)
｛
｝
异步
presentPopover
(
电动汽车
：
任何
)
｛
常量
弹出窗口
=
等待
这
．
popoverController
．
创建
(
｛
组件
：
PopoverComponent
，
cssClass
：
“my-custom-class”
，
事件
：
电动汽车
，
半透明的
：
真正的
｝
)
；
等待
弹出窗口
．
现在
(
)
；
常量
｛
角色
｝
=
等待
弹出窗口
．
onDidDismiss
(
)
；
控制台
．
日志
(
'onDidDismiss resolve with role'
，
角色
)
；
｝
｝
复制
复制
风格的位置
在Angular中，特定页面的CSS仅作用于该页面的元素。即使弹出窗口可以在一个页面内显示，
ion-popover
元素附加到当前页之外。这意味着任何自定义样式都需要放在全局样式表文件中。在离子角起动betway东盟体育app器中，这可能是
src / global.scss
文件，或者您可以通过
增加了
风格
构建选项
angular.json
．
类
PopoverExamplePage
扩展
HTMLElement
｛
构造函数
(
)
｛
超级
(
)
；
｝
connectedCallback
(
)
｛
这
．
innerHTML
=
｀
<离子含量> < ion-list > < ion-list-header > < ion-label >betway东盟体育app离子< / ion-label > < / ion-list-header > < ion-item按钮> < ion-label >项0 < / ion-label > < / ion-item > < ion-item按钮> < ion-label >第1项< / ion-label > < / ion-item > < ion-item按钮> < ion-label >第二项< / ion-label > < / ion-item > < ion-item按钮> < ion-label >项3 < / ion-label > < / ion-item > < / ion-list > < /离子含量>
｀
；
｝
｝
customElements
．
定义
(
“popover-example-page”
，
PopoverExamplePage
)
；
函数
presentPopover
(
电动汽车
)
｛
常量
弹出窗口
=
对象
．
分配
(
文档
．
createElement
(
“ion-popover”
)
，
｛
组件
：
“popover-example-page”
，
cssClass
：
“my-custom-class”
，
事件
：
电动汽车
，
半透明的
：
真正的
｝
)
；
文档
．
身体
．
列表末尾
(
弹出窗口
)
；
等待
弹出窗口
．
现在
(
)
；
常量
｛
角色
｝
=
等待
弹出窗口
．
onDidDismiss
(
)
；
控制台
．
日志
(
'onDidDismiss resolve with role'
，
角色
)
；
｝
复制
复制
/*使用useIonPopover钩子*/
进口
反应
从
“反应”
；
进口
｛
IonButton
，
IonContent
，
IonItem
，
IonList
，
IonListHeader
，
IonPage
，
useIonPopover
，
｝
从
“@betway东盟体育appionic /反应”
；
常量
PopoverList
：
反应
．
足球俱乐部
<
｛
onHide
：
(
)
＝＞
无效
；
｝
>
=
(
｛
onHide
｝
)
＝＞
(
<
IonList
>
<
IonListHeader
>
betway东盟体育app
IonListHeader
>
<
IonItem
按钮
>
了解离子betway东盟体育app
IonItem
>
<
IonItem
按钮
>
文档
IonItem
>
<
IonItem
按钮
>
展示
IonItem
>
<
IonItem
按钮
>
GitHub回购
IonItem
>
<
IonItem
行
=
＂
没有一个
＂
细节
=
｛
假
｝
按钮
onClick
=
｛
onHide
｝
>
关闭
IonItem
>
IonList
>
)
；
常量
PopoverExample
：
反应
．
足球俱乐部
=
(
)
＝＞
｛
常量
［
现在
，
驳回
］
=
useIonPopover
(
PopoverList
，
｛
onHide
：
(
)
＝＞
驳回
(
)
｝
)
；
返回
(
<
IonPage
>
<
IonContent
>
<
IonButton
扩大
=
＂
块
＂
onClick
=
｛
(
e
)
＝＞
现在
(
｛
事件
：
e
．
nativeEvent
，
｝
)
｝
>
显示弹出窗口
IonButton
>
IonContent
>
IonPage
>
)
；
｝
；
复制
复制
/*使用IonPopover组件*/
进口
反应
，
｛
useState
｝
从
“反应”
；
进口
｛
IonPopover
，
IonButton
｝
从
“@betway东盟体育appionic /反应”
；
出口
常量
PopoverExample
：
反应
．
足球俱乐部
=
(
)
＝＞
｛
常量
［
popoverState
，
setShowPopover
］
=
useState
(
｛
showPopover
：
假
，
事件
：
未定义的
｝
)
；
返回
(
<
>
<
IonPopover
cssClass
=
＇
my-custom-class
＇
事件
=
｛
popoverState
．
事件
｝
isOpen
=
｛
popoverState
．
showPopover
｝
onDidDismiss
=
｛
(
)
＝＞
setShowPopover
(
｛
showPopover
：
假
，
事件
：
未定义的
｝
)
｝
>
<
p
>
这是弹窗内容
p
>
IonPopover
>
<
IonButton
onClick
=
｛
(
e
：
任何
)
＝＞
｛
e
．
坚持
(
)
；
setShowPopover
(
｛
showPopover
：
真正的
，
事件
：
e
｝
)
｝
｝
>
显示弹出窗口
IonButton
>
>
)
；
｝
；
复制
复制
进口
｛
组件
，
h
｝
从
“@stencil /核心”
；
进口
｛
popoverController
｝
从
“@betway东盟体育appionic /核心”
；
＠
组件
(
｛
标签
：
“popover-example”
，
styleUrl
：
“popover-example.css”
｝
)
出口
类
PopoverExample
｛
异步
presentPopover
(
电动汽车
：
任何
)
｛
常量
弹出窗口
=
等待
popoverController
．
创建
(
｛
组件
：
“page-popover”
，
cssClass
：
“my-custom-class”
，
事件
：
电动汽车
，
半透明的
：
真正的
｝
)
；
等待
弹出窗口
．
现在
(
)
；
常量
｛
角色
｝
=
等待
弹出窗口
．
onDidDismiss
(
)
；
控制台
．
日志
(
'onDidDismiss resolve with role'
，
角色
)
；
｝
渲染
(
)
｛
返回
［
<
离子含量
>
<
ion-button
onClick
=
｛
(
电动汽车
)
＝＞
这
．
presentPopover
(
电动汽车
)
｝
>
现在的弹窗
ion-button
>
离子含量
>
］
；
｝
｝
复制
复制
进口
｛
组件
，
h
｝
从
“@stencil /核心”
；
＠
组件
(
｛
标签
：
“page-popover”
，
styleUrl
：
“page-popover.css”
，
｝
)
出口
类
PagePopover
｛
渲染
(
)
｛
返回
［
<
ion-list
>
<
ion-item
>
<
ion-label
>
文档
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
反馈
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
设置
ion-label
>
ion-item
>
ion-list
>
］
；
｝
｝
复制
复制
<
模板
>
<
离子含量
类
=
＂
ion-padding
＂
>
弹出窗口内容
离子含量
>
模板
>
<
脚本
>
进口
｛
IonContent
｝
从
“@betway东盟体育appionic / vue”
；
进口
｛
defineComponent
｝
从
“vue”
；
出口
默认的
defineComponent
(
｛
的名字
：
“窗”
，
组件
：
｛
IonContent
｝
｝
)
；
脚本
>
复制
复制
<
模板
>
<
ion-page
>
<
离子含量
类
=
＂
ion-padding
＂
>
<
ion-button
@click
=
＂
openPopover
＂
>
打开弹出窗口
ion-button
>
离子含量
>
ion-page
>
模板
>
<
脚本
>
进口
｛
IonButton
，
IonContent
，
IonPage
，
popoverController
｝
从
“@betway东盟体育appionic / vue”
；
进口
Popver
从
”。/ popover.vue '
出口
默认的
｛
组件
：
｛
IonButton
，
IonContent
，
IonPage
｝
，
方法
：
｛
异步
openPopover
(
电动汽车
：
事件
)
｛
常量
弹出窗口
=
等待
popoverController
．
创建
(
｛
组件
：
弹出窗口
，
cssClass
：
“my-custom-class”
，
事件
：
电动汽车
，
半透明的
：
真正的
｝
)
等待
弹出窗口
．
现在
(
)
；
常量
｛
角色
｝
=
等待
弹出窗口
．
onDidDismiss
(
)
；
控制台
．
日志
(
'onDidDismiss resolve with role'
，
角色
)
；
｝
，
｝
，
｝
脚本
>
复制
复制
开发人员也可以在他们的模板中直接使用这个组件:
<
模板
>
<
ion-button
@click
=
＂
setOpen(没错,事件美元)
＂
>
显示弹出窗口
ion-button
>
<
ion-popover
:是开放的
=
＂
isOpenRef
＂
css类
=
＂
my-custom-class
＂
:事件
=
＂
事件
＂
:半透明的
=
＂
真正的
＂
@didDismiss
=
＂
setOpen(假)
＂
>
<
弹出窗口
>
弹出窗口
>
ion-popover
>
模板
>
<
脚本
>
进口
｛
IonButton
，
IonPopover
｝
从
“@betway东盟体育appionic / vue”
；
进口
｛
defineComponent
，
裁判
｝
从
“vue”
；
进口
Popver
从
”。/ popover.vue '
出口
默认的
defineComponent
(
｛
组件
：
｛
IonButton
，
IonPopover
，
弹出窗口
｝
，
设置
(
)
｛
常量
isOpenRef
=
裁判
(
假
)
；
常量
事件
=
裁判
(
)
；
常量
setOpen
=
(
状态
：
布尔
，
电动汽车
？
：
事件
)
＝＞
｛
事件
．
价值
=
电动汽车
；
isOpenRef
．
价值
=
状态
；
｝
返回
｛
isOpenRef
，
setOpen
，
事件
｝
｝
｝
)
；
脚本
>
复制
复制
属性
动画 |
|
|---|---|
| 描述 |
如果 |
| 属性 |
动画 |
| 类型 |
布尔 |
| 默认的 |
真正的 |
backdropDismiss |
|
| 描述 |
如果 |
| 属性 |
backdrop-dismiss |
| 类型 |
布尔 |
| 默认的 |
真正的 |
组件 |
|
| 描述 |
要显示在弹出窗口内的组件。 |
| 属性 |
组件 |
| 类型 |
| HTMLElement | null | string |
componentProps |
|
| 描述 |
要传递给弹出窗口组件的数据。 |
| 类型 |
Undefined | {[key: string]:任意;｝ |
cssClass |
|
| 描述 |
申请自定义CSS的其他类。如果提供了多个类，它们应该用空格分隔。 |
| 属性 |
css类 |
| 类型 |
String | String [] | undefined |
enterAnimation |
|
| 描述 |
弹出窗口显示时使用的动画。 |
| 类型 |
((baseEl:任何,选择?：任何)＝＞Animation) | undefined |
事件 |
|
| 描述 |
传递给弹出窗口动画的事件。 |
| 属性 |
事件 |
| 类型 |
任何 |
htmlAttributes |
|
| 描述 |
要传递给弹出窗口的附加属性。 |
| 类型 |
PopoverAttributes |未定义 |
keyboardClose |
|
| 描述 |
如果 |
| 属性 |
keyboard-close |
| 类型 |
布尔 |
| 默认的 |
真正的 |
leaveAnimation |
|
| 描述 |
当弹出窗口被解散时使用的动画。 |
| 类型 |
((baseEl:任何,选择?：任何)＝＞Animation) | undefined |
模式 |
|
| 描述 |
模式决定使用哪种平台样式。 |
| 属性 |
模式 |
| 类型 |
“ios”|“医学博士” |
showBackdrop |
|
| 描述 |
如果 |
| 属性 |
show-backdrop |
| 类型 |
布尔 |
| 默认的 |
真正的 |
半透明的 |
|
| 描述 |
如果 |
| 属性 |
半透明的 |
| 类型 |
布尔 |
| 默认的 |
假 |
事件
| 的名字 | 描述 |
|---|---|
ionPopoverDidDismiss |
在弹出窗口解散后发出。 |
ionPopoverDidPresent |
在弹出窗口出现后发出。 |
ionPopoverWillDismiss |
在弹出窗口解散之前发出。 |
ionPopoverWillPresent |
在弹出窗口出现之前发出。 |
方法
驳回 |
|
|---|---|
| 描述 |
在弹出窗口覆盖层出现后，将其解散。 |
| 签名 |
解雇(数据?:任何作用?：字符串|未定义的)＝＞Promise |
onDidDismiss |
|
| 描述 |
返回一个承诺，当弹窗被解散时解析。 |
| 签名 |
onDidDismiss |
onWillDismiss |
|
| 描述 |
返回一个承诺，该承诺在弹出窗口关闭时解析。 |
| 签名 |
onWillDismiss |
现在 |
|
| 描述 |
在弹出窗口覆盖层创建后呈现。 |
| 签名 |
礼物()= > < >无效承诺 |
CSS自定义属性
| 的名字 | 描述 |
|---|---|
——backdrop-opacity |
背景的不透明度 |
——背景 |
弹出窗口的背景 |
——不必 |
弹出窗口的框阴影 |
——高度 |
弹出窗口的高度 |
——max-height |
弹出窗口的最大高度 |
——max-width |
弹出窗口的最大宽度 |
——最小高度 |
弹出窗口的最小高度 |
——min-width |
弹出窗口的最小宽度 |
——宽度 |
弹出窗口的宽度 |