Panel Vue Component

Panel Vue component represents Side Panels component.

Panel Components

There are following components included:

  • f7-panel - Panel element

Panel Properties

PropTypeDefaultDescription
sidestringPanel side. Could be left or right
leftbooleanShortcut prop for side="left"
rightbooleanShortcut prop for side="right"
effectstringPanel effect. Could be cover or reveal
coverbooleanShortcut prop for effect="cover"
revealbooleanShortcut prop for effect="reveal"
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
openedbooleanAllows to open/close panel and set its initial state

Panel Methods

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

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

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

/* Limit resizable panel width */
.panel {
  min-width: 100px;
  max-width: 90vw;
}
<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>

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