🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool!

Panel React Component

Panel React component represents Side Panels component.

Panel Components

There are following components included:

Panel Properties

PropTypeDefaultDescription
sidestringPanel side. Could be left or right
leftbooleanShortcut prop for side="left"
rightbooleanShortcut prop for side="right"
effectstringPanel effect. Can be cover, reveal, floating or push
coverbooleanShortcut prop for effect="cover"
revealbooleanShortcut prop for effect="reveal"
pushbooleanShortcut prop for effect="push"
floatingbooleanShortcut prop for effect="floating"
visibleBreakpointnumberMinimal app width (in px) when left panel becomes always visible
collapsedBreakpointnumberMinimal app width (in px) when left panel becomes partially visible (collapsed)
swipebooleanfalseEnable if you want to enable ability to open/close panel with swipe
swipeNoFollowbooleanfalseFallback 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.
swipeActiveAreanumber0Width (in px) of invisible edge from the screen that triggers panel swipe
swipeOnlyClosebooleanfalseThis parameter allows to close (but not open) panel with swipes. (swipe should be also enabled)
swipeThresholdnumber0Panel will not move with swipe if "touch distance" will be less than this value (in px).
backdropbooleantrueEnables Panel backdrop (dark semi transparent layer behind)
backdropElHTMLElement
string
HTML element or string CSS selector of custom backdrop element
closeByBackdropClickbooleantrueEnable/disable ability to close panel by clicking outside of panel
resizablebooleanfalseEnables/disables resizable panel
containerElHTMLElement
string
Element to mount panel to (default to app root element)
openedbooleanAllows to open/close panel and set its initial state

Panel Events

EventDescription
panelOpenEvent will be triggered when Panel starts its opening animation
panelOpenedEvent will be triggered after Panel completes its opening animation
panelCloseEvent will be triggered when Panel starts its closing animation
panelClosedEvent will be triggered after Panel completes its closing animation
panelBackdropClickEvent will be triggered when the panel backdrop is clicked
panelSwipeEvent will be triggered for swipe panels during touch swipe action
panelSwipeOpenEvent will be triggered in the very beginning of opening it with swipe
panelCollapsedBreakpointEvent will be triggered when it becomes visible/hidden when app width matches its collapsedBreakpoint
panelBreakpointEvent 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:

Examples

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>
);