Well, I asked for this as a feature request and was answered that I have to do it with html. I managed to create it in the spirit of v[1] framework (I have some experience with it, dating back in time). Than I found that in v[3] a lot of things are just better, but now I’m lost with the task again. So what’s the problem:
I’m trying to create an application with tabs. Every tab must behave like a small application. So routable tabs is very convenient. Last tab is add new application, which must be loaded as a new tab. My sample code probably will explain it better, although It’s not working and I even don’t have hopes that this has any chances to work. Anyway, I will post it for 2 reasons. First It explains my idea and second I need directions how to rework the code.
In routes:
export routes = [
{
path: '/tabs/',
componentUrl: './pages/tabbar.html' ,
context: { tabs: applications },
tabs: applications.map(a => {path, id, componentUrl});
}]
in tabbar.html
<template>
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title"></div>
</div>
</div>
<div class="toolbar tabbar">
<div class="toolbar-inner">
{{#each tabs}}
<a href="{{path}}" class="tab-link" data-route-tab-id="{{id}}">{{title}}t</a>
{{/each}}
</div>
</div>
<div class="tabs tabs-routable">
{{#each tabs}}
<div class="tab page-content" id="{{id}}"></div>
{{/each}}
</div>
</div>
</template>
<script>
return {
data: {
tabs : []
}
}
</script>
Wow, I did it. It’s working now. framework 7 [v3] rocks!