パネル React コンポーネント

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

パネルコンポーネント

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

Panel - パネル要素

パネルプロパティ

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

パネルイベント

イベント	説明
panelOpen	パネルが開くアニメーションを開始したときにトリガーされます。
panelOpened	パネルが開くアニメーションが完了した後にトリガーされます。
panelClose	パネルが閉じるアニメーションを開始したときにトリガーされます。
panelClosed	パネルが閉じるアニメーションが完了した後にトリガーされます。
panelBackdropClick	パネルのバックドロップがクリックされたときにトリガーされます。
panelSwipe	タッチスワイプアクション中にスワイプパネルに対してトリガーされます。
panelSwipeOpen	スワイプで開くまさに最初の段階でトリガーされます。
panelCollapsedBreakpoint	アプリの幅が`collapsedBreakpoint`と一致したときに表示/非表示になったときにトリガーされます。
panelBreakpoint	アプリの幅が`visibleBreakpoint`と一致したときに表示/非表示になったときにトリガーされます。

パネルを開閉する

パネルの状態を制御し、開閉できます。

パネルAPIを使用する
openedプロパティにtrueまたはfalseを渡すことによって
関連するpanelOpenプロパティを持つリンクまたはボタンをクリックすることによって（開く場合）、panelCloseプロパティを使用して閉じる

例

panel.jsx

import React from 'react';
import { Navbar, Page, Block, Button, Link, Panel } from 'framework7-react';

export default () => (
  <Page id="panel-page">
    <Navbar title="Panel / Side panels"></Navbar>
    <Panel left cover containerEl="#panel-page" id="panel-nested">
      <Page>
        <Block strongIos outlineIos>
          <p>This is page-nested Panel.</p>
          <p>
            <Link panelClose>Close me</Link>
          </p>
        </Block>
      </Page>
    </Panel>
    <Block strongIos outlineIos>
      <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>
    </Block>
    <Block strongIos outlineIos>
      <p className="grid grid-cols-2 grid-gap">
        <Button raised fill panelOpen="left">
          Open left panel
        </Button>
        <Button raised fill panelOpen="right">
          Open right panel
        </Button>
      </p>
      <p>
        <Button raised fill panelOpen="#panel-nested">
          Open nested panel
        </Button>
      </p>
    </Block>
  </Page>
);

このドキュメントを改善する

このページについて

パネルコンポーネント
パネルプロパティ
パネルイベント
パネルを開閉する
例