From ff55eea61b60ea56d5b13e03a93a9dc56737f828 Mon Sep 17 00:00:00 2001
From: Jerome Lin <jerome.lin@zhongan.com>
Date: Thu, 24 Aug 2017 17:42:23 +0800
Subject: [PATCH] docs

---
 components/ActionSheet/ActionSheet.jsx | 10 +--
 components/Checkbox/Checkbox.jsx       |  2 +
 components/Checkbox/CheckboxGroup.jsx  |  8 ++-
 components/Input/Input.jsx             |  4 ++
 components/Stepper/Stepper.jsx         |  2 +-
 components/Switch/Switch.jsx           |  5 +-
 docs/zh-cn/SUMMARY.md                  |  7 +++
 docs/zh-cn/components/ActionSheet.md   | 85 +++++++++++++++++++++++++
 docs/zh-cn/components/Button.md        | 87 ++++++++++++++++++++++++++
 docs/zh-cn/components/Checkbox.md      | 46 ++++++--------
 docs/zh-cn/components/Input.md         | 23 ++-----
 docs/zh-cn/components/Picker.md        | 64 ++++++++-----------
 docs/zh-cn/components/Radio.md         | 22 +++----
 docs/zh-cn/components/Stepper.md       | 76 ++++++++++++++++++++++
 docs/zh-cn/components/Switch.md        | 50 +++++++++++++++
 docs/zh-cn/components/Uploader.md      | 63 +++++++++++++++++++
 examples/pages/ActionSheetPage.jsx     | 14 ++---
 examples/pages/ButtonPage.jsx          |  2 +-
 examples/pages/StepperPage.jsx         | 46 +++-----------
 examples/pages/SwitchPage.jsx          |  9 ++-
 20 files changed, 467 insertions(+), 158 deletions(-)
 create mode 100644 docs/zh-cn/components/ActionSheet.md
 create mode 100644 docs/zh-cn/components/Button.md
 create mode 100644 docs/zh-cn/components/Stepper.md
 create mode 100644 docs/zh-cn/components/Switch.md
 create mode 100644 docs/zh-cn/components/Uploader.md

diff --git a/components/ActionSheet/ActionSheet.jsx b/components/ActionSheet/ActionSheet.jsx
index 97df0bbc3..f41f41d81 100644
--- a/components/ActionSheet/ActionSheet.jsx
+++ b/components/ActionSheet/ActionSheet.jsx
@@ -46,20 +46,22 @@ ActionSheet.propTypes = {
   prefixCls: PropTypes.string,
   className: PropTypes.string,
   shape: PropTypes.oneOf(['radius']),
+  visible: PropTypes.bool,
   actions: PropTypes.arrayOf(PropTypes.object),
-  cancelText: PropTypes.string,
-  onCancel: PropTypes.func,
   onMaskClick: Popup.propTypes.onMaskClick,
+  onCancel: PropTypes.func,
+  cancelText: PropTypes.string,
 };
 
 ActionSheet.defaultProps = {
   prefixCls: 'za-actionsheet',
   className: null,
   shape: 'radius',
+  visible: false,
   actions: [],
-  cancelText: '取消',
-  onCancel: null,
   onMaskClick: Popup.defaultProps.onMaskClick,
+  onCancel: null,
+  cancelText: '取消',
 };
 
 export default ActionSheet;
diff --git a/components/Checkbox/Checkbox.jsx b/components/Checkbox/Checkbox.jsx
index 4341c70b8..225b1c52c 100644
--- a/components/Checkbox/Checkbox.jsx
+++ b/components/Checkbox/Checkbox.jsx
@@ -84,6 +84,7 @@ Checkbox.propTypes = {
   className: PropTypes.string,
   theme: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'error']),
   type: PropTypes.oneOf(['button', 'cell']),
+  checked: PropTypes.bool,
   defaultChecked: PropTypes.bool,
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
@@ -94,6 +95,7 @@ Checkbox.defaultProps = {
   className: null,
   theme: 'primary',
   type: null,
+  checked: false,
   defaultChecked: false,
   disabled: false,
   onChange() {},
diff --git a/components/Checkbox/CheckboxGroup.jsx b/components/Checkbox/CheckboxGroup.jsx
index 7923a6a33..4ce1a92a9 100644
--- a/components/Checkbox/CheckboxGroup.jsx
+++ b/components/Checkbox/CheckboxGroup.jsx
@@ -80,8 +80,10 @@ CheckboxGroup.propTypes = {
   prefixCls: PropTypes.string,
   className: PropTypes.string,
   theme: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'error']),
-  type: PropTypes.oneOf(['button', 'cell']),
   shape: PropTypes.oneOf(['radius', 'round']),
+  type: PropTypes.oneOf(['button', 'cell']),
+  value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+  defaultValue: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
   block: PropTypes.bool,
   disabled: PropTypes.bool,
   compact: PropTypes.bool,
