Vertical tabs-How to display graph next to tabs

Dash Python
1

graph
graph1410×983 15 KB

i have try this code but it seems the graph no show properly

app.layout = html.Div(
    [
html.Div([
    dcc.Tabs(id='tabs', value='tab-1', children=[
        dcc.Tab(label='Dashboard', value='tab-1'),
        dcc.Tab(label='Usage', value='tab-2'),
        dcc.Tab(label='Power Monitor', value='tab-3'),
    ], vertical=True,parent_style={'float': 'left'}),
        html.Div(id='tabs-example-content', style={'float': 'left', 'width': '400'})
    ])
])

@app.callback(Output('tabs-example-content','children'),
              [Input('tabs', 'value')])
def render_content(tab):
    if tab == 'tab-1':
        return tab1.layout
    elif tab == 'tab-2':
        return tab2.layout
    elif tab == 'tab-3':
        return tab3.layout
2

Hi @aaronlxx and welcome to the Dash community!

If you are using Bootstrap, you could try using the dbc.Row and dbc.Col grid system for the layout. It could look something like:

app.layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(
                    [
                        dcc.Tabs(
                            id="tabs",
                            value="tab-1",
                            children=[
                                dcc.Tab(label="Dashboard", value="tab-1"),
                                dcc.Tab(label="Usage", value="tab-2"),
                                dcc.Tab(label="Power Monitor", value="tab-3"),
                            ],
                            vertical=True,
                        ),
                    ],
                    width=3,
                ),
                dbc.Col(html.Div(id="tabs-example-content")),
            ]
        )
    ],
    fluid=True,
)
3

Omg @AnnMarieW thank you so much. It works.

i had tried use the dbc.row and dbc.col to make the graph next to the tabs but it doesn’t work.

Really appreciate!!!

The width i set to width = 1 because there’s have between the graph and the tab.

4

It looks nice - glad it worked for you! :grinning: