docs：增加多个组件文档案例

packages/core/src/Button/README.md

@@ -227,7 +227,7 @@ export default Demo
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| color | 自定义颜色 | `string` |
+| color | 自定义颜色 | `string` | -｜
 | disabled | 是否禁用 | `boolean` | `false` |
 | bordered | 设置是否显示边框 | `boolean` | `true` |
 | loading | 加载状态 | `boolean` | `false` |

packages/core/src/CardCollapse/README.md

@@ -21,6 +21,55 @@ const contents = [
   'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg',
 ];
 
+class Demo extends Component {
+  render() {
+  const renderItem = (_, index) => {
+    return (
+      <View key={index} style={{ padding: 20,backgroundColor: '#fff'}}>
+          <Image source={{uri: contents[index]}} style={{ height: 120 }} /> 
+      </View>
+    );
+  }
+    return (
+    <ScrollView style={{ flex: 1 }}>
+      <Header description={'基本使用'} />
+      <CardCollapse
+       isCollapsed={true}//是否折叠
+        disablePresses={true}//卡片是否可以点击
+        onCollapseWillChange={()=>{}}
+        onCollapseChanged={()=>{}}
+      >
+        {map(contents, (item, index) => {
+          return renderItem(item, index);
+        })}
+      </CardCollapse>
+    </ScrollView>
+    )
+  }
+}
+
+export default Demo
+
+```
+
+### 默认不折叠
+
+<!--DemoStart--> 
+```jsx mdx:preview
+import React,{ Component } from 'react';
+import { ScrollView, View,Image } from 'react-native';
+import { CardCollapse } from '@uiw/react-native';
+import Layout from '../Layout';
+import map from 'lodash/map'
+
+const { Header} = Layout;
+const contents = [
+  'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg',
+  'https://wx1.sinaimg.cn/mw690/4718260ely1gt2cg5r9zij22yo1o0x6p.jpg',
+  'https://wx1.sinaimg.cn/mw690/4718260ely1gt2cg5r9zij22yo1o0x6p.jpg',
+  'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg',
+];
+
 class Demo extends Component {
   render() {
   const renderItem = (_, index) => {
@@ -51,10 +100,56 @@ class Demo extends Component {
 export default Demo
 
 ```
+### 卡片圆角
+
+<!--DemoStart--> 
+```jsx mdx:preview
+import React,{ Component } from 'react';
+import { ScrollView, View,Image } from 'react-native';
+import { CardCollapse } from '@uiw/react-native';
+import Layout from '../Layout';
+import map from 'lodash/map'
 
-<!--End-->
+const { Header} = Layout;
+const contents = [
+  'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg',
+  'https://wx1.sinaimg.cn/mw690/4718260ely1gt2cg5r9zij22yo1o0x6p.jpg',
+  'https://wx1.sinaimg.cn/mw690/4718260ely1gt2cg5r9zij22yo1o0x6p.jpg',
+  'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg',
+];
+
+class Demo extends Component {
+  render() {
+  const renderItem = (_, index) => {
+    return (
+      <View key={index} style={{ padding: 20,backgroundColor: '#fff'}}>
+          <Image source={{uri: contents[index]}} style={{ height: 120 }} /> 
+      </View>
+    );
+  }
+    return (
+    <ScrollView style={{ flex: 1 }}>
+      <Header description={'基本使用'} />
+      <CardCollapse
+        isCollapsed={true}//是否折叠
+        disablePresses={true}//卡片是否可以点击
+        onCollapseWillChange={()=>{}}
+        onCollapseChanged={()=>{}}
+        itemBorderRadius='20'
+      >
+        {map(contents, (item, index) => {
+          return renderItem(item, index);
+        })}
+      </CardCollapse>
+    </ScrollView>
+    )
+  }
+}
+
+export default Demo
+```
 
-### Props
+#### 属性
 
 | 参数 | 说明 | 类型 | 默认值 |
 |------|------|-----|------|
@@ -66,4 +161,4 @@ export default Demo
 | `onItemPress` | 点击卡片回调 | (`index: number) => void` | - |
 | `onCollapseWillChange` | 卡片折叠回调（值是未来折叠状态） | `(changed: boolean) => void` | - |
 | `onCollapseChanged` | 卡片折叠回调（值是目前状态） | `(changed: boolean) => void` | - |
-| `disablePresses` | 卡片是否可以点击 | `boolean` | - |
+| `disablePresses` | 卡片是否可以点击 | `boolean` | - |

packages/core/src/Divider/README.md

@@ -27,6 +27,31 @@ export default Demo
 
 ```
 
+### 分割线间距
+
+根据 `type` 来设置上下或者左右间距，默认为 8
+
+```jsx  mdx:preview
+import React,{Component, Fragment } from "react"
+import { View, Text } from 'react-native';
+import  { Divider }  from '@uiw/react-native';
+
+class Demo extends Component {
+  render() {
+  return (
+    <Fragment>
+      <Text>分割线</Text>
+      <Divider label="OR" gutter={50}/>
+      <Text>分割线</Text>
+      <Divider label="OR" gutter={100}/>
+    </Fragment>
+  );
+  }
+}
+export default Demo
+
+```
+
 ### 分割线标题位置
 
 ```jsx  mdx:preview
@@ -80,5 +105,5 @@ export default Demo
 |------|------|-----|------|
 | `label` | 分割线标题，文本内容 | String | - |
 | `type` | 水平还是垂直类型 | `horizontal`, `vertical` | `horizontal` |
-| `gutter` | 间距，更具 `type` 来设置上下或者左右间距 | Number | `8` |
+| `gutter` | 间距，根据 `type` 来设置上下或者左右间距 | Number | `8` |
 | `orientation` | 分割线标题的位置 |  `left`, `right`,`center`| `center` |

packages/core/src/Drawer/README.md

@@ -116,7 +116,35 @@ function Demo() {
 export default Demo
 
 ```   
+### 点击遮罩层是否允许关闭
 
+```jsx mdx:preview
+import  React, { useState } from 'react';
+import { View, Text, SafeAreaView } from 'react-native';
+import { Drawer, Button } from '@uiw/react-native';
+
+function Demo() {
+  const [visible, setVisible] = useState(false);
+  return (
+    <View style={{height: 200}}>
+      <Drawer
+        isOpen={visible}
+        onChange={(isOpen) => setVisible(isOpen)}
+        drawerHeight={10}
+        maskClosable={false}
+        drawerBackgroundColor='red'
+      >
+        <View>
+          <Text>点击遮罩层不允许关闭</Text>
+        </View>
+      </Drawer>
+      <Button onPress={() => setVisible(!visible)}>打开抽屉</Button>
+    </View>
+  );
+}
+export default Demo
+
+```  
 ### 抽屉覆盖全屏
 
 - 可查看 [react-native-root-siblings](https://www.npmjs.com/package/react-native-root-siblings) 文档

packages/core/src/ExpandableSection/README.md

@@ -25,14 +25,40 @@ const Demo = () => {
         top={state.top}
       >
         <Text style={{ color: 'red' }}>
-          有一天路标迁了希望你能从容
+          有一天路标迁了希望你能从容、有一天桥墩断了希望你能渡越、有一天栋梁倒了希望你能坚强、有一天期待蔫了希望你能理解
+        </Text>
+      </ExpandableSection>
+    </View>
+  )
+}
+
+export default Demo
+```
+
+### 显示位置
 
-          有一天桥墩断了希望你能渡越
+```jsx mdx:preview
+import React, {useState} from 'react';
+import { ExpandableSection } from '@uiw/react-native';
+import { View, Text } from 'react-native'
 
-          有一天栋梁倒了希望你能坚强
+const Demo = () => {
+  const [state, setState] = useState({
+    expanded: false,
+    top: true
+  })
 
-          有一天期待蔫了希望你能理解
-      </Text>
+  return (
+    <View style={{height: 100}}>
+      <ExpandableSection
+        expanded={state.expanded}
+        onPress={() => setState({...state, expanded: !state.expanded })}
+        sectionHeader={<Text >标题 : 点击我</Text>}
+        top={state.top}
+      >
+        <Text style={{ color: 'red' }}>
+          有一天路标迁了希望你能从容、有一天桥墩断了希望你能渡越、有一天栋梁倒了希望你能坚强、有一天期待蔫了希望你能理解
+        </Text>
       </ExpandableSection>
     </View>
   )

packages/core/src/Input/README.md

@@ -15,6 +15,8 @@ const Demo = () => {
   return <View>
     <Text>受控组件</Text>
     <Input  value={value} onChange={(e) => setValue(e.target.value)} containerStyle={{marginBottom: 10}} />
+    <Text>前缀</Text>
+    <Input extraStart="你是？" placeholder="请输入" containerStyle={{marginBottom: 10}} />
     <Text>后缀</Text>
     <Input extraEnd="小数" placeholder="请输入" containerStyle={{marginBottom: 10}} />
     <Text>错误错误</Text>
@@ -43,6 +45,75 @@ import  { Input }  from '@uiw/react-native';
 }
 export default BasicInputExample
 ```
+
+### 禁用输入框
+
+```jsx mdx:preview
+import React,{ Component } from "react"
+import { View, Text } from 'react-native';
+import  { Input }  from '@uiw/react-native';
+
+ class BasicInputExample extends Component {
+  render() {
+    return <View>
+      <Text>禁用输入框</Text>
+      <Input  disabled/>
+    </View>
+  }
+}
+export default BasicInputExample
+```
+
+### 限制文本框中最多的字符数
+```jsx mdx:preview
+import React,{ Component } from "react"
+import { View, Text } from 'react-native';
+import  { Input }  from '@uiw/react-native';
+
+ class BasicInputExample extends Component {
+  render() {
+    return <View>
+      <Text>禁用输入框</Text>
+      <Input  maxLength='5'/>
+    </View>
+  }
+}
+export default BasicInputExample
+```
+
+### 清除按钮
+
+```jsx mdx:preview
+import React,{ Component } from "react"
+import { View, Text } from 'react-native';
+import  { Input  }  from '@uiw/react-native';
+
+const Demo = () => {
+  return <View>
+    <Text>清除按钮</Text>
+    <Input clear  />
+  </View>
+}
+export default Demo
+```
+
+
+### 每次输入清除内容
+
+```jsx mdx:preview
+import React,{ Component } from "react"
+import { View, Text } from 'react-native';
+import  { Input  }  from '@uiw/react-native';
+
+const Demo = () => {
+  return <View>
+    <Text>每次输入清除内容</Text>
+    <Input clearText={true}  />
+  </View>
+}
+export default Demo
+```
+
 ### 校验输入内容
 
 ```jsx mdx:preview