Panel Vue Component

Panel Components
Panel Properties
Panel Events
Panel v-model
Open And Close Panel
Examples

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. Can be `cover`, `reveal` or `push`
cover	boolean		Shortcut prop for `effect="cover"`
reveal	boolean		Shortcut prop for `effect="reveal"`
push	boolean		Shortcut prop for `effect="push"`
visible-breakpoint	number		Minimal app width (in px) when left panel becomes always visible
collapsed-breakpoint	number		Minimal app width (in px) when left panel becomes partially visible (collapsed)
swipe	boolean	false	Enable if you want to enable ability to open/close panel with swipe
swipe-no-follow	boolean	false	Fallback option for potentially better performance on old/slow devices. If you enable it, then swipe panel will not follow your finger during touch move, it will be automatically opened/closed on swipe left/right.
swipe-active-area	number	0	Width (in px) of invisible edge from the screen that triggers panel swipe
swipe-only-close	boolean	false	This parameter allows to close (but not open) panel with swipes. (`swipe` should be also enabled)
swipe-threshold	number	0	Panel will not move with swipe if "touch distance" will be less than this value (in px).
backdrop	boolean	true	Enables Panel backdrop (dark semi transparent layer behind)
backdrop-el	HTMLElement string		HTML element or string CSS selector of custom backdrop element
close-by-backdrop-click	boolean	true	Enable/disable ability to close panel by clicking outside of panel
resizable	boolean	false	Enables/disables resizable panel
container-el	HTMLElement string		Element to mount panel to (default to app root element)
opened	boolean		Allows to open/close panel and set its initial state

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:collapsedbreakpoint	Event will be triggered when it becomes visible/hidden when app width matches its `collapsedBreakpoint`
panel:breakpoint	Event will be triggered when it becomes visible/hidden when app width matches its `visibleBreakpoint`

Panel v-model

Panel component supports v-model on opened prop:

<template>
  <f7-page>
    <f7-panel v-model:opened="isOpened">
      ...
    </f7-panel>
    <p>Panel is opened: {{ isOpened }}</p>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        isOpened: false,
      };
    }
  };
</script>

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

Examples

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

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

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

        <f7-panel id="panel-nested" theme-dark left cover container-el="#panel-page">
          <f7-page>
            <f7-block strong>
              <p>This is page-nested Panel.</p>
              <p>
                <f7-link panel-close>Close me</f7-link>
              </p>
            </f7-block>
          </f7-page>
        </f7-panel>

        <f7-block>
          <f7-row tag="p">
            <f7-col tag="span">
              <f7-button raised fill panel-open="left"> Open left panel </f7-button>
            </f7-col>
            <f7-col tag="span">
              <f7-button raised fill panel-open="right"> Open right panel </f7-button>
            </f7-col>
          </f7-row>
          <f7-row tag="p">
            <f7-col tag="span">
              <f7-button raised fill panel-open="#panel-nested"> Open nested panel </f7-button>
            </f7-col>
          </f7-row>
        </f7-block>
      </f7-page>
    </f7-view>
  </f7-app>
</template>
<style>
/* Limit resizable panel width */
.panel {
  min-width: 100px;
  max-width: 90vw;
}
</style>