# drag-collapse LLMs.txt

> 供 LLM 快速理解 `@flatbiz/antd/drag-collapse` 的使用方式。

## 模块定位

可拖拽 折叠面板

## 导入方式

```ts
import { DragCollapse } from '@flatbiz/antd/drag-collapse';
// 也可以从主入口导入：import { ... } from '@flatbiz/antd';
```

## 公开导出

- `DragCollapse` - 可拖拽 折叠面板
- `* from ./drag-collapse.jsx`
- `SortableItem`
- `DragCollapseItemKey`
- `DragCollapseItem`
- `DragCollapseProps`

## 依赖的 antd 能力

`Collapse`、`CollapseProps`

## Props / 配置要点

### SortableItemProps

- `openKeys`（必填）：: DragCollapseItemKey[]
- `style`（可选）：: CSSProperties
- `item`（必填）：: DragCollapseItem
- `collapsible`（可选）：: DragCollapseProps['collapsible']
- `expandIcon`（可选）：: DragCollapseProps['expandIcon']
- `expandIconPosition`（可选）：: DragCollapseProps['expandIconPosition']
- `size`（可选）：: DragCollapseProps['size']
- `dragIcon`（可选）：: DragCollapseProps['dragIcon']
- `hideDragIcon`（可选）：: DragCollapseProps['hideDragIcon']
- `onChange`（必填）：: (activeKey: DragCollapseItemKey) => void
- `isGray`（可选）：: boolean
- `className`（可选）：: string
- `isLast`（可选）：: boolean

### DragCollapseItemKey

- 声明：`export type DragCollapseItemKey = number | string;`

### DragCollapseItem

- `key`（必填）：: DragCollapseItemKey
- `header`（必填）：: ReactNode
- `content`（必填）：: ReactElement

### DragCollapseProps

- `className`（可选）：: string
- `style`（可选）：: CSSProperties
- `items`（必填）：: DragCollapseItem[]；面板数据
- `onDropChange`（必填）：: (items: DragCollapseItem[]) => void；拖拽面板回调
- `accordion`（可选）：: boolean；手风琴模式，只允许单个内容区域展开
- `activeKey`（可选）：: DragCollapseItemKey | DragCollapseItemKey[]；当前激活 tab 面板的key
- `collapsible`（可选）：: CollapseProps['collapsible']；所有子面板是否可折叠或指定可折叠触发区域，可选: header | icon | disabled
- `defaultActiveKey`（可选）：: DragCollapseItemKey[]；初始化选中面板的 key
- `expandIcon`（可选）：: CollapseProps['expandIcon']；自定义切换图标
- `expandIconPosition`（可选）：: CollapseProps['expandIconPosition']；设置图标位置，可选：start | end
- `size`（可选）：: CollapseProps['size']；设置折叠面板大小
- `hideDragIcon`（可选）：: boolean；隐藏拖拽图标，默认不隐藏
- `dragIcon`（可选）：: ReactElement；设置拖拽图标
- `onChange`（可选）：: (activeKey?: DragCollapseItemKey | DragCollapseItemKey[]) => void；切换面板的回调

## 使用规则与行为

- 可拖拽 折叠面板 @param props @returns
- 面板数据
- 拖拽面板回调
- 手风琴模式，只允许单个内容区域展开
- 当前激活 tab 面板的key
- 所有子面板是否可折叠或指定可折叠触发区域，可选: header | icon | disabled
- 初始化选中面板的 key
- 自定义切换图标
- 设置图标位置，可选：start | end
- 设置折叠面板大小

## 基础示例

```tsx
import { DragCollapse, type SortableItemProps } from '@flatbiz/antd/drag-collapse';

const props: SortableItemProps = {
  // 按业务传入必要参数
};

<DragCollapse {...props} />;
```

## 源码索引

- `src/drag-collapse/drag-collapse.tsx`
- `src/drag-collapse/index.ts`
- `src/drag-collapse/sortable-item.tsx`
- `src/drag-collapse/types.ts`

## 给 LLM 的注意事项

- 优先使用 `@flatbiz/antd/drag-collapse` 或主入口 `@flatbiz/antd` 的公开导出，不要引用内部实现文件。
- 当 Props 与 antd 原组件同名能力冲突时，以本模块导出的 Props 类型为准。
- 若文档未覆盖某个边缘参数，请读取上方源码索引中的类型定义和 JSDoc。