Panel Vue Component

Panel Vue component represents Side Panels component.

Usage example

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

Events

Event Description
panel:open Event will be triggered when Panel starts its opening animation
panel:opened Event will be triggered after Panel completes its opening animation
panel:close Event will be triggered when Panel starts its closing animation
panel:closed Event will be triggered after Panel completes its closing animation
panel:overlay-click Event will be triggered when the panel overlay is clicked
panel:swipe Event will be triggered for swipe panels during touch swipe action

Methods

.open(animated) Open panel
.close(animated) Close panel

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 open-panel property (to open it) and close-panel property to close it