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 body:

<body>
    <!-- First, we need to add Panel's overlay that will overlays app while panel is opened -->
    <div class="panel-overlay"></div>
 
    <!-- Left panel -->
    <div class="panel panel-left">
        ... panel content goes here ...
    </div>
 
    <!-- Right panel -->
    <div class="panel panel-right">
        ... panel content goes here ...
    </div>
 
    ...
</body>   

After we add 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 to add additional "panel-reveal" class to Panel, or "panel-cover" for cover effect:

<body>
    <!-- First, we need to add Panel's overlay that will overlays app while panel is opened -->
    <div class="panel-overlay"></div>
 
    <!-- Left panel, let it be with reveal effect -->
    <div class="panel panel-left panel-reveal">
        ... panel content goes here ...
    </div>
 
    <!-- Right panel, with cover effect -->
    <div class="panel panel-right panel-cover">
        ... panel content goes here ...
    </div>
 
    ...
</body> 

Open and Close Panels

From HTML

Ok, now when we have panels in our App, we need to know how to open/close them:

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

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

  • If you have two panels in app, such link will open/close Left panel by default

  • If you want to specify which panel should opened/closed, then it could be done via additional data-panel="left" attribute on this HTML element

According to above note:

<body>
  <!-- Panels Overlay -->
  <div class="panel-overlay"></div>
 
  <!-- Left Panel with Reveal effect -->
  <div class="panel panel-left panel-reveal">
    <div class="content-block">
      <p>Left Panel content here</p>
      <!-- Click on link with "close-panel" class will close panel -->
      <p><a href="#" class="close-panel">Close me</a></p>
      <!-- Click on link with "open-panel" and data-panel="right" attribute will open Right panel -->
      <p><a href="#" data-panel="right" class="open-panel">Open Right Panel</a></p>
    </div>
  </div>
 
  <!-- Right Panel with Cover effect -->
  <div class="panel panel-right panel-cover">
    <div class="content-block">
      <p>Right Panel content here</p>
      <!-- Click on link with "close-panel" class will close panel -->
      <p><a href="#" class="close-panel">Close me</a></p>
      <!-- Click on link with "open-panel" and data-panel="left" attribute will open Left panel -->
      <p><a href="#" data-panel="left" class="open-panel">Open Left Panel</a></p>
    </div>
  </div>
 
  ...
  <div class="page-content">
    <div class="content-block">
      <!-- If no data-panel attribute, Left panel will be opened by default -->
      <p><a href="#" class="open-panel">Open Left Panel</a></p>
      <!-- Click on link with "open-panel" and data-panel="right" attribute will open Right panel -->
      <p><a href="#" data-panel="right" class="open-panel">Open Right Panel</a></p>
    </div>
  </div>
  ...
</body>

Using JavaScript

We can also open and close Panels with JavaScript, for this we need to look at related App methods:

myApp.openPanel(position, animated) - open Panel.

  • position - string - Position of panel to open: "left" or "right". Required.
  • animated - boolean - Should it be opened with animation or not. Optional.

myApp.closePanel(animated) - close currently opened Panel.

  • animated - boolean - Should it be closed with animation or not. Optional.
<body>
  <div class="panel-overlay"></div>
  <div class="panel panel-left panel-reveal">
    <div class="content-block">
      <p>Left Panel content here</p>
      <p><a href="#" class="panel-close">Close me</a></p>
      <p><a href="#" class="open-right-panel">Open Right Panel</a></p>
    </div>
  </div>
  <div class="panel panel-right panel-cover">
    <div class="content-block">
      <p>Right Panel content here</p>
      <p><a href="#" class="panel-close">Close me</a></p>
      <p><a href="#" class="open-left-panel">Open Left Panel</a></p>
    </div>
  </div>
  ...
    <div class="page-content">
      <div class="content-block">
        <p><a href="#" class="open-left-panel">Open Left Panel</a></p>
        <p><a href="#" class="open-right-panel">Open Right Panel</a></p>
      </div>
    </div>
  ...
  <script>
    var myApp = new Framework7();
 
    var $$ = Dom7;
 
    $$('.open-left-panel').on('click', function (e) {
        // 'left' position to open Left panel
        myApp.openPanel('left');
    });
 
    $$('.open-right-panel').on('click', function (e) {
        // 'right' position to open Right panel
        myApp.openPanel('right');
    });
 
    $$('.panel-close').on('click', function (e) {
        myApp.closePanel();
    });
 
  </script>
</body>    

Panel Events

Panel events could be very useful to detect how user interact with your panels, or to do something in JavaScript when Panel opened/closed

Event Target Description
panel:open Panel Element<div class="panel"> Event will be triggered when Panel starts its opening animation
panel:opened Panel Element<div class="panel"> Event will be triggered after Panel completes its opening animation
panel:close Panel Element<div class="panel"> Event will be triggered when Panel starts its closing animation
panel:closed Panel Element<div class="panel"> Event will be triggered after Panel completes its closing animation
panel:overlay-click Panel Overlay Element<div class="panel-overlay"> Event will be triggered when the panel overlay is clicked
panel:swipe Panel Element<div class="panel"> Event will be triggered for swipe panel during touch swipe action

Here is an example:

var myApp = new Framework7();
 
var $$ = Dom7;
 
$$('.panel-left').on('panel:opened', function () {
    myApp.alert('Left panel opened!');
});
$$('.panel-left').on('panel:close', function () {
    myApp.alert('Left panel is closing!');
});
$$('.panel-right').on('panel:open', function () {
    myApp.alert('Right panel is opening!');
});
$$('.panel-right').on('panel:closed', function () {
    myApp.alert('Right panel closed!');
}); 

Open Panels With Swipe

Framework7 has feature to open panel with Swipe gesture.

To make this feature works we need to enable it on App initialization by passing related parameter:

var myApp = new Framework7({
    swipePanel: 'left'
});

There are also swipePanelCloseOpposite, swipePanelOnlyClose, swipePanelActiveArea, swipePanelNoFollow, swipePanelThreshold parameters that gives you more control over swipe panels. You can learn more about them in Initialize App section.

Panel is Opened?

Sometimes it could be useful to detect do we have some Panel opened or not? It is easy, when some panel is opened <body> will have addition class generated by the following rule: with-panel-[position]-[effect]:

  • If you have Left panel opened with Cover effect, body will have the "with-panel-left-cover" class <body class="with-panel-left-cover">

  • If you have Left panel opened with Reveal effect, body will have the "with-panel-left-reveal" class <body class="with-panel-left-reveal">

  • If you have Right panel opened with Cover effect, body will have the "with-panel-right-cover" class <body class="with-panel-right-cover">

  • If you have Right panel opened with Reveal effect, body will have the "with-panel-right-reveal" class <body class="with-panel-right-reveal">

You can use it in JavaScript to detect opened panel:

if ($$('body').hasClass('with-panel-left-cover')) {
    console.log('Left Panel is opened')
}

Or in CSS for additional styling:

/* Change Status Bar background when panel is opened */        
body.with-panel-left-cover .statusbar-overlay{
    background-color: #333;
}