Panel React Component

Panel React component represents Side Panels component.

Usage example

<!-- Left Panel with Reveal effect -->
<Panel left reveal>
  <!-- Left panel content goes here -->
<!-- Right Panel with Cover effect and dark layout -->
<Panel right cover layout="dark">
  <!-- Right panel content goes here -->

Renders to:

<div class="panel panel-left panel-reveal">...</div>
<div class="panel panel-right panel-cover layout-dark">...</div>


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"
theme string Panel theme color. One of default colors
layout string Panel layout theme. One of default layout themes
opened boolean Allows to open/close panel and set its initial state

Event Properties

Event Description
onPanelOpen Event will be triggered when Panel starts its opening animation
onPanelOpened Event will be triggered after Panel completes its opening animation
onPanelClose Event will be triggered when Panel starts its closing animation
onPanelClosed Event will be triggered after Panel completes its closing animation
onPanelOverlayClick Event will be triggered when the panel overlay is clicked
onPanelSwipe Event will be triggered for swipe panels during touch swipe action

Open and close Panel

You can control panel state, open and closing it:

  • using its JavaScript API
  • by passing true or false to its opened prop
  • by clicking on Link or Button with relevant openPanel property (to open it) and closePanel property to close it