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.
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.