本章關鍵字:Python數據可視化、Dash開源庫Bootstrap、Poltly Dash Bootstrap控件、折疊列表用法、accordion函數用法
通過前面章節的介紹,我們已經基本了解了Python如何通過Dash Bootstrap Components組件做基礎的布局,接下來我們開始逐步介紹Bootstrap庫中的各種組件的基本用法,對基礎還不了解的,可以翻找以前的文章或視頻。
本章節我們詳細介紹下如何使用Python操作Bootstrap庫中的折疊列表控件,Accordion,即折疊列表。
這裡我們主要介紹兩個組件:Accordion與AccordionItem,每個節區頭部表格都由AccordionItem的标題支柱确定,效果如下圖:
Demo代碼如下所示:
import dash_bootstrap_components as dbc
from dash import html, Input, Output, callback
accordion_html = html.Div([
html.Br(),
html.P(html.Strong('使用Accordion組件創建可折疊列表', style={'color': 'rgb(255, 153, 51)'})),
html.Br(),
dbc.Accordion(
[
dbc.AccordionItem(
[
html.P("這是項目一裡面的内容"),
dbc.Button("可點擊按鈕"),
],
title="項目一",
item_id='項目一的ItemId'
),
dbc.AccordionItem(
[
html.P("這是項目二裡面的内容"),
dbc.Button("不可點擊按鈕", color="danger"),
],
title="項目二",
item_id='項目二的ItemId',
),
dbc.AccordionItem("這是項目一裡面的内容", title="項目三", item_id='項目三的ItemId'),
],
id='accordion_always_open',
always_open=True, # 可以使accordion items在另一個item打開時保持打開狀态。
),
html.Div(id='accordion_contents_open_ids', className='mt-3')
])
@callback(
Output('accordion_contents_open_ids', 'children'),
# active_item當前活動項的item_id,參數為字符串或列表。如果沒有為活動項目指定item_id,則默認為item-i,
# 其中i是項目的索引(從0開始)。如果always_open=True,這需要是一個字符串id列表。
[Input('accordion_always_open', 'active_item')]
)
def change_item(item):
return f'當前選擇的Item={item}'
接下來,我們來詳細介紹下這兩個組件的用法
Accordion我們可以對應Demo代碼,一項項去理解各個參數的含義,這樣在實際使用過程中就能如魚得水了。
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!