web-dev-qa-db-ja.com

選択したアイテムのクリックをサポートするDashのドロップダウンコンポーネント

ダッシュには、複数値の選択をサポートするNice Dropdown コンポーネントがあります。私のアプリケーションでは、ユーザーは複数のドロップダウンメニューを介してデータセグメンテーションを実行し、プロパティ「A」、「B」、「C」、「D」、および「E」を選択できます。プロパティの否定に基づいてユーザーがセグメント化できるようにすることも役立ちます。たとえば、「not A」や「not E」と言います。

アイテムのクリックをサポートするドロップダウンコンポーネントはすでにありますか（つまり、ユーザーが選択したプロパティ「A」をクリックすると、要素が赤になり、「not A」が選択されていることを示すことができます）？たとえば、ユーザーが multi-value dropdown の例で「New York City」をクリックすると、それを含む対応する「ボックス」の色が変化するとします。

Dashのドキュメント 独自のコンポーネントの作成方法を説明します ですが、これは単にextendしたいシナリオをカバーしていません既存のコンポーネント。そのようなコンポーネントがない場合、どのようにしてコンポーネントを作成するのですか？

さらなる背景：

  • plotly forum でディスカッションがあり、ユーザーは既存のコンポーネントを拡張する方法を説明しています。これの主な欠点は、コンポーネントに変更を加えるか、新しいダッシュバージョンがリリースされるたびに、ライブラリ全体を更新して再構築する必要があるということです dash-core-components ライブラリ。

  • これまでのところ明らかな進展なしにこのケースをカバーするチュートリアルを書くためのダッシュドキュメントに issue open があります。

javascriptpythonreactjsdashboardplotly-dash
6
Juho

ドロップダウンチェックリストを効果的に作成することにより、ネイティブダッシュでこれを実現する方法があります。これは、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)

Dropdown closed

Dropdown open

4
Tom