使用建议
文件上传,严格对齐 Semi Design:点击/拖拽选择、文件卡片列表(list)与照片墙(picture)、真实 XHR 上传、裁切、目录上传。
Accessibility
ARIA role:button
- 隐藏的 file input
- 添加区/拖拽区 role=button + 键盘 Enter/Space
- FileCard 移除/替换/重试按钮有 aria-label
- uploading Progress 有可访问名
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-color-upload-assist-text | var(--cd-color-text-2) | 上传文件列表标题及文件大小文本颜色 |
--cd-color-upload-border | var(--cd-color-border) | 图片墙添加按钮及拖拽区域描边颜色 |
--cd-color-upload-card-bg | var(--cd-color-fill-0) | 上传文件卡片背景色 - 默认 |
--cd-color-upload-card-bg-hover | var(--cd-color-fill-1) | 上传文件卡片背景色 - 悬浮 |
--cd-color-upload-card-fail-bg | var(--cd-color-danger-light-default) | 上传失败文件卡片背景色 - 默认 |
--cd-color-upload-card-fail-bg-hover | var(--cd-color-danger-light-hover) | 上传失败文件卡片背景色 - 悬浮 |
--cd-color-upload-clear-text | var(--cd-color-primary) | 上传清空按钮文本颜色 |
--cd-color-upload-drag-area-bg | var(--cd-color-tertiary-light-default) | 上传可拖拽区域背景颜色 - 默认 |
--cd-color-upload-drag-area-bg-hover | var(--cd-color-primary-light-default) | 上传可拖拽区域背景颜色 - 悬浮 |
--cd-color-upload-drag-area-border-hover | var(--cd-color-primary) | 上传可拖拽区域描边颜色 - 悬浮 |