Skip to content

Commit fefd6fa

Browse files
xiaoyatongxiaoyatong
committed
fix: button v15 调整
1 parent c3cb26b commit fefd6fa

File tree

11 files changed

+93
-139
lines changed

11 files changed

+93
-139
lines changed

‎src/packages/button/button.scss‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,10 @@
102102
&-round {
103103
border-radius: $button-border-radius;
104104

105-
&-xlarge,
105+
&-xlarge {
106+
border-radius: $button-xlarge-border-radius;
107+
}
108+
106109
&-large {
107110
border-radius: $button-large-border-radius;
108111
}
@@ -178,7 +181,7 @@
178181
padding: $button-large-padding;
179182
font-size: $button-large-font-size;
180183
font-weight: $button-large-font-weight;
181-
border-radius: $radius-base;
184+
border-radius: $radius-s;
182185

183186
.nut-button-text {
184187
margin-left: $button-xlarge-text-icon-margin;
@@ -203,7 +206,7 @@
203206
height: $button-small-height;
204207
padding: $button-small-padding;
205208
font-size: $button-small-font-size;
206-
border-radius: $radius-s;
209+
border-radius: $radius-xs;
207210

208211
.nut-icon {
209212
font-size: $button-small-font-size;
@@ -220,7 +223,7 @@
220223
height: $button-mini-height;
221224
padding: $button-mini-padding;
222225
font-size: $button-mini-font-size;
223-
border-radius: $radius-s;
226+
border-radius: $radius-xs;
224227

225228
.nut-icon {
226229
font-size: $button-mini-font-size;
@@ -246,6 +249,11 @@
246249
background: $button-primary-background-color;
247250
color: $button-primary-color;
248251
border-color: transparent;
252+
font-weight: $font-weight-bold;
253+
&.nut-button-small,
254+
&.nut-button-mini {
255+
font-weight: $font-weight;
256+
}
249257
}
250258

251259
&-disabled,
@@ -283,6 +291,9 @@
283291
}
284292
}
285293
}
294+
&-primary.nut-button-solid.nut-button-normal {
295+
font-weight: $font-weight-bold;
296+
}
286297

