logoAnt Design X

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

Welcome
欢迎

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

相关资源

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

何时使用

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

代码演示

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

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

icon

Hello, I'm Ant Design X

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

主题变量(Design Token)