dash_bootstrap_components。折叠不会折叠

时间:2020-06-04 13:31:19

标签: javascript python callback collapse plotly-dash

我正在尝试在我的dash_bootstrap_components.Collapse应用中实现dash,但是它的行为存在问题。这里的代码不是我自己写的,我只是从dash_bootstrap_components.Collapse documentation复制而来:

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash()

app.layout = html.Div([dbc.Button('Open collapse',
                                  id = 'collapse-button',
                                  className = 'mb-3',
                                  color = 'primary'),
                       dbc.Collapse(dbc.Card(dbc.CardBody('This content is hidden in the collapse')),
                                    id = 'collapse')])


@app.callback(Output('collapse', 'is_open'),
              [Input('collapse-button', 'n_clicks')],
              [State('collapse', 'is_open')])
def toggle_collapse(n, is_open):
    if n:
        return not is_open
    return is_open

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

这就是我得到的:

enter image description here

当我单击按钮时,什么也没发生。
我试图找出问题出在哪里,我发现:

    n中的
  • app.callback初始化为None,单击一次变为1,然后随着按钮点击次数增加1 ,正确性
  • is_open中的
  • app.callback初始化为None,单击一次仍保持None,然后第二次单击变为True,第三次单击点击False,依此类推

我该怎么做才能使其正常工作?

版本信息:

Python                    3.7.0
dash                      1.12.0
dash-bootstrap-components 0.10.1
dash-core-components      1.10.0
dash-html-components      1.0.3
dash-renderer             1.4.1
dash-table                4.7.0
plotly                    4.7.0

1 个答案:

答案 0 :(得分:2)

如果您链接Boostrap样式表,您的代码将按原样工作。

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])