Skip to content

Commit fbfec0a

Browse files
tangjinzhoutangjinzhou
committed
refactor: steps #6406 
1 parent 9a5cbee commit fbfec0a

21 files changed

+661
-318
lines changed

‎components/config-provider/demo/direction.vue‎

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -239,17 +239,43 @@ Components which support rtl direction are listed here, you can toggle the direc
239239
<a-col :span="24">
240240
<a-divider orientation="left">Steps example</a-divider>
241241
<div>
242-
<a-steps progress-dot :current="state.currentStep">
243-
<a-step title="Finished" description="This is a description." />
244-
<a-step title="In Progress" description="This is a description." />
245-
<a-step title="Waiting" description="This is a description." />
246-
</a-steps>
242+
<a-steps
243+
progress-dot
244+
:current="state.currentStep"
245+
:items="[
246+
{
247+
title: 'Finished',
248+
description: 'This is a description.',
249+
},
250+
{
251+
title: 'In Progress',
252+
description: 'This is a description.',
253+
},
254+
{
255+
title: 'Waiting',
256+
description: 'This is a description.',
257+
},
258+
]"
259+
></a-steps>
247260
<br />
248-
<a-steps :current="state.currentStep" @change="onStepsChange">
249-
<a-step title="Step 1" description="This is a description." />
250-
<a-step title="Step 2" description="This is a description." />
251-
<a-step title="Step 3" description="This is a description." />
252-
</a-steps>
261+
<a-steps
262+
:current="state.currentStep"
263+
:items="[
264+
{
265+
title: 'Step 1',
266+
description: 'This is a description.',
267+
},
268+
{
269+
title: 'Step 2',
270+
description: 'This is a description.',
271+
},
272+
{
273+
title: 'Step 3',
274+
description: 'This is a description.',
275+
},
276+
]"
277+
@change="onStepsChange"
278+
></a-steps>
253279
</div>
254280
</a-col>
255281
</a-row>

‎components/config-provider/demo/theme.vue‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -198,23 +198,10 @@ Modify global theme color by css variable. Css variable depends on the design, i
198198
<a-pagination show-quick-jumper :default-current="2" :total="500" />
199199

200200
<!-- Steps -->
201-
<a-steps :current="1" :percent="60">
202-
<a-step title="Finished" description="This is a description." />
203-
<a-step
204-
title="In Progress"
205-
sub-title="Left 00:00:08"
206-
description="This is a description."
207-
/>
208-
<a-step title="Waiting" description="This is a description." />
209-
</a-steps>
201+
<a-steps :current="1" :percent="60" :items="stepsItems"></a-steps>
210202

211203
<!-- Steps - dot -->
212-
<a-steps :current="2" status="error" progress-dot>
213-
<a-step title="Finished" description="You can hover on the dot." />
214-
<a-step title="In Progress" description="You can hover on the dot." />
215-
<a-step title="Error" description="You can hover on the dot." />
216-
<a-step title="Waiting" description="You can hover on the dot." />
217-
</a-steps>
204+
<a-steps :current="2" status="error" progress-dot :items="stepsItems2"></a-steps>
218205

219206
<!-- Form - Input -->
220207
<a-form>
@@ -568,6 +555,34 @@ export default defineComponent({
568555
colorState,
569556
inputProps,
570557
selectedKeys: ref(['mail']),
558+
stepsItems: [
559+
{
560+
title: 'Finished',
561+
description: 'This is a description.',
562+
},
563+
{
564+
title: 'In Progress',
565+
description: 'This is a description.',
566+
},
567+
{
568+
title: 'Waiting',
569+
description: 'This is a description.',
570+
},
571+
],
572+
stepsItems2: [
573+
{
574+
title: 'Finished',
575+
description: 'You can hover on the dot.',
576+
},
577+
{
578+
title: 'In Progress',
579+
description: 'You can hover on the dot.',
580+
},
581+
{
582+
title: 'Waiting',
583+
description: 'You can hover on the dot.',
584+
},
585+
],
571586
};
572587
},
573588
});

‎components/steps/demo/clickable.vue‎

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,42 @@ Setting `v-model` makes Steps clickable.
1717

1818
<template>
1919
<div>
20-
<a-steps v-model:current="current">
21-
<a-step title="Step 1" description="This is a description." />
22-
<a-step title="Step 2" description="This is a description." />
23-
<a-step title="Step 3" description="This is a description." />
24-
</a-steps>
20+
<a-steps
21+
v-model:current="current"
22+
:items="[
23+
{
24+
title: 'Step 1',
25+
description,
26+
},
27+
{
28+
title: 'Step 2',
29+
description,
30+
},
31+
{
32+
title: 'Step 3',
33+
description,
34+
},
35+
]"
36+
></a-steps>
2537
<a-divider />
26-
<a-steps v-model:current="current" direction="vertical">
27-
<a-step title="Step 1" description="This is a description." />
28-
<a-step title="Step 2" description="This is a description." />
29-
<a-step title="Step 3" description="This is a description." />
30-
</a-steps>
38+
<a-steps
39+
v-model:current="current"
40+
direction="vertical"
41+
:items="[
42+
{
43+
title: 'Step 1',
44+
description,
45+
},
46+
{
47+
title: 'Step 2',
48+
description,
49+
},
50+
{
51+
title: 'Step 3',
52+
description,
53+
},
54+
]"
55+
></a-steps>
3156
</div>
3257
</template>
3358
<script lang="ts">
@@ -39,6 +64,7 @@ export default defineComponent({
3964
4065
return {
4166
current,
67+
description: 'This is a description.',
4268
};
4369
},
4470
});

