Framework7 Starter

by Maiki Nahara

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.1.1/js/framework7.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.1.1/css/framework7.bundle.css">
<script src="https://cdn.jsdelivr.net/npm/framework7-vue/framework7-vue.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.9/vue.min.js"></script>
<!-- App root element -->
<div id="app">
  <!-- Statusbar overlay -->
  <div class="statusbar"></div>

  <!-- Left Panel with Reveal effect 
  <div class="panel panel-left panel-reveal">
    <div class="content-block">
      <p><a href="#" class="panel-close">Close me</a></p>
      <p><a href="#" data-panel="right" class="panel-close">Open Right Panel</a></p>
    </div>
  </div>
  <!-- Your main view, should have "view-main" class -->
  <div class="view view-main">
    <!-- Initial Page, "data-name" contains page name -->
    <div data-name="home" class="page">

      <!-- Top Navbar -->
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Awesome App</div>
        </div>
      </div>

      <!-- Bottom Toolbar -->
      <div class="toolbar toolbar-bottom">
        <div class="toolbar-inner">
          <!-- Toolbar links -->
          <a href="#" class="link">Link 1</a>
          <a href="#" class="link">Link 2</a>
        </div>
      </div>

      <!-- Scrollable page content -->
      <div class="page-content">
        <div class="list">
          <ul>
            <li>
              <a href="/list2/" class="item-link item-content">
                <div class="item-media">
                  <i class="icon my-icon"></i>
                </div>
                <div class="item-inner">
                  <div class="item-title">
                    List element title
                  </div>
                  <div class="item-after">
                    List element label
                  </div>
                </div>
             ...

JavaScript

// Dom7
var $$ = Dom7;

//load up data from the API at runtime
Framework7.request.json('http://localhost:3000/allevents', function (data) {
});

// Framework7 App main instance
var app = new Framework7({
  root: '#app', // App root element
  id: 'io.framework7.testapp', // App bundle ID
  name: 'Framework7', // App name
  theme: 'auto', // Automatic theme detection
  // App root data
  data: function () {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe',
      },
      // Demo products for Catalog section
      products: [
        {
          id: '1',
          title: 'Apple iPhone 8',
          description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.'
        },
        {
          id: '2',
          title: 'Apple iPhone 8 Plus',
          description: 'Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus quasi est ut aliquid blanditiis beatae suscipit odio vel! Nostrum porro sunt sint eveniet maiores, dolorem itaque!'
        },
        {
          id: '3',
          title: 'Apple iPhone X',
          description: 'Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis placeat, mollitia necessitatibus reprehenderit. Labore dolores amet quos, accusamus earum asperiores officiis assumenda optio architecto quia neque, quae eum.'
        },
      ],
    };
  },
  // App root methods
  methods: {
    helloWorld: function () {
      app.dialog.alert('Hello World!');
    },
  },
  // App routes
  routes: [],
});

// Init/Create views
var homeView = app.views.create('#view-home', {
  url: '/'
});
var catalogView = app.views.create('#view-catalog', {
  url: '/catalog/'
});
var settingsView = app.views.create('#view-settings', {
  url:...