Panel React Component
Panel React 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 , floating or push | |
cover | boolean | Shortcut prop for effect="cover" | |
reveal | boolean | Shortcut prop for effect="reveal" | |
push | boolean | Shortcut prop for effect="push" | |
floating | boolean | Shortcut prop for effect="floating" | |
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
orfalse
to itsopened
prop - by clicking on Link or Button with relevant
panelOpen
property (to open it) andpanelClose
property to close 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>
);