在 Dash 中输入多个可移动值

Question

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

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

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

Answer 1

如果您愿意接受非标准仪表板组件，我会选择 Tag input from Tauffer 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 - 内置破折号组件

此建议基于 Allow User to Create New Options in dcc.Dropdown on the Plotly community forum and will produce the following setup with an Input field, a submit button and a dropdown 菜单中允许多项选择的元素：

['a', 'b', 'c'] 被指定为现有选项（尽管您已指定您有 none）并且 '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)

在 Dash 中输入多个可移动值

Input with multiple removable values in Dash

python

plotly

plotly-dash

1 - 来自 Tauffer 咨询的标签输入

2 - 内置破折号组件

完整代码：