ポップオーバーVueコンポーネント

Popoverコンポーネントは、ポップオーバー内のコンテンツのプレゼンテーションを管理するために使用されます。ポップオーバーは、情報を一時的に提示するために使用します。ポップオーバーは、ユーザーがポップオーバーウィンドウの外をタップするか、明示的にポップオーバーを解除するまで表示され続けます。

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

ポップオーバーのコンポーネント

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

f7-popover

ポップオーバーのプロパティ

Prop	Type	Default	Description
<f7-popover> properties
opened	boolean	false	ポップオーバーの開閉や、初期状態の設定を行います。
target-el	string object		ポップオーバーの対象となる要素の HTML 要素または文字列の CSS セレクタです。
backdrop	boolean		ポップオーバーの背景（後ろの暗い半透明のレイヤー）を有効にします。デフォルトでは、同じアプリのパラメータ値（`true`）を継承します。
backdrop-el	string object		カスタム背景要素のHTML要素または文字列のCSSセレクタ
close-by-backdrop-click	boolean	true	有効にすると、背景をクリックしたときにポップオーバーが閉じられます。デフォルトでは、同じアプリのパラメータ値を継承します。
close-by-outside-click	boolean	true	有効にすると、ポップオーバーは、その外側をクリックすると閉じられます。デフォルトでは、同じアプリのパラメータ値を継承します。
close-on-escape	boolean	false	有効にすると、ESC キーを押したときにポップオーバーが閉じます。
animate	boolean		モーダルの開閉をアニメーションで行うかどうか
container-el	HTMLElement string		モーダルをマウントする要素（デフォルトはアプリのルート要素

ポップオーバーのイベント

Event	Description
<f7-popover> events
popover:open	ポップオーバーのオープニングアニメーションが始まるとイベントが発生します
popover:opened	Popoverがオープニングアニメーションを完了した後にイベントが発生する
popover:close	ポップオーバーが閉じるアニメーションを開始するとイベントが発生します
popover:closed	Popoverのクロージングアニメーションが完了するとイベントが発生します。

ポップオーバーのvモデル

ポップオーバーコンポーネントは opened のプロップで v-model をサポートします。

<template>
  <f7-page>
    <f7-popover v-model:opened="isOpened">
      ...
    </f7-popover>
    <p>Modal is opened: {{ isOpened }}</p>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        isOpened: false,
      };
    }
  };
</script>

ポップオーバーのオープンとクローズ

ポップオーバーの状態を制御して、開いたり閉じたりすることができます。

Popover APIを使って
Popover の opened プロパティーに true または false を渡す。
リンクやボタンをクリックして、関連するpopover-openプロパティ（開く）やpopover-closeプロパティ（閉じる）を指定する。

Examples

<template>
<f7-page>
  <f7-navbar title="Popover"></f7-navbar>
  <f7-toolbar bottom>
    <f7-link>Dummy Link</f7-link>
    <f7-link popover-open=".popover-menu">Open Popover</f7-link>
  </f7-toolbar>

  <f7-block>
    <p><f7-button fill raised popover-open=".popover-menu">Open popover on me</f7-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, <f7-link popover-open=".popover-menu">popover</f7-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 <f7-link popover-open=".popover-menu">popover!</f7-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 <f7-link popover-open=".popover-menu">one more popover</f7-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>
  </f7-block>
  <f7-popover class="popover-menu">
    <f7-list>
      <f7-list-item link="#" popover-close title="Dialog"></f7-list-item>
      <f7-list-item link="#" popover-close title="Tabs"></f7-list-item>
      <f7-list-item link="#" popover-close title="Side Panels"></f7-list-item>
      <f7-list-item link="#" popover-close title="List View"></f7-list-item>
      <f7-list-item link="#" popover-close title="Form Inputs"></f7-list-item>
    </f7-list>
  </f7-popover>
</f7-page>
</template>