Panel / Side Panels - 图1

Panel React Component

Panel React component represents Side Panels component.

Panel Components

There are following components included:

  • **Panel** / **F7Panel** - 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
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
panelBreakpoint 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 panelOpen property (to open it) and panelClose 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. <App>
2. {/* Left resizable Panel with Reveal effect */}
3. <Panel left reveal resizable>
4. <View>
5. <Page>
6. <Block>Left panel content</Block>
7. </Page>
8. </View>
9. </Panel>

11. {/* Right resizable Panel with Cover effect and dark layout theme */}
12. <Panel right resizable themeDark>
13. <View>
14. <Page>
15. <Block>Right panel content</Block>
16. </Page>
17. </View>
18. </Panel>

20. {/* Main view */}
21. <View main>
22. <Page>
23. <Navbar title="Panel"></Navbar>

25. <Block className="row">
26. <Col>
27. <Button raised panelOpen="left">Open left panel</Button>
28. </Col>
29. <Col>
30. <Button raised panelOpen="right">Open right panel</Button>
31. </Col>
32. </Block>
33. </Page>
34. </View>
35. </App>