FileCard
FileCard
Display files in the form of cards.
- Introduction
- Overview
- Common
- Wake
- Express
- Confirmation
- Feedback
- Others
Ant Design XCommon props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| name | File name | string | - | - |
| byte | File size (bytes) | number | - | - |
| size | Card size | 'small' | 'default' | 'default' | - |
| description | File description | React.ReactNode | - | - |
| loading | Loading state | boolean | false | - |
| type | File type | 'file' | 'image' | 'audio' | 'video' | string | - | - |
| src | Image or file URL | string | - | - |
| mask | Mask content | React.ReactNode | - | - |
| icon | Custom icon | React.ReactNode | PresetIcons | - | - |
| imageProps | Image props configuration | Image | - | - |
| videoProps | Video props configuration | Partial<React.JSX.IntrinsicElements['video']> | - | - |
| audioProps | Audio props configuration | Partial<React.JSX.IntrinsicElements['audio']> | - | - |
| spinProps | Loading animation props configuration | SpinProps & { showText?: boolean; icon?: React.ReactNode } | - | - |
| onClick | Click event callback | () => void | - | - |
Preset icon types, supports the following values:
type PresetIcons =| 'default' // Default file icon| 'excel' // Excel file icon| 'image' // Image file icon| 'markdown' // Markdown file icon| 'pdf' // PDF file icon| 'ppt' // PowerPoint file icon| 'word' // Word file icon| 'zip' // Archive file icon| 'video' // Video file icon| 'audio' // Audio file icon| 'java' // Java file icon| 'javascript' // JavaScript file icon| 'python'; // Python file icon
File list component for displaying multiple file cards.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| items | File list data | FileCardProps[] | - | - |
| size | Card size | 'small' | 'default' | 'default' | - |
| removable | Whether removable | boolean | ((item: FileCardProps) => boolean) | false | - |
| onRemove | Remove event callback | (item: FileCardProps) => void | - | - |
| extension | Extension content | React.ReactNode | - | - |
| overflow | Overflow display style | 'scrollX' | 'scrollY' | 'wrap' | 'wrap' | - |
Basic usage.
Different sizes of cards.
Image\File card.
Use browser native tags.
Custom mask.
you can use built-in icons or custom.
Use list to show multiple file cards.
Controls the layout of attachments when they exceed the area.
