Preview Updated 2026-05-10

Accordion

Single or multi-expand modes, three border styles (bordered / flush / separated), with per-item disable.

Basic usage

Each items entry is { value, title, content?, disabled? }. The default mode="single" keeps only one panel open at a time — clicking the active item collapses it.

础件能不能跟其他组件库共存？

需要 Vue 或 React 吗？

主题如何切换？

<script setup lang="ts">
import { CfAccordion } from '@chufix-design/vue';

const items = [
{ value: 'q1', title: 'Question 1', content: 'Answer 1…' },
{ value: 'q2', title: 'Question 2', content: 'Answer 2…' },
{ value: 'q3', title: 'Question 3', content: 'Answer 3…' },
];
</script>

<template>
<CfAccordion :items="items" mode="single" />
</template>

import { CfAccordion } from '@chufix-design/react';

const items = [
{ value: 'q1', title: 'Question 1', content: 'Answer 1…' },
{ value: 'q2', title: 'Question 2', content: 'Answer 2…' },
{ value: 'q3', title: 'Question 3', content: 'Answer 3…' },
];

<CfAccordion items={items} mode="single" />

Border variants

bordered — outer frame with separators between items (default)
flush — no outer frame, only thin lines between items, blends into the page
separated — every item is an independent card with spacing for clearer block hierarchy

variant = bordered（默认）

面板 A

面板 B

面板 C

variant = flush

面板 A

面板 B

面板 C

variant = separated

面板 A

面板 B

面板 C

<CfAccordion :items="items" variant="bordered" />
<CfAccordion :items="items" variant="flush" />
<CfAccordion :items="items" variant="separated" />

<CfAccordion items={items} variant="bordered" />
<CfAccordion items={items} variant="flush" />
<CfAccordion items={items} variant="separated" />

Multiple panels

mode="multiple" allows several panels to be open at once — modelValue / defaultOpen becomes a string[]. Common in FAQ pages or filter sidebars.

什么是 ChuFix？

一个双框架同源的基础组件库。

怎么安装？

设置主题？

改 [data-theme] 三档主题切换。

<CfAccordion
:items="items"
mode="multiple"
variant="separated"
:default-open="['q1', 'q3']"
/>

<CfAccordion
items={items}
mode="multiple"
variant="separated"
defaultValue={['q1', 'q3']}
/>

Disabled item + default open

Set item.disabled = true to make a single panel unclickable. defaultOpen (Vue) / defaultValue (React) controls the initially expanded item.

可点击的项

正常展开 / 折叠。

禁用项 — 点不动

可点击的项

const items = [
{ value: 'a', title: 'Clickable item', content: 'Expands and collapses normally.' },
{ value: 'b', title: 'Disabled item — locked', content: 'This item is locked.', disabled: true },
{ value: 'c', title: 'Clickable item', content: 'Expands and collapses normally.' },
];

<CfAccordion :items="items" :default-open="'a'" />

const items = [
{ value: 'a', title: 'Clickable item', content: 'Expands and collapses normally.' },
{ value: 'b', title: 'Disabled item — locked', content: 'This item is locked.', disabled: true },
{ value: 'c', title: 'Clickable item', content: 'Expands and collapses normally.' },
];

<CfAccordion items={items} defaultValue="a" />

API

Prop	Type	Default	Description
`items`	`Array<{ value, title, content?, disabled? }>`	`[]`	Panel list
`mode`	`'single' \| 'multiple'`	`'single'`	Single open vs. multiple open
`variant`	`'bordered' \| 'flush' \| 'separated'`	`'bordered'`	Border style
`modelValue` (Vue) / `value` (React)	`string \| string[]`	—	Controlled current expansion
`defaultOpen` (Vue) / `defaultValue` (React)	`string \| string[]`	—	Uncontrolled initial expansion

When mode="single" the controlled / uncontrolled value is string; when mode="multiple" it is string[].