avatar-and-placement.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <script setup lang="ts">
  2. import { Bubble } from 'ant-design-x-vue';
  3. import { UserOutlined } from '@ant-design/icons-vue';
  4. import { Flex, Avatar } from 'ant-design-vue';
  5. import type { CSSProperties } from 'vue';
  6. import { h } from 'vue';
  7. defineOptions({ name: 'AXBubbleAvatarAndPlacementSetup' });
  8. const fooAvatar: CSSProperties = {
  9. color: '#f56a00',
  10. backgroundColor: '#fde3cf',
  11. };
  12. const barAvatar: CSSProperties = {
  13. color: '#fff',
  14. backgroundColor: '#87d068',
  15. };
  16. const hideAvatar: CSSProperties = {
  17. visibility: 'hidden',
  18. };
  19. </script>
  20. <template>
  21. <Flex
  22. gap="middle"
  23. vertical
  24. >
  25. <Bubble
  26. placement="start"
  27. content="Good morning, how are you?"
  28. :avatar="{ icon: h(UserOutlined), style: fooAvatar }"
  29. />
  30. <Bubble
  31. placement="start"
  32. content="What a beautiful day!"
  33. :styles="{ avatar: hideAvatar }"
  34. :avatar="{}"
  35. />
  36. <Bubble
  37. placement="end"
  38. content="Hi, good morning, I'm fine!"
  39. >
  40. <template #avatar>
  41. <Avatar
  42. :icon="h(UserOutlined)"
  43. :style="barAvatar"
  44. />
  45. </template>
  46. </Bubble>
  47. <Bubble
  48. placement="end"
  49. content="Thank you!"
  50. :styles="{ avatar: hideAvatar }"
  51. :avatar="{}"
  52. />
  53. </Flex>
  54. </template>