287298
&-success {
288299
color: $button-success-color;

‎src/packages/button/demos/h5/demo8.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,9 @@ import { Button } from '@nutui/nutui-react'
33

44
const Demo8 = () => {
55
return (
6-
<>
7-
<Button block type="primary">
8-
Block Button
9-
</Button>
10-
</>
6+
<Button block type="primary">
7+
Block Button
8+
</Button>
119
)
1210
}
1311
export default Demo8

‎src/packages/button/demos/taro/demo10.tsx‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,13 @@
11
import React from 'react'
22
import { Button, Cell } from '@nutui/nutui-react-taro'
3-
import { harmonyAndRn } from '@/utils/platform-taro'
4-
import pxTransform from '@/utils/px-transform'
3+
import { harmony } from '@/utils/platform-taro'
54

65
const App = () => {
7-
const marginStyle = harmonyAndRn()
8-
? {
9-
width: pxTransform(120),
10-
marginRight: pxTransform(8),
11-
marginTop: pxTransform(8),
12-
marginLeft: pxTransform(8),
13-
marginBottom: pxTransform(8),
14-
}
15-
: {
16-
marginRight: 8,
17-
marginTop: 8,
18-
marginLeft: 8,
19-
marginBottom: 8,
20-
}
6+
const marginStyle = {
7+
width: harmony() ? 120 : 'auto',
8+
margin: 8,
9+
}
10+
2111
return (
2212
<Cell style={{ flexWrap: 'wrap' }}>
2313
<Button color="blue" style={marginStyle}>

‎src/packages/button/demos/taro/demo2.tsx‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,10 @@
11
import React from 'react'
22
import { Button, Cell } from '@nutui/nutui-react-taro'
3-
import { harmony } from '@/utils/platform-taro'
4-
import pxTransform from '@/utils/px-transform'
53

64
const Demo2 = () => {
7-
const marginStyle = harmony()
8-
? {
9-
width: pxTransform(90),
10-
marginRight: pxTransform(8),
11-
marginTop: pxTransform(8),
12-
marginLeft: pxTransform(8),
13-
marginBottom: pxTransform(8),
14-
}
15-
: {
16-
marginRight: 8,
17-
marginTop: 8,
18-
marginLeft: 8,
19-
marginBottom: 8,
20-
}
5+
const marginStyle = {
6+
margin: 8,
7+
}
218
return (
229
<Cell style={{ flexWrap: 'wrap' }}>
2310
<Button type="primary" style={marginStyle}>

‎src/packages/button/demos/taro/demo3.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
11
import React from 'react'
22
import { Button, Cell } from '@nutui/nutui-react-taro'
3-
import pxTransform from '@/utils/px-transform'
43

54
const Demo3 = () => {
65
const marginStyle = {
7-
width: pxTransform(80),
8-
marginRight: pxTransform(8),
9-
marginTop: pxTransform(8),
10-
marginLeft: pxTransform(8),
11-
marginBottom: pxTransform(8),
6+
margin: 8,
127
}
138
return (
149
<Cell style={{ flexWrap: 'wrap' }}>

‎src/packages/button/demos/taro/demo4.tsx‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import React from 'react'
22
import { Button, Cell } from '@nutui/nutui-react-taro'
33
import { Plus, Star } from '@nutui/icons-react-taro'
4-
import pxTransform from '@/utils/px-transform'
4+
import { harmony } from '@/utils/platform-taro'
55

66
const Demo4 = () => {
77
const marginStyle = {
8-
marginRight: pxTransform(8),
9-
marginTop: pxTransform(8),
10-
marginLeft: pxTransform(8),
11-
marginBottom: pxTransform(8),
8+
width: harmony() ? 140 : 'auto',
9+
margin: 8,
1210
}
1311
return (
1412
<>
@@ -44,6 +42,7 @@ const Demo4 = () => {
4442
rightIcon={<Star />}
4543
style={{
4644
margin: 8,
45+
width: harmony() ? 140 : 'auto',
4746
backgroundColor: `var(--nutui-color-primary-light-pressed)`,
4847
borderColor: `var(--nutui-color-primary)`,
4948
color: `var(--nutui-color-primary)`,
@@ -58,6 +57,7 @@ const Demo4 = () => {
5857
rightIcon={<Star />}
5958
style={{
6059
margin: 8,
60+
width: harmony() ? 140 : 'auto',
6161
backgroundColor: `var(--nutui-gray-3)`,
6262
color: `var(--nutui-gray-7)`,
6363
}}
@@ -71,6 +71,7 @@ const Demo4 = () => {
7171
rightIcon={<Star />}
7272
style={{
7373
margin: 8,
74+
width: harmony() ? 140 : 'auto',
7475
backgroundColor: `var(--nutui-gray-1)`,
7576
color: `var(--nutui-gray-7)`,
7677
}}
@@ -81,30 +82,34 @@ const Demo4 = () => {
8182
type="default"
8283
icon={<Star />}
8384
rightIcon={<Star />}
84-
style={{
85-
margin: 8,
86-
}}
85+
style={marginStyle}
8786
>
8887
Button
8988
</Button>
9089
<Button
9190
shape="square"
9291
fill="outline"
9392
type="primary"
94-
icon={<Plus />}
95-
style={marginStyle}
93+
icon={<Plus size={10} />}
94+
style={{
95+
margin: 8,
96+
}}
9697
/>
9798
<Button
9899
fill="outline"
99100
type="primary"
100-
icon={<Plus />}
101-
style={marginStyle}
101+
icon={<Plus size={10} />}
102+
style={{
103+
margin: 8,
104+
}}
102105
/>
103106
<Button
104107
type="primary"
105108
fill="dashed"
106-
icon={<Plus />}
107-
style={marginStyle}
109+
icon={<Plus size={10} />}
110+
style={{
111+
margin: 8,
112+
}}
108113
/>
109114
<Button
110115
shape="round"

‎src/packages/button/demos/taro/demo5.tsx‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import React from 'react'
22
import { Button, Cell } from '@nutui/nutui-react-taro'
33
import { Plus, Star } from '@nutui/icons-react-taro'
4-
import pxTransform from '@/utils/px-transform'
4+
import { harmony } from '@/utils/platform-taro'
55

66
const Demo5 = () => {
77
const marginStyle = {
8-
marginRight: pxTransform(8),
9-
marginTop: pxTransform(8),
10-
marginLeft: pxTransform(8),
11-
marginBottom: pxTransform(8),
8+
width: harmony() ? 140 : 'auto',
9+
margin: 8,
1210
}
1311
return (
1412
<>
@@ -59,6 +57,7 @@ const Demo5 = () => {
5957
rightIcon={<Star />}
6058
style={{
6159
margin: 8,
60+
width: harmony() ? 140 : 'auto',
6261
backgroundColor: `var(--nutui-gray-3)`,
6362
color: `var(--nutui-gray-5)`,
6463
}}
@@ -73,6 +72,7 @@ const Demo5 = () => {
7372
rightIcon={<Star />}
7473
style={{
7574
margin: 8,
75+
width: harmony() ? 140 : 'auto',
7676
backgroundColor: `var(--nutui-gray-1)`,
7777
color: `var(--nutui-gray-5)`,
7878
}}
@@ -83,9 +83,7 @@ const Demo5 = () => {
8383
disabled
8484
icon={<Star />}
8585
rightIcon={<Star />}
86-
style={{
87-
margin: 8,
88-
}}
86+
style={marginStyle}
8987
>
9088
Disabled
9189
</Button>
@@ -94,21 +92,27 @@ const Demo5 = () => {
9492
shape="square"
9593
fill="outline"
9694
type="primary"
97-
icon={<Plus size="20" />}
98-
style={marginStyle}
95+
icon={<Plus size={10} />}
96+
style={{
97+
margin: 8,
98+
}}
9999
/>
100100
<Button
101101
disabled
102102
type="primary"
103-
icon={<Plus size="20" />}
104-
style={marginStyle}
103+
icon={<Plus size={10} />}
104+
style={{
105+
margin: 8,
106+
}}
105107
/>
106108
<Button
107109
disabled
108110
type="primary"
109111
fill="dashed"
110-
icon={<Plus />}
111-
style={marginStyle}
112+
icon={<Plus size={10} />}
113+
style={{
114+
margin: 8,
115+
}}
112116
/>
113117
<Button
114118
disabled

‎src/packages/button/demos/taro/demo6.tsx‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,12 @@
11
import React from 'react'
22
import { Button, Cell } from '@nutui/nutui-react-taro'
3-
import { harmonyAndRn, rn } from '@/utils/platform-taro'
4-
import pxTransform from '@/utils/px-transform'
3+
import { harmony } from '@/utils/platform-taro'
54

65
const Demo6 = () => {
7-
const marginStyle = harmonyAndRn()
8-
? {
9-
width: pxTransform(rn() ? 120 : 150),
10-
marginRight: pxTransform(8),
11-
marginTop: pxTransform(8),
12-
marginLeft: pxTransform(8),
13-
marginBottom: pxTransform(8),
14-
}
15-
: {
16-
marginRight: 8,
17-
marginTop: 8,
18-
marginLeft: 8,
19-
marginBottom: 8,
20-
}
6+
const marginStyle = {
7+
width: harmony() ? 120 : 'auto',
8+
margin: 8,
9+
}
2110
return (
2211
<Cell style={{ flexWrap: 'wrap' }}>
2312
<Button shape="square" type="primary" style={marginStyle}>

‎src/packages/button/demos/taro/demo7.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
import React, { useState } from 'react'
22
import { Button, Cell } from '@nutui/nutui-react-taro'
3-
import { rn } from '@/utils/platform-taro'
4-
import pxTransform from '@/utils/px-transform'
3+
import { harmony } from '@/utils/platform-taro'
54

65
const Demo7 = () => {
76
const [loading, setLoading] = useState(false)
87
const marginStyle = {
9-
width: pxTransform(rn() ? 90 : 120),
10-
marginRight: pxTransform(8),
11-
marginTop: pxTransform(8),
12-
marginLeft: pxTransform(8),
13-
marginBottom: pxTransform(8),
8+
width: harmony() ? 120 : 'auto',
9+
margin: 8,
1410
}
1511
return (
1612
<Cell style={{ flexWrap: 'wrap' }}>

0 commit comments

Comments
 (0)