logoAnt Design X

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

Bubble对话气泡

用于聊天的气泡组件。
使用import{ Bubble }from"@ant-design/x";
源码components/bubble
文档
编辑此页更新日志

相关资源

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
ahooks-React Hooks 库
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

何时使用

常用于聊天的时候。

代码演示

hello world !
基本

基础用法。

codepen icon
External Link Icon
expand codeexpand code
Good morning, how are you?
What a beautiful day!
Hi, good morning, I'm fine!
Thank you!
支持位置和头像

通过 avatar 设置自定义头像，通过 placement 设置位置，提供了 start、end 两个选项。

codepen icon
External Link Icon
expand codeexpand code
Ant Design X
Hello, welcome to use Ant Design X! Just ask if you have any questions.
头和尾

通过 header 和 footer 属性设置气泡的头部和底部。

codepen icon
External Link Icon
expand codeexpand code
Loading state:
加载中

通过 loading 属性控制加载状态。

codepen icon
External Link Icon
expand codeexpand code
A
打字效果

通过设置 typing 属性，开启打字效果。更新 content 如果是之前的子集，则会继续输出，否则会重新输出。

codepen icon
External Link Icon
expand codeexpand code
自定义渲染

配合 markdown-it 实现自定义渲染内容。

codepen icon
External Link Icon
expand codeexpand code
variant: filled
variant: outlined
variant: shadow
variant: borderless to customize

How to rest effectively after long hours of work?

What are the secrets to maintaining a positive mindset?

How to stay calm under immense pressure?

变体

通过 variant 属性设置气泡的样式变体。

codepen icon
External Link Icon
expand codeexpand code
shape: default
This is a long text message to show the multiline view of the bubble component. This is a long text message to show the multiline view of the bubble component. This is a long text message to show the multiline view of the bubble component.
shape: round
This is a long text message to show the multiline view of the bubble component. This is a long text message to show the multiline view of the bubble component. This is a long text message to show the multiline view of the bubble component.
shape: corner
This is a long text message to show the multiline view of the bubble component. This is a long text message to show the multiline view of the bubble component. This is a long text message to show the multiline view of the bubble component.
形状

通过 shape 属性设置气泡的形状。

codepen icon
External Link Icon
expand codeexpand code
Mock user content.
Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content.
Mock user content.
气泡列表

预设样式的气泡列表，支持自动滚动。使用 roles 设置气泡默认属性。

codepen icon
External Link Icon
expand codeexpand code
Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content.
Mock user content.
Custom loading...
语义化自定义

示例通过语义化以及加载定制，来调整气泡效果。

codepen icon
External Link Icon
expand codeexpand code
Normal message
ReactNode message

How to rest effectively after long hours of work?

What are the secrets to maintaining a positive mindset?

How to stay calm under immense pressure?

excel-file
.xlsx
Checking the data
word-file
.docx
23%
自定义列表内容

自定义气泡列表内容，这对于个性化定制场景非常有用。

codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考：通用属性

Bubble

属性说明类型默认值版本
avatar展示头像React.ReactNode-
classNames语义化结构 classRecord<SemanticDOM, string>-
content聊天内容string-
footer底部内容React.ReactNode-
header头部内容React.ReactNode-
loading聊天内容加载状态boolean-
placement信息位置start | endstart
shape气泡形状round | corner-
styles语义化结构 styleRecord<SemanticDOM, CSSProperties>-
typing设置聊天内容打字动画boolean | { step?: number, interval?: number }false
variant气泡样式变体filled | borderless | outlined | shadowfilled
loadingRender自定义渲染加载态内容() => ReactNode-
messageRender自定义渲染内容(content?: string) => ReactNode-
onTypingComplete打字效果完成时的回调，如果没有设置 typing 将在渲染时立刻触发() => void-

Bubble.List

属性说明类型默认值版本
autoScroll当内容更新时，自动滚动到最新位置。如果用户滚动，则会暂停自动滚动。booleantrue
items气泡数据列表(BubbleProps & { key?: string | number, role?: string })[]-
roles设置气泡默认属性，items 中的 role 会进行自动对应Record<string, BubbleProps> | (bubble) => BubbleProps-

Semantic DOM

Ant Design X
Feel free to use Ant Design !
  • avatar
    头像的外层容器
  • header
    头部的容器
  • content
    聊天内容的容器
  • footer
    底部的容器

主题变量（Design Token）