docs: 更新一些组件库表单组件文档

NervJS · Feb 28, 2019 · 9869704 · 9869704
1 parent 3631a11
commit 9869704
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 62 deletions.
diff --git a/docs/components/forms/checkbox.md b/docs/components/forms/checkbox.md
@@ -11,7 +11,7 @@ sidebar_label: Checkbox
 | H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 |
 | :-: | :-: | :- | :- | :- | :- |
 | ✔ | ✔ | name | String |   | 表单组件中加上 name 来作为 key |
-| ✔ | ✔ | onChange | EventHandle |   | <CheckboxGroup/>中选中项发生改变是触发 change 事件，detail = value:[选中的 Checkbox 的 value 的数组] |
+| ✔ | ✔ | onChange | EventHandle |   | `<CheckboxGroup/>`中选中项发生改变是触发 change 事件，detail = value:[选中的 Checkbox 的 value 的数组] |
 
 >其他相关属性请看各小程序官方文档
 
@@ -30,7 +30,7 @@ sidebar_label: Checkbox
 
 | H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 |
 | :-: | :-: | :- | :- | :- | :- |
-|   | ✔ | value      | String      |   | <Checkbox/>标识，选中时触发<CheckboxGroup/>的 change 事件，并携带 <checkbox/> 的 value |
+|   | ✔ | value      | String      |   | `<Checkbox/>`标识，选中时触发`<CheckboxGroup/>`的 change 事件，并携带 `<Checkbox/>` 的 value |
 | ✔ | ✔ | checked    | Boolean     | false  | 当前是否选中   |
 | ✔ | ✔ | disabled   | Boolean     | false  | 是否禁用   |
 | ✔ | ✔ | color      | Color       |   | checkbox 的颜色，同 css 的 color       |

diff --git a/docs/components/forms/radio.md b/docs/components/forms/radio.md
@@ -4,7 +4,7 @@ sidebar_label: Radio
 ---
 
 ### RadioGroup
-##### 单项选择器，内部由多个 `<Radio/>` 组成
+##### 单项选择器，内部由多个 Radio 组成
 > 属性及支持度
 
 | 微信小程序 | H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 |
@@ -13,6 +13,17 @@ sidebar_label: Radio
 | √ | √ | √ | onChange | EventHandle |  | `<RadioGroup/>` 中选中项发生改变时触发 change 事件，detail = value:[选中的 radio 的 value 的数组] |
 
 
