nested.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  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: 'AXThoughtChainNested' });
  6. const items: ThoughtChainProps['items'] = [
  7. {
  8. title: '1 - Thought Chain Item',
  9. description: 'description',
  10. extra: <Button type="text" icon={<MoreOutlined />} />,
  11. footer: <Button>1 - Thought Chain Item Footer</Button>,
  12. content: (
  13. <ThoughtChain
  14. items={[
  15. {
  16. title: '1-1 Thought Chain Item',
  17. description: 'description',
  18. extra: <Button type="text" icon={<MoreOutlined />} />,
  19. },
  20. {
  21. title: '1-2 Thought Chain Item',
  22. description: 'description',
  23. extra: <Button type="text" icon={<MoreOutlined />} />,
  24. },
  25. ]}
  26. />
  27. ),
  28. },
  29. {
  30. title: '2 - Thought Chain Item',
  31. description: 'description',
  32. extra: <Button type="text" icon={<MoreOutlined />} />,
  33. footer: <Button>2 - Thought Chain Item Footer</Button>,
  34. content: (
  35. <ThoughtChain
  36. items={[
  37. {
  38. title: '2-1 Thought Chain Item',
  39. description: 'description',
  40. extra: <Button type="text" icon={<MoreOutlined />} />,
  41. },
  42. {
  43. title: '2-2 Thought Chain Item',
  44. description: 'description',
  45. extra: <Button type="text" icon={<MoreOutlined />} />,
  46. },
  47. ]}
  48. />
  49. ),
  50. },
  51. ];
  52. defineRender(() => {
  53. return (
  54. <Card style={{ width: '500px' }}>
  55. <ThoughtChain items={items} collapsible />
  56. </Card>
  57. )
  58. });
  59. </script>