Framework7 Master Detail issue
HTML
<script src="https://unpkg.com/[email protected]/js/framework7.bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/framework7.bundle.min.css">
<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">
<a href="#" class="link panel-open" data-panel="left">Left Panel</a>
</div>
<div class="title sliding">My App</div>
<div class="right">
<a href="#" class="link panel-open" data-panel="right">Right Panel</a>
</div>
</div>
</div>
<!-- Toolbar-->
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<a href="#" class="link">Left Link</a>
<a href="#" class="link">Right Link</a>
</div>
</div>
<!-- Scrollable page content-->
<div class="page-content">
<div class="block-title">Navigation</div>
<div class="list links-list">
<ul>
<li><a href="/master/">Master-Detail Demo</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
JavaScript
var app = new Framework7({
root: '#app',
theme: 'ios',
routes: [{
path: '/master/',
master: true,
detailRoutes: [
{
path: '/detail/1',
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">Detail 1</div>
</div>
</div>
<div class="page-content">
<div class="block block-strong">
<a href="/detail-detail/">Open Detail-Detail</a>
</div>
</div>
</div>
`
},
{
path: '/detail/2',
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">Detail 2</div>
</div>
</div>
<div class="page-content">
<div class="block block-strong">
<a href="/detail-detail/">Open Detail-Detail</a>
</div>
</div>
</div>
`
},
],
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>
...