diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md index 0bde935d8e104ad982c322c342abb71b96909a31..98da7c61fee51c2a6d99349a7de61b93fda1cede 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md @@ -10,10 +10,10 @@ You can set the background of a component. | Name| Type| Description| | -------- | -------- | -------- | -| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the component.| -| backgroundImage | src: [ResourceStr](ts-types.md#resourcestr),
repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat) | **src**: image address, which can be the address of an Internet or a local image. (SVG images are not supported.)
**repeat**: whether the background image is repeatedly used. By default, the background image is not repeatedly used.| -| backgroundImageSize | {
width?: [Length](ts-types.md#length),
height?: [Length](ts-types.md#length)
} \| [ImageSize](ts-appendix-enums.md#imagesize) | Width and height of the background image. If the input is a **{width: Length, height: Length}** object and only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged.
Default value: **ImageSize.Auto**| -| backgroundImagePosition | [Position](ts-types.md#position8) \| [Alignment](ts-appendix-enums.md#alignment) | Position of the background image in the component, that is, the coordinates relative to the upper left corner of the component.
Default value:
{
x: 0,
y: 0
}
When **x** and **y** are set in percentage, the offset is calculated based on the width and height of the component.| +| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the component.
Since API version 9, this API is supported in ArkTS widgets.| +| backgroundImage | src: [ResourceStr](ts-types.md#resourcestr),
repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat) | **src**: image address, which can be the address of an Internet or a local image. (SVG images are not supported.)
**repeat**: whether the background image is repeatedly used. By default, the background image is not repeatedly used.
Since API version 9, this API is supported in ArkTS widgets.| +| backgroundImageSize | {
width?: [Length](ts-types.md#length),
height?: [Length](ts-types.md#length)
} \| [ImageSize](ts-appendix-enums.md#imagesize) | Width and height of the background image. If the input is a **{width: Length, height: Length}** object and only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged.
Default value: **ImageSize.Auto**
Since API version 9, this API is supported in ArkTS widgets.| +| backgroundImagePosition | [Position](ts-types.md#position8) \| [Alignment](ts-appendix-enums.md#alignment) | Position of the background image in the component, that is, the coordinates relative to the upper left corner of the component.
Default value:
{
x: 0,
y: 0
}
When **x** and **y** are set in percentage, the offset is calculated based on the width and height of the component.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md index e24e391a4690c7767dd9449c4ef5d1e6d2daa968..fdff66a475bb3987ab7574b14d99fe0ea50a6ff0 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md @@ -12,10 +12,12 @@ You can apply background blur effects to a component. | Name | Type | Description | | -------------------- | ----------------------- | ------------------------ | -| backgroundBlurStyle | [BlurStyle](#blurstyle) | Style of the blur between the background and content for the current component. The input parameter indicates a blur material.| +| backgroundBlurStyle | [BlurStyle](#blurstyle) | Style of the blur between the background and content for the current component. The input parameter indicates a blur material.
This API is supported in ArkTS widgets.| ## BlurStyle +This API is supported in ArkTS widgets. + | Name | Description | | ------- | ---------- | | Thin | Thin material. | diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md index d50f5ec504c3b9f215e033c4d33dd9dc48dba96d..2371633764347fc20d9306e52a561ecb98795a63 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md @@ -10,10 +10,12 @@ You can draw an image around a component. | Name | Type | Description | | ---------- | ---------------------------------------- | --------------------------------------- | -| borderImage | [BorderImageOption](#borderimageoption) | Border image or border gradient. | +| borderImage | [BorderImageOption](#borderimageoption) | Border image or border gradient.
This API is supported in ArkTS widgets.| ## BorderImageOption +This API is supported in ArkTS widgets. + | Name | Type | Description | | ---------- | ---------------------------------------- | --------------------------------------- | | source | string \| [Resource](ts-types.md#resource) \| [linearGradient](ts-universal-attributes-gradient-color.md) | Source or gradient color of the border image.
**NOTE**
The border image source applies only to container components, such as **\**, **\**, and **\**.| @@ -23,9 +25,10 @@ You can draw an image around a component. | repeat | [RepeatMode](#repeatmode) | Repeat mode of the border image.
Default value: **RepeatMode.Stretch**| | fill | boolean | Whether to fill the center of the border image.
Default value: **false** | - ## RepeatMode +This API is supported in ArkTS widgets. + | Name | Description | | ------- | ----------------------------------- | | Repeat | The source image's slices are tiled. Tiles beyond the border box will be clipped. | diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md index 5387323038344bdea0670d857178ad6ae4175ac5..2868a7fdf9c6920437dbd6d105051bd6c2f94f88 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md @@ -13,11 +13,11 @@ The border attributes are used to set border styles for components. | Name | Type | Description | | ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -| border | {
width?: [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9)9+,
color?: [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9)9+,
radius?: [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9)9+,
style?: [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)9+
} | Unified border style.
- **width**: border width.
- **color**: border color.
- **radius**: radius of the rounded corner of the border.
- **style**: border style.| -| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)9+ | Border style.
Default value: **BorderStyle.Solid** | -| borderWidth | [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9)9+ | Border width. The percentage format is not supported. | -| borderColor | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9)9+ | Border color.
Default value: **Color.Black** | -| borderRadius | [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9)9+ | Border radius. The percentage format is not supported. | +| border | {
width?: [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9)9+,
color?: [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9)9+,
radius?: [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9)9+,
style?: [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)9+
} | Unified border style.
- **width**: border width.
- **color**: border color.
- **radius**: radius of the rounded corner of the border.
- **style**: border style.
Since API version 9, this API is supported in ArkTS widgets.| +| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)9+ | Border style.
Default value: **BorderStyle.Solid**
Since API version 9, this API is supported in ArkTS widgets.| +| borderWidth | [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9)9+ | Border width. The percentage format is not supported.
Since API version 9, this API is supported in ArkTS widgets.| +| borderColor | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9)9+ | Border color.
Default value: **Color.Black**
Since API version 9, this API is supported in ArkTS widgets.| +| borderRadius | [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9)9+ | Border radius. The percentage format is not supported.
Since API version 9, this API is supported in ArkTS widgets.| ## EdgeWidths9+ diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md index 72c361558b417f77d28024abda69e19bc7ad111e..1c96d9b4d0ed36fabb1069bd42eb1ac1a1965b6c 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md @@ -11,7 +11,7 @@ | Name | Type | Description | | -----| -------- | ----------------------------- | -| id | string | Unique ID you assigned to the component.
Default value: **''**| +| id | string | Unique ID you assigned to the component.
Default value: **''**
Since API version 9, this API is supported in ArkTS widgets.| ## APIs diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md index 6e7645eabe12366ced89fb469334612d2205bd9f..d30aa033b3dd9276a78d1b47f639661d384d5a7c 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md @@ -10,9 +10,9 @@ The **enabled** attribute sets whether a component responds to user interactions ## Attributes -| Name | Type | Description | -| ------- | ------- | ---------------------------------------- | -| enabled | boolean | Whether the component responds to user interactions, including clicks and touches. The value **true** means that the component responds to user interactions, and **false** means the opposite.
Default value: **true** | +| Name | Type| Description | +| ------- | -------- | ------------------------------------------------------------ | +| enabled | boolean | Whether the component responds to user interactions, including clicks and touches. The value **true** means that the component responds to user interactions, and **false** means the opposite.
Default value: **true**
Since API version 9, this API is supported in ArkTS widgets. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md index 9234810c88d381fbeda3bbc8e9b79a244d5f74ac..702fdef1d7c4acb9f3a2bc8eecd9325ec4367181 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md @@ -8,12 +8,12 @@ ## Attributes -| Name | Type | Description | -| ---------- | ---------------------------------------- | ---------------------------------------- | -| flexBasis | number \| string | Base size of the component in the main axis of the parent container.
Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)
This attribute cannot be set in percentage.| -| flexGrow | number | Percentage of the parent container's remaining space that is allocated to the component.
Default value: **0** | -| flexShrink | number | Percentage of the parent container's shrink size that is allocated to the component.
When the parent container is **\** or **\**, the default value is **0**.
When the parent container is **\**, the default value is **1**. | -| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis of the parent container. The setting overwrites the **alignItems** setting of the parent container.
Default value: **ItemAlign.Auto**| +| Name | Type | Description | +| ---------- | ------------------------------------------- | ------------------------------------------------------------ | +| flexBasis | number \| string | Base size of the component in the main axis of the parent container.
Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)
This attribute cannot be set in percentage.
Since API version 9, this API is supported in ArkTS widgets.| +| flexGrow | number | Percentage of the parent container's remaining space that is allocated to the component.
Default value: **0**
Since API version 9, this API is supported in ArkTS widgets.| +| flexShrink | number | Percentage of the parent container's shrink size that is allocated to the component.
When the parent container is **\** or **\**, the default value is **0**.
When the parent container is **\**, the default value is **1**.
Since API version 9, this API is supported in ArkTS widgets.| +| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis of the parent container. The setting overwrites the **alignItems** setting of the parent container.
Default value: **ItemAlign.Auto**
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md index a8db3e77829f493a331e570449b80cedce5eb2b2..b989c3554a0c0725688fbd44b2aed9fc95d99022 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md @@ -12,9 +12,9 @@ Create a more gorgeous look for a component by applying a gradient color effect | Name | Type | Description | | -------------- | -------------------------------------------- | ----------------------------------- | -| linearGradient | {
angle?: number \| string,
direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Linear gradient.
- **angle**: start angle of the linear gradient. A positive value indicates a clockwise rotation from the origin, (0, 0).
Default value: **180**
- **direction**: direction of the linear gradient. It does not take effect when **angle** is set.
Default value: **GradientDirection.Bottom**
- **colors**: colors of the linear gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**| -| sweepGradient | {
center: Point,
start?: number \| string,
end?: number \| string,
rotation?: number\|string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Angle gradient.
- **center**: center point of the angle gradient, that is, the coordinates relative to the upper left corner of the current component.
- **start**: start point of the angle gradient.
Default value: **0**
- **end**: end point of the angle gradient.
Default value: **0**
- **rotation**: rotation angle of the angle gradient.
Default value: **0**
- **colors**: colors of the angle gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**| -| radialGradient | {
center: Point,
radius: number \| string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Radial gradient.
- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.
- **radius**: radius of the radial gradient.
- **colors**: colors of the radial gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**| +| linearGradient | {
angle?: number \| string,
direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Linear gradient.
- **angle**: start angle of the linear gradient. A positive value indicates a clockwise rotation from the origin, (0, 0).
Default value: **180**
- **direction**: direction of the linear gradient. It does not take effect when **angle** is set.
Default value: **GradientDirection.Bottom**
- **colors**: colors of the linear gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| sweepGradient | {
center: Point,
start?: number \| string,
end?: number \| string,
rotation?: number\|string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Sweep gradient, which can sweep around the specified center point in the 0–360 degree range. If the rotation angle exceeds the range, a monochrome color instead of a gradient will be drawn.
- **center**: center point of the sweep gradient, that is, the coordinates relative to the upper left corner of the current component.
- **start**: start point of the sweep gradient.
Default value: **0**
- **end**: end point of the sweep gradient.
Default value: **0**
- **rotation**: rotation angle of the sweep gradient.
Default value: **0**
- **colors**: colors of the sweep gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| radialGradient | {
center: Point,
radius: number \| string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Radial gradient.
- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.
- **radius**: radius of the radial gradient.
- **colors**: colors of the radial gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md index 69272c0d3bf0283b23e894da1342649e6c612472..4d4e1e7440c93e9b80972d5582b0edfe8800a176 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md @@ -3,6 +3,7 @@ Image effects include blur, shadow, and much more. > **NOTE** +> > The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. @@ -11,17 +12,41 @@ Image effects include blur, shadow, and much more. | Name | Type | Default Value| Description | | ----------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ | -| blur | number | - | Applies the content blur effect to the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is **0**, the content is not blurred.| -| backdropBlur | number | - | Applies the background blur effect to the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred.| -| shadow | {
radius: number \| [Resource](ts-types.md#resource),
color?: [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource),
offsetX?: number \| [Resource](ts-types.md#resource),
offsetY?: number \| [Resource](ts-types.md#resource)
} | - | Applies the shadow effect to the current component. The input parameters are the fuzzy radius (mandatory), shadow color (optional; gray by default), x-axis offset (optional; 0 by default), and y-axis offset (optional; 0 by default). The offset unit is px.| -| grayscale | number | 0.0 | Converts the input image to grayscale. The value indicates the grayscale conversion ratio. If the input value is **1.0**, the image is converted into a grayscale image. If the input value is **0.0**, the image does not change. If the input value is between **0.0** and **1.0**, the effect changes in linear mode. The unit is percentage.| -| brightness | number | 1.0 | Applies a brightness to the current component. The input parameter is a brightness ratio. The value **1** indicates no effects. The value **0** indicates the complete darkness. If the value is less than **1**, the brightness decreases. If the value is greater than **1**, the brightness increases. A larger value indicates a higher brightness.| -| saturate | number | 1.0 | Applies the saturation effect to the current component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. When the input value is **1**, the source image is displayed. When the input value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. When the input value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage.| -| contrast | number | 1.0 | Applies the contrast effect to the current component. The input parameter is a contrast value. If the value is **1**, the source image is displayed. If the value is greater than **1**, a larger value indicates a higher contrast and a clearer image. If the value is less than **1**, a smaller value indicates a lower contrast is. If the value is **0**, the image becomes all gray. The unit is percentage.| -| invert | number | 0 | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion. The value **0** indicates that the image does not change. The unit is percentage.| -| sepia | number | 0 | Converts the image color to sepia. The input parameter is an image inversion ratio. The value **1** indicates the image is completely sepia. The value **0** indicates that the image does not change. The unit is percentage.| -| hueRotate | number \| string | '0deg' | Applies the hue rotation effect to the current component. The input parameter is a rotation angle. | -| colorBlend 8+ | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | Applies the color blend effect to the current component. The input parameter is the blended color. | +| blur | number | - | Applies the content blur effect to the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is **0**, the content is not blurred.
Since API version 9, this API is supported in ArkTS widgets.| +| backdropBlur | number | - | Applies the background blur effect to the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred.
Since API version 9, this API is supported in ArkTS widgets.| +| shadow | [ShadowOptions](#shadowoptions) \| [ShadowStyle](#shadowstyle10) | - | Applies a shadow effect to the current component.
When the value type is **ShadowOptions**, the blur radius, shadow color, and offset along the x-axis and y-axis can be specified.
When the value type is **ShadowStyle**, the shadow style can be specified.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
ArkTS widgets do not support the [ShadowStyle](#shadowstyle10) value type. | +| grayscale | number | 0.0 | Converts the input image to grayscale. The value indicates the grayscale conversion ratio. If the input value is **1.0**, the image is converted into a grayscale image. If the input value is **0.0**, the image does not change. If the input value is between **0.0** and **1.0**, the effect changes in linear mode. The unit is percentage.
Since API version 9, this API is supported in ArkTS widgets.| +| brightness | number | 1.0 | Applies a brightness to the current component. The input parameter is a brightness ratio. The value **1** indicates no effects. The value **0** indicates the complete darkness. If the value is less than **1**, the brightness decreases. If the value is greater than **1**, the brightness increases. A larger value indicates a higher brightness.
Since API version 9, this API is supported in ArkTS widgets.| +| saturate | number | 1.0 | Applies the saturation effect to the current component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. When the input value is **1**, the source image is displayed. When the input value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. When the input value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage.
Since API version 9, this API is supported in ArkTS widgets.| +| contrast | number | 1.0 | Applies the contrast effect to the current component. The input parameter is a contrast value. If the value is **1**, the source image is displayed. If the value is greater than **1**, a larger value indicates a higher contrast and a clearer image. If the value is less than **1**, a smaller value indicates a lower contrast is. If the value is **0**, the image becomes all gray. The unit is percentage.
Since API version 9, this API is supported in ArkTS widgets.| +| invert | number | 0 | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion. The value **0** indicates that the image does not change. The unit is percentage.
Since API version 9, this API is supported in ArkTS widgets.| +| sepia | number | 0 | Converts the image color to sepia. The input parameter is an image inversion ratio. The value **1** indicates the image is completely sepia. The value **0** indicates that the image does not change. The unit is percentage.
Since API version 9, this API is supported in ArkTS widgets.| +| hueRotate | number \| string | '0deg' | Applies the hue rotation effect to the current component. The input parameter is a rotation angle.
Since API version 9, this API is supported in ArkTS widgets.| +| colorBlend 8+ | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | Applies the color blend effect to the current component. The input parameter is the blended color.
Since API version 9, this API is supported in ArkTS widgets.| + +## ShadowOptions + +Provides the shadow attributes, including the blur radius, color, and offset along the x-axis and y-axis. + +Since API version 9, this API is supported in ArkTS widgets. + +| Name | Type | Mandatory | Description | +| ------ | ------ | ---- | --------------- | +| radius | number \| [Resource](ts-types.md#resource) | Yes | Blur radius of the shadow. | +| color | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | No | Color of the shadow.
The default value is gray.| +| offsetX | number \| [Resource](ts-types.md#resource) | No | Offset of the shadow along the x-axis.
The default value is **0**. | +| offsetY | number \| [Resource](ts-types.md#resource) | No | Offset of the shadow along the y-axis.
The default value is **0**.| + +## ShadowStyle10+ + +| Name | Description | +| ------ | -------------------------------------- | +| OuterDefaultXS | Mini shadow.| +| OuterDefaultSM | Small shadow.| +| OuterDefaultMD | Medium shadow.| +| OuterDefaultLG | Large shadow.| +| OuterFloatingSM | Floating small shadow.| +| OuterFloatingMD | Floating medium shadow.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md index 6fbaa35cdd66ca161b41999aedd1a2f06996f13d..76855375443264f0e2552db2b0df1fd339d8a53b 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md @@ -9,10 +9,10 @@ Layout constraints refer to constraints on the aspect ratio and display priority ## Attributes -| Name | Type | Description | -| --------------- | ------ | ---------------------------------------- | -| aspectRatio | number | Aspect ratio of the component, which can be obtained using the following formula: Width/Height. | -| displayPriority | number | Display priority for the component in the layout container. When the space of the parent container is insufficient, the component with a lower priority is hidden.
The digits after the decimal point are not counted in determining the display priority. That is, numbers in the [x, x + 1) range are considered to represent the same priority. For example, **1.0** and **1.9** represent the same priority.
**NOTE**
This attribute is valid only for the **\**, **\**, and **\** (single-row) container components.| +| Name | Type| Description | +| --------------- | -------- | ------------------------------------------------------------ | +| aspectRatio | number | Aspect ratio of the component, which can be obtained using the following formula: Width/Height.
Since API version 9, this API is supported in ArkTS widgets.| +| displayPriority | number | Display priority for the component in the layout container. When the space of the parent container is insufficient, the component with a lower priority is hidden.
The digits after the decimal point are not counted in determining the display priority. That is, numbers in the [x, x + 1) range are considered to represent the same priority. For example, **1.0** and **1.9** represent the same priority.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute is valid only for the **\**, **\**, and **\** (single-row) container components.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md index a603c54bc5f16e877420e80c1714ac16f70e2123..2c43828da9bc9d793b0fb75047e76cf862892712 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md @@ -12,12 +12,12 @@ The location attributes set the alignment mode, layout direction, and position o | Name| Type| Description| | -------- | -------- | -------- | -| align | [Alignment](ts-appendix-enums.md#alignment) | Alignment mode of the component content in the drawing area.
Default value: **Alignment.Center**| -| direction | [Direction](ts-appendix-enums.md#direction) | Horizontal layout of the component.
Default value: **Direction.Auto**| -| position | [Position](ts-types.md#position8) | Offset of the component's upper left corner relative to the parent component's upper left corner. This offset is expressed using absolute values. When laying out components, this attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.| -| markAnchor | [Position](ts-types.md#position8) | Anchor point of the component for positioning. The upper left corner of the component is used as the reference point for offset. Generally, this attribute is used together with the **position** and **offset** attributes. When used independently, this attribute is similar to **offset**.
Default value:
{
x: 0,
y: 0
} | -| offset | [Position](ts-types.md#position8) | Offset of the component relative to itself. This offset is expressed using relative values. This attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.
Default value:
{
x: 0,
y: 0
} | -| 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) }
} | Alignment rules relative to the container. This attribute is valid only when the container is [\](ts-container-relativecontainer.md).
- **left**: left-aligned.
- **right**: right-aligned.
- **middle**: center-aligned.
- **top**: top-aligned.
- **bottom**: bottom-aligned.
- **center**: center-aligned.
**NOTE**
- **anchor**: ID of the component that functions as the anchor point.
- **align**: alignment mode relative to the anchor component.| +| align | [Alignment](ts-appendix-enums.md#alignment) | Alignment mode of the component content in the drawing area.
Default value: **Alignment.Center**
Since API version 9, this API is supported in ArkTS widgets.| +| direction | [Direction](ts-appendix-enums.md#direction) | Horizontal layout of the component.
Default value: **Direction.Auto**
Since API version 9, this API is supported in ArkTS widgets.| +| position | [Position](ts-types.md#position8) | Offset of the component's upper left corner relative to the parent component's upper left corner. This offset is expressed using absolute values. When laying out components, this attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.
Since API version 9, this API is supported in ArkTS widgets.| +| markAnchor | [Position](ts-types.md#position8) | Anchor point of the component for positioning. The upper left corner of the component is used as the reference point for offset. Generally, this attribute is used together with the **position** and **offset** attributes. When used independently, this attribute is similar to **offset**.
Default value:
{
x: 0,
y: 0
}
Since API version 9, this API is supported in ArkTS widgets.| +| offset | [Position](ts-types.md#position8) | Offset of the component relative to itself. This offset is expressed using relative values. This attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.
Default value:
{
x: 0,
y: 0
}
Since API version 9, this API is supported in ArkTS widgets.| +| 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) }
} | Alignment rules relative to the container. This attribute is valid only when the container is [\](ts-container-relativecontainer.md).
- **left**: left-aligned.
- **right**: right-aligned.
- **middle**: center-aligned.
- **top**: top-aligned.
- **bottom**: bottom-aligned.
- **center**: center-aligned.
This API is supported in ArkTS widgets.
**NOTE**
- **anchor**: ID of the component that functions as the anchor point.
- **align**: alignment mode relative to the anchor component.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md index 2ead12307d619826e4ae7ae26f29732df1302857..198d40461efcb6d586ef5ff5edb829be3f9ea224 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md @@ -10,9 +10,9 @@ You can set the opacity of a component. ## Attributes -| Name | Type | Description | -| ------- | ---------------------------------------- | ---------------------------------------- | -| opacity | number \| [Resource](ts-types.md#resource) | Opacity of the component. The value ranges from 0 to 1. The value **1** means opaque, and **0** means completely transparent. When being completely transparent, the component is hidden, but still takes up space in the layout. Default value: **1**
**NOTE**
A component inherits the opacity setting from its parent component and multiplies it by its own setting. For example, if the opacity of a component is 0.8 and that of its parent component is 0.1, then the actual opacity of the component is 0.1 x 0.8 = 0.8.| +| Name | Type | Description | +| ------- | ---------------------------------------------------- | ------------------------------------------------------------ | +| opacity | number \| [Resource](ts-types.md#resource) | Opacity of the component. The value ranges from 0 to 1. The value **1** means opaque, and **0** means completely transparent. When being completely transparent, the component is hidden, but still takes up space in the layout. Default value: **1**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A component inherits the opacity setting from its parent component and multiplies it by its own setting. For example, if the opacity of a component is 0.8 and that of its parent component is 0.1, then the actual opacity of the component is 0.1 x 0.8 = 0.8. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md index 4bb23b9f11f8f7ab4aa187fedaca3ab37716a461..412b3b5be90a52e110a7b45eef2069ccbf9c5a34 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md @@ -10,7 +10,7 @@ You can set overlay text for a component. | Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| overlay | value: string,
options?: {
align?: [Alignment](ts-appendix-enums.md#alignment),
offset?: {x?: number, y?: number}
} | {
align: Alignment.Center,
offset: {0, 0}
} | Overlay added to the component.
**value**: mask text.
**options**: text positioning. **align** indicates the location of the text relative to the component. **[offset](ts-universal-attributes-location.md)** indicates the offset of the text relative to the upper left corner of itself. By default, the text is in the upper left corner of the component.
If both **align** and **offset** are set, the text is first positioned relative to the component, and then offset relative to the upper left corner of itself.| +| overlay | value: string,
options?: {
align?: [Alignment](ts-appendix-enums.md#alignment),
offset?: {x?: number, y?: number}
} | {
align: Alignment.Center,
offset: {0, 0}
} | Overlay added to the component.
**value**: mask text.
**options**: text positioning. **align** indicates the location of the text relative to the component. **[offset](ts-universal-attributes-location.md)** indicates the offset of the text relative to the upper left corner of itself. By default, the text is in the upper left corner of the component.
If both **align** and **offset** are set, the text is first positioned relative to the component, and then offset relative to the upper left corner of itself.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md index 5d3d604773dd94846f3f77957ce1bce86540e660..f0698f179b985dff0628d8d963b736ad51d7d16e 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md @@ -11,10 +11,12 @@ You can set state-specific styles for components. | Style| Type| Description| | -------- | -------- | -------- | -| stateStyles | StateStyles | Styles of the component for different states.| +| stateStyles | StateStyles | Styles of the component for different states.
Since API version 9, this API is supported in ArkTS widgets.| ## StateStyles +Since API version 9, this API is supported in ArkTS widgets. + | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | | normal | ()=>void | No| Style of the component when being stateless.| diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md index 3aaeb64451a672c5eb662fb4f79f166fd7afcab5..a62a7a53b11336ce58448233fe4b1765580b9265 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md @@ -12,8 +12,8 @@ Shape clipping changes the visible portion of a component through clipping or ma | Name | Type | Description | | -----| ------------------------------------------ | ------------------------------------ | -| clip | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) \| boolean | Clip mode. If the value is a shape, the component is clipped based on the specified shape. If the value is of the Boolean type, it specifies whether to clip the component based on the edge outline of the parent container.
Default value: **false**| -| mask | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) | Mask of the specified shape to add to the component.| +| clip | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) \| boolean | Clip mode. If the value is a shape, the component is clipped based on the specified shape. If the value is of the Boolean type, it specifies whether to clip the component based on the edge outline of the parent container.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| mask | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) | Mask of the specified shape to add to the component.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md index fe7c40c76994b0088a21b6fb65867432a5fb7deb..63adc44dc9489b233c92d96176a7cf1d6e9eb520 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md @@ -10,15 +10,15 @@ The size attributes set the width, height, and margin of a component. ## Attributes -| Name | Type | Description | -| -------------- | ---------------------------------------- | ---------------------------------------- | -| width | [Length](ts-types.md#length) | Width of the component. By default, the width required to fully hold the component content is used. If the width of the component is greater than that of the parent container, the range of the parent container is drawn. | -| height | [Length](ts-types.md#length) | Height of the component. By default, the height required to fully hold the component content is used. If the height of the component is greater than that of the parent container, the range of the parent container is drawn. | -| size | {
width?: [Length](ts-types.md#length),
height?: [Length](ts-types.md#length)
} | Size of the component. | -| padding | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | Padding of the component.
When the parameter is of the **Length** type, the four paddings take effect.
Default value: **0**
When **padding** is set to a percentage, the width of the parent container is used as the basic value.| -| margin | [Margin](ts-types.md#margin) \| [Length](ts-types.md#length) | Margin of the component.
When the parameter is of the **Length** type, the four margins take effect.
Default value: **0**
When **margin** is set to a percentage, the width of the parent container is used as the basic value.| -| constraintSize | {
minWidth?: [Length](ts-types.md#length),
maxWidth?: [Length](ts-types.md#length),
minHeight?: [Length](ts-types.md#length),
maxHeight?: [Length](ts-types.md#length)
} | Constraint size of the component, which is used to limit the size range during component layout. **constraintSize** takes precedence over **width** and **height**. If the value of **minWidth** is greater than that of **maxWidth**, only the value of **minWidth** takes effect. The same rule applies to **minHeight** and **maxHeight**.
Default value:
{
minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity
} | -| layoutWeight | number \| string | Weight of the component during layout. When the container size is determined, the container space is allocated along the main axis among the component and sibling components based on the layout weight, and the component size setting is ignored.
**NOTE**
This attribute is valid only for the **\**, **\**, and **\** layouts.| +| Name | Type | Description | +| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| width | [Length](ts-types.md#length) | Width of the component. By default, the width required to fully hold the component content is used. If the width of the component is greater than that of the parent container, the range of the parent container is drawn.
Since API version 9, this API is supported in ArkTS widgets.| +| height | [Length](ts-types.md#length) | Height of the component. By default, the height required to fully hold the component content is used. If the height of the component is greater than that of the parent container, the range of the parent container is drawn.
Since API version 9, this API is supported in ArkTS widgets.| +| size | {
width?: [Length](ts-types.md#length),
height?: [Length](ts-types.md#length)
} | Size of the component.
Since API version 9, this API is supported in ArkTS widgets.| +| padding | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | Padding of the component.
When the parameter is of the **Length** type, the four paddings take effect.
Default value: **0**
When **padding** is set to a percentage, the width of the parent container is used as the basic value.
Since API version 9, this API is supported in ArkTS widgets.| +| margin | [Margin](ts-types.md#margin) \| [Length](ts-types.md#length) | Margin of the component.
When the parameter is of the **Length** type, the four margins take effect.
Default value: **0**
When **margin** is set to a percentage, the width of the parent container is used as the basic value.
Since API version 9, this API is supported in ArkTS widgets.| +| constraintSize | {
minWidth?: [Length](ts-types.md#length),
maxWidth?: [Length](ts-types.md#length),
minHeight?: [Length](ts-types.md#length),
maxHeight?: [Length](ts-types.md#length)
} | Constraint size of the component, which is used to limit the size range during component layout. **constraintSize** takes precedence over **width** and **height**. If the value of **minWidth** is greater than that of **maxWidth**, only the value of **minWidth** takes effect. The same rule applies to **minHeight** and **maxHeight**.
Default value:
{
minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity
}
Since API version 9, this API is supported in ArkTS widgets.| +| layoutWeight | number \| string | Weight of the component during layout. When the container size is determined, the container space is allocated along the main axis among the component and sibling components based on the layout weight, and the component size setting is ignored.
**NOTE**
This attribute is valid only for the **\**, **\**, and **\** layouts.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md index f78135e0ad613113d71fd10c3f054c74cf9cf68e..9cf189d9f4d2f607aeff6d361142fcbb8ff03557 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md @@ -11,12 +11,15 @@ You can set the touch target for components that support universal click events, ## Attributes -| Name | Type | Description | -| -------------- | --------------------------------------------- | ----------------------------------------- | -| responseRegion | Array<[Rectangle](#rectangle)> \| [Rectangle](#rectangle) | One or more touch targets, including their location and size.
The default touch target is the entire component. Default value:
{
x: 0,
y: 0,
width: '100%',
height: '100%'
} | +| Name | Type | Description | +| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| responseRegion | Array<[Rectangle](#rectangle)> \| [Rectangle](#rectangle) | One or more touch targets, including their location and size.
The default touch target is the entire component. Default value:
{
x: 0,
y: 0,
width: '100%',
height: '100%'
}
Since API version 9, this API is supported in ArkTS widgets.| ## Rectangle + +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Mandatory | Description | | ------ | ----------------------------- | -----| -------------------------------- | | x | [Length](ts-types.md#length) | No | X coordinate of the touch point relative to the upper left corner of the component.
Default value: **0vp**| diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md index bf35ba4e5ee69b08d9621570b664af5ca6c0429e..0f946ddb498c50fa7ace4c25c04a79eb8bc47fe1 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md @@ -11,9 +11,9 @@ Transformation attributes allow you to rotate, translate, scale, or transform a | Name | Type | Description | | --------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| rotate | {
x?: number,
y?: number,
z?: number,
angle?: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | Rotation axis. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The default value is **0**. **centerX** and **centerY** are used to set the rotation center point.
Default value:
{
x: 0,
y: 0,
z: 0,
angle: 0,
centerX: '50%',
centerY: '50%'
} | -| translate | {
x?: number \| string,
y?: number \| string,
z? : number \| string
} | Translation distance along the x-, y-, and z-axis. The translation direction is determined by the positive and negative values. The value cannot be a percentage.
Default value:
{
x: 0,
y: 0,
z: 0
} | -| scale | {
x?: number,
y?: number,
z?: number,
centerX?: number \| string,
centerY?: number \| string
} | Scale ratio along the x-, y-, and z-axis. The default value is **1**. **centerX** and **centerY** are used to set the scale center point.
Default value:
{
x: 1,
y: 1,
z: 1,
centerX:'50%',
centerY:'50%'
} | +| rotate | {
x?: number,
y?: number,
z?: number,
angle?: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | Rotation axis. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The default value is **0**. **centerX** and **centerY** are used to set the rotation center point.
Default value:
{
x: 0,
y: 0,
z: 0,
angle: 0,
centerX: '50%',
centerY: '50%'
}
Since API version 9, this API is supported in ArkTS widgets.| +| translate | {
x?: number \| string,
y?: number \| string,
z? : number \| string
} | Translation distance along the x-, y-, and z-axis. The translation direction is determined by the positive and negative values. The value cannot be a percentage.
Default value:
{
x: 0,
y: 0,
z: 0
}
Since API version 9, this API is supported in ArkTS widgets.| +| scale | {
x?: number,
y?: number,
z?: number,
centerX?: number \| string,
centerY?: number \| string
} | Scale ratio along the x-, y-, and z-axis. The default value is **1**. **centerX** and **centerY** are used to set the scale center point.
Default value:
{
x: 1,
y: 1,
z: 1,
centerX:'50%',
centerY:'50%'
}
Since API version 9, this API is supported in ArkTS widgets.| | transform | [Matrix4Transit](../apis/js-apis-matrix4.md) | Transformation matrix of the component. | diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md index 906b8fe2dff247520061d61a5f7275a32a023746..7bf991c7db0e1cd9c291dd740496890f06dc1af6 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md @@ -10,7 +10,7 @@ The visibility attribute controls whether a component is visible. | Name | Type | Description | | ---------- | ---------------------------- | ------------------------------------------ | -| visibility | [Visibility](ts-appendix-enums.md#visibility) | Whether the component is visible. Note that even if a component is invisible, it still needs to be re-created when the page is refreshed. Therefore, you are advised to use [conditional rendering](../../quick-start/arkts-rendering-control.md#conditional-rendering) instead under scenarios where consistently high performance is required.
Default value: **Visibility.Visible** | +| visibility | [Visibility](ts-appendix-enums.md#visibility) | Whether the component is visible. Note that even if a component is invisible, it still needs to be re-created when the page is refreshed. Therefore, you are advised to use [conditional rendering](../../quick-start/arkts-rendering-control.md#conditional-rendering) instead under scenarios where consistently high performance is required.
Default value: **Visibility.Visible**
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md index 24be504eef9a302db845b10a0f1e9f082d6d6efd..c4a0fa3b20338f824c93d29bf88e857c247c7f05 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md @@ -12,7 +12,7 @@ The **zIndex** attribute sets the z-order of a component in the stacking context | Name| Type| Description| | -------- | -------- | -------- | -| zIndex | number | Hierarchy of sibling components in a container. A larger value indicates a higher display level.| +| zIndex | number | Hierarchy of sibling components in a container. A larger value indicates a higher display level.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-click.md b/en/application-dev/reference/arkui-ts/ts-universal-events-click.md index 226a6b6030f7050ddff13e6ccc37ddd3663afc4e..0936712b13880edcd098755dc388db885333dbc5 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-events-click.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-events-click.md @@ -11,9 +11,12 @@ A click event is triggered when a component is clicked. | Name | Bubbling Supported| Description | | ---------------------------------------- | ---- | --------------------------------- | -| onClick(event: (event?: ClickEvent) => void) | No | Called when a click event occurs. For details about **event**, see **ClickEvent**.| +| onClick(event: (event?: ClickEvent) => void) | No | Called when a click event occurs. For details about **event**, see **ClickEvent**.
Since API version 9, this API is supported in ArkTS widgets.| ## ClickEvent + +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Description | | ------------------- | ------------------------------------ | -------------------------------------------------------- | | screenX | number | X coordinate of the click relative to the upper left corner of the application window. | @@ -26,6 +29,8 @@ A click event is triggered when a component is clicked. ## EventTarget8+ +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Description | | ---- | ------------------------- | ---------- | | area | [Area](ts-types.md#area8) | Area information of the target element.| diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md b/en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md index 7b1db0758f125113d863399d75a7672db10c302a..1f46534fcf3dcd7822d802e20f778018a4b82060 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md @@ -9,10 +9,10 @@ The show/hide event is triggered when a component is mounted or unmounted from t ## Events -| Name | Bubbling Supported| Description | -| ------------------------------------------------ | -------- | -------------------------- | -| onAppear(event: () => void) | No | Triggered when the component is displayed.| -| onDisAppear(event: () => void) | No | Triggered when the component is hidden.| +| Name | Bubbling Supported| Description | +| ------------------------------------------------ | -------- | ------------------------------------------------------------ | +| onAppear(event: () => void) | No | Triggered when the component is displayed.
Since API version 9, this API is supported in ArkTS widgets.| +| onDisAppear(event: () => void) | No | Triggered when the component is hidden.
Since API version 9, this API is supported in ArkTS widgets.| ## Example