dash_bootstrap_components.Collapse没有折叠。

Question

我正试图实现一个 dash_bootstrap_components.Collapse 在我 dash 应用，但它的行为有问题。这里的代码，我不是自己写的，我只是简单的复制了它从 dash_bootstrap_components.Collapse 文件:

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()

这是我得到的。

当我点击按钮时，什么都没有发生。我试图找出问题所在，我发现：

• n 在 app.callback 初始化为 None点击一下，就变成了 1那么，它增加了 1 与点击按钮的次数相关联。
• is_open 在 app.callback 初始化为 None在一次点击后，它仍然保持 None，然后在第二次点击后成为 True第三次点击后 False 诸如此类

怎么做才能让它发挥作用？

版本信息：我想在我的dash应用中实现dash_bootstrap_components.Collapse，但它的行为有问题。

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

Answer 1

如果你链接Boostrap样式表，你的代码将工作，因为它是。

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