shape.vue 788 B

1234567891011121314151617181920212223242526
  1. <script setup lang="tsx">
  2. import { Bubble, type BubbleProps } from 'ant-design-x-vue';
  3. import { Flex } from 'ant-design-vue';
  4. defineOptions({ name: 'BubbleShape' });
  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(3),
  9. styles: { content: { maxWidth: 500 } },
  10. };
  11. defineRender(() => {
  12. return (
  13. <Flex gap="middle" vertical>
  14. <Bubble content="shape: default" />
  15. <Bubble {...sharedLongTextProps} />
  16. <Bubble content="shape: round" shape="round" />
  17. <Bubble {...sharedLongTextProps} shape="round" />
  18. <Bubble content="shape: corner" shape="corner" />
  19. <Bubble {...sharedLongTextProps} shape="corner" />
  20. </Flex>
  21. )
  22. });
  23. </script>