Adding custom components in tab_toolbar area

[nickjameson]

Hey! I want to customise the tab_toolbar to put in my own buttons and components. Can you show me an example of how to do this?

In a nutshell this what i want to render:

<div class="flexlayout__tab_toolbar">
   <button> Custom Button</button>
   <button> Custom Button 2</button>
   <button class="flexlayout__tab_toolbar_button-min"></button>
</div>

[domhaas]

Hey! I want to customise the tab_toolbar to put in my own buttons and components. Can you show me an example of how to do this?

In a nutshell this what i want to render:

<div class="flexlayout__tab_toolbar">
   <button> Custom Button</button>
   <button> Custom Button 2</button>
   <button class="flexlayout__tab_toolbar_button-min"></button>
</div>

Try this one:

onRenderTabSet(tabSetNode, renderValues) {
    const node = tabSetNode.getSelectedNode()
    if (!node) {
        return
    }

    const id = 'tab_settings_popover_' + tabSetNode._attributes.id
    renderValues.buttons.push(
        <button key={id}>test</button>
    )
}
render() {
    return (
        <FlexLayout.Layout
            /* ... */
            onRenderTabSet={this.onRenderTabSet}
        </FlexLayout.Layout>
    )
}

[nickjameson]

worked like a dream thanks :)

[mrudowski]

I only want to tell that I so impressed. The authors of this library have done so many things in the nice/right way. Thank you.

[danielleroux]

Thx to @domhaas it works fine, but is it also possible to show the buttons in the empty tabStrip? In my case the inital start of the web app shows an empty tabSet but i need the toolbar buttons.

//EDIT sorry to push such an old issue :/