[SOLVED] Configurable routable tabs

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!

2 Likes