shape.vue 786 B

1234567891011121314151617181920212223242526
  1. <script setup lang="ts">
  2. import { Bubble, type BubbleProps } from 'ant-design-x-vue';
  3. import { Flex } from 'ant-design-vue';
  4. defineOptions({ name: 'AXBubbleShapeSetup' });
  5. const sharedLongTextProps: BubbleProps = {
  6. placement: 'end',
  7. content:
  8. 'This is a long text message to show the multiline view of the bubble component. '.repeat(
  9. 3,
  10. ),
  11. styles: { content: { maxWidth: 500 } },
  12. };
  13. </script>
  14. <template>
  15. <Flex gap="middle" vertical>
  16. <Bubble content="shape: default" />
  17. <Bubble v-bind="sharedLongTextProps" />
  18. <Bubble content="shape: round" shape="round" />
  19. <Bubble v-bind="sharedLongTextProps" shape="round" />
  20. <Bubble content="shape: corner" shape="corner" />
  21. <Bubble v-bind="sharedLongTextProps" shape="corner" />
  22. </Flex>
  23. </template>