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

ポップアップ Vue コンポーネント

ポップアップは、アプリのメインコンテンツの上に表示される、任意の HTML コンテンツを含むポップアップウィンドウです。ポップアップは、他のすべてのオーバーレイと同様に、いわゆる「一時ビュー」の一部です。

ポップアップ Vue コンポーネントは、ポップアップコンポーネントを表します。

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

プロパティタイプ説明
<f7-popup> プロパティ
tablet-fullscreenbooleanタブレットでポップアップをフルスクリーンで表示するかどうかを定義します
openedbooleanポップアップを開閉し、初期状態を設定できます
backdropbooleanポップアップのバックドロップ（背後の暗い半透明レイヤー）を有効にします。デフォルトでは、同じアプリパラメータ値（`true`）を継承します
backdrop-elstring
object		カスタムバックドロップ要素の HTML 要素または文字列 CSS セレクター
backdropUniqueboolean有効にすると、このモーダル専用の固有のバックドロップ要素が作成されます
close-by-backdrop-clickboolean有効にすると、バックドロップをクリックするとポップアップが閉じます。デフォルトでは、同じアプリパラメータ値（`true`）を継承します
close-on-escapeboolean有効にすると、ESC キーボードキーを押すとポップアップが閉じます
animatebooleanポップアップを開閉するときにアニメーションを使用するかどうか。 `.open（）`メソッドと`.close（）`メソッドで上書きできます。デフォルトでは、同じアプリパラメータ値（`true`）を継承します
swipe-to-closeboolean
string		スワイプジェスチャーでポップアップを閉じることができるかどうか。 `true`に設定すると、ポップアップを上下にスワイプして閉じることができます。 `to-top`（文字列）に設定すると、上にスワイプすることによってのみポップアップを閉じることができます。 `to-bottom`（文字列）に設定すると、下にスワイプすることによってのみポップアップを閉じることができます。
swipe-handlerHTMLElement
string		渡されない場合、ポップアップ全体をスワイプして閉じることができます。ここに HTML 要素またはスワイプターゲットとして使用されるカスタム要素の文字列 CSS セレクターを渡すことができます。（`swipeToClose`も有効にする必要があります）
pushboolean有効にすると、開いたときにビューを後ろにプッシュします。上部のセーフエリアが設定されている場合にのみ機能します。 Popup 要素に `popup-push` クラスを追加することによっても有効にできます。
container-elHTMLElement
string		モーダルをマウントする要素 (デフォルトはアプリのルート要素)
イベント説明
<f7-popup> イベント
popup:openポップアップが開くアニメーションを開始するときにイベントがトリガーされます
popup:openedポップアップが開くアニメーションを完了した後にイベントがトリガーされます
popup:closeポップアップが閉じるアニメーションを開始するときにイベントがトリガーされます
popup:closedポップアップが閉じるアニメーションを完了した後にイベントがトリガーされます
popup:swipestartスワイプして閉じるインタラクションの開始時にイベントがトリガーされます（ユーザーがポップアップのドラッグを開始したとき）
popup:swipemoveスワイプして閉じる移動インタラクションでイベントがトリガーされます
popup:swipeendスワイプして閉じるリリースでイベントがトリガーされます
popup:swipecloseスワイプでポップアップを閉じたときにイベントがトリガーされます

ポップアップコンポーネントは、`opened`プロパティで`v-model`をサポートしています

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

ポップアップを開閉する

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

例

