シートモーダル Vueコンポーネント

Sheet Modalは、Picker/Calendarのオーバーレイに似た特殊なオーバーレイタイプです。このようなモーダルは、カスタムコンテンツを持つカスタムピッカーオーバーレイを作成することができます。

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

シートモーダルのコンポーネント

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

f7-sheet - シートモーダル要素

シートモーダルのプロパティ

Prop	Type	Description
<f7-sheet> properties
position	string	シートの位置は `top` または `bottom` です。デフォルトでは `bottom` です。
top	boolean	position="top"` と同じです。
bottom	boolean	position="bottom"` と同じです。
backdrop	boolean	必要に応じて、追加のシートモーダルの背景をレンダリングすることを可能にします。
backdrop-el	string object	HTML要素または文字列カスタム背景要素のCSSセレクタ
opened	boolean	シートモーダルの開閉と初期状態の設定を可能にする
close-by-backdrop-click	boolean	有効にすると、背景をクリックしたときにシートが閉じられます。デフォルトでは同じアプリのパラメータ値を継承します
close-by-outside-click	boolean	有効にすると、シートの外側をクリックしたときにシートを閉じます。デフォルトでは、同じアプリのパラメーター値を継承します。
close-on-escape	boolean	有効にすると、ESCキーを押したときにシートが閉じます。
swipe-to-close	boolean	スワイプジェスチャーでシートを閉じることができるかどうか
swipe-to-step	boolean	有効にすると、開いているシートを、スワイプで操作できる「部分的に開いた状態」と「完全に開いた状態」に分けることができます。
swipe-handler	HTMLElement string	有効にしない場合は、シート全体をスワイプで閉じることができます。ここでは、スワイプターゲットとして使われるカスタム要素のHTML要素または文字列のCSSセレクタを渡すことができます。(`swipeToClose` または `swipeToStep` も有効にする必要があります)
push	boolean	有効にすると、オープン時にビューを後ろに押します。トップセーフエリアが設定されている場合のみ動作します。また、Sheet要素に`sheet-modal-push`クラスを追加することでも、この機能を有効にすることができます。
animate	boolean		Whether the modal should be opened/closed with animation or not
container-el	HTMLElement string		Element to mount modal to (default to app root element)

シートモーダルのイベント

