Panel React Component

    Panel React component represents Side Panels component.

    Panel Components

    There are following components included:

    • Panel / F7Panel - 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. 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.


      {/* Left Panel with Reveal effect */}
      <Panel left reveal>
            <Block>Left panel content</Block>
      {/* Right Panel with Cover effect and dark layout theme */}
      <Panel right themeDark>
            <Block>Right panel content</Block>
      {/* Main view */}
      <View main>
          <Navbar title="Panel"></Navbar>
          <Block className="row">
              <Button raised panelOpen="left">Open left panel</Button>
              <Button raised panelOpen="right">Open right panel</Button>