[VUE 3] How to use TabPanel to host one scheduler per tab?

[andreas-sakellariou]

Hi again,

The question is how to use TabPanel in Vue 3 to host one scheduler per tab. I have not found any example using TabPanel as parent in Vue 3 to see the TabPanel markup, the nesting of the tabs/schedulers in the template and the required config.

[saki]

If you mean Bryntum TabPanel then we can use the wrapper for the TabPanel itself <bryntum-tab-panel> component and we would define the schedulers as its items without wrappers.

The pseudo-code would look similar to this:

<template>
    <bryntum-tab-panel v-bind="tabPanelConfig />
</template>

<script>
export default {
    name: 'TabbedBrowsers'

    setup() {
        const tabPanelConfig = {
            items:[
                { 
                    title: 'Scheduler 1', 
                    type: 'scheduler',
                    // options for scheduler 1
                },
                { 
                    title: 'Scheduler 2', 
                    type: 'scheduler',
                    // options for scheduler 2
                }

            ]
        };
        return { tabPanelConfig };
    }
} 
</script>