Popover React 组件

Popover 组件用于管理弹出框中内容的呈现。您可以使用弹出框暂时显示信息。弹出框将一直可见，直到用户点击弹出框窗口之外或您明确将其关闭。

Popover React 组件表示 Popover 组件。

包括以下组件

弹出框

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

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

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

使用 Popover API
通过传递 true 或 false 到其 opened 属性
通过点击带有相关 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>
);

改进此文档

在本页

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

Popover React 组件

Popover 组件

Popover 属性

Popover 事件

打开和关闭弹出框

示例