Skip to content

Commit

Permalink
docs: 更新一些组件库表单组件文档
Browse files Browse the repository at this point in the history
  • Loading branch information
@jinjinjin0731
jinjinjin0731 committed Feb 27, 2019
1 parent 8289eae commit 3631a11
Show file tree
Hide file tree
Showing 10 changed files with 219 additions and 136 deletions.
9 changes: 0 additions & 9 deletions docs/components/base/text.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,6 @@ sidebar_label: Text

##### 文本

> 属性及支持度
| 微信小程序 | H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 |
| :-: | :-: | :-: | :- | :- | :- | :- |
| √ | √ | √ | selectable | Boolean | false | 文本是否可选 |
| √ | | x | space | Boolean | false | 显示连续空格 |
| √ | | x (true) | decode | Boolean | false | 是否解码 |


> 属性
| 属性名 | 类型 | 默认值 | 说明 |
Expand Down
38 changes: 21 additions & 17 deletions docs/components/forms/button.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,27 @@ sidebar_label: Button

> 属性及支持度
| 微信小程序 | H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 |
| :-: | :-: | :-: | :- | :- | :- | :- |
| √ | √ | √ | type | String | default | 按钮的样式类型 |
| √ | √ | √ | size | String | default | 按钮的大小 px |
| √ | √ | √ | plain | Boolean | false | 按钮是否镂空，背景色透明 |
| √ | √ | √ | disabled | Boolean | false | 是否禁用 |
| √ | √ | √ | loading | Boolean | false | 名称前是否带 loading 图标 |
| √ | | x | formType | String | | 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件 |
| √ | | x | openType | String | | 微信开放能力 |
| √ | | x | appParameter | String | | 打开 APP 时，向 APP 传递的参数 |
| √ | √ | x (支持 hoverStyle 属性，但框架未支持 hoverClass) | hoverClass | String | button-hover | 指定按钮按下去的样式类。当 hover-class='none' 时，没有点击态效果 |
| √ | | x | hoverStopPropagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 |
| √ | √ | √ | hoverStartTime | Number | 20 | 按住后多久出现点击态，单位毫秒 |
| √ | √ | √ | hoverStayTime | Number | 70 | 手指松开后点击态保留时间，单位毫秒 |
| √ | | x | onGetUserInfo | Handler | | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的 detail 中获取到的值同 wx.getUserInfo |
| √ | | x | onGetPhoneNumber | Handler | | 获取用户手机号回调 |
| √ | | x | lang | String | en | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 |
| H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 |
| :-: | :-: | :- | :- | :- | :- |
| ✔ | ✔ | type | String | default | 按钮的样式类型 |
| ✔ | ✔ | size | String | default | 按钮的大小 px |
| ✔ | ✔ | plain | Boolean | false | 按钮是否镂空，背景色透明 |
| ✔ | ✔ | disabled | Boolean | false | 是否禁用 |
| ✔ | ✔ | loading | Boolean | false | 名称前是否带 loading 图标 |
| ✔ | X (支持 hoverStyle 属性，但框架未支持 hoverClass) | hoverClass | String | button-hover | 指定按钮按下去的样式类。当 hover-class='none' 时，没有点击态效果 |
| ✔ | ✔ | hoverStartTime | Number | 20 | 按住后多久出现点击态，单位毫秒 |
| ✔ | ✔ | hoverStayTime | Number | 70 | 手指松开后点击态保留时间，单位毫秒 |

