”;
Description
The side panel moves to the left or right side of the screen to display the content. Framework7 allows you to include up to 2 panels (right side panel and left side panel) to your app. You need to add panels in the beginning of the <body> and then choose the opening effect by applying the following listed classes −
-
panel-reveal − This will make the whole app”s content move out.
-
panel-cover − This will make the panel to overlay on app”s content.
For instance, the following code shows how to use the above classes −
<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>
The following table shows the panel types supported by Framework77 −
| S.No | 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. |
”;