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" | |
visible-breakpoint | number | Minimal app width (in px) when left panel becomes always visible | |
collapsed-breakpoint | number | Minimal app width (in px) when left panel becomes partially visible (collapsed) | |
swipe | boolean | false | Enable if you want to enable ability to open/close panel with swipe |
swipe-no-follow | boolean | false | Fallback option for potentially better performance on old/slow devices. If you enable it, then swipe panel will not follow your finger during touch move, it will be automatically opened/closed on swipe left/right. |
swipe-active-area | number | 0 | Width (in px) of invisible edge from the screen that triggers panel swipe |
swipe-only-close | boolean | false | This parameter allows to close (but not open) panel with swipes. (swipe should be also enabled) |
swipe-threshold | number | 0 | Panel will not move with swipe if "touch distance" will be less than this value (in px). |
backdrop | boolean | true | Enables Panel backdrop (dark semi transparent layer behind) |
backdrop-el | HTMLElement string | HTML element or string CSS selector of custom backdrop element | |
close-by-backdrop-click | boolean | true | Enable/disable ability to close panel by clicking outside of panel |
resizable | boolean | false | Enables/disables resizable panel |
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:collapsedbreakpoint | Event will be triggered when it becomes visible/hidden when app width matches its collapsedBreakpoint |
panel:breakpoint | Event will be triggered when it becomes visible/hidden when app width matches its visibleBreakpoint |
Open And Close Panel
You can control panel state, open and closing it:
- using Panel API
- by passing
true
orfalse
to itsopened
prop - by clicking on Link or Button with relevant
panel-open
property (to open it) andpanel-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>