Framework7 Side Panels

side panel

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.


   <!-- 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  
   <!-- Right panel -->  
   <div class = "panel panel-right panel-reveal">  
      panel's content  

Panel Types supported by Framework7

Following is a list of panel types supported by Framework7:

1)Open and Close PanelsOnce you add panel and effects, we need to add functionality to open and close the panels.
2)Panel EventsTo detect how a user interacts with the panel, you can use panel events.
3)Open Panels With SwipeFramework7 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.


Toolbars use navigation elements at the bottom of the screen to provide easy access to other pages. Toolbars can be used in following ways:

IndexToolbar TypeDescription
1)Hide ToolbarYou can hide the toolbar automatically when you load the pages by using the no-toolbar class to loaded page.
2)Bottom ToolbarPlace the toolbar at the bottom of the page by using the toolbar-bottom class.

Next Topic:-Click Here

This Post Has One Comment

Leave a Reply