>其他相关属性请看各小程序官方文档
[微信小程序 Button](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。

[百度小程序 Button](https://smartprogram.baidu.com/docs/develop/component/formlist/#button)。

[支付宝小程序 Button](https://docs.alipay.com/mini/component/button)。

[字节跳动小程序 Button](https://developer.toutiao.com/docs/comp/button.html)。



###### 示例：
Expand Down
42 changes: 31 additions & 11 deletions docs/components/forms/checkbox.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,43 @@ sidebar_label: Checkbox

> 属性及支持度
| 微信小程序 | H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 |
| :-: | :-: | :-: | :- | :- | :- | :- |
| √ | √ | √ | name | String | | 表单组件中加上 name 来作为 key |
| √ | √ | √ | onChange | EventHandle | | <CheckboxGroup/>中选中项发生改变是触发 change 事件，detail = value:[选中的 Checkbox 的 value 的数组] |
| H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 |
| :-: | :-: | :- | :- | :- | :- |
| ✔ | ✔ | name | String | | 表单组件中加上 name 来作为 key |
| ✔ | ✔ | onChange | EventHandle | | <CheckboxGroup/>中选中项发生改变是触发 change 事件，detail = value:[选中的 Checkbox 的 value 的数组] |

>其他相关属性请看各小程序官方文档
[微信小程序 CheckboxGroup](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。

[百度小程序 CheckboxGroup](https://smartprogram.baidu.com/docs/develop/component/formlist/#checkbox)。

[支付宝小程序 CheckboxGroup](https://docs.alipay.com/mini/component/checkbox)。

[字节跳动小程序 CheckboxGroup](https://developer.toutiao.com/docs/comp/checkbox.html)。

### Checkbox
##### 多选项目。

> 属性及支持度
| 微信小程序 | H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 |
| :-: | :-: | :-: | :- | :- | :- | :- |
| √ | | √ | value | String | | <Checkbox/>标识，选中时触发<CheckboxGroup/>的 change 事件，并携带 <checkbox/> 的 value |
| √ | √ | √ | checked | Boolean | false | 当前是否选中 |
| √ | √ | √ | disabled | Boolean | false | 是否禁用 |
| √ | √ | √ | color | Color | | checkbox 的颜色，同 css 的 color |
| x | √ | √ | onChange | EventHandle | | 选中项发生变化时触发 change 事件，小程序无此 API |
| H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 |
| :-: | :-: | :- | :- | :- | :- |
| | ✔ | value | String | | <Checkbox/>标识，选中时触发<CheckboxGroup/>的 change 事件，并携带 <checkbox/> 的 value |
| ✔ | ✔ | checked | Boolean | false | 当前是否选中 |
| ✔ | ✔ | disabled | Boolean | false | 是否禁用 |
| ✔ | ✔ | color | Color | | checkbox 的颜色，同 css 的 color |
| ✔ | ✔ | onChange | EventHandle | | 选中项发生变化时触发 change 事件，小程序无此 API |

>其他相关属性请看各小程序官方文档
[微信小程序 Checkbox](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。

[百度小程序 Checkbox](https://smartprogram.baidu.com/docs/develop/component/formlist/#checkbox)。

[支付宝小程序 Checkbox](https://docs.alipay.com/mini/component/checkbox)。

[字节跳动小程序 Checkbox](https://developer.toutiao.com/docs/comp/checkbox.html)。

###### 示例：

Expand Down
21 changes: 16 additions & 5 deletions docs/components/forms/form.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,24 @@ sidebar_label: Form

> 属性及支持度
| 微信小程序 | H5 | ReactNative | 属性值 | 类型 | 说明 |
| :-: | :-: | :-: | :-: |:-: | :-: |
| √ | x | x | reportSubmit | Boolean | 是否返回 formId 用于发送模板消息 |
| √ | √ | √ | onSubmit | EventHandle | 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'}} |
| √ | √ | x | onReset | EventHandle | 表单重置时会触发 reset 事件 |
| H5 | ReactNative | 属性值 | 类型 | 说明 |
| :-: | :-: | :-: |:-: | :-: |
| | | reportSubmit | Boolean | 是否返回 formId 用于发送模板消息 |
| ✔ | ✔ | onSubmit | EventHandle | 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'}} |
| ✔ | | onReset | EventHandle | 表单重置时会触发 reset 事件 |

>其他相关属性请看各小程序官方文档
[微信小程序 Form](https://developers.weixin.qq.com/miniprogram/dev/component/form.html)。

[百度小程序 Form](https://smartprogram.baidu.com/docs/develop/component/formlist/#form)。

[支付宝小程序 Form](https://docs.alipay.com/mini/component/form)。

[字节跳动小程序 Form](https://developer.toutiao.com/docs/comp/form.html)。


###### 示例：
```jsx
import Taro, { Component } from '@tarojs/taro'
// 引入 Form 组件
Expand Down
97 changes: 59 additions & 38 deletions docs/components/forms/input.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,45 +6,66 @@ sidebar_label: Input

> 属性及支持度
| 微信小程序 | H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 |
| :-: | :-: | :-: | :- | :- | :- | :- |
| √ | √ | √ | value | String | | 输入框的初始内容 |
| √ | √ | x (部分支持) | type | String | 'text' | input 的类型 |
| √ | √ | √ | password | Boolean | false | 是否是密码类型 |
| √ | √ | √ | placeholder | String | | 输入框为空时占位符 |
| √ | | x | placeholderStyle | String | | 指定 placeholder 的样式 |
| √ | | x | placeholderClass | String | 'input-placeholder' | 指定 placeholder 的样式类 |
| √ | √ | √ | disabled | Boolean | false | 是否禁用 |
| √ | √ | √ | maxLength | Number | 140 | 最大输入长度，设置为 -1 的时候不限制最大长度 |
| √ | | x | cursorSpacing | Number | 0 | 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |
| √ | | x | autoFocus | Boolean | false | (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 |
| √ | √ | √ | focus | Boolean | false | 获取焦点 |
| √ | | √ | confirmType | String | 'done' | 设置键盘右下角按钮的文字 |
| √ | | √ | cursor | Number | | 指定 focus 时的光标位置 |
| √ | | √ | selectionStart | Number | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 |
| √ | | √ | selectionEnd | Number | -1 | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 |
| √ | | x | adjustPosition | Boolean | true | 键盘弹起时，是否自动上推页面 |
| √ | √ | √ | (onChange) onInput | EventHandle | | 当键盘输入时，触发 input 事件，处理函数可以直接 return 一个字符串，将替换输入框的内容。 |
| √ | √ | √ | (onFocus) onFocus | EventHandle | | 输入框聚焦时触发，height 参数在基础库 1.9.90 起支持 |
| √ | √ | √ | (onBlur) onBlur | EventHandle | | 输入框失去焦点时触发 |
| √ | | √ | onConfirm | EventHandle | | 点击完成按钮时触发。H5 版中目前需借用[Form 组件](form.html)的`onSubmit`事件来替代 |
| H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 |
| :-: | :-: | :- | :- | :- | :- |
| ✔ | ✔ | value | String | | 输入框的初始内容 |
| ✔ | X (部分支持) | type | String | 'text' | input 的类型 |
| ✔ | ✔ | password | Boolean | false | 是否是密码类型 |
| ✔ | ✔ | placeholder | String | | 输入框为空时占位符 |
| | | placeholderStyle | String | | 指定 placeholder 的样式 |
| | | placeholderClass | String | 'input-placeholder' | 指定 placeholder 的样式类 |
| ✔ | ✔ | disabled | Boolean | false | 是否禁用 |
| ✔ | ✔ | maxLength | Number | 140 | 最大输入长度，设置为 -1 的时候不限制最大长度 |
| | | cursorSpacing | Number | 0 | 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |
| | | autoFocus | Boolean | false | (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 |
| ✔ | ✔ | focus | Boolean | false | 获取焦点 |
| | ✔ | confirmType | String | 'done' | 设置键盘右下角按钮的文字 |
| | ✔ | cursor | Number | | 指定 focus 时的光标位置 |
| | ✔ | selectionStart | Number | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 |
| | ✔ | selectionEnd | Number | -1 | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 |
| | | adjustPosition | Boolean | true | 键盘弹起时，是否自动上推页面 |
| ✔ | ✔ | (onChange) onInput | EventHandle | | 当键盘输入时，触发 input 事件，处理函数可以直接 return 一个字符串，将替换输入框的内容。 |
| ✔ | ✔ | (onFocus) onFocus | EventHandle | | 输入框聚焦时触发，height 参数在基础库 1.9.90 起支持 |
| ✔ | ✔ | (onBlur) onBlur | EventHandle | | 输入框失去焦点时触发 |
| | ✔ | onConfirm | EventHandle | | 点击完成按钮时触发。H5 版中目前需借用[Form 组件](form.html)的`onSubmit`事件来替代 |

>其他相关属性请看各小程序官方文档
[微信小程序 Input](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)。

[百度小程序 Input](https://smartprogram.baidu.com/docs/develop/component/formlist/#input)。

[支付宝小程序 Input](https://docs.alipay.com/mini/component/input)。

[字节跳动小程序 Input](https://developer.toutiao.com/docs/comp/input.html)。

###### 示例：
```jsx
<Text>可以自动聚焦的 input</Text>
<Input type='text' placeholder='将会获取焦点' focus/>
<Text>控制最大输入长度的 input</Text>
<Input type='text' placeholder='最大输入长度为 10' maxLength='10'/>
<Text>实时获取输入值:{this.state.value}</Text>
<Input type='text' placeholder='输入同步到 view 中' value={this.state.value} onInput={this.onInput}/>
<Text>数字输入的 input</Text>
<Input type='number' placeholder='这是一个数字输入框'/>
<Text>密码输入的 input</Text>
<Input type='password' password placeholder='这是一个密码输入框'/>
<Text>带小数点的 input</Text>
<Input type='digit' placeholder='带小数点的数字键盘'/>
<Text>身份证输入的 input</Text>
<Input type='idcard' placeholder='身份证输入键盘'/>
<Text>控制占位符颜色的 input</Text>
<Input type='text' placeholder='占位符字体是红色的' placeholderStyle='color:red'/>
import Taro, { Component } from '@tarojs/taro'
// 引入 Form 组件
import { View, Input, Text } from '@tarojs/components'

class App extends Component {

render () {
return (
<View className='example-body'>
<Text>可以自动聚焦的 input</Text>
<Input type='text' placeholder='将会获取焦点' focus/>
<Text>控制最大输入长度的 input</Text>
<Input type='text' placeholder='最大输入长度为 10' maxLength='10'/>
<Text>数字输入的 input</Text>
<Input type='number' placeholder='这是一个数字输入框'/>
<Text>密码输入的 input</Text>
<Input type='password' password placeholder='这是一个密码输入框'/>
<Text>带小数点的 input</Text>
<Input type='digit' placeholder='带小数点的数字键盘'/>
<Text>身份证输入的 input</Text>
<Input type='idcard' placeholder='身份证输入键盘'/>
<Text>控制占位符颜色的 input</Text>
<Input type='text' placeholder='占位符字体是红色的' placeholderStyle='color:red'/>
</View>
)
}
}
```
13 changes: 9 additions & 4 deletions docs/components/forms/label.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,17 @@ sidebar_label: Label

##### 用来改进表单组件的可用性，使用 for 属性找到对应的 id，或者将控件放在该标签下，当点击时，就会触发对应的控件。for 优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。

> 属性及支持度
> 属性
| 微信小程序 | H5 | ReactNative | 属性值 | 类型 | 说明 |
| :-: | :-: | :-: | :-: |:-: | :-: |
| √ | √ | x (仅限嵌套的形式使用) | for | String | 绑定控件的 id |
| 属性名 | 类型 | 默认值 | 说明 |
| :- | :- | :- | :- |
| for | String | 绑定控件的 id |

>各端支持度
| 属性 | 微信小程序 | H5 | ReactNative | 百度小程序 | 支付宝小程序 | 字节跳动小程序 |
| :-: | :-: | :-: | :- | :- | :- | :- |
| for | ✔ | ✔ | | ✔ | ✔ | ✔ |

```jsx
import Taro, { Component } from '@tarojs/taro'
Expand Down
33 changes: 23 additions & 10 deletions docs/components/forms/picker-view.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,29 @@ sidebar_label: PickerView

##### 嵌入页面的滚动选择器

> 属性及支持度
| 微信小程序 | H5 | ReactNative| 属性名 | 类型 | 说明 |
| :-: | :-: | :-: | :- | :- | :- |
| √ | x | x | value | NumberArray | 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。 |
| √ | x | x | indicatorStyle | String | 设置选择器中间选中框的样式 |
| √ | x | x | indicatorClass | String | 设置选择器中间选中框的类名 |
| √ | x | x | maskStyle | String | 设置蒙层的样式 |
| √ | x | x | maskClass | String| 设置蒙层的类名 |
| √ | x | x | onChange | EventHandle | 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value 为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始） |
> 属性
| 属性名 | 类型 | 说明 |
| :- | :- | :- |
| value | NumberArray | 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。 |
| indicatorStyle | String | 设置选择器中间选中框的样式 |
| indicatorClass | String | 设置选择器中间选中框的类名 |
| maskStyle | String | 设置蒙层的样式 |
| maskClass | String| 设置蒙层的类名 |
| onChange | EventHandle | 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value 为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始） |

> 各端支持度
| 属性 | 微信小程序 | H5 | ReactNative | 百度小程序 | 支付宝小程序 | 字节跳动小程序 |
| :-: | :-: | :-: | :- | :- | :- | :- |
| value | ✔ | | | ✔ | ✔ | ✔ |
| indicatorStyle | ✔ | | | ✔ | ✔ | ✔ |
| indicatorClass | ✔ | | | ✔ | ✔ | |
| maskStyle | ✔ | | | ✔ | ✔ | ✔ |
| maskClass | ✔ | | | ✔ | ✔ | |
| onChange | ✔ | | | ✔ | ✔ | ✔ |



##### PickerViewColumn

Expand Down

0 comments on commit 3631a11

Please sign in to comment.