logoAnt Design X

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

Prompts
提示集

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

相关资源

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

何时使用

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!

基本

基础用法。

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

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--

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

✨ 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
    标题容器
  • 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
    子列表项

主题变量(Design Token)