Tabs adding index/active parameter to preselect which tab is active/shown

[francesfeng]

Will is make sense to have a way to pre-select which tab among the tabs is pre-selected? Something like what streamlit has on selectbox, the "index" parameter indicates the preselected option upon render?

[iisakkirotko]

Hi @francesfeng!

This is already possible using the value argument to solara.lab.Tabs. Do you think this option should be better highlighted in the documentation, and if so where would you like to see more detail added?

[francesfeng]

Thanks @iisakkirotko for pointing me to the right direction. Now I understand. Wonder if make sense to change the example to the following, and it is more clear to me that a reactive value can control which tab to render, other than user action.

import solara

@solara.component
def Page():

    tab_index = solara.use_reactive(0)

    def change_tab():
        tab_index.value = (tab_index.value + 1) % 3

    with solara.Column() as main:
        solara.Button('Change Tab', on_click=change_tab)
        solara.Markdown(f"Current tab index: {tab_index.value}")

        with solara.lab.Tabs(value=tab_index):
            with solara.lab.Tab("Tab 1"):
                solara.Markdown("This is the content of Tab 1")

            with solara.lab.Tab("Tab 2"):
                solara.Markdown("This is the content of Tab 2")

            with solara.lab.Tab("Tab 3"):
                solara.Markdown("This is the content of Tab 3")

    return main

[maartenbreddels]

Good suggestion, I modified the example (see 7bf2ce5 ) - should be deployed soon.