-
Get Started
-
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
-
Forms
- Icon
- Grid / Layout Grid
-
Lists
- Link
- Messages
- Message Bar
-
Modals
-
Navigation Bars
- 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 | 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) andclosePanel
property to close it