Merge branch 'dev' into dev_docs_basic

jd-opensource · Aug 10, 2018 · 0993a2e · 0993a2e
2 parents 881bc76 + ca42bce
commit 0993a2e
Show file tree

Hide file tree

Showing 118 changed files with 2,592 additions and 998 deletions.
diff --git a/docs/markdown/checkbox.md b/docs/markdown/checkbox.md
@@ -0,0 +1,59 @@
+# Checkbox 多选框
+
+---
+Checkbox 多选框
+
+以下文档指示例子，请根据具体组件编写
+
+## 使用指南
+
+在 Taro 文件中引入组件
+
+:::demo
+
+```js
+import AtCheckbox from 'taro-ui'
+```
+
+:::
+
+## 一般用法
+
+:::demo
+
+```jsx
+<AtCheckbox
+  options={[
+    { value: 'apple', label: '苹果', desc: '苹果味甘、酸，性凉，归脾、肺经；具有生津、润肺，除烦解暑，开胃、醒酒，止泻的功效；' },
+    { value: 'pear', label: '梨子' },
+    { value: 'pineapple', label: '菠萝', desc: '菠萝原生长在半荫的热带雨林，较耐阴，由于长期人工栽培驯化而对光照要求增加，充足的光照下生长良好、果实含糖量高、品质佳' }
+  ]}
+  selectedList={this.state.checkedList}
+  onChange={val => this.setState({checkedList:val})} />
+
+
+```
+
+:::
+
+## 参数
+
+| 参数       | 说明                                   | 类型    | 可选值                                                              | 默认值   |
+| ---------- | -------------------------------------- | ------- | ------------------------------------------------------------------- | -------- |
+| selectedList | 被选中的选项列表 eg: `['苹果']`  | Array  | - | - |
+| options  | object选项列表，object 字段详细看下表  | Array | - | - |
+
+## options object字段详解
+
+| 参数       | 说明                                   | 类型    | 可选值                                                              | 默认值   | 可选或必填
+| ---------- | -------------------------------------- | ------- | ------------------------------------------------------------------- | -------- |-------- |
+| value | 选项标识符，必须保证唯一  | String  | - | - | 必填 |
+| label  | 选项标题  | String | - | - | 必填|
+| desc  | 选项描述，显示在标题下方的文字  | String | - | - | 可选|
+| disabled  | 是否禁止点击  | Boolean | - | false | 可选|
+
+## 事件
+
+| 事件名称 | 说明          | 返回参数  |
+|---------- |-------------- |---------- |
+| onChange | 输入框值改变时触发的事件 | 选中的value列表  |
diff --git a/docs/markdown/input-number.md b/docs/markdown/input-number.md
@@ -0,0 +1,66 @@
+# InputNumber 输入框
+
+---
+数字输入框
+
+以下文档指示例子，请根据具体组件编写
+
+## 使用指南
+
+在 Taro 文件中引入组件
+
+:::demo
+
+```js
+import AtInputNumber from 'taro-ui'
+```
+
+:::
+
+## 一般用法
+
+:::demo
+
+```html
+<AtInputNumber min={0} max={10} step={1} value={this.state.number} onChange={val => this.setState({number:val})} />
+
+
+```
+
+:::
+
+## 每次增加0.1
+
+:::demo
+
+```html
+<AtInputNumber min={0} max={10} step={0.1} value={this.state.number} onChange={val => this.setState({number:val})} />
+```
+
+:::
+
+## 禁止状态
+
+:::demo
+
+```html
+<AtInputNumber disabled min={0} max={10} step={1} value={this.state.number} onChange={val => this.setState({number:val})} />
+```
+
+:::
+
+## 参数
+
+| 参数       | 说明                                   | 类型    | 可选值                                                              | 默认值   |
+| ---------- | -------------------------------------- | ------- | ------------------------------------------------------------------- | -------- |
+| value | 输入框值 | Number  | - | 1 |
+| min       | 最小值  | Number  | - | 0 |
+| max     | 最大值  | Number | - | 100 |
+| step   | 每次点击改变的间隔大小 | Number  | -  | 1 |
+| disabled| 是否禁止输入，禁止点击按钮  | Boolean | - | false    |
+
+## 事件
+
+| 事件名称 | 说明          | 返回参数  |
+|---------- |-------------- |---------- |
+| onChange | 输入框值改变时触发的事件 | 输入框当前值value  |
diff --git a/docs/markdown/input.md b/docs/markdown/input.md
@@ -0,0 +1,95 @@
+# Button 按钮
+
+---
+
+按钮用于传递用户触摸时会触发的操作
+
+以下文档指示例子，请根据具体组件编写
+
+## 使用指南
+
+在 Taro 文件中引入组件
+
+:::demo
+
+```js
+import AtInput from 'taro-ui'
+```
+
+:::
+
+## 一般用法
+
+:::demo
+
+```html
+<AtInput name='value' title='标准五个字' type='text' placeholder='标准五个字' value={this.state.value} onChange={val => this.setState({'value':val})} />
+
+```
+
+:::
+
+## 不同输入框类型
+
+:::demo
+
+```html
+<AtInput title='文本' type='text' placeholder='单行文本' />
+<AtInput title='数字' type='number' placeholder='请输入数字'/>
+<AtInput title='密码' type='password' placeholder='密码不能少于10位数'/>
+<AtInput title='身份证' type='idcard' placeholder='身份证号码' />
+<AtInput title='小数' type='digit' placeholder='请输入小数' />
+<AtInput title='手机号码' type='phone' placeholder='手机号码' />
+```
+
+:::
+
+## 不同状态
+
+:::demo
+
+```html
+<AtInput error title='出现错误' type='text' placeholder='点击按钮触发回调'/>
+<AtInput editable={false} title='不可编辑' type='text' placeholder='不可编辑'/>
+<AtInput clear title='清除按钮' type='text' placeholder='点击清除按钮清空内容' />
+```
+
+:::
+
+## 自定义右边栏
+
+:::demo
+
+```html
+
+<AtInput title='验证码' type='text' maxlength='4' clear placeholder='验证码' >
+  <Image src={verificationCode} />
+</AtInput>
+```
+
+:::
+
+## Input 参数
+
+| 参数       | 说明                                   | 类型    | 可选值                                                              | 默认值   |
+| ---------- | -------------------------------------- | ------- | ------------------------------------------------------------------- | -------- |
+| name       | 输入框的唯一标识，有传入点击title会聚焦输入框 | String  | - | - |
+| type     | 输入框类型 | String | `text`,`number`,`password`,`phone`,`idcard`,`digit` | `text` |
+| value | 输入框值 | String  | - | - |
+| placeholder       | 占位符  | String  | - | - |
+| title     | 输入框左侧标题，若传入为空，则不显示标题  | String | - | -  |
+| maxlength       | 最大长度 | Number  | -  | 140      |
+| disabled    | 是否禁止输入，禁止点击按钮  | Boolean | - | false    |
+| editable     | 是否可编辑 | Boolean | - | True |
+| error     | 是否出现错误 | Boolean | - | false |
+| clear     | 是否显示清除按钮 | Boolean | - | false |
+| autoFocus     | 是否自动聚焦 | Boolean | - | false |
+
+## Input 事件
+
+| 事件名称 | 说明          | 返回参数  |
+|---------- |-------------- |---------- |
+| onChange | 输入框值改变时触发的事件 | 输入框当前值value  |
+| onFocus | 输入框被选中时触发的事件 | 输入框当前值value  |
+| onBlur | 输入框失去焦点时触发的事件 | 输入框当前值value  |
+| onErrorClick | 点击错误按钮触发的事件 | -  |
diff --git a/docs/markdown/navbar.md b/docs/markdown/navbar.md
@@ -0,0 +1,57 @@
+# NavBar 导航栏组件
+
+---
+NavBar 导航栏组件
+
+以下文档指示例子，请根据具体组件编写
+
+## 使用指南
+
+在 Taro 文件中引入组件
+
+:::demo
+
+```js
+import AtNavBar from 'taro-ui'
+```
+
+:::
+
+## 一般用法
+
+:::demo
+
+```jsx
+<AtNavBar
+  onClickRgIconSt={() => console.log(1)}
+  onClickRgIconNd={() => console.log(2)}
+  onClickLeftIcon={() => console.log(3)}
+  color='#000'
+  title='NavBar 导航栏示例'
+  leftText='返回'
+  rightFirstIconType='bullet-list'
+  rightSecondIconType='user'
+/>
+```
+
+:::
+
+## 参数
+
+| 参数       | 说明                                   | 类型    | 可选值                                                              | 默认值   |
+| ---------- | -------------------------------------- | ------- | ------------------------------------------------------------------- | -------- |
+| color | 链接文字跟图标颜色，不包括标题 | Number  | - | `#6190E8` |
+| fixed | 是否固定顶部  | Boolean | - | false |
+| leftIconType  | 左边图标类型，图标类型请看`AtIcon`文档  | String | - | 'chevron-left' |
+| leftText | 左边文字 | String  | - | - |
+| title | 标题文字 | String  | - | - |
+| rightFirstIconType | 从左到右，第一个图标类型，图标类型请看`AtIcon`文档 | String  | - | - |
+| rightSecondIconType | 从左到右第二个图标类型，图标类型请看`AtIcon`文档 | String  | - | - |
+
+## 事件
+
+| 事件名称 | 说明          | 返回参数  |
+|---------- |-------------- |---------- |
+| onClickLeftIcon | 左边第一个图标类型点击事件 | -  |
+| onClickRightFirstIcon | 从左到右第一个图标类型点击事件 | -  |
+| onClickRightSecondIcon | 从左到右第二个图标类型点击事件 | -  |
diff --git a/docs/markdown/progress.md b/docs/markdown/progress.md
@@ -29,7 +29,7 @@ import { AtProgress } from "taro-ui"
 | 参数          | 说明         | 类型    | 可选值                     | 默认值  |
 | ------------- | ------------ | ------- | -------------------------- | ------- |
 | color         | 元素的颜色   | String  | -                          | -       |