+>其他相关属性请看各小程序官方文档
+
+[微信小程序 RadioGroup](https://developers.weixin.qq.com/miniprogram/dev/component/radio.html)。
+
+[百度小程序 RadioGroup](https://smartprogram.baidu.com/docs/develop/component/formlist/#radio)。
+
+[支付宝小程序 RadioGroup](https://docs.alipay.com/mini/component/radio)。
+
+[字节跳动小程序 RadioGroup](https://developer.toutiao.com/docs/comp/radio.html)。
+
+
 ### Radio
 ##### 单选项目
 > 属性及支持度
@@ -25,6 +36,16 @@ sidebar_label: Radio
 | √ |   | √ | color      | Color       | false  | radio 的颜色，同 css 的 color   |
 | √ | √ | √ | onChange   | EventHandle |        | 选中项发生变化时触发 change 事件   |
 
+>其他相关属性请看各小程序官方文档
+
+[微信小程序 Radio](https://developers.weixin.qq.com/miniprogram/dev/component/radio.html)。
+
+[百度小程序 Radio](https://smartprogram.baidu.com/docs/develop/component/formlist/#radio)。
+
+[支付宝小程序 Radio](https://docs.alipay.com/mini/component/radio)。
+
+[字节跳动小程序 Radio](https://developer.toutiao.com/docs/comp/radio.html)。
+
 
 ###### 示例：
 ```jsx

diff --git a/docs/components/forms/slider.md b/docs/components/forms/slider.md
@@ -4,31 +4,68 @@ sidebar_label: Slider
 ---
 
 ##### 滑动选择器
-> 属性及支持度
 
-| 微信小程序 | H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 |
+> 属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :- | :- | :- | :- |
+| min             | Number      | 0       | 最小值 |
+| max             | Number      | 100     | 最大值 |
+| step            | Number      | 1       | 步长，取值必须大于 0，并且可被(max - min)整除 |
+| disabled        | Boolean     | false   | 是否禁用   |
+| value           | Number      | 0       | 当前取值   |
+| color           | Color       | #e9e9e9 | 背景条的颜色（请使用 backgroundColor）        |
+| selectedColor  | Color       | #1aad19 | 已选择的颜色（请使用 activeColor）            |
+| activeColor     | Color       | #1aad19 | 已选择的颜色    |
+| backgroundColor | Color       | #e9e9e9 | 背景条的颜色    |
+| blockSize      | Number      | 28      | 滑块的大小，取值范围为 12 - 28 |
+| blockColor     | Color       | #ffffff | 滑块的颜色 |
+| showValue      | Boolean     | false   | 是否显示当前 value  |
+| onChange       | EventHandle |         | 完成一次拖动后触发的事件 |
+| onChanging     | EventHandle |         | 拖动过程中触发的事件|
+
+>各端支持度
+
+| 属性 | 微信小程序 | H5 | ReactNative | 百度小程序 | 支付宝小程序 | 字节跳动小程序 |
 | :-: | :-: | :-: | :- | :- | :- | :- |
-| √ | √ | √ | min             | Number      | 0       | 最小值 |
-| √ | √ | √ | max             | Number      | 100     | 最大值 |
-| √ | √ | √ | step            | Number      | 1       | 步长，取值必须大于 0，并且可被(max - min)整除 |
-| √ | √ | √ | disabled        | Boolean     | false   | 是否禁用   |
-| √ | √ | √ | value           | Number      | 0       | 当前取值   |
-| √ |   | x | color           | Color       | #e9e9e9 | 背景条的颜色（请使用 backgroundColor）        |
-| √ |   | x | selectedColor  | Color       | #1aad19 | 已选择的颜色（请使用 activeColor）            |
-| √ | √ | √ | activeColor     | Color       | #1aad19 | 已选择的颜色    |
-| √ | √ | √ | backgroundColor | Color       | #e9e9e9 | 背景条的颜色    |
-| √ | √ | x | blockSize      | Number      | 28      | 滑块的大小，取值范围为 12 - 28 |
-| √ | √ | √ | blockColor     | Color       | #ffffff | 滑块的颜色 |
-| √ | √ | √ | showValue      | Boolean     | false   | 是否显示当前 value  |
-| √ | √ | √ | onChange      | EventHandle |         | 完成一次拖动后触发的事件 |
-| √ | √ | √ | onChanging    | EventHandle |         | 拖动过程中触发的事件|
+| min            | ✔ | ✔ |  ✔| ✔ | ✔ | ✔ |
+| max            | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+| step           | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+| disabled       | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+| value          | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+| color          | ✔ |  |  | |  | ✔ |
+| selectedColor  | ✔ |  |  |  |  | ✔ |
+| activeColor    | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+| backgroundColor| ✔ | ✔ |✔  | ✔ | ✔ | ✔ |
+| blockSize      | ✔ | ✔ |  | ✔ | ✔ | ✔ |
+| blockColor     | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+| showValue      | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+| onChange       | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+| onChanging     | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+
+
 
 ###### 示例：
 ```jsx
-<Text>设置 step</Text>
-<Slider step='1' value='50'/>
-<Text>显示当前 value</Text>
-<Slider step='1' value='50' showValue/>
-<Text>设置最小/最大值</Text>
-<Slider step='1' value='100' showValue min='50' max='200'/>
+import Taro, { Component } from '@tarojs/taro'
+import { View, Text, Slider } from '@tarojs/components'
+
+export default class PageView extends Component {
+  constructor() {
+    super(...arguments)
+  }
+
+  render() {
+    return (
+      <View className='components-page'>
+        <Text>设置 step</Text>
+        <Slider step='1' value='50'/>
+        <Text>显示当前 value</Text>
+        <Slider step='1' value='50' showValue/>
+        <Text>设置最小/最大值</Text>
+        <Slider step='1' value='100' showValue min='50' max='200'/>
+      </View>
+    )
+  }
+}
 ```
diff --git a/docs/components/forms/switch.md b/docs/components/forms/switch.md
@@ -5,20 +5,43 @@ sidebar_label: Switch
 
 ##### 开关选择器
 
-> 属性及支持度
+> 属性
 
-| 微信小程序 | H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 |
+| 属性名 | 类型 | 默认值 | 说明 |
+| :- | :- | :- | :- |
+| checked | Boolean | false  | 是否选中  |
+| type    | String  | switch | 样式，有效值：switch, checkbox |
+| color   | Color   |        | switch 的颜色，同 css 的 color |
+
+>各端支持度
+
+| 属性 | 微信小程序 | H5 | ReactNative | 百度小程序 | 支付宝小程序 | 字节跳动小程序 |
 | :-: | :-: | :-: | :- | :- | :- | :- |
-| √ | √ | √ | checked | Boolean | false  | 是否选中  |
-| √ | √ | √ | type    | String  | switch | 样式，有效值：switch, checkbox |
-| √ | √ | √ | color   | Color   |        | switch 的颜色，同 css 的 color |
+| checked | ✔ | ✔ |  ✔| ✔ | ✔ | ✔ |
+| type | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+| color | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
 
 ###### 示例：
 ```jsx
-<Text>默认样式</Text>
-<Switch checked/>
-<Switch/>
-<Text>推荐展示样式</Text>
-<Switch checked/>
-<Switch/>
+import Taro, { Component } from '@tarojs/taro'
+import { View, Text, Switch } from '@tarojs/components'
+
+export default class PageView extends Component {
+  constructor() {
+    super(...arguments)
+  }
+
+  render() {
+    return (
+      <View className='components-page'>
+        <Text>默认样式</Text>
+        <Switch checked/>
+        <Switch/>
+        <Text>推荐展示样式</Text>
+        <Switch checked/>
+        <Switch/>
+      </View>
+    )
+  }
+}
 ```
diff --git a/docs/components/forms/textarea.md b/docs/components/forms/textarea.md
@@ -7,32 +7,58 @@ sidebar_label: Textarea
 
 > 属性及支持度
 
-| 微信小程序 | H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 |
-| :-: | :-: | :-: | :- | :- | :- | :- |
-| √ | √ | √ | value             | String      |  | 输入框的内容         |
-| √ | √ | √ | placeholder       | String      |  | 输入框为空时占位符|
-| √ |   | x | placeholderStyle | String      |  | 指定 placeholder 的样式  |
-| √ |   | x | placeholderClass | String      | textarea-placeholder | 指定 placeholder 的样式类|
-| √ | √ | √ | disabled          | Boolean     | false  | 是否禁用          |
-| √ | √ | √ | maxlength         | Number      | 140  | 最大输入长度，设置为 -1 的时候不限制最大长度   |
-| √ | √ | x | autoFocus        | Boolean     | false  | 自动聚焦，拉起键盘。                           |
-| √ |   | √ | focus             | Boolean     | false | 获取焦点   |
-| √ |   | √ | autoHeight             | Boolean     | false | 是否自动增高，设置 auto-height 时，style.height 不生效    |
-| √ |   | x | fixed             | Boolean     | false | 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true     |
-| √ |   | x | cursorSpacing    | Number      | 0 | 指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |
-| √ |   | x| showConfirmBar  | Boolean     | true | 是否显示键盘上方带有”完成“按钮那一栏   |
-| √ |   | √ | selectionStart   | Number      | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用   |
-| √ |   | √ | selectionEnd     | Number      | -1 | 光标结束位置，自动聚集时有效，需与 selectionStart 搭配使用|
-| √ | √ | √ | onFocus         | EventHandle |  | event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持  |
-| √ | √ | √ | onBlur          | EventHandle |  | 输入框失去焦点时触发， event.detail = {value, cursor}|
-| √ |   | √ | onLinechange    | EventHandle |  | 输入框行数变化时调用，  event.detail = {height: 0, heightRpx: 0, lineCount: 0} |
-| √ | √ | √ | onInput         | EventHandle |  | 当键盘输入时，触发 input 事件， bindinput 处理函数的返回值并不会反映到 textarea 上 |
-| √ |   | √ | onConfirm       | EventHandle |  | 点击完成时， 触发 confirm 事件， event.detail = {value: value}|
+| H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 |
+| :-: | :-: | :- | :- | :- | :- |
+| √ | √ | value             | String      |  | 输入框的内容         |
+| √ | √ | placeholder       | String      |  | 输入框为空时占位符|
+|   | x | placeholderStyle | String      |  | 指定 placeholder 的样式  |
+|   | x | placeholderClass | String      | textarea-placeholder | 指定 placeholder 的样式类|
+| √ | √ | disabled          | Boolean     | false  | 是否禁用          |
+| √ | √ | maxlength         | Number      | 140  | 最大输入长度，设置为 -1 的时候不限制最大长度   |
+| √ | x | autoFocus        | Boolean     | false  | 自动聚焦，拉起键盘。                           |
+|   | √ | focus             | Boolean     | false | 获取焦点   |
+|   | √ | autoHeight             | Boolean     | false | 是否自动增高，设置 auto-height 时，style.height 不生效    |
+|   | x | fixed             | Boolean     | false | 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true     |
+|   | x | cursorSpacing    | Number      | 0 | 指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |
+|   | x| showConfirmBar  | Boolean     | true | 是否显示键盘上方带有”完成“按钮那一栏   |
+|   | √ | selectionStart   | Number      | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用   |
+|   | √ | selectionEnd     | Number      | -1 | 光标结束位置，自动聚集时有效，需与 selectionStart 搭配使用|
+| √ | √ | onFocus         | EventHandle |  | event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持  |
+| √ | √ | onBlur          | EventHandle |  | 输入框失去焦点时触发， event.detail = {value, cursor}|
+|   | √ | onLinechange    | EventHandle |  | 输入框行数变化时调用，  event.detail = {height: 0, heightRpx: 0, lineCount: 0} |
+| √ | √ | onInput         | EventHandle |  | 当键盘输入时，触发 input 事件， bindinput 处理函数的返回值并不会反映到 textarea 上 |
+|   | √ | onConfirm       | EventHandle |  | 点击完成时， 触发 confirm 事件， event.detail = {value: value}|
+
+
+>其他相关属性请看各小程序官方文档
+
+[微信小程序 Textarea](https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html)。
+
+[百度小程序 Textarea](https://smartprogram.baidu.com/docs/develop/component/formlist/#textarea)。
+
+[支付宝小程序 Textarea](https://docs.alipay.com/mini/component/textarea)。
+
+[字节跳动小程序 Textarea](https://developer.toutiao.com/docs/comp/textarea.html)。
 
 ###### 示例：
 ```jsx
-<Text>输入区域高度自适应，不会出现滚动条</Text>
-<Textarea style='background:#fff;width:100%;min-height:80px;padding:0 30rpx;' autoHeight/>
-<Text>这是一个可以自动聚焦的 textarea</Text>
-<Textarea style='background:#fff;width:100%;height:80px;padding:0 30rpx;' autoFocus/>
-```
+import Taro, { Component } from '@tarojs/taro'
+import { View, Text, Switch } from '@tarojs/components'
+
+export default class PageView extends Component {
+  constructor() {
+    super(...arguments)
+  }
+
+  render() {
+    return (
+      <View className='components-page'>
+        <Text>输入区域高度自适应，不会出现滚动条</Text>
+        <Textarea style='background:#fff;width:100%;min-height:80px;padding:0 30rpx;' autoHeight/>
+        <Text>这是一个可以自动聚焦的 textarea</Text>
+        <Textarea style='background:#fff;width:100%;height:80px;padding:0 30rpx;' autoFocus/>
+      </View>
+    )
+  }
+}
+```