Skip to content

Commit 00cb18a

Browse files
Miles-hxyMiles-hxy
committed
feat: v15
1 parent 81d06a3 commit 00cb18a

10 files changed

Lines changed: 57 additions & 110 deletions

File tree

‎src/packages/progress/demos/h5/demo4.tsx‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,22 @@ import { Progress, Image, Cell } from '@nutui/nutui-react'
33

44
const Demo4 = () => {
55
return (
6-
<Cell>
7-
<Progress percent={60} showText>
8-
<Image
9-
width="20"
10-
height="20"
11-
src="https://img12.360buyimg.com/imagetools/jfs/t1/229362/18/22746/11607/669f8bfeF5fcbeaab/d4162bbf29bb1b00.png"
12-
/>
13-
</Progress>
14-
</Cell>
6+
<>
7+
<Cell>
8+
<Progress percent={50} showText>
9+
已完成15/30
10+
</Progress>
11+
</Cell>
12+
<Cell>
13+
<Progress percent={60} showText>
14+
<Image
15+
width="20"
16+
height="20"
17+
src="https://img12.360buyimg.com/imagetools/jfs/t1/229362/18/22746/11607/669f8bfeF5fcbeaab/d4162bbf29bb1b00.png"
18+
/>
19+
</Progress>
20+
</Cell>
21+
</>
1522
)
1623
}
1724
export default Demo4

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

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,22 @@ import { Progress, Image, Cell } from '@nutui/nutui-react-taro'
33

44
const Demo4 = () => {
55
return (
6-
<Cell>
7-
<Progress percent={60} showText>
8-
<Image
9-
width={20}
10-
height={20}
11-
src="https://img12.360buyimg.com/imagetools/jfs/t1/229362/18/22746/11607/669f8bfeF5fcbeaab/d4162bbf29bb1b00.png"
12-
/>
13-
</Progress>
14-
</Cell>
6+
<>
7+
<Cell>
8+
<Progress percent={50} showText>
9+
已完成15/30
10+
</Progress>
11+
</Cell>
12+
<Cell>
13+
<Progress percent={60} showText>
14+
<Image
15+
width={20}
16+
height={20}
17+
src="https://img12.360buyimg.com/imagetools/jfs/t1/229362/18/22746/11607/669f8bfeF5fcbeaab/d4162bbf29bb1b00.png"
18+
/>
19+
</Progress>
20+
</Cell>
21+
</>
1522
)
1623
}
1724
export default Demo4

‎src/packages/progress/doc.en-US.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,9 +107,9 @@ The component provides the following CSS variables, which can be used to customi
107107
| \--nutui-progress-border-radius | borderRadius | `12px` |
108108
| \--nutui-progress-color | progress color | `linear-gradient(135deg, #FF0F23 0%, #fa6419 100%)` |
109109
| \--nutui-progress-background | progress background | `#f3f3f3` |
110-
| \--nutui-progress-text-color | text color | `$color-primary-text` |
110+
| \--nutui-progress-text-color | text color | `$color-text-help` |
111111
| \--nutui-progress-text-padding | text padding | `0 5px` |
112-
| \--nutui-progress-text-font-size | text fontSize | `9px` |
112+
| \--nutui-progress-text-font-size | text fontSize | `13px` |
113113
| \--nutui-progress-text-position-top | text top | `-4px` |
114114
| \--nutui-progress-text-position-bottom | text bottom | `-4px` |
115115
| \--nutui-progress-text-border-radius | text borderRadius | `5px` |

