スポンサースポンサーになる

Popover

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

小さな画面（iPhone）ではPopoverを使用しないことをお勧めします。小さな画面では、代わりにアクションシートを使用する必要があります。

Popoverレイアウト

まず、Popoverのレイアウトを見てみましょう。非常にシンプルです。

<body>
    ...
    <div class="popover">
        <!-- Popover's arrow -->
        <div class="popover-arrow"></div>

        <!-- Popover content -->
        <div class="popover-inner">
            <!-- Any HTML content here -->
        </div>
    </div>
</body>

Popoverは高度にカスタマイズ可能な要素であり、ナビゲーションを含む別のビューなど、何でも内部に配置できます。

Popoverアプリメソッド

Popoverを操作するための関連するアプリメソッドを見てみましょう。

app.popover.create(パラメータ)- Popoverインスタンスを作成します

  • パラメータ - オブジェクト。Popoverパラメータを含むオブジェクト

メソッドは作成されたPopoverのインスタンスを返します。

app.popover.destroy(el)- Popoverインスタンスを破棄します

  • el - HTMLElementまたは文字列（CSSセレクタ付き）またはオブジェクト。破棄するPopover要素またはPopoverインスタンス。

app.popover.get(el)- HTML要素からPopoverインスタンスを取得します

  • el - HTMLElementまたは文字列（CSSセレクタ付き）。Popover要素。

メソッドはPopoverのインスタンスを返します。

app.popover.open(el, targetEl, animate)- Popoverを開きます

  • el - HTMLElementまたは文字列（CSSセレクタ付き）。開くPopover要素。
  • targetEl - HTMLElementまたは文字列（CSSセレクタ付き）。この要素の周りにPopoverの位置を設定するターゲット要素。
  • animate - ブール値。アニメーション付きでPopoverを開きます。

メソッドはPopoverのインスタンスを返します。

app.popover.close(el, animate)- Popoverを閉じます

  • el - HTMLElementまたは文字列（CSSセレクタ付き）。閉じるPopover要素。
  • animate - ブール値。アニメーション付きでPopoverを閉じます。

メソッドはPopoverのインスタンスを返します。

Popoverパラメータ

それでは、Popoverの作成に必要なパラメータのリストを見てみましょう。

パラメータ型デフォルト説明
elHTMLElementPopover要素。HTMLに既にPopover要素があり、この要素を使用して新しいインスタンスを作成する場合に役立ちます。
arrowブール値truePopoverの矢印/角を有効にします。
content文字列完全なPopover HTMLレイアウト文字列。Popover要素を動的に作成する場合に役立ちます。
verticalPosition文字列autoPopoverの垂直方向の位置を強制します。「auto」、「top」、または「bottom」を指定できます。
backdropブール値truePopoverのバックドロップ（背後の暗い半透明レイヤー）を有効にします。
backdropUniqueブール値false有効にすると、このモーダル専用の一意のバックドロップ要素が作成されます。
backdropElHTMLElement
文字列		カスタムバックドロップ要素のHTML要素またはCSSセレクタ文字列
closeByBackdropClickブール値true有効にすると、バックドロップをクリックするとPopoverが閉じられます。
closeByOutsideClickブール値true有効にすると、Popoverの外側をクリックすると閉じられます。
closeOnEscapeブール値false有効にすると、ESCキーを押すとPopoverが閉じられます。
animateブール値truePopoverをアニメーション付きで開閉するかどうかを指定します。「.open()」メソッドと「.close()」メソッドで上書きできます。
targetElHTMLElement
文字列		ターゲット要素のHTML要素またはCSSセレクタ文字列
targetX数値画面の左端からの仮想ターゲット要素の水平方向のオフセット。実際のターゲット要素（`targetEl`）を使用しない場合に必要です。
targetY数値画面の上端からの仮想ターゲット要素の垂直方向のオフセット。実際のターゲット要素（`targetEl`）を使用しない場合に必要です。
targetWidth数値0仮想ターゲット要素の幅（px単位）。実際のターゲット要素（`targetEl`）を使用しない場合に必要です。
targetHeight数値0仮想ターゲット要素の高さ（px単位）。実際のターゲット要素（`targetEl`）を使用しない場合に必要です。
containerElHTMLElement
文字列		モーダルをマウントする要素（デフォルトはアプリのルート要素）
onオブジェクト

