diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982725.jpg b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982725.jpg index e3d3e1023746c03c9ad426328de0114321ac3f66..51c86ceb26151f6aeb719ad5db5ee5c88218361b 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982725.jpg and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982725.jpg differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md index ddb7da4114ff9272ce856eca5b22fd0235114084..d3c42736f486c204a1f61aa665ef111c25e08fcb 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md @@ -27,15 +27,15 @@ Line(options?: {width: Length, height: Length}) | options | Object | 否 | - | 见options参数说明。 | - options参数说明 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | - | width | Length | 是 | - | 宽度。 | - | height | Length | 是 | - | 高度。 | + | width | Length | 是 | - | 宽度。 | + | height | Length | 是 | - | 高度。 | ## 属性 -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | | width | [Length](../../ui/ts-types.md#length) | 0 | 否 | 直线所在矩形的宽度。 | | height | [Length](../../ui/ts-types.md#length) | 0 | 否 | 直线所在矩形的高度。 | @@ -52,7 +52,8 @@ Line(options?: {width: Length, height: Length}) struct LineExample { build() { Column() { - Line({ width: 50, height: 100 }).startPoint([0, 0]).endPoint([50, 100]) + Line().startPoint([0, 0]).endPoint([50, 100]) + Line({ width: 50, height: 50 }).startPoint([0, 0]).endPoint([100, 100]) Line().width(200).height(200).startPoint([50, 50]).endPoint([150, 150]) }.margin({ top: 5 }) } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md index c9f180b3fbfe7d8d9b8af1156a0fb76ef1297bba..f1eea63ecb0523e02667525ff29a4fc0a6838d7e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md @@ -1,61 +1,51 @@ # 页面间转场 -页面转场通过在全局pageTransition方法内配置页面入场组件和页面退场组件来自定义页面转场动效。 +在全局pageTransition方法内配置页面入场和页面退场时的自定义转场动效。 > **说明：** +> > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -| 名称 | 参数 | 参数描述 | -| ------------------- | ------ | ------------------------------- | -| PageTransitionEnter | Object | 页面入场组件，用于自定义当前页面的入场效果，详见动效参数说明。 | -| PageTransitionExit | Object | 页面退场组件，用于自定义当前页面的退场效果，详见动效参数说明。 | +| 名称 | 参数 | 参数描述 | +| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| PageTransitionEnter | {
type: RouteType,
duration: number,
curve: Curve \| Curves,
delay: number
} | 设置当前页面的自定义入场动效。
- type：不配置时表明pop为push时效果的逆播。
- duration：动画的时长，单位为毫秒。
- curve：动画曲线，有效值参见[Curve](ts-animatorproperty.md) 。
 默认值：Curve.Linear
- delay：动画延迟时长，单位为毫秒，默认不延迟播放。 | +| PageTransitionExit | {
type: RouteType,
duration: number,
curve: Curve \| Curves,
delay: number
} | 设置当前页面的自定义退场动效。
- type：不配置时表明pop为push时效果的逆播
- duration：动画的时长，单位为毫秒。
- curve：动画曲线，有效值参见[Curve](ts-animatorproperty.md) 。
 默认值：Curve.Linear
