From 986970481d582cd95de9009258999735ba138298 Mon Sep 17 00:00:00 2001 From: jinjinjin0731 <709899428@qq.com> Date: Thu, 28 Feb 2019 16:38:41 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E4=B8=80=E4=BA=9B?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=BA=93=E8=A1=A8=E5=8D=95=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components/forms/checkbox.md | 4 +- docs/components/forms/radio.md | 23 ++++++++- docs/components/forms/slider.md | 81 ++++++++++++++++++++++--------- docs/components/forms/switch.md | 45 ++++++++++++----- docs/components/forms/textarea.md | 78 +++++++++++++++++++---------- 5 files changed, 169 insertions(+), 62 deletions(-) diff --git a/docs/components/forms/checkbox.md b/docs/components/forms/checkbox.md index 72fb35a40df3..85b04db02ad1 100755 --- 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 | | 中选中项发生改变是触发 change 事件，detail = value:[选中的 Checkbox 的 value 的数组] | +| ✔ | ✔ | onChange | EventHandle | | ``中选中项发生改变是触发 change 事件，detail = value:[选中的 Checkbox 的 value 的数组] | >其他相关属性请看各小程序官方文档 @@ -30,7 +30,7 @@ sidebar_label: Checkbox | H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 | | :-: | :-: | :- | :- | :- | :- | -| | ✔ | value | String | | 标识，选中时触发的 change 事件，并携带 的 value | +| | ✔ | value | String | | ``标识，选中时触发``的 change 事件，并携带 `` 的 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 index e63a3a123b90..d065bdb72d51 100755 --- a/docs/components/forms/radio.md +++ b/docs/components/forms/radio.md @@ -4,7 +4,7 @@ sidebar_label: Radio --- ### RadioGroup -##### 单项选择器，内部由多个 `` 组成 +##### 单项选择器，内部由多个 Radio 组成 > 属性及支持度 | 微信小程序 | H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 | @@ -13,6 +13,17 @@ sidebar_label: Radio | √ | √ | √ | onChange | EventHandle | | `` 中选中项发生改变时触发 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 index f733dcab913b..8d79736e1abd 100755 --- 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 -设置 step - -显示当前 value - -设置最小/最大值 - +import Taro, { Component } from '@tarojs/taro' +import { View, Text, Slider } from '@tarojs/components' + +export default class PageView extends Component { + constructor() { + super(...arguments) + } + + render() { + return ( + + 设置 step + + 显示当前 value + + 设置最小/最大值 + + + ) + } +} ``` diff --git a/docs/components/forms/switch.md b/docs/components/forms/switch.md index 11ab49311f15..d1eccb39501e 100755 --- 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 -默认样式 - - -推荐展示样式 - - +import Taro, { Component } from '@tarojs/taro' +import { View, Text, Switch } from '@tarojs/components' + +export default class PageView extends Component { + constructor() { + super(...arguments) + } + + render() { + return ( + + 默认样式 + + + 推荐展示样式 + + + + ) + } +} ``` diff --git a/docs/components/forms/textarea.md b/docs/components/forms/textarea.md index f495dae6aa6f..e7470dc2c830 100755 --- 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 -输入区域高度自适应，不会出现滚动条 -