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"
visibleBreakpointnumberMinimal app width (in px) when left panel becomes always visible
collapsedBreakpointnumberMinimal app width (in px) when left panel becomes partially visible (collapsed)
swipebooleanfalseEnable if you want to enable ability to open/close panel with swipe
swipeActiveAreanumber0Width (in px) of invisible edge from the screen that triggers panel swipe
swipeOnlyClosebooleanfalseThis parameter allows to close (but not open) panel with swipes. (swipe should be also enabled)
swipeThresholdnumber0Panel will not move with swipe if "touch distance" will be less than this value (in px).
backdropbooleantrueEnables Panel backdrop (dark semi transparent layer behind)
backdropElHTMLElement
string
HTML element or string CSS selector of custom backdrop element
closeByBackdropClickbooleantrueEnable/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>