diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_background.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_background.png new file mode 100644 index 0000000000000000000000000000000000000000..e9746fc6334593822af5d70a0520fe62db0b238e Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_background.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/maxLength.png b/en/application-dev/reference/arkui-ts/figures/maxLength.png new file mode 100644 index 0000000000000000000000000000000000000000..643b8e9f154f29ec44d172726515b3a3335821c5 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/maxLength.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/popup_2.png b/en/application-dev/reference/arkui-ts/figures/popup_2.png new file mode 100644 index 0000000000000000000000000000000000000000..63c221b1704f7a267dfdf34d113b34a9df59e748 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/popup_2.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/popup_3.png b/en/application-dev/reference/arkui-ts/figures/popup_3.png new file mode 100644 index 0000000000000000000000000000000000000000..08967733bde19f330cbc8fc69a2083931129fef0 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/popup_3.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/showUnit.png b/en/application-dev/reference/arkui-ts/figures/showUnit.png new file mode 100644 index 0000000000000000000000000000000000000000..4b60beda19ba2c6e314dcb0632d5d5953f79a952 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/showUnit.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md index 96f949ec3fcf0336756e85e9cc4516ec996bef40..8b904ffd03ba102894adeec6e8745ab9cdae687d 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md @@ -146,6 +146,8 @@ Obtains the number of lines of the edited text. ## Example +### Example 1 + ```ts // xxx.ets @Entry @@ -185,3 +187,41 @@ struct TextAreaExample { ``` ![textArea](figures/textArea.gif) + +### Example 2 + +```ts +// xxx.ets +@Entry +@Component +struct TextAreaExample { + @State text: string = 'test' + @State counterVisible: boolean = false + @State maxNumber: number = -1 + controller: TextAreaController = new TextAreaController() + + build() { + Column() { + TextArea({ + text: this.text, + placeholder: 'The text area can hold an unlimited amount of text. input your word...', + controller: this.controller + }) + .placeholderFont({ size: 16, weight: 400 }) + .width(336) + .height(56) + .margin(20) + .fontSize(16) + .fontColor('#182431') + .maxLength(4) + .showCounter(true) + .backgroundColor('#FFFFFF') + .onChange((value: string) => { + this.text = value + }) + }.width('100%').height('100%').backgroundColor('#F1F3F5') + } +} +``` + +![maxLength](figures/maxLength.png) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md index d09c8f9eb1b99ef34d886a23389b91f5eff4065a..c5a20c371a9ed6420cdfe33200a596bf53104806 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md @@ -187,6 +187,8 @@ Obtains the number of lines of the edited text. ## Example +### Example 1 + ```ts // xxx.ets @Entry @@ -240,3 +242,55 @@ struct TextInputExample { ``` ![textInput](figures/textInput.gif) + +### Example 2 + +```ts +// xxx.ets +@Entry +@Component +struct TextInputExample { + @State PassWordSrc1:Resource=$r('app.media.icon') + @State PassWordSrc2:Resource=$r('app.media.icon') + @Builder itemEnd() { + Select([{ value: 'KB' }, + { value: 'MB' }, + { value: 'GB'}, + { value: 'TB',}]) + .height("48vp") + .borderRadius(0) + .selected(2) + .align(Alignment.Center) + .value('MB') + .font({ size: 20, weight: 500 }) + .fontColor('#182431') + .selectedOptionFont({ size: 20, weight: 400 }) + .optionFont({ size: 20, weight: 400 }) + .backgroundColor(Color.Transparent) + .responseRegion({height:"40vp",width:"80%",x:'10%',y:'6vp'}) + .onSelect((index: number) => { + console.info('Select:' + index) + }) + } + + build() { + Column() { + // Customize the password icon. + TextInput({ placeholder: 'user define password icon' }) + .type(InputType.Password) + .width(400) + .height(60) + .passwordIcon({onIconSrc:this.PassWordSrc1,offIconSrc : this.PassWordSrc2}) + // Show an underline. + TextInput({ placeholder: 'underline style' }) + .showUnderline(true) + .width(400) + .height(60) + .showError('Error') + .showUnit(this.itemEnd.bind(this)) + }.width('100%') + } +} +``` + +![showUnit](figures/showUnit.png) diff --git a/en/application-dev/reference/arkui-ts/ts-container-swiper.md b/en/application-dev/reference/arkui-ts/ts-container-swiper.md index 366eb3e728268319bf8cdd926846b0bfc0b51ddc..3ebb5c039cfcec05cbe209e7d58a5142a1169c95 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-swiper.md +++ b/en/application-dev/reference/arkui-ts/ts-container-swiper.md @@ -49,12 +49,12 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | cachedCount8+ | number | Number of child components to be cached.
Default value: **1**
**NOTE**
This attribute applies only when the **\** component uses [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md).| | disableSwipe8+ | boolean | Whether to disable the swipe feature.
Default value: **false** | | curve8+ | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the [interpolation calculation](../apis/js-apis-curve.md) module.
Default value: **Curve.Linear**| -| indicatorStyle(deprecated) | {
left?: [Length](ts-types.md#length),
top?: [Length](ts-types.md#length),
right?: [Length](ts-types.md#length),
bottom?: [Length](ts-types.md#length),
size?: [Length](ts-types.md#length),
mask?: boolean,
color?: [ResourceColor](ts-types.md),
selectedColor?: [ResourceColor](ts-types.md)
} | Style of the navigation point indicator.
\- **left**: distance between the navigation point indicator and the left edge of the **\** component.
\- **top**: distance between the navigation point indicator and the top edge of the **\** component.
\- **right**: distance between the navigation point indicator and the right edge of the **\** component.
\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\** component.
\- **size**: diameter of the navigation point indicator. The value cannot be in percentage. Default value: **6vp**
\- **mask**: whether to enable the mask for the navigation point indicator.
\- **color**: color of the navigation point indicator.
\- **selectedColor**: color of the selected navigation dot.
This API is supported since API version 8 and is deprecated since API version 9. You are advised to use [indicator](#indicator10) instead.| +| indicatorStyle(deprecated) | {
left?: [Length](ts-types.md#length),
top?: [Length](ts-types.md#length),
right?: [Length](ts-types.md#length),
bottom?: [Length](ts-types.md#length),
size?: [Length](ts-types.md#length),
mask?: boolean,
color?: [ResourceColor](ts-types.md),
selectedColor?: [ResourceColor](ts-types.md)
} | Style of the navigation point indicator.
\- **left**: distance between the navigation point indicator and the left edge of the **\** component.
\- **top**: distance between the navigation point indicator and the top edge of the **\** component.
\- **right**: distance between the navigation point indicator and the right edge of the **\** component.
\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\** component.
\- **size**: diameter of the navigation point indicator. The value cannot be in percentage. Default value: **6vp**
\- **mask**: whether to enable the mask for the navigation point indicator.
\- **color**: color of the navigation point indicator.
\- **selectedColor**: color of the selected navigation dot.
This API is supported since API version 8 and is deprecated since API version 10. You are advised to use [indicator](#indicator10) instead.| | displayCount8+ | number \| string \|
[SwiperAutoFill](#swiperautofill10)10+ | Number of elements to display per page.
Default value: **1**
**NOTE**
If the value is of the string type, it can only be **'auto'**, whose display effect is the same as that of **SwiperDisplayMode.AutoLinear**.
If the value is set to a number less than or equal to 0, the default value **1** is used.
If the value is of the number type, child components stretch (shrink) on the main axis after the swiper width [deducting the result of itemSpace x (displayCount – 1)] is evenly distributed among them on the main axis.
If the value is of the SwiperAutoFill type, the system automatically calculates and changes the number of elements to display per page based on the **\** component width and the **minSize** settings for the child component. If **minSize** is left empty or set to a value less than or equal to 0, the **\** component displays one column.| | effectMode8+ | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**.
Default value: **EdgeEffect.Spring**
**NOTE**
The spring effect does not take effect when the controller API is called.| | displayArrow10+ | value:[ArrowStyle](#arrowstyle10) \| boolean,
isHoverShow?: boolean | Arrow style of the navigation point indicator.
- **value**: arrow and background to set. In abnormal scenarios, the default values in the **ArrowStyle** object are used.
\- **isHoverShow**: whether to show the arrow only when the mouse pointer hovers over the navigation point indicator.
Default value: **false**
**NOTE**
When **isHoverShow** is set to **false**, the arrow is always displayed and can be clicked to turn pages.
When **isHoverShow** is set to **true**, the arrow is displayed only when the mouse pointer hovers over the navigation point indicator, and it can be clicked to turn pages.| -| nextMargin10+ |
[Length](ts-types.md#length)
| Next margin, used to reveal a small part of the next item.
Default value: **0**
**NOTE**
This attribute is available only when **SwiperDisplayMode** is set to **STRETCH**. | -| prevMargin10+ |
[Length](ts-types.md#length)
| Previous margin, used to reveal a small part of the previous item.
Default value: **0**
**NOTE**
This attribute is available only when **SwiperDisplayMode** is set to **STRETCH**. | +| nextMargin10+ |
[Length](ts-types.md#length)
| Next margin, used to reveal a small part of the next item.
Default value: **0**
**NOTE**
This attribute is available only when **SwiperDisplayMode** is set to **STRETCH**.
When the main axis runs horizontally and either the next margin or previous margin is greater than the calculated width of the child component, neither the next margin nor previous margin is displayed.
When the main axis runs vertically and either the next margin or previous margin is greater than the calculated height of the child component, neither the next margin nor previous margin is displayed.| +| prevMargin10+ |
[Length](ts-types.md#length)
| Previous margin, used to reveal a small part of the previous item.
Default value: **0**
**NOTE**
This attribute is available only when **SwiperDisplayMode** is set to **STRETCH**.
When the main axis runs horizontally and either the next margin or previous margin is greater than the calculated width of the child component, neither the next margin nor previous margin is displayed.
When the main axis runs vertically and either the next margin or previous margin is greater than the calculated height of the child component, neither the next margin nor previous margin is displayed.| ## SwiperDisplayMode @@ -135,7 +135,7 @@ Describes the left and right arrow attributes. | Name | Type | Mandatory. | Description | | ---------------- | ---------------------------------------- | ---- | ---------------------------------------- | | isShowBackground | boolean | No | Whether to show the background for the arrow.
Default value: **false** | -| isSidebarMiddle | boolean | No | Whether the arrow is shown on either side of the navigation point indicator.
Default value: **false** (the arrow is shown on either side of the navigation point indicator) | +| isSidebarMiddle | boolean | No | Whether the arrow is shown on either side of the navigation point indicator.
Default value: **false** (the arrow is shown on either side of the navigation point indicator)| | backgroundSize | [Length](ts-types.md#length) | No | Size of the background.
On both sides of the navigation point indicator:
Default value: **24vp**
On both sides of the component:
Default value: **32vp**
This parameter cannot be set in percentage.| | backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the background.
On both sides of the navigation point indicator:
Default value: **'\#19182431'**
On both sides of the component:
Default value: **'\#00000000'**| | arrowSize | [Length](ts-types.md#length) | No | Size of the arrow.
On both sides of the navigation point indicator:
Default value: **18vp**
On both sides of the component:
Default value: **24vp**
**NOTE**
If **isShowBackground** is set to **true**, the value of **arrowSize** is 3/4 of the value of **backgroundSize**.
This parameter cannot be set in percentage.| diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md index abf39f4dc607abdb37dedea6ed2407e22fb9f94c..3ed00a2c45e66d172859c42d18b540df2b5929bd 100644 --- a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md +++ b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md @@ -22,7 +22,7 @@ Defines the transition effect by using the provided APIs, as listed below. | opacity | number | Yes| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.
Value range: [0, 1]
**NOTE**
A value less than 0 or greater than 1 evaluates to the value **1**.| | translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | Yes| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
-**x**: distance to translate along the x-axis.
-**y**: distance to translate along the y-axis.
-**z**: distance to translate along the z-axis.| | scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | Yes| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: scale factor along the x-axis.
- **y**: scale factor along the y-axis.
- **z**: scale factor along the z-axis.
- **centerX** and **centerY**: scale center point. The default values are both **"50%"**, indicating that the center point of the page.
- If the center point is (0, 0), it refers to the upper left corner of the component.| -| rotate | {
x?: number,
y?: number,
z?: number,
angle: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | Yes| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: X-component of the rotation vector.
- **y**: Y-component of the rotation vector.
- **z**: Z-component of the rotation vector.
- **centerX** and **centerY**: rotation center point. The default values are both **"50%"**, indicating that the center point of the page.
- If the center point is (0, 0), it refers to the upper left corner of the component.| +| rotate | {
x?: number,
y?: number,
z?: number,
angle: number \| string,
centerX?: number \| string,
centerY?: number \| string,
centerZ?: number,
perspective?: number
} | Yes| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: X-component of the rotation vector.
- **y**: Y-component of the rotation vector.
- **z**: Z-component of the rotation vector.
- **centerX** and **centerY**: rotation center point. The default values are both **"50%"**, indicating that the center point of the page.
- If the center point is (0, 0), it refers to the upper left corner of the component.
- **centerZ**: z-axis anchor point, that is, the z-component of the 3D rotation center point. The default value is **0**.
- **perspective**: distance from the user to the z=0 plane. The default value is **0**.| | move | [TransitionEdge](ts-appendix-enums.md#transitionedge10) | Yes| Slide-in and slide-out of the component from the screen edge during transition. It is essentially a translation effect, which is the value of the start point of insertion and the end point of deletion.| | asymmetric | appear: TransitionEffect,
disappear: TransitionEffect
| Yes| Asymmetric transition effect.
The first parameter indicates the transition effect for appearance, and the second parameter indicates the transition effect for disappearance.
If the **asymmetric** function is not used for **TransitionEffect**, the transition effect takes effect for both appearance and disappearance of the component.| | combine | TransitionEffect | No| Combination of transition effects.| 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 dc70be06327ffc45da2153ff8e7b0a3445bae16f..e5862f03ab1d48fcfea40b231da79894efc22a6e 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,6 +10,7 @@ You can set the background for a component. | Name| Type| Description| | -------- | -------- | -------- | +| background10+ | builder: [CustomBuilder](ts-types.md#custombuilder8),
options?: {align?:[Alignment](ts-appendix-enums.md#alignment)} | Background color of the component.
**builder**: custom background.
**align**: alignment mode between the custom background and the component.
If **background**, **backgroundColor**, and **backgroundImage** are set at the same time, they will all take effect, with **background** at the top layer.| | 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 or a Base64 encoded image. SVG images are not supported.
**repeat**: whether the background image is repeated. By default, the background image is not repeated. If the set image has a transparent background and **backgroundColor** is set, the image is overlaid on the background color.
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.
The value range of **width** and **height** is [0, +∞).
Default value: **ImageSize.Auto**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 evaluates to the value **0**. If **height** is set but **width** is not, the image width is adjusted based on the original aspect ratio of the image.| @@ -122,3 +123,35 @@ struct BackgroundBlurStyleDemo { ``` ![en-us_image_background_blur_style](figures/en-us_image_background_blur_style.png) + +### Example 3 + +```ts +// xxx.ets +@Entry +@Component +struct BackgroundExample { + @Builder renderBackground() { + Column() { + Progress({value : 50}) + } + } + + build() { + Column() { + Text("content") + .width(100) + .height(40) + .fontColor("#FFF") + .position({x:50, y:80}) + .textAlign(TextAlign.Center) + .backgroundColor(Color.Green) + } + .width(200).height(200) + .background(this.renderBackground) + .backgroundColor(Color.Gray) + } +} +``` + +![en-us_image_background](figures/en-us_image_background.png) diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md index a7b7b9f2d66ad0e6ede1a742cb262de2c27d6307..70097ad3815bc25cb0a14beb4595da46c5d924cb 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md @@ -56,6 +56,9 @@ You can bind a popup to a component, specifying its content, interaction logic, | offset10+ | [Position](ts-types.md#position8) | No | Offset of the popup relative to the display position specified by **placement**.
**NOTE**
This parameter cannot be set in percentage.| ## Example + +### Example 1 + ```ts // xxx.ets @Entry @@ -133,3 +136,85 @@ struct PopupExample { ``` ![figures/popup.gif](figures/popup.gif) + +### Example 2 + +```ts +// xxx.ets +@Entry +@Component +struct PopupExample { + @State handlePopup: boolean = false + + build() { + Column() { + Button('PopupOptions') + .onClick(() => { + this.handlePopup = !this.handlePopup + }) + .bindPopup(this.handlePopup, { + message: 'This is a popup with PopupOptions', + messageOptions: { + textColor: Color.Red, + font: { + size: '14vp', + style: FontStyle.Italic, + weight: FontWeight.Bolder + } + }, + placement: Placement.Bottom, + enableArrow: false, + targetSpace: '15vp', + onStateChange: (e) => { + console.info(JSON.stringify(e.isVisible)) + if (!e.isVisible) { + this.handlePopup = false + } + } + }) + }.margin(20) + } +} +``` + +![](figures/popup_2.png) + +### Example 3 + +```ts +// xxx.ets +@Entry +@Component +struct PopupExample { + @State customPopup: boolean = false + + // Popup builder + @Builder popupBuilder() { + Row() { + Text('Custom Popup Message').fontSize(10) + }.height(50).padding(5) + } + + build() { + Column() { + // CustomPopupOptions for setting the popup + Button('CustomPopupOptions') + .onClick(() => { + this.customPopup = !this.customPopup + }) + .bindPopup(this.customPopup, { + builder: this.popupBuilder, + targetSpace: '15vp', + enableArrow: false, + onStateChange: (e) => { + if (!e.isVisible) { + this.customPopup = false + } + } + }) + }.margin(20) + } +} +``` + +![](figures/popup_3.png) 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 276ed2eb01104d3215bde8e1a0de4ecf08037bd7..490f0212e1b33abb381fdd70b289c49f451de93d 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,7 +11,7 @@ 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
} | How the component rotates in the coordinate system (as shown below) with the upper left corner of the component as the coordinate origin. (x, y, z) specifies a vector as the axis of rotation.
- **angle**: rotation angle. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The value can be of the string type, for example, **'90deg'**.
- **centerX** and **centerY** are used to set the center of rotation.
The axis and center of rotation are set based on the coordinate system, which remains where it is when the component is moved.
Default value:
{
x: 0,
y: 0,
z: 0,
centerX: '50%',
centerY: '50%'
}
![coordinates](figures/coordinates.png)
Since API version 9, this API is supported in ArkTS widgets.| +| rotate | {
x?: number,
y?: number,
z?: number,
angle: number \| string,
centerX?: number \| string,
centerY?: number \| string
centerZ10+?: number
perspective10+?: number
} | How the component rotates in the coordinate system (as shown below) with the upper left corner of the component as the coordinate origin. (x, y, z) specifies a vector as the axis of rotation.
- **angle**: rotation angle. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The value can be of the string type, for example, **'90deg'**.
- **centerX** and **centerY** are used to set the center of rotation.
- **centerZ**: z-axis anchor point, that is, the z-component of the 3D rotation center point.
- **perspective**: distance from the user to the z=0 plane.
The axis and center of rotation are set based on the coordinate system, which remains where it is when the component is moved.
Default value:
{
x: 0,
y: 0,
z: 0,
centerX: '50%',
centerY: '50%'
centerZ: 0,
perspective: 0
}
![coordinates](figures/coordinates.png)
Since API version 9, this API is supported in ArkTS widgets.
Since API version 10, **CenterZ** and **perspective** are supported in ArkTS widgets.| | translate | {
x?: number \| string,
y?: number \| string,
z? : number \| string
} | How the component is translated in the coordinate system (as shown below) with the upper left corner of the component as the coordinate origin. Values of **x**, **y**, and **z** indicate the translation distance along the respective axis. A positive value indicates a forward movement towards the respective axis, and a negative value indicates a backward movement towards the respective axis. The translation distance can be a number or a string (for example, **'10px'** or **'10%'**).
Default value:
{
x: 0,
y: 0,
z: 0
}
![coordinates](figures/coordinates.png)
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. |