Framework7 - Side Panels

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.

Advertisements