JSFiddle - React, Tailwind, and code Playground

by Maiki Nahara

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.0.0-beta.4/js/framework7.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.0.0-beta.4/css/framework7.bundle.min.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="index-main">
  <div class="view view-main view-init safe-areas" data-master-detail-breakpoint="800" data-url="/">
    <div class="page">
      <div class="page-content">
        <div class="block-title searchbar-hide-on-search">Page Loaders & Router</div>
        <div class="list links-list searchbar-hide-on-search">
          <ul>
            <li>
              <a href="/master-detail/">Master-Detail (Split View)</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

var routes = [{
  path: '/master-detail/',
  content: 
  `
  <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">Master Detail</div>
        </div>
    </div>
    <div class="page-content">
        <div class="block block-strong">
            <p>Master-Detail pattern oftenly used on wide enough screens and tablets, and consists of two views. Master - is an area in the UI where you have a list of something. Detail - is the area that shows the relevant information of a selection in the master.</p>
            <p>To see Master Detail view make sure the window width is larger than 800px.</p>
            <p>When collapsed (on narrow screen) navigation between such pages will behave as usual routing.</p>
            <p>Navigation to/from Master-Detail view happens without transition.</p>
        </div>

        <div class="list links-list">
            <ul>
                <li>
                    <a data-reload-detail="true" href="/master-detail/1/">Detail Page 1</a>
                </li>
                <li>
                    <a data-reload-detail="true" href="/master-detail/2/">Detail Page 2</a>
                </li>
            </ul>
        </div>
    </div>
</div>
  `,
  master: true,
  detailRoutes: [
{
  		name: 'masterdetail1',
      path: '/master-detail/1/',
      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">Detail Page 1</div>
        </div>
    </div>
 ...