Integrating aurelia-plugins-tabs with the router

1

Hi,

Is there an elegant way to integrate the tabs plugin with the router, so that a child router would open a tab?

TIA,
Martin…

2

If i understand correctly you want to have tabs UI but actually open routes.

This is how i do it with bootstrap tabs UI. I have this on 3 levels, but it should work on N levels.

import { PLATFORM } from 'aurelia-pal';

// This will open 3th nested child. 
// The actual route here is #/some-route/some-child-route/statistics
// Where some-child-route is again a tabs UI

export class SomeClassName { 
    configureRouter(config, router) {
        config.map([
            { route: '', redirect: 'statistics' },
            { route: 'statistics', name: 'statistics', moduleId: PLATFORM.moduleName('./statistics/statistics'), nav: true, title: 'Statistics' },
            { route: 'status', name: 'status', moduleId: PLATFORM.moduleName('./status/status'), nav: true, title: 'Status' },
        ]);

        this.router = router;
    }
}


<template>
    <div class="page">
        <ul class="nav nav-tabs">
            <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
                <a href.bind="row.href">${row.title}</a>
            </li>
        </ul>
    </div>
    <div class="row page">
        <router-view></router-view>
    </div>
</template>