@@ -92,8 +94,10 @@ CheckboxGroup.defaultProps = {
   prefixCls: 'za-checkbox-group',
   className: null,
   theme: 'primary',
-  type: null,
   shape: null,
+  type: null,
+  value: null,
+  defaultValue: null,
   block: false,
   disabled: false,
   compact: false,
diff --git a/components/Input/Input.jsx b/components/Input/Input.jsx
index 6547da892..2aa57a35c 100644
--- a/components/Input/Input.jsx
+++ b/components/Input/Input.jsx
@@ -114,8 +114,10 @@ Input.propTypes = {
   className: PropTypes.string,
   type: PropTypes.string,
   disabled: PropTypes.bool,
+  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   autosize: PropTypes.bool,
   showLength: PropTypes.bool,
+  onChange: PropTypes.func,
 };
 
 Input.defaultProps = {
@@ -123,8 +125,10 @@ Input.defaultProps = {
   className: null,
   type: 'text',
   disabled: false,
+  rows: null,
   autosize: false,
   showLength: false,
+  onChange() {},
 };
 
 export default Input;
diff --git a/components/Stepper/Stepper.jsx b/components/Stepper/Stepper.jsx
index ae58d83d7..f345ddde1 100644
--- a/components/Stepper/Stepper.jsx
+++ b/components/Stepper/Stepper.jsx
@@ -112,7 +112,7 @@ Stepper.propTypes = {
   className: PropTypes.string,
   theme: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'error']),
   size: PropTypes.oneOf(['xl', 'lg', 'sm', 'xs']),
-  shape: PropTypes.oneOf(['radius', 'round', 'circle']),
+  shape: PropTypes.oneOf(['radius', 'circle']),
   disabled: PropTypes.bool,
   step: PropTypes.number,
   min: PropTypes.number,
diff --git a/components/Switch/Switch.jsx b/components/Switch/Switch.jsx
index 84f7c442d..6ade9b82f 100644
--- a/components/Switch/Switch.jsx
+++ b/components/Switch/Switch.jsx
@@ -38,7 +38,7 @@ class Switch extends PureComponent {
   }
 
   render() {
-    const { prefixCls, className, theme, size, shape, disabled } = this.props;
+    const { prefixCls, className, theme, size, disabled } = this.props;
     const { checked } = this.state;
 
     const cls = classnames({
@@ -46,7 +46,6 @@ class Switch extends PureComponent {
       [className]: !!className,
       [`theme-${theme}`]: !!theme,
       [`size-${size}`]: !!size,
-      [`shape-${shape}`]: !!shape,
       checked,
       disabled,
     });
@@ -63,7 +62,6 @@ Switch.propTypes = {
   prefixCls: PropTypes.string,
   className: PropTypes.string,
   theme: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'error']),
-  shape: PropTypes.oneOf(['radius', 'round', 'circle']),
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
 };
@@ -73,7 +71,6 @@ Switch.defaultProps = {
   className: null,
   theme: 'primary',
   size: null,
-  shape: null,
   disabled: false,
   onChange() {},
 };
diff --git a/docs/zh-cn/SUMMARY.md b/docs/zh-cn/SUMMARY.md
index 490d32cbf..fdc481950 100644
--- a/docs/zh-cn/SUMMARY.md
+++ b/docs/zh-cn/SUMMARY.md
@@ -12,4 +12,11 @@
   * [文本框 Input](components/Input.md)
   * [选择器 Picker](components/Picker.md)
   * [单选框 Radio](components/Radio.md)
+  * [步进器 Stepper](components/Stepper.md)
+  * [开关 Switch](components/Switch.md)
+  * [上传组件 Uploader](components/Uploader.md)
+
+* 操作反馈
+  * [动作面板 ActionSheet](components/ActionSheet.md)
+  * [按钮 Button](components/Button.md)
 
diff --git a/docs/zh-cn/components/ActionSheet.md b/docs/zh-cn/components/ActionSheet.md
new file mode 100644
index 000000000..b673c3edc
--- /dev/null
+++ b/docs/zh-cn/components/ActionSheet.md
@@ -0,0 +1,85 @@
+# 动作面板 ActionSheet
+
+[demo页面](https://zhongantecheng.github.io/zarm/#/actionsheet)
+
+### 引入
+
+```js
+import { ActionSheet } from 'zarm';
+```
+
+### 代码演示
+
+#### 基本用法
+
+###### 普通
+```jsx
+<ActionSheet
+  visible={this.state.visible}
+  onMaskClick={() => {
+    this.setState({
+      visible: false,
+    });
+  }}
+  actions={[
+    {
+      text: '操作一',
+      onClick: () => console.log('点击操作一'),
+    },
+    {
+      text: '操作二',
+      onClick: () => console.log('点击操作二'),
+    },
+  ]}
+  />
+```
+
+###### 带取消操作
+```jsx
+<ActionSheet
+  visible={this.state.visible}
+  onMaskClick={() => {
+    this.setState({
+      visible: false,
+    });
+  }}
+  actions={[
+    {
+      text: '操作一',
+      onClick: () => console.log('点击操作一'),
+    },
+    {
+      text: '操作二',
+      onClick: () => console.log('点击操作二'),
+    },
+    {
+      theme: 'error',
+      text: '操作三',
+      onClick: () => console.log('点击操作三'),
+    },
+  ]}
+  onCancel={() => {
+    this.setState({
+      visible: false,
+    });
+  }}
+  />
+```
+
+
+### API
+
+| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| prefixCls | string | za-switch | | 类名前缀 |
+| className | string | null | | 追加类名 |
+| shape | string | null | 'radius' | 形状 |
+| visible | bool | false | | 是否显示 |
+| actions | arrayOf(object) | [ ] | object: { theme, text, onClick } | 动作列表 |
+| onMaskClick | func | noop | | 点击遮罩层时触发的回调函数 |
+| onCancel | func | null | void | 显示取消菜单，点击时触发的回调函数 |
+| cancelText | string | '取消' |  | 取消菜单的文案 |
+
+
+
+
diff --git a/docs/zh-cn/components/Button.md b/docs/zh-cn/components/Button.md
new file mode 100644
index 000000000..76b248e3f
--- /dev/null
+++ b/docs/zh-cn/components/Button.md
@@ -0,0 +1,87 @@
+# 按钮 Button
+
+[demo页面](https://zhongantecheng.github.io/zarm/#/button)
+
+### 引入
+
+```js
+import { Button } from 'zarm';
+```
+
+### 代码演示
+
+#### 基本用法
+
+###### 普通
+```jsx
+<Button>普通按钮</Button>
+```
+
+###### 幽灵按钮
+```jsx
+<Button bordered>幽灵按钮</Button>
+```
+
+###### 块级按钮
+```jsx
+<Button block>幽灵按钮</Button>
+```
+
+###### 禁用状态
+```jsx
+<Button disabled>禁用按钮</Button>
+```
+
+#### 多主题
+```jsx
+<Button>default</Button>
+<Button theme="primary">primary</Button>
+<Button theme="info">info</Button>
+<Button theme="success">success</Button>
+<Button theme="warning">warning</Button>
+<Button theme="error">error</Button>
+```
+
+#### 按钮大小
+```jsx
+<Button size="xl">超大号</Button>
+<Button size="lg">大号</Button>
+<Button>默认</Button>
+<Button size="sm">小号</Button>
+<Button size="xs">超小号</Button>
+```
+
+#### 多形状
+```jsx
+<Button shape="radius">圆角按钮</Button>
+<Button shape="round">椭圆角按钮</Button>
+<Button shape="circle">圆形按钮</Button>
+```
+
+#### 带icon的按钮
+```jsx
+<Button icon={<Icon type="right-round" theme="success" />}>正确</Button>
+<Button icon={<Icon type="wrong-round" theme="error" />}>错误</Button>
+<Button loading>加载中</Button>
+```
+
+
+### API
+
+| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| prefixCls | string | za-button | | 类名前缀 |
+| className | string | null | | 追加类名 |
+| theme | string | primary | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 |
+| size | string | null | 'xl', 'lg', 'sm', 'xs' | 大小 |
+| shape | string | null | 'radius', 'round', 'circle' | 形状 |
+| block | bool | false | | 是否为块级元素 |
+| bordered | bool | false | | 是否是幽灵按钮 |
+| disabled | bool | false | | 是否禁用 |
+| loading | bool | false | | 是否显示加载中 |
+| icon | React.element | null | | icon |
+| onChange | func | noop | \(value: bool\) | 值变化时触发的回调函数 |
+
+
+
+
diff --git a/docs/zh-cn/components/Checkbox.md b/docs/zh-cn/components/Checkbox.md
index 1f0633c8f..621bccdea 100644
--- a/docs/zh-cn/components/Checkbox.md
+++ b/docs/zh-cn/components/Checkbox.md
@@ -12,14 +12,12 @@ import { Checkbox } from 'zarm';
 
 #### 基本用法
 
-单独使用
-
+###### 单独使用
 ```jsx
 <Checkbox onChange={checked => console.log(`checkbox to ${checked}`)}>同意条款</Checkbox>
 ```
 
-组合使用
-
+###### 组合使用
 ```jsx
 <Checkbox.Group
   value={this.state.value}
@@ -36,8 +34,7 @@ import { Checkbox } from 'zarm';
 
 #### 按钮样式
 
-普通
-
+###### 普通
 ```jsx
 <Checkbox.Group type="button">
   <Checkbox value="0">选项一</Checkbox>
@@ -46,8 +43,7 @@ import { Checkbox } from 'zarm';
 </Checkbox.Group>
 ```
 
-指定默认值
-
+###### 指定默认值
 ```jsx
 <Checkbox.Group type="button" defaultValue={['0', '1']}>
   <Checkbox value="0">选项一</Checkbox>
@@ -56,8 +52,7 @@ import { Checkbox } from 'zarm';
 </Checkbox.Group>
 ```
 
-禁用指定项
-
+###### 禁用指定项
 ```jsx
 <Checkbox.Group type="button">
   <Checkbox value="0">选项一</Checkbox>
@@ -66,8 +61,7 @@ import { Checkbox } from 'zarm';
 </Checkbox.Group>
 ```
 
-圆角
-
+###### 圆角
 ```jsx
 <Checkbox.Group type="button" shape="radius">
   <Checkbox value="0">选项一</Checkbox>
@@ -76,8 +70,7 @@ import { Checkbox } from 'zarm';
 </Checkbox.Group>
 ```
 
-椭圆角
-
+###### 椭圆角
 ```jsx
 <Checkbox.Group type="button" shape="round">
   <Checkbox value="0">选项一</Checkbox>
@@ -87,9 +80,8 @@ import { Checkbox } from 'zarm';
 ```
 
 #### 块级样式
-
 ```jsx
-<Checkbox.Group block shape="radius">
+<Checkbox.Group block type="button">
   <Checkbox value="0">选项一</Checkbox>
   <Checkbox value="1">选项二</Checkbox>
   <Checkbox value="2">选项三</Checkbox>
@@ -98,8 +90,7 @@ import { Checkbox } from 'zarm';
 
 #### 列表样式
 
-普通
-
+###### 普通
 ```jsx
 <Checkbox.Group type="cell">
   <Checkbox value="0">选项一</Checkbox>
@@ -108,8 +99,7 @@ import { Checkbox } from 'zarm';
 </Checkbox.Group>
 ```
 
-禁用状态
-
+###### 禁用状态
 ```jsx
 <Checkbox.Group disabled type="cell">
   <Checkbox value="0">选项一</Checkbox>
@@ -126,12 +116,11 @@ import { Checkbox } from 'zarm';
 | 属性 | 类型 | 默认值 | 可选值／参数 | 说明 |
 | :--- | :--- | :--- | :--- | :--- |
 | prefixCls | string | za-checkbox | | 类名前缀 |
-| className | string | 无 | | 追加类名 |
+| className | string | null | | 追加类名 |
 | theme | string | primary | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 |
-| type | string | 无 | 'button', 'cell' | 显示类型 |
-| value | string, number | 无 | | 值 |
+| type | string | null | 'button', 'cell' | 显示类型 |
+| checked | bool | false | | 是否选中 |
 | defaultChecked | bool | false | | 初始是否选中 |
-| checked | bool | false | | 当前是否选中 |
 | disabled | bool | false | | 是否禁用 |
 | onChange | func | noop | \(checked: bool\) | 值变化时触发的回调函数 |
 
@@ -140,11 +129,12 @@ import { Checkbox } from 'zarm';
 | 属性 | 类型 | 默认值 | 可选值／参数 | 说明 |
 | :--- | :--- | :--- | :--- | :--- |
 | prefixCls | string | za-checkbox | | 类名前缀 |
-| className | string | 无 | | 追加类名 |
+| className | string | null | | 追加类名 |
 | theme | string | primary | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 |
-| type | string | 无 | 'button', 'cell' | 显示类型 |
-| value | array | [] | | 选中值 |
-| shape | string | 无 | 'radius', 'round' | 形状 |
+| shape | string | null | 'radius', 'round' | 形状 |
+| type | string | null | 'button', 'cell' | 显示类型 |
+| value | array | [ ] | | 选中值 |
+| defaultValue | array | [ ] | | 初始选中值 |
 | block | bool | false | | 是否为块级元素 |
 | disabled | bool | false | | 是否禁用 |
 | onChange | func | noop | \(value: array\) | 值变化时触发的回调函数 |
diff --git a/docs/zh-cn/components/Input.md b/docs/zh-cn/components/Input.md
index 995caecc6..d9e2dc1ae 100644
--- a/docs/zh-cn/components/Input.md
+++ b/docs/zh-cn/components/Input.md
@@ -12,33 +12,22 @@ import { Input } from 'zarm';
 
 #### 基本用法
 
-单行文本
-
+###### 单行文本
 ```jsx
 <Input type="text" placeholder="type is text" />
 ```
 
-多行文本
-
+###### 多行文本
 ```jsx
 <Input type="textarea" rows="3" placeholder="type is textarea" />
 ```
 
 #### 高度自适应
-
 ```jsx
 <Input autosize type="textarea" rows="3" placeholder="写点啥..." />
 ```
 
-#### 无标签栏
-
-```jsx
-<Cell><Input type="text" placeholder="标题" /></Cell>
-<Cell><Input autosize type="textarea" rows="4" maxLength="200" placeholder="摘要" /></Cell>
-```
-
 #### 显示输入字数
-
 ```jsx
 <Input autosize showLength type="textarea" rows="4" maxLength="200" placeholder="摘要" />
 ```
@@ -49,12 +38,12 @@ import { Input } from 'zarm';
 | 属性 | 类型 | 默认值 | 可选值／参数 | 说明 |
 | :--- | :--- | :--- | :--- | :--- |
 | prefixCls | string | za-input | | 类名前缀 |
-| className | string | 无 | | 追加类名 |
+| className | string | null | | 追加类名 |
 | type | string | text | | 显示类型 |
-| value | string | 无 | | 值 |
-| defaultValue | string | 无 | | 初始值 |
+| value | string |  | | 值 |
+| defaultValue | string |  | | 初始值 |
 | disabled | bool | false | | 是否禁用 |
-| rows | string, number | 无 | | 多行文本时的显示行数 |
+| rows | string, number | null | | 多行文本时的显示行数 |
 | autosize | bool | false | | 是否高度自适应 |
 | showLength | bool | false | | 是否显示输入字数 |
 | onChange | func | noop | \(value: string\) | 值变化时触发的回调函数 |
diff --git a/docs/zh-cn/components/Picker.md b/docs/zh-cn/components/Picker.md
index 72de6c127..068675ebf 100644
--- a/docs/zh-cn/components/Picker.md
+++ b/docs/zh-cn/components/Picker.md
@@ -13,8 +13,7 @@ import { Picker } from 'zarm';
 #### 基本用法
 
 
-单列
-
+###### 单列
 ```jsx
 <Picker
   dataSource={[
@@ -33,8 +32,7 @@ import { Picker } from 'zarm';
 ```
 
 
-多列
-
+###### 多列
 ```jsx
 <Picker
   dataSource={[
@@ -50,8 +48,7 @@ import { Picker } from 'zarm';
   />
 ```
 
-多列联动
-
+###### 多列联动
 ```jsx
 <Picker
   dataSource={[
@@ -75,8 +72,7 @@ import { Picker } from 'zarm';
   />
 ```
 
-指定默认值
-
+###### 指定默认值
 ```jsx
 <Picker
   dataSource={[
@@ -101,8 +97,7 @@ import { Picker } from 'zarm';
   />
 ```
 
-禁止修改
-
+###### 禁止修改
 ```jsx
 <Picker
   disabled
@@ -114,8 +109,7 @@ import { Picker } from 'zarm';
   />
 ```
 
-自定义格式
-
+###### 自定义格式
 ```jsx
 <Picker
   visible={diy.visible}
@@ -156,22 +150,19 @@ import { Picker } from 'zarm';
 
 #### 城市选择器
 
-省市选择
-
+###### 省市选择
 ```jsx
 <Picker dataSource={District} cols={2} />
 ```
 
-省市区选择
-
+###### 省市区选择
 ```jsx
 <Picker dataSource={District} />
 ```
 
 #### 日期选择器
 
-年份选择
-
+###### 年份选择
 ```jsx
 <Picker.Date
   title="选择年份"
@@ -181,8 +172,7 @@ import { Picker } from 'zarm';
   />
 ```
 
-日期选择
-
+###### 日期选择
 ```jsx
 <Picker.Date
   title="选择日期"
@@ -191,8 +181,7 @@ import { Picker } from 'zarm';
   />
 ```
 
-时间选择
-
+###### 时间选择
 ```jsx
 <Picker.Date
   title="选择时间"
@@ -202,14 +191,12 @@ import { Picker } from 'zarm';
   />
 ```
 
-日期&时间
-
+###### 日期&时间
 ```jsx
 <Picker.Date mode="datetime" />
 ```
 
-自定义格式
-
+###### 自定义格式
 ```jsx
 <Picker.Date
   title="选择日期"
@@ -221,8 +208,7 @@ import { Picker } from 'zarm';
 
 #### 层叠式选择器
 
-级联选择
-
+###### 级联选择
 ```jsx
 <Picker.Stack
   dataSource={District}
@@ -238,29 +224,29 @@ import { Picker } from 'zarm';
 | 属性 | 类型 | 默认值 | 可选值／参数 | 说明 |
 | :--- | :--- | :--- | :--- | :--- |
 | prefixCls | string | za-picker | | 类名前缀 |
-| className | string | 无 | | 追加类名 |
-| dataSource | array | [] | | 数据源 |
+| className | string | null | | 追加类名 |
+| dataSource | array | [ ] | | 数据源 |
 | visible | bool | false | | 是否显示 |
-| value | array, string | 无 | | 值 |
-| defaultValue | array, string | 无 | | 初始是否选中 |
-| valueMember | string | value | | 值字段对应的key |
-| displayMember | string | label | | 选项列表显示字段对应的key |
+| value | array, string |  | | 值 |
+| defaultValue | array, string |  | | 初始是否选中 |
+| valueMember | string | 'value' | | 值字段对应的key |
+| displayMember | string | 'label' | | 选项列表显示字段对应的key |
 | disabled | bool | false | | 是否禁用 |
-| title | string | 请选择 | | 选择器标题 |
-| placeholder | string | 请选择 | | 输入提示信息 |
+| title | string | '请选择' | | 选择器标题 |
+| placeholder | string | '请选择' | | 输入提示信息 |
 | displayRender | func | noop | | 所选值渲染 |
-| cols | number | 无 | | 级联选择器的级数 |
+| cols | number | null | | 级联选择器的级数 |
 | onChange | func | noop | \(selected: object\) | 值变化时触发的回调函数 |
 | onOk | func | noop | \(selected: object\) | 点击确定时触发的回调函数 |
 | onCancel | func | noop | \(selected: object\) | 点击取消时触发的回调函数 |
-| onMaskClick | func | noop | 无 | 点击遮罩层时触发的回调函数 |
+| onMaskClick | func | noop | | 点击遮罩层时触发的回调函数 |
 
 #### Picker.Date 额外的属性
 
 | 属性 | 类型 | 默认值 | 可选值／参数 | 说明 |
 | :--- | :--- | :--- | :--- | :--- |
 | mode | string | date | `year`, `date`, `time` | 指定日期选择模式 |
-| format | string | 无 | 例：YYYY年MM月DD日<br /> 年:`YYYY`, 月:`MM`, 日:`DD`, 时:`hh`, 分:`mm`, 秒:`ss`。| 格式化显示值 |
+| format | string | null | 例：YYYY年MM月DD日<br /> 年:`YYYY`, 月:`MM`, 日:`DD`, 时:`hh`, 分:`mm`, 秒:`ss`。| 格式化显示值 |
 | minuteStep | number | 1 | | 分钟步长 |
 | wheelDefaultValue | array, string | | | 滚轮默认值 |
 
diff --git a/docs/zh-cn/components/Radio.md b/docs/zh-cn/components/Radio.md
index cd0dffa5c..2adaa0a10 100644
--- a/docs/zh-cn/components/Radio.md
+++ b/docs/zh-cn/components/Radio.md
@@ -12,8 +12,7 @@ import { Radio } from 'zarm';
 
 #### 基本用法
 
-普通
-
+###### 普通
 ```jsx
 <Radio.Group
   value={this.state.radio}
@@ -24,8 +23,7 @@ import { Radio } from 'zarm';
 </Radio.Group>
 ```
 
-指定默认值
-
+###### 指定默认值
 ```jsx
 <Radio.Group defaultValue="1">
   <Radio value="0">选项一</Radio>
@@ -34,8 +32,7 @@ import { Radio } from 'zarm';
 </Radio.Group>
 ```
 
-禁用指定项
-
+###### 禁用指定项
 ```jsx
 <Radio.Group>
   <Radio value="0">选项一</Radio>
@@ -44,8 +41,7 @@ import { Radio } from 'zarm';
 </Radio.Group>
 ```
 
-圆角
-
+###### 圆角
 ```jsx
 <Radio.Group shape="radius">
   <Radio value="0">选项一</Radio>
@@ -54,8 +50,7 @@ import { Radio } from 'zarm';
 </Radio.Group>
 ```
 
-椭圆角
-
+###### 椭圆角
 ```jsx
 <Radio.Group type="button" shape="round">
   <Radio value="0">选项一</Radio>
@@ -65,7 +60,6 @@ import { Radio } from 'zarm';
 ```
 
 #### 块级样式
-
 ```jsx
 <Radio.Group block compact shape="radius">
   <Radio value="0">选项一</Radio>
@@ -76,8 +70,7 @@ import { Radio } from 'zarm';
 
 #### 列表样式
 
-普通
-
+###### 普通
 ```jsx
 <Radio.Group type="cell">
   <Radio value="0">选项一</Radio>
@@ -86,8 +79,7 @@ import { Radio } from 'zarm';
 </Radio.Group>
 ```
 
-禁用状态
-
+###### 禁用状态
 ```jsx
 <Radio.Group disabled type="cell">
   <Radio value="0">选项一</Radio>
diff --git a/docs/zh-cn/components/Stepper.md b/docs/zh-cn/components/Stepper.md
new file mode 100644
index 000000000..dc5722ea4
--- /dev/null
+++ b/docs/zh-cn/components/Stepper.md
@@ -0,0 +1,76 @@
+# 步进器 Stepper
+
+[demo页面](https://zhongantecheng.github.io/zarm/#/stepper)
+
+### 引入
+
+```js
+import { Stepper } from 'zarm';
+```
+
+### 代码演示
+
+#### 基本用法
+
+###### 普通
+```jsx
+<Stepper
+  value={this.state.value}
+  onChange={(value) => {
+    this.setState({ value });
+  }}
+  />
+```
+
+###### 设置默认值
+```jsx
+<Stepper defaultValue={2} />
+```
+
+###### 设置上下限
+```jsx
+<Stepper min={-3} max={3} />
+```
+
+###### 设置步长
+```jsx
+<Stepper step={0.5} />
+```
+
+###### 禁用状态
+```jsx
+<Stepper disabled />
+```
+
+#### 多形状
+
+###### 圆角
+```jsx
+<Stepper shape="radius" />
+```
+
+###### 圆形
+```jsx
+<Stepper shape="circle" />
+```
+
+
+### API
+
+| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| prefixCls | string | za-stepper | | 类名前缀 |
+| className | string | 无 | | 追加类名 |
+| theme | string | primary | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 |
+| shape | string | 无 | 'radius', 'circle' | 形状 |
+| value | string | 无 | | 值 |
+| defaultValue | string | 无 | | 初始值 |
+| disabled | bool | false | | 是否禁用 |
+| min | number | 无 | | 最小值 |
+| max | number | 无 | | 最大值 |
+| step | number | 1 | | 步长 |
+| onChange | func | noop | \(value: number\) | 值变化时触发的回调函数 |
+
+
+
+
diff --git a/docs/zh-cn/components/Switch.md b/docs/zh-cn/components/Switch.md
new file mode 100644
index 000000000..741d296d3
--- /dev/null
+++ b/docs/zh-cn/components/Switch.md
@@ -0,0 +1,50 @@
+# 开关 Switch
+
+[demo页面](https://zhongantecheng.github.io/zarm/#/switch)
+
+### 引入
+
+```js
+import { Switch } from 'zarm';
+```
+
+### 代码演示
+
+#### 基本用法
+
+###### 普通
+```jsx
+<Switch
+  checked={this.state.value}
+  onChange={(value) => {
+    this.setState({ value });
+  }}
+  />
+```
+
+###### 设置默认值（开启）
+```jsx
+<Switch defaultChecked />
+```
+
+###### 禁用状态
+```jsx
+<Switch disabled />
+```
+
+
+### API
+
+| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| prefixCls | string | za-switch | | 类名前缀 |
+| className | string | 无 | | 追加类名 |
+| theme | string | primary | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 |
+| checked | bool | false | | 值 |
+| defaultChecked | bool | false | | 初始值 |
+| disabled | bool | false | | 是否禁用 |
+| onChange | func | noop | \(value: bool\) | 值变化时触发的回调函数 |
+
+
+
+
diff --git a/docs/zh-cn/components/Uploader.md b/docs/zh-cn/components/Uploader.md
new file mode 100644
index 000000000..af5f83be8
--- /dev/null
+++ b/docs/zh-cn/components/Uploader.md
@@ -0,0 +1,63 @@
+# 上传组件 Uploader
+
+[demo页面](https://zhongantecheng.github.io/zarm/#/uploader)
+
+### 引入
+
+```js
+import { Uploader } from 'zarm';
+```
+
+### 代码演示
+
+#### 基本用法
+
+###### 普通
+```jsx
+<Uploader
+  onChange={(file) => {
+    console.log(file);
+  }}>
+  选择文件
+</Uploader>
+```
+
+###### 设置允许上传的附件格式
+```jsx
+<Uploader accept="image/jpg, image/jpeg, image/gif, image/png">
+  选择文件
+</Uploader>
+```
+
+###### 允许多选
+```jsx
+<Uploader multiple>选择文件</Uploader>
+```
+
+###### 选择前的触发事件
+```jsx
+<Uploader onBeforeSelect={() => alert('执行 onBeforeSelect 方法')}>选择文件</Uploader>
+```
+
+###### 禁用状态
+```jsx
+<Uploader disabled>选择文件</Uploader>
+```
+
+
+### API
+
+| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| prefixCls | string | za-uploader | | 类名前缀 |
+| className | string | 无 | | 追加类名 |
+| accept | string | 无 | | 允许上传的附件格式 |
+| multiple | bool | false | | 是否多选 |
+| capture | string | 无 | 照相机`camera`, 摄像机`camcorder`, 录音`microphone`| 唤起的原生应用 |
+| disabled | bool | false | | 是否禁用 |
+| onBeforeSelect | func | noop | | 选择前触发的事件 |
+| onChange | func | noop | \(value: bool\) | 值变化时触发的回调函数 |
+
+
+
+
diff --git a/examples/pages/ActionSheetPage.jsx b/examples/pages/ActionSheetPage.jsx
index 9dd620581..d8815444b 100644
--- a/examples/pages/ActionSheetPage.jsx
+++ b/examples/pages/ActionSheetPage.jsx
@@ -39,7 +39,7 @@ class Page extends Component {
               <Cell
                 description={
                   <Button size="xs" onClick={() => this.toggle('visible2')}>开启</Button>
-                }>无取消操作</Cell>
+                }>带取消操作</Cell>
             </Panel.Body>
           </Panel>
 
@@ -55,13 +55,7 @@ class Page extends Component {
                 text: '操作二',
                 onClick: () => console.log('点击操作二'),
               },
-              {
-                theme: 'error',
-                text: '操作三',
-                onClick: () => console.log('点击操作三'),
-              },
             ]}
-            onCancel={() => this.toggle('visible1')}
             />
 
           <ActionSheet
@@ -76,7 +70,13 @@ class Page extends Component {
                 text: '操作二',
                 onClick: () => console.log('点击操作二'),
               },
+              {
+                theme: 'error',
+                text: '操作三',
+                onClick: () => console.log('点击操作三'),
+              },
             ]}
+            onCancel={() => this.toggle('visible2')}
             />
         </main>
         <Footer />
diff --git a/examples/pages/ButtonPage.jsx b/examples/pages/ButtonPage.jsx
index 5f07cdafc..51220c678 100644
--- a/examples/pages/ButtonPage.jsx
+++ b/examples/pages/ButtonPage.jsx
@@ -67,7 +67,7 @@ class Page extends Component {
 
           <Panel>
             <Panel.Header>
-              <Panel.Title>圆角、椭圆角、圆形按钮</Panel.Title>
+              <Panel.Title>多形状</Panel.Title>
             </Panel.Header>
             <Panel.Body>
               <Button bordered shape="radius">圆角按钮</Button>
diff --git a/examples/pages/StepperPage.jsx b/examples/pages/StepperPage.jsx
index 6a303c19f..ece2984a9 100644
--- a/examples/pages/StepperPage.jsx
+++ b/examples/pages/StepperPage.jsx
@@ -38,50 +38,28 @@ class Page extends Component {
               <Cell
                 title="设置默认值"
                 description={
-                  <Stepper
-                    defaultValue={2}
-                    onChange={(value) => {
-                      console.log(value);
-                    }}
-                    />
+                  <Stepper defaultValue={2} />
                 }
                 />
 
               <Cell
                 title="设置上下限"
                 description={
-                  <Stepper
-                    min={-3}
-                    max={3}
-                    step={1}
-                    onChange={(value) => {
-                      console.log(value);
-                    }}
-                    />
+                  <Stepper min={-3} max={3} />
                 }
                 />
 
               <Cell
                 title="设置步长"
                 description={
-                  <Stepper
-                    step={0.5}
-                    onChange={(value) => {
-                      console.log(value);
-                    }}
-                    />
+                  <Stepper step={0.5} />
                 }
                 />
 
               <Cell
                 title="禁用状态"
                 description={
-                  <Stepper
-                    disabled
-                    onChange={(value) => {
-                      console.log(value);
-                    }}
-                    />
+                  <Stepper disabled />
                 }
                 />
             </Panel.Body>
@@ -95,24 +73,14 @@ class Page extends Component {
               <Cell
                 title="圆角"
                 description={
-                  <Stepper
-                    shape="radius"
-                    onChange={(value) => {
-                      console.log(value);
-                    }}
-                    />
+                  <Stepper shape="radius" />
                 }
                 />
 
               <Cell
-                title="圆型"
+                title="圆形"
                 description={
-                  <Stepper
-                    shape="circle"
-                    onChange={(value) => {
-                      console.log(value);
-                    }}
-                    />
+                  <Stepper shape="circle" />
                 }
                 />
             </Panel.Body>
diff --git a/examples/pages/SwitchPage.jsx b/examples/pages/SwitchPage.jsx
index b3190501f..f47252af4 100644
--- a/examples/pages/SwitchPage.jsx
+++ b/examples/pages/SwitchPage.jsx
@@ -29,7 +29,14 @@ class Page extends Component {
               <Panel.Title>基本</Panel.Title>
             </Panel.Header>
             <Panel.Body>
-              <Cell description={<Switch />}>默认关</Cell>
+              <Cell description={
+                <Switch
+                  value={this.state.value}
+                  onChange={(value) => {
+                    this.setState({ value });
+                  }}
+                  />
+              }>普通</Cell>
               <Cell description={<Switch defaultChecked />}>默认开</Cell>
               <Cell description={<Switch disabled />}>禁用的开关（默认关）</Cell>
               <Cell description={<Switch defaultChecked disabled />}>禁用的开关（默认开）</Cell>