Skip to content

Commit b193f63

Browse files
author
hy
committed
fix(Progress) 优化Progress组件文档展示
1 parent 4b3651e commit b193f63

File tree

2 files changed

+38
-39
lines changed

2 files changed

+38
-39
lines changed

‎example/examples/src/routes/Progress/index.tsx‎

Lines changed: 34 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import React, { useState, useEffect } from 'react';
2-
import { View, Text } from 'react-native';
3-
import { Progress, Spacing, Button, Toast } from '@uiw/react-native';
4-
import Layout, { Container } from '../../Layout';
1+
import React, {useState, useEffect} from 'react';
2+
import {View, Text} from 'react-native';
3+
import {Progress, Spacing, Button, Toast} from '@uiw/react-native';
4+
import Layout, {Container} from '../../Layout';
55

6-
const { Header, Body, Card } = Layout;
6+
const {Header, Body, Card} = Layout;
77

88
const ProgressDemo = (props: any) => {
9-
const { route } = props;
9+
const {route} = props;
1010
const description = route.params.description;
1111
const title = route.params.title;
1212

@@ -17,84 +17,79 @@ const ProgressDemo = (props: any) => {
1717
if (val < 100) {
1818
setValue(val + 5);
1919
} else {
20-
Toast.info('宝，别点了，要溢出了')
20+
Toast.info('宝，别点了，要溢出了');
2121
}
2222
};
2323

2424
return (
2525
<Container>
2626
<Header title={title} description={description} />
27-
<Body style={{ paddingLeft: 16, paddingRight: 16 }}>
27+
<Body style={{paddingLeft: 16, paddingRight: 16}}>
2828
<Card title="基础实例">
29-
<Progress type='circle' value={60} />
29+
<Progress type="circle" value={60} />
3030
<Spacing />
31-
<Progress type='line' value={60} />
31+
<Progress type="line" value={60} />
3232
</Card>
3333
<Card title="自定义值">
34-
<Progress type='circle' value={val} />
34+
<Progress type="circle" value={val} />
3535
<Spacing />
36-
<Progress type='line' value={val} />
36+
<Progress type="line" value={val} />
3737
<Spacing />
38-
<Button onPress={() => onPress()} >你点我呀！</Button>
38+
<Button onPress={() => onPress()}>你点我呀！</Button>
3939
</Card>
4040
<Card title="自定义渐变色">
41-
<Progress type='circle' color={['#FFD080', 'red']} value={80} />
41+
<Progress type="circle" color={['#FFD080', 'red']} value={80} />
4242
<Spacing />
43-
<Progress type='line' color={['red', '#FFD080',]} value={80} />
43+
<Progress type="line" color={['red', '#FFD080']} value={80} />
4444
</Card>
4545
<Card title="设置大小">
46-
<Progress type='circle' width={60} left='6.5%' value={10} />
46+
<Progress type="circle" width={60} left="6.5%" value={10} />
4747
<Spacing />
48-
<Progress type='circle' width={80} left='8.5%' value={20} />
48+
<Progress type="circle" width={80} left="8.5%" value={20} />
4949
<Spacing />
50-
<Progress type='line' width={60} value={40} />
50+
<Progress type="line" width={60} value={40} />
5151
<Spacing />
52-
<Progress type='line' width={80} value={60} />
52+
<Progress type="line" width={80} value={60} />
5353
</Card>
5454
<Card title="是否显示单位">
55-
<Progress type='circle' showUnit={false} left='13%' value={20} />
55+
<Progress type="circle" showUnit={false} left="13%" value={20} />
5656
<Spacing />
57-
<Progress type='line' showUnit={false} value={40} />
57+
<Progress type="line" showUnit={false} value={40} />
5858
</Card>
5959
<Card title="自定义单色">
60-
<Progress type='circle' color='#FFD080' value={50} />
60+
<Progress type="circle" color="#FFD080" value={50} />
6161
<Spacing />
62-
<Progress type='line' color='#FFD080' value={60} />
62+
<Progress type="line" color="#FFD080" value={60} />
6363
</Card>
6464
<Card title="自定义背景色">
65-
<Progress type='circle' bgColor="#FFD080" value={5} />
65+
<Progress type="circle" bgColor="#FFD080" value={5} />
6666
<Spacing />
67-
<Progress type='line' bgColor='#FFD080' value={70} />
67+
<Progress type="line" bgColor="#FFD080" value={70} />
6868
</Card>
6969
<Card title="设置外环宽度">
70-
<Progress type='circle' value={5} strokeWidth={25} />
70+
<Progress type="circle" value={5} strokeWidth={25} />
7171
<Spacing />
72-
<Progress type='line' value={70} strokeWidth={15} />
72+
<Progress type="line" value={70} strokeWidth={15} />
7373
</Card>
7474

7575
<Card title="是否显示文本">
76-
<Progress type='circle' value={68} showLabel={false} />
76+
<Progress type="circle" value={68} showLabel={false} />
7777
<Spacing />
78-
<Progress type='line' value={70} showLabel={false} />
78+
<Progress type="line" value={70} showLabel={false} />
7979
</Card>
8080
<Card title="自定义标签">
81-
<Progress type='circle' value={53} label={<Text>饕餮</Text>} />
81+
<Progress type="circle" value={53} label={<Text>饕餮</Text>} />
8282
<Spacing />
83-
<Progress type='line' value={30} label={<Text>饕餮</Text>} />
84-
</Card>
85-
<Card title="设置外环宽度">
86-
<Progress type='circle' value={5} strokeWidth={25} />
87-
<Spacing />
88-
<Progress type='line' value={70} strokeWidth={15} />
83+
<Progress type="line" value={30} label={<Text>饕餮</Text>} />
8984
</Card>
9085
<Card title="自定义文本位置">
91-
<Progress type='circle' value={5} top="50%" left='50%' />
86+
<Progress type="circle" value={5} top="50%" left="50%" />
9287
<Spacing />
93-
<Progress type='line' value={70} top="-20%" left='50%' />
88+
<Progress type="line" value={70} top="-20%" left="50%" />
9489
</Card>
9590
<Spacing />
9691
</Body>
97-
</Container >
92+
</Container>
9893
);
9994
};
10095

‎packages/core/src/Progress/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ function Demo() {
2424
}
2525
export default Demo
2626
```
27+
<img src="https://s1.ax1x.com/2023/04/19/p9FcJvd.png" style="width:300px;height:620px"/>
2728

2829
### 自定义颜色
2930

@@ -42,6 +43,8 @@ function Demo() {
4243
}
4344
export default Demo
4445
```
46+
<img src="https://s1.ax1x.com/2023/04/19/p9Fc88e.png" style="width:300px;height:620px"/>
47+
4548
### 自定义百分比,展示进度
4649

4750
<!--DemoStart-->
@@ -60,6 +63,7 @@ function Demo() {
6063
}
6164
export default Demo
6265
```
66+
<img src="https://s1.ax1x.com/2023/04/19/p9FcGgH.png" style="width:300px;height:620px"/>
6367

6468
### Props
6569

0 commit comments

Comments
 (0)