这叫啥 UI？
← 返回组件目录

COMPONENT 90 · Content & Media

附件卡片

Attachment

也叫File Attachment文件附件附件预览

展示一个文件的身份，并提供预览与移除操作。

Represent a file with identifying details and attachment actions.

ANATOMY & USAGE

结构与使用建议

组成部分

  • 文件信息
  • 预览操作
  • 移除操作

适合使用

  • 消息、评论或表单中表达已附加的文件。

不建议使用

  • 选择本机文件应使用 File Upload，附件卡片本身不代表已上传成功。

键盘与无障碍

  • 提供可读文件名、类型和状态，移除按钮带上目标文件名。
  • 展开用 aria-expanded 与 aria-controls，按钮不嵌套在另一个按钮内。

参考 shadcn/ui · Attachment ↗核对于 2026-09-05

DESCRIBE IT TO AI

这样告诉编程助手

实现附件卡片（Attachment）：展示一个文件的身份，并提供预览与移除操作。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="modern-demo">
      <article class="modern-attachment">
        <span class="modern-filetype" aria-hidden="true">TXT</span>
        <div><strong>组件笔记.txt</strong><small>纯文本 · 本地示例</small></div>
        <button id="remove" aria-label="移除组件笔记.txt">×</button>
      </article>
      <button id="toggle" aria-expanded="false" aria-controls="preview">
        预览组件笔记
      </button>
      <div id="preview" hidden>附件展示文件名称与状态；文件上传负责选择和提交文件。</div>
      <button id="restore" hidden>恢复附件</button>
      <p id="status" role="status"></p>
    </section>
    <script src="script.js" defer></script>
  </body>
</html>