Prompts 提示集

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

何时使用

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!

<script setup lang="tsx">
import { BulbOutlined, InfoCircleOutlined, RocketOutlined, SmileOutlined, WarningOutlined } from '@ant-design/icons-vue';
import { App } from 'ant-design-vue';
import { Prompts, type PromptsProps } from 'ant-design-x-vue';


defineOptions({ name: 'AXPromptsBasic' });

const items: PromptsProps['items'] = [
  {
    key: '1',
    icon: <BulbOutlined style={{ color: '#FFD700' }} />,
    label: 'Ignite Your Creativity',
    description: 'Got any sparks for a new project?',
  },
  {
    key: '2',
    icon: <InfoCircleOutlined style={{ color: '#1890FF' }} />,
    label: 'Uncover Background Info',
    description: 'Help me understand the background of this topic.',
  },
  {
    key: '3',
    icon: <RocketOutlined style={{ color: '#722ED1' }} />,
    label: 'Efficiency Boost Battle',
    description: 'How can I work faster and better?',
  },
  {
    key: '4',
    icon: <SmileOutlined style={{ color: '#52C41A' }} />,
    label: 'Tell me a Joke',
    description: 'Why do not ants get sick? Because they have tiny ant-bodies!',
  },
  {
    key: '5',
    icon: <WarningOutlined style={{ color: '#FF4D4F' }} />,
    label: 'Common Issue Solutions',
    description: 'How to solve common issues? Share some tips!',
  },
];

const Demo = () => {
  const { message } = App.useApp();

  return (
    <Prompts
      title="✨ Inspirational Sparks and Marvelous Tips"
      items={items}
      onItemClick={(info) => {
        message.success(`You clicked a prompt: ${info.data.label}`);
      }}
    />
  );
};

defineRender(() => {
  return (
    <App>
      <Demo />
    </App>
  )
});
</script>

隐藏源代码

不可用状态

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

☕️ 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?

<script setup lang="tsx">
import { CheckCircleOutlined, CoffeeOutlined } from '@ant-design/icons-vue';
import { Prompts, type PromptsProps } from 'ant-design-x-vue';

defineOptions({ name: 'AXPromptsDisabled' });

const items: PromptsProps['items'] = [
  {
    key: '5',
    icon: <CheckCircleOutlined style={{ color: '#52C41A' }} />,
    label: 'Task Completion Secrets',
    description: 'What are some tricks for getting tasks done?',
    disabled: true,
  },
  {
    key: '6',
    icon: <CoffeeOutlined style={{ color: '#964B00' }} />,
    label: 'Time for a Coffee Break',
    description: 'How to rest effectively after long hours of work?',
  },
];

defineRender(() => {
  return (
    <Prompts title="☕️ It's time to relax!" items={items} />
  )
});
</script>

隐藏源代码

纵向展示

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

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

<script setup lang="tsx">
import { CoffeeOutlined, FireOutlined, SmileOutlined } from '@ant-design/icons-vue';
import { Prompts, type PromptsProps } from 'ant-design-x-vue';

defineOptions({ name: 'AXPromptsFlexVertical' });

const items: PromptsProps['items'] = [
  {
    key: '6',
    icon: <CoffeeOutlined style={{ color: '#964B00' }} />,
    description: 'How to rest effectively after long hours of work?',
    disabled: false,
  },
  {
    key: '7',
    icon: <SmileOutlined style={{ color: '#FAAD14' }} />,
    description: 'What are the secrets to maintaining a positive mindset?',
    disabled: false,
  },
  {
    key: '8',
    icon: <FireOutlined style={{ color: '#FF4D4F' }} />,
    description: 'How to stay calm under immense pressure?',
    disabled: false,
  },
];

defineRender(() => {
  return (
    <Prompts title="🤔 You might also want to ask:" items={items} vertical />
  )
})
</script>

隐藏源代码

可换行

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

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

<script setup lang="tsx">
import { BulbOutlined, CheckCircleOutlined, CoffeeOutlined, FireOutlined, InfoCircleOutlined, RocketOutlined, SmileOutlined, WarningOutlined } from '@ant-design/icons-vue';
import { Prompts, type PromptsProps } from 'ant-design-x-vue';


defineOptions({ name: 'AXPromptsFlexWrap' });

const items: PromptsProps['items'] = [
  {
    key: '1',
    icon: <BulbOutlined style={{ color: '#FFD700' }} />,
    description: 'Got any sparks for a new project?',
  },
  {
    key: '2',
    icon: <InfoCircleOutlined style={{ color: '#1890FF' }} />,
    description: 'Help me understand the background of this topic.',
  },
  {
    key: '3',
    icon: <WarningOutlined style={{ color: '#FF4D4F' }} />,
    description: 'How to solve common issues? Share some tips!',
  },
  {
    key: '4',
    icon: <RocketOutlined style={{ color: '#722ED1' }} />,
    description: 'How can I work faster and better?',
  },
  {
    key: '5',
    icon: <CheckCircleOutlined style={{ color: '#52C41A' }} />,
    description: 'What are some tricks for getting tasks done?',
  },
  {
    key: '6',
    icon: <CoffeeOutlined style={{ color: '#964B00' }} />,
    description: 'How to rest effectively after long hours of work?',
  },
  {
    key: '7',
    icon: <SmileOutlined style={{ color: '#FAAD14' }} />,
    description: 'What are the secrets to maintaining a positive mindset?',
  },
  {
    key: '8',
    icon: <FireOutlined style={{ color: '#FF4D4F' }} />,
    description: 'How to stay calm under immense pressure?',
  },
];

