Panel Vue Component

Panel Vue component represents Side Panels component.

Panel Components

There are following components included:

Panel Properties

PropTypeDefaultDescription
sidestringPanel side. Could be left or right
leftbooleanShortcut prop for side="left"
rightbooleanShortcut prop for side="right"
effectstringPanel effect. Can be cover, reveal or push
coverbooleanShortcut prop for effect="cover"
revealbooleanShortcut prop for effect="reveal"
pushbooleanShortcut prop for effect="push"
floatingbooleanShortcut prop for effect="floating"
visible-breakpointnumberMinimal app width (in px) when left panel becomes always visible
collapsed-breakpointnumberMinimal app width (in px) when left panel becomes partially visible (collapsed)
swipebooleanfalseEnable if you want to enable ability to open/close panel with swipe
swipe-no-followbooleanfalseFallback 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-areanumber0Width (in px) of invisible edge from the screen that triggers panel swipe
swipe-only-closebooleanfalseThis parameter allows to close (but not open) panel with swipes. (swipe should be also enabled)
swipe-thresholdnumber0Panel will not move with swipe if "touch distance" will be less than this value (in px).
backdropbooleantrueEnables Panel backdrop (dark semi transparent layer behind)
backdrop-elHTMLElement
string
HTML element or string CSS selector of custom backdrop element
close-by-backdrop-clickbooleantrueEnable/disable ability to close panel by clicking outside of panel
resizablebooleanfalseEnables/disables resizable panel
container-elHTMLElement
string
Element to mount panel to (default to app root element)
openedbooleanAllows to open/close panel and set its initial state

Panel Events

EventDescription
panel:openEvent will be triggered when Panel starts its opening animation
panel:openedEvent will be triggered after Panel completes its opening animation
panel:closeEvent will be triggered when Panel starts its closing animation
panel:closedEvent will be triggered after Panel completes its closing animation
panel:backdrop-clickEvent will be triggered when the panel backdrop is clicked
panel:swipeEvent will be triggered for swipe panels during touch swipe action
panel:swipeopenEvent will be triggered in the very beginning of opening it with swipe
panel:collapsedbreakpointEvent will be triggered when it becomes visible/hidden when app width matches its collapsedBreakpoint
panel:breakpointEvent 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:

Examples

panel.vue
<template>
  <f7-page id="panel-page">
    <f7-navbar title="Panel / Side panels"></f7-navbar>
    <f7-panel id="panel-nested" left cover container-el="#panel-page">
      <f7-page>
        <f7-block strong-ios outline-ios>
          <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 strong-ios outline-ios>
      <p>
        Framework7 comes with 2 panels (on left and on right), both are optional. You can put
        absolutely anything inside: data lists, forms, custom content, and even other isolated app
        view (like in right panel now) with its own dynamic navbar.
      </p>
    </f7-block>
    <f7-block strong-ios outline-ios>
      <p class="grid grid-cols-2 grid-gap">
        <f7-button raised fill panel-open="left"> Open left panel </f7-button>
        <f7-button raised fill panel-open="right"> Open right panel </f7-button>
      </p>
      <p>
        <f7-button raised fill panel-open="#panel-nested"> Open nested panel </f7-button>
      </p>
    </f7-block>
  </f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7Block, f7Button, f7Link, f7Panel } from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Block,
    f7Button,
    f7Link,
    f7Panel,
  },
};
</script>