From 24b5d201552070ee15fc84690171e12937f4ad65 Mon Sep 17 00:00:00 2001
From: jinjinjin0731 <709899428@qq.com>
Date: Wed, 27 Feb 2019 16:21:21 +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=E7=9A=84=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 | 7 +-
docs/components/forms/radio.md | 4 +-
docs/components/viewContainer/cover-view.md | 22 +++--
docs/components/viewContainer/movable-view.md | 17 ++--
docs/components/viewContainer/scroll-view.md | 86 ++++++++++++-------
docs/components/viewContainer/swiper.md | 48 +++++++----
docs/components/viewContainer/view.md | 62 ++++++++-----
.../src/components/cover-view/index.js | 25 ++++++
.../src/components/movable-view/index.js | 25 ++++++
packages/taro-components/src/index.js | 2 +
website/i18n/en.json | 17 +++-
website/sidebars.json | 26 ++++--
12 files changed, 249 insertions(+), 92 deletions(-)
create mode 100644 packages/taro-components/src/components/cover-view/index.js
create mode 100644 packages/taro-components/src/components/movable-view/index.js
diff --git a/docs/components/forms/checkbox.md b/docs/components/forms/checkbox.md
index a38b68e1a838..3148e8de3e1b 100755
--- a/docs/components/forms/checkbox.md
+++ b/docs/components/forms/checkbox.md
@@ -1,8 +1,9 @@
---
-title: CheckboxGroup
-sidebar_label: CheckboxGroup
+title: Checkbox
+sidebar_label: Checkbox
---
+### CheckboxGroup
##### 多项选择器,内部由多个 checkbox 组成
> 属性及支持度
@@ -12,7 +13,7 @@ sidebar_label: CheckboxGroup
| √ | √ | √ | name | String | | 表单组件中加上 name 来作为 key |
| √ | √ | √ | onChange | EventHandle | | 中选中项发生改变是触发 change 事件,detail = value:[选中的 Checkbox 的 value 的数组] |
-##### Checkbox
+### Checkbox
##### 多选项目。
> 属性及支持度
diff --git a/docs/components/forms/radio.md b/docs/components/forms/radio.md
index fbef118f56a5..e63a3a123b90 100755
--- a/docs/components/forms/radio.md
+++ b/docs/components/forms/radio.md
@@ -3,7 +3,7 @@ title: Radio
sidebar_label: Radio
---
-##### RadioGroup
+### RadioGroup
##### 单项选择器,内部由多个 `` 组成
> 属性及支持度
@@ -13,7 +13,7 @@ sidebar_label: Radio
| √ | √ | √ | onChange | EventHandle | | `` 中选中项发生改变时触发 change 事件,detail = value:[选中的 radio 的 value 的数组] |
-##### Radio
+### Radio
##### 单选项目
> 属性及支持度
diff --git a/docs/components/viewContainer/cover-view.md b/docs/components/viewContainer/cover-view.md
index 365268c46dc4..e9ac1d2bc3b2 100755
--- a/docs/components/viewContainer/cover-view.md
+++ b/docs/components/viewContainer/cover-view.md
@@ -5,17 +5,26 @@ sidebar_label: CoverView
##### 覆盖在原生组件之上的文本视图,可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher,只支持嵌套 cover-view、cover-image,可在 cover-view 中使用 button。
-> 组件 支持度
-| 微信小程序 | H5 | ReactNative |
-| :-: | :-: | :-: |
-| ✔️ | x | x |
+> 支持度
-小程序全部支持,属性参考[cover-view](https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html)。属性值请改写为驼峰式命名。
+| 微信小程序 | H5 | ReactNative | 百度小程序 | 支付宝小程序 | 字节跳动小程序 |
+| :-: | :-: | :-: | :- | :- | :- |
+| ✔️ | | | ️ ✔️ | ✔️ | |
+具体属性参考相关小程序官网,属性值请改写为驼峰式命名。
+
+
+[微信小程序 cover-view](https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html)。
+
+[百度小程序 cover-view](https://smartprogram.baidu.com/docs/develop/component/view/#cover-view)。
+
+[支付宝小程序 cover-view](https://docs.alipay.com/mini/component/cover-view)。
+
+###### 示例:
```jsx
import Taro, { Component } from '@tarojs/taro'
-// 引入 MovableArea, CoverView 组件
+// 引入 CoverImage, CoverView 组件
import { Video, CoverImage, CoverView } from '@tarojs/components'
class App extends Components {
@@ -32,3 +41,4 @@ class App extends Components {
}
}
```
+
diff --git a/docs/components/viewContainer/movable-view.md b/docs/components/viewContainer/movable-view.md
index da73df2b52c3..71c920261230 100755
--- a/docs/components/viewContainer/movable-view.md
+++ b/docs/components/viewContainer/movable-view.md
@@ -5,15 +5,22 @@ sidebar_label: MovableView
##### 可移动的视图容器,在页面中可以拖拽滑动
-> 组件 支持度
+> 支持度
-| 微信小程序 | H5 | ReactNative |
-| :-: | :-: | :-: |
-| ✔️ | x | x |
+| 微信小程序 | H5 | ReactNative | 百度小程序 | 支付宝小程序 | 字节跳动小程序 |
+| :-: | :-: | :-: | :- | :- | :- |
+| ✔️ | | | ️ ✔️ | ✔️ | |
-小程序全部支持,属性参考[movable-view](https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html)。属性值请改写为驼峰式命名。
+具体属性参考相关小程序官网,属性值请改写为驼峰式命名。
+[微信小程序 movable-view](https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html)。
+
+[百度小程序 movable-view](https://smartprogram.baidu.com/docs/develop/component/view/#movable-area)。
+
+[支付宝小程序 movable-view](https://docs.alipay.com/mini/component/movable-view)。
+
+###### 示例:
```jsx
import Taro, { Component } from '@tarojs/taro'
// 引入 MovableArea, MovableView 组件
diff --git a/docs/components/viewContainer/scroll-view.md b/docs/components/viewContainer/scroll-view.md
index 8bb82668eefd..a6fb3d428b40 100755
--- a/docs/components/viewContainer/scroll-view.md
+++ b/docs/components/viewContainer/scroll-view.md
@@ -4,43 +4,71 @@ sidebar_label: ScrollView
---
##### 可滚动视图区域
+> 属性
-> 属性及支持度
+| 属性名 | 类型 | 默认值 | 说明 |
+| :- | :- | :- | :- |
+| scrollX | Boolean | false | 允许横向滚动 |
+| scrollY | Boolean | false | 允许纵向滚动 |
+| upperThreshold | Number | 50 | 距顶部/左边多远时(单位 px),触发 scrolltoupper 事件 |
+| lowerThreshold | Number | 50 | 距底部/右边多远时(单位 px),触发 scrolltolower 事件 |
+| scrollTop | Number | | 设置竖向滚动条位置 |
+| scrollLeft | Number | | 设置横向滚动条位置 |
+| scrollIntoView | String | | 值应为某子元素 id(id 不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素 |
+| scrollWithAnimation | Boolean | false | 在设置滚动条位置时使用动画过渡 |
+| enableBackToTop | Boolean | false | iOS 点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向 |
+| onScrollToUpper | EventHandle | | 滚动到顶部/左边,会触发 scrolltoupper 事件 |
+| onScrollToLower | EventHandle | | 滚动到底部/右边,会触发 scrolltolower 事件 |
+| onScroll | EventHandle | | 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
-| 微信小程序 | H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 |
-| :-: | :-: | :-: | :- | :- | :- | :- |
-| √ | √ | x (二选一) | scrollX | Boolean | false | 允许横向滚动 |
-| √ | √ | x (二选一) | scrollY | Boolean | false | 允许纵向滚动 |
-| √ | √ | √ | upperThreshold | Number | 50 | 距顶部/左边多远时(单位 px),触发 scrolltoupper 事件 |
-| √ | √ | √ | lowerThreshold | Number | 50 | 距底部/右边多远时(单位 px),触发 scrolltolower 事件 |
-| √ | √ | √ | scrollTop | Number | | 设置竖向滚动条位置 |
-| √ | √ | √ | scrollLeft | Number | | 设置横向滚动条位置 |
-| √ | | x | scrollIntoView | String | | 值应为某子元素 id(id 不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素 |
-| √ | √ | √ | scrollWithAnimation | Boolean | false | 在设置滚动条位置时使用动画过渡 |
-| √ | | √ | enableBackToTop | Boolean | false | iOS 点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向 |
-| √ | √ | √ | onScrollToUpper | EventHandle | | 滚动到顶部/左边,会触发 scrolltoupper 事件 |
-| √ | √ | √ | onScrollToLower | EventHandle | | 滚动到底部/右边,会触发 scrolltolower 事件 |
-| √ | √ | √ | onScroll | EventHandle | | 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
+>各端支持度
+| 属性 | 微信小程序 | H5 | ReactNative | 百度小程序 | 支付宝小程序 | 字节跳动小程序 |
+| :-: | :-: | :-: | :- | :- | :- | :- |
+| scrollX | ✔ | ✔ | X (二选一)| ✔ | ✔ | ✔ |
+| scrollY | ✔ | ✔ | X (二选一)| ✔ | ✔ | ✔ |
+| upperThreshold | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+| lowerThreshold | ✔ | ✔ | ✔| ✔ | ✔ | ✔ |
+| scrollTop | ✔ | ✔ | ✔| ✔ | ✔ | ✔ |
+| scrollLeft | ✔ | ✔ | ✔| ✔ | ✔ | ✔ |
+| scrollIntoView | ✔ | | | ✔ | ✔ | ✔ |
+| scrollWithAnimation| ✔ | ✔ | ✔| ✔ | ✔ | ✔ |
+| enableBackToTop | ✔ | | ✔| | ✔ | |
+| onScrollToUpper | ✔ | ✔ | ✔| ✔ | ✔ | ✔ |
+| onScrollToLower | ✔ | ✔ | ✔| ✔ | ✔ | ✔ |
+| onScroll | ✔ | ✔ | ✔| ✔ | ✔ | ✔ |
使用竖向滚动时,需要给 `` 一个固定高度,通过 WXSS 设置 height。
###### 示例:
```jsx
-
- A
- B
- C
-
+import Taro, { Component } from '@tarojs/taro'
+import { ScrollView } from '@tarojs/components'
+
+export default class PageView extends Component {
+ constructor() {
+ super(...arguments)
+ }
+
+ render() {
+ return (
+
+ A
+ B
+ C
+
+ )
+ }
+}
```
###### Tips:
diff --git a/docs/components/viewContainer/swiper.md b/docs/components/viewContainer/swiper.md
index 474255bb8c91..17634f8067ba 100755
--- a/docs/components/viewContainer/swiper.md
+++ b/docs/components/viewContainer/swiper.md
@@ -5,23 +5,41 @@ sidebar_label: Swiper
##### 滑块视图容器
-> 属性及支持度
+> 属性
-| 微信小程序 | H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 |
+| 属性名 | 类型 | 默认值 | 说明 |
+| :- | :- | :- | :- |
+|indicatorDots | Boolean | false | 是否显示面板指示点 |
+|indicatorColor | String | rgba(0, 0, 0, .3) | 指示点颜色 |
+|indicatorActiveColor | String | 000 | 当前选中的指示点颜色 |
+|autoplay | Boolean | false | 是否自动切换 |
+|interval | Number | 5000 | 自动切换时间间隔 |
+|duration | Number | 500 | 滑动动画时长 |
+|current | Number | 0 | 当前所在滑块的 index |
+|onChange | EventHandle | | current 改变时会触发 change 事件 |
+|circular | Boolean | false | 是否采用衔接滑动 |
+|skipHiddenItemLayout | Boolean | false | 是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息 |
+|displayMultipleItems | Number | 1 | 同时显示的滑块数量 |
+|vertical | Boolean | false | 滑动方向是否为纵向 |
+|onAnimationfinish | EventHandle | | 动画结束时会触发 animationfinish 事件 |
+
+>各端支持度
+
+| 属性 | 微信小程序 | H5 | ReactNative | 百度小程序 | 支付宝小程序 | 字节跳动小程序 |
| :-: | :-: | :-: | :- | :- | :- | :- |
-| √ | √ | √ | indicatorDots | Boolean | false | 是否显示面板指示点 |
-| √ | √ | √ | indicatorColor | String | rgba(0, 0, 0, .3) | 指示点颜色 |
-| √ | √ | √ | indicatorActiveColor | String | 000 | 当前选中的指示点颜色 |
-| √ | √ | √ | autoplay | Boolean | false | 是否自动切换 |
-| √ | √ | √ | interval | Number | 5000 | 自动切换时间间隔 |
-| √ | √ | x | duration | Number | 500 | 滑动动画时长 |
-| √ | √ | √ | current | Number | 0 | 当前所在滑块的 index |
-| √ | √ | √ | onChange | EventHandle | | current 改变时会触发 change 事件 |
-| √ | √ | √ | circular | Boolean | false | 是否采用衔接滑动 |
-| √ | | x | skipHiddenItemLayout | Boolean | false | 是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息 |
-| √ | | x | displayMultipleItems | Number | 1 | 同时显示的滑块数量 |
-| √ | | √ | vertical | Boolean | false | 滑动方向是否为纵向 |
-| √ | | √ | onAnimationfinish | EventHandle | | 动画结束时会触发 animationfinish 事件 |
+|indicatorDots | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+|indicatorColor | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+|indicatorActiveColor | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+|autoplay | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+|interval | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+|duration | ✔ | ✔ | | ✔ | ✔ | ✔ |
+|current | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+|onChange | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+|circular | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+|skipHiddenItemLayout | ✔ | | | ✔ | | |
+|displayMultipleItems | ✔ | | | ✔ | | ✔ |
+|vertical | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+|onAnimationfinish | ✔ | ✔ | ✔ | ✔ | | |
###### 示例:
```jsx
diff --git a/docs/components/viewContainer/view.md b/docs/components/viewContainer/view.md
index 39b358030cf6..aa673d39c2fd 100755
--- a/docs/components/viewContainer/view.md
+++ b/docs/components/viewContainer/view.md
@@ -6,29 +6,51 @@ sidebar_label: View
##### 视图容器
-> 属性及支持度
+> 属性
-| 微信小程序 | H5 | ReactNative| 属性名 | 类型 | 默认值 | 说明 |
-| :-: | :-: | :-: | :- | :- | :- | :- |
-| √ | √ | x (支持 hoverStyle 属性,但框架未支持 hoverClass) | hoverClass | String | none | 指定按下去的样式类。当 hover-class='none' 时,没有点击态效果 |
-| √ | √ | √ | hoverStartTime | Number | 50 | 按住后多久出现点击态,单位毫秒 |
-| √ | √ | √ | hoverStayTime | Number | 400 | 手指松开后点击态保留时间,单位毫秒 |
-| √ | | x | hoverStopPropagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 |
+| 属性名 | 类型 | 默认值 | 说明 |
+| :- | :- | :- | :- |
+| hoverClass | String | none | 指定按下去的样式类。当 hover-class='none' 时,没有点击态效果 |
+| hoverStartTime | Number | 50 | 按住后多久出现点击态,单位毫秒 |
+|hoverStayTime | Number | 400 | 手指松开后点击态保留时间,单位毫秒 |
+| hoverStopPropagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 |
+
+>各端支持度
+| 属性 | 微信小程序 | H5 | ReactNative | 百度小程序 | 支付宝小程序 | 字节跳动小程序 |
+| :-: | :-: | :-: | :- | :- | :- | :- |
+| hoverClass | ✔ | ✔ | (支持 hoverStyle 属性,但框架未支持 hoverClass)| ✔ | ✔ | ✔ |
+| hoverStartTime | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+| hoverStayTime | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+| hoverStopPropagation | ✔ | | | ✔ | ✔ | ✔ |
###### 示例:
```jsx
-flex-direction: row 横向布局
-
-
-
-
-
-flex-direction: column 纵向布局
-
-
-
-
-
-
+import Taro, { Component } from '@tarojs/taro'
+import { View, Text } from '@tarojs/components'
+
+export default class PageView extends Component {
+ constructor() {
+ super(...arguments)
+ }
+
+ render() {
+ return (
+
+ flex-direction: row 横向布局
+
+
+
+
+
+ flex-direction: column 纵向布局
+
+
+
+
+
+
+ )
+ }
+}
```
diff --git a/packages/taro-components/src/components/cover-view/index.js b/packages/taro-components/src/components/cover-view/index.js
new file mode 100644
index 000000000000..38b24c65de03
--- /dev/null
+++ b/packages/taro-components/src/components/cover-view/index.js
@@ -0,0 +1,25 @@
+import Nerv from 'nervjs'
+
+class CoverView extends Nerv.Component {
+ componentDidMount () {
+ console.error('H5 暂不支持 CoverView 组件!')
+ }
+
+ render () {
+ const { ...reset } = this.props
+ return
{this.props.children}
+ }
+}
+
+class CoverImage extends Nerv.Component {
+ componentDidMount () {
+ console.error('H5 暂不支持 CoverImage 组件!')
+ }
+
+ render () {
+ const { ...reset } = this.props
+ return {this.props.children}
+ }
+}
+
+export { CoverImage, CoverView }
diff --git a/packages/taro-components/src/components/movable-view/index.js b/packages/taro-components/src/components/movable-view/index.js
new file mode 100644
index 000000000000..b566a8291e5c
--- /dev/null
+++ b/packages/taro-components/src/components/movable-view/index.js
@@ -0,0 +1,25 @@
+import Nerv from 'nervjs'
+
+class MovableView extends Nerv.Component {
+ componentDidMount () {
+ console.error('H5 暂不支持 MovableView 组件!')
+ }
+
+ render () {
+ const { ...reset } = this.props
+ return {this.props.children}
+ }
+}
+
+class MovableArea extends Nerv.Component {
+ componentDidMount () {
+ console.error('H5 暂不支持 MovableArea 组件!')
+ }
+
+ render () {
+ const { ...reset } = this.props
+ return {this.props.children}
+ }
+}
+
+export { MovableArea, MovableView }
diff --git a/packages/taro-components/src/index.js b/packages/taro-components/src/index.js
index b6ccd5fc5ad4..e8fc8fb99524 100644
--- a/packages/taro-components/src/index.js
+++ b/packages/taro-components/src/index.js
@@ -29,3 +29,5 @@ export { default as Navigator } from './components/navigator'
export { default as WebView } from './components/web-view'
export { default as OpenData } from './components/open-data'
export { default as Canvas } from './components/canvas'
+export { MovableArea, MovableView } from './components/movable-view'
+export { CoverImage, CoverView } from './components/cover-view'
diff --git a/website/i18n/en.json b/website/i18n/en.json
index f6ac196af2f8..1fad4a094ebb 100644
--- a/website/i18n/en.json
+++ b/website/i18n/en.json
@@ -54,8 +54,8 @@
"sidebar_label": "Button"
},
"components/forms/checkbox": {
- "title": "CheckboxGroup",
- "sidebar_label": "CheckboxGroup"
+ "title": "Checkbox",
+ "sidebar_label": "Checkbox"
},
"components/forms/form": {
"title": "Form",
@@ -165,6 +165,9 @@
"config": {
"title": "编译配置"
},
+ "CONTRIBUTING": {
+ "title": "CONTRIBUTING"
+ },
"css-modules": {
"title": "CSS Modules 的使用"
},
@@ -267,7 +270,15 @@
"快速开始": "快速开始",
"教程": "教程",
"进阶指南": "进阶指南",
- "组件库": "组件库",
+ "关于组件库": "关于组件库",
+ "视图容器": "视图容器",
+ "基础内容": "基础内容",
+ "表单组件": "表单组件",
+ "导航": "导航",
+ "媒体组件": "媒体组件",
+ "地图": "地图",
+ "画布": "画布",
+ "开放能力": "开放能力",
"API": "API"
}
},
diff --git a/website/sidebars.json b/website/sidebars.json
index 9fb71b55e18e..5a4507d9aeeb 100644
--- a/website/sidebars.json
+++ b/website/sidebars.json
@@ -45,17 +45,21 @@
]
},
"components": {
- "组件库": [
- "components-desc",
+ "关于组件库": ["components-desc"],
+ "视图容器": [
"components/viewContainer/view",
"components/viewContainer/scroll-view",
"components/viewContainer/swiper",
"components/viewContainer/movable-view",
- "components/viewContainer/cover-view",
+ "components/viewContainer/cover-view"
+ ],
+ "基础内容": [
"components/base/icon",
"components/base/text",
"components/base/progress",
- "components/base/rich-text",
+ "components/base/rich-text"
+ ],
+ "表单组件": [
"components/forms/button",
"components/forms/checkbox",
"components/forms/form",
@@ -66,16 +70,20 @@
"components/forms/radio",
"components/forms/slider",
"components/forms/switch",
- "components/forms/textarea",
- "components/navig/navigator",
+ "components/forms/textarea"
+ ],
+ "导航": ["components/navig/navigator"],
+ "媒体组件": [
"components/media/audio",
"components/media/image",
"components/media/video",
"components/media/camera",
"components/media/live-player",
- "components/media/live-pusher",
- "components/maps/map",
- "components/canvas/canvas",
+ "components/media/live-pusher"
+ ],
+ "地图": ["components/maps/map"],
+ "画布": ["components/canvas/canvas"],
+ "开放能力": [
"components/open/open-data",
"components/open/web-view"
]