Upload 设计文档

文件上传,严格对齐 Semi Design:点击/拖拽选择、文件卡片列表(list)与照片墙(picture)、真实 XHR 上传、裁切、目录上传。

← API 文档

使用建议

文件上传,严格对齐 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)上传可拖拽区域描边颜色 - 悬浮