IONIC-4 Using <ion-tabs> in side menu of a split pane

Viewed 513

I am trying to implement a split pane that will use ion-tabs in sidebar(menu of split-pane).

The problem with ion-tabs in ionic 4 is that it uses primary router to render components, so even though ion-tabs is added to the menu of split-pane, tabs will be rendered in ion-router-outlet. Is there a way of ion-tabs to use auxiliary router?

This is what i have in mind:

<ion-app>
    <ion-split-pane>
        <ion-menu>
            <ion-content>
                <ion-tabs>
                    <ion-tab-bar slot="bottom">
                        <ion-tab-button tab="tab1">
                            <ion-icon name="flash"></ion-icon>
                            <ion-label>Tab One</ion-label>
                        </ion-tab-button>
                        <ion-tab-button tab="tab2">
                            <ion-icon name="apps"></ion-icon>
                            <ion-label>Tab Two</ion-label>
                        </ion-tab-button>
                        <ion-tab-button tab="tab3">
                            <ion-icon name="send"></ion-icon>
                            <ion-label>Tab Three</ion-label>
                        </ion-tab-button>
                    </ion-tab-bar>
                </ion-tabs>
            </ion-content>
        </ion-menu>
        <ion-router-outlet main></ion-router-outlet>
    </ion-split-pane>
</ion-app>

I want to be able to change content of sidebar using ion-tabs from which ill decide what should be rendered in ion-router-outlet.

0 Answers
Related