组件

OneCollapse

每个面板头部是 button[aria-expanded]，内容区使用 role="region" 关联到头部。

一次只能展开一项。

查看代码收起代码

import { OneCollapse, type OneCollapseChangeEvent } from '@geektech/one';

const collapse = new OneCollapse({
  defaultActive: ['basic'],
  items: [
    { value: 'basic', title: '基础用法', children: ['内容'] },
    { value: 'advanced', title: '高级用法', children: ['更多内容'] },
  ],
});
collapse.on('change', (payload) => {
  const event = payload as OneCollapseChangeEvent;
  console.log(event.value);
});

手风琴

accordion 模式下同时只保留一个展开项；受控 active 与事件载荷均为字符串数组。

API

OneCollapse 属性与事件
名称	签名	说明
`items`	`items?: readonly OneCollapseItem[]`	面板定义，支持禁用项。
`active`	`active?: readonly string[]`	受控展开项。
`defaultActive`	`defaultActive?: readonly string[]`	非受控初始展开项。
`accordion`	`accordion?: boolean`	手风琴模式，同时只开一项。
`ariaLabel`	`ariaLabel?: string`	折叠组容器的访问名称。
`change`	`(event: OneCollapseChangeEvent) => void`	展开项变化时发出 value: string[] 与 originalEvent: Event。