Accordion 手风琴

基本用法

对复杂区域进行分组和隐藏，保持页面的整洁。
手风琴是一种特殊的折叠面板，用于显示和隐藏内容，只允许单个内容区域展开。

const items = [
    {
        header: "This is panel header 1",
        defaultActive: true,
        content: "This is panel content 1",
    },
    {
        header: "This is panel header 2",
        content: "This is panel content 2",
    },
    {
        header: "This is panel header 3",
        content: "This is panel content 3",
    },
];

<Accordion name="demo" items={items} />

aaaThis is panel header 1

This is panel content 1

This is panel header 2

This is panel content 2

This is panel header 3

This is panel content 3

代码演示

使用图标

你可以通过 showIcon 展示 Panel 组件的箭头图标。
当 showIcon=true 时，默认值使用 collapse-arrow。 其他 icon 目前有 collapse-plus。

const items = [
    {
        header: "This is panel header 1 (showIcon:true)",
        content: "This is panel content 1",
        showIcon: true,
        defaultActive: true,
    },
    {
        header: "This is panel header 2 (showIcon:collapse-arrow)",
        content: "This is panel content 2",
        showIcon: "collapse-arrow",
    },
    {
        header: "This is panel header 3(showIcon:collapse-plus)",
        content: "This is panel content 3",
        showIcon: "collapse-plus",
    },
];

<Accordion name="demo-showIcon" items={items} />

This is panel header 1 (showIcon:true)

This is panel content 1

This is panel header 2 (showIcon:collapse-arrow)

This is panel content 2

This is panel header 3(showIcon:collapse-plus)

This is panel content 3

折叠面板模式

你可以通过 collapse 设置同时展开多个面板，这个例子默认展开了第一个。

const items = [
    {
        header:"This is panel header 1",
        content: "This is panel content 1",
        defaultActive: true,
    },
    {
        header:"This is panel header 2",
        content: "This is panel content 2",
        showIcon: true,
    },
    {
        header: "This is panel header 3",
        content: "This is panel content 3",
        showIcon: true,
    },
];

<Accordion name="demo-collapse" collapse items={items} />

This is panel header 1

This is panel content 1

This is panel header 2

This is panel content 2

This is panel header 3

This is panel content 3

添加边框

你可以通过 bordered 设置外层边框。

const items = [
    {
        header: "This is panel header 1",
        content: "This is panel content 1",
        defaultActive: true,
    },
    {
        header: "This is panel header 2",
        content: "This is panel content 2",
    },
    {
        header: "This is panel header 3",
        content: "This is panel content 3",
    },
];

<Accordion name="demo-bordered" items={items} />

This is panel header 1

This is panel content 1

This is panel header 2

This is panel content 2

This is panel header 3

This is panel content 3

紧凑风格（ join 组合 Panel ）

你可以通过 join 设置 Panel 元素紧凑风格的面板。
紧凑风格推荐使用 bordered 设置外层边框。

const items = [
    {
        header: "This is panel header 1",
        content: "This is panel content 1",
        defaultActive: true,
        classes: {
            container: "bg-transparent",
            header: "",
            content: "",
        }
    },
    {
        header: "This is panel header 2",
        content: "This is panel content 2",
        showIcon: true,
    },
    {
        header: "This is panel header 3",
        content: "This is panel content 3",
        showIcon: true,
    },
];

<Accordion
    name="demo-collapse"
    join
    bordered
    items={items}
    classes={{
        container: "",
        panel:{
            container: "bg-transparent",
            header: "",
            content: "",
        }
    }}
/>

This is panel header 1

This is panel content 1

This is panel header 2

This is panel content 2

This is panel header 3

This is panel content 3

API

Accordion

属性	说明	类型	默认值
name	所有同名 Accordion 一起时只有一个可以被选中。 如果你有超过一个 Accordion 手风琴在一个页面上，你需要给每一个 Accordion 设置不同的名字。	string	""
items	折叠项目内容	ItemType	[]
join	是否启用紧凑风格。利用 join 组合 Panel 组件。 子组件 Panel 需同时传入 joinItem 属性。	boolean	false
collapse	是否同时展开多个面板（折叠面板模式）	boolean	false
bordered	带边框风格的折叠面板	boolean	false
classes	作用于 Accordion 的样式	Accordion.classes	-

Accordion.classes

属性	说明	类型	默认值
container	Panel 最外层元素样式	string	""
panel	作用于 Panel 组件的通用样式，优先级低于 ItemType.classes	object	-

ItemType （ Panel ）

属性	说明	类型	默认值
header	面板头内容	string	""
defaultActive	初始化选中的面板	boolean	false
showIcon	是否展示当前面板上的 Icon，可选值有 collapse-arrow collapse-plus。 当showIcon=true时，默认使用 collapse-arrow	boolean || string	”collapse-arrow”
content	面板内容文本	string	""
classes	组件的样式	ItemType.classes	-

ItemType.classes

属性	说明	类型	默认值
container	Panel 最外层元素样式	string	""
header	Panel 标题样式	string	""
content	Panel 内容区域样式	string	""