SepCard 卡片组件 v1.0.0

通用卡片容器 · 支持阴影/悬停/无边框/加载态/拖拽排序 · 替代 dashboard-panel

1. 基础用法(标题 + 内容)

HTML 声明式标签

这是声明式卡片内容

JS API 初始化

2. 阴影变体(shadow: always / hover / never)

HTML 声明式标签
JS API 初始化

3. 悬停效果(hoverable)

HTML 声明式标签
JS API 初始化

4. 无边框(bordered:false)

HTML 声明式标签
JS API 初始化

5. 加载态(loading)

HTML 声明式标签

数据加载中...

JS API 初始化

6. 提示文字(hint + showHint)

HTML 声明式标签
JS API 初始化

7. 内容自定义(字符串 / 函数 / 数组 / 子节点)

HTML 声明式标签(子节点会移入 body)

子节点会自动移入卡片 body

JS API 初始化

7.5 Header 自定义(showHeader / headerContent)

HTML 声明式标签

只有内容区,没有 header

JS API 初始化

7.6 尺寸(size: default / small)

HTML 声明式标签

default 大小

small 大小

JS API 初始化

7.7 封面图(cover)

JS API 初始化

7.8 底部操作(actions)

JS API 初始化

7.9 底部内容区(footer)

HTML 声明式标签
JS API 初始化

8. 自定义样式(headerClass / bodyClass / bodyStyle)

HTML 声明式标签

声明式自定义 body 样式

JS API 初始化

8.5 其他配置(icon / panelId / id / cursor)

HTML 声明式标签
JS API 初始化

9. API 控制(setTitle / setPanelId / setState)

JS API 初始化

10. onClick 事件(点击 header)

HTML 声明式标签

声明式 onClick 绑定全局函数 demoCardClick

JS API 初始化
点击卡片 header

11. subscribe 订阅状态变化

JS API 初始化(点击按钮修改状态,subscribe 回调会实时收到最新 state)
等待状态变化...(点击按钮触发)

12. 拖拽排序(SepCard.enableDrag + 编辑模式)

JS API 初始化(点击"切换编辑模式"后可拖拽 header 排序)

12b. 增强功能(extra / collapsible / bodyMaxHeight)

extra 头部右侧操作区
collapsible 可折叠卡片
bodyMaxHeight 内容滚动

12c. 增强功能(type=inner / closable / size=large)

type=inner 嵌套卡片
closable 可关闭卡片
size=large 大尺寸

12d. 增强功能(ghost / split / loadingContent)

ghost 幽灵模式
split 分割线
loadingContent 自定义加载态

13. 通用拖拽排序(SepBase.enableDragSort,任意组件混合排序)

任务列表场景(复选框 + 文本 + 状态徽标 + 操作按钮,拖拽左侧手柄排序)

13b. 网格拖拽排序(n×n,支持上下左右任意位置)

3×3 网格,支持「挤(插入)」和「替换(交换)」两种模式。拖拽时按住 Shift 键可临时切换为交换模式
当前模式:挤(插入)— 拖拽项插入目标位置,其余顺移

14. 自动化断言