Collapse 折叠面板

展开或收起一组内容。

基础用法

自由展开

Leaf Garden 的项目信息。

手风琴 · 紧凑尺寸

basic.tsx

import type { CollapseItem } from '@ifhover/leaf-ui';

import { Collapse, Flex, Input, Space, Text } from '@ifhover/leaf-ui';

const items: CollapseItem[] = [
  { key: 'about', label: '项目介绍', children: <p>Leaf Garden 的项目信息。</p> },
  {
    key: 'settings',
    label: '设置',
    children: <Input aria-label="项目名称" placeholder="输入后折叠，内容会保留" />,
  },
  { key: 'archived', label: '已归档', children: null, disabled: true },
];

export function CollapseBasic() {
  return (
    <Space direction="vertical" align="stretch">
      <Flex direction="column" gap="sm">
        <Text>自由展开</Text>
        <Collapse items={items} defaultActiveKey="about" />
      </Flex>
      <Flex direction="column" gap="sm">
        <Text>手风琴 · 紧凑尺寸</Text>
        <Collapse items={items} accordion size="sm" />
      </Flex>
    </Space>
  );
}

Collapse API

属性	类型	默认值	说明
`items`	`readonly CollapseItem[]`	必填	面板列表
`activeKey / defaultActiveKey`	`string \| readonly string[]`	`[]`	受控展开项 / 初始展开项
`onChange`	`(keys: string[]) => void`	—	展开项变化
`accordion`	`boolean`	`false`	同时只展开一个面板
`bordered`	`boolean`	`true`	显示边框
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	标题尺寸
`destroyInactive`	`boolean`	`false`	收起后销毁内容

CollapseItem

属性	类型	默认值	说明
`key`	`string`	必填	唯一标识
`label / children`	`ReactNode`	必填	标题 / 面板内容
`disabled`	`boolean`	`false`	禁止切换该面板
`extra`	`ReactNode`	—	标题旁的内容

类型

定义组件属性或组装列表时可导入相关类型。

import type { CollapseProps, CollapseItem } from '@ifhover/leaf-ui';

使用说明

访问过的内容默认保留。方向键、Home 和 End 在标题之间移动，Enter 或空格展开。extra 中的操作不会触发展开。

#Collapse 折叠面板

#基础用法

#Collapse API

#CollapseItem

#类型

#使用说明

Collapse 折叠面板

基础用法

Collapse API

CollapseItem

类型

使用说明