Раскрывающийся компонент для Da sh, который поддерживает нажатие на выбранные элементы

Question

Da sh имеет приятный Dropdown компонент, который поддерживает выбор нескольких значений. В моем приложении пользователь может выполнить сегментацию данных с помощью нескольких раскрывающихся меню, чтобы выбрать свойства «A», «B», «C», «D» и «E». Было бы полезно также разрешить пользователю сегментировать на основе отрицаний свойств, скажем, «не A» и «не E».

Уже есть компонент Dropdown, который бы поддерживал нажатие на элементы (т. Е. Когда пользователь щелкает по выбранному свойству «A», мы могли бы сделать элемент красным, чтобы обозначить, что выбрано «не A») )? Например, предположим, что пользователь нажимает на «Нью-Йорк» в примере с несколькими значениями , и соответствующий «ящик», содержащий его, меняет цвет.

Документация Da sh объясняет, как создать свой собственный компонент , но это не относится к сценарию, в котором вы просто хотите расширить существующего компонента. Если такого компонента нет в наличии, как бы я go о его создании?

Дальнейшая информация:

• Обсуждается на сюжете сюжетный форум где пользователь объясняет, как можно расширить существующий компонент. Основным недостатком этого является то, что необходимо обновлять и перестраивать всю библиотеку da sh -core-components каждый раз, когда вносятся изменения в компонент или выпускается новая версия da sh.

• Есть открытая проблема на da sh -документы для написания учебника по этому делу без видимого прогресса.

Answer 1

Существует способ достичь этого в собственном Da sh, эффективно создав выпадающий контрольный список. Это достигается с помощью 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)