Skip to content

Commit 2fd8b24

Browse files
mxdi9i7mxdi9i7
authored
Merge pull request mxdi9i7#34 from mxdi9i7/shanyin/stepper
Shanyin - Stepper Component
2 parents d5a9510 + 20eff1a commit 2fd8b24

File tree

3 files changed

+466
-0
lines changed

3 files changed

+466
-0
lines changed

‎src/components/Stepper/index.scss

+176
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
@import '../../styles/colors.scss';
2+
@import '../../styles/spacing.scss';
3+
@import '../../styles/typography.scss';
4+
@import '../../styles/opacity.scss';
5+
@import '../../styles/variables.scss';
6+
@keyframes donut-spin {
7+
0% {
8+
transform: rotate(0deg);
9+
}
10+
11+
100% {
12+
transform: rotate(360deg);
13+
}
14+
}
15+
16+
$baseClass: 'vant-stepper';
17+
.step-container {
18+
display: flex;
19+
justify-content: center;
20+
align-items: center;
21+
margin: 0px;
22+
padding: 0px;
23+
img {
24+
width: 12px;
25+
height: auto;
26+
}
27+
input {
28+
margin: 0px 2px;
29+
border-radius: 5px;
30+
font-size: 10px;
31+
border: none;
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
text-align: center;
36+
background-color: rgba(128, 128, 128, 0.137);
37+
}
38+
button {
39+
border-radius: 5px;
40+
font-size: 20px;
41+
outline: none;
42+
background-color: rgba(128, 128, 128, 0.137);
43+
border: none;
44+
font-weight: 100;
45+
text-align: center;
46+
display: flex;
47+
justify-content: center;
48+
align-items: center;
49+
padding: 0px;
50+
margin: 0;
51+
position: relative;
52+
}
53+
button:first-child {
54+
::before {
55+
content: '';
56+
position: absolute;
57+
border-top: 1px solid black;
58+
59+
width: 10px;
60+
left: 50%;
61+
top: 50%;
62+
transform: translate(-50%, -50%);
63+
}
64+
}
65+
button:last-child {
66+
::before {
67+
content: '';
68+
position: absolute;
69+
border-top: 1px solid black;
70+
width: 10px;
71+
left: 50%;
72+
top: 50%;
73+
transform: translate(-50%, -50%);
74+
}
75+
::after {
76+
content: '';
77+
position: absolute;
78+
left: 50%;
79+
top: 50%;
80+
transform: translate(-50%, -50%);
81+
height: 10px;
82+
border-left: 1px solid black;
83+
}
84+
}
85+
}
86+
87+
button.#{$baseClass} {
88+
width: 28px;
89+
height: 28px;
90+
text-align: center;
91+
display: flex;
92+
justify-content: center;
93+
align-items: center;
94+
margin: auto;
95+
96+
&__disabled {
97+
cursor: not-allowed;
98+
opacity: $button-disabled-opacity;
99+
}
100+
&__theme {
101+
border-radius: 50%;
102+
outline: none;
103+
width: 22px;
104+
height: 22px;
105+
background-color: red;
106+
border-color: white;
107+
.minus::before {
108+
content: '';
109+
position: absolute;
110+
border-top: 1px solid white;
111+
112+
width: 10px;
113+
left: 50%;
114+
top: 50%;
115+
transform: translate(-50%, -50%);
116+
}
117+
.add::before {
118+
content: '';
119+
position: absolute;
120+
border-top: 1px solid white;
121+
width: 10px;
122+
left: 50%;
123+
top: 50%;
124+
transform: translate(-50%, -50%);
125+
}
126+
.add::after {
127+
content: '';
128+
position: absolute;
129+
left: 50%;
130+
top: 50%;
131+
transform: translate(-50%, -50%);
132+
height: 10px;
133+
border-left: 1px solid white;
134+
}
135+
}
136+
}
137+
input.#{$baseClass} {
138+
width: 32px;
139+
height: 28px;
140+
141+
&__disableInput {
142+
cursor: not-allowed;
143+
opacity: $button-disabled-opacity;
144+
}
145+
&__theme {
146+
border-radius: 50%;
147+
width: 32px;
148+
height: 22px;
149+
background-color: white;
150+
}
151+
}
152+
.load-background {
153+
display: inline-block;
154+
border: 4px solid rgba(0, 0, 0, 0.1);
155+
border-left-color: white;
156+
border-radius: 50%;
157+
width: 28px;
158+
height: 28px;
159+
animation: donut-spin 1.2s linear infinite;
160+
position: relative;
161+
162+
opacity: 0;
163+
}
164+
.load {
165+
width: 85px;
166+
height: 85px;
167+
position: absolute;
168+
top: 30%;
169+
background-color: rgba(0, 0, 0, 0.836);
170+
display: flex;
171+
justify-content: center;
172+
align-items: center;
173+
border-radius: 10px;
174+
margin: auto;
175+
opacity: 0;
176+
}

‎src/components/Stepper/index.stories.tsx

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react';
2+
import Stepper from '.';
3+
import '../../styles/stories.scss';
4+
5+
export default {
6+
title: 'Stepper',
7+
component: Stepper
8+
};
9+
10+
export const BasicStepper = () => (
11+
<div className='container stepper'>
12+
<Stepper />
13+
</div>
14+
);
15+
16+
export const DisableStepper = () => (
17+
<div className='container stepper'>
18+
<Stepper disabled />
19+
</div>
20+
);
21+
22+
export const StepStepper = () => (
23+
<div className='container stepper'>
24+
<Stepper step={2} />
25+
</div>
26+
);
27+
28+
export const RangeStepper = () => (
29+
<div className='container stepper'>
30+
<Stepper min={0} max={8} />
31+
</div>
32+
);
33+
34+
export const SizeStepper = () => (
35+
<div className='container stepper'>
36+
<Stepper size={50} />
37+
</div>
38+
);
39+
40+
export const RoundStepper = () => (
41+
<div className='container stepper'>
42+
<Stepper theme />
43+
</div>
44+
);
45+
46+
export const DisableInputStepper = () => (
47+
<div className='container stepper'>
48+
<Stepper disableInput />
49+
</div>
50+
);
51+
52+
export const AsyncStepper = () => (
53+
<div className='container stepper'>
54+
<Stepper loading />
55+
</div>
56+
);

0 commit comments

Comments
 (0)