支持单击所选项目的 Dash 下拉组件

Question

Dash 有一个不错的Dropdown组件，支持多值选择。在我的应用程序中，用户可以通过多个下拉菜单进行数据分段以选择属性“A”、“B”、“C”、“D”和“E”。还允许用户基于属性的否定进行分段，例如“not A”和“not E”，将是有用的。

是否已经有一个 Dropdown 组件可以支持单击项目（即，当用户单击选定的属性“A”时，我们可以使元素变为红色以表示“不是 A”现在被选中）？例如，假设用户在多值下拉示例中单击“纽约市” ，并且包含它的相应“框”更改颜色。

Dash 文档解释了如何创建您自己的组件，但这并不涵盖您只想扩展现有组件的场景。如果没有这样的组件可用，我将如何制作一个？

进一步的背景：

• 在plotly 论坛上有一个讨论，用户解释了如何扩展现有组件。这样做的主要缺点是，每次对组件进行更改或发布新的 dash 版本时，都需要更新和重建整个dash-core-components库。

• dash-docs 上有一个问题，用于编写教程来涵盖这种情况，到目前为止没有明显的进展。

Answer 1

有一种方法可以通过有效地制作下拉清单在原生 Dash 中实现这一点。这是通过使用dash_html_components.Details和来实现的dash_html_components.Summary。这是 HTML5 原生的。

示例代码：

import datetime
import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html

app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP])
server = app.server

app.layout = dbc.Container(
    children=[
        html.Details([
        html.Summary('Select city...'),
        html.Br(),
        dbc.Col([
            dcc.Checklist(
                options=[
                    {'label': 'New York City', 'value': 'NYC'},
                    {'label': 'Montréal', 'value': 'MTL'},
                    {'label': 'San Francisco', 'value': 'SF'}
                    ],
                value=['NYC', 'MTL'],
                labelStyle = {'display': 'block'}
                )  
            ])
        ])
    ])

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