25
25
mode =" out-in"
26
26
>
27
27
<keep-alive >
28
- <component :is =" steps[currentStep.index].component" :clickedNext =" nextButton[currentStep.name]" @can-continue =" proceed" ></component >
28
+ <component :is =" steps[currentStep.index].component" :clickedNext =" nextButton[currentStep.name]"
29
+ @can-continue =" proceed" ></component >
29
30
</keep-alive >
30
31
</transition >
31
32
</div >
111
112
}
112
113
},
113
114
activateStep (index , back = false ) {
114
- if (this .steps [index]) {
115
+ if (this .steps [index]) {
115
116
this .previousStep = this .currentStep ;
116
117
this .currentStep = {
117
118
name: this .steps [index].name ,
118
119
index: index
119
120
};
120
121
121
- if (index + 1 === this .steps .length ) {
122
+ if (index + 1 === this .steps .length ) {
122
123
this .finalStep = true ;
123
124
} else {
124
125
this .finalStep = false ;
125
126
}
126
127
127
- if (! back) {
128
+ if (! back) {
128
129
this .$emit (' completed-step' , this .previousStep );
129
130
}
130
131
}
131
132
this .$emit (' active-step' , this .currentStep );
132
133
},
133
134
nextStep () {
134
135
if (this .canContinue ) {
135
- if (this .finalStep ) {
136
+ if (this .finalStep ) {
136
137
this .$emit (' stepper-finished' , this .currentStep );
137
138
}
138
139
let currentIndex = this .currentStep .index + 1 ;
156
157
created () {
157
158
// Initiate stepper
158
159
this .activateStep (0 );
159
- this .steps .forEach ( (step )=> {
160
+ this .steps .forEach ((step ) => {
160
161
this .nextButton [step .name ] = false ;
161
162
});
162
163
}
163
164
}
164
165
</script >
165
166
166
- <style src="./HorizontalStepper.scss " scoped lang="scss"></style >
167
+ <style src="./HorizontalStepper.scss " scoped lang="scss"></style >
168
+ <style scoped>
169
+ /* fallback */
170
+ @font-face {
171
+ font-family : ' Material Icons' ;
172
+ font-style : normal ;
173
+ font-weight : 400 ;
174
+ src : local (' Material Icons' ), local (' MaterialIcons-Regular' ), url (https://fonts.gstatic.com/s/materialicons/v17/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2 ) format (' woff2' );
175
+ }
176
+
177
+ .material-icons {
178
+ font-family : ' Material Icons' ;
179
+ font-weight : normal ;
180
+ font-style : normal ;
181
+ font-size : 24px ;
182
+ line-height : 1 ;
183
+ letter-spacing : normal ;
184
+ text-transform : none ;
185
+ display : inline-block ;
186
+ white-space : nowrap ;
187
+ word-wrap : normal ;
188
+ direction : ltr ;
189
+ -webkit-font-feature-settings : ' liga' ;
190
+ -webkit-font-smoothing : antialiased ;
191
+ }
192
+ </style >
0 commit comments