97 lines
5.2 KiB
JSON
97 lines
5.2 KiB
JSON
{
|
||
"slug": "dragupload",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 dragupload：.kole-upload-drop 是虚线拖拽区，is-over 高亮，.kole-upload-item 列出文件。",
|
||
"usage": [
|
||
"拖拽区 .kole-upload-drop 是 2px 虚线边框、圆角 8px、内边距 28px，光标为 pointer 表示可点可拖（frameworks/DragUpload.css:3）。",
|
||
"拖入时给拖拽区加 .is-over：虚线变品牌色、底色换品牌浅底、文字也转品牌色（frameworks/DragUpload.css:4）。",
|
||
"拖拽区内的图标 .kole-upload-icon 是 26px 块级，下方提示 .kole-upload-hint 13px；提示里的 b 标签会被染成品牌色（frameworks/DragUpload.css:5-7）。",
|
||
"文件列表 .kole-upload-list 是纵向 flex 加 8px 间距，每项 .kole-upload-item 横向排列（缩略图、元信息、删除）（frameworks/DragUpload.css:8-9）。",
|
||
"缩略图 .kole-upload-thumb 是 36px 圆角方块；内部 img 已被拉满并 object-fit:cover，不用自己裁（frameworks/DragUpload.css:10-11）。",
|
||
"进度条结构是 .kole-upload-bar 外层加内部 <i> 元素：外层 4px 高作轨道，内层 i 用宽度百分比表示进度，宽度过渡 0.2s（frameworks/DragUpload.css:14-15）。",
|
||
"删除按钮 .kole-upload-del 默认次级文字色，hover 转错误色作危险提示（frameworks/DragUpload.css:17-18）。"
|
||
],
|
||
"bestPractices": [
|
||
"文件名过长由 .kole-upload-name 的 ellipsis 截断处理（white-space:nowrap 加 overflow:hidden），但外层 .kole-upload-meta 的 min-width:0 是关键，去掉它省略号不会生效（frameworks/DragUpload.css:12-13）。",
|
||
"进度靠内部 <i> 的行内宽度驱动：样式里 i 的 width 初值是 0，业务侧改宽度即可，不需要额外的类（frameworks/DragUpload.css:15）。",
|
||
"is-over 需在 dragenter/dragleave/drop 上手动切换，样式文件不含拖拽逻辑（frameworks/DragUpload.css:4）。"
|
||
],
|
||
"a11y": [
|
||
"拖拽区光靠鼠标无法覆盖键盘用户，请在同区提供可聚焦的文件选择按钮或 label（frameworks/DragUpload.css:3）。",
|
||
"is-over 是纯颜色变化，需要时补 aria-dropeffect 或文字提示，别只靠虚线变色（frameworks/DragUpload.css:4）。",
|
||
"删除按钮用 <button> 并带可访问名称；12px 内的 × 字符对读屏无意义（frameworks/DragUpload.css:17）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-upload（根）、.kole-upload-drop（拖拽区）、.kole-upload-icon / -hint（提示区）、.kole-upload-list / -item / -thumb / -meta / -name / -bar / -status / -del（文件项）；状态为 .is-over。",
|
||
"table": [
|
||
{
|
||
"name": "kole-upload",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DragUpload.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-upload-drop",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DragUpload.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-over",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DragUpload.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-upload-icon",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DragUpload.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-upload-hint",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DragUpload.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-upload-list",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DragUpload.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-upload-item",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DragUpload.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-upload-thumb",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DragUpload.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-upload-meta",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DragUpload.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-upload-name",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DragUpload.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/DragUpload.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"dragupload-ex-1"
|
||
],
|
||
"notes": [
|
||
"拖拽区与高亮态见 frameworks/DragUpload.css:3-4，列表与缩略图见 frameworks/DragUpload.css:8-11，进度条见 frameworks/DragUpload.css:14-15，删除见 frameworks/DragUpload.css:17-18。",
|
||
"前缀是 kole-upload（不是 kole-dragupload），按组件名拼类名会失效。",
|
||
"该文件用 var(--font-family, ...) 兜底字体栈，与骨架文件的 --kole-font-family 写法不同。"
|
||
]
|
||
}
|