Description
The side panel moves to 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 opening effect by applying the below listed classes:- panel-reveal - This will moves out whole app's content.
- panel-cover - This will 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>The below table shows the panel types supported by the Framework7:
| S.N. | 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 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. |
No comments:
Post a Comment