Panel / Side Panels

    Let’s look how to add Side Panels to our App. We may include up to 2 panels to our App, one on left side and another one on right side. We should add panels’ HTML right in the beginning of the app root element (or in case there is no root element in use):

    Panel Effect

    After we added panels we need to choose opening effect for each panel. There could be one of two effects: “Reveal” (when panel moves out whole app’s content) or “Cover” (when panel overlays app’s content). If you want to use “Reveal” effect you should add additional class to Panel, or **panel-cover** for cover effect:

    1. <body>
    2.   <!-- App root element -->
    3.   <div id="app">
    4.     <!-- Left panel, let it be with reveal effect -->
    5.     <div class="panel panel-left panel-reveal">
    6.         ... panel content goes here ...
    7.     </div>
    9.     <!-- Right panel, with cover effect -->
    10.     <div class="panel panel-right panel-cover">
    11.         ... panel content goes here ...
    12.     </div>
    14.     ...
    15.   </div>
    16. </body>

    Resizable Panel

    Each Panel can be resizable. To make Panel resizable we just need to add panel-resizable class to Panel element:

    1. <body>
    2.   <!-- App root element -->
    3.   <div id="app">
    4.     <!-- Make left panel resizable -->
    5.     <div class="panel panel-left panel-resizable">
    6.         ... panel content goes here ...
    7.     </div>
    9.     <!-- Make right panel resizable -->
    10.     <div class="panel panel-right panel-resizable">
    11.         ... panel content goes here ...
    12.     </div>
    13.     ...
    14.   </div>
    15. </body>

    Panel App Parameters

    It is possible to control some default panels behavior using global by passing panels related parameters under panel parameter:

    For example:

    Let’s look at related App methods to work with Panel:

    app.panel.open(side, animate)- open panel

    • side - string. Panel to open: “left” or “right”. Required in case you have two panels.
    • animate - boolean. Should it be opened with animation or not. Optional, by default is true

    app.panel.close(side, animate)- close panel

    • side - string. Panel to close. Optional, by default will close any opened panel.
    • animate - boolean. Should it be closed with animation or not. Optional, by default is true

    app.panel.toggle(side, animate)- toggle panel

    • side - string. Panel to toggle. Optional, by default will toggle any opened panel.
    • animate - boolean. Should it be opened/closed with animation or not. Optional, by default is true

    app.panel.create(parameters)- create new panel instance

    • parameters - object. Object with panel parameters.

    Method returns created Panel instance

    app.panel.get(side)- get Panel instance by specified side

    • side - string. Panel to get

    Method returns Panel instance

    app.panel.enableSwipe(side)- enable swipes for panel (swipe-to-close and swipe-to-open)

    • side - string. Panel to enable swipe actions on

    app.panel.disableSwipe(side)- disable swipes for panel (swipe-to-close and swipe-to-open)

    • side - string. Panel to disable swipe actions on

    app.panel.enableResizable(side)- makes specified panel resizable

    • side - string. Side of the panel that needs to be resizable

    app.panel.disableResizable(side)- disable resizable panel

    • side - string. Side of the panel to disable resizing

    app.panel.left- left panel instance

    app.panel.right- right panel instance

    Panel Parameters

    If we create Panel manually using app.panel.create method we need to pass object with panel parameters:

    For example:

    1. var panel = app.panel.create({
    2.   el: '.panel-left',
    3. })

    Panel Methods & Properties

    After we created Panel instance (by calling app.panel.create) or after we got Panel instance (by calling app.panel.get) we may use its useful methods and properties:

    Control Panel With Links

    • To open panel we need to add **panel-open** class to any HTML element (prefered to link)

    • To close panel we need to add **panel-close** class to any HTML element (prefered to link)

    • To toggle panel we need to add **panel-toggle** class to any HTML element (prefered to link)

    According to above note:

    1. <body>
    2.   <div id="app">
    4.     <div class="panel panel-left panel-reveal">
    5.       <div class="content-block">
    6.         ...
    7.         <!-- Clicking on link with "panel-close" class will close panel -->
    8.         <p><a href="#" class="panel-close">Close me</a></p>
    9.         <!-- Click on link with "panel-open" and data-panel="right" attribute will open Right panel -->
    10.         <p><a href="#" data-panel="right" class="panel-close">Open Right Panel</a></p>
    11.       </div>
    12.     </div>
    14.     <!-- Right Panel with Cover effect -->
    15.     <div class="panel panel-right panel-cover">
    16.       <div class="content-block">
    17.         ...
    18.         <!-- Click on link with "panel-close" class will close panel -->
    19.         <p><a href="#" class="panel-close">Close me</a></p>
    20.         <!-- Click on link with "panel-open" and data-panel="left" attribute will open Left panel -->
    21.         <p><a href="#" data-panel="left" class="panel-open">Open Left Panel</a></p>
    22.       </div>
    23.     </div>
    25.     ...
    26.     <div class="page-content">
    27.       <div class="content-block">
    28.         <!-- If no data-panel attribute, Left panel will be opened by default -->
    29.         <p><a href="#" class="panel-open">Open Left Panel</a></p>
    30.         <!-- Click on link with "panel-open" and data-panel="right" attribute will open Right panel -->
    31.         <p><a href="#" data-panel="right" class="panel-open">Open Right Panel</a></p>
    32.       </div>
    33.     </div>
    34.   </div>
    35.   ...
    36. </body>

    Routable Panels available from Framework7 version 3.2.0.

    Panels can also be routable with same features as for routable modals and pages:

    • it provides opportunity to open Panel by usual links instead of so called special links or API,
    • with enabled Push State, the same Panel will be opened when you refresh browser, navigate back and forward in history,
    • with routable Panels you can load Panel itself and its content in the same ways as for pages and modals, i.e. using url, content, template, templateUrl, component or componentUrl

    According to example above:

    • when you click on link with /left-panel/ href attribute it will open Panel from specified string content,
    • when you click on link with /right-panel-ajax/ href attribute it will perform Ajax request to right-panel.html file and open it as a Right Panel,
    • when you click on link with /panel-component/ href attribute it will perform Ajax request to panel-component.html file, parse it as a Router Component and open it as a Panel,

    Note that routable Panels can’t be mixed with static Panels. So if you have static left panel in the app, then only right panel can be loaded as routable panel.

    Panel Events

    Panel will fire the following DOM events on panel element and events on app and panel instance:

    App and Panel Instance Events

    Panel instance emits events on both self instance and app instance. App instance events has same names prefixed with panel.

    CSS Variables

    Note that commented variables are not specified by default and their values is what they fallback to in this case.

    1. :root {
    2.   --f7-panel-width: 260px;
    3.   /*
    4.   --f7-panel-left-width: var(--f7-panel-width);
    5.   --f7-panel-right-width: var(--f7-panel-width);
    6.   */
    7.   --f7-panel-bg-color: #fff;
    8. }
    9. .ios {
    10.   --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0);
    11.   --f7-panel-transition-duration: 400ms;
    12.   --f7-panel-shadow: transparent;
    13. }
    14. .md {
    15.   --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.2);
    16.   --f7-panel-transition-duration: 300ms;
    17.   --f7-panel-shadow: rgba(0, 0, 0, 0.25) 0%,
    18.     rgba(0, 0, 0, 0.1) 30%,
    19.     rgba(0, 0, 0, 0.05) 40%,
    20.     rgba(0, 0, 0, 0) 60%,
    21.     rgba(0, 0, 0, 0) 100%;
    22. }
    23. .aurora {
    25.   --f7-panel-shadow: transparent;
    26. }

    Examples

    1. <body>
    2.   <div id="app">
    3.     <div class="panel panel-left panel-reveal panel-resizable">
    4.       <div class="block">
    5.         <p>Left Panel content here</p>
    6.         <p><a class="panel-close" href="#">Close me</a></p>
    7.         <p><a class="panel-open" href="#" data-panel="right">Open Right Panel</a></p>
    8.       </div>
    9.     </div>
    10.     <div class="panel panel-right panel-cover panel-resizable">
    11.       <div class="block">
    12.         <p>Right Panel content here</p>
    13.         <p><a class="panel-close" href="#">Close me</a></p>
    14.         <p><a class="panel-open" href="#" data-panel="left">Open Left Panel</a></p>
    15.       </div>
    16.     </div>
    17.     <div class="view view-main view-init">
    18.       <div class="page">
    19.         <div class="navbar">
    20.           <div class="navbar-inner">
    21.             <div class="left"></div>
    22.             <div class="title">Panels</div>
    23.             <div class="right"></div>
    24.           </div>
    25.         </div>
    26.         <div class="page-content">
    27.           <div class="block">
    28.             <p><a class="panel-open" href="#">Open Left Panel</a></p>
    29.             <p><a class="panel-open" href="#" data-panel="right">Open Right Panel</a></p>
    30.           </div>
    31.         </div>
    32.       </div>
    33.     </div>
    34.   </div>
    35. </body>
    1. var app = new Framework7();
    3. var $$ = Dom7;
    5. // Dom Events
    6. $$('.panel-left').on('panel:open', function () {
    7.   console.log('Panel left: open');
    8. });
    9. $$('.panel-left').on('panel:opened', function () {
    10.   console.log('Panel left: opened');
    11. });
    13. // Instance Events
    14. var panelRight = app.panel.right;
    15. panelRight.on('open', function () {
    16.   console.log('Panel right: open');
    17. });
    18. panelRight.on('opened', function () {
    19.   console.log('Panel right: opened');
    20. });
    22. // App Events
    23. app.on('panelClose', function (panel) {
    24.   console.log('Panel ' + panel.side + ': close');
    25. });
    26. app.on('panelClosed', function (panel) {
    27.   console.log('Panel ' + panel.side + ': closed');
    28. });
    29. app.on('panelResize', function (panel, newPanelWidth) {