Panel Svelte Component

Panel Components
Panel Properties
Panel Events
Open And Close Panel
Access To Panel Instance
Examples

Panel Svelte component represents Side Panels component.

Panel Components

There are following components included:

Panel - Panel element

Panel Properties

Prop	Type	Default	Description
side	string		Panel side. Could be `left` or `right`
left	boolean		Shortcut prop for `side="left"`
right	boolean		Shortcut prop for `side="right"`
effect	string		Panel effect. Can be `cover`, `reveal` or `push`
cover	boolean		Shortcut prop for `effect="cover"`
reveal	boolean		Shortcut prop for `effect="reveal"`
push	boolean		Shortcut prop for `effect="push"`
visibleBreakpoint	number		Minimal app width (in px) when left panel becomes always visible
collapsedBreakpoint	number		Minimal app width (in px) when left panel becomes partially visible (collapsed)
swipe	boolean	false	Enable if you want to enable ability to open/close panel with swipe
swipeNoFollow	boolean	false	Fallback option for potentially better performance on old/slow devices. If you enable it, then swipe panel will not follow your finger during touch move, it will be automatically opened/closed on swipe left/right.
swipeActiveArea	number	0	Width (in px) of invisible edge from the screen that triggers panel swipe
swipeOnlyClose	boolean	false	This parameter allows to close (but not open) panel with swipes. (`swipe` should be also enabled)
swipeThreshold	number	0	Panel will not move with swipe if "touch distance" will be less than this value (in px).
backdrop	boolean	true	Enables Panel backdrop (dark semi transparent layer behind)
backdropEl	HTMLElement string		HTML element or string CSS selector of custom backdrop element
closeByBackdropClick	boolean	true	Enable/disable ability to close panel by clicking outside of panel
resizable	boolean	false	Enables/disables resizable panel
containerEl	HTMLElement string		Element to mount panel to (default to app root element)
opened	boolean		Allows to open/close panel and set its initial state

Panel Events

Event	Description
panelOpen	Event will be triggered when Panel starts its opening animation
panelOpened	Event will be triggered after Panel completes its opening animation
panelClose	Event will be triggered when Panel starts its closing animation
panelClosed	Event will be triggered after Panel completes its closing animation
panelBackdropClick	Event will be triggered when the panel backdrop is clicked
panelSwipe	Event will be triggered for swipe panels during touch swipe action
panelSwipeOpen	Event will be triggered in the very beginning of opening it with swipe
panelCollapsedBreakpoint	Event will be triggered when it becomes visible/hidden when app width matches its `collapsedBreakpoint`
panelBreakpoint	Event will be triggered when it becomes visible/hidden when app width matches its `visibleBreakpoint`

Open And Close Panel

You can control panel state, open and closing it:

using Panel API
by passing true or false to its opened prop
by clicking on Link or Button with relevant panelOpen property (to open it) and panelClose property to close it

Access To Panel Instance

You can access Panel initialized instance by calling .instance() component's method. For example:

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

<script>
  let component;

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

Examples

<App>
  <Panel resizable left reveal>
    <View>
      <Page>
        <Block>Left panel content</Block>
      </Page>
    </View>
  </Panel>
  <Panel resizable right dark>
    <View>
      <Page>
        <Block>Right panel content</Block>
      </Page>
    </View>
  </Panel>
  <View main>
    <Page>
      <Navbar title="Panel"></Navbar>

      <Panel left cover dark 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>