The Framework7 side panel is used to move left or right side of the screen to display the content. In Framework7, you can include maximum 2 panels (right side panel and left side panel) in your app. Panels are added in the beginning of the and then chosen the opening effect by applying the following classes:
panel-reveal: This class is used to make the whole app’s content move out.
panel-cover: This class is used to make the panel to overlay on app’s content.
Syntax
<body>
<!-- First add Panel's overlay which will overlays app while panel is opened -->
<div class = "panel-overlay"></div>
<!-- Left panel -->
<div class = "panel panel-left panel-cover">
panel's content
</div>
<!-- Right panel -->
<div class = "panel panel-right panel-reveal">
panel's content
</div>
</body>
Panel Types supported by Framework7
Following is a list of panel types supported by Framework7:
| Index | Type | Description |
|---|---|---|
| 1) | Open and Close Panels | Once you add panel and effects, we need to add functionality to open and close the panels. |
| 2) | Panel Events | To detect how a user interacts with the panel, you can use panel events. |
| 3) | Open Panels With Swipe | Framework7 provides you the feature to open panel with swipe gesture. |
| 4) | Panel is Opened? | We can determine whether panel is opened or not by using the with-panel[position]-[effect] rule. |
Toolbars
Toolbars use navigation elements at the bottom of the screen to provide easy access to other pages. Toolbars can be used in following ways:
| Index | Toolbar Type | Description |
|---|---|---|
| 1) | Hide Toolbar | You can hide the toolbar automatically when you load the pages by using the no-toolbar class to loaded page. |
| 2) | Bottom Toolbar | Place the toolbar at the bottom of the page by using the toolbar-bottom class. |
Next Topic:-Click Here
Pingback: Framework7 Navbars - Adglob Infosystem Pvt Ltd