docs

ZhongAnTech · Aug 24, 2017 · ff55eea · ff55eea
1 parent ad3b3b0
commit ff55eea
Show file tree

Hide file tree

Showing 20 changed files with 467 additions and 158 deletions.
diff --git 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
@@ -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
@@ -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
@@ -114,17 +114,21 @@ 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 = {
   prefixCls: 'za-input',
   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
@@ -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
@@ -38,15 +38,14 @@ 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({
       [`${prefixCls}`]: true,
       [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
@@ -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
@@ -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
@@ -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\) | 值变化时触发的回调函数 |
+
+
+
+