Sunday, February 19, 2017

Framework7 - Side Panels

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.
For instance, the below code shows how to use above classes:
<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.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)