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

パネル Vue コンポーネント

Panel Vue コンポーネントは、サイドパネルコンポーネントを表します。

パネルコンポーネント

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

パネルプロパティ

プロパティ型デフォルト説明
side文字列パネルの位置。leftまたはrightを指定できます。
leftブール値side="left"のショートカットプロパティ
rightブール値side="right"のショートカットプロパティ
effect文字列パネルのエフェクト。cover、reveal、pushを指定できます。
coverブール値effect="cover"のショートカットプロパティ
revealブール値effect="reveal"のショートカットプロパティ
pushブール値effect="push"のショートカットプロパティ
floatingブール値effect="floating"のショートカットプロパティ
visible-breakpoint数値左パネルが常に表示されるアプリの最小幅（px）
collapsed-breakpoint数値左パネルが部分的に表示される（折り畳まれた状態）アプリの最小幅（px）
swipeブール値falseスワイプでパネルを開閉できるようにする場合に有効にします。
swipe-no-followブール値false古い/遅いデバイスでのパフォーマンス向上のためのフォールバックオプション。これを有効にすると、スワイプパネルはタッチ移動中に指を追従せず、左右にスワイプすると自動的に開閉されます。
swipe-active-area数値0パネルのスワイプをトリガーする画面からの見えない端の幅（px）
swipe-only-closeブール値falseこのパラメータにより、スワイプでパネルを閉じることができます（開くことはできません）。（swipeも有効にする必要があります）
swipe-threshold数値0「タッチ距離」がこの値（px）未満の場合、パネルはスワイプで動きません。
backdropブール値trueパネルのバックドロップ（パネルの後ろにある暗い半透明レイヤー）を有効にします。
backdrop-elHTMLElement
文字列		カスタムバックドロップ要素のHTML要素または文字列CSSセレクタ
close-by-backdrop-clickブール値trueパネルの外側をクリックしてパネルを閉じることができるかどうかを有効/無効にします。
resizableブール値falseサイズ変更可能なパネルを有効/無効にします。
container-elHTMLElement
文字列		パネルをマウントする要素（デフォルトはアプリのルート要素）
openedブール値パネルを開閉し、初期状態を設定できます。

パネルイベント

イベント説明
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.vue
<template>
  <f7-page id="panel-page">
    <f7-navbar title="Panel / Side panels"></f7-navbar>
    <f7-panel id="panel-nested" left cover container-el="#panel-page">
      <f7-page>
        <f7-block strong-ios outline-ios>
          <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 strong-ios outline-ios>
      <p>
        Framework7 comes with 2 panels (on left and on right), both are optional. You can put
        absolutely anything inside: data lists, forms, custom content, and even other isolated app
        view (like in right panel now) with its own dynamic navbar.
      </p>
    </f7-block>
    <f7-block strong-ios outline-ios>
      <p class="grid grid-cols-2 grid-gap">
        <f7-button raised fill panel-open="left"> Open left panel </f7-button>
        <f7-button raised fill panel-open="right"> Open right panel </f7-button>
      </p>
      <p>
        <f7-button raised fill panel-open="#panel-nested"> Open nested panel </f7-button>
      </p>
    </f7-block>
  </f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7Block, f7Button, f7Link, f7Panel } from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Block,
    f7Button,
    f7Link,
    f7Panel,
  },
};
</script>
このドキュメントを改善する
このページで