defineRender(() => {
  return (
    <Prompts title="✨ Inspirational Sparks and Marvelous Tips" items={items} wrap />
  )
});
</script>

隐藏源代码

响应式宽度

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

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

<script setup lang="tsx">
import { BulbOutlined, InfoCircleOutlined, RocketOutlined, SmileOutlined, WarningOutlined } from '@ant-design/icons-vue';
import { Prompts, type PromptsProps } from 'ant-design-x-vue';

defineOptions({ name: 'AXPromptsFlexWrapFixed' });

const items: PromptsProps['items'] = [
  {
    key: '1',
    icon: <BulbOutlined style={{ color: '#FFD700' }} />,
    label: 'Ignite Your Creativity',
    description: 'Got any sparks for a new project?',
  },
  {
    key: '2',
    icon: <InfoCircleOutlined style={{ color: '#1890FF' }} />,
    label: 'Uncover Background Info',
    description: 'Help me understand the background of this topic.',
  },
  {
    key: '3',
    icon: <RocketOutlined style={{ color: '#722ED1' }} />,
    label: 'Efficiency Boost Battle',
    description: 'How can I work faster and better?',
  },
  {
    key: '4',
    icon: <SmileOutlined style={{ color: '#52C41A' }} />,
    label: 'Tell me a Joke',
    description: 'Why do not ants get sick? Because they have tiny ant-bodies!',
  },
  {
    key: '5',
    icon: <WarningOutlined style={{ color: '#FF4D4F' }} />,
    label: 'Common Issue Solutions',
    description: 'How to solve common issues? Share some tips!',
  },
];

defineRender(() => {
  return (
    <Prompts
      title="✨ Inspirational Sparks and Marvelous Tips"
      items={items}
      wrap
      styles={{
        item: {
          flex: 'none',
          width: 'calc(50% - 6px)',
        },
      }}
    />
  )
})
</script>

隐藏源代码

嵌套组合

嵌套组合。

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

<script setup lang="tsx">
import { CommentOutlined, FireOutlined, HeartOutlined, ReadOutlined, RocketOutlined, SmileOutlined } from '@ant-design/icons-vue';
import { App, Card, ConfigProvider, Space, theme } from 'ant-design-vue';
import { Prompts, type PromptsProps } from 'ant-design-x-vue';
import { type VNode } from 'vue';

defineOptions({ name: 'AXPromptsNest' });

const renderTitle = (icon: VNode, title: string) => (
  <Space align="start">
    {icon}
    <span>{title}</span>
  </Space>
);

const items: PromptsProps['items'] = [
  {
    key: '1',
    label: renderTitle(<FireOutlined style={{ color: '#FF4D4F' }} />, 'Hot Topics'),
    description: 'What are you interested in?',
    children: [
      {
        key: '1-1',
        description: `What's new in X?`,
      },
      {
        key: '1-2',
        description: `What's AGI?`,
      },
      {
        key: '1-3',
        description: `Where is the doc?`,
      },
    ],
  },
  {
    key: '2',
    label: renderTitle(<ReadOutlined style={{ color: '#1890FF' }} />, 'Design Guide'),
    description: 'How to design a good product?',
    children: [
      {
        key: '2-1',
        icon: <HeartOutlined />,
        description: `Know the well`,
      },
      {
        key: '2-2',
        icon: <SmileOutlined />,
        description: `Set the AI role`,
      },
      {
        key: '2-3',
        icon: <CommentOutlined />,
        description: `Express the feeling`,
      },
    ],
  },
  {
    key: '3',
    label: renderTitle(<RocketOutlined style={{ color: '#722ED1' }} />, 'Start Creating'),
    description: 'How to start a new project?',
    children: [
      {
        key: '3-1',
        label: 'Fast Start',
        description: `Install Ant Design X`,
      },
      {
        key: '3-2',
        label: 'Online Playground',
        description: `Play on the web without installing`,
      },
    ],
  },
];

const Demo = () => {
  const { message } = App.useApp();

  return (
    <ConfigProvider
      theme={{
        algorithm: theme.defaultAlgorithm,
      }}
    >
      <Card style={{ borderRadius: 0, border: 0 }}>
        <Prompts
          title="Do you want?"
          items={items}
          wrap
          styles={{
            item: {
              flex: 'none',
              width: 'calc(30% - 6px)',
              backgroundImage: `linear-gradient(137deg, #e5f4ff 0%, #efe7ff 100%)`,
              border: 0,
            },
            subItem: {
              background: 'rgba(255,255,255,0.45)',
              border: '1px solid #FFF',
            },
          }}
          onItemClick={(info) => {
            message.success(`You clicked a prompt: ${info.data.key}`);
          }}
        />
      </Card>
    </ConfigProvider>
  );
};

defineRender(() => {
  return (
    <App>
      <Demo />
    </App>
  )
});
</script>

隐藏源代码

API

PromptsProps

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

SemanticType

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

PromptProps

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

Semantic DOM

主题变量（Design Token）