Panel Vue component represents Side Panels component.
<!-- Left Panel with Reveal effect -->
<f7-panel left reveal>
<!-- Left panel content goes here -->
</f7-panel>
<!-- Right Panel with Cover effect and dark layout -->
<f7-panel right cover layout="dark">
<!-- Right panel content goes here -->
</f7-panel>
Renders to:
<div class="panel panel-left panel-reveal">...</div>
<div class="panel panel-right panel-cover layout-dark">...</div>
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" |
|
theme | string | Panel theme color. One of default colors | |
layout | string | Panel layout theme. One of default layout themes | |
opened | boolean | Allows to open/close panel and set its initial state |
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:overlay-click | Event will be triggered when the panel overlay is clicked |
panel:swipe | Event will be triggered for swipe panels during touch swipe action |
.open(animated) | Open panel |
.close(animated) | Close panel |
You can control panel state, open and closing it:
opened
propopen-panel
property (to open it) and close-panel
property to close it