avatar-and-placement.vue 1.1 KB

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