- Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathStepper.vue
133 lines (122 loc) · 3.31 KB
/
Stepper.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<template>
<!-- simpleV -->
<divv-if="simpleV"class="row":class="{'mt-5': simpleV}">
<divclass="col-md-12">
<ul:class="simpleClass"class="stepper-linear">
<li
v-for="(step, i) in steps"
:key="i"
class="step"
:class="{'active': i + 1 === activeStep}"
>
<aclass="ripple-parent w-100"@click="changeActiveStep(i + 1)">
<spanclass="circle":class="{'success-color': i + 1 < activeStep}">
<mdb-iconv-if="i + 1 < activeStep"icon="check" />
<spanv-else>{{i+1}}</span>
</span>
<divclass="label">{{step.name || `Step ${i + 1}`}}</div>
</a>
<transition
@before-enter="beforeEnter"
@enter="enter"
@before-leave="beforeLeave"
@leave="leave"
:duration="{ enter: 600, leave: 300 }"
>
<div
class="step-content w-100"
v-if="i + 1 === activeStep"
ref="stepContent"
>{{step.content}}</div>
</transition>
</li>
</ul>
</div>
</div>
<!-- simpleV -->
<!-- simpleH -->
<divv-else-if="simpleH"class="row">
<divclass="col-md-12">
<ul:class="simpleClass">
<li
v-for="(step, i) in steps"
:key="i"
class="horizontal-step step"
:class="{'active': i + 1 === activeStep}"
>
<aclass="ripple-parent w-100"@click="changeActiveStep(i + 1)">
<spanclass="circle":class="{'success-color': i + 1 < activeStep}">
<mdb-iconv-if="i + 1 < activeStep"icon="check" />
<spanv-else>{{i+1}}</span>
</span>
<spanclass="label">{{step.name || `Step ${i + 1}`}}</span>
</a>
<span:style="i+1 === numOfSteps && 'background-color: transparent'"class="simple-line"></span>
</li>
</ul>
<div
v-for="(step, i) in steps"
:key="i"
class="step"
:class="{'active': i + 1 === activeStep}"
style="overflow: hidden;"
>
<transitionenter-active-class="animated slideInLeft">
<divclass="step-content w-100"v-if="i + 1 === activeStep">{{step.content}}</div>
</transition>
</div>
</div>
</div>
<!-- simpleH -->
</template>
<script>
importmdbStepperfrom"../../mixins/mdbStepper";
constStepper= {
props: {
simpleH: {
type:Boolean,
default:true
}
},
methods: {
changeActiveStep(i) {
this.activeStep= i;
}
},
mixins: [mdbStepper]
};
exportdefaultStepper;
export { StepperasmdbStepper };
</script>
<style scoped>
.simple-line {
height: 1px;
width: calc(100%-20px);
background-color: rgba(0, 0, 0, 0.2);
}
.stepper-vertical.stepa:hover {
background-color: rgba(0, 0, 0, 0.06) !important;
}
.horizontal-step:hover {
background-color: initial;
}
.horizontal-stepa:hover {
background-color: rgba(0, 0, 0, 0.06);
}
.stepa {
transition: background-color 0.2slinear;
}
.stepper-vertical.step-content {
height: 0;
overflow: hidden;
transition: all0.5sease-out;
}
.stepper-horizontal.step-content {
max-width: 0px;
overflow: hidden;
transition: all0.5sease-out;
}
.stepper-horizontalli:not(:last-child):after {
display: none;
}
</style>
