Python Dash - 是否可以按一个按钮折叠多个部分？

Question

我有一个正在开发的仪表板应用程序。它有 3 个按钮，单击时每个按钮 collapse/expand 一个部分。我想要做的是在单击其中一个按钮时关闭所有其他部分。我一直无法弄清楚如何实现这一目标。我可以让所有部分在按下按钮时切换，但不能关闭。我尝试将 False 值传递给每个输出，但它总是只是切换。

如果不清楚，这里有一个例子。如果单击 button1，它将显示 text1。我想要这样，如果我然后按下 button2，text2 将显示，text1 将关闭。一次只能显示一个部分。

这是我尽可能简单的代码，其中每个按钮都是 collapsing/expanding 它的部分。

import dash
import dash_bootstrap_components as dbc
from dash import html, Input, Output, State


app = dash.Dash(__name__, external_stylesheets=[dbc.themes.DARKLY])
server = app.server


def refresh_layout():
    layout = html.Div(children=[
                dbc.Row([
                    dbc.Col([dbc.Button(
                        "Button1", id="first-button", n_clicks=0, color="dark", style={"width": "100%"})]),
                    dbc.Col([dbc.Button(
                        "Button2", id="second-button", n_clicks=0, color="dark", style={"width": "100%"})]),
                    dbc.Col([dbc.Button(
                        "Button3", id="third-button", n_clicks=0, color="dark", style={"width": "100%"})]),
                ]),

                html.Div(children=[
                    dbc.Collapse([
                        html.Div(children=[
                            dbc.Row([
                                html.H4("Text One", style={"textAlign": "center"}),
                            ]),
                        ]),
                    ], id="first-collapse", is_open=False),
                    dbc.Collapse([
                        html.Div(children=[
                            dbc.Row([
                                html.H4("Text Two", style={"textAlign": "center"}),
                            ]),
                        ]),
                    ], id="second-collapse", is_open=False),
                    dbc.Collapse([
                        html.Div(children=[
                            dbc.Row([
                                html.H4("Text Three", style={"textAlign": "center"}),
                            ]),
                        ]),
                    ], id="third-collapse", is_open=False),
                ])
             ])
    return layout


app.layout = refresh_layout


@app.callback(
    Output("first-collapse", "is_open"),
    Input("first-button", "n_clicks"),
    State("first-collapse", "is_open"),
)
def toggle_first_collapse(num_clicks, is_open):
    if num_clicks:
        return not is_open
    return is_open


@app.callback(
    Output("second-collapse", "is_open"),
    Input("second-button", "n_clicks"),
    State("second-collapse", "is_open"),
)
def toggle_second_collapse(num_clicks, is_open):
    if num_clicks:
        return not is_open
    return is_open


@app.callback(
    Output("third-collapse", "is_open"),
    Input("third-button", "n_clicks"),
    State("third-collapse", "is_open"),
)
def toggle_third_collapse(num_clicks, is_open):
    if num_clicks:
        return not is_open
    return is_open


if __name__ == '__main__':
    app.run_server(debug=False)

感谢您的帮助！

Answer 1

您只需一次回调即可完成此操作。我认为这应该可以解决问题。

@app.callback(
    [
      Output("first-collapse", "is_open"),
      Output("second-collapse", "is_open"),
      Output("third-collapse", "is_open"),
    ],
    [
      Input("first-button", "n_clicks"),
      Input("second-button", "n_clicks"),
      Input("third-button", "n_clicks"),
    ],
)
def toggle_collapses(button_one, button_two, button_three):
    ctx = dash.callback_context

    if not ctx.triggered:
        raise PreventUpdate
    else:
        button_id = ctx.triggered[0]['prop_id'].split('.')[0]

    if button_id == 'first-button':
        return True, False, False
    elif button_id == 'second-button':
        return False, True, False
    elif button_id == 'third-button':
        return False, False, True
    else:
        raise ValueError(f'Unexpected ID: {button_id}')

Python Dash - 是否可以按一个按钮折叠多个部分？

Python Dash - Is it possible to collapse multiple sections when pressing one button?

html

python

python-3.x

plotly-dash

dash-bootstrap-components