Get Started
Vue Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List

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