basic.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <script setup lang="tsx">
  2. import { BulbOutlined, InfoCircleOutlined, RocketOutlined, SmileOutlined, WarningOutlined } from '@ant-design/icons-vue';
  3. import { App } from 'ant-design-vue';
  4. import { Prompts, type PromptsProps } from 'ant-design-x-vue';
  5. defineOptions({ name: 'AXPromptsBasic' });
  6. const items: PromptsProps['items'] = [
  7. {
  8. key: '1',
  9. icon: <BulbOutlined style={{ color: '#FFD700' }} />,
  10. label: 'Ignite Your Creativity',
  11. description: 'Got any sparks for a new project?',
  12. },
  13. {
  14. key: '2',
  15. icon: <InfoCircleOutlined style={{ color: '#1890FF' }} />,
  16. label: 'Uncover Background Info',
  17. description: 'Help me understand the background of this topic.',
  18. },
  19. {
  20. key: '3',
  21. icon: <RocketOutlined style={{ color: '#722ED1' }} />,
  22. label: 'Efficiency Boost Battle',
  23. description: 'How can I work faster and better?',
  24. },
  25. {
  26. key: '4',
  27. icon: <SmileOutlined style={{ color: '#52C41A' }} />,
  28. label: 'Tell me a Joke',
  29. description: 'Why do not ants get sick? Because they have tiny ant-bodies!',
  30. },
  31. {
  32. key: '5',
  33. icon: <WarningOutlined style={{ color: '#FF4D4F' }} />,
  34. label: 'Common Issue Solutions',
  35. description: 'How to solve common issues? Share some tips!',
  36. },
  37. ];
  38. const Demo = () => {
  39. const { message } = App.useApp();
  40. return (
  41. <Prompts
  42. title="✨ Inspirational Sparks and Marvelous Tips"
  43. items={items}
  44. onItemClick={(info) => {
  45. message.success(`You clicked a prompt: ${info.data.label}`);
  46. }}
  47. />
  48. );
  49. };
  50. defineRender(() => {
  51. return (
  52. <App>
  53. <Demo />
  54. </App>
  55. )
  56. });
  57. </script>