Framework7 Starter

by Vladimir Kharlampidi

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.0.6/css/framework7.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.0.6/js/framework7.min.js"></script>
<div id="app">
  <div class="panel panel-left panel-cover theme-dark">
    <div class="page"></div>
  </div>
  <div class="panel panel-right panel-reveal theme-dark">
    <div class="page"></div>
  </div>
  <div class="view view-main ios-edges"></div>
  <div class="login-screen">
    <div class="view view-init">
      <div class="page">
        <div class="page-content login-screen-content">
          <a href="#" class="button">Login</a>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

var $ = Dom7;
var app = new Framework7({
  root: '#app',
  theme: 'auto',
  on: {
  	pageInit: function (page) {
    	console.log('page init: ', page.name)
    }
  },
  routes: [{
    path: '/',
    content: `
      	<div class="page">
          <div class="navbar">
            <div class="navbar-inner sliding">
              <div class="title">Home</div>
            </div>
          </div>
          <div class="page-content">
            <div class="block block-strong">Hello page</div>
          </div>
        </div>
      `
  }]
});

var ls = app.loginScreen.create({ el: '.login-screen' });
ls.open(false);


$('.login-screen .button').on('click', function () {
	app.views.create('.view-main', { url: '/' });
  ls.close();
});