flex-wrap-fixed.vue 1.5 KB

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