javascript - Dash 的下拉组件支持点击所选项目

Question

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

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

Dash 文档 explains how to create your own component但这不包括您只想扩展现有组件的情况。如果没有这样的组件，我该如何制作一个？

更多背景:

• 有关于 plotly forum 的讨论用户在其中解释如何扩展现有组件。这样做的主要缺点是需要更新和重建整个dash-core-components每次对组件进行更改或发布新的仪表板版本时都会使用库。

• 有一个 issue open在 dash-docs 上编写了一个教程来涵盖这个案例，但到目前为止还没有明显的进展。

Answer 1

在原生 Dash 中，有一种方法可以通过有效地制作下拉 list 来实现这一目标。这是通过使用 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)