Event	Description
<f7-sheet> events
sheet:open	イベントは、Sheet Modal がオープニングアニメーションを開始したときに発生します。
sheet:opened	イベントはSheet Modalがオープニングアニメーションを完了した後に発生します。
sheet:close	イベントはSheet Modalが閉じるアニメーションを開始するときに発生します。
sheet:closed	イベントはSheet Modalが閉じのアニメーションを完了した後に発生します。
sheet:stepopen	イベントはシートスワイプステップのオープン／エクスパンションでトリガされます。
sheet:stepclose	イベントはシートスワイプステップのクローズ／コラプスでトリガされます。
sheet:stepprogress	イベントはシートスワイプステップが開いた状態と閉じた状態の間で発生します。event.detail`として、ステップオープンのプログレス番号（`0`から`1`まで）を受け取ります。

シートモーダルスロット

<f7-sheet> コンポーネントには、カスタムエレメント用の追加スロットがあります。

default - スクロール可能な <div class="sheet-modal-inner"> 要素の子として挿入されます。
static - default と同じです。
fixed - スクロール可能な <div class="sheet-modal-inner"> 要素の前に挿入されます。

<f7-sheet>
  <template #fixed>
    <span>Fixed slot</span>
  </template>
  <template #static>
    <span>Static slot</span>
  </template>
  <span>Default slot</span>
</f7-sheet>

レンダリングは

<div class="sheet-modal">
  <span>Fixed slot</span>
  <div class="sheet-modal-inner">
    <span>Default slot</span>
    <span>Static slot</span>
  </div>
</div>

シートモーダルのvモデル

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

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

シートモーダルのオープンとクローズ

Sheet Modal の状態を制御して、開いたり閉じたりすることができます。

Sheet Modal APIを使って。
シートモーダルの opened プロパティーに true または false を渡します。
リンクやボタンの sheet-open プロパティ（開く）や sheet-close プロパティ（閉じる）をクリックする。

Examples

<template>
  
    
<f7-page @page:beforeremove="onPageBeforeRemove" @page:beforeout="onPageBeforeOut">
  <f7-navbar title="Sheet Modal"></f7-navbar>
  <f7-block>
    <p>
      <f7-button fill sheet-open=".demo-sheet">Open Sheet</f7-button>
    </p>
    <p>
      <f7-button fill @click="createSheet">Create Dynamic Sheet</f7-button>
    </p>
    <p>
      <f7-button fill @click="sheetOpened = true">Open Via Prop Change</f7-button>
    </p>
    <p>
      <f7-button fill sheet-open=".demo-sheet-swipe-to-close">Swipe To Close</f7-button>
    </p>
    <p>
      <f7-button fill sheet-open=".demo-sheet-swipe-to-step">Swipe To Step</f7-button>
    </p>
    <p>
      <f7-button fill sheet-open=".demo-sheet-push">Sheet Push</f7-button>
    </p>
  </f7-block>

  <f7-sheet class="demo-sheet" :opened="sheetOpened" @sheet:closed="sheetOpened = false">
    <f7-toolbar>
      <div class="left"></div>
      <div class="right">
        <f7-link sheet-close>Close</f7-link>
      </div>
    </f7-toolbar>
    <!-- Scrollable sheet content -->
    <f7-page-content>
      <f7-block>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ducimus dolorum ipsa aliquid accusamus perferendis laboriosam delectus numquam minima animi, libero illo in tempora harum sequi corporis alias ex adipisci.</p>
        <p>Sunt magni enim saepe quasi aspernatur delectus consectetur fugiat necessitatibus qui sed, similique quis facere tempora, laudantium quae expedita ea, aperiam dolores. Aut deserunt soluta alias magnam. Consequatur, nisi, enim.</p>
        <p>Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis voluptatibus similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae adipisci vel voluptatum, autem libero minus dignissimos repellat.</p>
        <p>Iusto, est corrupti! Totam minus voluptas natus esse possimus nobis, delectus veniam expedita sapiente ut cum reprehenderit aliquid odio amet praesentium vero temporibus obcaecati beatae aspernatur incidunt, perferendis voluptates doloribus?</p>
        <p>Illum id laborum tempore, doloribus culpa labore ex iusto odit. Quibusdam consequuntur totam nam obcaecati, enim cumque nobis, accusamus, quos voluptates, voluptatibus sapiente repellendus nesciunt praesentium velit ipsa illo iusto.</p>
      </f7-block>
    </f7-page-content>
  </f7-sheet>

  <f7-sheet
    class="demo-sheet-swipe-to-close"
    style="height:auto; --f7-sheet-bg-color: #fff;"
    swipe-to-close
    backdrop
  >
    <f7-page-content>
      <f7-block-title large>Hello!</f7-block-title>
      <f7-block>
        <p>Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis voluptatibus similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae adipisci vel voluptatum, autem libero minus dignissimos repellat.</p>
        <p>Iusto, est corrupti! Totam minus voluptas natus esse possimus nobis, delectus veniam expedita sapiente ut cum reprehenderit aliquid odio amet praesentium vero temporibus obcaecati beatae aspernatur incidunt, perferendis voluptates doloribus?</p>
      </f7-block>
    </f7-page-content>
  </f7-sheet>

  <f7-sheet
    class="demo-sheet-swipe-to-step"
    style="height:auto; --f7-sheet-bg-color: #fff;"
    swipe-to-close
    swipe-to-step
    backdrop
  >
    <div class="sheet-modal-swipe-step">
      <div class="display-flex padding justify-content-space-between align-items-center">
        <div style="font-size: 18px"><b>Total:</b></div>
        <div style="font-size: 22px"><b>$500</b></div>
      </div>
      <div class="padding-horizontal padding-bottom">
        <f7-button large fill>Make Payment</f7-button>
        <div class="margin-top text-align-center">Swipe up for more details</div>
      </div>
    </div>
    <f7-block-title medium class="margin-top">Your order:</f7-block-title>
    <f7-list no-hairlines>
      <f7-list-item title="Item 1">
        <template #after>
          <b class="text-color-black">$200</b>
        </template>
      </f7-list-item>
      <f7-list-item title="Item 2">
        <template #after>
          <b class="text-color-black">$180</b>
        </template>
      </f7-list-item>
      <f7-list-item title="Delivery">
        <template #after>
          <b class="text-color-black">$120</b>
        </template>
      </f7-list-item>
    </f7-list>
  </f7-sheet>

  <f7-sheet class="demo-sheet-push" push>
    <f7-toolbar>
      <div class="left"></div>
      <div class="right">
        <f7-link sheet-close>Close</f7-link>
      </div>
    </f7-toolbar>
    <f7-page-content>
      <f7-block>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ducimus dolorum ipsa aliquid accusamus perferendis laboriosam delectus numquam minima animi, libero illo in tempora harum sequi corporis alias ex adipisci.</p>
        <p>Sunt magni enim saepe quasi aspernatur delectus consectetur fugiat necessitatibus qui sed, similique quis facere tempora, laudantium quae expedita ea, aperiam dolores. Aut deserunt soluta alias magnam. Consequatur, nisi, enim.</p>
        <p>Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis voluptatibus similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae adipisci vel voluptatum, autem libero minus dignissimos repellat.</p>
        <p>Iusto, est corrupti! Totam minus voluptas natus esse possimus nobis, delectus veniam expedita sapiente ut cum reprehenderit aliquid odio amet praesentium vero temporibus obcaecati beatae aspernatur incidunt, perferendis voluptates doloribus?</p>
        <p>Illum id laborum tempore, doloribus culpa labore ex iusto odit. Quibusdam consequuntur totam nam obcaecati, enim cumque nobis, accusamus, quos voluptates, voluptatibus sapiente repellendus nesciunt praesentium velit ipsa illo iusto.</p>
      </f7-block>
    </f7-page-content>
  </f7-sheet>

</f7-page>
</template>
<script>
  import { f7 } from 'framework7-vue';

  export default {
    data() {
      return {
        sheetOpened: false,
      };
    },
    methods: {
      createSheet() {
        const self = this;

        // Create sheet modal
        if (!self.sheet) {
          self.sheet = f7.sheet.create({
            content: `
              <div class="sheet-modal">
                <div class="toolbar">
                  <div class="toolbar-inner justify-content-flex-end">
                    <a href="#" class="link sheet-close">Close</a>
                  </div>
                </div>
                <div class="sheet-modal-inner">
                  <div class="page-content">
                    <div class="block">
                      <p>This sheet modal 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(),
          });
        }
        // Close inline sheet
        if (f7.$('.demo-sheet.modal-in').length > 0) f7.sheet.close('.demo-sheet');
        // Open it
        self.sheet.open();
      },
      onPageBeforeOut() {
        const self = this;
        // Close opened sheets on page out
        f7.sheet.close();
      },
      onPageBeforeRemove() {
        const self = this;
        // Destroy sheet modal when page removed
        if (self.sheet) self.sheet.destroy();
      },
    }
  }
</script>