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")
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")
Hello
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():
solara.Title(f"Tab {tab_index.value + 1}")
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")
Hello
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")
Hello
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}")
Content for tab 1
Arguments
value: The index of the selected tab. IfNone, 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
Align:
Hello