collapsible.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <script setup lang="tsx">
  2. import { Card, Typography } from 'ant-design-vue';
  3. import { ThoughtChain, type ThoughtChainProps } from 'ant-design-x-vue';
  4. import { cloneVNode } from 'vue';
  5. defineOptions({ name: 'AXThoughtChainCollapsible' });
  6. const { Paragraph, Text } = Typography;
  7. const mockContent = (
  8. <Typography>
  9. <Paragraph>
  10. In the process of internal desktop applications development, many different design specs and
  11. implementations would be involved, which might cause designers and developers difficulties and
  12. duplication and reduce the efficiency of development.
  13. </Paragraph>
  14. <Paragraph>
  15. After massive project practice and summaries, Ant Design, a design language for background
  16. applications, is refined by Ant UED Team, which aims to{' '}
  17. <Text strong>
  18. uniform the user interface specs for internal background projects, lower the unnecessary
  19. cost of design differences and implementation and liberate the resources of design and
  20. front-end development
  21. </Text>
  22. </Paragraph>
  23. </Typography>
  24. );
  25. const items: ThoughtChainProps['items'] = [
  26. {
  27. title: 'Click me to expand the content',
  28. description: 'Collapsible',
  29. content: cloneVNode(mockContent),
  30. },
  31. {
  32. title: 'Click me to expand the content',
  33. description: 'Collapsible',
  34. content: cloneVNode(mockContent),
  35. },
  36. ];
  37. defineRender(() => {
  38. return (
  39. <Card style={{ width: '500px' }}>
  40. <ThoughtChain items={items} collapsible />
  41. </Card>
  42. )
  43. });
  44. </script>