JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/[email protected]/js/framework7.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/framework7.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-md">
<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 block-strong">
<p>Here is your blank Framework7 app.</p>
</div>
<div class="block-title">Navigation</div>
<div class="list links-list">
<ul>
<li><a href="/test/">Test me</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
JavaScript
var $ = Dom7
var app = new Framework7({
root: '#app',
theme: 'auto',
swipeout: {
noFollow: true
},
routes: [{
path: '/test/',
component: {
template: `
<div class="page" data-name="found-doc-info">
<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>
</div>
<div class="page-content">
<div class="list">
<ul class=''>
<li class="accordion-item swipeout my-parent-item">
<a href="#" class="item-content item-link swipeout-content">
<div class="item-inner">
<div class="item-title">title</div>
</div>
</a>
<div class="accordion-item-content my-test-swipeout">
<div class="list">
<ul>
<li class="swipeout">
<div class="item-content swipeout-content">
<div class="item-inner">
<div class="item-title">Swipable</div>
</div>
</div>
<div class="swipeout-actions-left">
<a href="#" class="open-more-actions">Single</a>
</div>
</li>
<li class="swipeout">
<div class="item-content swipeout-content">
<div class="item-inner">
<div class="item-title">Swipable</div>
</div>
</div>
<div class="swipeout-actions-left">
<a href="#" class="open-more-actions">Single</a>
</div>
</li>
...