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 键可临时切换为交换模式
当前模式:挤(插入)— 拖拽项插入目标位置,其余顺移