Framework7 Side Panels

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.