Framework7 Tutorial
Framework7 Components
Framework7 Styling
Framework7 Templates
Framework7 Fast Clicks
Framework7 Useful Resources
Selected Reading
Framework7 Components
- Framework7 - Lazy Load
- Framework7 - Notifications
- Framework7 - Message Bar
- Framework7 - Messages
- Framework7 - Infinite Scroll
- Framework7 - Refresh
- Framework7 - Calendar
- Framework7 - Picker
- Framework7 - Autocomplete
- Framework7 - Photo Browser
- Framework7 - Swiper Slider
- Framework7 - Tabs
- Framework7 - Forms
- Framework7 - Action Button
- Framework7 - Buttons
- Framework7 - Chips
- Framework7 - Cards
- Framework7 - Accordion
- Framework7 - List Views
- Framework7 - Progress Bar
- Framework7 - Preloaders
- Framework7 - Overlays
- Framework7 - Layout Grid
- Framework7 - Content Block
- Framework7 - Side Panels
- Framework7 - Status Bar
- Framework7 - Search Bar
- Framework7 - Toolbars
- Framework7 - Navbars
- Framework7 - Layouts
Framework7 Styling
Framework7 Templates
Framework7 Fast Clicks
Framework7 Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Framework7 - Side Panels
Framework7 - Side Panels
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 psted 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 -->
<span class = "panel-overlay"></span>
<!-- Left panel -->
<span class = "panel panel-left panel-cover">
panel s content
</span>
<!-- Right panel -->
<span class = "panel panel-right panel-reveal">
panel s content
</span>
</body>
The following table shows the panel types supported by Framework77 −
| S.No | Type & Description |
|---|---|
| 1 |
Once you add panel and effects, we need to add functionapty to open and close the panels. |
| 2 |
To detect how a user interacts with the panel, you can use panel events. |
| 3 |
Framework7 provides you the feature to open panel with swipe gesture. |
| 4 |
We can determine whether panel is opened or not by using the with-panel[position]-[effect] rule. |