Panel Vue Component

    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

    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

    <f7-app>
      <!-- Left Panel with Reveal effect -->
      <f7-panel left reveal>
        <f7-view>
          <f7-page>
            <f7-block>Left panel content</f7-block>
        </f7-view>
      </f7-panel>
    
      <!-- Right Panel with Cover effect and dark layout theme -->
      <f7-panel right theme-dark>
        <f7-view>
          <f7-page>
            <f7-block>Right panel content</f7-block>
        </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>