basic.vue 992 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <script setup lang="tsx">
  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. defineOptions({ name: 'AXThoughtChainBasic' });
  6. const items: ThoughtChainProps['items'] = [
  7. {
  8. title: 'Thought Chain Item Title',
  9. description: 'description',
  10. extra: <Button type="text" icon={<MoreOutlined />} />,
  11. },
  12. {
  13. title: 'Thought Chain Item Title',
  14. description: 'description',
  15. extra: <Button type="text" icon={<MoreOutlined />} />,
  16. },
  17. {
  18. title: 'Thought Chain Item Title',
  19. description: 'description',
  20. extra: <Button type="text" icon={<MoreOutlined />} />,
  21. },
  22. {
  23. title: 'Thought Chain Item Title',
  24. description: 'description',
  25. extra: <Button type="text" icon={<MoreOutlined />} />,
  26. },
  27. ];
  28. defineRender(() => {
  29. return (
  30. <Card style={{ width: '500px' }}>
  31. <ThoughtChain items={items} />
  32. </Card>
  33. )
  34. });
  35. </script>