From your kitchen sink example:
<div class="page">
<div class="title">Tabs Routable</div>
</div>
</div>
<div class="toolbar tabbar">
<div class="toolbar-inner">
<a href="./" class="tab-link" data-route-tab-id="tab1">Tab 1</a>
<a href="tab2/" class="tab-link" data-route-tab-id="tab2">Tab 2</a>
<a href="tab3/" class="tab-link" data-route-tab-id="tab3">Tab 3</a>
</div>
</div>
<div class="tabs tabs-routable">
<div class="page-content tab" id="tab1"></div>
<div class="page-content tab" id="tab2"></div>
<div class="page-content tab" id="tab3"></div>
</div>
</div>
I want tabs with their own navbars and infinite scroll in tab1 for example. What’s the appropriate structure?
I tried the following but infinite method “loadMore” does not execute.
<div class="page">
<div class="toolbar tabbar toolbar-bottom-md">
<div class="toolbar-inner">
<a href="./" class="tab-link" data-route-tab-id="tab1">Tab 1</a>
<a href="tab2/" class="tab-link" data-route-tab-id="tab2">Tab 2</a>
<a href="tab3/" class="tab-link" data-route-tab-id="tab3">Tab 3</a>
</div>
</div>
<div class="tabs tabs-routable">
<div class="tab" id="tab1">
<div data-name="tab1">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="/tab1-left-panel/" class="link">
<i class="icon material-icons md-only">menu</i>
</a>
</div>
</div>
</div>
<div id="content" data-infinite-distance="200" class="page-content infinite-scroll-content infinite-scroll-top" @infinite="loadMore">
<div class="block-title">No results.</div>
<div class="list">
<ul>
......
</ul>
</div>
</div>
</div>
</div>
<div class="tab" id="tab2"></div>
<div class="tab" id="tab3"></div>
</div>