Framework7 Starter

by Maiki Nahara

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>

JavaScript

window.app = new Framework7({
  root: '#app',
  theme: 'auto',
  on: {
    init: function() {
      //this.methods.createLogin()
    },
    pageInit: function(page) {
      console.log('page init: ', page.name)
    }
  },
  routes: [{
      path: '/login-screen/',
      content: `
      <div class="page">
        <!-- page-content has additional login-screen content -->
        <div class="page-content login-screen-content">
          <div class="login-screen-title">My App</div>
          <!-- Login form -->
          <form>
            <div class="list">
              <ul>
                <li class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label">Username</div>
                    <div class="item-input-wrap">
                      <input type="text" name="username" placeholder="Username">
                      <span class="input-clear-button"></span>
                    </div>
                  </div>
                </li>
                <li class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label">Password</div>
                    <div class="item-input-wrap">
                      <input type="password" name="password" placeholder="Password">
                      <span class="input-clear-button"></span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="list">
              <ul>
                <li>
                  <a href="#" class="item-link list-button">Sign In</a>
                </li>
              </ul>
              <div class="block-footer">Some text with login information.</div>
              <p><a href="#" class="link back">Close Login Screen</a></p>
            </div>
          </form>
        </div>
      </div>`
    },
    {
      path: '/',
      beforeEnter: function(routeTo, routeFrom, resolve, reject) {
   ...