Framework7 Side Panels - Framework7

What is the use of Side Panels in Framework7?


Side panel in Framework2, moves to left or right side of the screen, for displaying the content. Framework7 allows including up to 2 panels (right side panel and left side panel) in the app. Users need to add panels in the beginning of the <body> and then choose opening effect by applying the classes listed below:

  • panel-reveal - This moves out whole app's content.
  • panel-cover - This makes the panel to overlay on app's content.

For example, below code shows how to use above classes:

Below table shows the panel types supported by the Framework7:


Type & Description


Open and Close Panels
After adding panel and effects, user needs to add functionality to open and close the panels.


Panel Events
Panel events can be used to detect how user interacts with the panel.


Open Panels With Swipe
Framework7 provides a feature to open the panel with swipe gesture.


Panel is Opened?
Using with-panel-[position]-[effect] rule, it is easy to determine whether panel is opened or not.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

Framework7 Topics