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.
<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>
Panel Types supported by Framework7
Following is a list of panel types supported by Framework7:
|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.|
Toolbars use navigation elements at the bottom of the screen to provide easy access to other pages. Toolbars can be used in following ways:
|1)||Hide Toolbar||You can hide the toolbar automatically when you load the pages by using the no-toolbar class to loaded page.|
|2)||Bottom Toolbar||Place the toolbar at the bottom of the page by using the toolbar-bottom class.|
Next Topic:-Click Here