Skip to content

Commit 829af81

Browse files
ChenlingasMxChenlingasMx
authored
Merge pull request #504 from hy916/dev
docs：增加多个组件文档案例
2 parents ffbb029 + 0485842 commit 829af81

File tree

12 files changed

+475
-20344
lines changed

12 files changed

+475
-20344
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,7 @@ export default Demo
227227

228228
| 属性 | 说明 | 类型 | 默认值 |
229229
| --- | --- | --- | --- |
230-
| color | 自定义颜色 | `string` |
230+
| color | 自定义颜色 | `string` | -｜
231231
| disabled | 是否禁用 | `boolean` | `false` |
232232
| bordered | 设置是否显示边框 | `boolean` | `true` |
233233
| loading | 加载状态 | `boolean` | `false` |

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

Lines changed: 98 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,55 @@ const contents = [
2121
'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg',
2222
];
2323

24+
class Demo extends Component {
25+
render() {
26+
const renderItem = (_, index) => {
27+
return (
28+
<View key={index} style={{ padding: 20,backgroundColor: '#fff'}}>
29+
<Image source={{uri: contents[index]}} style={{ height: 120 }} />
30+
</View>
31+
);
32+
}
33+
return (
34+
<ScrollView style={{ flex: 1 }}>
35+
<Header description={'基本使用'} />
36+
<CardCollapse
37+
isCollapsed={true}//是否折叠
38+
disablePresses={true}//卡片是否可以点击
39+
onCollapseWillChange={()=>{}}
40+
onCollapseChanged={()=>{}}
41+
>
42+
{map(contents, (item, index) => {
43+
return renderItem(item, index);
44+
})}
45+
</CardCollapse>
46+
</ScrollView>
47+
)
48+
}
49+
}
50+
51+
export default Demo
52+
53+
```
54+
55+
### 默认不折叠
56+
57+
<!--DemoStart-->
58+
```jsx mdx:preview
59+
import React,{ Component } from 'react';
60+
import { ScrollView, View,Image } from 'react-native';
61+
import { CardCollapse } from '@uiw/react-native';
62+
import Layout from '../Layout';
63+
import map from 'lodash/map'
64+
65+
const { Header} = Layout;
66+
const contents = [
67+
'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg',
68+
'https://wx1.sinaimg.cn/mw690/4718260ely1gt2cg5r9zij22yo1o0x6p.jpg',
69+
'https://wx1.sinaimg.cn/mw690/4718260ely1gt2cg5r9zij22yo1o0x6p.jpg',
70+
'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg',
71+
];
72+
2473
class Demo extends Component {
2574
render() {
2675
const renderItem = (_, index) => {
@@ -51,10 +100,56 @@ class Demo extends Component {
51100
export default Demo
52101

53102
```
103+
### 卡片圆角
104+
105+
<!--DemoStart-->
106+
```jsx mdx:preview
107+
import React,{ Component } from 'react';
108+
import { ScrollView, View,Image } from 'react-native';
109+
import { CardCollapse } from '@uiw/react-native';
110+
import Layout from '../Layout';
111+
import map from 'lodash/map'
54112

55-
<!--End-->
113+
const { Header} = Layout;
114+
const contents = [
115+
'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg',
116+
'https://wx1.sinaimg.cn/mw690/4718260ely1gt2cg5r9zij22yo1o0x6p.jpg',
117+
'https://wx1.sinaimg.cn/mw690/4718260ely1gt2cg5r9zij22yo1o0x6p.jpg',
118+
'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg',
119+
];
120+
121+
class Demo extends Component {
122+
render() {
123+
const renderItem = (_, index) => {
124+
return (
125+
<View key={index} style={{ padding: 20,backgroundColor: '#fff'}}>
126+
<Image source={{uri: contents[index]}} style={{ height: 120 }} />
127+
</View>
128+
);
129+
}
130+
return (
131+
<ScrollView style={{ flex: 1 }}>
132+
<Header description={'基本使用'} />
133+
<CardCollapse
134+
isCollapsed={true}//是否折叠
135+
disablePresses={true}//卡片是否可以点击
136+
onCollapseWillChange={()=>{}}
137+
onCollapseChanged={()=>{}}
138+
itemBorderRadius='20'
139+
>
140+
{map(contents, (item, index) => {
141+
return renderItem(item, index);
142+
})}
143+
</CardCollapse>
144+
</ScrollView>
145+
)
146+
}
147+
}
148+
149+
export default Demo
150+
```
56151

57-
### Props
152+
#### 属性
58153

59154
| 参数 | 说明 | 类型 | 默认值 |
60155
|------|------|-----|------|
@@ -66,4 +161,4 @@ export default Demo
66161
| `onItemPress` | 点击卡片回调 | (`index: number) => void` | - |
67162
| `onCollapseWillChange` | 卡片折叠回调（值是未来折叠状态） | `(changed: boolean) => void` | - |
68163
| `onCollapseChanged` | 卡片折叠回调（值是目前状态） | `(changed: boolean) => void` | - |
69-
| `disablePresses` | 卡片是否可以点击 | `boolean` | - |
164+
| `disablePresses` | 卡片是否可以点击 | `boolean` | - |

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

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,31 @@ export default Demo
2727

2828
```
2929

30+
### 分割线间距
31+
32+
根据 `type` 来设置上下或者左右间距，默认为 8
33+
34+
```jsx mdx:preview
35+
import React,{Component, Fragment } from "react"
36+
import { View, Text } from 'react-native';
37+
import { Divider } from '@uiw/react-native';
38+
39+
class Demo extends Component {
40+
render() {
41+
return (
42+
<Fragment>
43+
<Text>分割线</Text>
44+
<Divider label="OR" gutter={50}/>
45+
<Text>分割线</Text>
46+
<Divider label="OR" gutter={100}/>
47+
</Fragment>
48+
);
49+
}
50+
}
51+
export default Demo
52+
53+
```
54+
3055
### 分割线标题位置
3156

3257
```jsx mdx:preview
@@ -80,5 +105,5 @@ export default Demo
80105
|------|------|-----|------|
81106
| `label` | 分割线标题，文本内容 | String | - |
82107
| `type` | 水平还是垂直类型 | `horizontal`, `vertical` | `horizontal` |
83-
| `gutter` | 间距，更具 `type` 来设置上下或者左右间距 | Number | `8` |
108+
| `gutter` | 间距，根据 `type` 来设置上下或者左右间距 | Number | `8` |
84109
| `orientation` | 分割线标题的位置 | `left`, `right`,`center`| `center` |

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,35 @@ function Demo() {
116116
export default Demo
117117

118118
```
119+
### 点击遮罩层是否允许关闭
119120

121+
```jsx mdx:preview
122+
import React, { useState } from 'react';
123+
import { View, Text, SafeAreaView } from 'react-native';
124+
import { Drawer, Button } from '@uiw/react-native';
125+
126+
function Demo() {
127+
const [visible, setVisible] = useState(false);
128+
return (
129+
<View style={{height: 200}}>
130+
<Drawer
131+
isOpen={visible}
132+
onChange={(isOpen) => setVisible(isOpen)}
133+
drawerHeight={10}
134+
maskClosable={false}
135+
drawerBackgroundColor='red'
136+
>
137+
<View>
138+
<Text>点击遮罩层不允许关闭</Text>
139+
</View>
140+
</Drawer>
141+
<Button onPress={() => setVisible(!visible)}>打开抽屉</Button>
142+
</View>
143+
);
144+
}
145+
export default Demo
146+
147+
```
120148
### 抽屉覆盖全屏
121149

122150
- 可查看 [react-native-root-siblings](https://www.npmjs.com/package/react-native-root-siblings) 文档

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

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,40 @@ const Demo = () => {
2525
top={state.top}
2626
>
2727
<Text style={{ color: 'red' }}>
28-
有一天路标迁了希望你能从容
28+
有一天路标迁了希望你能从容、有一天桥墩断了希望你能渡越、有一天栋梁倒了希望你能坚强、有一天期待蔫了希望你能理解
29+
</Text>
30+
</ExpandableSection>
31+
</View>
32+
)
33+
}
34+
35+
export default Demo
36+
```
37+
38+
### 显示位置
2939

30-
有一天桥墩断了希望你能渡越
40+
```jsx mdx:preview
41+
import React, {useState} from 'react';
42+
import { ExpandableSection } from '@uiw/react-native';
43+
import { View, Text } from 'react-native'
3144

32-
有一天栋梁倒了希望你能坚强
45+
const Demo = () => {
46+
const [state, setState] = useState({
47+
expanded: false,
48+
top: true
49+
})
3350

34-
有一天期待蔫了希望你能理解
35-
</Text>
51+
return (
52+
<View style={{height: 100}}>
53+
<ExpandableSection
54+
expanded={state.expanded}
55+
onPress={() => setState({...state, expanded: !state.expanded })}
56+
sectionHeader={<Text >标题 : 点击我</Text>}
57+
top={state.top}
58+
>
59+
<Text style={{ color: 'red' }}>
60+
有一天路标迁了希望你能从容、有一天桥墩断了希望你能渡越、有一天栋梁倒了希望你能坚强、有一天期待蔫了希望你能理解
61+
</Text>
3662
</ExpandableSection>
3763
</View>
3864
)

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ const Demo = () => {
1515
return <View>
1616
<Text>受控组件</Text>
1717
<Input value={value} onChange={(e) => setValue(e.target.value)} containerStyle={{marginBottom: 10}} />
18+
<Text>前缀</Text>
19+
<Input extraStart="你是？" placeholder="请输入" containerStyle={{marginBottom: 10}} />
1820
<Text>后缀</Text>
1921
<Input extraEnd="小数" placeholder="请输入" containerStyle={{marginBottom: 10}} />
2022
<Text>错误错误</Text>
@@ -43,6 +45,75 @@ import { Input } from '@uiw/react-native';
4345
}
4446
export default BasicInputExample
4547
```
48+
49+
### 禁用输入框
50+
51+
```jsx mdx:preview
52+
import React,{ Component } from "react"
53+
import { View, Text } from 'react-native';
54+
import { Input } from '@uiw/react-native';
55+
56+
class BasicInputExample extends Component {
57+
render() {
58+
return <View>
59+
<Text>禁用输入框</Text>
60+
<Input disabled/>
61+
</View>
62+
}
63+
}
64+
export default BasicInputExample
65+
```
66+
67+
### 限制文本框中最多的字符数
68+
```jsx mdx:preview
69+
import React,{ Component } from "react"
70+
import { View, Text } from 'react-native';
71+
import { Input } from '@uiw/react-native';
72+
73+
class BasicInputExample extends Component {
74+
render() {
75+
return <View>
76+
<Text>禁用输入框</Text>
77+
<Input maxLength='5'/>
78+
</View>
79+
}
80+
}
81+
export default BasicInputExample
82+
```
83+
84+
### 清除按钮
85+
86+
```jsx mdx:preview
87+
import React,{ Component } from "react"
88+
import { View, Text } from 'react-native';
89+
import { Input } from '@uiw/react-native';
90+
91+
const Demo = () => {
92+
return <View>
93+
<Text>清除按钮</Text>
94+
<Input clear />
95+
</View>
96+
}
97+
export default Demo
98+
```
99+
100+
101+
### 每次输入清除内容
102+
103+
```jsx mdx:preview
104+
import React,{ Component } from "react"
105+
import { View, Text } from 'react-native';
106+
import { Input } from '@uiw/react-native';
107+
108+
const Demo = () => {
109+
return <View>
110+
<Text>每次输入清除内容</Text>
111+
<Input clearText={true} />
112+
</View>
113+
}
114+
export default Demo
115+
```
116+
46117
### 校验输入内容
47118

48119
```jsx mdx:preview

0 commit comments

Comments
 (0)