パネルReactコンポーネント
Panel Reactコンポーネントは、Side Panelsコンポーネントを表します。
Panel コンポーネント
以下のコンポーネントが含まれています。
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"`のショートカットプロップ | |
visibleBreakpoint | number | 左パネルが常に表示されるようになったときのアプリの最小幅(px単位 | |
collapsedBreakpoint | number | 左パネルが部分的に表示される(折りたたまれる)場合のアプリの最小幅(px | |
swipe | boolean | false | スワイプでパネルを開閉する機能を有効にする場合は、Enableを選択します。 |
swipeNoFollow | boolean | false | 古いデバイスや遅いデバイスでのパフォーマンスを向上させる可能性のあるフォールバックオプションです。このオプションを有効にすると、タッチ操作時にスワイプパネルが指に追従せず、左右のスワイプで自動的に開閉されるようになります。 |
swipeActiveArea | number | 0 | パネルのスワイプを誘発するスクリーンからの見えないエッジの幅(px) |
swipeOnlyClose | boolean | false | このパラメータは、スワイプでパネルを閉じる(開かない)ことができます。(swipe も有効にしてください) |
swipeThreshold | number | 0 | touch distance" がこの値 (px) よりも小さい場合、パネルはスワイプでは動きません。 |
backdrop | boolean | true | パネルの背景を有効にします (背後にある暗い半透明のレイヤー) |
backdropEl | HTMLElement string | カスタム背景要素の HTML 要素または文字列 CSS セレクタ | |
closeByBackdropClick | boolean | true | パネルの外側をクリックしてパネルを閉じる機能の有効化/無効化 |
resizable | boolean | false | サイズ変更可能なパネルの有効化/無効化 |
containerEl | HTMLElement string | パネルをマウントする要素(デフォルトはアプリのルート要素 | |
opened | boolean | パネルの開閉や初期状態の設定を可能にする |
パネルのイベント
Event | Description |
---|---|
panelOpen | パネルがオープニングアニメーションを開始するとイベントが発生します。 |
panelOpened | パネルのオープニングアニメーションが完了すると、イベントが発生します。 |
panelClose | パネルが閉じるアニメーションを開始すると、イベントが発生します。 |
panelClosed | パネルが閉じるアニメーションが完了すると、イベントが発生します。 |
panelBackdropClick | パネルの背景がクリックされるとイベントが発生します。 |
panelSwipe | スワイプパネルの場合、タッチのスワイプ動作時にイベントが発生する |
panelSwipeOpen | イベントはスワイプでパネルを開いた最初の段階で発生します。 |
panelCollapsedBreakpoint | イベントは、アプリの幅が collapsedBreakpoint と一致したときに表示/非表示になるとトリガーされます。 |
panelBreakpoint | イベントは、アプリの幅が visibleBreakpoint と一致したときに、表示/非表示になるとトリガーされます。 |
パネルの開閉
パネルの状態を制御して、開いたり閉じたりすることができます。
- Panel APIを使用します。
- パネルの
opened
プロップにtrue
またはfalse
を渡します。 - リンクやボタンをクリックして、関連する
panelOpen
プロパティ(パネルを開く)やpanelClose
プロパティ(パネルを閉じる)を指定する。
Examples
import React from 'react';
import { App, Panel, View, Page, Block, Navbar, Row, Col, Button, Link } from 'framework7-react';
import './panel.css';
export default () => (
<App>
<Panel resizable left reveal>
<View>
<Page>
<Block>Left panel content</Block>
</Page>
</View>
</Panel>
<Panel resizable right themeDark>
<View>
<Page>
<Block>Right panel content</Block>
</Page>
</View>
</Panel>
<View main>
<Page id="panel-page">
<Navbar title="Panel"></Navbar>
<Panel left cover themeDark containerEl="#panel-page" id="panel-nested">
<Page>
<Block strong>
<p>This is page-nested Panel.</p>
<p>
<Link panelClose>Close me</Link>
</p>
</Block>
</Page>
</Panel>
<Block>
<Row tag="p">
<Col tag="span">
<Button raised fill panelOpen="left">
Open left panel
</Button>
</Col>
<Col tag="span">
<Button raised fill panelOpen="right">
Open right panel
</Button>
</Col>
</Row>
<Row tag="p">
<Col tag="span">
<Button raised fill panelOpen="#panel-nested">
Open nested panel
</Button>
</Col>
</Row>
</Block>
</Page>
</View>
</App>
);
/* panel.css */
.panel {
min-width: 100px;
max-width: 90vw;
}