12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- <script setup lang="ts">
- import { MoreOutlined } from '@ant-design/icons-vue';
- import { Button, Card, Radio, type ConfigProviderProps } from 'ant-design-vue';
- import { ThoughtChain, type ThoughtChainProps } from 'ant-design-x-vue';
- import { ref, h } from 'vue';
- defineOptions({ name: 'AXThoughtChainSizeSetup' });
- type SizeType = ConfigProviderProps['componentSize'];
- const items: ThoughtChainProps['items'] = [
- {
- title: 'Thought Chain Item Title',
- description: 'description',
- extra: h(Button, { type: 'text', icon: h(MoreOutlined) }),
- },
- {
- title: 'Thought Chain Item Title',
- description: 'description',
- extra: h(Button, { type: 'text', icon: h(MoreOutlined) }),
- },
- {
- title: 'Thought Chain Item Title',
- description: 'description',
- extra: h(Button, { type: 'text', icon: h(MoreOutlined) }),
- },
- {
- title: 'Thought Chain Item Title',
- description: 'description',
- extra: h(Button, { type: 'text', icon: h(MoreOutlined) }),
- },
- ];
- // default size is 'middle'
- const size = ref<SizeType>('middle');
- </script>
- <template>
- <Card :style="{ width: '500px' }">
- <Radio.Group
- :value="size"
- :style="{ marginBottom: '16px' }"
- @change="
- (e) => {
- size = e.target.value;
- }
- "
- >
- <Radio.Button value="large">
- Large
- </Radio.Button>
- <Radio.Button value="middle">
- Default
- </Radio.Button>
- <Radio.Button value="small">
- Small
- </Radio.Button>
- </Radio.Group>
- <ThoughtChain
- :items="items"
- :size="size"
- />
- </Card>
- </template>
|