‎src/packages/progress/doc.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,9 +107,9 @@ import { Progress } from '@nutui/nutui-react'
107107
| \--nutui-progress-border-radius | 进度条边框圆角 | `12px` |
108108
| \--nutui-progress-color | 进度条颜色 | `linear-gradient(135deg, #FF0F23 0%, #fa6419 100%)` |
109109
| \--nutui-progress-background | 进度条背景色 | `#f3f3f3` |
110-
| \--nutui-progress-text-color | 文本颜色 | `$color-primary-text` |
110+
| \--nutui-progress-text-color | 文本颜色 | `$color-text-help` |
111111
| \--nutui-progress-text-padding | 文本内边距 | `0 5px` |
112-
| \--nutui-progress-text-font-size | 文本字体大小 | `9px` |
112+
| \--nutui-progress-text-font-size | 文本字体大小 | `13px` |
113113
| \--nutui-progress-text-position-top | 文本定位 top | `-4px` |
114114
| \--nutui-progress-text-position-bottom | 文本定位 bottom | `-4px` |
115115
| \--nutui-progress-text-border-radius | 文本边框圆角 | `5px` |

‎src/packages/progress/doc.taro.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,9 +107,9 @@ import { Progress } from '@nutui/nutui-react-taro'
107107
| \--nutui-progress-border-radius | 进度条边框圆角 | `12px` |
108108
| \--nutui-progress-color | 进度条颜色 | `linear-gradient(135deg, #FF0F23 0%, #fa6419 100%)` |
109109
| \--nutui-progress-background | 进度条背景色 | `#f3f3f3` |
110-
| \--nutui-progress-text-color | 文本颜色 | `$color-primary-text` |
110+
| \--nutui-progress-text-color | 文本颜色 | `$color-text-help` |
111111
| \--nutui-progress-text-padding | 文本内边距 | `0 5px` |
112-
| \--nutui-progress-text-font-size | 文本字体大小 | `9px` |
112+
| \--nutui-progress-text-font-size | 文本字体大小 | `13px` |
113113
| \--nutui-progress-text-position-top | 文本定位 top | `-4px` |
114114
| \--nutui-progress-text-position-bottom | 文本定位 bottom | `-4px` |
115115
| \--nutui-progress-text-border-radius | 文本边框圆角 | `5px` |

‎src/packages/progress/doc.zh-TW.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,9 +107,9 @@ import { Progress } from '@nutui/nutui-react'
107107
| \--nutui-progress-border-radius | 進度條邊框圓角 | `12px` |
108108
| \--nutui-progress-color | 進度條顏色 | `linear-gradient(135deg, #FF0F23 0%, #fa6419 100%)` |
109109
| \--nutui-progress-background | 進度條背景色 | `#f3f3f3` |
110-
| \--nutui-progress-text-color | 文本顏色 | `$color-primary-text` |
110+
| \--nutui-progress-text-color | 文本顏色 | `$color-text-help` |
111111
| \--nutui-progress-text-padding | 文本內邊距 | `0 5px` |
112-
| \--nutui-progress-text-font-size | 文本字體大小 | `9px` |
112+
| \--nutui-progress-text-font-size | 文本字體大小 | `13px` |
113113
| \--nutui-progress-text-position-top | 文本定位 top | `-4px` |
114114
| \--nutui-progress-text-position-bottom | 文本定位 bottom | `-4px` |
115115
| \--nutui-progress-text-border-radius | 文本邊框圓角 | `5px` |

‎src/packages/progress/progress.scss‎

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,10 @@
55
width: 100%;
66

