示例
直接操作示例，查看组件在具体任务中的状态与反馈。
本地说明分区
组件负责单项展开、折叠和键盘焦点移动。
允许全部折叠
覆盖公开组件与本地示例。
保持一项展开
覆盖公开组件与本地示例。
功能说明
键盘可访问说明
使用建议
用于渐进披露而非主导航
把相关但非同时必读的内容分组展开；跨页面导航、步骤流程或需要并排比较的内容应选择其他结构。
让标题概括展开内容
每个 title 应单独可理解，并与 panel 内容形成明确问答或主题关系，不使用“更多”之类含糊文案。
谨慎使用折叠与嵌套
根据阅读任务决定 allowCollapse；当前是单项展开合同，避免深层嵌套导致焦点和层级难以理解。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseAccordion } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- 当前 value 是单个 string，只支持一次展开一个条目，不提供多项同时展开模式。
- T17 尚缺 nested-content、RTL、mobile、manual keyboard/screen-reader、deterministic visual、packed React 18/19 与 hydration 证据。
- Manual keyboard, screen-reader, nested-content, RTL, and mobile review remains pending.
- Deterministic visual evidence and final T17/T23 packed React 18/19 and hydration checks remain pending.
API
查看组件源码export interface BaseAccordionProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'defaultValue' | 'onChange' | 'style'
> {
items?: BaseAccordionItem[];
value?: string;
defaultValue?: string;
allowCollapse?: boolean;
keyboardNavigation?: boolean;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseAccordionClassNames;
style?: CSSProperties;
onValueChange?: (value: string | undefined) => void;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
items | 用于生成组件条目的一组结构化数据。 | BaseAccordionItem[] | [] |
value | 手风琴当前展开项的受控 id。 | string | — |
defaultValue | 非受控模式下使用的初始值。 | string | — |
allowCollapse | 是否允许再次操作当前项后收起全部内容。 | boolean | true |
keyboardNavigation | 是否启用方向键在手风琴标题之间移动焦点。 | boolean | true |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseAccordionClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
onValueChange | 值变化时调用的回调；参数结构以当前组件的 Props 类型为准。 | (value: string | undefined) => void | — |