size.vue 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <script setup lang="ts">
  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, h } from 'vue';
  6. defineOptions({ name: 'AXThoughtChainSizeSetup' });
  7. type SizeType = ConfigProviderProps['componentSize'];
  8. const items: ThoughtChainProps['items'] = [
  9. {
  10. title: 'Thought Chain Item Title',
  11. description: 'description',
  12. extra: h(Button, { type: 'text', icon: h(MoreOutlined) }),
  13. },
  14. {
  15. title: 'Thought Chain Item Title',
  16. description: 'description',
  17. extra: h(Button, { type: 'text', icon: h(MoreOutlined) }),
  18. },
  19. {
  20. title: 'Thought Chain Item Title',
  21. description: 'description',
  22. extra: h(Button, { type: 'text', icon: h(MoreOutlined) }),
  23. },
  24. {
  25. title: 'Thought Chain Item Title',
  26. description: 'description',
  27. extra: h(Button, { type: 'text', icon: h(MoreOutlined) }),
  28. },
  29. ];
  30. // default size is 'middle'
  31. const size = ref<SizeType>('middle');
  32. </script>
  33. <template>
  34. <Card :style="{ width: '500px' }">
  35. <Radio.Group
  36. :value="size"
  37. :style="{ marginBottom: '16px' }"
  38. @change="
  39. (e) => {
  40. size = e.target.value;
  41. }
  42. "
  43. >
  44. <Radio.Button value="large">
  45. Large
  46. </Radio.Button>
  47. <Radio.Button value="middle">
  48. Default
  49. </Radio.Button>
  50. <Radio.Button value="small">
  51. Small
  52. </Radio.Button>
  53. </Radio.Group>
  54. <ThoughtChain
  55. :items="items"
  56. :size="size"
  57. />
  58. </Card>
  59. </template>