开发预览更新于 2026-05-10

Accordion 折叠面板

单展开 / 多展开两种模式，3 种边框样式（bordered / flush / separated），可禁用单项。

基础用法

items 每项 { value, title, content?, disabled? }。默认 mode="single" —— 同时只能开一个，点击当前项会折叠它。

背景

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

需要 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: '问题一', content: '答案一…' },
{ value: 'q2', title: '问题二', content: '答案二…' },
{ value: 'q3', title: '问题三', content: '答案三…' },
];

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

三种边框 variant

bordered —— 整体外框 + 项之间分隔线（默认）
flush —— 没有外框，仅项间细线，融入页面背景
separated —— 每项独立卡片 + 间距，块状层次更明显

背景

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" />

多面板展开

mode="multiple" 让多个面板可以同时打开 —— 此时 modelValue / defaultOpen 是 string[]。常见于 FAQ 页或筛选侧栏。

背景

什么是 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']}
/>

禁用单项 + 默认展开

设 item.disabled = true 让单个面板不可点击。defaultOpen (Vue) / defaultValue (React) 控制初始展开。

背景

可点击的项

正常展开 / 折叠。

禁用项 — 点不动

可点击的项

<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: '可点击的项', content: '正常展开 / 折叠。' },
{ value: 'b', title: '禁用项 — 点不动', content: '此项被锁定。', disabled: true },
{ value: 'c', title: '可点击的项', content: '正常展开 / 折叠。' },
];

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

API

Prop	类型	默认值	说明
`items`	`Array<{ value, title, content?, disabled? }>`	`[]`	面板列表
`mode`	`'single' \| 'multiple'`	`'single'`	同时只能开一个 / 可多开
`variant`	`'bordered' \| 'flush' \| 'separated'`	`'bordered'`	边框样式
`modelValue` (Vue) / `value` (React)	`string \| string[]`	—	受控当前展开
`defaultOpen` (Vue) / `defaultValue` (React)	`string \| string[]`	—	非受控初始展开

mode="single" 时受控 / 非受控值是 string；mode="multiple" 时是 string[]。