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: '础件能不能跟其他组件库共存？',
    content: '可以。所有组件名带 Cf 前缀（CfButton / CfInput…），CSS 类名带 cf- 前缀，跟 Element / Ant / Naive 不会冲突。',
  },
  {
    value: 'q2',
    title: '需要 Vue 或 React 吗？',
    content: '不需要。所有视觉走 CSS 类，纯 HTML + <link> 也能拿到 90% 的视觉。Modal / Tooltip / Toast 等带交互的需要少量 JS。',
  },
  {
    value: 'q3',
    title: '主题如何切换？',
    content: '改 <html data-theme=""> 即可，三套主题：dark-cool（默认）/ dark-warm / light。',
  },
];
</script>

<template>
  <div style="width: 100%; max-width: 36rem;">
    <CfAccordion :items="items" mode="single" variant="bordered" />
  </div>
</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

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

const items = [
  { value: 'a', title: '面板 A', content: '面板 A 的内容…' },
  { value: 'b', title: '面板 B', content: '面板 B 的内容…' },
  { value: 'c', title: '面板 C', content: '面板 C 的内容…' },
];
</script>

<template>
  <div class="demo-stack" style="width: 100%; max-width: 36rem;">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">variant = bordered（默认）</div>
      <CfAccordion :items="items" variant="bordered" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">variant = flush</div>
      <CfAccordion :items="items" variant="flush" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">variant = separated</div>
      <CfAccordion :items="items" variant="separated" />
    </div>
  </div>
</template>

<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] 三档主题切换。

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

const items = [
  { value: 'q1', title: '什么是 ChuFix？', content: '一个双框架同源的基础组件库。' },
  { value: 'q2', title: '怎么安装？', content: 'pnpm i @chufix-design/vue 或 @chufix-design/react' },
  { value: 'q3', title: '设置主题？', content: '改 [data-theme] 三档主题切换。' },
];
</script>

<template>
  <div style="width: 100%; max-width: 36rem;">
    <CfAccordion
      :items="items"
      mode="multiple"
      variant="separated"
      :default-open="['q1', 'q3']"
    />
  </div>
</template>

<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.

背景

可点击的项

正常展开 / 折叠。

禁用项 — 点不动

可点击的项

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

const items = [
  { value: 'a', title: '可点击的项', content: '正常展开 / 折叠。' },
  { value: 'b', title: '禁用项 — 点不动', content: '此项被锁定。', disabled: true },
  { value: 'c', title: '可点击的项', content: '正常展开 / 折叠。' },
];
</script>

<template>
  <div style="width: 100%; max-width: 36rem;">
    <CfAccordion :items="items" variant="bordered" :default-open="'a'" />
  </div>
</template>

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[].