パネル・Svelte・コンポーネント

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

パネルコンポーネント

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

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 プロパティを指定してクリックします。

Panel インスタンスへのアクセス

.instance()`コンポーネントのメソッドを呼び出すことで、Panelの初期化されたインスタンスにアクセスすることができます。例えば、以下のようになります。

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

<script>
  let component;

  // あるメソッドでインスタンスを取得する
  component.instance()
</script>

Examples

<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>
      <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>
<style>
  /* Limit resizable panel width */
  :global(.panel) {
    min-width: 100px;
    max-width: 90vw;
  }
</style>
<script>
  import {App, Panel, View, Page, Block, Navbar, Col, Button, Row, Link} from 'framework7-svelte';
</script>