Panel React Component

Panel React component represents Side Panels component.

Panel Components

There are following components included:

  • Panel / F7Panel - Panel element

Panel Properties

PropTypeDefaultDescription
sidestringPanel side. Could be left or right
leftbooleanShortcut prop for side="left"
rightbooleanShortcut prop for side="right"
effectstringPanel effect. Could be cover or reveal
coverbooleanShortcut prop for effect="cover"
revealbooleanShortcut prop for effect="reveal"
openedbooleanAllows to open/close panel and set its initial state
resizablebooleanfalseEnables/disables resizable panel

Panel Methods

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

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
panelBreakpointEvent 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

/* Limit resizable panel width */
.panel {
  min-width: 100px;
  max-width: 90vw;
}
<App>
  {/* Left resizable Panel with Reveal effect */}
  <Panel left reveal resizable>
    <View>
      <Page>
        <Block>Left panel content</Block>
      </Page>
    </View>
  </Panel>

  {/* Right resizable Panel with Cover effect and dark layout theme */}
  <Panel right resizable 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>