Hi guys,
I have a simple question for you.
I Have a toolbar with 4 tabs. Inside this bar I load 4 different components in this way:
<div class="toolbar tabbar toolbar-top">
<div class="toolbar-inner">
<a class="tab-link tab-link-active" href="#tab-1" >Tab 1</a>
<a class="tab-link" href="#tab-2" >Tab 2</a>
<a class="tab-link" href="#tab-3" >Tab 3</a>
</div>
</div>
<div id="tab-1" class="page-content tab">
<${component_1}/>
</div>
<div id="tab-2" class="page-content tab">
<${component_2}/>
</div>
<div id="tab-3" class="page-content tab">
<${component_3}/>
</div>
And this is the piece of code in the script section:
import component_1 from './component_1.f7.html'
import component_2 from './component_2.f7.html'
import component_3 from './component_3.f7.html'
This code works fine, but the components are very heavy. I would like to dynamically load the components on on:open
event e remove from the dom when the user change tab. Is it possible? In this way I can have a light page in my app.