Prompts
Import |
Sourcecomponents/prompts |
When To Use
The Prompts component is used to display a predefined set of questions or suggestion that are relevant to the current context.
Examples
✨ Inspirational Sparks and Marvelous Tips
Ignite Your Creativity
Got any sparks for a new project?
Uncover Background Info
Help me understand the background of this topic.
Efficiency Boost Battle
How can I work faster and better?
Tell me a Joke
Why do not ants get sick? Because they have tiny ant-bodies!
Common Issue Solutions
How to solve common issues? Share some tips!
Basic usage.
☕️ It's time to relax!
Task Completion Secrets
What are some tricks for getting tasks done?
Time for a Coffee Break
How to rest effectively after long hours of work?
To mark a prompt as disabled, add the disabled property to the prompt item.
🤔 You might also want to ask:
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?
Use the vertical property to control the Prompts' display direction.
✨ Inspirational Sparks and Marvelous Tips
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?
Use the wrap attribute to control the layout of the Prompts.
✨ Inspirational Sparks and Marvelous Tips
Ignite Your Creativity
Got any sparks for a new project?
Uncover Background Info
Help me understand the background of this topic.
Efficiency Boost Battle
How can I work faster and better?
Tell me a Joke
Why do not ants get sick? Because they have tiny ant-bodies!
Common Issue Solutions
How to solve common issues? Share some tips!
Use the wrap and styles properties to display with a fixed width.
Do you want?
Hot Topics
What are you interested in?
What's new in X?
What's AGI?
Where is the doc?
Design Guide
How to design a good product?
Know the well
Set the AI role
Express the feeling
Start Creating
How to start a new project?
Fast Start
Install Ant Design X
Online Playground
Play on the web without installing
Nest usage.
API
PromptsProps
| 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 | - | - |
SemanticType
type SemanticType = 'list' | 'item' | 'content' | 'title' | 'subList' | 'subItem';
PromptProps
| 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 | - | - |
Semantic DOM
✨ Inspirational Sparks and Marvelous Tips
Ignite Your Creativity
Got any sparks for a new project?
Uncover Background Info
Help me understand the background of this topic.
Efficiency Boost Battle
How can I work faster and better?
title
Title containerlist
List containeritem
List itemitemContent
List item content
✨ Nested Prompts
🔥 Ignite Your Creativity
What sparks your creativity?
How do you get inspired?
🎨 Uncover Background Info
What is the background of this topic?
Why is this important?
subList
Sub-list containersubItem
Sub-list item