Popover React コンポーネント

Popover コンポーネントは、ポップオーバーでのコンテンツの表示を管理するために使用されます。一時的に情報を表示するためにポップオーバーを使用します。ポップオーバーは、ユーザーがポップオーバーウィンドウの外側をタップするか、明示的に閉じるまで表示されたままになります。

Popover Reactコンポーネントは、Popoverコンポーネントを表します。

以下のコンポーネントが含まれています

ポップオーバー

プロパティ	タイプ	デフォルト	説明
<Popover> プロパティ
opened	boolean	false	ポップオーバーを開閉し、初期状態を設定できます
arrow	boolean	true	ポップオーバーの矢印/角を有効にします
targetEl	string object		ポップオーバーのターゲット要素のHTML要素または文字列CSSセレクター
verticalPosition	string	auto	ポップオーバーの垂直方向の位置を強制します。 `auto`、`top`、または`bottom`を指定できます
backdrop	boolean	true	ポップオーバーのバックドロップ（背後にある暗い半透明レイヤー）を有効にします。デフォルトでは、同じアプリパラメータ値（`true`）を継承します
backdropEl	string object		カスタムバックドロップ要素のHTML要素または文字列CSSセレクター
backdropUnique	boolean	false	有効にすると、このモーダル専用の固有のバックドロップ要素が作成されます
closeByBackdropClick	boolean	true	有効にすると、バックドロップをクリックするとポップオーバーが閉じます。デフォルトでは、同じアプリパラメータ値を継承します
closeByOutsideClick	boolean	true	有効にすると、ポップオーバーの外側をクリックするとポップオーバーが閉じます。デフォルトでは、同じアプリパラメータ値を継承します
closeOnEscape	boolean	false	有効にすると、ESCキーボードキーを押すとポップオーバーが閉じます
animate	boolean	true	モーダルをアニメーション付きで開閉するかどうか
containerEl	HTMLElement string		モーダルをマウントする要素（デフォルトはアプリのルート要素）

イベント	説明
<Popover> イベント
popoverOpen	ポップオーバーが開くアニメーションを開始するときにイベントがトリガーされます
popoverOpened	ポップオーバーが開くアニメーションが完了した後にイベントがトリガーされます
popoverClose	ポップオーバーが閉じるアニメーションを開始するときにイベントがトリガーされます
popoverClosed	ポップオーバーが閉じるアニメーションが完了した後にイベントがトリガーされます

ポップオーバーの状態を制御し、開閉できます

Popover APIを使用する
openedプロパティにtrueまたはfalseを渡すことにより
関連する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 イベント

ポップオーバーを開閉する

例