Framework7 - Switch Views From Tab Bar

Description

Single tab can be used to switch between views with its own navigation and layout.

Example

The following example demonstrates the use of switch views from tab bar in 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>Switch views from Tab bar </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>
       <style>
         i.demo-icon-1 {
            width:30px;
            height:30px;
            backgroundimage:url("data:image/svg+xml;charset=utf-8,
               <svg xmlns = 'http://www.w3.org/2000/svg' viewBox = '0 0 30 30' fill = '%23929292'>
                  <g><circle cx = '15.2' cy = '8.8' r = '1.5'/>
                     <polygon points = '16.7,12.3 16.7,11.7 16.7,11.3 13.7,11.3 13.7,
                        12.3 14.7,12.3 14.7,20.3 13.7,20.3 13.7,21.3 17.7,21.3 17.7,20.3 16.7,20.3'/>
                     <path d = 'M15.2,2.3C8.3,2.3,2.7,7.9,2.7,14.8s5.6,12.5,12.5,12.5c6.9,0,12.5-5.6,
                        12.512.5S22.1,2.3,15.2,2.3z M15.2,26.3 c-6.3,0-11.5-5.2-11.511.5S8.8,3.3,15.2,3.3s11.5,
                        5.2,11.5,11.5S21.5,26.3,15.2,26.3z'/>
                  </g>
               </svg>"
            );
         }
         
         . active i.demo-icon-1 {
            background-image:url("data:image/svg+xml;charset = utf8,
               <svg xmlns = 'http://www.w3.org/2000/svg' x = '0px' y = '0px' viewBox = '0 0 30 30' fill = '%23007aff'>
                  <path d = 'M15,2.6C8.1,2.6,2.5,8.2,2.5,15.1C2.5,22,8.1,27.6,15,27.6S27.5,22,27.5,
                     15.1C2 7.5,8.2,21.9,2.6,15,2.6z M15,7.6 c0.8,0,1.5,0.7,1.5,1.5c0,0.8-0.7,1.5-1.5,1.5c0.8,
                     0-1.5-0.7-1.5-1.5C13.5,8.3,14.2,7.6,15,7.6z M17.5,21.6h-4v-1h1v-8h-1v1h3V12 v0.6v8h1V21.6z'/>
               </svg>"
            );
         }
         
         i.demo-icon2 {
            width:25px;
            height:30px;
            background-image:url("data:image/svg+xml;charset = utf8,
               <svg xmlns = 'http://www.w3.org/2000/svg' x = '0px' y = '0px' viewBox = '0 0 25 17' fill = '%23929292'>
                  <path d = 'M19.5,0h-14L0,6v11h25V6L19.5,0z M5.9,1h13.2l4.5,5H16c0,1.9-1.6,3.4-3.5,3.4C10.6,
                     9.4,9,7.9,9,6H1.4L5.9,1z M24,16H1V7h7.1 c0.5,1.9,2.3,3.4,4.4,3.4s3.9-1.5,4.43.4H24V16z'/>
               </svg>"
            );
         }
         
         .active i.demo-icon-2 {
            backgroundimage:url("data:image/svg+xml;charset = utf-8,
               <svg xmlns = 'http://www.w3.org/2000/svg' x = '0px' y = '0px' viewBox = '0 0 25 17' fill = '%23007aff'>
                  <path d = 'M19.5,0h-14L0,6v11h25V6L19.5,0z M5.9,1h13.2l4.5,5H16c0,1.9-1.6,3.43.5,3.4C10.6,
                     9.4,9,7.9,9,6H1.3L5.9,1z'/>
               </svg>"
            );
         }
         
         i.demo-icon3 {
            width:30px;
            height:30px;
            background-image:url("data:image/svg+xml;charset = utf8,
               <svg xmlns = 'http://www.w3.org/2000/svg' x = '0px' y = '0px' viewBox = '0 0 30 19' fill = '%23929292'>
                  <path d = 'M16.8,1c3.7,0,6.8,3,6.8,6.8l0,0.1c0,0,0,0.1,0,0.1l0,1l1,0C27,9,29,11,29,13.5 c0,
                     2.5-2,4.5-4.5,4.5H6c-2.8,0-5-2.2-5-5 c0-2.1,1.4-4,3.4-4.7L5,8.1l0.10.6C5.3,6,6.5,5,8,5c0.4,0,
                     0.9,0.1,1.3,0.3l0.9,0.5l0.40.9C11.8,2.5,14.2,1,16.8,1 M16.8,0 c-3.1,0-5.7,1.87,4.4C9.2,4.2,8.6,
                     4,8,4C6,4,4.4,5.4,4.1,7.3C1.7,8.1,0,10.4,0,13c0,3.3,2.7,6,6,6 h18.5v0c3,0,
                     5.5-2.5,5.5-5.5 c0-3-2.5-5.5-5.5-5.5c0-0.1,0-0.2,00.2C24.5,3.5,21.1,0,16.8,0L16.8,0z'/>
               </svg>"
            );
         }
         
         .active i.demo-icon3 {
            background-image:url("data:image/svg+xml;charset = utf-8,
               <svg xmlns = 'http://www.w3.org/2000/svg' x = '0px' y = '0px' viewBox = '0 0 30 19' fill = '%23007aff'>
                  <path d = 'M24.5,8c0-0.1,0-0.2,0-0.2C24.5,3.5,21,0,16.8,0c3.1,0-5.7,1.8-7,4.4C9.2,4.2,8.6,4,8,4C6,4,4.4,
                     5.4,4,7.3 C1.7,8.1,0,10.4,0,13c0,3.3,2.7,6,6,6h18.5v0c3,0,5.5-2.5,5.55.5C30,10.5,27.5,8,24.5,8z'/>
               </svg>"
            );
         }
      </style>
      
      <div class = "views tabs toolbar-fixed">
         <div id = "tab1" class = "view tab active">
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center">View 1</div>
               </div>
            </div>
            
            <div class = "pages navbar-fixed">
               <div data-page = "home-1" class = "page">
                  <div class = "page-content">
                     <div class = "content-block">
                        <p>This is view 1</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         
         <div id = "tab2" class = "view tab">
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center">View 2</div>
               </div>
            </div>
            
            <div class = "pages navbar-fixed">
               <div data-page = "home-2" class = "page">
                  <div class = "page-content">
                     <div class = "content-block">
                        <p>This is view 2</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         
         <div id = "tab3" class = "view tab">
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center">View 3</div>
               </div>
            </div>
            
            <div class = "pages navbar-fixed">
               <div data-page = "home-3" class = "page">
                  <div class = "page-content">
                     <div class = "content-block">
                        <p>This is view 3</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         
         <div class = "toolbar tabbar">
            <div class = "toolbar-inner">
               <a href = "#tab1" class = "tab-link active"> <i class = "icon demo-icon-1"></i></a>
               <a href = "#tab2" class = "tab-link"><i class = "icon demo-icon-2"></i></a>
               <a href = "#tab3" class = "tab-link"><i class = "icon demo-icon-3"></i></a>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      <script>
         // here initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
            // enable the dynamic navbar for this view:
            dynamicNavbar: true
         });
      </script>
   </body>

</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as switch_views_from_tab_bar.html file in your server root folder.

  • Open this HTML file as http://localhost/switch_views_from_tab_bar.html and the output is displayed as shown below.

  • The example provides a single tab that can be used to switch between views with its own navigation and layout.

framework7_tabs.htm
Advertisements