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 初始化
箭头在左(默认)
箭头在右
动态切换箭头位置
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 初始化
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 可设超时自动取消)