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

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. <f7-app>
2. <!-- Left Panel with Reveal effect -->
3. <f7-panel left reveal>
4. <f7-view>
5. <f7-page>
6. <f7-block>Left panel content</f7-block>
7. </f7-view>
8. </f7-panel>

10. <!-- Right Panel with Cover effect and dark layout theme -->
11. <f7-panel right theme-dark>
12. <f7-view>
13. <f7-page>
14. <f7-block>Right panel content</f7-block>
15. </f7-view>
16. </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-view>
33. </f7-app>