Advertisement
Guest User

Untitled

a guest
Jan 2nd, 2018
237
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.80 KB | None | 0 0
  1. <!-- HTML body -->
  2.     <div id="app">
  3.         <!-- Status bar overlay for fullscreen mode-->
  4.         <div class="statusbar"></div>
  5.         <!-- Left panel with cover effect-->
  6.         <div class="panel panel-left panel-cover theme-dark">
  7.             <div class="view">
  8.                 <div class="page">
  9.                     <div class="navbar">
  10.                         <div class="navbar-inner">
  11.                             <div class="title">Left Panel</div>
  12.                         </div>
  13.                     </div>
  14.                     <div class="page-content">
  15.                         <div class="block">Left panel content goes here</div>
  16.                     </div>
  17.                 </div>
  18.             </div>
  19.         </div>
  20.        
  21.         <!-- Your main view, should have "view-main" class -->
  22.         <div class="view view-main ios-edges">
  23.            
  24.             <!-- Random page -->
  25.             <div class="page" data-name="about">
  26.                 <div class="navbar">
  27.                     <div class="navbar-inner sliding">
  28.                         <div class="left">
  29.                             <a href="#" class="link back">
  30.                                 <i class="icon icon-back"></i>
  31.                                 <span class="ios-only">Back</span>
  32.                             </a>
  33.                         </div>
  34.                         <div class="title">About Framework7</div>
  35.                     </div>
  36.                 </div>
  37.                 <div class="page-content">
  38.                     <div class="block-title">Welcome to Framework7</div>
  39.                     <div class="block block-strong">
  40.                         <p>Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web apps with iOS or Android (Material) native look and feel. It is also an indispensable prototyping apps tool to show working app prototype as soon as possible in case you need to. Framework7 is created by Vladimir Kharlampidi (iDangero.us).</p>
  41.                         <p>The main approach of the Framework7 is to give you an opportunity to create iOS and Android (Material) apps with HTML, CSS and JavaScript easily and clear. Framework7 is full of freedom. It doesn't limit your imagination or offer ways of any solutions somehow. Framework7 gives you freedom!</p>
  42.                         <p>Framework7 is not compatible with all platforms. It is focused only on iOS and Android (Material) to bring the best experience and simplicity.</p>
  43.                         <p>Framework7 is definitely for you if you decide to build iOS and Android hybrid app (Cordova or PhoneGap) or web app that looks like and feels as great native iOS or Android (Material) apps.</p>
  44.                     </div>
  45.                 </div>
  46.             </div>
  47.            
  48.             <!-- Splash page -->
  49.             <div id="splashPage" class="page" data-name="splash">
  50.                 <div class="page-content">
  51.                     splash page!
  52.                 </div>
  53.             </div>
  54.            
  55.         </div>
  56.        
  57.     </div>
  58.  
  59. <!-- javascript -->
  60. <script>
  61.     var f7 = myApp.f7 = new Framework7({ // http://framework7.io/docs/app.html#app-parameters
  62.         root: '#app',
  63.         theme: 'md',
  64.         materialRipple: false,
  65.         routes: [
  66.             {
  67.                 name: 'about',
  68.                 path: '/about',
  69.                 pageName: 'about',
  70.             },
  71.             {
  72.                 name: 'splash',
  73.                 path: '/splash',
  74.                 pageName: 'splash',
  75.             },
  76.         ],
  77.     });
  78.  
  79.     var mainView = f7.views.create('.view-main', {
  80.         name: 'main',
  81.         url: '/splash',
  82.     });
  83. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement