弹出框 React 组件

Popover 组件用于管理弹出内容的表现形式。您使用弹出框来临时展示信息。弹出框会保持可见，直到用户点击弹出框窗口外部或您显式地关闭它。

弹出框 React 组件表示弹出框组件。

包含以下组件：

Popover

属性	类型	默认	描述
<Popover> 属性
opened	布尔值	false	允许打开/关闭弹出框并设置其初始状态
箭头	布尔值	true	启用弹出框箭头/角落
targetEl	字符串对象		弹出框目标元素的 HTML 元素或字符串 CSS 选择器
verticalPosition	字符串	自动	强制弹出框垂直位置，可以是`auto`, `top`或`bottom`
背景遮罩	布尔值	true	启用弹出框背景（背后的深色半透明层）。默认继承相同的应用参数值`true`)
backdropEl	字符串对象		自定义背景元素的HTML元素或字符串CSS选择器
backdropUnique	布尔值	false	如果启用，它将为该模态创建唯一的背景元素
closeByBackdropClick	布尔值	true	当启用时，点击背景会关闭弹出框。默认继承相同的应用参数值
closeByOutsideClick	布尔值	true	当启用时，点击弹出框外部会关闭它。默认继承相同的应用参数值
closeOnEscape	布尔值	false	当启用时，按下 ESC 键盘键会关闭弹出框
animate	布尔值	true	模态是否应该以动画方式打开/关闭
containerEl	HTMLElement 字符串		模态挂载到的元素（默认为应用根元素）

事件	描述
<Popover> 事件
popoverOpen	当弹出框开始打开动画时将触发事件
popoverOpened	当弹出框完成打开动画后触发事件
popoverClose	当弹出框开始关闭动画时触发事件
popoverClosed	当弹出框完成关闭动画后触发事件

您可以控制弹出框状态，打开和关闭它：

使用弹出框 API
通过将其true或false传递给其openedprop
通过点击链接或按钮并使用相关popoverOpen属性（打开它）和popoverClose属性来关闭它

示例

popover.jsx

import React from 'react';
import {
  Navbar,
  Page,
  Toolbar,
  Popover,
  List,
  ListItem,
  Block,
  Link,
  Button,
} from 'framework7-react';

export default () => (
  <Page>
    <Navbar title="Popover"></Navbar>
    <Toolbar bottom>
      <Link>Dummy Link</Link>
      <Link popoverOpen=".popover-menu">Open Popover</Link>
    </Toolbar>

    <Block>
      <p>
        <Button fill popoverOpen=".popover-menu">
          Open popover on me
        </Button>
      </p>
      <p>
        Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus, ornare tellus eu, euismod
        mauris. In porta turpis at semper convallis. Duis adipiscing leo eu nulla lacinia, quis
        rhoncus metus condimentum. Etiam nec malesuada nibh. Maecenas quis lacinia nisl, vel posuere
        dolor. Vestibulum condimentum, nisl ac vulputate egestas, neque enim dignissim elit, rhoncus
        volutpat magna enim a est. Aenean sit amet ligula neque. Cras suscipit rutrum enim. Nam a
        odio facilisis, elementum tellus non, <Link popoverOpen=".popover-menu">popover</Link>{' '}
        tortor. Pellentesque felis eros, dictum vitae lacinia quis, lobortis vitae ipsum. Cras
        vehicula bibendum lorem quis imperdiet.
      </p>
      <p>
        In hac habitasse platea dictumst. Etiam varius, ante vel ornare facilisis, velit massa
        rutrum dolor, ac porta magna magna lacinia nunc. Curabitur{' '}
        <Link popoverOpen=".popover-menu">popover!</Link> cursus laoreet. Aenean vel tempus augue.
        Pellentesque in imperdiet nibh. Mauris rhoncus nulla id sem suscipit volutpat. Pellentesque
        ac arcu in nisi viverra pulvinar. Nullam nulla orci, bibendum sed ligula non, ullamcorper
        iaculis mi. In hac habitasse platea dictumst. Praesent varius at nisl eu luctus. Cras
        aliquet porta est. Quisque elementum quis dui et consectetur. Cum sociis natoque penatibus
        et magnis dis parturient montes, nascetur ridiculus mus. Sed sed laoreet purus. Pellentesque
        eget ante ante.
      </p>
      <p>
        Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet erat venenatis eu. Proin sit
        amet faucibus tortor, et varius sem. Etiam vitae lacinia neque. Aliquam nisi purus, interdum
        in arcu sed, ultrices rutrum arcu. Nulla mi turpis, consectetur vel enim quis, facilisis
        viverra dui. Aliquam quis convallis tortor, quis semper ligula. Morbi ullamcorper{' '}
        <Link popoverOpen=".popover-menu">one more popover</Link> massa at accumsan. Etiam purus
        odio, posuere in ligula vitae, viverra ultricies justo. Vestibulum nec interdum nisi. Aenean
        ac consectetur velit, non malesuada magna. Sed pharetra vehicula augue, vel venenatis lectus
        gravida eget. Curabitur lacus tellus, venenatis eu arcu in, interdum auctor nunc. Nunc non
        metus neque. Suspendisse viverra lectus sed risus aliquet, vel accumsan dolor feugiat.
      </p>
    </Block>
    <Popover className="popover-menu">
      <List>
        <ListItem link="/dialog/" popoverClose title="Dialog" />
        <ListItem link="/tabs/" popoverClose title="Tabs" />
        <ListItem link="/panel/" popoverClose title="Side Panels" />
        <ListItem link="/list/" popoverClose title="List View" />
        <ListItem link="/inputs/" popoverClose title="Form Inputs" />
      </List>
    </Popover>
  </Page>
);

改进此文档

在本页上

弹出组件
弹出属性
弹出事件
打开和关闭弹出框
示例

弹出框 React 组件

弹出组件

弹出属性

弹出事件

打开和关闭弹出框

示例