パネル Vue コンポーネント

Panel Vueコンポーネントは、Side Panelsコンポーネントを表します。

パネルコンポーネント

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

f7-panel - Panel 要素

パネルのプロパティ

Prop	Type	Default	Description
side	string		パネルの側面です。left `または` right` になります。
left	boolean		side="left"` のショートカットプロップです。
right	boolean		side="right"` のショートカット・プロップです。
effect	string		パネルの効果。cover`,` reveal`,` push` のいずれかです。
cover	boolean		effect="cover"`のショートカットプロップです。
reveal	boolean		effect="reveal"`のショートカットプロップです。
push	boolean		EFFECT="PUSH"`のショートカットプロップ
visible-breakpoint	number		左パネルが常に表示されるようになったときのアプリの最小幅（px単位
collapsed-breakpoint	number		左パネルが部分的に表示される（折りたたまれる）場合のアプリの最小幅（px
swipe	boolean	false	スワイプでパネルを開閉する機能を有効にする場合は、Enableを選択します。
swipe-no-follow	boolean	false	古いデバイスや遅いデバイスでのパフォーマンスを向上させる可能性のあるフォールバックオプションです。このオプションを有効にすると、タッチ操作時にスワイプパネルが指に追従せず、左/右のスワイプで自動的に開閉されるようになります。
swipe-active-area	number	0	パネルのスワイプを誘発するスクリーンからの見えないエッジの幅(px)
swipe-only-close	boolean	false	このパラメータは、スワイプでパネルを閉じる(開かない)ことができます。(`swipe` も有効にしてください)
swipe-threshold	number	0	touch distance" がこの値 (px) よりも小さい場合、パネルはスワイプでは動きません。
backdrop	boolean	true	パネルの背景を有効にします (背後にある暗い半透明のレイヤー)
backdrop-el	HTMLElement string		カスタム背景要素の HTML 要素または文字列 CSS セレクタ
close-by-backdrop-click	boolean	true	パネルの外側をクリックしてパネルを閉じる機能の有効化／無効化
resizable	boolean	false	サイズ変更可能なパネルの有効化／無効化
container-el	HTMLElement string		パネルをマウントする要素（デフォルトはアプリのルート要素
opened	boolean		パネルの開閉や初期状態の設定を可能にする

パネルのイベント

Event	Description
panel:open	パネルがオープニングアニメーションを開始するとイベントが発生します。
panel:opened	パネルのオープニングアニメーションが完了すると、イベントが発生します。
panel:close	パネルが閉じるアニメーションを開始すると、イベントが発生します。
panel:closed	パネルが閉じるアニメーションが完了すると、イベントが発生します。
panel:backdrop-click	パネルの背景がクリックされるとイベントが発生します。
panel:swipe	スワイプパネルの場合、タッチのスワイプ動作時にイベントが発生する
panel:swipeopen	イベントはスワイプでパネルを開いた最初の段階で発生します。
panel:collapsedbreakpoint	イベントは、アプリの幅が `collapsedBreakpoint` と一致したときに表示/非表示になるとトリガーされます。
panel:breakpoint	イベントは、アプリの幅が `visibleBreakpoint` と一致したときに、表示/非表示になるとトリガーされます。

パネルのv-model

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

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

パネルを開く、閉じる

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

Panel APIを使って
パネルの opened プロップに true または false を渡す
リンクやボタンの panel-open プロパティでパネルを開き、panel-close プロパティでパネルを閉じます。

Examples

<template>
  <f7-app>
    <!-- Left resizable Panel with Reveal effect -->
    <f7-panel left reveal resizable>
      <f7-view>
        <f7-page>
          <f7-block>Left panel content</f7-block>
        </f7-page>
      </f7-view>
    </f7-panel>

    <!-- Right resizable Panel with Cover effect and dark layout theme -->
    <f7-panel right resizable theme-dark>
      <f7-view>
        <f7-page>
          <f7-block>Right panel content</f7-block>
        </f7-page>
      </f7-view>
    </f7-panel>

    <f7-view main>
      <f7-page>
        <f7-navbar title="Panel"></f7-navbar>

        <f7-panel id="panel-nested" theme-dark left cover container-el="#panel-page">
          <f7-page>
            <f7-block strong>
              <p>This is page-nested Panel.</p>
              <p>
                <f7-link panel-close>Close me</f7-link>
              </p>
            </f7-block>
          </f7-page>
        </f7-panel>

        <f7-block>
          <f7-row tag="p">
            <f7-col tag="span">
              <f7-button raised fill panel-open="left"> Open left panel </f7-button>
            </f7-col>
            <f7-col tag="span">
              <f7-button raised fill panel-open="right"> Open right panel </f7-button>
            </f7-col>
          </f7-row>
          <f7-row tag="p">
            <f7-col tag="span">
              <f7-button raised fill panel-open="#panel-nested"> Open nested panel </f7-button>
            </f7-col>
          </f7-row>
        </f7-block>
      </f7-page>
    </f7-view>
  </f7-app>
</template>
<style>
/* Limit resizable panel width */
.panel {
  min-width: 100px;
  max-width: 90vw;
}
</style>