-| status        | 元素的状态   | String  | `active`,`fail`,`finished` | -       |
+| status        | 元素的状态   | String  | `progress`,`error`,`success` | -       |
 | percent       | 元素的进度   | Number  | -                          | -       |
 | strokeWidth   | 元素的规格   | Number  | -                          | -       |
 | isHidePercent | 是否隐藏文字 | Boolean | -                          | `false` |
diff --git a/docs/markdown/radio.md b/docs/markdown/radio.md
@@ -0,0 +1,57 @@
+# Radio 单选框
+
+---
+Radio 单选框
+
+以下文档指示例子，请根据具体组件编写
+
+## 使用指南
+
+在 Taro 文件中引入组件
+
+:::demo
+
+```js
+import AtRadio from 'taro-ui'
+```
+
+:::
+
+## 一般用法
+
+:::demo
+
+```jsx
+<AtRadio options={
+    [{ label: '苹果', value: 'apple' },
+    { label: '梨子', value: 'pear' },
+    { label: '菠萝', value: 'pineapple'}]
+  }
+  value={this.state.value}
+  onClick={val => this.setState({value:val})} />
+
+```
+
+:::
+
+## 参数
+
+| 参数       | 说明                                   | 类型    | 可选值                                                              | 默认值   |
+| ---------- | -------------------------------------- | ------- | ------------------------------------------------------------------- | -------- |
+| value | 当前单选框值  | String  | - | 0 |
+| options  | object选项列表，object 字段详细看下表  | Array | - | - |
+
+## options object字段详解
+
+| 参数       | 说明                                   | 类型    | 可选值                                                              | 默认值   | 可选或必填
+| ---------- | -------------------------------------- | ------- | ------------------------------------------------------------------- | -------- |-------- |
+| value | 选项标识符，必须保证唯一  | String  | - | - | 必填 |
+| label  | 选项标题  | String | - | - | 必填|
+| desc  | 选项描述，显示在标题下方的文字  | String | - | - | 可选|
+| disabled  | 是否禁止点击  | Boolean | - | false | 可选|
+
+## 事件
+
+| 事件名称 | 说明          | 返回参数  |
+|---------- |-------------- |---------- |
+| onClick | 点击选项触发事件 | 当前值value  |