Panel Vue Component

Panel Vue Component

Panel Components
Panel Properties
Panel Methods
Panel Events
Open And Close Panel
Access To Panel Instance
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. 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
resizable	boolean	false	Enables/disables resizable panel

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

/* 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>

Panel / Side Panels