イベントハンドラを含むオブジェクト。例えば

var popover = app.popover.create({
  content: '<div class="popover">...</div>',
  on: {
    opened: function () {
      console.log('Popover opened')
    }
  }
})

これらのパラメータはすべて、`popover`プロパティの下にあるグローバルアプリパラメータで使用して、すべてのPopoverのデフォルトを設定できます。例えば

var app = new Framework7({
  popover: {
    closeByBackdropClick: false,
  }
});

自動初期化されたPopover（例：`app.popover.create`を使用して作成しない）を使用する場合は、`data-`属性を介して使用可能なすべてのPopoverパラメータを渡すことができます。例えば

<!-- Pass parameters as kebab-case data attributes -->
<div class="popover" data-close-on-escape="true" data-backdrop="false">
  ...
</div>

Popoverメソッドとプロパティ

Popoverを作成するには、次のコードを呼び出します。

var popover = app.popover.create({ /* parameters */ })

その後、便利なメソッドとプロパティを持つ初期化されたインスタンス（上記の例では`popover`変数）が得られます。

プロパティ
popover.appグローバルアプリインスタンスへのリンク
popover.elPopover HTML要素
popover.$elPopover HTML要素を持つDom7インスタンス
popover.backdropElバックドロップHTML要素
popover.$backdropElバックドロップHTML要素を持つDom7インスタンス
popover.targetElPopoverターゲットHTML要素
popover.$targetElPopoverターゲットHTML要素を持つDom7インスタンス
popover.paramsPopoverパラメータ
popover.openedPopoverが開いているかどうかを示すブール値のプロパティ
メソッド
popover.open(targetEl, animate)ターゲット要素の周りにPopoverを開きます。
  • targetEl - HTMLElementまたは文字列 - この要素の周りにPopoverの位置を設定するターゲット要素
  • animate - ブール値（デフォルトは`true`） - アニメーション付きで開くかどうかを定義します。
popover.open(animate)Popoverの作成時に渡されたターゲット要素の周りにPopoverを開きます。
  • animate - ブール値（デフォルトは`true`） - アニメーション付きで開くかどうかを定義します。
popover.close(animate)Popoverを閉じます。
  • animate - ブール値（デフォルトは`true`） - アニメーション付きで閉じるかどうかを定義します。
popover.destroy()Popoverを破棄します。
popover.on(event, handler)イベントハンドラを追加します。
popover.once(event, handler)発火後に削除されるイベントハンドラを追加します。
popover.off(event, handler)イベントハンドラを削除します。
popover.off(event)指定されたイベントのすべてのハンドラを削除します。
popover.emit(event, ...args)インスタンスでイベントを発火します。

特別なクラスとデータ属性を使用してリンクを介して必要なPopover（DOMにある場合）を開閉できます。

  • Popoverを開くには、任意のHTML要素（リンクが推奨）に「popover-open」クラスを追加する必要があります。

  • Popoverを閉じるには、任意のHTML要素（リンクが推奨）に「popover-close」クラスを追加する必要があります。

  • DOMに複数のPopoverがある場合は、このHTML要素に追加のdata-popover=".my-popover"属性を介して適切なPopoverを指定する必要があります。

上記の注意によると

<!-- In data-popover attribute we specify CSS selector of popover we need to open -->
<p><a href="#" data-popover=".my-popover" class="popover-open">Open Popover</a></p>

<!-- And somewhere in DOM -->
<div class="popover my-popover">
  <div class="popover-inner">
    <!-- Link to close popover -->
    <a class="link popover-close">Close Popover</a>
  </div>
</div>

Popoverイベント

