Skip to content

Commit

Permalink
docs: 更新一些组件库的文档
Browse files Browse the repository at this point in the history
  • Loading branch information
jinjinjin0731 committed Feb 27, 2019
1 parent 2bb0f3d commit 24b5d20
Show file tree
Hide file tree
Showing 12 changed files with 249 additions and 92 deletions.
7 changes: 4 additions & 3 deletions docs/components/forms/checkbox.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
---
title: CheckboxGroup
sidebar_label: CheckboxGroup
title: Checkbox
sidebar_label: Checkbox
---

### CheckboxGroup
##### 多项选择器,内部由多个 checkbox 组成

> 属性及支持度
Expand All @@ -12,7 +13,7 @@ sidebar_label: CheckboxGroup
|||| name | String | | 表单组件中加上 name 来作为 key |
|||| onChange | EventHandle | | <CheckboxGroup/>中选中项发生改变是触发 change 事件,detail = value:[选中的 Checkbox 的 value 的数组] |

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

> 属性及支持度
Expand Down
4 changes: 2 additions & 2 deletions docs/components/forms/radio.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: Radio
sidebar_label: Radio
---

##### RadioGroup
### RadioGroup
##### 单项选择器,内部由多个 `<Radio/>` 组成
> 属性及支持度
Expand All @@ -13,7 +13,7 @@ sidebar_label: Radio
|||| onChange | EventHandle | | `<RadioGroup/>` 中选中项发生改变时触发 change 事件,detail = value:[选中的 radio 的 value 的数组] |


##### Radio
### Radio
##### 单选项目
> 属性及支持度
Expand Down
22 changes: 16 additions & 6 deletions docs/components/viewContainer/cover-view.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -32,3 +41,4 @@ class App extends Components {
}
}
```

17 changes: 12 additions & 5 deletions docs/components/viewContainer/movable-view.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 组件
Expand Down
86 changes: 57 additions & 29 deletions docs/components/viewContainer/scroll-view.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |||||||

使用竖向滚动时,需要给 `<scroll-view/>` 一个固定高度,通过 WXSS 设置 height。

###### 示例:
```jsx
<ScrollView
className='scrollview'
scrollY
scrollWithAnimation
scrollTop='0'
style='height: 150px;'
lowerThreshold='20'
upperThreshold='20'
onScrolltoupper={this.onScrolltoupper}
onScroll={this.onScroll}>
<View style='height:150px;background-color:rgb(26,173,25);'>A</View>
<View style='height:150px;background-color:rgb(39,130,215);'>B</View>
<View style='height:150px;background-color:rgb(241,241,241);color: #333;'>C</View>
</ScrollView>
import Taro, { Component } from '@tarojs/taro'
import { ScrollView } from '@tarojs/components'

export default class PageView extends Component {
constructor() {
super(...arguments)
}

render() {
return (
<ScrollView
className='scrollview'
scrollY
scrollWithAnimation
scrollTop='0'
style='height: 150px;'
lowerThreshold='20'
upperThreshold='20'
onScrolltoupper={this.onScrolltoupper}
onScroll={this.onScroll}>
<View style='height:150px;background-color:rgb(26,173,25);'>A</View>
<View style='height:150px;background-color:rgb(39,130,215);'>B</View>
<View style='height:150px;background-color:rgb(241,241,241);color: #333;'>C</View>
</ScrollView>
)
}
}
```

###### Tips:
Expand Down
48 changes: 33 additions & 15 deletions docs/components/viewContainer/swiper.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
62 changes: 42 additions & 20 deletions docs/components/viewContainer/view.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
<Text>flex-direction: row 横向布局</Text>
<View className='flex-wrp' style='flex-direction:row;'>
<View className='flex-item demo-text-1'/>
<View className='flex-item demo-text-2'/>
<View className='flex-item demo-text-3'/>
</View>
<Text>flex-direction: column 纵向布局</Text>

<View className='flex-wrp' style='flex-direction:column;'>
<View className='flex-item flex-item-V demo-text-1'/>
<View className='flex-item flex-item-V demo-text-2'/>
<View className='flex-item flex-item-V demo-text-3'/>
</View>
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'

export default class PageView extends Component {
constructor() {
super(...arguments)
}

render() {
return (
<View className='components-page'>
<Text>flex-direction: row 横向布局</Text>
<View className='flex-wrp' style='flex-direction:row;'>
<View className='flex-item demo-text-1'/>
<View className='flex-item demo-text-2'/>
<View className='flex-item demo-text-3'/>
</View>
<Text>flex-direction: column 纵向布局</Text>
<View className='flex-wrp' style='flex-direction:column;'>
<View className='flex-item flex-item-V demo-text-1'/>
<View className='flex-item flex-item-V demo-text-2'/>
<View className='flex-item flex-item-V demo-text-3'/>
</View>
</View>
)
}
}
```
25 changes: 25 additions & 0 deletions packages/taro-components/src/components/cover-view/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import Nerv from 'nervjs'

class CoverView extends Nerv.Component {
componentDidMount () {
console.error('H5 暂不支持 CoverView 组件!')
}

render () {
const { ...reset } = this.props
return <div {...reset}>{this.props.children}</div>
}
}

class CoverImage extends Nerv.Component {
componentDidMount () {
console.error('H5 暂不支持 CoverImage 组件!')
}

render () {
const { ...reset } = this.props
return <div {...reset}>{this.props.children}</div>
}
}

export { CoverImage, CoverView }
25 changes: 25 additions & 0 deletions packages/taro-components/src/components/movable-view/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import Nerv from 'nervjs'

class MovableView extends Nerv.Component {
componentDidMount () {
console.error('H5 暂不支持 MovableView 组件!')
}

render () {
const { ...reset } = this.props
return <div {...reset}>{this.props.children}</div>
}
}

class MovableArea extends Nerv.Component {
componentDidMount () {
console.error('H5 暂不支持 MovableArea 组件!')
}

render () {
const { ...reset } = this.props
return <div {...reset}>{this.props.children}</div>
}
}

export { MovableArea, MovableView }
2 changes: 2 additions & 0 deletions packages/taro-components/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'

0 comments on commit 24b5d20

Please sign in to comment.