Panel Vue Component

Panel Vue component represents Side Panels component.

Panel Components

There are following components included:

  • f7-panel - Panel element

Panel 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"
opened boolean Allows to open/close panel and set its initial state

Panel Methods

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

Panel 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:backdrop-click Event will be triggered when the panel backdrop is clicked
panel:swipe Event will be triggered for swipe panels during touch swipe action
panel:swipeopen Event will be triggered in the very beginning of opening it with swipe
panel:breakpoint Event will be triggered when it becomes visible/hidden when app width matches its breakpoint

Open And Close Panel

You can control panel state, open and closing it:

  • using Panel API
  • by passing true or false to its opened prop
  • by clicking on Link or Button with relevant panel-open property (to open it) and panel-close property to close it

Access To Panel Instance

You can access Panel initialized instance by accessing .f7Panel component's property.


<!-- Left Panel with Reveal effect -->
<f7-panel left reveal>
  <!-- Left panel content goes here -->

<!-- Right Panel with Cover effect and dark layout theme -->
<f7-panel right cover class="theme-dark">
  <!-- Right panel content goes here -->

Renders to:

<div class="panel panel-left panel-reveal">
<div class="panel panel-right panel-cover theme-dark">