在 Dash 中输入多个可移动值

Question

有没有这样的破折号组件：

基本上是一个文本输入，但带有可移动项目的列表，通过按 Enter 键添加。

我知道下拉菜单可以像这样工作，但我事先没有指定的选项列表。

Answer 1

如果您愿意接受非标准的仪表板组件，我会选择Tag inputTauffer Consulting 的组件。如果您想使用 Dash 附带的方法，您可以将一些组件放在一起来模仿非常相似的功能。下面描述了这两种方法。

1 - Tauffer 咨询的标签输入

图 1 - 标签输入

下面的代码片段是 JupyterDash 的完整示例。对于完整的 Dash 示例，您应该查看主要来源

import dash_cool_components
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from jupyter_dash import JupyterDash
import dash_core_components as dcc

app = JupyterDash()
app.layout = dbc.Container([
    dbc.Row([
        dbc.Col(
            width={'size':4}
        ),
        dbc.Col(
            dash_cool_components.TagInput(
                id="input",
            ), width={'size':4}
        ),
        dbc.Col([
            dbc.Label('Current tags'),
            dbc.Input(
                id="output",
            ),
        ], width={'size':4})
    ]),
    html.Div(id='hidden')
], style={'marginTop': '200px'})

@app.callback(
    Output('output', 'value'),
    [Input('input', 'value')]
)
def timezone_test(value):
    if value:
        tags = [e['displayValue'] for e in value]
        return tags


app.run_server(mode='inline', port = 9889)

2 - 内置仪表板组件

此建议基于Plotly 社区论坛Allow User to Create New Options in dcc.Dropdown上的元素，并将生成以下设置，其中包含输入字段、提交按钮和允许多项选择的下拉菜单：

['a', 'b', 'c']被指定为现有选项（尽管您已指定没有选项）并'a'设置为预定义选项。从这里，您可以简单地d在输入字段中添加一个选项，单击后它将在下拉菜单中变为可用Add Option。如果您想删除任何选项，只需单击x旁边的 。

以下代码片段是为 JupyterDash 编写的，但可以轻松转换为 Dash。如果有任何不清楚的地方，请告诉我。

完整代码：

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from jupyter_dash import JupyterDash
import dash_core_components as dcc

# app = dash.Dash(__name__)
app = JupyterDash()

app.layout = html.Div([
    dcc.Input(id='input', value=''),
    html.Button('Add Option', id='submit'),
    dcc.Dropdown(
        id='dropdown',
        options=[
            {'label': 'a', 'value': 'a'},
            {'label': 'b', 'value': 'b'},
            {'label': 'c', 'value': 'c'},
        ],
        value='a',
        multi = True
    ),
])

@app.callback(
    Output('dropdown', 'options'),
    [Input('submit', 'n_clicks')],
    [State('input', 'value'),
     State('dropdown', 'options')],
)
def callback(n_clicks, new_value, current_options):
    print(n_clicks)
    if not n_clicks:
        return current_options

    current_options.append({'label': new_value, 'value': new_value})
    return current_options

app.run_server(mode='inline', port = 9889)