logoAnt Design X

设计研发组件演示
  • 总览
  • 通用
    • Bubble对话气泡
    • Conversations管理对话
  • 唤醒
    • Welcome欢迎
    • Prompts提示集
  • 表达
    • Attachments输入附件
    • Sender输入框
    • Suggestion快捷指令
  • 确认
    • ThoughtChain思维链
  • 工具
    • useXAgent模型调度
    • useXChat数据管理
    • XStream流
    • XRequest请求
    • XProvider全局化配置

Attachments
输入附件

用于展示一组附件信息集合。
使用import { Attachments } from "@ant-design/x";
源码components/attachments
文档
编辑此页...

相关资源

Ant Design
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
loading

更新日志

何时使用

Attachments 组件用于需要展示一组附件信息集合的场景。

代码演示

基本

基础用法,可以通过 getDropContainer 支持拖拽上传。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Click or Drop files here
Support file type: image, video, audio, document, etc.
Custom Placeholder Node
占位信息

修改占位信息。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
preview
预览
Click or Drop files here
Support file type: image, video, audio, document, etc.
超出样式

控制附件超出区域长度时的展示方式。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Attachments
Upload files
Click or drag files to this area to upload
组合示例

配合 Sender.Header 使用,在对话中插入附件。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
excel-file
.xlsx
109 KB
word-file
.docx
217 KB
image-file
.png
326 KB
pdf-file
.pdf
434 KB
ppt-file
.pptx
543 KB
video
video-file
.mp4
651 KB
audio
audio-file
.mp3
760 KB
zip-file
.zip
868 KB
markdown-file
.md
Custom description here
preview
预览
文件卡片

单独的文件卡片,用于一些展示场景。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性。

AttachmentsProps

继承 antd Upload 属性。

属性说明类型默认值版本
classNames自定义样式类名,见下Record<string, string>--
disabled是否禁用booleanfalse-
getDropContainer设置拖拽时,可以释放文件的区域() => HTMLElement--
items附件列表,同 Upload fileListAttachment[]--
overflow文件列表超出时样式'wrap' | 'scrollX' | 'scrollY'--
placeholder没有文件时的占位信息PlaceholderType | ((type: 'inline' | 'drop') => PlaceholderType)--
rootClassName根节点的样式类名string--
rootStyle根节点的样式对象React.CSSProperties--
styles自定义样式对象,见下Record<string, React.CSSProperties>--
imageProps图片属性,同 antd Image 属性ImageProps--
tsx
interface PlaceholderType {
icon?: React.ReactNode;
title?: React.ReactNode;
description?: React.ReactNode;
}

AttachmentsRef

属性说明类型版本
nativeElement获取原生节点HTMLElement-
upload手工调用上传文件(file: File) => void-

Attachments.FileCard Props

属性说明类型默认值版本
prefixCls样式类名的前缀string--
className样式类名string--
style样式对象React.CSSProperties--
item附件,同 Upload UploadFileAttachment--
onRemove点击移除文件时的回调,返回值为 false 时不移除。支持返回一个 Promise 对象,Promise 对象 resolve(false) 或 reject 时不移除(item: Attachment) => boolean | Promise--
imageProps图片属性,同 antd Image 属性ImageProps--

Semantic DOM

Upload File
Drag or click to upload file.
  • placeholder
    占位符
preview
预览
preview
预览
preview
预览
  • list
    列表容器
  • item
    列表项

主题变量(Design Token)