Panel Vue Component

• Panel Components
• Panel Methods
• Open And Close Panel
• Examples

• - Panel element

Panel Properties

Panel Events

• using
• by passing true or false to its opened prop

Access To Panel Instance

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