Get Started
React Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List

Panel React Component

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

Panel React component represents Side Panels component.

Panel Components

There are following components included:

Panel / F7Panel - Panel element

Panel Properties

Prop	Type	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. Could be `cover` or `reveal`
cover	boolean	Shortcut prop for `effect="cover"`
reveal	boolean	Shortcut prop for `effect="reveal"`
opened	boolean	Allows to open/close panel and set its initial state

Panel Methods

.open(animate)	Open panel
.close(animate)	Close panel

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
panelBreakpoint	Event will be triggered when it becomes visible/hidden when app width matches its breakpoint

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 accessing .f7Panel component's property.

Examples

<App>
  {/* Left Panel with Reveal effect */}
  <Panel left reveal>
    <View>
      <Page>
        <Block>Left panel content</Block>
      </Page>
    </View>
  </Panel>

  {/* Right Panel with Cover effect and dark layout theme */}
  <Panel right themeDark>
    <View>
      <Page>
        <Block>Right panel content</Block>
      </Page>
    </View>
  </Panel>

  {/* Main view */}
  <View main>
    <Page>
      <Navbar title="Panel"></Navbar>

      <Block className="row">
        <Col>
          <Button raised panelOpen="left">Open left panel</Button>
        </Col>
        <Col>
          <Button raised panelOpen="right">Open right panel</Button>
        </Col>
      </Block>
    </Page>
  </View>
</App>