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

Examples

<f7-app>
  <!-- Left Panel with Reveal effect -->
  <f7-panel left reveal>
    <f7-view>
      <f7-page>
        <f7-block>Left panel content</f7-block>
    </f7-view>
  </f7-panel>

  <!-- Right Panel with Cover effect and dark layout theme -->
  <f7-panel right theme-dark>
    <f7-view>
      <f7-page>
        <f7-block>Right panel content</f7-block>
    </f7-view>
  </f7-panel>

  <!-- Main view -->
  <f7-view main>
    <f7-page>
      <f7-navbar title="Panel"></f7-navbar>

      <f7-block class="row">
        <f7-col>
          <f7-button raised panel-open="left">Open left panel</f7-button>
        </f7-col>
        <f7-col>
          <f7-button raised panel-open="right">Open right panel</f7-button>
        </f7-col>
      </f7-block>
    </f7-page>
  </f7-view>
</f7-app>