Attachments
Attachments
Display the collection of attachment information.
Importimport { Attachments } from "@ant-design/x"; |
Sourcecomponents/attachments |
Docs |
Ant Design XImportimport { Attachments } from "@ant-design/x"; |
Sourcecomponents/attachments |
Docs |
The Attachments component is used in scenarios where a set of attachment information needs to be displayed.
For more properties, see Upload.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| classNames | Custom class names, see below | Record<string, string> | - | - |
| disabled | Whether to disable | boolean | false | - |
| getDropContainer | Config the area where files can be dropped | () => HTMLElement | - | - |
| items | Attachment list, same as Upload fileList | Attachment[] | - | - |
| overflow | Behavior when the file list overflows | 'wrap' | 'scrollX' | 'scrollY' | - | - |
| placeholder | Placeholder information when there is no file | PlaceholderType | ((type: 'inline' | 'drop') => PlaceholderType) | - | - |
| rootClassName | Root node className | React.CSSProperties | - | - |
| styles | Custom style object, see below | Record<string, React.CSSProperties> | - | - |
| imageProps | Image config, same as Image | ImageProps | - | - |
interface PlaceholderType {icon?: React.ReactNode;title?: React.ReactNode;description?: React.ReactNode;}
interface Attachment extends UploadFile {type?: 'image' | 'file' | 'other';previewText?: React.ReactNode;}
| Property | Description | Type | Version |
|---|---|---|---|
| nativeElement | Get the native node | HTMLElement | - |
| upload | Manually upload a file | (file: File) => void | - |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgPlaceholderHover | string | rgba(255,255,255,0.85) |
Basic usage. You can use getDropContainer to support drag and drop upload.
Modify placeholder information.
Controls the layout of attachments when they exceed the area.
Work with Sender.Header to insert file into the conversation.
