Can you have the RadioItems as Tabs instead?

Dash Python
1

-- coding: utf-8 --

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

app = dash.Dash(name)

all_options = {
‘Tab1’: [‘a’, ‘b’],
‘Tab2’: [‘c’, ‘d’],
‘Tab3’: [‘e’, ‘f’]
}
app.layout = html.Div([
dcc.RadioItems(
id=‘countries-dropdown’,
options=[{‘label’: k, ‘value’: k} for k in all_options.keys()],
value=‘America’
),

html.Hr(),

dcc.Dropdown(id='cities-dropdown'),

html.Hr(),

html.Div(id='display-selected-values')

])

@app.callback(
dash.dependencies.Output(‘cities-dropdown’, ‘options’),
[dash.dependencies.Input(‘countries-dropdown’, ‘value’)])
def set_cities_options(selected_country):
return [{‘label’: i, ‘value’: i} for i in all_options[selected_country]]

@app.callback(
dash.dependencies.Output(‘cities-dropdown’, ‘value’),
[dash.dependencies.Input(‘cities-dropdown’, ‘options’)])
def set_cities_value(available_options):
return available_options[0][‘value’]

@app.callback(
dash.dependencies.Output(‘display-selected-values’, ‘children’),
[dash.dependencies.Input(‘countries-dropdown’, ‘value’),
dash.dependencies.Input(‘cities-dropdown’, ‘value’)])
def set_display_children(selected_country, selected_city):
return u’{} is in {}’.format(
selected_city, selected_country,
)

if name == ‘main’:
app.run_server()

2

https://dash.plot.ly/dash-core-components/tabs

or

https://dash-bootstrap-components.opensource.faculty.ai/l/components/tabs

3

thanks russell fot the links

here is the change i made. maybe someone uses it.

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

app = dash.Dash(name)

all_options = {
‘America’: [‘New York City’, ‘San Francisco’, ‘Cincinnati’],
‘Canada’: [u’Montréal’, ‘Toronto’, ‘Ottawa’]
}
app.layout = html.Div([

dcc.Tabs(id="countries-dropdown", value='America', children=[
        dcc.Tab(label='America', value='America'),
        dcc.Tab(label='Canada', value='Canada'),
        ],style={'height' : '49%', 'width': '100%', 'float': 'centre', 'display': 'inline-block'}),

html.Hr(),

dcc.Dropdown(id='cities-dropdown'),

html.Hr(),

html.Div(id='display-selected-values')

])

@app.callback(
dash.dependencies.Output(‘cities-dropdown’, ‘options’),
[dash.dependencies.Input(‘countries-dropdown’, ‘value’)])
def set_cities_options(selected_country):
return [{‘label’: i, ‘value’: i} for i in all_options[selected_country]]

@app.callback(
dash.dependencies.Output(‘cities-dropdown’, ‘value’),
[dash.dependencies.Input(‘cities-dropdown’, ‘options’)])
def set_cities_value(available_options):
return available_options[0][‘value’]

@app.callback(
dash.dependencies.Output(‘display-selected-values’, ‘children’),
[dash.dependencies.Input(‘countries-dropdown’, ‘value’),
dash.dependencies.Input(‘cities-dropdown’, ‘value’)])
def set_display_children(selected_country, selected_city):
return u’{} is a city in {}’.format(
selected_city, selected_country,
)

if name == ‘main’:
app.run_server()