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" ]