javascript - Dropdown component for Dash that supports clicking on selected items - Stack Overflow

admin管理员组

文章数量:1356703

Dash has a nice Dropdown ponent that supports multi-value selection. In my application, the user can do data segmentation via multiple dropdown menus to choose properties "A", "B", "C", "D", and "E". It would be useful to also allow the user to segment based on negations of properties, say "not A" and "not E".

Is there already a Dropdown ponent available that would support clicking on items (i.e., when a user clicks on the selected property "A", we could make the element turn red to denote "not A" is now selected)? For example, suppose the user clicks on "New York City" in the multi-value dropdown example, and the corresponding "box" containing it changes color.

The Dash documentation explains how to create your own ponent but this doesn't cover the scenario where you simply want to extend an existing ponent. If there's no such ponent available, how would I go about making one?

Further background:

• There's a discussion on the plotly forum where a user explains how an existing ponent can be extended. The major downside with this is that one needs to update and rebuild the whole dash-core-ponents library every time one makes a change to the ponent or a new dash version is released.

• There's an issue open on dash-docs for writing a tutorial to cover this case with no apparent progress so far.

Dash has a nice Dropdown ponent that supports multi-value selection. In my application, the user can do data segmentation via multiple dropdown menus to choose properties "A", "B", "C", "D", and "E". It would be useful to also allow the user to segment based on negations of properties, say "not A" and "not E".

Is there already a Dropdown ponent available that would support clicking on items (i.e., when a user clicks on the selected property "A", we could make the element turn red to denote "not A" is now selected)? For example, suppose the user clicks on "New York City" in the multi-value dropdown example, and the corresponding "box" containing it changes color.

The Dash documentation explains how to create your own ponent but this doesn't cover the scenario where you simply want to extend an existing ponent. If there's no such ponent available, how would I go about making one?

Further background:

• There's a discussion on the plotly forum where a user explains how an existing ponent can be extended. The major downside with this is that one needs to update and rebuild the whole dash-core-ponents library every time one makes a change to the ponent or a new dash version is released.

• There's an issue open on dash-docs for writing a tutorial to cover this case with no apparent progress so far.

• javascript
• python
• reactjs
• dashboard
• plotly-dash

Share Improve this question Follow edited Apr 24, 2020 at 18:53 Juho asked Apr 15, 2020 at 8:56 JuhoJuho 1,00611 gold badge1515 silver badges3030 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9 +75

There is a way to achieve this in native Dash by effectively making a drop down checklist. This is achieved by using dash_html_ponents.Details and dash_html_ponents.Summary. This is native in HTML5.

Sample code:

import datetime
import dash
import dash_core_ponents as dcc
import dash_bootstrap_ponents as dbc
import dash_html_ponents 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)

本文标签： javascriptDropdown component for Dash that supports clicking on selected itemsStack Overflow