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()
dash-bootstrap-components-手风琴
最新推荐文章于 2024-05-15 09:51:57 发布