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 -->
</Panel>
 
<!-- Right Panel with Cover effect and dark layout -->
<Panel right cover layout="dark">
  <!-- Right panel content goes here -->
</Panel>

Renders to:

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

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