Panel / Side Panels - 图1

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 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”
opened boolean Allows to open/close panel and set its initial state
resizable boolean false Enables/disables resizable panel

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

1. /* Limit resizable panel width */
2. .panel {
3. min-width: 100px;
4. max-width: 90vw;
5. }

1. <f7-app>
2. <!-- Left resizable Panel with Reveal effect -->
3. <f7-panel left reveal resizable>
4. <f7-view>
5. <f7-page>
6. <f7-block>Left panel content</f7-block>
7. </f7-page>
8. </f7-view>
9. </f7-panel>

11. <!-- Right resizable Panel with Cover effect and dark layout theme -->
12. <f7-panel right resizable theme-dark>
13. <f7-view>
14. <f7-page>
15. <f7-block>Right panel content</f7-block>
16. </f7-page>
17. </f7-view>
18. </f7-panel>

20. <!-- Main view -->
21. <f7-view main>
22. <f7-page>
23. <f7-navbar title="Panel"></f7-navbar>

25. <f7-block class="row">
26. <f7-col>
27. <f7-button raised panel-open="left">Open left panel</f7-button>
28. </f7-col>
29. <f7-col>
30. <f7-button raised panel-open="right">Open right panel</f7-button>
31. </f7-col>
32. </f7-block>
33. </f7-page>
34. </f7-view>
35. </f7-app>