‎components/steps/demo/customized-progress-dot.vue‎

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,27 @@ You can customize the display for Steps with progress dot style.
1717

1818
<template>
1919
<div>
20-
<a-steps :current="1">
20+
<a-steps
21+
v-model:current="current"
22+
:items="[
23+
{
24+
title: 'Finished',
25+
description,
26+
},
27+
{
28+
title: 'In Progress',
29+
description,
30+
},
31+
{
32+
title: 'Waiting',
33+
description,
34+
},
35+
{
36+
title: 'Waiting',
37+
description,
38+
},
39+
]"
40+
>
2141
<template #progressDot="{ index, status, prefixCls }">
2242
<a-popover>
2343
<template #content>
@@ -26,10 +46,20 @@ You can customize the display for Steps with progress dot style.
2646
<span :class="`${prefixCls}-icon-dot`" />
2747
</a-popover>
2848
</template>
29-
<a-step title="Finished" description="You can hover on the dot." />
30-
<a-step title="In Progress" description="You can hover on the dot." />
31-
<a-step title="Waiting" description="You can hover on the dot." />
32-
<a-step title="Waiting" description="You can hover on the dot." />
3349
</a-steps>
3450
</div>
3551
</template>
52+
<script lang="ts">
53+
import { defineComponent, ref } from 'vue';
54+
55+
export default defineComponent({
56+
setup() {
57+
const current = ref<number>(0);
58+
59+
return {
60+
current,
61+
description: 'This is a description.',
62+
};
63+
},
64+
});
65+
</script>

‎components/steps/demo/error.vue‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,36 @@ title:
1515
By using `status` of `Steps`, you can specify the state for current step.
1616
</docs>
1717
<template>
18-
<a-steps :current="1" status="error">
19-
<a-step title="Finished" description="This is a description." />
20-
<a-step title="In Progress" description="This is a description." />
21-
<a-step title="Waiting" description="This is a description." />
22-
</a-steps>
18+
<a-steps
19+
:v-model:current="current"
20+
status="error"
21+
:items="[
22+
{
23+
title: 'Finished',
24+
description,
25+
},
26+
{
27+
title: 'In Process',
28+
description,
29+
},
30+
{
31+
title: 'Waiting',
32+
description,
33+
},
34+
]"
35+
></a-steps>
2336
</template>
37+
<script lang="ts">
38+
import { defineComponent, ref } from 'vue';
39+
40+
export default defineComponent({
41+
setup() {
42+
const current = ref<number>(0);
43+
44+
return {
45+
current,
46+
description: 'This is a description.',
47+
};
48+
},
49+
});
50+
</script>

‎components/steps/demo/icon.vue‎

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -15,44 +15,47 @@ title:
1515
You can use your own custom icons by setting the property `icon` for `Steps.Step`.
1616
</docs>
1717
<template>
18-
<a-steps>
19-
<a-step status="finish" title="Login">
20-
<template #icon>
21-
<user-outlined />
22-
</template>
23-
</a-step>
24-
<a-step status="finish" title="Verification">
25-
<template #icon>
26-
<solution-outlined />
27-
</template>
28-
</a-step>
29-
<a-step status="process" title="Pay">
30-
<template #icon>
31-
<loading-outlined />
32-
</template>
33-
</a-step>
34-
<a-step status="wait" title="Done">
35-
<template #icon>
36-
<smile-outlined />
37-
</template>
38-
</a-step>
39-
</a-steps>
18+
<a-steps :items="items"></a-steps>
4019
</template>
4120
<script lang="ts">
42-
import { defineComponent } from 'vue';
21+
import { defineComponent, ref, h } from 'vue';
4322
import {
4423
UserOutlined,
4524
SolutionOutlined,
4625
LoadingOutlined,
4726
SmileOutlined,
4827
} from '@ant-design/icons-vue';
28+
import { StepProps } from 'ant-design-vue';
4929
5030
export default defineComponent({
51-
components: {
52-
UserOutlined,
53-
SolutionOutlined,
54-
LoadingOutlined,
55-
SmileOutlined,
31+
setup() {
32+
const current = ref<number>(0);
33+
34+
return {
35+
current,
36+
items: [
37+
{
38+
title: 'Login',
39+
status: 'finish',
40+
icon: h(UserOutlined),
41+
},
42+
{
43+
title: 'Verification',
44+
status: 'finish',
45+
icon: h(SolutionOutlined),
46+
},
47+
{
48+
title: 'Pay',
49+
status: 'process',
50+
icon: h(LoadingOutlined),
51+
},
52+
{
53+
title: 'Done',
54+
status: 'wait',
55+
icon: h(SmileOutlined),
56+
},
57+
] as StepProps[],
58+
};
5659
},
5760
});
5861
</script>

‎components/steps/demo/inline.vue‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -43,15 +43,8 @@ Inline type steps, suitable for displaying the process and current state of the
4343
</template>
4444
<script lang="ts">
4545
import { defineComponent } from 'vue';
46-
import { List, Steps, Avatar } from 'ant-design-vue';
4746
4847
export default defineComponent({
49-
components: {
50-
[List.name]: List,
51-
[Steps.name]: Steps,
52-
[Avatar.name]: Avatar,
53-
},
54-
5548
setup() {
5649
const data = [
5750
{

0 commit comments

Comments
 (0)