python - 在 plotly dash 中创建引导下拉菜单，使用一种功能进行设置

Question

dash 核心组件下拉列表和 dash 引导组件背后的逻辑有点不同，我希望两全其美：来自 dbc 的漂亮风格和来自 dcc 的功能。但是，修改 dcc 的 css 以使其看起来更漂亮是复杂的，我找不到现有的解决方案。设置 dbc 组件需要一些设置工作，因为下拉列表中的每个元素都有自己的 id。此外，如果您想直接从下拉列表中获取所选值（如果您询问下拉列表中实际显示的内容），则无法直接执行此操作。

因此，我想设置一个自动设置下拉菜单及其回调的函数，但我遇到了回调是嵌套函数，因此在全局范围内不可用的问题。我该如何改变呢？或者有没有另一种方法来构建它。

最后我想要的是一种简单的方法来设置 dbc 下拉列表，以便它显示选定的值。这是我到目前为止所拥有的（不起作用的解决方案）：

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output


def selectable_dropdown(item_id="dropdown", 
                        options=['option_1','option_2']):
    # create the items and the ids for each item
    dropdown_items = [dbc.DropdownMenuItem(item, id=item_id+'_'+item) 
                      for item in options]

    # create the dropdown menu
    dropdown = dbc.DropdownMenu(
                                dropdown_items, 
                                label="none", 
                                addon_type="prepend",
                                bs_size="sm",
                                id=item_id
                                )
        
    output = Output(item_id, "label")
    inputs = [Input(item_id+'_'+item, "n_clicks") for item in options]
    
    @app.callback(output,inputs)
    def update_label(*args):
        # get the triggered item
        ctx = dash.callback_context
        triggered_id = ctx.triggered[0]["prop_id"].split(".")[0]
        # get the label for the triggered id or return no selection
        if (np.array([n==None for n in args]).all()) or not ctx.triggered:
           return "no selection"
        else:
           return [label for label in options if item_id+'_'+label == triggered_id]            
    return dropdown       


app = dash.Dash(
    external_stylesheets=[dbc.themes.BOOTSTRAP]
)
app.config['suppress_callback_exceptions'] = True

app.layout = \
    html.Div([selectable_dropdown(item_id="target_select",
                                  options=["option1 ", "option 2", "option3"])])
    
        
if __name__ == "__main__":
    app.run_server(debug=False, host = '0.0.0.0', port = 1234)

这就是它的样子（一个工作示例），但我以更通用的方式和最好的方式只在一个函数或类中使用它：

import dash
import numpy as np
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output

options=["option1 ", "option 2", "option3"]
item_id = 'dropdown'
dropdown_items = [dbc.DropdownMenuItem(item, id=item_id+'_'+item) 
                  for item in options]

# create the dropdown menu
dropdown = dbc.DropdownMenu(
                            dropdown_items, 
                            label="none", 
                            addon_type="prepend",
                            bs_size="sm",
                            id=item_id)
    
output = Output(item_id, "label")
inputs = [Input(item_id+'_'+item, "n_clicks") for item in options]

app = dash.Dash(
    external_stylesheets=[dbc.themes.BOOTSTRAP,'./assets/stylesheet.css']
)
app.config['suppress_callback_exceptions'] = True

app.layout = \
    html.Div([dropdown])
   
@app.callback(output,inputs)
def update_label(*args):
    # get the triggered item
    ctx = dash.callback_context
    triggered_id = ctx.triggered[0]["prop_id"].split(".")[0]
    # get the label for the triggered id or return no selection
    if (np.array([n==None for n in args]).all()) or not ctx.triggered:
        return "no selection"
    else:
        return [label for label in options if item_id+'_'+label == triggered_id]
 
        
if __name__ == "__main__":
    app.run_server(debug=False, host = '0.0.0.0', port = 1234)

标签： pythondrop-down-menuplotly-dash