提交 605a6e4d 编写于 作者: H HelloCrease

update docs

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 3a1ffd8a
# GridItem
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
网格容器中单项内容容器。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -24,20 +24,20 @@ GridItem()
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| rowStart | number | - | 用于指定当前元素起始行号。 |
| rowEnd | number | - | 用于指定当前元素终点行号。 |
| columnStart | number | - | 用于指定当前元素起始列号。 |
| columnEnd | number | - | 用于指定当前元素终点列号。 |
| forceRebuild | boolean | false | 用于设置在触发组件build时是否重新创建此节点。 |
| selectable<sup>8+</sup> | boolean | true | 当前GridItem元素是否可以被鼠标框选。<br/>>&nbsp;&nbsp;**说明:**<br/>>&nbsp;外层Grid容器的鼠标框选开启时,GridItem的框选才生效。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------------------- | ------- | ----- | ---------------------------------------- |
| rowStart | number | - | 用于指定当前元素起始行号。 |
| rowEnd | number | - | 用于指定当前元素终点行号。 |
| columnStart | number | - | 用于指定当前元素起始列号。 |
| columnEnd | number | - | 用于指定当前元素终点列号。 |
| forceRebuild | boolean | false | 用于设置在触发组件build时是否重新创建此节点。 |
| selectable<sup>8+</sup> | boolean | true | 当前GridItem元素是否可以被鼠标框选。<br/>>&nbsp;&nbsp;**说明:**<br/>>&nbsp;外层Grid容器的鼠标框选开启时,GridItem的框选才生效。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onSelect(callback:&nbsp;(isSelected:&nbsp;boolean)&nbsp;=&gt;&nbsp;any)<sup>8+</sup> | GridItem元素被鼠标框选的状态改变时触发回调。<br/>isSelected:进入鼠标框选范围即被选中返回true,&nbsp;移出鼠标框选范围即未被选中返回false。 |
......
# List
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据,例如图片和文本。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -21,53 +21,54 @@
List(value:{space?: number, initialIndex?: number})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| space | number | 否 | 0 | 列表项间距。 |
| initialIndex | number | 否 | 0 | 设置当前List初次加载时视口起始位置显示的item,即显示第一个item,如设置的序号超过了最后一个item的序号,则设置不生效。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------------ | ------ | ---- | ---- | ---------------------------------------- |
| space | number | 否 | 0 | 列表项间距。 |
| initialIndex | number | 否 | 0 | 设置当前List初次加载时视口起始位置显示的item,即显示第一个item,如设置的序号超过了最后一个item的序号,则设置不生效。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| listDirection | [Axis](ts-appendix-enums.md#axis枚举说明) | Vertical | 设置List组件排列方向参照Axis枚举说明。 |
| divider | {<br/>strokeWidth:&nbsp;Length,<br/>color?:Color,<br/>startMargin?:&nbsp;Length,<br/>endMargin?:&nbsp;Length<br/>} | - | 用于设置ListItem分割线样式,默认无分割线。<br/>strokeWidth:&nbsp;分割线的线宽。<br/>color:&nbsp;分割线的颜色。<br/>startMargin:&nbsp;分割线距离列表侧边起始端的距离。<br/>endMargin:&nbsp;分割线距离列表侧边结束端的距离。 |
| editMode | boolean | false | 声明当前List组件是否处于可编辑模式。 |
| edgeEffect | EdgeEffect | EdgeEffect.Spring | 滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。 |
| chainAnimation | boolean | false | 用于设置当前list是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:list内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。<br/>-&nbsp;false:不启用链式联动。<br/>-&nbsp;true:启用链式联动。 |
| multiSelectable<sup>8+</sup> | boolean | false | 是否开启鼠标框选。<br/>-&nbsp;false:关闭框选。<br/>-&nbsp;true:开启框选。 |
| restoreId<sup>8+</sup> | number | - | 组件迁移标识符,标识后的组件在应用迁移时,组件状态会被迁移到被拉起方的同标识组件。<br/>列表组件状态,包括起始位置显示的item序号。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------------------------- | ---------------------------------------- | ----------------- | ---------------------------------------- |
| listDirection | [Axis](ts-appendix-enums.md#axis枚举说明) | Vertical | 设置List组件排列方向参照Axis枚举说明。 |
| divider | {<br/>strokeWidth:&nbsp;Length,<br/>color?:Color,<br/>startMargin?:&nbsp;Length,<br/>endMargin?:&nbsp;Length<br/>} | - | 用于设置ListItem分割线样式,默认无分割线。<br/>strokeWidth:&nbsp;分割线的线宽。<br/>color:&nbsp;分割线的颜色。<br/>startMargin:&nbsp;分割线距离列表侧边起始端的距离。<br/>endMargin:&nbsp;分割线距离列表侧边结束端的距离。 |
| editMode | boolean | false | 声明当前List组件是否处于可编辑模式。 |
| edgeEffect | EdgeEffect | EdgeEffect.Spring | 滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。 |
| chainAnimation | boolean | false | 用于设置当前list是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:list内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。<br/>-&nbsp;false:不启用链式联动。<br/>-&nbsp;true:启用链式联动。 |
| multiSelectable<sup>8+</sup> | boolean | false | 是否开启鼠标框选。<br/>-&nbsp;false:关闭框选。<br/>-&nbsp;true:开启框选。 |
| restoreId<sup>8+</sup> | number | - | 组件迁移标识符,标识后的组件在应用迁移时,组件状态会被迁移到被拉起方的同标识组件。<br/>列表组件状态,包括起始位置显示的item序号。 |
- EdgeEffect枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Spring | 弹性物理动效,滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离,松手后回弹。 |
| None | 滑动到边缘后无效果。 |
## EdgeEffect枚举说明
| 名称 | 描述 |
| ------ | ---------------------------------------- |
| Spring | 弹性物理动效,滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离,松手后回弹。 |
| None | 滑动到边缘后无效果。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| onItemDelete(index:&nbsp;number)&nbsp;=&gt;&nbsp;boolean | 列表项删除时触发。 |
| 名称 | 功能描述 |
| ---------------------------------------- | ------------------------ |
| onItemDelete(index:&nbsp;number)&nbsp;=&gt;&nbsp;boolean | 列表项删除时触发。 |
| onScrollIndex(firstIndex:&nbsp;number,&nbsp;lastIndex:&nbsp;number)&nbsp;=&gt;&nbsp;void | 当前列表显示的起始位置和终止位置发生变化时触发。 |
> **说明:**
> List使能可编辑模式需配合onItemDelete事件和ListItem的editable属性,即可编辑模式实现删除列表项功能,需满足以下条件:
>
> - editMode属性设置为true。
>
> - 绑定onItemDelete事件,且事件回调返回true。
>
> - ListItem的editable属性设置为true。
>
> 实现ListItem拖拽,需满足以下条件:
>
> - editMode属性设置为true。
>
> - 绑定onDragStart事件,且事件回调中返回浮动UI布局。
>
> List使能可编辑模式需配合onItemDelete事件和ListItem的editable属性,即可编辑模式实现删除列表项功能,需满足以下条件:
>
> - editMode属性设置为true。
>
> - 绑定onItemDelete事件,且事件回调返回true。
>
> - ListItem的editable属性设置为true。
>
> 实现ListItem拖拽,需满足以下条件:
>
> - editMode属性设置为true。
>
> - 绑定onDragStart事件,且事件回调中返回浮动UI布局。
## 示例
......
# ListItem
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
用来展示列表具体item,宽度默认充满List组件,必须配合List来使用。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -24,23 +24,23 @@ ListItem()
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| sticky | Sticky | Sticky.None | 设置ListItem吸顶效果,参见Sticky枚举描述。 |
| editable | boolean | false | 当前ListItem元素是否可编辑,进入编辑模式后可删除。 |
| selectable<sup>8+</sup> | boolean | true | 当前ListItem元素是否可以被鼠标框选。<br/>>&nbsp;&nbsp;**说明:**<br/>>&nbsp;外层List容器的鼠标框选开启时,ListItem的框选才生效。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------------------- | ------- | ----------- | ---------------------------------------- |
| sticky | Sticky | Sticky.None | 设置ListItem吸顶效果,参见Sticky枚举描述。 |
| editable | boolean | false | 当前ListItem元素是否可编辑,进入编辑模式后可删除。 |
| selectable<sup>8+</sup> | boolean | true | 当前ListItem元素是否可以被鼠标框选。<br/>>&nbsp;&nbsp;**说明:**<br/>>&nbsp;外层List容器的鼠标框选开启时,ListItem的框选才生效。 |
- Sticky枚举说明
| 名称 | 描述 |
| -------- | -------- |
| None | 无吸顶效果。 |
| Normal | 当前item吸顶。 |
## Sticky枚举说明
| 名称 | 描述 |
| ------ | --------- |
| None | 无吸顶效果。 |
| Normal | 当前item吸顶。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onSelect(callback:&nbsp;(isSelected:&nbsp;boolean)&nbsp;=&gt;&nbsp;any)<sup>8+</sup> | ListItem元素被鼠标框选的状态改变时触发回调。<br/>isSelected:进入鼠标框选范围即被选中返回true,&nbsp;移出鼠标框选范围即未被选中返回false。 |
......
# Navigator
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
路由容器组件,提供路由跳转能力。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -23,26 +23,27 @@ Navigator(value?: {target: string, type?: NavigationType})
创建路由组件。
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| target | string | 是 | - | 指定跳转目标页面的路径。 |
| type | NavigationType | 否 | NavigationType.Push | 指定路由方式。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------------- | ---- | ------------------- | ------------ |
| target | string | 是 | - | 指定跳转目标页面的路径。 |
| type | NavigationType | 否 | NavigationType.Push | 指定路由方式。 |
- NavigationType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Push | 跳转到应用内的指定页面。 |
| Replace | 用应用内的某个页面替换当前页面,并销毁被替换的页面。 |
| Back | 返回上一页面或指定的页面。 |
## NavigationType枚举说明
| 名称 | 描述 |
| ------- | -------------------------- |
| Push | 跳转到应用内的指定页面。 |
| Replace | 用应用内的某个页面替换当前页面,并销毁被替换的页面。 |
| Back | 返回上一页面或指定的页面。 |
## 属性
| 名称 | 参数 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| active | boolean | - | 当前路由组件是否处于激活状态,处于激活状态时,会生效相应的路由操作。 |
| params | Object | undefined | 跳转时要同时传递到目标页面的数据,可在目标页面使用router.getParams()获得。 |
| 名称 | 参数 | 默认值 | 描述 |
| ------ | ------- | --------- | ---------------------------------------- |
| active | boolean | - | 当前路由组件是否处于激活状态,处于激活状态时,会生效相应的路由操作。 |
| params | Object | undefined | 跳转时要同时传递到目标页面的数据,可在目标页面使用router.getParams()获得。 |
## 示例
......
# Panel
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
可滑动面板。提供一种轻量的内容展示的窗口,可方便的在不同尺寸中切换,属于弹出式组件。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -21,43 +21,44 @@
Panel(value:{show:boolean})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| show | boolean | 是 | - | 控制Panel显示或隐藏。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---- | ------- | ---- | ---- | ------------- |
| show | boolean | 是 | - | 控制Panel显示或隐藏。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| type | PanelType | PanelType.Foldable | 设置可滑动面板的类型。 |
| mode | PanelMode | - | 设置可滑动面板的初始状态。 |
| dragBar | boolean | true | 设置是否存在dragbar,true表示存在,false表示不存在。 |
| fullHeight | Length | - | 指定PanelMode.Full状态下的高度。 |
| halfHeight | Length | - | 指定PanelMode.Half状态下的高度,默认为屏幕尺寸的一半。 |
| miniHeight | Length | - | 指定PanelMode.Mini状态下的高度。 |
- PanelType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Minibar | 提供minibar和类全屏展示切换效果。 |
| Foldable | 内容永久展示类,提供大(类全屏)、中(类半屏)、小三种尺寸展示切换效果。 |
| Temporary | 内容临时展示区,提供大(类全屏)、中(类半屏)两种尺寸展示切换效果。 |
- PanelMode枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Mini | 类型为minibar和foldable时,为最小状态;类型为temporary,则不生效。 |
| Half | 类型为foldable和temporary时,为类半屏状态;类型为minibar,则不生效。 |
| Full | 类全屏状态。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------- | --------- | ------------------ | ---------------------------------- |
| type | PanelType | PanelType.Foldable | 设置可滑动面板的类型。 |
| mode | PanelMode | - | 设置可滑动面板的初始状态。 |
| dragBar | boolean | true | 设置是否存在dragbar,true表示存在,false表示不存在。 |
| fullHeight | Length | - | 指定PanelMode.Full状态下的高度。 |
| halfHeight | Length | - | 指定PanelMode.Half状态下的高度,默认为屏幕尺寸的一半。 |
| miniHeight | Length | - | 指定PanelMode.Mini状态下的高度。 |
## PanelType枚举说明
| 名称 | 描述 |
| --------- | ------------------------------------ |
| Minibar | 提供minibar和类全屏展示切换效果。 |
| Foldable | 内容永久展示类,提供大(类全屏)、中(类半屏)、小三种尺寸展示切换效果。 |
| Temporary | 内容临时展示区,提供大(类全屏)、中(类半屏)两种尺寸展示切换效果。 |
## PanelMode枚举说明
| 名称 | 描述 |
| ---- | ---------------------------------------- |
| 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高度加上内容区高度。 |
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onChange(callback:&nbsp;(width:&nbsp;number,&nbsp;height:&nbsp;number,&nbsp;mode:&nbsp;PanelMode)&nbsp;=&gt;&nbsp;void) | 当可滑动面板发生状态变化时触发,&nbsp;返回的height值为内容区高度值,当dragbar属性为true时,panel本身的高度值为dragbar高度加上内容区高度。 |
## 示例
......
# Refresh
> **说明:**
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
下拉刷新容器。
> **说明:**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -17,34 +18,32 @@
Refresh\(value: \{refreshing: boolean, offset?: Length, friction?: number | string\}\)
- 参数
| 参数 | 参数名 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| refreshing | boolean | 是 | - | 当前组件是否正在刷新。 |
| offset | Length | 否 | 16 | 刷新组件静止时距离父组件顶部的距离。|
| friction | number&nbsp;\|&nbsp;string | 否 | 62 | 下拉摩擦系数,取值范围为0到100。<br/>-&nbsp;0表示下拉刷新容器不跟随手势下拉而下拉。<br/>-&nbsp;100表示下拉刷新容器紧紧跟随手势下拉而下拉。<br/>-&nbsp;数值越大,下拉刷新容器跟随手势下拉的反应越灵敏。 |
**参数:**
| 参数 | 参数名 | 必填 | 默认值 | 参数描述 |
| ---------- | -------------------------- | ---- | ---- | ---------------------------------------- |
| refreshing | boolean | 是 | - | 当前组件是否正在刷新。 |
| offset | Length | 否 | 16 | 刷新组件静止时距离父组件顶部的距离。 |
| friction | number&nbsp;\|&nbsp;string | 否 | 62 | 下拉摩擦系数,取值范围为0到100。<br/>-&nbsp;0表示下拉刷新容器不跟随手势下拉而下拉。<br/>-&nbsp;100表示下拉刷新容器紧紧跟随手势下拉而下拉。<br/>-&nbsp;数值越大,下拉刷新容器跟随手势下拉的反应越灵敏。 |
## 事件
| 名称 | 描述 |
| -------- | -------- |
| onStateChange(callback: (state: RefreshStatus) => void)| 当前刷新状态变更时,触发回调。<br/>state:刷新状态。 |
| onRefreshing(callback: () => void)| 进入刷新状态时触发回调。 |
- RefreshStatus枚举说明
| 名称 | 描述 |
| ---------------------------------------- | ------------------------------- |
| onStateChange(callback: (state: RefreshStatus) => void) | 当前刷新状态变更时,触发回调。<br/>state:刷新状态。 |
| onRefreshing(callback: () => void) | 进入刷新状态时触发回调。 |
| 名称 | 描述 |
| -------- | -------- |
| Inactive | 默认未下拉状态。 |
| Drag | 下拉中,下拉距离小于刷新距离。 |
| OverDrag | 下拉中,下拉距离超过刷新距离。 |
| Refresh | 下拉结束,回弹至刷新距离,进入刷新状态。 |
| Done | 刷新结束,返回初始状态(顶部)。 |
## RefreshStatus枚举说明
| 名称 | 描述 |
| -------- | -------------------- |
| Inactive | 默认未下拉状态。 |
| Drag | 下拉中,下拉距离小于刷新距离。 |
| OverDrag | 下拉中,下拉距离超过刷新距离。 |
| Refresh | 下拉结束,回弹至刷新距离,进入刷新状态。 |
| Done | 刷新结束,返回初始状态(顶部)。 |
## 示例
......
# Row
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
沿水平方向布局容器。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -21,26 +21,26 @@
Row(value:{space?: Length})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| space | Length | 否 | 0 | 横向布局元素间距。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | --------- |
| space | Length | 否 | 0 | 横向布局元素间距。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| alignItems | VerticalAlign | VerticalAlign.Center | 在垂直方向上子组件的对齐格式。 |
| justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | 设置子组件在水平方向上的对齐格式。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------------- | --------------------------------- | -------------------- | ----------------- |
| alignItems | VerticalAlign | VerticalAlign.Center | 在垂直方向上子组件的对齐格式。 |
| justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | 设置子组件在水平方向上的对齐格式。 |
- VerticalAlign枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Top | 顶部对齐。 |
| Center | 居中对齐,默认对齐方式。 |
| Bottom | 底部对齐。 |
## VerticalAlign枚举说明
| 名称 | 描述 |
| ------ | ------------ |
| Top | 顶部对齐。 |
| Center | 居中对齐,默认对齐方式。 |
| Bottom | 底部对齐。 |
## 示例
......
# RowSplit
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
将子组件横向布局,并在每个子组件之间插入一根纵向的分割线。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -24,12 +24,12 @@ RowSplit()
## 属性
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| resizeable | boolean | 分割线是否可拖拽,默认为false。 |
| 名称 | 参数类型 | 描述 |
| ---------- | ------- | ------------------ |
| resizeable | boolean | 分割线是否可拖拽,默认为false。 |
> **说明:**
> RowSplit的分割线最小能拖动到刚好包含子组件。
> RowSplit的分割线最小能拖动到刚好包含子组件。
## 示例
......
# Scroll
> **说明:**
> 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
可滚动的容器组件,当子组件的布局尺寸超过父组件的视口时,内容可以滚动。
> **说明:**
>
> 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -31,12 +31,13 @@ Scroll(scroller?: Scroller)
| scrollBarColor | Color | - | 设置滚动条的颜色。 |
| scrollBarWidth | Length | - | 设置滚动条的宽度。 |
- ScrollDirection枚举说明
| 名称 | 描述 |
| ---------- | ---------- |
| Horizontal | 仅支持水平方向滚动。 |
| Vertical | 仅支持竖直方向滚动。 |
| None | 不可滚动。 |
## ScrollDirection枚举说明
| 名称 | 描述 |
| ---------- | ---------- |
| Horizontal | 仅支持水平方向滚动。 |
| Vertical | 仅支持竖直方向滚动。 |
| None | 不可滚动。 |
## 事件
......@@ -65,14 +66,13 @@ scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?
滑动到指定位置。
**参数:**
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| xOffset | Length | 是 | - | 水平滑动偏移。 |
| yOffset | Length | 是 | - | 竖直滑动偏移。 |
| animation | {<br/>duration:&nbsp;number,<br/>curve:&nbsp;[Curve](ts-animatorproperty.md)&nbsp;\|<br/>CubicBezier&nbsp;\|<br/>SpringCurve<br/>} | 否 | | 动画配置:<br/>-&nbsp;duration:&nbsp;滚动时长设置。<br/>-&nbsp;curve:&nbsp;滚动曲线设置。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| xOffset | Length | 是 | - | 水平滑动偏移。 |
| yOffset | Length | 是 | - | 竖直滑动偏移。 |
| animation | {<br/>duration:&nbsp;number,<br/>curve:&nbsp;[Curve](ts-animatorproperty.md)&nbsp;\|<br/>CubicBezier&nbsp;\|<br/>SpringCurve<br/>} | 否 | | 动画配置:<br/>-&nbsp;duration:&nbsp;滚动时长设置。<br/>-&nbsp;curve:&nbsp;滚动曲线设置。 |
### scrollEdge
......@@ -81,12 +81,11 @@ scrollEdge(value: Edge): void
滚动到容器边缘。
**参数:**
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ---- | ---- | ---- | --------- |
| value | Edge | 是 | - | 滚动到的边缘位置。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ---- | ---- | ---- | --------- |
| value | Edge | 是 | - | 滚动到的边缘位置。 |
### scrollPage
......@@ -94,12 +93,12 @@ scrollPage(value: { next: boolean, direction?: Axis }): void
滚动到下一页或者上一页。
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ------- | ---- | ---- | ------------------------------ |
| next | boolean | 是 | - | 是否向下翻页。true表示向下翻页,false表示向上翻页。 |
| direction | Axis | 否 | - | 设置滚动方向为水平或竖直方向。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ------- | ---- | ---- | ------------------------------ |
| next | boolean | 是 | - | 是否向下翻页。true表示向下翻页,false表示向上翻页。 |
| direction | Axis | 否 | - | 设置滚动方向为水平或竖直方向。 |
### currentOffset
......@@ -108,12 +107,11 @@ scroller.currentOffset(): Object
返回当前的滚动偏移量。
**返回值:**
- 返回值
| 类型 | 描述 |
| ---------------------------------------- | ---------------------------------------- |
| {<br/>xOffset:&nbsp;number,<br/>yOffset:&nbsp;number<br/>} | xOffset:&nbsp;水平滑动偏移;<br/>yOffset:&nbsp;竖直滑动偏移。 |
| 类型 | 描述 |
| ---------------------------------------- | ---------------------------------------- |
| {<br/>xOffset:&nbsp;number,<br/>yOffset:&nbsp;number<br/>} | xOffset:&nbsp;水平滑动偏移;<br/>yOffset:&nbsp;竖直滑动偏移。 |
### scrollToIndex
......@@ -124,14 +122,13 @@ scroller.scrollToIndex(value: number): void
> **说明:**
> 仅支持list组件。
> 仅支持list组件。
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- |
| value | number | 是 | - | 要滑动到的列表项在列表中的索引值。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- |
| value | number | 是 | - | 要滑动到的列表项在列表中的索引值。 |
## 示例
......
# SideBarContainer
> **说明:**
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
提供侧边栏可以显示和隐藏的侧边栏容器,通过子组件定义侧边栏和内容区,第一个子组件表示侧边栏,第二个子组件表示内容区。
> **说明:**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -21,45 +21,47 @@
SideBarContainer( type?: SideBarContainerType )
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| type | SideBarContainerType | 否 | SideBarContainerType.Embed | 设置侧边栏的显示类型。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---- | -------------------- | ---- | -------------------------- | ----------- |
| type | SideBarContainerType | 否 | SideBarContainerType.Embed | 设置侧边栏的显示类型。 |
## SideBarContainerType枚举说明
- SideBarContainerType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Embed | 侧边栏嵌入到组件内,侧边栏和内容区并列显示。 |
| Overlay | 侧边栏浮在内容区上面。 |
| 名称 | 描述 |
| ------- | ---------------------- |
| Embed | 侧边栏嵌入到组件内,侧边栏和内容区并列显示。 |
| Overlay | 侧边栏浮在内容区上面。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| showSideBar | boolean | true | 设置是否显示侧边栏。 |
| controlButton | ButtonStyle | - | 设置侧边栏控制按钮的属性。 |
| showControlButton | boolean | true | 设置是否显示控制按钮。 |
| sideBarWidth | number | 200 | 设置侧边栏的宽度。 |
| minSideBarWidth | number | 200 | 设置侧边栏最小宽度。 |
| maxSideBarWidth | number | 280 | 设置侧边栏最大宽度。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------------- | ----------- | ---- | ------------- |
| showSideBar | boolean | true | 设置是否显示侧边栏。 |
| controlButton | ButtonStyle | - | 设置侧边栏控制按钮的属性。 |
| showControlButton | boolean | true | 设置是否显示控制按钮。 |
| sideBarWidth | number | 200 | 设置侧边栏的宽度。 |
| minSideBarWidth | number | 200 | 设置侧边栏最小宽度。 |
| maxSideBarWidth | number | 280 | 设置侧边栏最大宽度。 |
- 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:设置侧边栏显示和隐藏状态切换时控制按钮的图标。 |
## 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:设置侧边栏显示和隐藏状态切换时控制按钮的图标。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| onChange(callback: (value: boolen) =&gt; void) | 当侧边栏的状态在显示和隐藏之间切换时触发回调。<p> value的true表示显示,false表示隐藏。|
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onChange(callback: (value: boolen) =&gt; void) | 当侧边栏的状态在显示和隐藏之间切换时触发回调。<p> value的true表示显示,false表示隐藏。 |
## 示例
......
# Stack
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -21,11 +21,11 @@
Stack(value:{alignContent?: Alignment})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| alignContent | [Alignment](ts-appendix-enums.md#alignment枚举说明) | 否 | Center | 设置子组件在容器内的对齐方式。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------------ | ---------------------------------------- | ---- | ------ | --------------- |
| alignContent | [Alignment](ts-appendix-enums.md#alignment枚举说明) | 否 | Center | 设置子组件在容器内的对齐方式。 |
## 示例
......
......@@ -20,11 +20,11 @@
Swiper(value:{controller?: SwiperController})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | ------------------------------------- | ---- | ---- | -------------------- |
| controller | [SwiperController](#swipercontroller) | 否 | null | 给组件绑定一个控制器,用来控制组件翻页。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | ------------------------------------- | ---- | ---- | -------------------- |
| controller | [SwiperController](#swipercontroller) | 否 | null | 给组件绑定一个控制器,用来控制组件翻页。 |
## 属性
......
# TabContent
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
仅在Tabs中使用,对应一个切换页签的内容视图。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -31,9 +31,9 @@ TabContent()
| tabBar | string&nbsp;\|&nbsp;{<br/>icon?:&nbsp;string,<br/>text?:&nbsp;string<br/>}<br/>\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 设置TabBar上显示内容。<br/>CustomBuilder:&nbsp;构造器,内部可以传入组件(API8版本以上适用)。<br/>>&nbsp;&nbsp;**说明:**<br/>>&nbsp;如果icon采用svg格式图源,则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源,icon大小则是svg本身内置的宽高属性值大小。 |
> **说明:**
> - TabContent组件不支持设置通用宽度属性,其宽度默认撑满Tabs父组件。
> - TabContent组件不支持设置通用宽度属性,其宽度默认撑满Tabs父组件。
>
> - TabContent组件不支持设置通用高度属性,其高度由Tabs父组件高度与TabBar组件高度决定。
> - TabContent组件不支持设置通用高度属性,其高度由Tabs父组件高度与TabBar组件高度决定。
## 示例
......
# Tabs
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
一种可以通过页签进行内容视图切换的容器组件,每个页签对应一个内容视图。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -21,45 +21,46 @@
Tabs(value: {barPosition?: BarPosition, index?: number, controller?: [TabsController](#tabscontroller)})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| barPosition | BarPosition | 否 | BarPosition.Start | 指定页签位置来创建Tabs容器组件。 |
| index | number | 否 | 0 | 指定初次初始页签索引。 |
| controller | [TabsController](#tabscontroller) | 否 | - | 设置Tabs控制器。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------- | --------------------------------- | ---- | ----------------- | ------------------ |
| barPosition | BarPosition | 否 | BarPosition.Start | 指定页签位置来创建Tabs容器组件。 |
| index | number | 否 | 0 | 指定初次初始页签索引。 |
| controller | [TabsController](#tabscontroller) | 否 | - | 设置Tabs控制器。 |
- BarPosition枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Start | vertical属性方法设置为true时,页签位于容器左侧;vertical属性方法设置为false时,页签位于容器顶部。 |
| End | vertical属性方法设置为true时,页签位于容器右侧;vertical属性方法设置为false时,页签位于容器底部。 |
## BarPosition枚举说明
| 名称 | 描述 |
| ----- | ---------------------------------------- |
| Start | vertical属性方法设置为true时,页签位于容器左侧;vertical属性方法设置为false时,页签位于容器顶部。 |
| End | vertical属性方法设置为true时,页签位于容器右侧;vertical属性方法设置为false时,页签位于容器底部。 |
## 属性
不支持触摸热区设置。
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| vertical | boolean | 是否为纵向Tab,默认为false。 | 是否为纵向Tab,默认为false。 |
| scrollable | boolean | 是否可以通过左右滑动进行页面切换,默认为true。 | 是否可以通过左右滑动进行页面切换,默认为true。 |
| barMode | BarMode | TabBar布局模式。 | TabBar布局模式。 |
| barWidth | number | TabBar的宽度值,不设置时使用系统主题中的默认值。 | TabBar的宽度值,不设置时使用系统主题中的默认值。 |
| barHeight | number | TabBar的高度值,不设置时使用系统主题中的默认值。 | TabBar的高度值,不设置时使用系统主题中的默认值**。** |
| animationDuration | number | 200 | TabContent滑动动画时长。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------------- | ------- | --------------------------- | ------------------------------- |
| vertical | boolean | 是否为纵向Tab,默认为false。 | 是否为纵向Tab,默认为false。 |
| scrollable | boolean | 是否可以通过左右滑动进行页面切换,默认为true。 | 是否可以通过左右滑动进行页面切换,默认为true。 |
| barMode | BarMode | TabBar布局模式。 | TabBar布局模式。 |
| barWidth | number | TabBar的宽度值,不设置时使用系统主题中的默认值。 | TabBar的宽度值,不设置时使用系统主题中的默认值。 |
| barHeight | number | TabBar的高度值,不设置时使用系统主题中的默认值。 | TabBar的高度值,不设置时使用系统主题中的默认值**。** |
| animationDuration | number | 200 | TabContent滑动动画时长。 |
- BarMode枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Scrollable | TabBar使用实际布局宽度,&nbsp;超过总长度后可滑动。 |
| Fixed | 所有TabBar平均分配宽度。 |
## BarMode枚举说明
| 名称 | 描述 |
| ---------- | ------------------------------- |
| Scrollable | TabBar使用实际布局宽度,&nbsp;超过总长度后可滑动。 |
| Fixed | 所有TabBar平均分配宽度。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| onChange(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;void) | Tab页签切换后触发的事件。 |
| 名称 | 功能描述 |
| ---------------------------------------- | -------------- |
| onChange(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;void) | Tab页签切换后触发的事件。 |
## TabsController
......@@ -78,11 +79,11 @@ changeIndex(value: number): void
控制Tabs切换到指定页签。
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | number | 是 | - | 页签在Tabs里的索引值,索引值从0开始。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | --------------------- |
| value | number | 是 | - | 页签在Tabs里的索引值,索引值从0开始。 |
## 示例
......
# Circle
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
圆形绘制组件。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -21,24 +21,19 @@
Circle(options?: {width: Length, height: Length})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| options | Object | 否 | - | 见options参数说明。 |
- options参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 是 | - | 宽度。 |
| height | Length | 是 | - | 高度。 |
**options参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | ------ | ---- | ---- | ---- |
| width | Length | 是 | - | 宽度。 |
| height | Length | 是 | - | 高度。 |
## 属性
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | 否 | 圆所在矩形的宽度。 |
| height | Length | 0 | 否 | 圆所在矩形的高度。 |
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| ------ | ------ | ---- | ---- | --------- |
| width | Length | 0 | 否 | 圆所在矩形的宽度。 |
| height | Length | 0 | 否 | 圆所在矩形的高度。 |
## 示例
......
# Ellipse
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
椭圆绘制组件。
......@@ -21,24 +22,19 @@
ellipse(options?: {width: Length, height: Length})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| options | Object | 否 | - | 见options参数说明。 |
- options参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 是 | - | 宽度。 |
| height | Length | 是 | - | 高度。 |
**options参数说明:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | ------ | ---- | ---- | ---- |
| width | Length | 是 | - | 宽度。 |
| height | Length | 是 | - | 高度。 |
## 属性
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | 否 | 椭圆所在矩形的宽度。 |
| height | Length | 0 | 否 | 椭圆所在矩形的高度。 |
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| ------ | ------ | ---- | ---- | ---------- |
| width | Length | 0 | 否 | 椭圆所在矩形的宽度。 |
| height | Length | 0 | 否 | 椭圆所在矩形的高度。 |
## 示例
......
# Line
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
直线绘制组件。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -21,26 +21,21 @@
Line(options?: {width: Length, height: Length})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| options | Object | 否 | - | 见options参数说明。 |
- options参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 是 | - | 宽度。 |
| height | Length | 是 | - | 高度。 |
**options参数说明:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | ------ | ---- | ---- | ---- |
| width | Length | 是 | - | 宽度。 |
| height | Length | 是 | - | 高度。 |
## 属性
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | 否 | 直线所在矩形的宽度。 |
| height | Length | 0 | 否 | 直线所在矩形的高度。 |
| startPoint | Point | [0,&nbsp;0] | 是 | 直线起点坐标(相对坐标)。 |
| endPoint | Point | [0,&nbsp;0] | 是 | 直线终点坐标(相对坐标)。 |
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| ---------- | ------ | ----------- | ---- | ------------- |
| width | Length | 0 | 否 | 直线所在矩形的宽度。 |
| height | Length | 0 | 否 | 直线所在矩形的高度。 |
| startPoint | Point | [0,&nbsp;0] | 是 | 直线起点坐标(相对坐标)。 |
| endPoint | Point | [0,&nbsp;0] | 是 | 直线终点坐标(相对坐标)。 |
## 示例
......
......@@ -16,14 +16,13 @@
Path(value?: { width?: number | string, height?: number | string, commands?: string })
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ---------------- | ---- | ---- | ----------- |
| width | number \| string | 否 | 0 | 路径所在矩形的宽度。 |
| height | number \| string | 否 | 0 | 路径所在矩形的高度。 |
| commands | string | 否 | '' | 路径绘制的命令字符串。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ---------------- | ---- | ---- | ----------- |
| width | number \| string | 否 | 0 | 路径所在矩形的宽度。 |
| height | number \| string | 否 | 0 | 路径所在矩形的高度。 |
| commands | string | 否 | '' | 路径绘制的命令字符串。 |
## 属性
......
# Polygon
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
多边形绘制组件。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -21,25 +21,20 @@
Polygon(value:{options?: {width: Length, height: Length}})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| options | Object | 否 | - | 见见options参数说明。 |
- options参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 是 | - | 宽度。 |
| height | Length | 是 | - | 高度。 |
**options参数说明:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | ------ | ---- | ---- | ---- |
| width | Length | 是 | - | 宽度。 |
| height | Length | 是 | - | 高度。 |
## 属性
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | 否 | 多边形所在矩形的宽度。 |
| height | Length | 0 | 否 | 多边形所在矩形的高度。 |
| points | Array&lt;Point&gt; | - | 是 | 多边形的顶点坐标列表。 |
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| ------ | ------------------ | ---- | ---- | ----------- |
| width | Length | 0 | 否 | 多边形所在矩形的宽度。 |
| height | Length | 0 | 否 | 多边形所在矩形的高度。 |
| points | Array&lt;Point&gt; | - | 是 | 多边形的顶点坐标列表。 |
## 示例
......
# Polyline
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
折线绘制组件。
......@@ -21,25 +22,20 @@
Polyline(options?: {width: Length, height: Length})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| options | Object | 否 | - | 见options参数说明。 |
- options参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 是 | - | 宽度。 |
| height | Length | 是 | - | 高度。 |
**options参数说明:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | ------ | ---- | ---- | ---- |
| width | Length | 是 | - | 宽度。 |
| height | Length | 是 | - | 高度。 |
## 属性
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | 否 | 折线所在矩形的宽度。 |
| height | Length | 0 | 否 | 折线所在矩形的高度。 |
| points | Array&lt;Point&gt; | - | 是 | 折线经过坐标点列表。 |
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| ------ | ------------------ | ---- | ---- | ---------- |
| width | Length | 0 | 否 | 折线所在矩形的宽度。 |
| height | Length | 0 | 否 | 折线所在矩形的高度。 |
| points | Array&lt;Point&gt; | - | 是 | 折线经过坐标点列表。 |
## 示例
......
# Rect
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
矩形绘制组件。
......@@ -21,30 +22,25 @@
Rect(value:{options?: {width: Length,height: Length,radius?: Length | Array&lt;Length&gt;} | {width: Length,height: Length,radiusWidth?: Length,radiusHeight?: Length}})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| options | Object | 否 | - | 见options参数说明。 |
- options参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 是 | - | 宽度。 |
| height | Length | 是 | - | 高度。 |
| radius | Length&nbsp;\|&nbsp;Array&lt;Length&gt; | 否 | 0 | 圆角半径,支持分别设置四个角的圆角度数。 |
| radiusWidth | Length | 否 | 0 | 圆角宽度。 |
| radiusHeight | Length | 否 | 0 | 圆角高度。 |
**options参数说明:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------------ | --------------------------------------- | ---- | ---- | -------------------- |
| width | Length | 是 | - | 宽度。 |
| height | Length | 是 | - | 高度。 |
| radius | Length&nbsp;\|&nbsp;Array&lt;Length&gt; | 否 | 0 | 圆角半径,支持分别设置四个角的圆角度数。 |
| radiusWidth | Length | 否 | 0 | 圆角宽度。 |
| radiusHeight | Length | 否 | 0 | 圆角高度。 |
## 属性
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | 否 | 宽度。 |
| height | Length | 0 | 否 | 高度。 |
| radiusWidth | Length | 0 | 否 | 圆角的宽度,仅设置宽时宽高一致。 |
| radiusHeight | Length | 0 | 否 | 圆角的高度,仅设置高时宽高一致。 |
| radius | Length&nbsp;\|&nbsp;Array&lt;Length&gt; | 0 | 否 | 圆角大小。 |
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| ------------ | --------------------------------------- | ---- | ---- | ---------------- |
| width | Length | 0 | 否 | 宽度。 |
| height | Length | 0 | 否 | 高度。 |
| radiusWidth | Length | 0 | 否 | 圆角的宽度,仅设置宽时宽高一致。 |
| radiusHeight | Length | 0 | 否 | 圆角的高度,仅设置高时宽高一致。 |
| radius | Length&nbsp;\|&nbsp;Array&lt;Length&gt; | 0 | 否 | 圆角大小。 |
## 示例
......
# Shape
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
绘制组件的父组件,父组件中会描述所有绘制组件均支持的通用属性。
1、绘制组件使用Shape作为父组件,实现类似SVG的效果。
2、绘制组件单独使用,用于在页面上绘制指定的图形。
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -27,35 +25,35 @@
Shape(value:{target?: PixelMap})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| target | PixelMap | 否 | null | 绘制目标,可将图形绘制在指定的PixelMap对象中,若未设置,则在当前绘制目标中进行绘制。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------- | ---- | ---- | ---------------------------------------- |
| target | PixelMap | 否 | null | 绘制目标,可将图形绘制在指定的PixelMap对象中,若未设置,则在当前绘制目标中进行绘制。 |
## 属性
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| viewPort | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length,<br/>width:&nbsp;Length,<br/>height:&nbsp;Length<br/>} | - | 是 | 形状的视口。 |
| fill | Color | Black | 否 | 填充颜色。 |
| stroke | Color | - | 否 | 边框颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置边框的间隙。 |
| strokeDashOffset | Length | 0 | 否 | 边框绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#LineCapStyle枚举说明) | LineCapStyle.Butt | 否 | 路径端点绘制样式。 |
| strokeLineJoin | LineJoinStyle | LineJoinStyle.Miter | 否 | 边框拐角绘制样式。 |
| strokeMiterLimit | number | 4 | 否 | 锐角绘制成斜角的极限值。 |
| strokeOpacity | number | 1 | 否 | 设置边框的不透明度。 |
| strokeWidth | Length | 1 | 否 | 设置边框的宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿。 |
- LineJoinStyle枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Bevel | 使用斜角连接路径段。 |
| Miter | 使用尖角连接路径段。 |
| Round | 使用圆角连接路径段。 |
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| ---------------- | ---------------------------------------- | ------------------- | ---- | ------------ |
| viewPort | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length,<br/>width:&nbsp;Length,<br/>height:&nbsp;Length<br/>} | - | 是 | 形状的视口。 |
| fill | Color | Black | 否 | 填充颜色。 |
| stroke | Color | - | 否 | 边框颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置边框的间隙。 |
| strokeDashOffset | Length | 0 | 否 | 边框绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#LineCapStyle枚举说明) | LineCapStyle.Butt | 否 | 路径端点绘制样式。 |
| strokeLineJoin | LineJoinStyle | LineJoinStyle.Miter | 否 | 边框拐角绘制样式。 |
| strokeMiterLimit | number | 4 | 否 | 锐角绘制成斜角的极限值。 |
| strokeOpacity | number | 1 | 否 | 设置边框的不透明度。 |
| strokeWidth | Length | 1 | 否 | 设置边框的宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿。 |
## LineJoinStyle枚举说明
| 名称 | 描述 |
| ----- | ---------- |
| Bevel | 使用斜角连接路径段。 |
| Miter | 使用尖角连接路径段。 |
| Round | 使用圆角连接路径段。 |
## 示例
......
# 显式动画
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
| 接口名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| 接口名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| animateTo(value:&nbsp;[AnimationOptions](#animationoptions对象说明),&nbsp;event:&nbsp;()=&gt;&nbsp;void)&nbsp;:&nbsp;void | 提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。<br/>event指定显示动效的闭包函数,在闭包函数中导致的状态变化系统会自动插入过渡动画。 |
## AnimationOptions对象说明
- 属性
| 属性名称 | 属性类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| duration | number | 1000 | 动画持续时间,单位为毫秒。 |
| tempo | number | 1.0 | 动画的播放速度,值越大动画播放越快,值越小播放越慢,为0时无动画效果。 |
| curve | Curve&nbsp;\|&nbsp;Curves | Linear | 动画曲线。 |
| delay | number | 0 | 单位为ms(毫秒),默认不延时播放。 |
| iterations | number | 1 | 默认播放一次,设置为-1时表示无限次播放。 |
| playMode | PlayMode | Normal | 设置动画播放模式,默认播放完成后重头开始播放。 |
### 属性
| 属性名称 | 属性类型 | 默认值 | 描述 |
| ---------- | ------------------------- | ------ | ----------------------------------- |
| duration | number | 1000 | 动画持续时间,单位为毫秒。 |
| tempo | number | 1.0 | 动画的播放速度,值越大动画播放越快,值越小播放越慢,为0时无动画效果。 |
| curve | Curve&nbsp;\|&nbsp;Curves | Linear | 动画曲线。 |
| delay | number | 0 | 单位为ms(毫秒),默认不延时播放。 |
| iterations | number | 1 | 默认播放一次,设置为-1时表示无限次播放。 |
| playMode | PlayMode | Normal | 设置动画播放模式,默认播放完成后重头开始播放。 |
- 接口
| 名称 | 功能描述 |
| -------- | -------- |
| onFinish()&nbsp;=&gt;&nbsp;void | 动效播放完成回调。 |
### 接口
| 名称 | 功能描述 |
| ------------------------------- | --------- |
| onFinish()&nbsp;=&gt;&nbsp;void | 动效播放完成回调。 |
## 示例
......
# 菜单
> **说明:**
> 从 API Version 8 开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 从 API Version 8 开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## ContextMenu.close
......@@ -9,31 +10,32 @@ close(): void
可以通过该方法在页面范围内关闭通过[bindContextMenu](./ts-universal-attributes-menu.md#属性)给组件绑定的菜单。
- 示例
```
@Entry
@Component
struct Index {
@Builder MenuBuilder(){
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('close')
.fontSize(30)
.fontWeight(FontWeight.Bold)
.onClick(() => {
ContextMenu.close();
})
}.height(400)
.backgroundColor(Color.Pink)
}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
Column(){
Text("Text")
}.bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
}
.width('100%')
.height('100%')
**示例:**
```
@Entry
@Component
struct Index {
@Builder MenuBuilder(){
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('close')
.fontSize(30)
.fontWeight(FontWeight.Bold)
.onClick(() => {
ContextMenu.close();
})
}.height(400)
.backgroundColor(Color.Pink)
}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
Column(){
Text("Text")
}.bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
}
.width('100%')
.height('100%')
}
```
}
```
\ No newline at end of file
# 位置设置
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -12,22 +13,21 @@
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| align | [Alignment](ts-appendix-enums.md#alignment枚举说明) | Center | 设置元素内容的对齐方式,只有当设置的width和height大小超过元素本身内容大小时生效。 |
| direction | Direction | Auto | 设置元素水平方向的布局,可选值参照Direction枚举说明。 |
| position | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | - | 使用绝对定位,设置元素锚点相对于父容器顶部起点偏移位置。在布局容器中,设置该属性不影响父容器布局,仅在绘制时进行位置调整。 |
| markAnchor | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} | 设置元素在位置定位时的锚点,以元素顶部起点作为基准点进行偏移。 |
| offset | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} | 相对布局完成位置坐标偏移量,设置该属性,不影响父容器布局,仅在绘制时进行位置调整。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------- | ---------------------------------------- | ------------------------------------ | ---------------------------------------- |
| align | [Alignment](ts-appendix-enums.md#alignment枚举说明) | Center | 设置元素内容的对齐方式,只有当设置的width和height大小超过元素本身内容大小时生效。 |
| direction | Direction | Auto | 设置元素水平方向的布局,可选值参照Direction枚举说明。 |
| position | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | - | 使用绝对定位,设置元素锚点相对于父容器顶部起点偏移位置。在布局容器中,设置该属性不影响父容器布局,仅在绘制时进行位置调整。 |
| markAnchor | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} | 设置元素在位置定位时的锚点,以元素顶部起点作为基准点进行偏移。 |
| offset | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} | 相对布局完成位置坐标偏移量,设置该属性,不影响父容器布局,仅在绘制时进行位置调整。 |
## Direction枚举说明
- Direction枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Ltr | 元素从左到右布局。 |
| Rtl | 元素从右到左布局。 |
| Auto | 使用系统默认布局方向。 |
| 名称 | 描述 |
| ---- | ----------- |
| Ltr | 元素从左到右布局。 |
| Rtl | 元素从右到左布局。 |
| Auto | 使用系统默认布局方向。 |
## 示例
......
# Menu控制
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -12,23 +13,24 @@
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| bindMenu | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 给组件绑定菜单,点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
| bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](../../ui/ts-types.md)<br>responseType:&nbsp;ResponseType | - | 给组件绑定菜单,触发方式为长按或者右键点击,弹出菜单项需要自定义。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------------------------- | ---------------------------------------- | ---- | ---------------------------------- |
| bindMenu | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 给组件绑定菜单,点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
| bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](../../ui/ts-types.md)<br>responseType:&nbsp;ResponseType | - | 给组件绑定菜单,触发方式为长按或者右键点击,弹出菜单项需要自定义。 |
## MenuItem
- MenuItem
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| value | string | 菜单项文本。 |
| action | ()&nbsp;=&gt;&nbsp;void | 点击菜单项的事件回调。 |
| 名称 | 类型 | 描述 |
| ------ | ----------------------- | ----------- |
| value | string | 菜单项文本。 |
| action | ()&nbsp;=&gt;&nbsp;void | 点击菜单项的事件回调。 |
- ResponseType<sup>8+</sup>
| 参数值 | 描述 |
| -------- | -------- |
| LongPress | 通过长按触发菜单弹出。 |
| RightClick | 通过鼠标右键触发菜单弹出。 |
## ResponseType<sup>8+</sup>
| 参数值 | 描述 |
| ---------- | ------------- |
| LongPress | 通过长按触发菜单弹出。 |
| RightClick | 通过鼠标右键触发菜单弹出。 |
## 示例
......
# 透明度设置
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
设置组件的透明度。
> **说明:**
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -15,9 +15,9 @@
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| opacity | number | 1 | 元素的不透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ------- | ------ | ---- | ---------------------------------- |
| opacity | number | 1 | 元素的不透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。 |
## 示例
......
# 浮层
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -12,8 +13,8 @@
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| 名称 | 参数类型 | 默认值 | 描述 |
| ------- | ---------------------------------------- | ---------------------------------------- | ------------------------ |
| overlay | title:&nbsp;string,<br/>options:&nbsp;{<br/>align?:&nbsp;[Alignment](ts-appendix-enums.md#alignment枚举说明),<br/>offset?:&nbsp;{x:&nbsp;number,&nbsp;y:&nbsp;number}<br/>} | {<br/>align:&nbsp;Alignment.Center,<br/>offset:&nbsp;{0,&nbsp;0}<br/>} | 在当前组件上,增加遮罩文本,布局与当前组件相同。 |
......
# 多态样式
> **说明:**
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
设置组件不同状态下的样式。
......@@ -14,17 +14,17 @@
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| stateStyles | StateStyles | - | 设置组件不同状态的样式。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------- | ----------- | ---- | ------------ |
| stateStyles | StateStyles | - | 设置组件不同状态的样式。 |
- StateStyles接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| normal | ()=&gt;void | 否 | - | 组件无状态时的样式。 |
| pressed | ()=&gt;void | 否 | - | 组件按下状态的样式。 |
| disabled | ()=&gt;void | 否 | - | 组件禁用状态的样式。 |
## StateStyles接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| -------- | ----------- | ---- | ---- | ---------- |
| normal | ()=&gt;void | 否 | - | 组件无状态时的样式。 |
| pressed | ()=&gt;void | 否 | - | 组件按下状态的样式。 |
| disabled | ()=&gt;void | 否 | - | 组件禁用状态的样式。 |
## 示例
......
# Popup控制
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -12,43 +13,44 @@
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| bindPopup | show:&nbsp;boolean,<br/>popup:&nbsp;PopupOptions\|&nbsp;CustomPopupOptions | - | 给组件绑定Popup,点击弹出弹窗。<br/>show:&nbsp;创建页面弹窗提示是否默认显示,默认值为false。<br/>popup:&nbsp;配置当前弹窗提示的参数。 |
- PopupOptions类型接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| message | string | 是 | - | 弹窗信息内容。 |
| placementOnTop | boolean | 否 | false | 是否在组件上方显示,默认值为false。 |
| primaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 第一个按钮。<br/>value:&nbsp;弹窗里主按钮的文本。<br/>action:&nbsp;点击主按钮的回调函数。 |
| secondaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 第二个按钮。<br/>value:&nbsp;弹窗里辅助按钮的文本。<br/>action:&nbsp;点击辅助按钮的回调函数。 |
| onStateChange | (isVisible:&nbsp;boolean)&nbsp;=&gt;&nbsp;void | 否 | - | 弹窗状态变化事件回调,参数isVisible为弹窗当前的显示状态。 |
- CustomPopupOptions<sup>8+</sup>类型接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| builder | ()&nbsp;=&gt;&nbsp;any | 是 | - | 提示气泡内容的构造器。 |
| placement | Placement | 否 | Placement.Bottom | 气泡组件优先显示的位置,当前位置显示不下时,会自动调整位置。 |
| maskColor | [Color](../../ui/ts-types.md#颜色类型) | 否 | - | 提示气泡遮障层的颜色。 |
| popupColor | [Color](../../ui/ts-types.md#颜色类型) | 否 | - | 提示气泡的颜色。 |
| enableArrow | boolean | 否 | true | 是否显示箭头,只有上、下方向的气泡会显示箭头。 |
| autoCancel | boolean | 否 | true | 页面有操作时,是否自动关闭气泡 |
| onStateChange | (isVisible:&nbsp;boolean)&nbsp;=&gt;&nbsp;void | 否 | - | 弹窗状态变化事件回调,参数为弹窗当前的显示状态。 |
- Placement<sup>8+</sup>枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Left | 气泡提示位于组件左侧。 |
| Right | 气泡提示位于组件右侧。 |
| Top | 气泡提示位于组件上侧。 |
| Bottom | 气泡提示位于组件下侧。 |
| TopLeft | 气泡提示位于组件左上角。 |
| TopRight | 气泡提示位于组件右上角。 |
| BottomLeft | 气泡提示位于组件左下角。 |
| BottomRight | 气泡提示位于组件右下角。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| --------- | ---------------------------------------- | ---- | ---------------------------------------- |
| bindPopup | show:&nbsp;boolean,<br/>popup:&nbsp;PopupOptions\|&nbsp;CustomPopupOptions | - | 给组件绑定Popup,点击弹出弹窗。<br/>show:&nbsp;创建页面弹窗提示是否默认显示,默认值为false。<br/>popup:&nbsp;配置当前弹窗提示的参数。 |
## PopupOptions类型接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| --------------- | ---------------------------------------- | ---- | ----- | ---------------------------------------- |
| message | string | 是 | - | 弹窗信息内容。 |
| placementOnTop | boolean | 否 | false | 是否在组件上方显示,默认值为false。 |
| primaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 第一个按钮。<br/>value:&nbsp;弹窗里主按钮的文本。<br/>action:&nbsp;点击主按钮的回调函数。 |
| secondaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 第二个按钮。<br/>value:&nbsp;弹窗里辅助按钮的文本。<br/>action:&nbsp;点击辅助按钮的回调函数。 |
| onStateChange | (isVisible:&nbsp;boolean)&nbsp;=&gt;&nbsp;void | 否 | - | 弹窗状态变化事件回调,参数isVisible为弹窗当前的显示状态。 |
## CustomPopupOptions<sup>8+</sup>类型接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| ------------- | ---------------------------------------- | ---- | ---------------- | ------------------------------ |
| builder | ()&nbsp;=&gt;&nbsp;any | 是 | - | 提示气泡内容的构造器。 |
| placement | Placement | 否 | Placement.Bottom | 气泡组件优先显示的位置,当前位置显示不下时,会自动调整位置。 |
| maskColor | [Color](../../ui/ts-types.md#颜色类型) | 否 | - | 提示气泡遮障层的颜色。 |
| popupColor | [Color](../../ui/ts-types.md#颜色类型) | 否 | - | 提示气泡的颜色。 |
| enableArrow | boolean | 否 | true | 是否显示箭头,只有上、下方向的气泡会显示箭头。 |
| autoCancel | boolean | 否 | true | 页面有操作时,是否自动关闭气泡 |
| onStateChange | (isVisible:&nbsp;boolean)&nbsp;=&gt;&nbsp;void | 否 | - | 弹窗状态变化事件回调,参数为弹窗当前的显示状态。 |
## Placement<sup>8+</sup>枚举说明
| 名称 | 描述 |
| ----------- | ------------ |
| Left | 气泡提示位于组件左侧。 |
| Right | 气泡提示位于组件右侧。 |
| Top | 气泡提示位于组件上侧。 |
| Bottom | 气泡提示位于组件下侧。 |
| TopLeft | 气泡提示位于组件左上角。 |
| TopRight | 气泡提示位于组件右上角。 |
| BottomLeft | 气泡提示位于组件左下角。 |
| BottomRight | 气泡提示位于组件右下角。 |
## 示例
......
# 尺寸设置
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -12,15 +13,15 @@
## 属性
| 名称 | 参数说明 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| width | Length | - | 设置组件自身的宽度,缺省时使用元素自身内容需要的宽度。 |
| height | Length | - | 设置组件自身的高度,缺省时使用元素自身内容需要的高度。 |
| size | {<br/>width?:&nbsp;Length,<br/>height?:&nbsp;Length<br/>} | - | 设置高宽尺寸。 |
| padding | {<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>left?:&nbsp;Length<br/>}&nbsp;\|&nbsp;Length | 0 | 设置内边距属性。<br/>参数为Length类型时,四个方向内边距同时生效。 |
| margin | {<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>left?:&nbsp;Length<br/>}<br/>\|&nbsp;Length | 0 | 设置外边距属性。<br/>参数为Length类型时,四个方向外边距同时生效。 |
| constraintSize | {<br/>minWidth?:&nbsp;Length,<br/>maxWidth?:&nbsp;Length,<br/>minHeight?:&nbsp;Length,<br/>maxHeight?:&nbsp;Length<br/>} | {<br/>minWidth:&nbsp;0,<br/>maxWidth:&nbsp;Infinity,<br/>minHeight:&nbsp;0,<br/>maxHeight:&nbsp;Infinity<br/>} | 设置约束尺寸,组件布局时,进行尺寸范围限制。 |
| layoutWeight | number | 0 | 容器尺寸确定时,元素与兄弟节点主轴布局尺寸按照权重进行分配,忽略本身尺寸设置。<br/>>&nbsp;&nbsp;**说明:**<br/>>&nbsp;仅在Row/Column/Flex布局中生效。 |
| 名称 | 参数说明 | 默认值 | 描述 |
| -------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| width | Length | - | 设置组件自身的宽度,缺省时使用元素自身内容需要的宽度。 |
| height | Length | - | 设置组件自身的高度,缺省时使用元素自身内容需要的高度。 |
| size | {<br/>width?:&nbsp;Length,<br/>height?:&nbsp;Length<br/>} | - | 设置高宽尺寸。 |
| padding | {<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>left?:&nbsp;Length<br/>}&nbsp;\|&nbsp;Length | 0 | 设置内边距属性。<br/>参数为Length类型时,四个方向内边距同时生效。 |
| margin | {<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>left?:&nbsp;Length<br/>}<br/>\|&nbsp;Length | 0 | 设置外边距属性。<br/>参数为Length类型时,四个方向外边距同时生效。 |
| constraintSize | {<br/>minWidth?:&nbsp;Length,<br/>maxWidth?:&nbsp;Length,<br/>minHeight?:&nbsp;Length,<br/>maxHeight?:&nbsp;Length<br/>} | {<br/>minWidth:&nbsp;0,<br/>maxWidth:&nbsp;Infinity,<br/>minHeight:&nbsp;0,<br/>maxHeight:&nbsp;Infinity<br/>} | 设置约束尺寸,组件布局时,进行尺寸范围限制。 |
| layoutWeight | number | 0 | 容器尺寸确定时,元素与兄弟节点主轴布局尺寸按照权重进行分配,忽略本身尺寸设置。<br/>>&nbsp;&nbsp;**说明:**<br/>>&nbsp;仅在Row/Column/Flex布局中生效。 |
## 示例
......
# 文本样式设置
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
针对包含文本元素的组件,设置文本样式。
......@@ -15,32 +16,31 @@
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| fontColor | Color | - | 设置文本颜色。 |
| fontSize | Length | - | 设置文本尺寸,Length为number类型时,使用fp单位。 |
| fontStyle | FontStyle | FontStyle.Normal | 设置文本的字体样式。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------- | ------------------------ | --------------------------- | ---------------------------------------- |
| fontColor | Color | - | 设置文本颜色。 |
| fontSize | Length | - | 设置文本尺寸,Length为number类型时,使用fp单位。 |
| fontStyle | FontStyle | FontStyle.Normal | 设置文本的字体样式。 |
| fontWeight | number&nbsp;\|FontWeight | FontWeight.FontWeightNormal | 设置文本的字体粗细,number类型取值[100,&nbsp;900],取值间隔为100,默认为400,取值越大,字体越粗。<br/>提供常用枚举值,参考:FontWeight枚举说明。 |
| fontFamily | string | - | 设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效。例如:'Arial,&nbsp;sans-serif'。 |
| fontFamily | string | - | 设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效。例如:'Arial,&nbsp;sans-serif'。 |
## FontStyle枚举说明
- FontStyle枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Normal | 标准的字体样式。 |
| Italic | 斜体的字体样式。 |
| 名称 | 描述 |
| ------ | -------- |
| Normal | 标准的字体样式。 |
| Italic | 斜体的字体样式。 |
## FontWeight枚举说明
- FontWeight枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Lighter | 字体较细。 |
| Normal | 字体粗细正常。 |
| Regular | 字体粗细正常。 |
| Medium | 字体粗细适中。 |
| Bold | 字体较粗。 |
| Bolder | 字体非常粗。 |
| 名称 | 描述 |
| ------- | ------- |
| Lighter | 字体较细。 |
| Normal | 字体粗细正常。 |
| Regular | 字体粗细正常。 |
| Medium | 字体粗细适中。 |
| Bold | 字体较粗。 |
| Bolder | 字体非常粗。 |
## 示例
......
# 触摸热区设置
> **说明:**
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
适用于支持通用点击事件、通用触摸事件、通用手势处理的组件。
......@@ -15,21 +16,22 @@
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| 名称 | 参数类型 | 默认值 | 描述 |
| -------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| responseRegion | Array&lt;Rectangle&gt;&nbsp;\|&nbsp;Rectangle | {<br/>x:0,<br/>y:0,<br/>width:'100%',<br/>height:'100%'<br/>} | 设置一个或多个触摸热区,包括位置和大小。<br/>>&nbsp;&nbsp;**说明:**<br/>>&nbsp;-百分比是相对于组件本身来度量的。<br/>>&nbsp;-x和y可以设置正负值百分比。当x设置为'100%'时表示热区往右偏移组件本身宽度大小,当x设置为'-100%'时表示热区往左偏移组件本身宽度大小。当y设置为'100%'时表示热区往下偏移组件本身高度大小,当y设置为'-100%'时表示热区往上偏移组件本身高度大小。<br/>>&nbsp;-width和height只能设置正值百分比。width:'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp,那么'100%'表示热区宽度也为100vp。height:'100%'表示热区高度设置为该组件本身的高度。 |
### Rectangle对象说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| x | Length | 否 | 0vp | 触摸点相对于组件本身左边沿的X坐标。 |
| y | Length | 否 | 0vp | 触摸点相对于组件本身左边沿的Y坐标。 |
| width | Length | 否 | 100% | 触摸热区范围的宽度。 |
| height | Length | 否 | 100% | 触摸热区范围的高度。 |
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------------ |
| x | Length | 否 | 0vp | 触摸点相对于组件本身左边沿的X坐标。 |
| y | Length | 否 | 0vp | 触摸点相对于组件本身左边沿的Y坐标。 |
| width | Length | 否 | 100% | 触摸热区范围的宽度。 |
| height | Length | 否 | 100% | 触摸热区范围的高度。 |
> **说明:**
> 当x和y都设置为正值时,表示组件的触摸热区的范围整体往组件本身右下角偏移,偏移的大小可通过数值来设置。
>
> 当x和y都设置为正值时,表示组件的触摸热区的范围整体往组件本身右下角偏移,偏移的大小可通过数值来设置。
## 示例
......
# 图形变换
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -12,12 +13,12 @@
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| rotate | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>angle?:&nbsp;Angle,<br/>centerX?:&nbsp;Length,<br/>centerY?:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0,<br/>z:&nbsp;0,<br/>angle:&nbsp;0,<br/>centerX:&nbsp;'50%',<br/>centerY:&nbsp;'50%'<br/>} | (x,&nbsp;y,&nbsp;z)指定一个矢量,表示旋转轴,正角度为顺时针转动,负角度为逆时针转动,默认值为0,同时可以通过centerX和centerY设置旋转的中心点。 |
| translate | {<br/>x?:&nbsp;Length,<br/>y?:&nbsp;Length,<br/>z?&nbsp;:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0,<br/>z:&nbsp;0<br/>} | 可以分别设置X轴、Y轴、Z轴的平移距离,距离的正负控制平移的方向,默认值为0。 |
| scale | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>centerX?:&nbsp;Length,<br/>centerY?:&nbsp;Length<br/>} | {<br/>x:&nbsp;1,<br/>y:&nbsp;1,<br/>z:&nbsp;1,<br/>centerX:'50%',<br/>centerY:'50%'<br/>} | 可以分别设置X轴、Y轴、Z轴的缩放比例,默认值为1,同时可以通过centerX和centerY设置缩放的中心点。 |
| transform | matrix:&nbsp;Matrix4 | - | 设置当前组件的变换矩阵。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| --------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| rotate | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>angle?:&nbsp;Angle,<br/>centerX?:&nbsp;Length,<br/>centerY?:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0,<br/>z:&nbsp;0,<br/>angle:&nbsp;0,<br/>centerX:&nbsp;'50%',<br/>centerY:&nbsp;'50%'<br/>} | (x,&nbsp;y,&nbsp;z)指定一个矢量,表示旋转轴,正角度为顺时针转动,负角度为逆时针转动,默认值为0,同时可以通过centerX和centerY设置旋转的中心点。 |
| translate | {<br/>x?:&nbsp;Length,<br/>y?:&nbsp;Length,<br/>z?&nbsp;:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0,<br/>z:&nbsp;0<br/>} | 可以分别设置X轴、Y轴、Z轴的平移距离,距离的正负控制平移的方向,默认值为0。 |
| scale | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>centerX?:&nbsp;Length,<br/>centerY?:&nbsp;Length<br/>} | {<br/>x:&nbsp;1,<br/>y:&nbsp;1,<br/>z:&nbsp;1,<br/>centerX:'50%',<br/>centerY:'50%'<br/>} | 可以分别设置X轴、Y轴、Z轴的缩放比例,默认值为1,同时可以通过centerX和centerY设置缩放的中心点。 |
| transform | matrix:&nbsp;Matrix4 | - | 设置当前组件的变换矩阵。 |
## 示例
......
# 显隐控制
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -12,18 +13,17 @@
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------- | ---------- | ------------------ | ------------ |
| visibility | Visibility | Visibility.Visible | 控制当前组件显示或隐藏。 |
## Visibility枚举说明
- Visibility枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Hidden | 隐藏,但参与布局进行占位。 |
| Visible | 显示。 |
| None | 隐藏,但不参与布局,不进行占位。 |
| 名称 | 描述 |
| ------- | ---------------- |
| Hidden | 隐藏,但参与布局进行占位。 |
| Visible | 显示。 |
| None | 隐藏,但不参与布局,不进行占位。 |
## 示例
......
# Z序控制
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -12,9 +13,9 @@
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| zIndex | number | 0 | 同一容器中兄弟组件显示层级关系,z值越大,显示层级越高。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ------ | ------ | ---- | ---------------------------- |
| zIndex | number | 0 | 同一容器中兄弟组件显示层级关系,z值越大,显示层级越高。 |
## 示例
......
# 组件区域变化事件
> **说明:**
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -11,9 +12,9 @@
## 事件
| 名称 | 支持冒泡 | 功能描述 |
| -------- | -------- | -------- |
| onAreaChange(event:&nbsp;(oldValue:&nbsp;Area,&nbsp;newValue:&nbsp;Area)&nbsp;=&gt;&nbsp;void) | 否 | 组件区域变化时触发该回调,Area类型说明见[Area对象](ts-universal-events-click.md)介绍。 |
| 名称 | 支持冒泡 | 功能描述 |
| ---------------------------------------- | ---- | ---------------------------------------- |
| onAreaChange(event:&nbsp;(oldValue:&nbsp;Area,&nbsp;newValue:&nbsp;Area)&nbsp;=&gt;&nbsp;void) | 否 | 组件区域变化时触发该回调,Area类型说明见[Area对象](ts-universal-events-click.md)介绍。 |
## 示例
......
# 点击事件
> **说明:**
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
......@@ -26,8 +27,8 @@
| timestamp | number | 事件时间戳。 |
## EventTarget<sup>8+</sup>对象说明
| 名称 | 参数类型 | 描述 |
| ---- | ----------------- | ---------- |
| 名称 | 参数类型 | 描述 |
| ---- | ------------------ | ---------- |
| area | [Area](#area8对象说明) | 目标元素的区域信息。 |
## Area<sup>8+</sup>对象说明
......
# 拖拽事件
> **说明:**
>
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 事件
......
......@@ -3,6 +3,7 @@
按键事件指组件与键盘、遥控器等按键设备交互时触发的事件。
> **说明:**
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
......@@ -20,22 +21,23 @@
## KeyEvent对象说明
- 属性
| 属性名称 | 类型 | 描述 |
| ------------------------------------- | --------------------------- | -------------------------- |
| type | [KeyType](#keytype枚举说明) | 按键的类型。 |
| [keyCode](../apis/js-apis-keycode.md) | number | 按键的键码。 |
| keyText | string | 按键的键值。 |
| keySource | [KeySource](#keysource枚举说明) | 触发当前按键的输入设备类型。 |
| deviceId | number | 触发当前按键的输入设备ID。 |
| metaKey | number | 按键发生时元键的状态,1表示按压态,0表示未按压态。 |
| timestamp | number | 按键发生时的时间戳。 |
- 接口
| 接口名称 | 功能描述 |
| ---------------------------- | --------- |
| stopPropagation():&nbsp;void | 阻塞事件冒泡传递。 |
### 属性
| 属性名称 | 类型 | 描述 |
| ------------------------------------- | --------------------------- | -------------------------- |
| type | [KeyType](#keytype枚举说明) | 按键的类型。 |
| [keyCode](../apis/js-apis-keycode.md) | number | 按键的键码。 |
| keyText | string | 按键的键值。 |
| keySource | [KeySource](#keysource枚举说明) | 触发当前按键的输入设备类型。 |
| deviceId | number | 触发当前按键的输入设备ID。 |
| metaKey | number | 按键发生时元键的状态,1表示按压态,0表示未按压态。 |
| timestamp | number | 按键发生时的时间戳。 |
### 接口
| 接口名称 | 功能描述 |
| ---------------------------- | --------- |
| stopPropagation():&nbsp;void | 阻塞事件冒泡传递。 |
## KeyType枚举说明
| 名称 | 描述 |
......
# 挂载卸载事件
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -11,10 +12,10 @@
## 事件
| 名称 | 支持冒泡 | 功能描述 |
| -------- | -------- | -------- |
| onAppear(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 组件挂载显示时触发此回调。 |
| onDisappear(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 组件卸载消失时触发此回调。 |
| 名称 | 支持冒泡 | 功能描述 |
| ---------------------------------------- | ---- | ------------- |
| onAppear(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 组件挂载显示时触发此回调。 |
| onDisappear(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 组件卸载消失时触发此回调。 |
## 示例
......
# 触摸事件
> **说明:**
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
......@@ -18,21 +19,21 @@
## TouchEvent对象说明
- 属性
| 属性名称 | 类型 | 描述 |
| ------------------- | ---------------------------------------- | ------------ |
| type | TouchType | 触摸事件的类型。 |
| touches | Array&lt;[TouchObject](#touchobject对象说明)&gt; | 全部手指信息。 |
| changedTouches | Array&lt;[TouchObject](#touchobject对象说明)&gt; | 当前发生变化的手指信息。 |
| timestamp | number | 事件时间戳。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8对象说明) | 被触摸元素对象。 |
### 属性
| 属性名称 | 类型 | 描述 |
| ------------------- | ---------------------------------------- | ------------ |
| type | TouchType | 触摸事件的类型。 |
| touches | Array&lt;[TouchObject](#touchobject对象说明)&gt; | 全部手指信息。 |
| changedTouches | Array&lt;[TouchObject](#touchobject对象说明)&gt; | 当前发生变化的手指信息。 |
| timestamp | number | 事件时间戳。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8对象说明) | 被触摸元素对象。 |
- 接口
| 接口名称 | 功能描述 |
| ---------------------- | ------- |
| stopPropagation():void | 阻塞事件冒泡。 |
### 接口
| 接口名称 | 功能描述 |
| ---------------------- | ------- |
| stopPropagation():void | 阻塞事件冒泡。 |
## TouchObject对象说明
| 属性名称 | 类型 | 描述 |
......
# 焦点事件
> **说明:**
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -11,13 +12,13 @@
## 事件
| **名称** | **支持冒泡** | **功能描述** |
| -------- | -------- | -------- |
| onFocus(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件获取焦点时触发的回调。 |
| onBlur(callback:()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件失去焦点时触发的回调。 |
| **名称** | **支持冒泡** | **功能描述** |
| ---------------------------------------- | -------- | --------------- |
| onFocus(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件获取焦点时触发的回调。 |
| onBlur(callback:()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件失去焦点时触发的回调。 |
> **说明:**
> 支持焦点事件的组件:Button、Text、Image、List、Grid。
> 支持焦点事件的组件:Button、Text、Image、List、Grid。
## 示例
......
# 鼠标事件
> **说明:**
>
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册