Python数据可视化Dash开源库Bootstrap之折叠列表Accordion
本章关键字：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
- 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代码，一项项去理解各个参数的含义，这样在实际使用过程中就能如鱼得水了。
