Skip to content

Commit 6e2c8d8

Browse files
author
hy
committed
docs: 增加组件示例和优化组件功能展示
1 parent 5e173ab commit 6e2c8d8

File tree

14 files changed

+508
-28
lines changed

14 files changed

+508
-28
lines changed

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

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const uri = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAMAAAC7m5rvA
1515

1616
function Demo() {
1717
return (
18-
<View style={{ flexDirection: 'row' }}>
18+
<View style={{ flexDirection: 'row',justifyContent:'space-around' }}>
1919
<Avatar src="https://avatars.githubusercontent.com/u/24369183?v=4" />
2020
<Avatar src={uri} />
2121
</View>
@@ -26,6 +26,72 @@ export default Demo
2626

2727
```
2828

29+
### 头像尺寸
30+
31+
```jsx mdx:preview
32+
import React from 'react';
33+
import { View } from 'react-native';
34+
import { Avatar } from '@uiw/react-native';
35+
36+
function Demo() {
37+
return (
38+
<View style={{ flexDirection: 'row',justifyContent:'space-around' }}>
39+
<Avatar size={20} src="https://avatars.githubusercontent.com/u/24369183?v=4" />
40+
<Avatar size={30} src="https://avatars.githubusercontent.com/u/24369183?v=4" />
41+
<Avatar size={40} src="https://avatars.githubusercontent.com/u/24369183?v=4" />
42+
<Avatar size={50} src="https://avatars.githubusercontent.com/u/24369183?v=4" />
43+
</View>
44+
);
45+
}
46+
47+
export default Demo
48+
49+
```
50+
51+
### 设置头像圆角
52+
53+
```jsx mdx:preview
54+
import React from 'react';
55+
import { View } from 'react-native';
56+
import { Avatar } from '@uiw/react-native';
57+
58+
function Demo() {
59+
return (
60+
<View style={{ flexDirection: 'row',justifyContent:'space-around' }}>
61+
<Avatar rounded={0} src="https://avatars.githubusercontent.com/u/24369183?v=4" />
62+
<Avatar rounded={5} src="https://avatars.githubusercontent.com/u/24369183?v=4" />
63+
<Avatar rounded={10} src="https://avatars.githubusercontent.com/u/24369183?v=4" />
64+
<Avatar rounded={20} src="https://avatars.githubusercontent.com/u/24369183?v=4" />
65+
</View>
66+
);
67+
}
68+
69+
export default Demo
70+
71+
```
72+
73+
### 指定头像的形状
74+
75+
circle 圆头像
76+
square 正方形头像
77+
78+
```jsx mdx:preview
79+
import React from 'react';
80+
import { View } from 'react-native';
81+
import { Avatar } from '@uiw/react-native';
82+
83+
function Demo() {
84+
return (
85+
<View style={{ flexDirection: 'row',justifyContent:'space-around' }}>
86+
<Avatar shape='circle' src="https://avatars.githubusercontent.com/u/24369183?v=4" />
87+
<Avatar rounded='square' src="https://avatars.githubusercontent.com/u/24369183?v=4" />
88+
</View>
89+
);
90+
}
91+
92+
export default Demo
93+
94+
```
2995
### Props
3096

3197
继承 [View](https://facebook.github.io/react-native/docs/view#props) 组件。

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

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,50 @@ function Demo() {
2121

2222
export default Demo;
2323

24+
```
25+
### 设置文本内容
26+
27+
28+
```jsx mdx:preview
29+
import React from "react"
30+
import { View, Text } from 'react-native';
31+
import { Badge } from '@uiw/react-native';
32+
33+
function Demo() {
34+
return (
35+
<View style={{ flexDirection: 'row',justifyContent:'space-around' }}>
36+
<Badge text="设置" color="red" />
37+
<Badge text="文本" color="red" />
38+
<Badge text="内容" color="red" />
39+
<Badge text="内容" color="red" />
40+
</View>
41+
);
42+
}
43+
44+
export default Demo;
45+
46+
```
47+
48+
### 设置颜色
49+
50+
```jsx mdx:preview
51+
import React from "react"
52+
import { View, Text } from 'react-native';
53+
import { Badge } from '@uiw/react-native';
54+
55+
function Demo() {
56+
return (
57+
<View style={{ flexDirection: 'row',justifyContent:'space-around' }}>
58+
<Badge text="红色" color="red" />
59+
<Badge text="黄色" color="yellow" />
60+
<Badge text="黑色" color="black" />
61+
<Badge text="绿色" color="green" />
62+
</View>
63+
);
64+
}
65+
66+
export default Demo;
67+
2468
```
2569
### 设置类型
2670

@@ -32,9 +76,11 @@ import { Badge } from '@uiw/react-native';
3276

3377
function Demo() {
3478
return (
35-
<View style={{ flexDirection: 'row' }}>
36-
<Text>一文带你搞懂 API 网关</Text>
79+
<View style={{ flexDirection: 'row',justifyContent:'space-around' }}>
3780
<Badge text="标记" type="dot" color="skyblue" />
81+
<Badge text="标记" type="dot" color="black" />
82+
<Badge text="标记" color="red" />
83+
<Badge text="标记" color="green" />
3884
</View>
3985
);
4086
}

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

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,27 @@ function Demo() {
2121
export default Demo;
2222
```
2323

24+
### 自定义占位符
25+
26+
27+
```jsx mdx:preview
28+
import React from "react"
29+
import { Ellipsis } from '@uiw/react-native';
30+
31+
function Demo() {
32+
33+
return (
34+
<Ellipsis maxLen={5} placeholder='😂😂😂😂'>用于文本过长，超出长度显示</Ellipsis>
35+
);
36+
}
37+
38+
export default Demo;
39+
```
40+
2441
### Props
2542

2643
| 参数 | 说明 | 类型 | 默认值 |
2744
|------|------|-----|------|
2845
| `children` | 内容为纯文本起作用 | ReactNode | - |
2946
| `maxLen` | 文本长度 | Number | - |
30-
| `placeholder` | 超出占位符 | String | `...` |
47+
| `placeholder` | 自定义占位符 | String | `...` |

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

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,27 @@ Grid 宫格
66

77
### 基础示例
88

9+
```jsx mdx:preview
10+
import { Grid, Icon } from '@uiw/react-native';
11+
import React from "react"
12+
13+
14+
const data = Array.from(new Array(10)).map((_val, i) => {
15+
16+
return { icon: <Icon name="heart-on" color="red" />, text: `${i}`}
17+
});
18+
19+
function Demo() {
20+
return (
21+
<Grid data={data} />
22+
);
23+
}
924

25+
export default Demo
26+
27+
```
28+
29+
### 自定义列数
1030

1131
```jsx mdx:preview
1232
import { Grid, Icon } from '@uiw/react-native';
@@ -20,7 +40,29 @@ const data = Array.from(new Array(10)).map((_val, i) => {
2040

2141
function Demo() {
2242
return (
23-
<Grid data={data} />
43+
<Grid data={data} columns='6'/>
44+
);
45+
}
46+
47+
export default Demo
48+
49+
```
50+
51+
### 是否需要间隔线
52+
53+
```jsx mdx:preview
54+
import { Grid, Icon } from '@uiw/react-native';
55+
import React from "react"
56+
57+
58+
const data = Array.from(new Array(24)).map((_val, i) => {
59+
60+
return { icon: <Icon name="heart-on" color="red" />, text: `${i}`}
61+
});
62+
63+
function Demo() {
64+
return (
65+
<Grid data={data} columns='6' hasLine={false}/>
2466
);
2567
}
2668

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

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,109 @@ import React from "react"
1515
function Demo() {
1616
return (
1717
<List>
18+
<List.Item style={{ height: 50 }}>首曝海报特写诡异人脸</List.Item>
19+
<List.Item>六大变五大？传迪士尼600亿收购福斯</List.Item>
20+
<List.Item>快跑!《侏罗纪世界2》正式预告要来了</List.Item>
21+
<List.Item>
22+
<View>
23+
<Text>因为爱过，所以慈悲；因为懂得，所以宽容。</Text>
24+
</View>
25+
</List.Item>
26+
</List>
27+
);
28+
}
29+
30+
export default Demo
31+
32+
```
33+
34+
### 设置头部
35+
36+
```jsx mdx:preview
37+
38+
import { View, Text } from 'react-native';
39+
import { List } from '@uiw/react-native';
40+
import React from "react"
41+
42+
export default function Demo() {
43+
return (
44+
<List
45+
title='这是头部，设置头部设置头部'
46+
data={[
47+
{ date: '8月12日', time: '18:25', orderCode: 'SO18081200005', transCode: '123456', weight: '69.5Kg', money: '+241.00元', type: '收入' },
48+
{ date: '8月10日', time: '12:01', orderCode: 'SO18081000004', transCode: '123789', weight: '968.6Kg', money: '+8834.00元', type: '收入' },
49+
{ date: '8月2日', time: '10:08', orderCode: 'SO18080200003', transCode: '309876', weight: '465.6Kg', money: '-2520.00元', type: '支出' },
50+
{ date: '8月1日', time: '09:30', orderCode: 'SO18080100002', transCode: '783456', weight: '169.3Kg', money: '+1526.00元', type: '收入' },
51+
{ date: '8月1日', time: '06:47', orderCode: 'SO18080100001', transCode: '456234', weight: '395.6Kg', money: '+3234.00元', type: '收入' }
52+
]}
53+
renderItem={({ item }) => {
54+
return (
55+
<View style={{borderWidth: 1}}>
56+
<Text>{item.orderCode}</Text>
57+
<Text>{item.weight}</Text>
58+
</View>
59+
);
60+
}}
61+
/>
62+
)
63+
}
64+
```
65+
66+
### 设置单元格大小
67+
68+
```jsx mdx:preview
69+
70+
import { View, Text } from 'react-native';
71+
import { List } from '@uiw/react-native';
72+
import React from "react"
73+
74+
export default function Demo() {
75+
return (
76+
<View >
77+
<List
78+
size='small'
79+
data={[
80+
{ weight: '69.5Kg', money: '+241.00元', type: '收入' },
81+
{ weight: '968.6Kg', money: '+8834.00元', type: '收入' },
82+
]}
83+
renderItem={({ item }) => {
84+
return (
85+
<View style={{borderWidth: 0.5}}>
86+
<Text>{item.weight}</Text>
87+
</View>
88+
);
89+
}}
90+
/>
91+
<List
92+
size='large'
93+
data={[
94+
{ money: '+241.00元', type: '收入' },
95+
{ money: '+8834.00元', type: '收入' },
96+
]}
97+
renderItem={({ item }) => {
98+
return (
99+
<View style={{borderWidth: 0.5}}>
100+
<Text>{item.money}</Text>
101+
</View>
102+
);
103+
}}
104+
/>
105+
</View>
106+
)
107+
}
108+
```
109+
110+
### 展示右侧内容
111+
112+
```jsx mdx:preview
113+
114+
import { View, Text } from 'react-native';
115+
import { List } from '@uiw/react-native';
116+
import React from "react"
117+
118+
function Demo() {
119+
return (
120+
<List extra={<Text>因为爱过，所以慈悲；因为懂得，所以宽容。</Text>}>
18121
<List.Item style={{ height: 50 }}>"X战警新变种人"首曝海报特写诡异人脸</List.Item>
19122
<List.Item>六大变五大？传迪士尼600亿收购福斯</List.Item>
20123
<List.Item>快跑!《侏罗纪世界2》正式预告要来了</List.Item>

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,22 @@ MaskLayer 遮罩层
1212
```jsx mdx:preview
1313
import React, { Fragment, useState } from 'react';
1414
import { Text, SafeAreaView } from 'react-native';
15-
import { Button, MaskLayer } from '@uiw/react-native';
15+
import { Button, MaskLayer,Grid,Icon } from '@uiw/react-native';
1616

1717
const Demo = () => {
1818
const [visible, setVisible] = useState(false);
19+
const data = Array.from(new Array(24)).map((_val, i) => {
20+
return { icon: <Icon name="heart-on" color="red" />, text: `${i}`}
21+
});
1922
return (
2023
<Fragment>
2124
<MaskLayer
2225
visible={visible}
2326
onDismiss={() => {
2427
setVisible(!visible);
2528
}}>
26-
<SafeAreaView>
27-
<Text style={{color: '#fff'}}>展示内容</Text>
29+
<SafeAreaView style={{alignItems:'center'}}>
30+
<Grid style={{width:500,heigth:500,}} data={data} columns='6' hasLine={false}/>
2831
</SafeAreaView>
2932
</MaskLayer>
3033
<Button

0 commit comments

Comments
 (0)