Language: ENCN

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

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