- delay：动画延迟时长，单位为毫秒，默认不延迟播放。 | +## RouteType枚举说明 -- 动效参数说明 - | 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | - | -------- | ------------------------- | ------ | ---- | ---------------------------------------- | - | type | RouteType | - | 否 | 不配置时表明pop为push时效果的逆播。 | - | duration | number | 1000 | 否 | 动画时长，单位为毫秒。 | - | curve | Curve \| Curves | Linear | 否 | 动画曲线，有效值参见[Curve](ts-animatorproperty.md) 说明。 | - | delay | number | 0 | 否 | 动画延迟时长，单位为毫秒，默认不延时播放。 | - - -- RouteType枚举说明 - | 名称 | 描述 | - | ---- | ---------------- | - | Pop | 重定向指定页面。PageA跳转到PageB时，PageA为Exit+Push，PageB为Enter+Push。 | - | Push | 跳转到下一页面。PageB返回至PageA时，PageA为Enter+Pop，PageB为Exit+Pop。 | +| 名称 | 描述 | +| ---- | ------------------------------------------------------------ | +| Pop | 重定向指定页面。PageA跳转到PageB时，PageA为Exit+Push，PageB为Enter+Push。 | +| Push | 跳转到下一页面。PageB返回至PageA时，PageA为Enter+Pop，PageB为Exit+Pop。 | +| None | 页面未重定向。 | ## 属性 -PageTransitionEnter和PageTransitionExit组件支持的属性： +| 参数名称 | 参数类型 | 必填 | 参数描述 | +| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | +| slide | SlideEffect | 否 | 设置页面转场时的滑入滑出效果。
默认值：SlideEffect.Right | +| translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | 否 | 设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。
- x：横向的平移距离。
- y：纵向的平移距离。
- z：竖向的平移距离。 | +| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | 否 | 设置页面转场时的缩放效果，为入场时起点和退场时终点的值。
- x：横向放大倍数（或缩小比例）。
- y：纵向放大倍数（或缩小比例）。
- z：竖向放大倍数（或缩小比例）。
- centerX、centerY缩放中心点。
- 中心点为0时，默认的是组件的左上角。
| +| opacity | number | 否 | 设置入场的起点透明度值或者退场的终点透明度值。
默认值：1 | -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | -| --------- | ---------------------------------------- | ----------------- | ---- | ---------------------------------------- | -| slide | SlideEffect | SlideEffect.Right | 否 | 设置转场的滑入效果，有效值参见SlideEffect枚举说明。 | -| translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | - | 否 | 设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。 | -| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | - | 否 | 设置页面转场时的缩放效果，为入场时起点和退场时终点的值。 | -| opacity | number | 1 | 否 | 设置入场的起点透明度值或者退场的终点透明度值。 | +## SlideEffect枚举说明 -- SlideEffect枚举说明 - | 名称 | 描述 | - | ------ | ------------------------- | - | Left | 设置到入场时表示从左边滑入，出场时表示滑出到左边。 | - | Right | 设置到入场时表示从右边滑入，出场时表示滑出到右边。 | - | Top | 设置到入场时表示从上边滑入，出场时表示滑出到上边。 | - | Bottom | 设置到入场时表示从下边滑入，出场时表示滑出到下边。 | +| 名称 | 描述 | +| ------ | ------------------------- | +| Left | 设置到入场时表示从左边滑入，出场时表示滑出到左边。 | +| Right | 设置到入场时表示从右边滑入，出场时表示滑出到右边。 | +| Top | 设置到入场时表示从上边滑入，出场时表示滑出到上边。 | +| Bottom | 设置到入场时表示从下边滑入，出场时表示滑出到下边。 | ## 事件 -PageTransitionEnter和PageTransitionExit组件支持的事件： - -| 事件 | 功能描述 | -| ---------------------------------------- | ----------------------------------- | -| onEnter(type: RouteType, progress: number) => void | 回调入参为当前入场动画的归一化进度[0 - 1]。 | -| onExit(type: RouteType, progress: number) => void | 回调入参为当前退场动画的归一化进度[0 - 1]。 | +| 事件 | 功能描述 | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| onEnter(event: (type: RouteType, progress: number) => void) | 回调入参为当前入场动画的归一化进度[0 - 1]。
- type：跳转方法。
- progress：当前进度。 | +| onExit(event: (type: RouteType, progress: number) => void) | 回调入参为当前退场动画的归一化进度[0 - 1]。
- type：跳转方法。
- progress：当前进度。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md index 3ed7aabe423694da748b107fad33179f3e22c857..73e24d762e8c7e72d8af223e99bca81afc0bede8 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md @@ -1,26 +1,28 @@ # 组件内转场 -组件转场主要通过transition属性进行配置转场参数，在组件插入和删除时进行过渡动效，主要用于容器组件子组件插入删除时提升用户体验（需要配合animateTo才能生效，动效时长、曲线、延时跟随animateTo中的配置）。 +组件内转场主要通过transition属性配置转场参数，在组件插入和删除时显示过渡动效，主要用于容器组件中的子组件插入和删除时，提升用户体验（需要配合[animateTo](ts-explicit-animation.md)才能生效，动效时长、曲线、延时跟随animateTo中的配置）。 > **说明：** -> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 属性 -| 名称 | 参数类型 | 默认值 | 参数描述 | +| 名称 | 参数类型 | 参数描述 | +| -------- | -------- | -------- | +| transition | TransitionOptions | 所有参数均为可选参数，详细描述见TransitionOptions参数说明。 | + +## TransitionOptions参数说明 + +| 参数名称 | 参数类型 | 必填 | 参数描述 | | -------- | -------- | -------- | -------- | -| transition | Object | - | 所有参数均为可选参数，详细描述见transition入参说明。 | - -- transition入参说明 - | 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | type | [TransitionType](ts-appendix-enums.md#transitiontype) | TransitionType.All | 否 | 默认包括组件新增和删除。
>  **说明：**
> 不指定Type时说明插入删除使用同一种效果。 | - | opacity | number | 1 | 否 | 设置组件转场时的透明度效果，为插入时起点和删除时终点的值。 | - | translate | {
x? : number,
y? : number,
z? : number
} | - | 否 | 设置组件转场时的平移效果，为插入时起点和删除时终点的值。
-x：横向的平移距离。
-y：纵向的平移距离。
-z：竖向的平移距离。 | - | scale | {
x? : number,
y? : number,
z? : number,
centerX? : number,
centerY? : number
} | - | 否 | 设置组件转场时的缩放效果，为插入时起点和删除时终点的值。
-x：横向放大倍数（或缩小比例）。
-y：纵向放大倍数（或缩小比例）。
-z：竖向放大倍数（或缩小比例）。
- centerX、centerY缩放中心点。
- 中心点为0时，默认的是组件的左上角。
| - | rotate | {
x?: number,
y?: number,
z?: number,
angle?: Angle,
centerX?: Length,
centerY?: Length
} | - | 否 | 设置组件转场时的旋转效果，为插入时起点和删除时终点的值。
-x：横向的旋转向量。
-y：纵向的旋转向量。
-z：竖向的旋转向量。
- centerX,centerY指旋转中心点。
- 中心点为（0，0）时，默认的是组件的左上角。 | +| type | [TransitionType](ts-appendix-enums.md#transitiontype) | 否 | 默认包括组件新增和删除。
默认值：TransitionType.All
**说明：**
不指定Type时说明插入删除使用同一种效果。 | +| opacity | number | 否 | 设置组件转场时的透明度效果，为插入时起点和删除时终点的值。
默认值：1 | +| translate | {
x? : number,
y? : number,
z? : number
} | 否 | 设置组件转场时的平移效果，为插入时起点和删除时终点的值。
-x：横向的平移距离。
-y：纵向的平移距离。
-z：竖向的平移距离。 | +| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number,
centerY? : number
} | 否 | 设置组件转场时的缩放效果，为插入时起点和删除时终点的值。
-x：横向放大倍数（或缩小比例）。
-y：纵向放大倍数（或缩小比例）。
-z：竖向放大倍数（或缩小比例）。
- centerX、centerY缩放中心点。
- 中心点为0时，默认的是组件的左上角。
| +| rotate | {
x?: number,
y?: number,
z?: number,
angle?: Angle,
centerX?: Length,
centerY?: Length
} | 否 | 设置组件转场时的旋转效果，为插入时起点和删除时终点的值。
-x：横向的旋转向量。
-y：纵向的旋转向量。
-z：竖向的旋转向量。
- centerX,centerY指旋转中心点。
- 中心点为（0，0）时，默认的是组件的左上角。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md index 98c94ba07fe153432bcbba1be13c0c41d0ca1265..62c664240b27b57982e3db85cfed4939589fb885 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md @@ -1,29 +1,23 @@ # 共享元素转场 -共享元素转场支持页面间的转场，如当前页面的图片转场至下一页面中。 +设置页面间转场时共享元素的转场动效。 > **说明：** +> > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 属性 -| 名称 | 参数 | 默认值 | 参数描述 | -| ---------------- | ---------------------------------------- | ---- | ---------------------------------------- | -| sharedTransition | id: string,
options?: Object | - | 两个页面的组件配置为同一个id，则转场过程中会进行共享元素转场，配置为空字符串时不会有共享元素转场效果。 | - -- options参数说明 - | 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | - | -------- | ------------------------- | ------ | ---- | --------------------- | - | duration | number | 1000 | 否 | 单位为毫秒，默认动画时长为1000毫秒。 | - | curve | Curve \| Curves | Linear | 否 | 默认曲线为线性，有效值参见Curve说明。 | - | delay | number | 0 | 否 | 单位为毫秒，默认不延时播放。 | +| 名称 | 参数 | 参数描述 | +| ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| sharedTransition | id: string,
{
duration?: number,
curve?: Curve \| string,
delay?: number,
motionPath?:
{
path: string,
form?: number,
to?: number,
rotatable?: boolean
},
zIndex?: number,
type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)
} | 两个页面中id值相同且不为空字符串的组件即为共享元素，在页面转场时可显示共享元素转场动效。
-  id：设置组件的id。
-  duration：单位为毫秒，默认动画时长为1000毫秒。
- curve：默认曲线为Linear，有效值参见[Curve](ts-animatorproperty.md) 说明。
- delay：单位为毫秒，默认不延时播放。
- motionPath：运动路径信息。
- path：设置路径。
- from：设置起始值。
- to：设置终止值。
- rotatable：是否旋转。
- zIndex：设置Z轴。
- type：动画类型。 | ## 示例 -示例功能为两个页面，共享元素转场页面图片点击后转场至页面B的图片。 + 示例代码为点击图片跳转页面时，显示共享元素图片的自定义转场动效。 ```ts // xxx.ets diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md index bc6dbe171b151d5fa70693139f12fac733cb9ac8..0986e03f2b635f689bd5a699c095e34079edefb3 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md @@ -1,25 +1,21 @@ # 背景设置 -设置组件的背景色。 +设置组件的背景样式。 > **说明：** -> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - -## 权限列表 - -无 +> +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| backgroundColor | [ResourceColor](../../ui/ts-types.md) | - | 设置组件的背景色。 | -| backgroundImage | src: [ResourceStr](../../ui/ts-types.md),
repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat) | - | src参数：图片地址，支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。
repeat参数：设置背景图片的重复样式，默认不重复。 | -| backgroundImageSize | {
width?: Length,
height?: Length
} \| [ImageSize](ts-appendix-enums.md#imagesize) | Auto | 设置背景图像的高度和宽度。当输入为{width: Length, height: Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。 | -| backgroundImagePosition | {
x?: Length,
y?: Length
} \| [Alignment](ts-appendix-enums.md#alignment) | {
x: 0,
y: 0
} | 设置背景图在组件中显示位置。 | +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| backgroundColor | [ResourceColor](../../ui/ts-types.md) | 设置组件的背景色。 | +| backgroundImage | - src: [ResourceStr](../../ui/ts-types.md),
- repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat) | src：图片地址，支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。
repeat：设置背景图片的重复样式，默认不重复。 | +| backgroundImageSize | {
width?: [Length](../../ui/ts-types.md#length),
height?: [Length](../../ui/ts-types.md#length)
} \| [ImageSize](ts-appendix-enums.md#imagesize) | 设置背景图像的高度和宽度。当输入为{width: Length, height: Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。
默认值：ImageSize.Auto | +| backgroundImagePosition | {
x?: [Length](../../ui/ts-types.md#length),
y?: [Length](../../ui/ts-types.md#length)
} \| [Alignment](ts-appendix-enums.md#alignment) | 设置背景图在组件中显示位置。
默认值：
{
x: 0,
y: 0
} | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md index 01ee8c54de5a4f3b202035e05312def5a8ddba9f..6ec2877e7bb531834a64d5a8c176f53aad7d0e4b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md @@ -1,22 +1,18 @@ # 点击控制 -设置组件是否可触摸。 +设置组件是否可响应点击事件。 > **说明：** -> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - -## 权限列表 - -无 +> +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 属性 -| **名称** | **参数类型** | **默认值** | **描述** | -| --------- | -------- | ------- | -------------- | -| touchable | boolean | true | 设置当前组件是否可以被触摸。 | +| **名称** | **参数类型** | **描述** | +| --------- | ------------ | --------------------------------------------- | +| touchable | boolean | 设置组件是否可响应点击事件。
默认值：true | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md index d566eb04e49768ab3c54a3fd693e5364db21ce75..2aa5c67b0f1bb18376a486133bdc7d6aa607cca7 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md @@ -3,23 +3,18 @@ > **说明：** > - 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > -> - 仅当父组件是Flex组件时生效。 - - -## 权限列表 - -无 +> - 仅当父组件是 Flex、Column、Row 时生效。 ## 属性 -| 名称 | 参数说明 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| flexBasis | 'auto' \| Length | 'auto' | 此属性所在的组件在Flex容器中主轴方向上基准尺寸。 | -| flexGrow | number | 0 | Flex容器的剩余空间分配给此属性所在组件的比例。 | -| flexShrink | number | 1 | Flex容器压缩尺寸分配给此属性所在组件的比例。 | -| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign枚举说明) | Auto | 覆盖Flex布局容器中alignItems默认配置。 | +| 名称 | 参数说明 | 描述 | +| -------- | -------- | -------- | +| flexBasis | number \| string | 设置组件在父容器主轴方向上的基准尺寸。
默认值：'auto'（表示组件在主轴方向上的基准尺寸为组件原本的大小） | +| flexGrow | number | 设置父容器的剩余空间分配给此属性所在组件的比例。
默认值：0 | +| flexShrink | number | 设置父容器压缩尺寸分配给此属性所在组件的比例。
默认值：1 | +| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | 子组件在父容器交叉轴的对齐格式，覆盖Flex布局容器中alignItems默认配置。
默认值：ItemAlign.Auto | ## 示例 @@ -34,7 +29,7 @@ struct FlexExample { Column({ space: 5 }) { Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%') // 基于主轴基准尺寸 - // flexBasis()值可以是'auto'(默认值)元素本来的大小 ,如果是数字则类似于.width()/.height() ,基于主轴 + // flexBasis()值可以是'auto',表示基准尺寸是元素本来的大小 ,也可以是长度设置，相当于.width()/.height() Flex() { Text('flexBasis(100)') .flexBasis('100').height(100).lineHeight(70) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md index 2420c855d9ca1cc6c00ff298d718b1ec69e2f18b..739ce3e872594c160bd0aee9f52da360cb9960ad 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md @@ -3,24 +3,21 @@ 设置组件的对齐方式、布局方向和显示位置。 > **说明：** -> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - -## 权限列表 - -无 +> +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| align | [Alignment](ts-appendix-enums.md#alignment) | Center | 设置元素内容的对齐方式，只有当设置的width和height大小超过元素本身内容大小时生效。 | -| direction | [Direction](ts-appendix-enums.md#direction) | Auto | 设置元素水平方向的布局，可选值参照Direction枚举说明。 | -| position | {
x: Length,
y: Length
} | - | 使用绝对定位，设置元素锚点相对于父容器顶部起点偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。 | -| markAnchor | {
x: Length,
y: Length
} | {
x: 0,
y: 0
} | 设置元素在位置定位时的锚点，以元素顶部起点作为基准点进行偏移。 | -| offset | {
x: Length,
y: Length
} | {
x: 0,
y: 0
} | 相对布局完成位置坐标偏移量，设置该属性，不影响父容器布局，仅在绘制时进行位置调整。 | +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| align | [Alignment](ts-appendix-enums.md#alignment) | 设置元素内容的对齐方式，只有当设置的width和height大小超过元素本身内容大小时生效。
默认值：Alignment.Center | +| direction | [Direction](ts-appendix-enums.md#direction) | 设置元素水平方向的布局。
默认值：Direction.Auto | +| position | {
x: [Length](../../ui/ts-types.md#length),
y: [Length](../../ui/ts-types.md#length)
} | 使用绝对定位，设置元素锚点相对于父容器顶部起点偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。 | +| markAnchor | {
x: [Length](../../ui/ts-types.md#length),
y: [Length](../../ui/ts-types.md#length)
} | 设置元素在位置定位时的锚点，以元素顶部起点作为基准点进行偏移。
默认值：
{
x: 0,
y: 1
} | +| offset | {
x: [Length](../../ui/ts-types.md#length),
y: [Length](../../ui/ts-types.md#length)
} | 相对布局完成位置坐标偏移量，设置该属性，不影响父容器布局，仅在绘制时进行位置调整。
默认值：
{
x: 0,
y: 1
} | +| alignRules9+ | {
left?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };
right?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };
middle?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };
top?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };
bottom?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };
center?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) }
} | 指定相对容器的对齐规则。
- left：设置左对齐参数。
- right：设置右对齐参数。
- middle：设置中间对齐的参数。
- top：设置顶部对齐的参数。
- bottom：设置底部对齐的参数。
- center：设置中心对齐的参数。
**说明：**
- anchor：设置作为锚点的组件的id值。
- align：设置相对于锚点组件的对齐方式。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md index 6a9466e98ba923b9b3505499742c944c74047d7d..4240b88b6a36f8b5a63f6a3404554bf229756d01 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md @@ -3,26 +3,22 @@ 用于设置组件的宽高、边距等显示尺寸进行设置。 > **说明：** -> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - -## 权限列表 - -无 +> +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 属性 -| 名称 | 参数说明 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| width | Length | - | 设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。 | -| height | Length | - | 设置组件自身的高度，缺省时使用元素自身内容需要的高度。 | -| size | {
width?: Length,
height?: Length
} | - | 设置高宽尺寸。 | -| padding | {
top?: Length,
right?: Length,
bottom?: Length,
left?: Length
} \| Length | 0 | 设置内边距属性。
参数为Length类型时，四个方向内边距同时生效。 | -| margin | {
top?: Length,
right?: Length,
bottom?: Length,
left?: Length
}
\| Length | 0 | 设置外边距属性。
参数为Length类型时，四个方向外边距同时生效。 | -| constraintSize | {
minWidth?: Length,
maxWidth?: Length,
minHeight?: Length,
maxHeight?: Length
} | {
minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity
} | 设置约束尺寸，组件布局时，进行尺寸范围限制。 | -| layoutWeight | number \| string | 0 | 容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置，表示自适应占满剩余空间。
>  **说明：**
> 仅在Row/Column/Flex布局中生效。 | +| 名称 | 参数说明 | 描述 | +| -------- | -------- | -------- | +| width | [Length](../../ui/ts-types.md#length) | 设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。 | +| height | [Length](../../ui/ts-types.md#length) | 设置组件自身的高度，缺省时使用元素自身内容需要的高度。 | +| size | {
width?: [Length](../../ui/ts-types.md#length),
height?: [Length](../../ui/ts-types.md#length)
} | 设置高宽尺寸。
- width：设置组件的宽度
- height：设置组件的高度 | +| padding | [Padding](../../ui/ts-types.md#Padding) \| [Length](../../ui/ts-types.md#length) | 设置内边距属性。
参数为[Length](../../ui/ts-types.md#length)类型时，四个方向内边距同时生效。
默认值：0 | +| margin | [Margin](../../ui/ts-types.md#Margin) \| [Length](../../ui/ts-types.md#length) | 设置外边距属性。
参数为[Length](../../ui/ts-types.md#length)类型时，四个方向外边距同时生效。
默认值：0 | +| constraintSize | {
minWidth?: [Length](../../ui/ts-types.md#length),
maxWidth?: [Length](../../ui/ts-types.md#length),
minHeight?: [Length](../../ui/ts-types.md#length),
maxHeight?: [Length](../../ui/ts-types.md#length)
} | 设置约束尺寸，组件布局时，进行尺寸范围限制。
- minWidth：设置组件的最小宽度
- maxWidth：设置组件的最大宽度
- minHeight：设置组件的最小高度
- maxHeight：设置组件的最大高度
默认值：
{
minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity
} | +| layoutWeight | number \| string | 容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置，表示自适应占满剩余空间。
默认值：0
**说明：**
仅在Row/Column/Flex布局中生效。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md index 80e147ef093935853d2e861b35ae63706917a050..25e644f73d8a6523b051bea972a7aeff328c7f82 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md @@ -6,16 +6,12 @@ > > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - ## 事件 -| 名称 | 支持冒泡 | 功能描述 | -| ---------------------------------------- | ---- | --------------------------------- | -| onClick(callback: (event?: ClickEvent) => void) | 否 | 点击动作触发该方法调用，event参数见ClickEvent介绍。 | +| 名称 | 支持冒泡 | 功能描述 | +| ------------------------------------------------------------ | -------- | --------------------------------------------------- | +| onClick(event: (event?: ClickEvent) => void) | 否 | 点击动作触发该方法调用，event参数见ClickEvent介绍。 | ## ClickEvent对象说明 | 属性名称 | 类型 | 描述 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md index b84246cdf3008cac0dbeca2f383919588d76c68c..c7eed9da294e19d917e8669ff57176c385995cff 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md @@ -3,20 +3,16 @@ 挂载卸载事件指组件从组件树上挂载、卸载时触发的事件。 > **说明：** +> > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - - ## 事件 -| 名称 | 支持冒泡 | 功能描述 | -| ---------------------------------------- | ---- | ------------- | -| onAppear(callback: () => void) | 否 | 组件挂载显示时触发此回调。 | -| onDisappear(callback: () => void) | 否 | 组件卸载消失时触发此回调。 | +| 名称 | 支持冒泡 | 功能描述 | +| ------------------------------------------------ | -------- | -------------------------- | +| onAppear(event: () => void) | 否 | 组件挂载显示时触发此回调。 | +| onDisappear(event: () => void) | 否 | 组件卸载消失时触发此回调。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md index 50a5e1a01227f057b2b74ef1baa4491e9fb08d85..0ff3520b92fb0137c9e29a6e36abad9ffab23b42 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md @@ -3,37 +3,34 @@ 当手指放在组件上、滑动或从组件上移开时触发。 > **说明：** +> > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - - ## 事件 -| 名称 | 是否冒泡 | 功能描述 | -| ---------------------------------------- | ---- | ---------------------------------------- | -| onTouch(callback: (event?: TouchEvent) => void) | 是 | 触摸动作触发该方法调用，event参数见[TouchEvent](#touchevent对象说明)介绍。 | +| 名称 | 是否冒泡 | 功能描述 | +| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | +| onTouch(event: (event?: TouchEvent) => void) | 是 | 触摸动作触发该方法调用，event参数见[TouchEvent](#touchevent对象说明)介绍。 | ## TouchEvent对象说明 -- 属性 - | 属性名称 | 类型 | 描述 | - | ------------------- | ---------------------------------------- | ------------ | - | type | [TouchType](ts-appendix-enums.md#touchtype) | 触摸事件的类型。 | - | touches | Array<[TouchObject](#touchobject对象说明)> | 全部手指信息。 | - | changedTouches | Array<[TouchObject](#touchobject对象说明)> | 当前发生变化的手指信息。 | - | timestamp | number | 距离开机时间的时间戳，单位为毫秒。 | - | target8+ | [EventTarget](ts-universal-events-click.md#eventtarget8对象说明) | 被触摸元素对象。 | +**属性：** + +| 属性名称 | 类型 | 描述 | +| ------------------- | ---------------------------------------- | ------------ | +| type | [TouchType](ts-appendix-enums.md#touchtype) | 触摸事件的类型。 | +| touches | Array<[TouchObject](#touchobject对象说明)> | 全部手指信息。 | +| changedTouches | Array<[TouchObject](#touchobject对象说明)> | 当前发生变化的手指信息。 | +| timestamp | number | 距离开机时间的时间戳，单位为毫秒。 | +| target8+ | [EventTarget](ts-universal-events-click.md#eventtarget8对象说明) | 被触摸元素对象。 | +**接口：** -- 接口 - | 接口名称 | 功能描述 | - | ---------------------- | ------- | - | stopPropagation()：void | 阻塞事件冒泡。 | +| 接口名称 | 功能描述 | +| ---------------------- | ------- | +| stopPropagation()：void | 阻塞事件冒泡。 | ## TouchObject对象说明 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md index 543ad156586473e1a9ca6fc79b2e172bb54f6811..e435dd497eb3bb95c80393e8073560406e97c765 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md @@ -8,17 +8,12 @@ > - 目前仅支持通过外接键盘的tab键、方向键触发。 -## 权限列表 - -无 - - ## 事件 | **名称** | **支持冒泡** | **功能描述** | | -------- | -------- | -------- | -| onFocus(callback: () => void) | 否 | 当前组件获取焦点时触发的回调。 | -| onBlur(callback:() => void) | 否 | 当前组件失去焦点时触发的回调。 | +| onFocus(event: () => void) | 否 | 当前组件获取焦点时触发的回调。 | +| onBlur(event:() => void) | 否 | 当前组件失去焦点时触发的回调。 | > **说明：** > 支持焦点事件的组件：Button、Text、Image、List、Grid。 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md index 90df9e4d3524e0a75374556da738f8477bf7826d..03007e52fc4afb5e0cbbd66f39da94343f44ea72 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md @@ -3,20 +3,16 @@ 在单个动作触发多个事件时，事件的顺序是固定的，鼠标事件默认透传。 > **说明：** +> > 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - - ## 事件 -| 名称 | 支持冒泡 | 描述 | -| ---------------------------------------- | ---- | ---------------------------------------- | -| onHover(callback: (isHover?: boolean) => void) | 否 | 鼠标进入或退出组件时触发该回调。
isHover：表示鼠标是否悬浮在组件上，鼠标进入时为true, 退出时为false。 | -| onMouse(callback: (event?: MouseEvent) => void) | 是 | 当前组件被鼠标按键点击时或者鼠标在组件上移动时，触发该回调，event参数包含触发事件时的时间戳、鼠标按键、动作、点击触点在整个屏幕上的坐标和点击触点相对于当前组件的坐标。 | +| 名称 | 支持冒泡 | 描述 | +| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | +| onHover(event: (isHover?: boolean) => void) | 否 | 鼠标进入或退出组件时触发该回调。
isHover：表示鼠标是否悬浮在组件上，鼠标进入时为true, 退出时为false。 | +| onMouse(event: (event?: MouseEvent) => void) | 是 | 当前组件被鼠标按键点击时或者鼠标在组件上移动时，触发该回调，event参数包含触发事件时的时间戳、鼠标按键、动作、点击触点在整个屏幕上的坐标和点击触点相对于当前组件的坐标。 | ## MouseEvent对象说明