本章關鍵字：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}'

接下來，我們來詳細介紹下這兩個組件的用法

• children：該組件的子組件，可傳入list或者單個的dash組件，也可傳入字符串或者數字。
• id：此組件的ID，用于識别回調中的Dash組件。ID在應用中的所有組件中都必須是唯一的。
• active_item：當前活動項的item_id，參數為字符串或列表。如果沒有為活動項目指定item_id，則默認為item-i，其中i是項目的索引(從0開始)。如果always_open=True，這需要是一個字符串id列表。
• always_open：布爾值，默認False，通過使用always_open道具，可以使accordion items在另一個item打開時保持打開狀态。
• class_name：字符串，通常與CSS一起使用，以設置具有公共屬性的元素的樣式。
• flush：布爾值，用它的父容器全平面渲染accordion。
• key：組件的唯一标識符，用于在渲染組件時提高React.js的性能。
• loading_state：該對象保存來自dash-renderer的加載狀态。
• persisted_props：值等于的列表：'active_item's，默認[“active_item”]，屬性其用戶交互在刷新組件或頁面後将持續存在。因為隻允許value，所以通常可以忽略這個道具。
• persistence：布爾或字符串或數字，用于允許在刷新組件(或頁面)時保持此組件中的用戶交互。如果persistent是真值，并且沒有從它之前的值發生變化，那麼用戶在使用應用程序時更改的值将保持該變化，隻要新值也匹配最初給出的值。與persistence_type一起使用。
• persistence_type：值等于'local'， 'session'， 'memory'，默認'local'，持久用戶更改的存儲位置:内存:隻保存在内存中，在頁面刷新時重置。本地:窗口。localStorage，在浏覽器退出後保存數據。會話:窗口。sessionStorage，一旦浏覽器退出，數據将被清除。
• start_collapsed：布爾，默認False，設置為True為所有項目最初被折疊。
• style：定義将覆蓋先前設置的樣式的CSS樣式。

• children：該組件的子組件，可傳入list或者單個的dash組件，也可傳入字符串或者數字。
• id：此組件的ID，用于識别回調中的Dash組件。ID在應用中的所有組件中都必須是唯一的。
• class_name：字符串，通常與CSS一起使用，以設置具有公共屬性的元素的樣式。
• item_id：字符串，可選的項目标識符，用于确定在沒有指定的情況下哪個項目是可見的，并且AccordionItem在Accordion組件中使用，itemId将被設置為“item-i”，其中i是傳遞給Accordion組件的列表項中項目的位置(零索引)。
• loading_state：該對象保存來自dash-renderer的加載狀态。
• style：定義将覆蓋先前設置的樣式的CSS樣式。
• title：顯示的标題。

我們可以對應Demo代碼，一項項去理解各個參數的含義，這樣在實際使用過程中就能如魚得水了。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!