Skip to content

Commit d080634

Browse files
mxdi9i7mxdi9i7
authored
Merge pull request mxdi9i7#26 from mxdi9i7/peterz/field
Field Component
2 parents 64b256f + 17a500b commit d080634

File tree

15 files changed

+776
-32
lines changed

15 files changed

+776
-32
lines changed

‎src/components/Button/index.scss

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,11 +132,39 @@ a.#{$baseClass} {
132132
opacity: $button-disabled-opacity;
133133
}
134134

135+
&__large {
136+
height: 50px;
137+
font-size: 16px;
138+
}
139+
140+
&__small {
141+
height: 30px;
142+
font-size: 12px;
143+
font-weight: 300;
144+
padding: 0 $space-md;
145+
}
146+
147+
&__mini {
148+
height: 22px;
149+
font-size: 10px;
150+
padding: 0 $space-sm;
151+
}
152+
135153
img {
136154
height: $loader-size;
137155
width: $loader-size;
138156
object-fit: cover;
139157
object-position: 50% 50%;
140158
margin-right: 5px;
141159
}
160+
161+
.vant-icon__container {
162+
margin-right: 5px;
163+
}
164+
165+
&__onlyIcon {
166+
.vant-icon__container {
167+
margin-right: 0px;
168+
}
169+
}
142170
}

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

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default {
88
};
99

