Skip to content

Commit 386b4a8

Browse files
selicensselicens
committed
feat: add segmented (#5568)
1 parent 5b3ade8 commit 386b4a8

21 files changed

+786
-0
lines changed

‎components/components.ts

+3
Original file line numberDiff line numberDiff line change
@@ -244,3 +244,6 @@ export type { UploadProps, UploadListProps, UploadChangeParam, UploadFile } from
244244
export { default as Upload, UploadDragger } from './upload';
245245

246246
export { default as LocaleProvider } from './locale-provider';
247+
248+
export type { SegmentedProps } from './segmented';
249+
export { default as Segmented } from './segmented';

‎components/segmented/__tests__/demo.test.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import demoTest from '../../../tests/shared/demoTest';
2+
3+
demoTest('segmented');

‎components/segmented/__tests__/index.test.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { mount } from '@vue/test-utils';
2+
import Segmented from '../index';
3+
describe('Segmented', () => {
4+
const wrapper = mount({
5+
render() {
6+
return <Segmented></Segmented>;
7+
},
8+
});
9+
const todo = wrapper.get('[options="[1,2,3,4,5]"]');
10+
expect(todo.text()).toBe('segmented');
11+
});

‎components/segmented/demo/basic.vue

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<docs>
2+
---
3+
order: 0
4+
title:
5+
zh-CN: 基本用法
6+
en-US: Basic Usage
7+
---
8+
9+
## zh-CN
10+
11+
最简单的用法。
12+
13+
## en-US
14+
The most basic usage.
15+
</docs>
16+
17+
<template>
18+
<a-segmented :options="data" />
19+
</template>
20+
21+
<script lang="ts">
22+
import { defineComponent, reactive } from 'vue';
23+
24+
export default defineComponent({
25+
setup() {
26+
const data = reactive(['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']);
27+
return {
28+
data,
29+
};
30+
},
31+
});
32+
</script>

‎components/segmented/demo/block.vue

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<docs>
2+
---
3+
order: 1
4+
title:
5+
zh-CN: Block分段控制器
6+
en-US: Block Segmented
7+
---
8+
9+
## zh-CN
10+
11+
`block` 属性使其适合父元素宽度。
12+
13+
## en-US
14+
`block` property will make the `Segmented` fit to its parent width.
15+
</docs>
16+
<template>
17+
<a-segmented block :options="data" />
18+
</template>
19+
20+
<script lang="ts">
21+
import { defineComponent, reactive } from 'vue';
22+
23+
export default defineComponent({
24+
setup() {
25+
const data = reactive([123, 456, 'longtext-longtext-longtext-longtext']);
26+
return {
27+
data,
28+
};
29+
},
30+
});
31+
</script>

‎components/segmented/demo/controlled.vue

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<docs>
2+
---
3+
order: 4
4+
title:
5+
zh-CN: 受控模式
6+
en-US: Controlled mode
7+
---
8+
9+
## zh-CN
10+
11+
受控的 Segmented
12+
13+
## en-US
14+
Controlled Segmented.
15+
</docs>
16+
<template>
17+
<div>
18+
<a-segmented :options="data" default-value="1" @change="handle" />
19+
</div>
20+
</template>
21+
22+
<script lang="ts">
23+
import { defineComponent, reactive } from 'vue';
24+
25+
export default defineComponent({
26+
setup() {
27+
const data = reactive(['Map', 'Transit', 'Satellite']);
28+
const handle = v => console.log(v);
29+
return {
30+
data,
31+
handle,
32+
};
33+
},
34+
});
35+
</script>

‎components/segmented/demo/custom.vue

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<docs>
2+
---
3+
order: 5
4+
title:
5+
zh-CN: 自定义渲染
6+
en-US: Custom
7+
---
8+
9+
## zh-CN
10+
11+
自定义渲染每一个 Segmented Item。
12+
13+
## en-US
14+
Custom each Segmented Item.
15+
</docs>
16+
<template>
17+
<a-segmented :options="data">
18+
<template #title="index">
19+
<template v-if="index === 0">
20+
<div style="padding: 4px 4px">
21+
<a-avatar src="https://joeschmoe.io/api/v1/random" />
22+
<div>User 1</div>
23+
</div>
24+
</template>
25+
<template v-if="index === 1">
26+
<div style="padding: 4px 4px">
27+
<a-avatar style="background-color: #f56a00">K</a-avatar>
28+
<div>User 2</div>
29+
</div>
30+
</template>
31+
<template v-if="index === 2">
32+
<div style="padding: 4px 4px">
33+
<a-avatar style="background-color: #1890ff">
34+
<template #icon><UserOutlined /></template>
35+
</a-avatar>
36+
<div>User 3</div>
37+
</div>
38+
</template>
39+
</template>
40+
</a-segmented>
41+
<br />
42+
<br />
43+
<a-segmented :options="options2">
44+
<template #title="index">
45+
<template v-if="index === 0">
46+
<div style="padding: 4px 4px">
47+
<div>Spring</div>
48+
<div>Jan-Mar</div>
49+
</div>
50+
</template>
51+
<template v-if="index === 1">
52+
<div style="padding: 4px 4px">
53+
<div>Summer</div>
54+
<div>Apr-Jun</div>
55+
</div>
56+
</template>
57+
<template v-if="index === 2">
58+
<div style="padding: 4px 4px">
59+
<div>Autumn</div>
60+
<div>Jul-Sept</div>
61+
</div>
62+
</template>
63+
<template v-if="index === 3">
64+
<div style="padding: 4px 4px">
65+
<div>Winter</div>
66+
<div>Oct-Dec</div>
67+
</div>
68+
</template>
69+
</template>
70+
</a-segmented>
71+
</template>
72+
73+
<script lang="ts">
74+
import { defineComponent, reactive } from 'vue';
75+
import { UserOutlined } from '@ant-design/icons-vue';
76+
import ASegmented from 'ant-design-vue/es/segmented/src/segmented';
77+
78+
export default defineComponent({
79+
components: { ASegmented, UserOutlined },
80+
setup() {
81+
const data = reactive([{ value: 'user1' }, { value: 'user2' }, { value: 'user3' }]);
82+
const options2 = reactive([
83+
{ value: 'spring' },
84+
{ value: 'summer' },
85+
{ value: 'autumn' },
86+
{ value: 'winter' },
87+
]);
88+
return {
89+
data,
90+
options2,
91+
};
92+
},
93+
});
94+
</script>

‎components/segmented/demo/disabled.vue

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<docs>
2+
---
3+
order: 3
4+
title:
5+
zh-CN: 不可用
6+
en-US: Disabled
7+
---
8+
9+
## zh-CN
10+
11+
Segmented 不可用。
12+
13+
## en-US
14+
Disabled Segmented.
15+
</docs>
16+
<template>
17+
<div>
18+
<a-segmented disabled :options="data" />
19+
<br />
20+
<br />
21+
<a-segmented :options="data2" />
22+
</div>
23+
</template>
24+
25+
<script lang="ts">
26+
import { defineComponent, reactive } from 'vue';
27+
28+
export default defineComponent({
29+
setup() {
30+
const data = reactive(['Map', 'Transit', 'Satellite']);
31+
const data2 = reactive([
32+
'Daily',
33+
{ value: 'Weekly', disabled: true },
34+
'Monthly',
35+
{ value: 'Quarterly', disabled: true },
36+
'Yearly',
37+
]);
38+
return {
39+
data,
40+
data2,
41+
};
42+
},
43+
});
44+
</script>

‎components/segmented/demo/dynamic.vue

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<docs>
2+
---
3+
order: 6
4+
title:
5+
zh-CN: 动态数据
6+
en-US: Dynamic
7+
---
8+
9+
## zh-CN
10+
11+
动态加载数据。
12+
13+
## en-US
14+
Load dynamically.
15+
</docs>
16+
<template>
17+
<a-segmented :options="data"></a-segmented>
18+
<br />
19+
<br />
20+
<a-button type="primary" @click="loadMore" :disabled="isDisabled">Load More</a-button>
21+
</template>
22+
23+
<script lang="ts">
24+
import { defineComponent, reactive, ref } from 'vue';
25+
export default defineComponent({
26+
setup() {
27+
const data = reactive(['Daily', 'Weekly', 'Monthly']);
28+
const isDisabled = ref<boolean>(false);
29+
const loadMore = () => {
30+
data.push(...['Quarterly', 'Yearly']);
31+
isDisabled.value = true;
32+
};
33+
return {
34+
data,
35+
loadMore,
36+
isDisabled,
37+
};
38+
},
39+
});
40+
</script>

‎components/segmented/demo/icon.vue

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<docs>
2+
---
3+
order: 7
4+
title:
5+
zh-CN: 设置图标
6+
en-US: With Icon
7+
---
8+
9+
## zh-CN
10+
11+
给 Segmented Item 设置 Icon。
12+
13+
## en-US
14+
Set `icon` for Segmented Item.
15+
</docs>
16+
<template>
17+
<a-segmented :options="data">
18+
<template #icon="index">
19+
<template v-if="index == 0">
20+
<unordered-list-outlined />
21+
</template>
22+
<template v-if="index == 1">
23+
<appstore-outlined />
24+
</template>
25+
</template>
26+
</a-segmented>
27+
</template>
28+
29+
<script lang="ts">
30+
import { defineComponent, reactive } from 'vue';
31+
import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue';
32+
33+
export default defineComponent({
34+
components: { UnorderedListOutlined, AppstoreOutlined },
35+
setup() {
36+
const data = reactive([
37+
{
38+
value: 'List',
39+
},
40+
{
41+
value: 'Kanban',
42+
},
43+
]);
44+
return {
45+
data,
46+
};
47+
},
48+
});
49+
</script>

‎components/segmented/demo/index.vue

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<demo-sort>
3+
<basic />
4+
<block />
5+
<disabled />
6+
<controlled />
7+
<custom />
8+
<dynamic />
9+
<size />
10+
<icon />
11+
</demo-sort>
12+
</template>
13+
14+
<script lang="ts">
15+
import { defineComponent } from 'vue';
16+
import CN from '../index.zh-CN.md';
17+
import US from '../index.en-US.md';
18+
import Basic from './basic.vue';
19+
import Block from './block.vue';
20+
import Disabled from './disabled.vue';
21+
import Controlled from './controlled.vue';
22+
import Custom from './custom.vue';
23+
import Dynamic from './dynamic.vue';
24+
import Size from './size.vue';
25+
import Icon from './icon.vue';
26+
27+
export default defineComponent({
28+
components: { Icon, Size, Dynamic, Custom, Controlled, Disabled, Block, Basic },
29+
category: 'Components',
30+
subtitle: '分段控制器',
31+
type: 'Data Display',
32+
title: 'Segmented',
33+
CN,
34+
US,
35+
});
36+
</script>

0 commit comments

Comments
 (0)