在破折号中的下拉列表中添加全选选项(&Q;)

2022-04-19 00:00:00 python plotly-dash drop-down-menu css
我要在多选下拉菜单中添加一个&q;选择-全部&q;选项。因此,默认情况下,右侧有一个用于清除所有值的小‘x’,当我清除所有选项或仅删除其中一些选项(左侧每个选项带有单独的‘x’)时,我都想要一个类似的选项来选择所有内容。

有谁能帮帮忙吗?


解决方案

功能

dcc.Dropdown的全部选择功能的基本实现可以使用如下回调实现:

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

app = dash.Dash()

options = [
    {"label": "New York City", "value": "NYC"},
    {"label": "Montreal", "value": "MTL"},
    {"label": "San Francisco", "value": "SF"},
]

app.layout = html.Div(
    id="dropdown-container",
    children=[
        dcc.Dropdown(
            id="dropdown",
            options=options,
            value=["MTL", "NYC"],
            multi=True,
        ),
        html.Button("SELECT ALL", id="select-all", n_clicks=0),
    ],
)


@app.callback(Output("dropdown", "value"), Input("select-all", "n_clicks"))
def select_all(n_clicks):
    return [option["value"] for option in options]


if __name__ == "__main__":
    app.run_server(debug=True)

所以上面代码的思想是,每次单击select-all按钮时,我们获取所有选项值,并将下拉列表的value属性设置为结果列表。

样式

现在我们可以使用一些css使按钮看起来像是在下拉列表中。在下面的css中,我将按钮放在‘x’的左侧:

#dropdown-container {
  position: relative;
}

#select-all {
  height: 21px;
  position: absolute;
  top: calc(50% - 10.5px);
  right: 50px;
}

这里的想法是提供包含下拉菜单和按钮的容器position: relative。这样我们就可以将position: absolute赋予按钮,并且按钮的绝对位置将相对于dropdown-container

对于按钮样式,我将top设置为50%减去按钮高度的一半。这是为了使按钮与下拉列表‘x’和插入符号一样垂直居中对齐。

相关文章