Panel / Side Panels - 图1

Panel Svelte Component

Panel Svelte component represents Side Panels component.

Panel Components

There are following components included:

  • 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”
visibleBreakpoint number Minimal app width (in px) when left panel becomes always visible
collapsedBreakpoint 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
swipeNoFollow 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.
swipeActiveArea number 0 Width (in px) of invisible edge from the screen that triggers panel swipe
swipeOnlyClose boolean false This parameter allows to close (but not open) panel with swipes. (swipe should be also enabled)
swipeThreshold 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)
backdropEl HTMLElement string HTML element or string CSS selector of custom backdrop element
closeByBackdropClick 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
panelOpen Event will be triggered when Panel starts its opening animation
panelOpened Event will be triggered after Panel completes its opening animation
panelClose Event will be triggered when Panel starts its closing animation
panelClosed Event will be triggered after Panel completes its closing animation
panelBackdropClick Event will be triggered when the panel backdrop is clicked
panelSwipe Event will be triggered for swipe panels during touch swipe action
panelSwipeOpen Event will be triggered in the very beginning of opening it with swipe
panelCollapsedBreakpoint Event will be triggered when it becomes visible/hidden when app width matches its collapsedBreakpoint
panelBreakpoint 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 or false to its opened prop
  • by clicking on Link or Button with relevant panelOpen property (to open it) and panelClose property to close it

Access To Panel Instance

You can access Panel initialized instance by calling .instance() component’s method. For example:

1. <Panel bind:this={component}>...</Panel>

3. <script>
4. let component;

6. // to get instance in some method
7. component.instance()
8. </script>

Examples

1. <App>
2. <Panel resizable left reveal>
3. <View>
4. <Page>
5. <Block>Left panel content</Block>
6. </Page>
7. </View>
8. </Panel>
9. <Panel resizable right themeDark>
10. <View>
11. <Page>
12. <Block>Right panel content</Block>
13. </Page>
14. </View>
15. </Panel>
16. <View main>
17. <Page>
18. <Navbar title="Panel"></Navbar>

20. <Block class="row">
21. <Col>
22. <Button raised fill panelOpen="left">Open left panel</Button>
23. </Col>
24. <Col>
25. <Button raised fill panelOpen="right">Open right panel</Button>
26. </Col>
27. </Block>
28. </Page>
29. </View>
30. </App>
31. <style>
32. /* Limit resizable panel width */
33. :global(.panel) {
34. min-width: 100px;
35. max-width: 90vw;
36. }
37. </style>
38. <script>
39. import {App, Panel, View, Page, Block, Navbar, Col, Button} from 'framework7-svelte';
40. </script>

← Page

Photo Browser →