variant.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <script setup lang="ts">
  2. import {
  3. CoffeeOutlined,
  4. FireOutlined,
  5. SmileOutlined,
  6. UserOutlined,
  7. } from '@ant-design/icons-vue';
  8. import { Bubble, Prompts, type PromptsProps } from 'ant-design-x-vue';
  9. import { Flex } from 'ant-design-vue';
  10. import { h } from 'vue';
  11. defineOptions({ name: 'AXBubbleVariantSetup' });
  12. const items: PromptsProps['items'] = [
  13. {
  14. key: '6',
  15. icon: h(CoffeeOutlined, { style: { color: '#964B00' } }),
  16. description: 'How to rest effectively after long hours of work?',
  17. },
  18. {
  19. key: '7',
  20. icon: h(SmileOutlined, { style: { color: '#FAAD14' } }),
  21. description: 'What are the secrets to maintaining a positive mindset?',
  22. },
  23. {
  24. key: '8',
  25. icon: h(FireOutlined, { style: { color: '#FF4D4F' } }),
  26. description: 'How to stay calm under immense pressure?',
  27. },
  28. ];
  29. </script>
  30. <template>
  31. <Flex vertical gap="middle">
  32. <Bubble
  33. variant="filled"
  34. :avatar="{ icon: h(UserOutlined) }"
  35. content="variant: filled"
  36. />
  37. <Bubble
  38. variant="outlined"
  39. :avatar="{ icon: h(UserOutlined) }"
  40. content="variant: outlined"
  41. />
  42. <Bubble
  43. variant="shadow"
  44. :avatar="{ icon: h(UserOutlined) }"
  45. content="variant: shadow"
  46. />
  47. <Bubble
  48. variant="borderless"
  49. :avatar="{ icon: h(UserOutlined) }"
  50. :content="
  51. h(Prompts, {
  52. title: 'variant: borderless to customize',
  53. items,
  54. vertical: true,
  55. })
  56. "
  57. />
  58. </Flex>
  59. </template>