logoAnt Design X

设计研发组件X MarkdownX SDK演示
  • 介绍
  • 总览
  • 通用
    • Bubble对话气泡
    • Conversations管理对话
    • Notification系统通知
  • 唤醒
    • Welcome欢迎
    • Prompts提示集
  • 表达
    • Attachments输入附件
    • Sender输入框
    • Suggestion快捷指令
  • 确认
    • Sources来源引用
    • Think思考过程
    • ThoughtChain思维链
  • 反馈
    • Actions操作列表
    • FileCard文件卡片
  • 其他
    • XProvider全局化配置

Welcome
欢迎

清晰传达给用户可实现的意图范围和预期功能。
使用import { Welcome } from "@ant-design/x";
源码components/welcome
文档
编辑此页...
更新日志

何时使用

使用合适的欢迎推荐组件,可以有效降低用户学习成本,让用户快速了解并顺利开始。

代码演示

API

通用属性参考:通用属性

WelcomeProps

属性说明类型默认值版本
classNames自定义样式类名,用于各个提示项的不同部分。Record<'icon' | 'title' | 'description' | 'extra', string>--
description显示在提示列表中的描述。React.ReactNode--
extra显示在提示列表末尾的额外操作。React.ReactNode--
icon显示在提示列表前侧的图标。React.ReactNode--
rootClassName根节点的样式类名。string--
styles自定义样式,用于各个提示项的不同部分。Record<'icon' | 'title' | 'description' | 'extra', React.CSSProperties>--
title显示在提示列表顶部的标题。React.ReactNode--
variant变体类型。'filled' | 'borderless''filled'-

Semantic DOM

主题变量(Design Token)

全局 Token如何定制?
icon

Hello, I'm Ant Design X

Base on Ant Design, AGI product interface solution, create a better intelligent vision~
基本

基础用法。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
icon

Hello, I'm Ant Design X

Base on Ant Design, AGI product interface solution, create a better intelligent vision~
变体

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
icon

Hello, I'm Ant Design X

Base on Ant Design, AGI product interface solution, create a better intelligent vision~
icon

Hello, I'm Ant Design X

Base on Ant Design, AGI product interface solution, create a better intelligent vision~
背景定制

自定义部分样式。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
icon

Hello, I'm Ant Design X

Base on Ant Design, AGI product interface solution, create a better intelligent vision~
  • root
    根节点
  • icon
    图标容器
  • title
    标题容器
  • description
    描述容器
  • extra
    额外内容