size.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <script setup lang="tsx">
  2. import { MoreOutlined } from '@ant-design/icons-vue';
  3. import { Button, Card, Radio, type ConfigProviderProps } from 'ant-design-vue';
  4. import { ThoughtChain, type ThoughtChainProps } from 'ant-design-x-vue';
  5. import { ref } from 'vue';
  6. defineOptions({ name: 'AXThoughtChainSize' });
  7. type SizeType = ConfigProviderProps['componentSize'];
  8. const items: ThoughtChainProps['items'] = [
  9. {
  10. title: 'Thought Chain Item Title',
  11. description: 'description',
  12. extra: <Button type="text" icon={<MoreOutlined />} />,
  13. },
  14. {
  15. title: 'Thought Chain Item Title',
  16. description: 'description',
  17. extra: <Button type="text" icon={<MoreOutlined />} />,
  18. },
  19. {
  20. title: 'Thought Chain Item Title',
  21. description: 'description',
  22. extra: <Button type="text" icon={<MoreOutlined />} />,
  23. },
  24. {
  25. title: 'Thought Chain Item Title',
  26. description: 'description',
  27. extra: <Button type="text" icon={<MoreOutlined />} />,
  28. },
  29. ];
  30. // default size is 'middle'
  31. const size = ref<SizeType>('middle');
  32. defineRender(() => {
  33. return (
  34. <Card style={{ width: '500px' }}>
  35. <Radio.Group
  36. value={size}
  37. onChange={(e) => {
  38. size.value = e.target.value;
  39. }}
  40. style={{ marginBottom: '16px' }}
  41. >
  42. <Radio.Button value="large">Large</Radio.Button>
  43. <Radio.Button value="middle">Default</Radio.Button>
  44. <Radio.Button value="small">Small</Radio.Button>
  45. </Radio.Group>
  46. <ThoughtChain items={items} size={size.value} />
  47. </Card>
  48. )
  49. });
  50. </script>