Skip to content

Commit f15387a

Browse files
ChenlingasMxChenlingasMx
authored
Merge pull request #517 from hy916/dev
docs: 增加组件示例
2 parents a9ead79 + 1daa6b2 commit f15387a

File tree

7 files changed

+218
-3
lines changed

7 files changed

+218
-3
lines changed

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,27 @@ function Demo() {
6666
}
6767
export default Demo
6868
```
69+
### 禁用状态
6970

71+
```jsx mdx:preview
72+
import { Badge, List, CheckBox } from '@uiw/react-native';
73+
import React from 'react';
74+
75+
function Demo() {
76+
return (
77+
<List size="large" flat={false}>
78+
<List.Item style={{ paddingVertical: 0 }}>
79+
<CheckBox disabled style={{ paddingVertical: 10 }} onChange={(checked) => { console.log(checked)}}>禁用未选中</CheckBox>
80+
</List.Item>
81+
<List.Item style={{ paddingVertical: 0 }}>
82+
<CheckBox checked={true} disabled style={{ paddingVertical: 10 }} onChange={(checked) => { console.log(checked)}}>禁用选中</CheckBox>
83+
</List.Item>
84+
</List>
85+
);
86+
}
87+
88+
export default Demo
89+
```
7090

7191
### props
7292

@@ -78,6 +98,7 @@ export default Demo
7898
| `textStyle` | 设置文本样式 | TextStyle & ViewStyle | - |
7999
| `color` | 设置颜色 | String | - |
80100
| `checked` | 指定当前是否选中 | Boolean | - |
101+
| `disabled` | 设置是否禁用 | Boolean | false |
81102
| `checkedIcon` | 选中图标 | Icon['name']/`JSX.Elemen` | - |
82103
| `unCheckedIcon` | 未选中图标 | Icon['name']/`JSX.Elemen` | - |
83104
| `onChange` | 事件触发的回调函数 | (checked):void | `5` |

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,64 @@ const NoticeBarExample = () => {
6868
export default NoticeBarExample;
6969
```
7070
71+
### 设置图标
72+
73+
```jsx mdx:preview
74+
import React from 'react';
75+
import { Image,View,Text } from 'react-native'
76+
import NoticeBar from '@uiw/react-native/lib/NoticeBar';
77+
import Spacing from '@uiw/react-native/lib/Spacing';
78+
import Icon from '@uiw/react-native/lib/Icon';
79+
80+
const NoticeBarExample = () => {
81+
return (
82+
<View style={{ marginTop: 10 }}>
83+
<NoticeBar mode="link" icon={<Icon name="apple" size={15} />} onPress={() => console.log('link')}>
84+
: 春节放假时间为30天，请务必关好门窗，断开所有电源！
85+
</NoticeBar>
86+
<Spacing />
87+
<NoticeBar mode="link" icon={<Icon name="alipay" size={15} />} onPress={() => console.log('link')}>
88+
: 即今日2月20日开始，停水40天！请知悉。
89+
</NoticeBar>
90+
<Spacing />
91+
<NoticeBar mode="link" icon={<Icon name="baidu" size={15} />} onPress={() => console.log('link')}>
92+
: 告诉大家一个‘幸福’的好消息，我们退休将延迟至65岁！！
93+
</NoticeBar>
94+
</View>
95+
)
96+
}
97+
export default NoticeBarExample;
98+
```
99+
100+
### 设置通告栏样式和文字样式
101+
102+
```jsx mdx:preview
103+
import React from 'react';
104+
import { Image,View,Text } from 'react-native'
105+
import NoticeBar from '@uiw/react-native/lib/NoticeBar';
106+
import Spacing from '@uiw/react-native/lib/Spacing';
107+
import Icon from '@uiw/react-native/lib/Icon';
108+
109+
const NoticeBarExample = () => {
110+
return (
111+
<View style={{ marginTop: 10 }}>
112+
<NoticeBar mode="link" style={{backgroundColor:'#fff'}} textStyle={{color:'orange'}} onPress={() => console.log('link')}>
113+
通知: 春节放假时间为30天！
114+
</NoticeBar>
115+
<Spacing />
116+
<NoticeBar mode="link" style={{backgroundColor:'orange'}} textStyle={{color:'#fff'}} onPress={() => console.log('link')}>
117+
: 告诉大家一个‘幸福’的好消息，我们退休将延迟至65岁！！
118+
</NoticeBar>
119+
<Spacing />
120+
<NoticeBar mode="link" style={{backgroundColor:'#fff'}} textStyle={{color:'blue'}} onPress={() => console.log('link')}>
121+
: 告诉大家一个‘幸福’的好消息，我们退休将延迟至65岁！！
122+
</NoticeBar>
123+
</View>
124+
)
125+
}
126+
export default NoticeBarExample;
127+
```
128+
71129
### Props
72130
73131
属性 | 说明 | 类型 | 默认值

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

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ import { Radio } from '@uiw/react-native';
5555

