未验证 提交 8542cff1 编写于 作者: O openharmony_ci 提交者: Gitee

!9115 master文档整改3

Merge pull request !9115 from 田雨/master
# Progress
进度条组件,用于显示内容加载或操作处理等进度。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
进度条,用于显示内容加载或操作处理进度。
## 权限列表
## 子组件
......@@ -23,31 +18,42 @@ Progress(options: {value: number, total?: number, type?: ProgressType})
创建进度组件,用于显示内容加载或操作处理进度。
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | number | 是 | - | 指定当前进度值。 |
| total | number | 否 | 100 | 指定进度总长。 |
| type | ProgressType | 否 | ProgressType.Linear | 指定进度条样式。 |
- ProgressType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Linear<sup>8+</sup> | 线性样式。 |
| Ring<sup>8+</sup> | 环形无刻度样式,环形圆环逐渐填充完成过程。 |
| Eclipse<sup>8+</sup> | 圆形样式,展现类似月圆月缺的进度展示效果,从月牙逐渐到满月的这个过程代表了下载的进度。 |
| ScaleRing<sup>8+</sup> | 环形有刻度样式,类似时钟刻度形式加载进度。 |
| Capsule<sup>8+</sup> | 胶囊样式,头尾两端处,进度条由弧形变成直线和直线变成弧形的过程;中段处,进度条正常往右走的过程。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| value | number | 是 | 指定当前进度值。 |
| total | number | 否 | 指定进度总长。<br/>默认值:100 |
| type<sup>8+</sup> | ProgressType | 否 | 指定进度条样式。<br/>默认值:ProgressType.Linear |
| style<sup>deprecated</sup> | ProgressStyle | 否 | 指定进度条类型。<br/>该参数从API Version8开始废弃,建议使用type替代。<br/>默认值:ProgressStyle.Linear |
## ProgressType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Linear | 线性样式。 |
| Ring<sup>8+</sup> | 环形无刻度样式,环形圆环逐渐显示至完全填充效果。 |
| Eclipse<sup>8+</sup> | 圆形样式,显示类似月圆月缺的进度展示效果,从月牙逐渐变化至满月。 |
| ScaleRing<sup>8+</sup> | 环形有刻度样式,显示类似时钟刻度形式的进度展示效果。 |
| Capsule<sup>8+</sup> | 胶囊样式,头尾两端圆弧处的进度展示效果与Eclipse相同;中段处的进度展示效果与Linear相同。 |
## ProgressStyle枚举说明
| 名称 | 描述 |
| --------- | ------------------------------------------------------------ |
| Linear | 线性样式。 |
| Ring | 环形无刻度样式,环形圆环逐渐显示至完全填充效果。 |
| Eclipse | 圆形样式,显示类似月圆月缺的进度展示效果,从月牙逐渐变化至满月。 |
| ScaleRing | 环形有刻度样式,显示类似时钟刻度形式的进度展示效果。 |
| Capsule | 胶囊样式,头尾两端圆弧处的进度展示效果与Eclipse相同;中段处的进度展示效果与Linear相同。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| value | number | - | 设置当前进度值。 |
| color | [ResourceColor](../../ui/ts-types.md) | - | 设置进度条前景色。 |
| style<sup>8+</sup> | {<br/>strokeWidth?:&nbsp;Length,<br/>scaleCount?:&nbsp;number,<br/>scaleWidth?:&nbsp;Length<br/>} | - | 定义组件的样式。<br/>strokeWidth:&nbsp;设置进度条宽度。<br/>scaleCount:&nbsp;设置环形进度条总刻度数。<br/>scaleWidth:&nbsp;设置环形进度条刻度粗细。<br/>刻度粗细大于进度条宽度时,刻度粗细为系统默认粗细。 |
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| value | number | 设置当前进度值。 |
| color | [ResourceColor](../../ui/ts-types.md) | 设置进度条前景色。 |
| style<sup>8+</sup> | {<br/>strokeWidth?:&nbsp;[Length](../../ui/ts-types.md#length),<br/>scaleCount?:&nbsp;number,<br/>scaleWidth?:&nbsp;[Length](../../ui/ts-types.md#length)<br/>} | 定义组件的样式。<br/>-&nbsp;strokeWidth:&nbsp;设置进度条宽度。<br/>-&nbsp;scaleCount:&nbsp;设置环形进度条总刻度数。<br/>-&nbsp;scaleWidth:&nbsp;设置环形进度条刻度粗细,刻度粗细大于进度条宽度时,为系统默认粗细。 |
## 示例
......
......@@ -3,37 +3,34 @@
提供在给定范围内选择评分的组件。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 子组件
## 接口说明
## 接口
Rating(options?: { rating: number, indicator?: boolean })
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| rating | number | 是 | 0 | 设置并接收评分值。 |
| indicator | boolean | 否 | false | 仅作为指示器使用,不可操作。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| rating | number | 是 | 设置并接收评分值。<br/>默认值:0 |
| indicator | boolean | 否 | 仅作为指示器使用,不可操作。<br/>默认值:false |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| stars | number | 5 | 设置评星总数。 |
| stepSize | number | 0.5 | 操作评级的步长。 |
| starStyle | {<br/>backgroundUri:&nbsp;string,<br/>foregroundUri:&nbsp;string,<br/>secondaryUri?:&nbsp;string<br/>} | - | backgroundSrc:未选中的星级的图片链接,可由用户自定义或使用系统默认图片,仅支持本地。<br/>foregroundSrc:选中的星级的图片路径,可由用户自定义或使用系统默认图片,仅支持本地。<br/>secondarySrc:部分选中的星级的图片路径,可由用户自定义或使用系统默认图片,仅支持本地。 |
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| stars | number | 设置评星总数。<br/>默认值:5 |
| stepSize | number | 操作评级的步长。<br/>默认值:0.5 |
| starStyle | {<br/>backgroundUri:&nbsp;string,<br/>foregroundUri:&nbsp;string,<br/>secondaryUri?:&nbsp;string<br/>} | backgroundUri:未选中的星级的图片链接,可由用户自定义或使用系统默认图片,仅支持本地图片。<br/>foregroundUri:选中的星级的图片路径,可由用户自定义或使用系统默认图片,仅支持本地图片。<br/>secondaryUir:部分选中的星级的图片路径,可由用户自定义或使用系统默认图片,仅支持本地图片。 |
## 事件
......
# ScrollBar
> **说明:**
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
滚动条组件ScrollBar,用于配合可滚动组件使用,如List、Grid、Scroll。
## 权限列表
> **说明:**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
......@@ -21,23 +16,25 @@
ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: BarState })
- ScrollBarOptions的参数描述
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| scroller | [Scroller](ts-container-scroll.md#scroller) | 是 | - | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
| direction | ScrollBarDirection | 否 | ScrollBarDirection.Vertical | 滚动条的方向,控制可滚动组件对应方向的滚动。 |
| state | [BarState](ts-appendix-enums.md#barstate) | 否 | BarState.Auto | 滚动条状态。 |
> **说明:**
> ScrollBar组件负责定义可滚动区域的行为样式,ScrollBar的子节点负责定义滚动条的行为样式。
>
> 滚动条组件与可滚动组件通过Scroller进行绑定,且只有当两者方向相同时,才能联动,ScrollBar与可滚动组件仅支持一对一绑定。
- ScrollBarDirection枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Vertical | 纵向滚动条。 |
| Horizontal | 横向滚动条。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| scroller | [Scroller](ts-container-scroll.md#scroller) | 是 | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
| direction | ScrollBarDirection | 否 | 滚动条的方向,控制可滚动组件对应方向的滚动。<br/>默认值:ScrollBarDirection.Vertical |
| state | [BarState](ts-appendix-enums.md#barstate) | 否 | 滚动条状态。<br/>默认值:BarState.Auto |
> **说明:**
> ScrollBar组件负责定义可滚动区域的行为样式,ScrollBar的子节点负责定义滚动条的行为样式。
>
> 滚动条组件与可滚动组件通过Scroller进行绑定,且只有当两者方向相同时,才能联动,ScrollBar与可滚动组件仅支持一对一绑定。
## ScrollBarDirection枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Vertical | 纵向滚动条。 |
| Horizontal | 横向滚动条。 |
## 示例
......
# Select
> **说明:** 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
提供下拉选择菜单,可以让用户在多个选项之间选择。
## 权限列表
> **说明:**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
......@@ -18,25 +16,25 @@ Select(options: Array\<SelectOption\>)
**SelectOption对象说明:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ----------------------------------- | ---- | ---- | ------- |
| value | [ResourceStr](../../ui/ts-types.md) | 是 | - | 下拉选项内容。 |
| icon | [ResourceStr](../../ui/ts-types.md) | 否 | - | 下拉选项图片。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ----------------------------------- | ---- | -------------- |
| value | [ResourceStr](../../ui/ts-types.md) | 是 | 下拉选项内容。 |
| icon | [ResourceStr](../../ui/ts-types.md) | 否 | 下拉选项图片。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------------------- | ------------------------------------- | ---- | ------------------------ |
| selected | number | - | 设置下拉菜单初始选择项的索引,第一项的索引为0。 |
| value | string | - | 设置下拉按钮本身的文本显示。 |
| font | [Font](../../ui/ts-types.md) | - | 设置下拉按钮本身的文本样式: |
| fontColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉按钮本身的文本颜色。 |
| selectedOptionBgColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉菜单选中项的背景色。 |
| selectedOptionFont | [Font](../../ui/ts-types.md) | - | 设置下拉菜单选中项的文本样式: |
| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉菜单选中项的文本颜色。 |
| optionBgColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉菜单项的背景色。 |
| optionFont | [Font](../../ui/ts-types.md) | - | 设置下拉菜单项的文本样式: |
| optionFontColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉菜单项的文本颜色。 |
| 名称 | 参数类型 | 描述 |
| ----------------------- | ------------------------------------- | --------------------------------------------- |
| selected | number | 设置下拉菜单初始选项的索引,第一项的索引为0。 |
| value | string | 设置下拉按钮本身的文本显示。 |
| font | [Font](../../ui/ts-types.md) | 设置下拉按钮本身的文本样式。 |
| fontColor | [ResourceColor](../../ui/ts-types.md) | 设置下拉按钮本身的文本颜色。 |
| selectedOptionBgColor | [ResourceColor](../../ui/ts-types.md) | 设置下拉菜单选中项的背景色。 |
| selectedOptionFont | [Font](../../ui/ts-types.md) | 设置下拉菜单选中项的文本样式。 |
| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md) | 设置下拉菜单选中项的文本颜色。 |
| optionBgColor | [ResourceColor](../../ui/ts-types.md) | 设置下拉菜单项的背景色。 |
| optionFont | [Font](../../ui/ts-types.md) | 设置下拉菜单项的文本样式。 |
| optionFontColor | [ResourceColor](../../ui/ts-types.md) | 设置下拉菜单项的文本颜色。 |
## 事件
......
# Navigator
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
路由容器组件,提供路由跳转能力。
## 权限列表
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
......@@ -21,28 +16,28 @@
Navigator(value?: {target: string, type?: NavigationType})
创建路由组件。
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------------- | ---- | ---------------------------------------------- |
| target | string | 是 | 指定跳转目标页面的路径。 |
| type | NavigationType | 否 | 指定路由方式。<br/>默认值:NavigationType.Push |
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------------- | ---- | ------------------- | ------------ |
| target | string | 是 | - | 指定跳转目标页面的路径。 |
| type | NavigationType | 否 | NavigationType.Push | 指定路由方式。 |
## NavigationType枚举说明
- NavigationType枚举说明
| 名称 | 描述 |
| ------- | -------------------------- |
| Push | 跳转到应用内的指定页面。 |
| Replace | 用应用内的某个页面替换当前页面,并销毁被替换的页面。 |
| Back | 返回上一页面或指定的页面。 |
| 名称 | 描述 |
| ------- | -------------------------- |
| Push | 跳转到应用内的指定页面。 |
| Replace | 用应用内的某个页面替换当前页面,并销毁被替换的页面。 |
| Back | 返回上一页面或指定的页面。 |
## 属性
| 名称 | 参数 | 默认值 | 描述 |
| ------ | ------- | --------- | ---------------------------------------- |
| active | boolean | - | 当前路由组件是否处于激活状态,处于激活状态时,会生效相应的路由操作。 |
| params | Object | undefined | 跳转时要同时传递到目标页面的数据,可在目标页面使用router.getParams()获得。 |
| 名称 | 参数 | 描述 |
| ------ | ------- | ------------------------------------------------------------ |
| active | boolean | 当前路由组件是否处于激活状态,处于激活状态时,会生效相应的路由操作。 |
| params | Object | 跳转时要同时传递到目标页面的数据,可在目标页面使用router.getParams()获得。 |
## 示例
......
# Panel
可滑动面板,提供一种轻量的内容展示窗口,方便在不同尺寸中切换。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
可滑动面板,提供一种轻量的内容展示窗口,方便在不同尺寸中切换。
## 子组件
可以包含子组件。
## 权限列表
## 接口
Panel(show:boolean)
## 子组件
**参数:**
可以包含子组件。
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| show | boolean | 是 | 控制Panel显示或隐藏。 |
## 接口
## 属性
Panel(value:{show:boolean})
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| type | PanelType | 设置可滑动面板的类型。<br/>默认值:PanelType.Foldable |
| mode | PanelMode | 设置可滑动面板的初始状态。 |
| dragBar | boolean | 设置是否存在dragbar,true表示存在,false表示不存在。<br/>默认值:true |
| fullHeight | string&nbsp;\|&nbsp;number | 指定PanelMode.Full状态下的高度。 |
| halfHeight | string&nbsp;\|&nbsp;number | 指定PanelMode.Half状态下的高度,默认为屏幕尺寸的一半。 |
| miniHeight | string&nbsp;\|&nbsp;number | 指定PanelMode.Mini状态下的高度。 |
| show | boolean | 当滑动面板弹出时调用。 |
| backgroundMask<sup>9+</sup>|[ResourceColor](../../ui/ts-types.md#resourcecolor8)|指定Panel的背景蒙层。|
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| show | boolean | 是 | - | 控制Panel显示或隐藏。 |
## PanelType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Minibar | 提供minibar和类全屏展示切换效果。 |
| Foldable | 内容永久展示类,提供大(类全屏)、中(类半屏)、小三种尺寸展示切换效果。 |
| Temporary | 内容临时展示区,提供大(类全屏)、中(类半屏)两种尺寸展示切换效果。 |
## 属性
## PanelMode枚举说明
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| type | PanelType | PanelType.Foldable | 设置可滑动面板的类型。 |
| mode | PanelMode | - | 设置可滑动面板的初始状态。 |
| dragBar | boolean | true | 设置是否存在dragbar,true表示存在,false表示不存在。 |
| fullHeight | Length | - | 指定PanelMode.Full状态下的高度。 |
| halfHeight | Length | - | 指定PanelMode.Half状态下的高度,默认为屏幕尺寸的一半。 |
| miniHeight | Length | - | 指定PanelMode.Mini状态下的高度。 |
| backgroundMask<sup>9+</sup>|(color: ResourceColor)| - |指定Panel的背景蒙层。|
- PanelType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Minibar | 提供minibar和类全屏展示切换效果。 |
| Foldable | 内容永久展示类,提供大(类全屏)、中(类半屏)、小三种尺寸展示切换效果。 |
| Temporary | 内容临时展示区,提供大(类全屏)、中(类半屏)两种尺寸展示切换效果。 |
- PanelMode枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Mini | 类型为minibar和foldable时,为最小状态;类型为temporary,则不生效。 |
| Half | 类型为foldable和temporary时,为类半屏状态;类型为minibar,则不生效。 |
| Full | 类全屏状态。 |
| 名称 | 描述 |
| -------- | -------- |
| Mini | 类型为minibar和foldable时,为最小状态;类型为temporary,则不生效。 |
| Half | 类型为foldable和temporary时,为类半屏状态;类型为minibar,则不生效。 |
| Full | 类全屏状态。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| onChange(callback:&nbsp;(width:&nbsp;number,&nbsp;height:&nbsp;number,&nbsp;mode:&nbsp;PanelMode)&nbsp;=&gt;&nbsp;void) | 当可滑动面板发生状态变化时触发,&nbsp;返回的height值为内容区高度值,当dragbar属性为true时,panel本身的高度值为dragbar高度加上内容区高度。 |
| onHeightChange(callback: (value: number) => void)<sup>9+</sup> |当可滑动面板发生高度变化时触发,返回的height值为内容区高度值,当dragbar属性为true时,panel本身的高度值为dragbar高度加上内容区高度。因用户体验设计原因,panel最高只能滑到 fullHeight-8vp |
| onChange(event:&nbsp;(width:&nbsp;number,&nbsp;height:&nbsp;number,&nbsp;mode:&nbsp;PanelMode)&nbsp;=&gt;&nbsp;void) | 当可滑动面板发生状态变化时触发,&nbsp;返回的height值为内容区高度值,当dragbar属性为true时,panel本身的高度值为dragbar高度加上内容区高度。 |
| onHeightChange(callback: (value: number) => void)<sup>9+</sup> |当可滑动面板发生高度变化时触发,返回的height值为内容区高度值,当dragbar属性为true时,panel本身的高度值为dragbar高度加上内容区高度。因用户体验设计原因,panel最高只能滑到 fullHeight-8vp |
## 示例
......
......@@ -3,27 +3,24 @@
可以进行页面下拉操作并显示刷新动效的容器组件。
> **说明:**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 子组件
支持单个子组件。
## 接口
Refresh\(value: \{ refreshing: boolean, offset?: Length, friction?: number | string \}\)
Refresh\(value: \{ refreshing: boolean, offset?: number&nbsp;|&nbsp;string , friction?: number | string \}\)
- 参数
**参数:**
| 参数 | 参数名 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| refreshing | boolean | 是 | - | 当前组件是否正在刷新。<br/>该参数支持[$$](../../ui/ts-syntactic-sugar.md)双向绑定变量。 |
| offset | Length | 否 | 16 | 刷新组件静止时距离父组件顶部的距离。|
| friction | number&nbsp;\|&nbsp;string | 否 | 62 | 下拉摩擦系数,取值范围为0到100。<br/>-&nbsp;0表示下拉刷新容器不跟随手势下拉而下拉。<br/>-&nbsp;100表示下拉刷新容器紧紧跟随手势下拉而下拉。<br/>-&nbsp;数值越大,下拉刷新容器跟随手势下拉的反应越灵敏。 |
| 参数 | 参数名 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| refreshing | boolean | 是 | 当前组件是否正在刷新。<br/>该参数支持[$$](../../ui/ts-syntactic-sugar.md)双向绑定变量。 |
| offset | string&nbsp;\|&nbsp;number | 否 | 刷新组件静止时距离父组件顶部的距离。<br/>默认值:16,单位vp |
| friction | number&nbsp;\|&nbsp;string | 否 | 下拉摩擦系数,取值范围为0到100。<br/>默认值:62<br/>-&nbsp;0表示下拉刷新容器不跟随手势下拉而下拉。<br/>-&nbsp;100表示下拉刷新容器紧紧跟随手势下拉而下拉。<br/>-&nbsp;数值越大,下拉刷新容器跟随手势下拉的反应越灵敏。 |
......@@ -32,18 +29,18 @@ Refresh\(value: \{ refreshing: boolean, offset?: Length, friction?: number | str
| 名称 | 描述 |
| -------- | -------- |
| onStateChange(callback: (state: RefreshStatus) => void)| 当前刷新状态变更时,触发回调。<br/>state:刷新状态。 |
| onStateChange(callback: (state: RefreshStatus) => void)| 当前刷新状态变更时,触发回调。<br/>-&nbsp;state:刷新状态。 |
| onRefreshing(callback: () => void)| 进入刷新状态时触发回调。 |
- RefreshStatus枚举说明
## RefreshStatus枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Inactive | 默认未下拉状态。 |
| Drag | 下拉中,下拉距离小于刷新距离。 |
| OverDrag | 下拉中,下拉距离超过刷新距离。 |
| Refresh | 下拉结束,回弹至刷新距离,进入刷新状态。 |
| Done | 刷新结束,返回初始状态(顶部)。 |
| 名称 | 描述 |
| -------- | -------- |
| Inactive | 默认未下拉状态。 |
| Drag | 下拉中,下拉距离小于刷新距离。 |
| OverDrag | 下拉中,下拉距离超过刷新距离。 |
| Refresh | 下拉结束,回弹至刷新距离,进入刷新状态。 |
| Done | 刷新结束,返回初始状态(顶部)。 |
## 示例
......
# Row
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
沿水平方向布局容器。
## 权限列表
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
......@@ -19,20 +14,21 @@
## 接口
Row(value?:{space?: Length})
Row(value?:{space?: number&nbsp;|&nbsp;string })
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| space | Length | 否 | 0 | 横向布局元素间距。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| space | string&nbsp;\|&nbsp;number | 否 | 横向布局元素间距。<br/>默认值:0 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | VerticalAlign.Center | 在垂直方向上子组件的对齐格式。 |
| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | FlexAlign.Start | 设置子组件在水平方向上的对齐格式。 |
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | 设置子组件在垂直方向上的对齐格式。<br/>默认值:VerticalAlign.Center |
| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | 设置子组件在水平方向上的对齐格式。<br/>FlexAlign.Start |
## 示例
......
# SideBarContainer
> **说明:**
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
提供侧边栏可以显示和隐藏的侧边栏容器,通过子组件定义侧边栏和内容区,第一个子组件表示侧边栏,第二个子组件表示内容区。
## 权限列表
> **说明:**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
......@@ -21,44 +16,48 @@
SideBarContainer( type?: SideBarContainerType )
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| type | SideBarContainerType | 否 | SideBarContainerType.Embed | 设置侧边栏的显示类型。 |
**参数:**
- SideBarContainerType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Embed | 侧边栏嵌入到组件内,侧边栏和内容区并列显示。 |
| Overlay | 侧边栏浮在内容区上面。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| type | SideBarContainerType | 否 | 设置侧边栏的显示类型。<br/>默认值:SideBarContainerType.Embed |
## SideBarContainerType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Embed | 侧边栏嵌入到组件内,和内容区并列显示。 |
| Overlay | 侧边栏浮在内容区上面。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| showSideBar | boolean | 设置是否显示侧边栏。<br/>默认值:true |
| controlButton | ButtonStyle | 设置侧边栏控制按钮的属性。 |
| showControlButton | boolean | 设置是否显示控制按钮。<br/>默认值:true |
| sideBarWidth | number | 设置侧边栏的宽度。<br/>默认值:200,单位vp |
| minSideBarWidth | number | 设置侧边栏最小宽度。<br/>默认值:200,单位vp |
| maxSideBarWidth | number | 设置侧边栏最大宽度。<br/>默认值:280,单位vp |
| autoHide<sup>9+</sup> | boolean | 设置当侧边栏拖拽到小于最小宽度后,是否自动隐藏。<br/>默认值:true |
| sideBarPosition<sup>9+</sup> | SideBarPosition | 设置侧边栏显示位置。<br/>默认值:SideBarPosition.Start |
## ButtonStyle对象说明
| 名称 | 参数类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| showSideBar | boolean | true | 设置是否显示侧边栏。 |
| controlButton | ButtonStyle | - | 设置侧边栏控制按钮的属性。 |
| showControlButton | boolean | true | 设置是否显示控制按钮。 |
| sideBarWidth | number \| [Length<sup>9+</sup>](../../ui/ts-types.md#长度类型) | 200 | 设置侧边栏的宽度。 |
| minSideBarWidth | number \| [Length<sup>9+</sup>](../../ui/ts-types.md#长度类型) | 200 | 设置侧边栏最小宽度。 |
| maxSideBarWidth | number \| [Length<sup>9+</sup>](../../ui/ts-types.md#长度类型) | 280 | 设置侧边栏最大宽度。 |
| autoHide<sup>9+</sup> | boolean | true | 设置当侧边栏拖拽到小于最小宽度后,是否自动隐藏。 |
| sideBarPosition<sup>9+</sup> | SideBarPosition | SideBarPosition.Start | 设置侧边栏显示位置。 |
- ButtonStyle对象说明
| 名称 | 参数类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| left | number | 否 | 16 | 设置侧边栏控制按钮距离容器左界限的间距。 |
| top | number | 否 | 48 | 设置侧边栏控制按钮距离容器上界限的间距。 |
| width | number | 否 | 32 | 设置侧边栏控制按钮的宽度。 |
| height | number | 否 | 32 | 设置侧边栏控制按钮的高度。 |
| icons | {<br/>shown:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) ,<br/>hidden:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) ,<br/>switching?:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) <br/>} | 否 | - | 设置侧边栏控制按钮的图标:<br/> </p> - shown: 设置侧边栏显示时控制按钮的图标。<br>- hidden: 设置侧边栏隐藏时控制按钮的图标。<br>- switching:设置侧边栏显示和隐藏状态切换时控制按钮的图标。 |
- SideBarPosition<sup>9+</sup>枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Start | 侧边栏位于容器左侧。 |
| End | 侧边栏位于容器右侧。 |
| left | number | 否 | 设置侧边栏控制按钮距离容器左界限的间距。<br/>默认值:16,单位vp |
| top | number | 否 | 设置侧边栏控制按钮距离容器上界限的间距。<br/>默认值:48,单位vp |
| width | number | 否 | 设置侧边栏控制按钮的宽度。<br/>默认值:32,单位vp |
| height | number | 否 | 设置侧边栏控制按钮的高度。<br/>默认值:32,单位vp |
| icons | {<br/>shown:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) ,<br/>hidden:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) ,<br/>switching?:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) <br/>} | 否 | 设置侧边栏控制按钮的图标:<br/> </p> - shown: 设置侧边栏显示时控制按钮的图标。<br>- hidden: 设置侧边栏隐藏时控制按钮的图标。<br>- switching:设置侧边栏显示和隐藏状态切换时控制按钮的图标。 |
## SideBarPosition<sup>9+</sup>枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Start | 侧边栏位于容器左侧。 |
| End | 侧边栏位于容器右侧。 |
......@@ -66,7 +65,7 @@ SideBarContainer( type?: SideBarContainerType )
| 名称 | 功能描述 |
| -------- | -------- |
| onChange(callback: (value: boolean) =&gt; void) | 当侧边栏的状态在显示和隐藏之间切换时触发回调。<p> value的true表示显示,false表示隐藏。|
| onChange(callback: (value: boolean) =&gt; void) | 当侧边栏的状态在显示和隐藏之间切换时触发回调。<p> true表示显示,false表示隐藏。 |
## 示例
......
# Polygon
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
多边形绘制组件。
## 权限列表
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
......
# Polyline
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
折线绘制组件。
## 权限列表
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
......
# Rect
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
矩形绘制组件。
## 权限列表
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
......
# Shape
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
绘制组件的父组件,父组件中会描述所有绘制组件均支持的通用属性。
1、绘制组件使用Shape作为父组件,实现类似SVG的效果。
2、绘制组件单独使用,用于在页面上绘制指定的图形。
## 权限列表
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
......
......@@ -9,10 +9,10 @@
| 接口名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| animateTo(value:&nbsp;[AnimationOptions](#animationoptions对象说明),&nbsp;event:&nbsp;()=&gt;&nbsp;void)&nbsp;:&nbsp;void | 提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。<br/>event指定显示动效的闭包函数,在闭包函数中导致的状态变化系统会自动插入过渡动画。 |
| animateTo(value:&nbsp;[AnimateParam](#animateparam对象说明),&nbsp;event:&nbsp;()=&gt;&nbsp;void)&nbsp;:&nbsp;void | 提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。<br/>event指定显示动效的闭包函数,在闭包函数中导致的状态变化系统会自动插入过渡动画。 |
## AnimationOptions对象说明
## AnimateParam对象说明
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册