popup.vue
<template>
  <f7-page @page:beforeremove="onPageBeforeRemove">
    <f7-navbar title="Popup"></f7-navbar>
    <f7-block strong-ios outline-ios>
      <p>
        Popup is a modal window with any HTML content that pops up over App's main content. Popup as
        all other overlays is part of so called "Temporary Views".
      </p>
      <p>
        <f7-button fill popup-open=".demo-popup">Open Popup</f7-button>
      </p>
      <p>
        <f7-button fill @click="popupOpened = true">Open Via Prop Change</f7-button>
      </p>
      <p>
        <f7-button fill @click="createPopup">Create Dynamic Popup</f7-button>
      </p>
    </f7-block>

    <f7-block-title>Swipe To Close</f7-block-title>
    <f7-block strong-ios outline-ios>
      <p>Popup can be closed with swipe to top or bottom:</p>
      <p>
        <f7-button fill popup-open=".demo-popup-swipe">Swipe To Close</f7-button>
      </p>
      <p>
        Or it can be closed with swipe on special swipe handler and, for example, only to bottom:
      </p>
      <p>
        <f7-button fill popup-open=".demo-popup-swipe-handler">With Swipe Handler</f7-button>
      </p>
    </f7-block>

    <f7-block-title>Push View</f7-block-title>
    <f7-block strong-ios outline-ios>
      <p>
        Popup can push view behind. By default has effect only when `safe-area-inset-top` is more
        than zero (iOS fullscreen webapp or iOS cordova app)
      </p>
      <p>
        <f7-button fill popup-open=".demo-popup-push">Popup Push</f7-button>
      </p>
    </f7-block>

    <f7-popup v-model:opened="popupOpened" class="demo-popup">
      <f7-page>
        <f7-navbar title="Popup Title">
          <f7-nav-right>
            <f7-link popup-close>Close</f7-link>
          </f7-nav-right>
        </f7-navbar>
        <f7-block>
          <p>
            Here comes popup. You can put here anything, even independent view with its own
            navigation. Also not, that by default popup looks a bit different on iPhone/iPod and
            iPad, on iPhone it is fullscreen.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris
            leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac
            urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia
            venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros.
            Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra
            pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero
            mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor.
            Suspendisse a faucibus lectus.
          </p>
          <p>
            Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl
            ut lorem semper pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed
            quam. Nam risus libero, auctor vel tristique ac, malesuada ut ante. Sed molestie, est in
            eleifend sagittis, leo tortor ullamcorper erat, at vulputate eros sapien nec libero.
            Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem, suscipit in iaculis id,
            pharetra at urna. Pellentesque tempor congue massa quis faucibus. Vestibulum nunc eros,
            convallis blandit dui sit amet, gravida adipiscing libero.
          </p>
        </f7-block>
      </f7-page>
    </f7-popup>

    <f7-popup push class="demo-popup-push">
      <f7-view>
        <f7-page>
          <f7-navbar title="Push Popup" large transparent>
            <f7-nav-right>
              <f7-link popup-close>Close</f7-link>
            </f7-nav-right>
          </f7-navbar>
          <f7-block>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris
              leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac
              urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia
              venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros.
              Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra
              pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero
              mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor.
              Suspendisse a faucibus lectus.
            </p>
            <p>
              Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl
              ut lorem semper pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed
              quam. Nam risus libero, auctor vel tristique ac, malesuada ut ante. Sed molestie, est
              in eleifend sagittis, leo tortor ullamcorper erat, at vulputate eros sapien nec
              libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem, suscipit in
              iaculis id, pharetra at urna. Pellentesque tempor congue massa quis faucibus.
              Vestibulum nunc eros, convallis blandit dui sit amet, gravida adipiscing libero.
            </p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris
              leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac
              urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia
              venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros.
              Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra
              pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero
              mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor.
              Suspendisse a faucibus lectus.
            </p>
          </f7-block>
        </f7-page>
      </f7-view>
    </f7-popup>

    <f7-popup class="demo-popup-swipe" swipe-to-close>
      <f7-page>
        <f7-navbar title="Swipe To Close">
          <f7-nav-right>
            <f7-link popup-close>Close</f7-link>
          </f7-nav-right>
        </f7-navbar>

        <div style="height: 100%" class="display-flex justify-content-center align-items-center">
          <p>Swipe me up or down</p>
        </div>
      </f7-page>
    </f7-popup>

    <f7-popup
      class="demo-popup-swipe-handler"
      swipe-to-close="to-bottom"
      swipe-handler=".swipe-handler"
    >
      <f7-page>
        <template #fixed>
          <div class="swipe-handler"></div>
        </template>
        <f7-block-title large>Hello!</f7-block-title>
        <f7-block strong-ios outline-ios>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris
            leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac
            urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia
            venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros.
            Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra
            pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero
            mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor.
            Suspendisse a faucibus lectus.
          </p>
          <p>
            Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl
            ut lorem semper pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed
            quam. Nam risus libero, auctor vel tristique ac, malesuada ut ante. Sed molestie, est in
            eleifend sagittis, leo tortor ullamcorper erat, at vulputate eros sapien nec libero.
            Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem, suscipit in iaculis id,
            pharetra at urna. Pellentesque tempor congue massa quis faucibus. Vestibulum nunc eros,
            convallis blandit dui sit amet, gravida adipiscing libero.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris
            leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac
            urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia
            venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros.
            Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra
            pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero
            mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor.
            Suspendisse a faucibus lectus.
          </p>
          <p>
            Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl
            ut lorem semper pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed
            quam. Nam risus libero, auctor vel tristique ac, malesuada ut ante. Sed molestie, est in
            eleifend sagittis, leo tortor ullamcorper erat, at vulputate eros sapien nec libero.
            Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem, suscipit in iaculis id,
            pharetra at urna. Pellentesque tempor congue massa quis faucibus. Vestibulum nunc eros,
            convallis blandit dui sit amet, gravida adipiscing libero.
          </p>
        </f7-block>
      </f7-page>
    </f7-popup>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7Popup,
  f7BlockTitle,
  f7Block,
  f7NavRight,
  f7Link,
  f7Button,
  f7View,
  f7,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Popup,
    f7BlockTitle,
    f7Block,
    f7NavRight,
    f7Link,
    f7Button,
    f7View,
  },
  data() {
    return {
      popupOpened: false,
    };
  },
  methods: {
    createPopup() {
      const self = this;
      // Create popup
      if (!self.popup) {
        self.popup = f7.popup.create({
          content: `
              <div class="popup">
                <div class="page">
                  <div class="navbar">
                    <div class="navbar-bg"></div>
                    <div class="navbar-inner">
                      <div class="title">Dynamic Popup</div>
                      <div class="right"><a  class="link popup-close">Close</a></div>
                    </div>
                  </div>
                  <div class="page-content">
                    <div class="block">
                      <p>This popup was created dynamically</p>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.</p>
                    </div>
                  </div>
                </div>
              </div>
            `.trim(),
        });
      }
      // Open it
      self.popup.open();
    },
    onPageBeforeRemove() {
      const self = this;
      // Destroy popup when page removed
      if (self.popup) self.popup.destroy();
    },
  },
};
</script>
このドキュメントを改善する
このページについて