Popoverは、Popover要素で次のDOMイベント、およびアプリとPopoverインスタンスでイベントを発火します。

DOMイベント

イベントターゲット説明
popover:openPopover要素<div class="popover">Popoverが開きアニメーションを開始したときにイベントがトリガーされます。
popover:openedPopover要素<div class="popover">Popoverが開きアニメーションを完了した後にイベントがトリガーされます。
popover:closePopover要素<div class="popover">Popoverが閉じアニメーションを開始したときにイベントがトリガーされます。
popover:closedPopover要素<div class="popover">Popoverが閉じアニメーションを完了した後にイベントがトリガーされます。

アプリとPopoverインスタンスのイベント

Popoverインスタンスは、自身とアプリインスタンスの両方でイベントを発行します。アプリインスタンスのイベント名は、接頭辞popoverが付いたものになります。

イベント引数ターゲット説明
openpopoverpopoverPopoverが開きアニメーションを開始したときにイベントがトリガーされます。引数として、イベントハンドラはPopoverインスタンスを受け取ります。
popoverOpenpopoverapp
openedpopoverpopoverPopoverが開きアニメーションを完了した後にイベントがトリガーされます。引数として、イベントハンドラはPopoverインスタンスを受け取ります。
popoverOpenedpopoverapp
closepopoverpopoverPopoverが閉じアニメーションを開始したときにイベントがトリガーされます。引数として、イベントハンドラはPopoverインスタンスを受け取ります。
popoverClosepopoverapp
closedpopoverpopoverPopoverが閉じアニメーションを完了した後にイベントがトリガーされます。引数として、イベントハンドラはPopoverインスタンスを受け取ります。
popoverClosedpopoverapp
beforeDestroypopoverpopoverPopoverインスタンスが破棄される直前にイベントがトリガーされます。引数として、イベントハンドラはPopoverインスタンスを受け取ります。
popoverBeforeDestroypopoverapp

CSS変数

関連するCSS変数（CSSカスタムプロパティ）のリストを以下に示します。

:root {
  --f7-popover-width: 260px;
}
.ios {
  --f7-popover-border-radius: 13px;
  --f7-popover-actions-icon-size: 28px;
  --f7-popover-transition-timing-function: initial;
  --f7-popover-bg-color: rgba(255, 255, 255, 0.95);
  --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.45);
}
.ios .dark,
.ios.dark {
  --f7-popover-bg-color: rgba(30, 30, 30, 0.95);
  --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-popover-transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
  --f7-popover-border-radius: 28px;
  --f7-popover-actions-icon-size: 24px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-popover-bg-color: var(--f7-md-surface-3);
  --f7-popover-actions-label-text-color: var(--f7-md-on-surface-variant);
}

例

popover.html
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Popover</div>
      <div class="right">
        <a class="link popover-open" data-popover=".popover-menu">Popover</a>
      </div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom">
    <div class="toolbar-inner">
      <a href="" class="link popover-open" data-popover=".popover-menu">Dummy Link</a>
      <a href="" class="link popover-open" data-popover=".popover-menu">Open Popover</a>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p><a data-popover=".popover-menu" class="button button-fill popover-open">Open popover on me</a></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, <a class="popover-open"
          data-popover=".popover-menu">popover</a> 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 <a class="popover-open" data-popover=".popover-menu">popover!</a> 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 <a class="popover-open" data-popover=".popover-menu">one more popover</a> 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>
    </div>
  </div>
  <div class="popover popover-menu">
    <div class="popover-angle"></div>
    <div class="popover-inner">
      <div class="list">
        <ul>
          <li><a href="/dialog/" class="list-button popover-close">Dialog</a></li>
          <li><a href="/tabs/" class="list-button popover-close">Tabs</a></li>
          <li><a href="/panel/" class="list-button popover-close">Side Panels</a></li>
          <li><a href="/list/" class="list-button popover-close">List View</a></li>
          <li><a href="/inputs/" class="list-button popover-close">Form Inputs</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
このドキュメントを改善する
このページについて