Welcome
Welcome
Clearly convey the scope of intent and expected functionality to the user.
Importimport{ Welcome }from"@ant-design/x"; |
Sourcecomponents/welcome |
When To Use
Use the appropriate welcome recommendation component to effectively reduce the user's learning cost and allow the user to quickly understand and start smoothly.
Examples
Hello, I'm Ant Design X
Base on Ant Design, AGI product interface solution, create a better intelligent vision~Basic usage.
Hello, I'm Ant Design X
Set the style variant through the variant property.
Hello, I'm Ant Design X
Base on Ant Design, AGI product interface solution, create a better intelligent vision~Hello, I'm Ant Design X
Base on Ant Design, AGI product interface solution, create a better intelligent vision~Customize part of the style.
API
WelcomeProps
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| classNames | Custom style class names for different parts of each prompt item. | Record<'icon' | 'title' | 'description' | 'extra', string> | - | - |
| description | The description displayed in the prompt list. | React.ReactNode | - | - |
| extra | The extra operation displayed at the end of the prompt list. | React.ReactNode | - | - |
| icon | The icon displayed on the front side of the prompt list. | React.ReactNode | - | - |
| rootClassName | The style class name of the root node. | string | - | - |
| styles | Custom styles for different parts of each prompt item. | Record<'icon' | 'title' | 'description' | 'extra', React.CSSProperties> | - | - |
| title | The title displayed at the top of the prompt list. | React.ReactNode | - | - |
| variant | Variant type. | 'filled' | 'borderless' | 'filled' | - |
Semantic DOM
Hello, I'm Ant Design X
icon
Icon containertitle
Title containerdescription
Description containerextra
Extra content