dash-bootstrap-components-手风琴

import dash
from dash import Input, Output, State, html
import dash_bootstrap_components as dbc
from dash_bootstrap_components.themes import BOOTSTRAP

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

accordion = html.Div(
    [
        dbc.Accordion(
            [
                dbc.AccordionItem(
                    [
                        "这是第一部分",
                        dbc.Button("d点击"),
                    ],
                    title="标题一",
                    item_id="item-1",
                ),
                dbc.AccordionItem(
                    "这是第二部分",
                    title="标题二",
                    item_id="item-2",
                ),
                dbc.AccordionItem(
                    "这是第三部分",
                    title="标题三",
                    item_id="item-3",
                ),
            ],
            # id由于标识回调中的dash组件
            id="accordion",
            # 不想在启动的时候打开任何项目tart_collapsed=True
            # 若想指定默认打开任一项，可以用  active_item="item_id名"来指定,
            start_collapsed=True,
        ),
        # className 通常与css一起使用
        html.Div(id="accordion-contents", className="mt-3"),
    ]
)

app.layout = dbc.Container(accordion, fluid=True)

# callbacks 回调   显示当前被选中的项目
@app.callback(
    Output("accordion-contents", "children"),
    Input("accordion", "active_item"),
)
def change_item(item):
    return f"被选中的项目是: {item}"


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