本章关键字：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代码，一项项去理解各个参数的含义，这样在实际使用过程中就能如鱼得水了。