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

shape: corner

形状

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

      加载中

Use Role As:

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.

气泡列表

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

      加载中

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...

语义化自定义

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

      加载中

API#

nx-bubble#

Property	Description	Type	Default
`[nxContent]`	气泡内容	`string`	`''`
`[nxMessageRender]`	自定义消息渲染模板	`TemplateRef<{ content: string }> \| null`	`null`
`[nxAvatar]`	头像组件或属性	`NxBubbleAvatar`	-
`[nxHeader]`	气泡头部内容	`string \| TemplateRef<void> \| null`	`null`
`[nxFooter]`	气泡底部内容	`string \| TemplateRef<void> \| null`	`null`
`[nxLoading]`	加载状态	`boolean`	-
`[nxLoadingRender]`	自定义加载状态渲染模板	`TemplateRef<void> \| null`	`null`
`[nxPlacement]`	气泡位置	`NxBubblePlacement`	`'start'`
`[nxShape]`	气泡形状	`NxBubbleShape`	`'default'`
`[nxTyping]`	打字机效果配置	`boolean \| NxTypingOption`	`DEFAULT_TYPING_OPTION`
`[nxVariant]`	气泡变体	`NxBubbleVariant`	`'filled'`
`(nxContentUpdate)`	内容更新时触发的回调	`EventEmitter<void>`	-
`(nxTypingComplete)`	打字机效果完成时触发的回调	`EventEmitter<void>`	-

nx-bubble-list#

Property	Description	Type	Default
`[nxAutoScroll]`	是否在内容更新时自动滚动到最新位置	`boolean`	`true`
`[nxItems]`	气泡列表项	`NxBubbleListItem[]`	必填
`[nxRoles]`	设置气泡的默认属性，`role` 会自动匹配	`NxBubbleRoles`	-

interface NxBubbleListItem {
  key?: string;
  role?: string;
  content?: string;
  loading?: boolean;
  placement?: NxBubblePlacement;
  shape?: NxBubbleShape;
  variant?: NxBubbleVariant;
  typing?: boolean | NxTypingOption;
  avatar?: NxBubbleAvatar;
  headerRender?: TemplateRef<{ content: string; info: { key?: string } }> | null;
  footerRender?: TemplateRef<{ content: string; info: { key?: string } }> | null;
  messageRender?: TemplateRef<{ content: string }> | null;
  loadingRender?: TemplateRef<void> | null;
}