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

COMPONENT 88 · Content & Media

聊天消息

Chat Message

也叫MessageMessage BubbleBubble聊天气泡

展示发送者与消息正文，并提供消息级操作。

Present a sender and message content with message-level actions.

ANATOMY & USAGE

结构与使用建议

组成部分

  • 消息正文
  • 输入与发送
  • 消息操作

适合使用

  • 即时沟通、对话式助手或支持中心的消息界面。

不建议使用

  • 无需表达发送者或对话关系时使用普通内容块。

键盘与无障碍

  • 发送者、状态都用文字表达，操作按钮有名称。
  • 状态使用 role=status；仅示例本地交互，不伪装服务端或 AI 回复。

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

DESCRIBE IT TO AI

这样告诉编程助手

实现聊天消息（Chat Message）：展示发送者与消息正文，并提供消息级操作。

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">
      <div class="modern-kicker">本地消息演示</div>
      <div class="modern-message">
        <small>你</small>
        <p id="message">侧边滑出的面板叫什么？</p>
      </div>
      <form class="modern-message-form">
        <input aria-label="输入消息" maxlength="160" required /><button type="submit">
          发送
        </button>
      </form>
      <button id="copy">复制消息</button>
      <p id="status" role="status">消息仅在当前演示中展示</p>
    </section>
    <script src="script.js" defer></script>
  </body>
</html>