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

Question

bounty到期在4天内。该问题的答案有资格获得+ 150声望赏金。Juho想要引起更多关注对此问题。

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

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

Dash文档explains how to create your own component，但这没有涵盖您仅想扩展现有组件的情况。如果没有可用的此类组件，我将如何制作一个组件？

进一步的背景：

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

• 在dash-docs上有一个issue open，用于编写涵盖此情况的教程，到目前为止尚无明显进展。

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)