tft每日頭條

 > 科技

 > python可視化選擇器

python可視化選擇器

科技 更新时间:2025-07-03 03:35:30

本章關鍵字:Python數據可視化、Dash開源庫Bootstrap、Poltly Dash Bootstrap控件、折疊列表用法、accordion函數用法

python可視化選擇器(Python數據可視化Dash開源庫Bootstrap之折疊列表Accordion)1

通過前面章節的介紹,我們已經基本了解了Python如何通過Dash Bootstrap Components組件做基礎的布局,接下來我們開始逐步介紹Bootstrap庫中的各種組件的基本用法,對基礎還不了解的,可以翻找以前的文章或視頻。

本章節我們詳細介紹下如何使用Python操作Bootstrap庫中的折疊列表控件,Accordion,即折疊列表。

這裡我們主要介紹兩個組件:Accordion與AccordionItem,每個節區頭部表格都由AccordionItem的标題支柱确定,效果如下圖:

python可視化選擇器(Python數據可視化Dash開源庫Bootstrap之折疊列表Accordion)2

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
  • 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樣式。
AccordionItem
  • 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每日頭條,我们将持续为您更新最新资讯!

查看全部

相关科技资讯推荐

热门科技资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved