Tabs

A tabbed container showing one tab at a time.

@solara.component
def Tabs(
    value: Union[None, int, "solara.Reactive[int]"] = None,
    on_value: Optional[Callable[[int], None]] = None,
    color: Optional[str] = None,
    background_color: Optional[str] = None,
    slider_color: Optional[str] = None,
    dark: bool = False,
    grow: bool = False,
    vertical=False,
    align: str = "left",
    lazy=False,
    children: List[solara.Element] = [],
):

    ...

(Note: This component is experimental and its API may change in the future.)

Note that if Tabs are used as a child of the AppBar component, the tabs will be placed under the app bar. See our authorization app for an example.

If the children Tab elements are passed a path_or_route argument, the active tab will be based on the path of the current page.

Examples

Only tabs headers

import solara
import solara.lab


@solara.component
def Page():
    with solara.lab.Tabs():
        solara.lab.Tab("Tab 1")
        solara.lab.Tab("Tab 2")

Tab 1

Tab 2

Live output

Tabs with content

This is usually only used when the tabs are placed in the AppBar component.

import solara
import solara.lab


@solara.component
def Page():
    with solara.lab.Tabs():
        with solara.lab.Tab("Tab 1"):
            solara.Markdown("Hello")
        with solara.lab.Tab("Tab 2"):
            solara.Markdown("World")

Tab 1

Tab 2

Hello

Live output

Tabs events

The value on the Tabs component is a reactive value that can be used to listen to changes in the selected tab and make the UI respond to it.

import solara
import solara.lab

tab_index = solara.reactive(0)


@solara.component
def Page():

    def next_tab():
        tab_index.value = (tab_index.value + 1) % 2

    solara.Title(f"Tab {tab_index.value + 1}")
    solara.Button('Next Tab', on_click=next_tab)

    with solara.lab.Tabs(value=tab_index):
        with solara.lab.Tab("Tab 1"):
            solara.Markdown("Hello")
        with solara.lab.Tab("Tab 2"):
            solara.Markdown("World")
        with solara.lab.Tab("Disabled", disabled=True):
            solara.Markdown("World")

Tab 1

Tab 2

Disabled

Hello

Live output

Advanced tabs

Tabs can be nested, styled and placed vertically.

import solara
import solara.lab


@solara.component
def Page():
    with solara.lab.Tabs(background_color="primary", dark=True):
        with solara.lab.Tab("Home", icon_name="mdi-home"):
            solara.Markdown("Hello")
        with solara.lab.Tab("Advanced", icon_name="mdi-apps"):
            with solara.lab.Tabs(grow=True, background_color="primary", dark=True, slider_color="green"):
                with solara.lab.Tab("Settings", icon_name="mdi-cogs"):
                    with solara.lab.Tabs(vertical=True, slider_color="green"):
                        with solara.lab.Tab("User", icon_name="mdi-account"):
                            solara.Markdown("User settings")
                        with solara.lab.Tab("System", icon_name="mdi-access-point"):
                            solara.Markdown("System settings")
                with solara.lab.Tab("Analytics", icon_name="mdi-chart-line"):
                    with solara.lab.Tabs(vertical=True):
                        with solara.lab.Tab("User", icon_name="mdi-account"):
                            solara.Markdown("User analytics")
                        with solara.lab.Tab("System", icon_name="mdi-access-point"):
                            solara.Markdown("System analytics")

Home

Advanced

Hello

Live output

Many tabs

If many tabs are shown, paginations arrows are shown.

import solara
import solara.lab

tab_count = 30


@solara.component
def Page():
    with solara.lab.Tabs():
        for i in range(tab_count):
            with solara.lab.Tab(f"Tab {i+1}"):
                solara.Markdown(f"Content for tab {i+1}")

Tab 1

Tab 2

Tab 3

Tab 4

Tab 5

Tab 6

Tab 7

Tab 8

Tab 9

Tab 10

Tab 11

Tab 12

Tab 13

Tab 14

Tab 15

Tab 16

Tab 17

Tab 18

Tab 19

Tab 20

Tab 21

Tab 22

Tab 23

Tab 24

Tab 25

Tab 26

Tab 27

Tab 28

Tab 29

Tab 30

Content for tab 1

Live output

Arguments

value: The index of the selected tab. If None, the first tab is selected or it is based in the route/path.
on_value: A callback that is called when the selected tab changes.
color: The color of text in the tab headers (only for dark=False).
background_color: The background color of the tab headers.
slider_color: The color of the slider.
dark: Apply a dark theme.
grow: Whether the tabs should grow to fill the available space.
vertical: Whether the tabs are vertical.
align: The alignment of the tabs, possible values are 'left', 'start', 'center', 'right' or 'end'.
lazy: Whether the child components of the inactive tabs are rendered or not. If lazy=True, components of inactive tabs are not rendered.
classes: Additional CSS classes to apply.
style: CSS style to apply.

Example

Controls

Grow

Vertical

Dark

Align:

Tab 1

Tab 2

Hello

View source