dcc.Dropdown() vs dash-bootstrap

Dash Python
1

Hi, How to use dash-bootstrap to get the functionality of dcc.Dropdown ? Or, can/must dcc.Dropdown() be used in combinaton with dbc and styled to match bootstrap theme like “darkly”? MWE not using dash-bootstrap:

import plotly.express as px
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

# Create the sample dataframe
df = pd.DataFrame({
    'x': [0,0,0,.1,.1,.1,.2,.2,.2,.3,.3,.3,.4,.4,.4,.5,.5,.5],
    'y': [100,100,100,97.345675,97.147774,96.927575,95.020104,94.711605,94.368973,93.082734,92.70308,92.281999,91.443516,91.015119,90.540561,90.034863,89.571762,89.059357],
    'a': [74,75,76,74,75,76,74,75,76,74,75,76,74,75,76,74,75,76]
})

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Dropdown(
        id='subset-dropdown',
        options=[{'label': str(val), 'value': val} for val in df['a'].unique()],
        value=75
    ),
    dcc.Graph(id='line-plot')
])

@app.callback(
    Output('line-plot', 'figure'),
    Input('subset-dropdown', 'value')
)
def update_line_plot(selected_value):
    filtered_df = df[df['a'] == selected_value]
    fig = px.line(filtered_df, x='x', y='y')
    return fig

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

Hi @uni

You can use a dbc.Select instead of a dcc.Dropdown in some cases. However, if you want some of the more advanced features of the dcc.Dropdown, such as multi select or components as props, or the search, you will need to use the dcc.Dropdown and style it so it’s compatible with your selected Bootstrap theme.

You can find out more about styling dcc components with a Bootstrap theme here:

1 Like