Framework7 - Open & Close Panels From HTML


Advertisements

Description

To open and close the panel, add open-panel and close-panel class respectively to any HTML element. By default, the left panel will be open/close when your app has two panels. You can specify which panel should be open/close by adding data-panel="left" attribute.

Example

The below example demonstrates use of open and close panels in the Framework7.

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <title>Open and Close Panels</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
   </head>
   <body>
      <div class="panel-overlay"></div>
      <div class="panel panel-left panel-reveal">
         <div class="content-block">
            <p>Left Panel content</p>
            <p><a href="#" data-panel="right" class="open-panel">Open Right Panel</a></p>
            <p><a href="#" class="close-panel">Close me</a></p>
         </div>
      </div>
      <div class="panel panel-right panel-cover">
         <div class="content-block">
            <p>Right Panel content</p>
            <p><a href="#" data-panel="left" class="open-panel">Open Left Panel</a></p>
            <p><a href="#" class="close-panel">Close me</a></p>
         </div>
      </div>
      <div class="views">
         <div class="view view-main">
            <div class="pages">
               <div data-page="home" class="page navbar-fixed">
                  <div class="navbar">
                     <div class="navbar-inner">
                        <div class="left"> </div>
                        <div class="center">Side Panels</div>
                        <div class="right"> </div>
                     </div>
                  </div>
                  <div class="page-content">
                     <div class="content-block">
                        <p> <a href="#" class="open-panel">Open Left Panel</a></p>
                        <p> <a href="#" data-panel="right" class="open-panel">Open Right Panel</a></p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      <script>
         var myApp = new Framework7();
      </script>
   </body>
</html>

Output

Let's carry out the following steps to see how above code works:

  • Save above HTML code as sidepanels_open_close_fromHTML.html file in your server root folder.

  • Open this HTML file as http://localhost/sidepanels_open_close_fromHTML.html and output as below gets displayed.

  • This example displays the left panel when you click on Open Left Panel link and to display the right panel, click on Open Right Panel link.

Advertisements