Accordion 折叠面板
单展开 / 多展开两种模式，3 种边框样式（bordered / flush / separated），可禁用单项。
基础用法
items 每项 { value, title, content?, disabled? }。默认 mode="single" —— 同时只能开一个，点击当前项会折叠它。
<script setup lang="ts">
import { CfAccordion } from '@chufix-design/vue';
const items = [
{ value: 'q1', title: '问题一', content: '答案一…' },
{ value: 'q2', title: '问题二', content: '答案二…' },
{ value: 'q3', title: '问题三', content: '答案三…' },
];
</script>
<template>
<CfAccordion :items="items" mode="single" />
</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（默认）
variant = flush
variant = separated
<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" />多面板展开
mode="multiple" 让多个面板可以同时打开 —— 此时 modelValue / defaultOpen 是 string[]。常见于 FAQ 页或筛选侧栏。
一个双框架同源的基础组件库。
改 [data-theme] 三档主题切换。
<CfAccordion
:items="items"
mode="multiple"
variant="separated"
:default-open="['q1', 'q3']"
/><CfAccordion
items={items}
mode="multiple"
variant="separated"
defaultValue={['q1', 'q3']}
/>禁用单项 + 默认展开
设 item.disabled = true 让单个面板不可点击。defaultOpen (Vue) / defaultValue (React) 控制初始展开。
正常展开 / 折叠。
const items = [
{ value: 'a', title: '可点击的项', content: '正常展开 / 折叠。' },
{ value: 'b', title: '禁用项 — 点不动', content: '此项被锁定。', disabled: true },
{ value: 'c', title: '可点击的项', content: '正常展开 / 折叠。' },
];
<CfAccordion :items="items" :default-open="'a'" />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[]。
反馈与讨论
Accordion 折叠面板 的讨论