Get Started
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
- Forms
  - Checkboxes & Radios
  - Form Elements
  - Smart Select
- Icon
- Grid / Layout Grid
- Lists
  - List
  - List Item
  - List Button
  - Accordion List
  - Contacts List
  - Sortable List
  - Swipeout List
  - Virtual List
- Link
- Messages
- Message Bar
- Modals
  - Action Sheet
  - Login Screen
  - Picker Modal
  - Popover
  - Popup
- Navigation Bars
  - Navbar
  - Toolbar/Tabbar
  - Sub Navbar
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View

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