variant.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <script setup lang="tsx">
  2. import { CoffeeOutlined, FireOutlined, SmileOutlined, UserOutlined } from '@ant-design/icons-vue';
  3. import { Bubble, Prompts, type PromptsProps } from 'ant-design-x-vue';
  4. import { Flex } from 'ant-design-vue';
  5. defineOptions({ name: 'BubbleVariant' });
  6. const items: PromptsProps['items'] = [
  7. {
  8. key: '6',
  9. icon: <CoffeeOutlined style={{ color: '#964B00' }} />,
  10. description: 'How to rest effectively after long hours of work?',
  11. },
  12. {
  13. key: '7',
  14. icon: <SmileOutlined style={{ color: '#FAAD14' }} />,
  15. description: 'What are the secrets to maintaining a positive mindset?',
  16. },
  17. {
  18. key: '8',
  19. icon: <FireOutlined style={{ color: '#FF4D4F' }} />,
  20. description: 'How to stay calm under immense pressure?',
  21. },
  22. ];
  23. defineRender(() => {
  24. return (
  25. <Flex vertical gap="middle">
  26. <Bubble variant="filled" avatar={{ icon: <UserOutlined /> }} content="variant: filled" />
  27. <Bubble variant="outlined" avatar={{ icon: <UserOutlined /> }} content="variant: outlined" />
  28. <Bubble variant="shadow" avatar={{ icon: <UserOutlined /> }} content="variant: shadow" />
  29. <Bubble
  30. variant="borderless"
  31. avatar={{ icon: <UserOutlined /> }}
  32. content={<Prompts title="variant: borderless to customize" items={items} vertical />}
  33. />
  34. </Flex>
  35. )
  36. });
  37. </script>