FileCard文件卡片
FileCard
文件卡片
用卡片的形式展示文件。
Ant Design X通用属性参考：通用属性
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| name | 文件名称 | string | - | - |
| byte | 文件大小（字节） | number | - | - |
| size | 卡片大小 | 'small' | 'default' | 'default' | - |
| description | 文件描述 | React.ReactNode | - | - |
| loading | 是否处于加载状态 | boolean | false | - |
| type | 文件类型 | 'file' | 'image' | 'audio' | 'video' | string | - | - |
| src | 图片或文件地址 | string | - | - |
| mask | 遮罩内容 | React.ReactNode | - | - |
| icon | 自定义图标 | React.ReactNode | PresetIcons | - | - |
| imageProps | 图片属性，同 antd Image 属性 | ImageProps | - | - |
| videoProps | 视频属性配置 | Partial<React.JSX.IntrinsicElements['video']> | - | - |
| audioProps | 音频属性配置 | Partial<React.JSX.IntrinsicElements['audio']> | - | - |
| spinProps | 加载中属性 | SpinProps & { showText?: boolean; icon?: React.ReactNode } | - | - |
| onClick | 点击事件回调 | () => void | - | - |
预设图标类型，支持以下值：
type PresetIcons =| 'default' // 默认文件图标| 'excel' // Excel 文件图标| 'image' // 图片文件图标| 'markdown' // Markdown 文件图标| 'pdf' // PDF 文件图标| 'ppt' // PowerPoint 文件图标| 'word' // Word 文件图标| 'zip' // 压缩文件图标| 'video' // 视频文件图标| 'audio' // 音频文件图标| 'java' // Java 文件图标| 'javascript' // JavaScript 文件图标| 'python'; // Python 文件图标
文件列表组件，用于展示多个文件卡片。
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| items | 文件列表数据 | FileCardProps[] | - | - |
| size | 卡片大小 | 'small' | 'default' | 'default' | - |
| removable | 是否可删除 | boolean | ((item: FileCardProps) => boolean) | false | - |
| onRemove | 删除事件回调 | (item: FileCardProps) => void | - | - |
| extension | 扩展内容 | React.ReactNode | - | - |
| overflow | 超出展示方式 | 'scrollX' | 'scrollY' | 'wrap' | 'wrap' | - |
基础用法。
不同大小的卡片。
图片\文件卡片。
使用浏览器原生标签。
自定义遮罩。
可使用内置图标或自定义。
使用列表展示多个文件卡片。
控制附件超出区域长度时的展示方式。
