Bubble
Bubble
A bubble component for chat.
Importimport{ Bubble }from"@ant-design/x"; |
Sourcecomponents/bubble |
Ant Design XOften used when chatting.
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| avatar | Avatar component | React.ReactNode | - | |
| classNames | Semantic DOM class | Record<SemanticDOM, string> | - | |
| content | Content of bubble | string | - | |
| footer | Footer content | React.ReactNode | - | |
| header | Header content | React.ReactNode | - | |
| loading | Loading state of Message | boolean | - | |
| placement | Direction of Message | start | end | start | |
| shape | Shape of bubble | round | corner | - | |
| styles | Semantic DOM style | Record<SemanticDOM, CSSProperties> | - | |
| typing | Show message with typing motion | boolean | { step?: number, interval?: number } | false | |
| variant | Style variant | filled | borderless | outlined | shadow | filled | |
| loadingRender | Customize loading content | () => ReactNode | - | |
| messageRender | Customize display content | (content?: string) => ReactNode | - | |
| onTypingComplete | Callback when typing effect is completed. If typing is not set, it will be triggered immediately when rendering. | () => void | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| autoScroll | When the content is updated, scroll to the latest position automatically. If the user scrolls, the automatic scrolling will be paused. | boolean | true | |
| items | Bubble items list | (BubbleProps & { key?: string | number, role?: string })[] | - | |
| roles | Set the default properties of the bubble. The role in items will be automatically matched. | Record<string, BubbleProps> | (bubble) => BubbleProps | - |
Basic usage.
Set custom avatar by avatar prop, set the placement of the message by placement prop, which has two preset values: start and end.
Use header and footer properties to set the header and footer of the bubble content.
Control the loading state by loading prop.
Enable typing output by setting the typing prop. If the updated content is a subset of the previous content, it will continue to output, otherwise it will output again.
Cooperate with markdown-it to achieve customized rendering content.
Set the style variant of the bubble through the variant property.
Set the shape of bubble through shape.
Preset Bubble list. Support auto scroll. Use roles to set default properties of Bubble.
Sample for adjusting the bubble effect through semantic and loading customization.
Customize the content of the bubble list, which is very useful for personalized customization scenarios.
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?
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?