5656
function Demo() {
5757
return (
58-
<Radio disabled >
58+
<Radio disabled color='red' >
5959
Radio
6060
</Radio>
6161
);
@@ -105,6 +105,24 @@ export default Demo
105105

106106
```
107107

108+
### 自定义颜色
109+
110+
```jsx mdx:preview
111+
import React, { useState } from 'react';
112+
import { Radio } from '@uiw/react-native';
113+
114+
function Demo() {
115+
const [checked, setChecked] = useState(false);
116+
return (
117+
<Radio checkedColor='red' borderColor='#008EF0' >
118+
Radio
119+
</Radio>
120+
);
121+
}
122+
123+
export default Demo
124+
```
125+
108126
### Props
109127

110128
| 参数 | 说明 | 类型 | 默认值 |

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ import { Rating, Icon } from '@uiw/react-native';
7575
function Demo() {
7676
const desc = ['0星', '1星', '2星', '3星', '4星', '5星'];
7777
return (
78-
<Rating tooltips={desc} tooltipsStyle={{ fontSize: 25, color: 'blue' }} />
78+
<Rating tooltips={desc} tooltipsStyle={{ fontSize: 20, color: '#e6c45d' }} />
7979
);
8080
}
8181
export default Demo

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,26 @@ function Demo() {
2525
export default Demo;
2626
```
2727

28+
### 步骤索引值
29+
30+
```jsx mdx:preview
31+
import React from 'react';
32+
import { Steps } from '@uiw/react-native';
33+
34+
function Demo() {
35+
return (
36+
<Steps
37+
items={[
38+
{ 'title': '步骤一', 'desc': '当前服务正在申请中',status:'success'},
39+
{ 'title': '步骤二', 'desc': '当前服务正在审批中',status:'success'},
40+
{ 'title': '步骤三', 'desc': '当前服务审批失败',status:'error'}
41+
]}
42+
current={0}
43+
/>
44+
);
45+
}
46+
export default Demo;
47+
```
2848
### props
2949

3050
| 参数 | 说明 | 类型 | 默认值 |

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,62 @@ export default Demo
116116

117117
```
118118

119+
### 超出自动省略
120+
121+
```jsx mdx:preview
122+
import React from 'react';
123+
import {Table, Button } from '@uiw/react-native';
124+
import {View} from 'react-native';
125+
126+
const Demo = () => {
127+
return (
128+
<Table
129+
columns={[
130+
{
131+
title: '名称',
132+
dataIndex: 'partName',
133+
ellipsis: true,
134+
},
135+
{
136+
title: '品牌',
137+
dataIndex: 'partBrand',
138+
ellipsis: true,
139+
},
140+
{
141+
title: '型号',
142+
dataIndex: 'partModel',
143+
ellipsis: true,
144+
},
145+
{
146+
title: '备注',
147+
dataIndex: 'remark',
148+
ellipsis: true,
149+
},
150+
{
151+
title: '操作',
152+
dataIndex: 'id',
153+
style: { width: 50 },
154+
render: () => {
155+
return (
156+
<Button size="small">详情</Button>
157+
);
158+
},
159+
},
160+
]}
161+
data={[
162+
{ id: '1', partName: 'React Native UIW 组件库', partBrand: '一个基于 React Native 的 UI 组件库', partModel: 'React Native UI 组件库 - UIW', remark: 'UIW，ff爱zz,三生三世用相随' },
163+
{ id: '2', partName: 'React Native UIW 组件库', partBrand: '一个基于 React Native 的 UI 组件库', partModel: 'React Native UI 组件库- UIW', remark: 'UIW，ff爱zz,三生三世用相随' },
164+
{ id: '3', partName: 'React Native UIW 组件库', partBrand: '一个基于 React Native 的 UI 组件库', partModel: 'React Native UI 组件库- UIW', remark: 'UIW, ff爱zz,三生三世用相随' },
165+
{ id: '4', partName: 'React Native UIW 组件库', partBrand: '一个基于 React Native 的 UI 组件库', partModel: 'React Native UI 组件库- UIW', remark: 'UIW, ff爱zz,三生三世用相随' },
166+
]}
167+
rowKey="id"
168+
/>
169+
);
170+
}
171+
export default Demo
172+
173+
```
174+
119175
### props
120176

121177
| 参数 | 说明 | 类型 | 默认值 |

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

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const { Item } = Tabs
1515
function Demo() {
1616
return (
1717
<Fragment>
18-
<Tabs>
18+
<Tabs >
1919
<Item
2020
title="喜欢"
2121
/>
@@ -64,6 +64,48 @@ function Demo() {
6464
}
6565
export default Demo
6666
```
67+
68+
### 使用文字和不使用文字
69+
70+
```jsx mdx:preview
71+
import React, { Fragment } from 'react';
72+
import { Tabs, Icon } from '@uiw/react-native';
73+
import Spacing from '@uiw/react-native/lib/Spacing';
74+
75+
function Demo() {
76+
return (
77+
<Fragment>
78+
<Tabs>
79+
<Tabs.Item
80+
icon='home'
81+
/>
82+
<Tabs.Item
83+
icon={<Icon name='bell' color="#fff" size={24} />}
84+
/>
85+
<Tabs.Item
86+
icon='user'
87+
/>
88+
</Tabs>
89+
<Spacing />
90+
<Tabs>
91+
<Tabs.Item
92+
title='主页'
93+
icon='home'
94+
/>
95+
<Tabs.Item
96+
title='提醒'
97+
icon={<Icon name='bell' color="#fff" size={24} />}
98+
/>
99+
<Tabs.Item
100+
title='我的'
101+
icon='user'
102+
/>
103+
</Tabs>
104+
</Fragment>
105+
);
106+
}
107+
export default Demo
108+
```
67109
### Tabs Props
68110

69111
继承原生 View 属性 [`ViewProps`](https://reactnative.dev/docs/view)

0 commit comments

Comments
 (0)