How to disable a dash tab

Dash Python
1

Hello.
I have been trying to figure out how to disable a dash tab. The documentation seems to suggest the existence of ‘disable’ property, but it’s not actually there.
Would be grateful for any suggestions.

2

Hi,
this works for me:

dcc.Tabs(id='page1-tabs', value='tab-1', children=[
        dcc.Tab(label='First tab',          value='tab-1', disabled=False),
        dcc.Tab(label='Second tab',      value='tab-2', disabled=True)
])
1 Like
3

Thanks for your reply! It was a case of me being blind and your answer helped me realize it - I was using dash bootstrap components instead of dcc.

1 Like
4

Thanks for raising this, I hadn’t clocked that it wasn’t possible to disable tabs in dash-bootstrap-components. I’ve just submitted this pull request that rectifies that, which should make it into a future release.

2 Likes
5

Building on this question, I have something conceptual.

I keep my tabs in separate scripts but the callback to render is in the main app.py.
Now, I’d like to disable certain tabs until a data frame has been uploaded in the second tab.

Any idea how to approach this? I figured that disabled argument works in the app layout so I guess there should be a way to update it conditionally with callbacks?

app.layout = html.Div(style={'fontFamily': 'helvetica'}, children=[
	html.H1(children='App_Name'),
	html.H3(children='App_Description'),
	dcc.Tabs(id="tabs-app", vertical=True, value='tab-intro', children=[
		dcc.Tab(label='Intro', value='tab-intro', style=tab_style),
		dcc.Tab(label='Upload Table', value='tab-upload', style=tab_style),
		dcc.Tab(label='Quality Control', value='tab-qc', style=tab_style)
	], style=tabs_styles),
	html.Div(id='tabs-content', style={'width': '75%', 'float': 'right', 'fontFamily': 'helvetica', 
		'margin-left': '2.5%', 'margin-right': '2.5%'})
])

@app.callback(Output('tabs-content', 'children'), 
	[Input('tabs-app', 'value')])

def render_content(tab):
	if tab == 'tab-intro':
		return test_intro.tab1_layout
	if tab == 'tab-upload':
		return test_upload.tab2_layout
	if tab == 'tab-qc':
		return test_qc.tab3_layout
6

@simonb
Can you please share your code of uploading data and using that data to plot certain graph or do something with it. I am new to dash.

7

Hi @simonb,

I am also trying to conditionally enable a tab based on another event. Were you able to achieve what you were trying (enabling tab when only after a dataframe is uploaded)? Could you share the code for that?

Thanks,
Muthu

8

Here’s a minimal example for enabling and disabling a tab:

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dcc.Tabs(
            [
                dcc.Tab(label="Tab one", id="tab1"),
                dcc.Tab(label="Tab two", id="tab2", disabled=True),
            ]
        ),
        html.Button("Enable Tab two", id="btn"),
    ]
)


@app.callback(
    [Output("tab2", "disabled"), Output("btn", "value")],
    [Input("btn", "n_clicks")],
    [State("tab2", "disabled")],
    prevent_initial_call=True,
)
def toggle_tab2_state(n_clicks, tab_disabled):
    text = "Enable Tab two" if tab_disabled else "Disable Tab two"
    return not tab_disabled, text


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