flex-wrap.vue 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <script setup lang="tsx">
  2. import { BulbOutlined, CheckCircleOutlined, CoffeeOutlined, FireOutlined, InfoCircleOutlined, RocketOutlined, SmileOutlined, WarningOutlined } from '@ant-design/icons-vue';
  3. import { Prompts, type PromptsProps } from 'ant-design-x-vue';
  4. defineOptions({ name: 'AXPromptsFlexWrap' });
  5. const items: PromptsProps['items'] = [
  6. {
  7. key: '1',
  8. icon: <BulbOutlined style={{ color: '#FFD700' }} />,
  9. description: 'Got any sparks for a new project?',
  10. },
  11. {
  12. key: '2',
  13. icon: <InfoCircleOutlined style={{ color: '#1890FF' }} />,
  14. description: 'Help me understand the background of this topic.',
  15. },
  16. {
  17. key: '3',
  18. icon: <WarningOutlined style={{ color: '#FF4D4F' }} />,
  19. description: 'How to solve common issues? Share some tips!',
  20. },
  21. {
  22. key: '4',
  23. icon: <RocketOutlined style={{ color: '#722ED1' }} />,
  24. description: 'How can I work faster and better?',
  25. },
  26. {
  27. key: '5',
  28. icon: <CheckCircleOutlined style={{ color: '#52C41A' }} />,
  29. description: 'What are some tricks for getting tasks done?',
  30. },
  31. {
  32. key: '6',
  33. icon: <CoffeeOutlined style={{ color: '#964B00' }} />,
  34. description: 'How to rest effectively after long hours of work?',
  35. },
  36. {
  37. key: '7',
  38. icon: <SmileOutlined style={{ color: '#FAAD14' }} />,
  39. description: 'What are the secrets to maintaining a positive mindset?',
  40. },
  41. {
  42. key: '8',
  43. icon: <FireOutlined style={{ color: '#FF4D4F' }} />,
  44. description: 'How to stay calm under immense pressure?',
  45. },
  46. ];
  47. defineRender(() => {
  48. return (
  49. <Prompts title="✨ Inspirational Sparks and Marvelous Tips" items={items} wrap />
  50. )
  51. });
  52. </script>