搜索文档 /
作用域

ion-popover

弹出窗口是一个出现在当前页面顶部的对话框。它可以用于任何事情,但通常用于不适合导航栏的溢出操作。

展示

要呈现弹出窗口,调用 现在 方法。为了将弹出窗口相对于所单击的元素定位,需要将单击事件传递到 现在 方法。如果事件没有被传递,弹出窗口将被定位在视口的中心。

定制

Popover使用作用域封装,这意味着它会通过在运行时为每个样式附加一个额外的类来自动限定CSS的范围。在CSS中重写作用域选择器需要 高特异性 选择器。

我们建议将自定义类传递给 cssClass 创建 方法,并使用该方法向宿主元素和内部元素添加自定义样式。这个属性还可以接受由空格分隔的多个类。查看 使用 节提供了如何使用传入类的示例 cssClass


              /*不工作-不够具体*/
             
              .popover-content
             
              
             
              背景
              
             # 222
              
             
              
             
              /*工作-在cssClass中传递“my-custom-class”来增加特异性*/
             
              .my-custom-class .popover-content
             
              
             
              背景
              
             # 222
              
             
              
复制 复制

任何定义的 CSS自定义属性 可以用来样式弹窗,而不需要针对单个元素:


              .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
类型 布尔
默认的 真正的

半透明的

描述

如果真正的,弹出窗口将是半透明的。仅当模式为时适用“苹果”设备支持backdrop-filter

属性 半透明的
类型 布尔
默认的

事件

的名字 描述
ionPopoverDidDismiss 在弹出窗口解散后发出。
ionPopoverDidPresent 在弹出窗口出现后发出。
ionPopoverWillDismiss 在弹出窗口解散之前发出。
ionPopoverWillPresent 在弹出窗口出现之前发出。

方法

驳回

描述

在弹出窗口覆盖层出现后,将其解散。

签名 解雇(数据?:任何作用?:字符串|未定义的)=>Promise

onDidDismiss

描述

返回一个承诺,当弹窗被解散时解析。

签名 onDidDismiss() => Promise> . onDidDismiss(

onWillDismiss

描述

返回一个承诺,该承诺在弹出窗口关闭时解析。

签名 onWillDismiss() => Promise> . onWillDismiss(

现在

描述

在弹出窗口覆盖层创建后呈现。

签名 礼物()= > < >无效承诺

CSS自定义属性

的名字 描述
——backdrop-opacity 背景的不透明度
——背景 弹出窗口的背景
——不必 弹出窗口的框阴影
——高度 弹出窗口的高度
——max-height 弹出窗口的最大高度
——max-width 弹出窗口的最大宽度
——最小高度 弹出窗口的最小高度
——min-width 弹出窗口的最小宽度
——宽度 弹出窗口的宽度
查看源代码
Baidu