FileCard
FileCard
Display files in the form of cards.
- Introduction
- Overview
- Common
- Confirmation
- Wake
- Express
- Feedback
- Others
Ant Design XUsed to display files during conversations or input.
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| classNames | DOM class | Record<SemanticDOM, string> | - | - |
| styles | DOM style | Record<SemanticDOM, CSSProperties> | - | - |
| name | File name | string | - | - |
| byte | File size | number | string | - | - |
| description | File description | ReactNode | - | - |
| type | File type | 'file' | 'image' | 'audio' | 'video' | - | - |
| src | link of image or file | string | - | - |
| mask | Custom mask | ReactNode | - | - |
| icon | Custom icon | React.ReactNode | PresetIcons | - | - |
| onClick | Callback when click | () => void | - | - |
| size | Show card size | 'small' | 'default' | default | - |
type PresetIcons =| 'default'| 'excel'| 'image'| 'markdown'| 'pdf'| 'ppt'| 'word'| 'zip'| 'video'| 'audio'| 'java'| 'javascript'| 'python';
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| items | File lists | FileCardProps[] | - | - |
| size | Card size | 'small' | 'default' | default | - |
| removable | Can be removed | boolean | ((item: FileCardProps) => boolean) | false | - |
| onRemove | Callback when remove | (item: FileCardProps, list?: FileCardProps[]) => void | - | - |
| extension | Show extension | React.ReactNode | - | - |
| overflow | Style when overflow | 'scrollX' | 'scrollY' | 'wrap' | wrap | - |
Basic usage.
Different sizes of cards.
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.
