I have the following dashboard:
import dash
import dash_html_components as html
import dash_core_components as dcc
app = dash.Dash()
search_list = ['Tab 1', 'Tab 2', 'Tab 3']
app.layout = html.Div([
html.Div([
dcc.Dropdown(
options=([{'label': i, 'value': i} for i in sorted(search_list)]),
searchable=True,
clearable=False,
value='',
placeholder='Select a sector, investment or investor...',
id='search-dropdown'
)
]),
html.Div([
dcc.Tabs(id="tabs", value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1', children=[
html.H3('Tab content 1')
]),
dcc.Tab(label='Tab two', value='tab-2', children=[
html.H3('Tab content 2')
]),
dcc.Tab(label='Tab three', value='tab-3', children=[
html.H3('Tab content 3')
]),
]),
html.Div(id='tabs-content')
])
])
if __name__ == '__main__':
app.run_server(debug=True)
I wonder if it’s possible to navigate to different tabs by choosing the appropriate value from the dropdown. For example, if I choose “Tab 2”, I want to be automatically taken to the second tab and see its content. I tried using the following callback but it doesn’t seem to work:
@app.callback(Output(component_id='tabs', component_property='value'),
[Input(component_id='search-dropdown', component_property='value'),
])
def search_investment(selected_tab):
if selected_tab == 'Tab 2':
return 'investment'
Any ideas?