Is it possible to hide dcc.Tab?

As in the title - is it possible to hide a single dcc.Tab in dcc.Tabs? I have a set of tabs and want to have some hidden.
Cheers

Hi @kiteme ,

Yes, it is possible.

You can use 'display': 'none' from CSS.
Set it on style property of Tab that you want to hide…

Example below is code to hide second Tab with label Tab two.

from dash import Dash, dcc, html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Tabs([
        dcc.Tab(label='Tab one', children=[
            dcc.Graph(
                figure={
                    'data': [
                        {'x': [1, 2, 3], 'y': [4, 1, 2],
                            'type': 'bar', 'name': 'SF','marker': {'color':'orange'}},
                        {'x': [1, 2, 3], 'y': [2, 4, 5],
                         'type': 'bar', 'name': 'Montréal','marker': {'color':'red'}},
                    ]
                }
            )
        ]),
        dcc.Tab(label='Tab two', children=[
            dcc.Graph(
                figure={
                    'data': [
                        {'x': [1, 2, 3], 'y': [1, 4, 1],
                            'type': 'bar', 'name': 'SF','marker': {'color':'orange'}},
                        {'x': [1, 2, 3], 'y': [1, 2, 3],
                         'type': 'bar', 'name': 'Montréal','marker': {'color':'green'}},
                    ]
                }
            )
        ],style={'display': 'none'}),
        dcc.Tab(label='Tab three', children=[
            dcc.Graph(
                figure={
                    'data': [
                        {'x': [1, 2, 3], 'y': [2, 4, 3],
                            'type': 'bar', 'name': 'SF','marker': {'color':'orange'}},
                        {'x': [1, 2, 3], 'y': [5, 4, 3],
                         'type': 'bar', 'name': 'Montréal','marker': {'color':'blue'}},
                    ]
                }
            )
        ]),
    ])
])

if __name__ == '__main__':
    app.run(debug=True)

before hiding Tab two

after hiding Tab two

Hope this help.

1 Like