basic.vue 1014 B

123456789101112131415161718192021222324252627282930313233343536
  1. <script setup lang="ts">
  2. import { MoreOutlined } from '@ant-design/icons-vue';
  3. import { Button, Card } from 'ant-design-vue';
  4. import { ThoughtChain, type ThoughtChainProps } from 'ant-design-x-vue';
  5. import { h } from 'vue';
  6. defineOptions({ name: 'AXThoughtChainBasicSetup' });
  7. const items: ThoughtChainProps['items'] = [
  8. {
  9. title: 'Thought Chain Item Title',
  10. description: 'description',
  11. extra: h(Button, { type: 'text', icon: h(MoreOutlined) }),
  12. },
  13. {
  14. title: 'Thought Chain Item Title',
  15. description: 'description',
  16. extra: h(Button, { type: 'text', icon: h(MoreOutlined) }),
  17. },
  18. {
  19. title: 'Thought Chain Item Title',
  20. description: 'description',
  21. extra: h(Button, { type: 'text', icon: h(MoreOutlined) }),
  22. },
  23. {
  24. title: 'Thought Chain Item Title',
  25. description: 'description',
  26. extra: h(Button, { type: 'text', icon: h(MoreOutlined) }),
  27. },
  28. ];
  29. </script>
  30. <template>
  31. <Card :style="{ width: '500px' }">
  32. <ThoughtChain :items="items" />
  33. </Card>
  34. </template>