SepCollapse 折叠面板组件 v1.0.0

内容区域折叠/展开 · accordion 手风琴 · bordered 边框 · expandIconPosition 箭头位置 · expandIcon 自定义箭头 · ghost 幽灵模式 · disabled 禁用 · extra 额外内容 · collapsible 可折叠区域 · destroyInactivePanel 销毁隐藏面板 · onChange 回调 · 键盘可达性 · 动态 setItems/setActiveKey/setState

1. 基础用法(非手风琴,可同时展开多个)

HTML 声明式标签
JS API 初始化

2. 手风琴模式 accordion(同时只能展开一个)

HTML 声明式标签
JS API 初始化 + onChange 回调
activeKey: null

3. 箭头位置 expandIconPosition

HTML 声明式标签
JS API 初始化
箭头在左(默认)
箭头在右
动态切换箭头位置
箭头在左 箭头在右 position: left

4. 自定义箭头 expandIcon

HTML 声明式标签(字符串箭头)
JS API 初始化
函数自定义箭头(传入 panelState)
隐藏箭头 showArrow=false

5. 幽灵模式 ghost & 无边框 bordered=false

HTML 声明式标签
JS API 初始化
默认(有边框)
无边框 bordered=false
幽灵模式 ghost

6. 禁用面板 disabled

HTML 声明式标签
JS API 初始化
第二个面板被禁用

7. 额外内容 extra

HTML 声明式标签
JS API 初始化
头部右侧显示操作按钮

8. 可折叠区域 collapsible

HTML 声明式标签
JS API 初始化
header:点击整个头部可折叠(默认)
icon:仅点击箭头图标可折叠
disabled:面板不可折叠

9. 销毁隐藏面板 destroyInactivePanel

HTML 声明式标签
JS API 初始化
折叠后面板内容被销毁,再次展开时重新渲染

10. 动态 setItems / setActiveKey / setState

JS API 初始化
添加面板 移除面板 全部展开 全部折叠 切换手风琴

11. 键盘可达性

HTML 声明式标签
JS API 初始化
Tab 聚焦到头部,按 Enter / Space 展开/折叠

12. 非受控初始化 & 预渲染

defaultActiveKey:非受控模式,仅初始化展开状态
forceRender:折叠时仍渲染内容(destroyInactivePanel 共存时优先渲染)

13. 批量操作 & 单面板回调

onExpand: -

14. 自定义箭头不旋转

expandIconRotate=false:适用于 +/- 类图标,激活态不旋转

15. 键盘方向键导航

JS API 初始化
聚焦面板后按 ↑↓ 切换焦点,Home/End 跳首尾,Enter/Space 展开折叠

16. 动画参数 duration / easing

JS API 初始化
快速 100ms 默认 350ms 慢速 800ms linear duration: 350ms, easing: cubic-bezier(0.4,0,0.2,1)

17. 标题前缀 prefix & 面板徽标 badge

HTML 声明式标签(prefix 图标)
JS API 初始化

18. 面板拖拽排序 draggable

JS API 初始化(按住面板头部拖动排序)
排序: 1, 2, 3

19. 尺寸变体 size

small
middle(默认)
large

20. 自定义头部 header

JS API 初始化(header 完全自定义标题区域)

21. 面板懒加载 lazy

JS API 初始化(lazy 面板首次展开才渲染内容)

22. 搜索过滤 searchable

JS API 初始化(输入关键词过滤面板并高亮)

23. 面板加载状态 loading

JS API 初始化(loading=true 展示骨架闪烁,loadingTimeout 可设超时自动取消)

24. 自动化断言