logoAnt Design X

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

Prompts
提示集

用于显示一组与当前上下文相关的预定义的问题或建议。
使用import { Prompts } from "@ant-design/x";
源码components/prompts
文档
编辑此页...
更新日志

何时使用

Prompts 组件用于显示一组与当前上下文相关的预定义的问题或建议。

代码演示

API

通用属性参考:通用属性

PromptsProps

属性说明类型默认值版本
classNames自定义样式类名,用于各个提示项的不同部分Record<SemanticType, string>--
items包含多个提示项的列表PromptProps[]--
prefixCls样式类名的前缀string--
rootClassName根节点的样式类名string--
styles自定义样式,用于各个提示项的不同部分Record<SemanticType, React.CSSProperties>--
title显示在提示列表顶部的标题React.ReactNode--
vertical设置为 true 时, 提示列表将垂直排列booleanfalse-
wrap设置为 true 时, 提示列表将自动换行booleanfalse-
onItemClick提示项被点击时的回调函数(info: { data: PromptProps }) => void--
fadeIn渐入效果boolean--
fadeInLeft从左到右渐入效果boolean--

SemanticType

typescript
type SemanticType = 'list' | 'item' | 'content' | 'title' | 'subList' | 'subItem';

PromptProps

属性说明类型默认值版本
children嵌套的子提示项PromptProps[]--
description提示描述提供额外的信息React.ReactNode--
disabled设置为 true 时禁用点击事件booleanfalse-
icon提示图标显示在提示项的左侧React.ReactNode--
key唯一标识用于区分每个提示项string--
label提示标签显示提示的主要内容React.ReactNode--

Semantic DOM

主题变量(Design Token)

全局 Token如何定制?
✨ 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!

基本

基础用法。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
☕️ 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?

不可用状态

要将 prompt 标记为禁用,请向 prompt 添加 disabled 属性。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
🤔 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?

纵向展示

使用 vertical 属性,控制 Prompts 展示方向。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
✨ 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?

可换行

使用 wrap 属性,控制 Prompts 超出区域长度时是否可以换行。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
✨ 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!

响应式宽度

配合 wrap 与 styles 固定宽度展示。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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

嵌套组合

嵌套组合。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
✨ 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!

渐入效果

渐进效果。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
✨ 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?

  • root
    根节点
  • title
    标题容器
  • list
    列表容器
  • item
    列表项
  • itemContent
    列表项内容
✨ 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
    子列表容器
  • subItem
    子列表项