Tabs

The Tabs component is used to organize content into separate views that users can navigate between. Each tab represents a specific section, and switching between tabs shows the corresponding content.

import dash
from dash import Input, Output
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    dmc.Tabs(
      id="tabs",
      value="tab1",
      tabs=[
        {"label": "Tab 1", "value": "tab1"},
        {"label": "Tab 2", "value": "tab2"},
        {"label": "Tab 3", "value": "tab3"}
      ]
    ),
    dmc.Box(id="tab-content", sx={"padding": "16px"})
  ]
)

@app.callback(
    Output("tab-content", "children"),
    Input("tabs", "value")
)
def render_tab_content(selected_tab):
    if selected_tab == "tab1":
        return dmc.Box("This is the content of Tab 1", sx={"color": "blue"})
    elif selected_tab == "tab2":
        return dmc.Box("This is the content of Tab 2", sx={"color": "green"})
    elif selected_tab == "tab3":
        return dmc.Box("This is the content of Tab 3", sx={"color": "red"})
    return dmc.Box("No content available", sx={"color": "gray"})

if __name__ == "__main__":
    app.run_server(debug=True)

Props Table

Below are the main props available for the Tabs component.

Prop	Type	Default	Description
id	string		Unique identifier for the Tabs component.
tabs	array		An array of objects with `label` (string) and `value` (any) for each tab.
value	any		The currently selected tab's value.
setProps	function		Dash callback function to synchronize state.
onChange	function		Function triggered when the active tab changes.
orientation	"horizontal"/"vertical"	"horizontal"	Defines the orientation of the tabs.
sx	object		Custom styles for the tabs component using the MUI `sx` prop.

For the full list of props, refer to the official MUI documentation, as this component is based on MUI:

MUI Tabs Documentation

Props Table​

Props Table