Panel Vue Component

    Panel Vue component represents Side Panels component.

    • - Panel element

    Panel Properties

    Panel Events

    You can control panel state, open and closing it:

    • using
    • by passing true or false to its opened prop
    • by clicking on Link or with relevant panel-open property (to open it) and panel-close property to close it

    Access To Panel Instance

    1. <f7-app>
    2.   <!-- Left resizable Panel with Reveal effect -->
    3.   <f7-panel left reveal resizable>
    4.       <f7-page>
    5.         <f7-block>Left panel content</f7-block>
    6.       </f7-page>
    7.     </f7-view>
    8.   </f7-panel>
    10.   <!-- Right resizable Panel with Cover effect and dark layout theme -->
    11.   <f7-panel right resizable theme-dark>
    12.     <f7-view>
    13.       <f7-page>
    14.         <f7-block>Right panel content</f7-block>
    15.       </f7-page>
    17.   </f7-panel>
    18.   <!-- Main view -->
    19.   <f7-view main>
    20.     <f7-page>
    21.       <f7-navbar title="Panel"></f7-navbar>
    23.       <f7-block class="row">
    24.         <f7-col>
    25.           <f7-button raised panel-open="left">Open left panel</f7-button>
    26.         </f7-col>
    27.         <f7-col>
    28.           <f7-button raised panel-open="right">Open right panel</f7-button>
    29.         </f7-col>
    30.       </f7-block>
    31.     </f7-page>
    32. </f7-app>