Framework7 - Side Panels

Advertisements

Previous Page
Next Page  

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