パネル Svelte コンポーネント

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

パネルコンポーネント

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

Panel - パネル要素

パネルプロパティ

プロパティ	型	デフォルト	説明
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"`のショートカットプロパティ
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プロパティを使用して閉じます。

パネルインスタンスへのアクセス

.instance()コンポーネントのメソッドを呼び出すことで、初期化されたパネルインスタンスにアクセスできます。例：

<Panel bind:this={component}>...</Panel>

<script>
  let component;

  // to get instance in some method
  component.instance()
</script>

例

panel.svelte

<script>
  import { Navbar, Page, Block, Button, Panel, Link } from 'framework7-svelte';
</script>

<Page id="panel-page">
  <Navbar title="Panel / Side panels" />
  <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 class="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>

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

このページについて

パネルコンポーネント
パネルプロパティ
パネルイベント
パネルの開閉
パネルインスタンスへのアクセス
例