Prompts
Prompts
Display a predefined set of questions or suggestion.
Importimport { Prompts } from "@ant-design/x"; |
Sourcecomponents/prompts |
Ant Design XImportimport { Prompts } from "@ant-design/x"; |
Sourcecomponents/prompts |
The Prompts component is used to display a predefined set of questions or suggestion that are relevant to the current context.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| classNames | Custom style class names for different parts of each prompt item. | Record<SemanticType, string> | - | - |
| items | List containing multiple prompt items. | PromptProps[] | - | - |
| prefixCls | Prefix for style class names. | string | - | - |
| rootClassName | Style class name for the root node. | string | - | - |
| styles | Custom styles for different parts of each prompt item. | Record<SemanticType, React.CSSProperties> | - | - |
| title | Title displayed at the top of the prompt list. | React.ReactNode | - | - |
| vertical | When set to true, the Prompts will be arranged vertically. | boolean | false | - |
| wrap | When set to true, the Prompts will automatically wrap. | boolean | false | - |
| onItemClick | Callback function when a prompt item is clicked. | (info: { data: PromptProps }) => void | - | - |
type SemanticType = 'list' | 'item' | 'content' | 'title' | 'subList' | 'subItem';
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| children | Nested child prompt items. | PromptProps[] | - | - |
| description | Prompt description providing additional information. | React.ReactNode | - | - |
| disabled | When set to true, click events are disabled. | boolean | false | - |
| icon | Prompt icon displayed on the left side of the prompt item. | React.ReactNode | - | - |
| key | Unique identifier used to distinguish each prompt item. | string | - | - |
| label | Prompt label displaying the main content of the prompt. | React.ReactNode | - | - |
Basic usage.
To mark a prompt as disabled, add the disabled property to the prompt item.
Use the vertical property to control the Prompts' display direction.
Use the wrap attribute to control the layout of the Prompts.
Use the wrap and styles properties to display with a fixed width.
Nest usage.
Got any sparks for a new project?
Help me understand the background of this topic.
How can I work faster and better?
Why do not ants get sick? Because they have tiny ant-bodies!
How to solve common issues? Share some tips!
What are some tricks for getting tasks done?
How to rest effectively after long hours of work?
How to rest effectively after long hours of work?
What are the secrets to maintaining a positive mindset?
How to stay calm under immense pressure?
Got any sparks for a new project?
Help me understand the background of this topic.
How to solve common issues? Share some tips!
How can I work faster and better?
What are some tricks for getting tasks done?
How to rest effectively after long hours of work?
What are the secrets to maintaining a positive mindset?
How to stay calm under immense pressure?
Got any sparks for a new project?
Help me understand the background of this topic.
How can I work faster and better?
Why do not ants get sick? Because they have tiny ant-bodies!
How to solve common issues? Share some tips!
What are you interested in?
What's new in X?
What's AGI?
Where is the doc?
How to design a good product?
Know the well
Set the AI role
Express the feeling
How to start a new project?
Install Ant Design X
Play on the web without installing
Got any sparks for a new project?
Help me understand the background of this topic.
How can I work faster and better?
What sparks your creativity?
How do you get inspired?
What is the background of this topic?
Why is this important?