1010
export const ButtonTypes = () => (
11-
<div className='container'>
11+
<div className='container button'>
1212
<Button type='default'>Default Button</Button>
1313
<Button type='primary'>Primary Button</Button>
1414
<Button type='info'>Info Button</Button>
@@ -18,7 +18,7 @@ export const ButtonTypes = () => (
1818
);
1919

2020
export const PlainButtons = () => (
21-
<div className='container'>
21+
<div className='container button'>
2222
<Button type='danger' plain>
2323
Danger Button
2424
</Button>
@@ -29,7 +29,7 @@ export const PlainButtons = () => (
2929
);
3030

3131
export const HairlineButtons = () => (
32-
<div className='container'>
32+
<div className='container button'>
3333
<Button type='danger' hairline>
3434
Danger Button
3535
</Button>
@@ -40,7 +40,7 @@ export const HairlineButtons = () => (
4040
);
4141

4242
export const DisabledButtons = () => (
43-
<div className='container'>
43+
<div className='container button'>
4444
<Button type='danger' disabled>
4545
Disabled Button
4646
</Button>
@@ -51,7 +51,7 @@ export const DisabledButtons = () => (
5151
);
5252

5353
export const LoadingButtons = () => (
54-
<div className='container'>
54+
<div className='container button'>
5555
<Button type='danger' loading>
5656
Loading Default
5757
</Button>
@@ -68,7 +68,7 @@ export const LoadingButtons = () => (
6868
);
6969

7070
export const ButtonShapes = () => (
71-
<div className='container'>
71+
<div className='container button'>
7272
<Button type='info' round>
7373
Info Button
7474
</Button>
@@ -78,8 +78,22 @@ export const ButtonShapes = () => (
7878
</div>
7979
);
8080

81+
export const ButtonSize = () => (
82+
<div className='container button'>
83+
<Button type='info' size='large'>
84+
Info Button
85+
</Button>
86+
<Button type='info' size='small'>
87+
Info Button
88+
</Button>
89+
<Button type='warning' size='mini'>
90+
Warning Button
91+
</Button>
92+
</div>
93+
);
94+
8195
export const ButtonColor = () => (
82-
<div className='container'>
96+
<div className='container button'>
8397
<Button color='FFECB3'>Info Button</Button>
8498
<Button color='00796B' fontColor='#999'>
8599
Warning Button
@@ -91,29 +105,29 @@ export const ButtonColor = () => (
91105
);
92106

93107
export const ButtonTags = () => (
94-
<div className='container'>
108+
<div className='container button'>
95109
<Button tag='a'>A Tag</Button>
96110
<Button tag='button'>Button Tag</Button>
97111
</div>
98112
);
99113

100114
export const ButtonNativeTypes = () => (
101-
<div className='container'>
115+
<div className='container button'>
102116
<Button nativeType='button'>Button Type</Button>
103117
<Button nativeType='reset'>Reset Type</Button>
104118
<Button nativeType='submit'>Submit Type</Button>
105119
</div>
106120
);
107121

108122
export const BlockButtons = () => (
109-
<div className='container column'>
123+
<div className='container column button'>
110124
<Button>Non Block Button</Button>
111125
<Button block>Block Button</Button>
112126
</div>
113127
);
114128

115129
export const IconButton = () => (
116-
<div className='container'>
130+
<div className='container button'>
117131
<Button icon='star-o' type='primary' />
118132
<Button icon='star-o' type='info'>
119133
Custom Icon Button
@@ -125,7 +139,7 @@ export const IconButton = () => (
125139
);
126140

127141
export const ButtonURL = () => (
128-
<div className='container column'>
142+
<div className='container column button'>
129143
<Button tag='a' url='https://github.com/mxdi9i7/vant-react'>
130144
Button with URL
131145
</Button>
@@ -139,7 +153,7 @@ export const ButtonURL = () => (
139153
);
140154

141155
export const ButtonAction = () => (
142-
<div className='container column'>
156+
<div className='container column button'>
143157
<Button click={(e) => alert(e.target)}>Handle Click</Button>
144158
<Button touchstart={(e) => alert(e.target)}>Handle Touchstart</Button>
145159
<Button click={(e) => alert(e.target)} type='primary' disabled>

‎src/components/Button/index.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ export default function Button({
3232
click,
3333
touchstart,
3434
icon,
35-
hairline
35+
hairline,
36+
size = 'normal'
3637
}: Props) {
3738
const CustomTag = tag || 'button';
3839
const props = {
@@ -44,7 +45,9 @@ export default function Button({
4445
{ round },
4546
{ square },
4647
{ block },
47-
{ hairline }
48+
{ hairline },
49+
{ [size]: size },
50+
{ onlyIcon: !text && !children }
4851
]),
4952
style: {}
5053
};

‎src/components/Button/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export interface Props {
55
children?: string;
66
loadingText?: string;
77
loadingSize?: string;
8+
size?: 'large' | 'small' | 'mini' | 'normal';
89
icon?: string;
910
hairline?: boolean;
1011
url?: string;

‎src/components/Field/index.scss

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
@import '../../styles/colors.scss';
2+
@import '../../styles/spacing.scss';
3+
@import '../../styles/variables.scss';
4+
@import '../../styles/typography.scss';
5+
6+
$baseClass: 'vant-field';
7+
8+
.#{$baseClass} {
9+
@include field-label;
10+
width: 100%;
11+
background-color: $default;
12+
padding: 10px $space-lg;
13+
display: flex;
14+
overflow: hidden;
15+
position: relative;
16+
17+
.#{$baseClass}__label {
18+
display: flex;
19+
align-items: center;
20+
width: 90px;
21+
22+
.vant-icon__container {
23+
margin-right: 5px;
24+
}
25+
}
26+
27+
.#{$baseClass}__input {
28+
width: 100%;
29+
display: flex;
30+
flex-direction: column;
31+
overflow: visible;
32+
color: $grey;
33+
word-wrap: break-word;
34+
vertical-align: middle;
35+
position: relative;
36+
37+
.#{$baseClass}__field {
38+
display: flex;
39+
width: inherit;
40+
}
41+
42+
.vant-icon__container {
43+
padding: 0 5px;
44+
}
45+
46+
button {
47+
position: absolute;
48+
right: 0;
49+
top: 50%;
50+
transform: translateY(-50%);
51+
}
52+
}
53+
54+
.#{$baseClass}__error {
55+
color: $danger;
56+
font-size: 12px;
57+
text-align: left;
58+
}
59+
60+
.#{$baseClass}__word-limit {
61+
margin-top: $space-sm;
62+
font-size: 12px;
63+
color: $word-limit;
64+
line-height: 16px;
65+
text-align: right;
66+
}
67+
68+
input {
69+
@include field-label;
70+
width: inherit;
71+
outline: none;
72+
display: block;
73+
text-align: left;
74+
line-height: inherit;
75+
border: 0;
76+
resize: none;
77+
78+
&::placeholder {
79+
color: $placeholder;
80+
}
81+
}
82+
83+
&__disabled {
84+
input {
85+
color: $grey;
86+
}
87+
}
88+
89+
&__error,
90+
&__showWordLimit {
91+
.full {
92+
color: $danger;
93+
}
94+
95+
.#{$baseClass}__label {
96+
align-items: flex-start;
97+
}
98+
}
99+
100+
&__input-center {
101+
input {
102+
text-align: center;
103+
}
104+
}
105+
&__input-right {
106+
input {
107+
text-align: right;
108+
}
109+
}
110+
111+
&__label-center {
112+
.#{$baseClass}__label {
113+
justify-content: center;
114+
}
115+
}
116+
&__label-right {
117+
.#{$baseClass}__label {
118+
justify-content: flex-end;
119+
}
120+
}
121+
122+
&__error-right {
123+
.#{$baseClass}__error {
124+
text-align: right;
125+
}
126+
}
127+
&__error-center {
128+
.#{$baseClass}__error {
129+
text-align: center;
130+
}
131+
}
132+
133+
&__required {
134+
.#{$baseClass}__label {
135+
label {
136+
&::before {
137+
position: absolute;
138+
left: $space-md;
139+
color: $danger;
140+
font-size: 14px;
141+
content: '*';
142+
}
143+
}
144+
}
145+
}
146+
147+
&__border {
148+
&:not(:last-child)::after {
149+
position: absolute;
150+
box-sizing: border-box;
151+
content: ' ';
152+
pointer-events: none;
153+
right: 0;
154+
bottom: 0;
155+
left: $space-lg;
156+
border-bottom: 1px solid $grey-text;
157+
transform: scaleY(0.5);
158+
}
159+
}
160+
}

0 commit comments

Comments
 (0)