77
&-outer {
8-
flex: auto;
8+
flex: 1;
99
border-radius: $progress-border-radius;
1010
height: $progress-height;
1111
background: $progress-background;
12-
1312
.nut-progress-active:before {
1413
content: '';
1514
position: absolute;
@@ -35,26 +34,11 @@
3534
&-text {
3635
display: flex;
3736
align-items: center;
38-
position: absolute;
39-
top: $progress-text-position-top;
40-
bottom: $progress-text-position-bottom;
4137
transition: all 0.4s;
42-
transform: translate(-50%);
43-
44-
&-inner {
45-
display: flex;
46-
flex-direction: row;
47-
justify-content: center;
48-
align-items: center;
49-
height: 100%;
50-
width: 100%;
51-
color: $progress-text-color;
52-
padding: $progress-text-padding;
53-
border-radius: $progress-text-border-radius;
54-
font-size: $progress-text-font-size;
55-
line-height: 1;
56-
background: $progress-text-background;
57-
}
38+
margin-left: 12px;
39+
color: $color-text-help;
40+
font-family: PingFang SC;
41+
font-size: $progress-text-font-size;
5842
}
5943

6044
@keyframes progressActive {

‎src/packages/progress/progress.taro.tsx‎

Lines changed: 6 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -230,44 +230,13 @@ export const Progress: FunctionComponent<
230230
className={classesInner}
231231
style={{ ...stylesInner, position: 'relative' }}
232232
onTransitionEnd={onActiveEnd}
233-
>
234-
{effectiveShowText && (
235-
<View
236-
style={{
237-
position: 'relative',
238-
[rtl ? 'left' : 'right']: computeRight(),
239-
}}
240-
>
241-
<View
242-
className={`${classPrefix}-text`}
243-
style={{
244-
...getTextStyle(),
245-
height:
246-
// eslint-disable-next-line no-nested-ternary
247-
harmony()
248-
? pxTransform(strokeWidth ? Number(strokeWidth) + 8 : 18)
249-
: strokeWidth
250-
? Number(strokeWidth) + 8
251-
: 18,
252-
position: 'absolute',
253-
top: -(strokeWidth
254-
? (Number(strokeWidth) + 8 - 9) / 2 + 5
255-
: 9),
256-
}}
257-
>
258-
{children || (
259-
<View
260-
className={`${classPrefix}-text-inner`}
261-
style={computeInnerStyle()}
262-
>
263-
{`${percent}%`}
264-
</View>
265-
)}
266-
</View>
267-
</View>
268-
)}
269-
</View>
233+
/>
270234
</View>
235+
{effectiveShowText && (
236+
<View className={`${classPrefix}-text`}>
237+
{children || `${percent}%`}
238+
</View>
239+
)}
271240
</View>
272241
)
273242
}

‎src/packages/progress/progress.tsx‎

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -145,31 +145,11 @@ export const Progress: FunctionComponent<
145145
onTransitionEnd={() => {
146146
onActiveEnd?.()
147147
}}
148-
>
149-
{showText && (
150-
<div
151-
className={`${classPrefix}-text`}
152-
style={
153-
rtl
154-
? { right: `${displayPercent}%` }
155-
: { left: `${displayPercent}%` }
156-
}
157-
>
158-
{children || (
159-
<div
160-
className={`${classPrefix}-text-inner`}
161-
style={{
162-
background: color,
163-
fontSize: fontSize && parseInt(fontSize.toString()),
164-
}}
165-
>
166-
{percent}%
167-
</div>
168-
)}
169-
</div>
170-
)}
171-
</div>
148+
/>
172149
</div>
150+
{showText && (
151+
<div className={`${classPrefix}-text`}>{children || `${percent}%`}</div>
152+
)}
173153
</div>
174154
)
175155
}

‎src/styles/variables.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1665,14 +1665,14 @@ $progress-background: var(
16651665
$progress-border-radius: var(--nutui-progress-border-radius, 12px) !default;
16661666
$progress-text-color: var(
16671667
--nutui-progress-text-color,
1668-
$color-primary-text
1668+
$color-text-help
16691669
) !default;
16701670
$progress-text-background: var(
16711671
--nutui-progress-text-background,
16721672
$color-primary-gradient-1
16731673
) !default;
16741674
$progress-text-padding: var(--nutui-progress-text-padding, 0 5px) !default;
1675-
$progress-text-font-size: var(--nutui-progress-text-font-size, 9px) !default;
1675+
$progress-text-font-size: var(--nutui-progress-text-font-size, 13px) !default;
16761676
$progress-text-position-top: var(
16771677
--nutui-progress-text-position-top,
16781678
-4px

0 commit comments

Comments
 (0)