WelcomeMessage 欢迎语

    通过简短友好的欢迎语引入使用场景。

    代码演示

    欢迎语 - 品牌引导与输入框

    API

    WelcomeMessageProps

    属性说明类型默认值版本
    title标题内容React.ReactNode--
    description描述内容React.ReactNode--
    classNames自定义样式类名Record<'title' | 'description', string>--
    titleAnimateProps标题动画属性WelcomeMessageTitleAnimateProps--
    descriptionAnimateProps描述动画属性WelcomeMessageDescriptionAnimateProps--
    style自定义样式React.CSSProperties--
    rootClassName自定义根节点样式类名string--

    类型定义

    WelcomeMessageTitleAnimateProps

    Pick<TypingAnimationProps, 'duration' | 'typeSpeed' | 'deleteSpeed' | 'delay' | 'pauseDelay' | 'loop' | 'startOnView' | 'showCursor' | 'blinkCursor' | 'cursorStyle'>

    WelcomeMessageDescriptionAnimateProps

    Pick<TextAnimateProps, 'delay' | 'duration' | 'variants' | 'by' | 'startOnView' | 'once' | 'animation'>

    使用示例

    基础用法

    import { WelcomeMessage } from '@ant-design/agentic-ui';

export default () => {
  return (
    <WelcomeMessage
      title="欢迎使用 LUI Chat"
      description="开始你的智能对话之旅"
    />
  );
};

    自定义类名

    import { WelcomeMessage } from '@ant-design/agentic-ui';

export default () => {
  return (
    <WelcomeMessage
      title="带自定义类名的欢迎组件"
      description="通过 classNames 属性自定义各个部分的样式"
      classNames={{
        title: 'custom-title',
        description: 'custom-description',
      }}
      rootClassName="custom-welcome"
    />
  );
};

    仅标题

    import { WelcomeMessage } from '@ant-design/agentic-ui';

export default () => {
  return <WelcomeMessage title="简洁的欢迎标题" />;
};