JSFiddle - React, Tailwind, and code Playground

by tinamore

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/5.6.0/css/framework7.bundle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/5.6.0/js/framework7.bundle.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 class="page" data-name="home">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="left">
            
          </div>
          <div class="title sliding">PAGE HOME</div>
          <div class="right">
            
          </div>
        </div>
      </div>

      <!-- Scrollable page content-->
      <div class="page-content">
        <div class="block block-strong">
          <a class="item-content item-link" href="/page-a/">Go To Page A</a>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

var app = new Framework7({
  root: '#app',
  theme: 'auto',
  routes: [
  {
    path: '/page-a/',
    async: function (routeTo, routeFrom, resolve, reject) {
      // Requested route
      //console.log(routeTo);
      // Get external data and return template7 template
      //this.app.request.json('http://some-endpoint/', function (data) {
      
      app.dialog.alert('REQUEST FOR GET DATA');
      
	  setTimeout(function () {
        resolve(
          // How and what to load: template
          {
            template: `
          <div class="page">
            <div class="navbar">
              <div class="navbar-inner sliding">
                <div class="left">
                  <a href="#" class="link back">
                    <i class="icon icon-back"></i>
                    <span class="ios-only">Back</span>
                  </a>
                </div>
                <div class="title">PAGE A</div>
              </div>
            </div>
            <div class="page-content">
              <div class="block block-strong">
                <a class="item-content item-link" href="/page-b/">Go To Page B</a>
              </div>
            </div>
          </div>`
          },
          // Custom template context
          {
            context: {
              users: 'tinamore',
            },
          }
        );
		}, 1000);
		
      //});
    }
  },{
    path: '/page-b/',
    component:{
      template: `
          <div class="page">
            <div class="navbar">
              <div class="navbar-inner sliding">
                <div class="left">
                  <a href="#" class="link back">
                    <i class="icon icon-back"></i>
                    <span class="ios-only">Back</span>
                  </a>
                </div>
                <div class="title">PAGE B</div>
              </div>
            </div>
            <div class="page-content">
              <div class="block block-strong">
                <a...