Popover React 組件

Popover 組件用於管理彈出訊息中內容的呈現方式。您使用彈出訊息來暫時呈現資訊。彈出訊息會保持可見狀態，直到使用者輕觸彈出視窗外側，或者您明確將其關閉。

Popover React 元件代表 Popover 元件。

包含下列元件

彈出訊息

屬性	類型	預設值	說明
<Popover> 屬性
opened	布林值	false	允許開啟/關閉 Popover 並設定其初始狀態
arrow	布林值	true	啟用 Popover 箭頭/角
targetEl	字串物件		Popover 目標元素的 HTML 元素或字串 CSS 選擇器
verticalPosition	字串	auto	強制 Popover 垂直位置，可以是 `auto`、`top` 或 `bottom`
backdrop	布林值	true	啟用 Popover 背景（後方的深色半透明圖層）。預設繼承相同的應用程式參數值（`true`）
backdropEl	字串物件		自訂背景元素的 HTML 元素或字串 CSS 選擇器
backdropUnique	布林值	false	如果啟用，它會為此模式建立獨特的背景元素
closeByBackdropClick	布林值	true	啟用時，點選背景會關閉 popover。預設繼承相同的應用程式參數值
closeByOutsideClick	布林值	true	啟用時，在 popover 外部點選會關閉 popover。預設繼承相同的應用程式參數值
closeOnEscape	布林值	false	啟用時，按下 ESC 鍵盤按鍵會關閉 popover
animate	布林值	true	模式是否應以動畫開啟/關閉
containerEl	HTMLElement 字串		要將模式掛載到的元素（預設為應用程式根元素）

事件	說明
<Popover> 事件
popoverOpen	當 Popover 開始其開啟動畫時，將觸發此事件
popoverOpened	當 Popover 完成其開啟動畫後，將觸發此事件
popoverClose	當 Popover 開始其關閉動畫時，將觸發此事件
popoverClosed	當 Popover 完成其關閉動畫後，將觸發此事件

您可以控制 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
範例

Popover React 組件

Popover 元件

Popover 屬性

Popover 事件

開啟和關閉 Popover

範例