diff --git a/en/application-dev/reference/arkui-ts/figures/NestedScroll.gif b/en/application-dev/reference/arkui-ts/figures/NestedScroll.gif new file mode 100644 index 0000000000000000000000000000000000000000..4d8b706114c0bca1218f13085c7890d46c96ab28 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/NestedScroll.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/borderImage.png b/en/application-dev/reference/arkui-ts/figures/borderImage.png new file mode 100644 index 0000000000000000000000000000000000000000..22285e0910e3c447036d2144194a2e4301c2df6f Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/borderImage.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-text.md b/en/application-dev/reference/arkui-ts/ts-basic-components-text.md index 2758e99f0cdba7ed1a7722cd10a4ed6c68438466..64c67c8204dfbe44bab98395ad6d6a9e1824548b 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-text.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-text.md @@ -1,15 +1,15 @@ # Text -> **NOTE**
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - The **\** component is used to display a piece of textual information. +> **NOTE** +> +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. + ## Required Permissions -N/A +None ## Child Components @@ -32,8 +32,8 @@ Text(content?: string) | Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | | textAlign | TextAlign | TextAlign.Start | Text alignment mode of multiple lines of text.| -| textOverflow | {overflow: TextOverflow} | {overflow: TextOverflow.Clip} | Display mode when the text is too long.
**NOTE**
Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters. | -| maxLines | number | Infinity | Maximum number of lines in the text.| +| textOverflow | {overflow: TextOverflow} | {overflow: TextOverflow.Clip} | Display mode when the text is too long.
**NOTE**

Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters.
This attribute must be used with `maxLines` to take effect.| +| maxLines | number | Infinity | Maximum number of lines in the text.
**NOTE**

By default, text is automatically folded. If this parameter is specified, the text does not exceed the specified number of lines. If there is extra text, you can use `textOverflow` to specify the truncation mode.| | lineHeight | Length | - | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.| | decoration | {
type: TextDecorationType,
color?: Color
} | {
type: TextDecorationType.None,
color: Color.Black
} | Style and color of the text decorative line.| | baselineOffset | Length | - | Offset of the text baseline.| @@ -78,7 +78,8 @@ Text(content?: string) | LocalDevice | Intra-device copy and paste is allowed.| | CrossDevice | Cross-device copy and paste is allowed.| -> **NOTE**
+> **NOTE** +> > If the **\** component contains both the text and the **\** child component, only the content in **\** is displayed. diff --git a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index 082bfb57ec7ecd2d964c3e9cab1a75715d02c58a..9afabdccf6ecb5dec252b07ee2e18d8448f085dc 100644 --- a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -1,12 +1,11 @@ # CanvasRenderingContext2D -> **NOTE**
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. - - The **\** component is used to draw rectangles, text, images, and other objects on a canvas. +> **NOTE** +> +> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. ## APIs @@ -20,14 +19,14 @@ CanvasRenderingContext2D(setting: RenderingContextSetting) ### RenderingContextSettings -RenderingContextSettings(antialias?: bool) +RenderingContextSettings(antialias?: boolean) Configures the settings of a **CanvasRenderingContext2D** object, including whether to enable antialiasing. - Parameters | Name | Type | Mandatory | Default Value | Description | | --------- | ---- | --------- | ------------- | -------------------------------- | - | antialias | bool | No | false | Whether antialiasing is enabled. | + | antialias | boolean | No | false | Whether antialiasing is enabled. | ## Attributes @@ -259,7 +258,7 @@ struct MiterLimit { // xxx.ets @Entry @Component -struct Font { +struct Fonts { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) @@ -1282,7 +1281,8 @@ Draws an arc on the canvas. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct Arc { @@ -1854,7 +1854,7 @@ Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created wi getImageData(sx: number, sy: number, sw: number, sh: number): Object -Creates an **[ImageData](ts-components-canvas-imagebitmap.md)** object with pixels in the specified area on the canvas. +Obtains the **[ImageData](ts-components-canvas-imagebitmap.md)** object created with the pixels within the specified area on the canvas. - Parameters | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | --------- | ------------- | ---------------------------------------- | diff --git a/en/application-dev/reference/arkui-ts/ts-combined-gestures.md b/en/application-dev/reference/arkui-ts/ts-combined-gestures.md index 788bd868acaef38dc1123f93d78d3083ed8547aa..ea867c6e7231606486d7e84c2e8be486ca8e46d0 100644 --- a/en/application-dev/reference/arkui-ts/ts-combined-gestures.md +++ b/en/application-dev/reference/arkui-ts/ts-combined-gestures.md @@ -1,7 +1,9 @@ # Combined Gestures +Continuous recognition, parallel recognition, and exclusive recognition are supported for a group of gestures. -> **NOTE**
+> **NOTE** +> > Combined gestures are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. @@ -21,37 +23,38 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[]) | gesture | [TapGesture](ts-basic-gestures-tapgesture.md)
\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)
\| [PanGesture](ts-basic-gestures-pangesture.md)
\| [PinchGesture](ts-basic-gestures-pinchgesture.md)
\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes | - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination. | - GestureMode enums - | Name | Description | + | Name | Description | | -------- | -------- | - | Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized. | - | Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other. | - | Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends. | + | Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized. | + | Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other. | + | Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends. | ## Events -| Name | Description | +| Name | Description | | -------- | -------- | -| onCancel(event: () => void) | Callback for the GestureMode.Sequence cancellation event. | +| onCancel(event: () => void) | Callback for the GestureMode.Sequence cancellation event. | ## Example -``` +```ts +// xxx.ets @Entry @Component struct GestureGroupExample { @State count: number = 0 @State offsetX: number = 0 @State offsetY: number = 0 - @State borderStyle: BorderStyle = BorderStyle.Solid + @State borderStyles: BorderStyle = BorderStyle.Solid build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) }.translate({ x: this.offsetX, y: this.offsetY, z: 5 }) - .height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyle }) + .height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyles }) .gesture( GestureGroup(GestureMode.Sequence, LongPressGesture({ repeat: true }) @@ -64,7 +67,7 @@ struct GestureGroupExample { }), PanGesture({}) .onActionStart(() => { - this.borderStyle = BorderStyle.Dashed + this.borderStyles = BorderStyle.Dashed console.log('pan start') }) .onActionUpdate((event: GestureEvent) => { diff --git a/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md b/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md index 15e27ccafbd2d36951069f330363fbed916e0839..cc4c9cbcc9238e74d7ee808052d1be96140aad72 100644 --- a/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md +++ b/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md @@ -1,79 +1,77 @@ # Page Transition - -> **NOTE**
-> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - Customize the page transition animations by configuring the page entrance and exit components in the global **pageTransition** method. -## APIs +> **NOTE** +> +> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. + -| Name | Parameter | Description | -| -------- | -------- | -------- | -| PageTransitionEnter | Object | Page entrance component, which is used to customize the entrance effect of the current page. For details, see animation parameters. | -| PageTransitionExit | Object | Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters. | +| Name | Parameter | Description | +| ------------------- | ------ | ------------------------------- | +| PageTransitionEnter | Object | Page entrance component, which is used to customize the entrance effect of the current page. For details, see animation parameters.| +| PageTransitionExit | Object | Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters.| - Animation parameters - | Name | Type | Default Value | Mandatory | Description | - | -------- | -------- | -------- | -------- | -------- | - | type | RouteType | - | No | If this parameter is not set, the reverse playback effect as pop switches to push is used. | - | duration | number | 1000 | No | Animation duration, in ms. | - | curve | Curve \| Curves | Linear | No | Animation curve. For details about the valid values, see **Curve enums**. | - | delay | number | 0 | No | Animation delay, in ms. Delayed animation is disabled by default. | + | Name | Type | Default Value | Mandatory | Description | + | -------- | ------------------------- | ------ | ---- | ---------------------------------------- | + | type | RouteType | - | No | Animation type. If this parameter is not set, the reverse playback effect as **pop** switches to **push** is used. | + | duration | number | 1000 | No | Animation duration, in ms. | + | curve | Curve \| Curves | Linear | No | Animation curve. For details about the valid values, see [Curve](ts-animatorproperty.md).| + | delay | number | 0 | No | Animation delay, in ms. Delayed animation is disabled by default. | - RouteType enums - | Name | Description | - | -------- | -------- | - | Pop | When page A jumps to page B, page A is Exit+Push, and page B is Enter+Push. | - | Push | When page B returns to page A, page A is Enter+Pop, and page B is Exit+Pop. | + | Name| Description | + | ---- | ---------------- | + | Pop | Redirects to a specified page.| + | Push | Redirects to the next page.| ## Attributes -The **PageTransitionEnter** and **PageTransitionExit** components support the following attributes: +The **PageTransitionEnter** and **PageTransitionExit** parameters support the following attributes: -| Name | Type | Default Value | Mandatory | Description | -| -------- | -------- | -------- | -------- | -------- | -| slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details about the valid values, see **SlideEffect enums**. | -| translate | {
x? : number,
y? : number,
z? : number
} | - | No | Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with **slide**, the latter takes effect by default. | -| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number,
centerY? : number
} | - | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit. | -| opacity | number | 1 | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit. | +| Name | Type | Default Value | Mandatory | Description | +| --------- | ---------------------------------------- | ----------------- | ---- | ---------------------------------------- | +| slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details about the valid values, see **SlideEffect** enums. | +| translate | {
x? : number,
y? : number,
z? : number
} | - | No | Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with **slide**, the latter takes effect by default.| +| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number,
centerY? : number
} | - | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit. | +| opacity | number | 1 | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit. | - SlideEffect enums - | Name | Description | - | -------- | -------- | - | Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left. | - | Right | When set to Enter, slides in from the right. When set to Exit, slides out to the right. | - | Top | When set to Enter, slides in from the top. When set to Exit, slides out to the top. | - | Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom. | + | Name | Description | + | ------ | ------------------------- | + | Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left.| + | Right | When set to Enter, slides in from the right. When set to Exit, slides out to the right.| + | Top | When set to Enter, slides in from the top. When set to Exit, slides out to the top.| + | Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom.| ## Events -The PageTransitionEnter and PageTransitionExit components support the following events: +The **PageTransitionEnter** and **PageTransitionExit** parameters support the following events: -| Event | Description | -| -------- | -------- | -| onEnter(type: RouteType, progress: number) => void | Callback invoked when page entrance occurs. The input parameter is the normalized progress of the current entrance animation. The value range is 0–1. | -| onExit(type: RouteType, progress: number) => void | Callback invoked when page exit occurs. The input parameter is the normalized progress of the current exit animation. The value range is 0–1. | +| Name | Description | +| ---------------------------------------- | ----------------------------------- | +| onEnter(type: RouteType, progress: number) => void | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1.| +| onExit(type: RouteType, progress: number) => void | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1.| ## Example Customization method 1: The entrance animation of the current page is configured as fade-in, and the exit animation is configured as zoom-out. - -``` +```ts // index.ets @Entry @Component struct PageTransitionExample1 { - @State scale: number = 1 - @State opacity: number = 1 + @State scale1: number = 1 + @State opacity1: number = 1 @State active: boolean = false + build() { Column() { Navigator({ target: 'pages/page1', type: NavigationType.Push }) { @@ -82,52 +80,52 @@ struct PageTransitionExample1 { .onClick(() => { this.active = true }) - }.scale({ x: this.scale }).opacity(this.opacity) + }.scale({ x: this.scale1 }).opacity(this.opacity1) } // Customization method 1: Customize the transition process. pageTransition() { PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) .onEnter((type: RouteType, progress: number) => { - this.scale = 1 - this.opacity = progress + this.scale1 = 1 + this.opacity1 = progress }) // The onEnter callback is triggered frame by frame during the entrance process. The input parameter is the normalized progress of the animation (0% to 100%). PageTransitionExit({ duration: 1500, curve: Curve.Ease }) .onExit((type: RouteType, progress: number) => { - this.scale = 1 - progress - this.opacity = 1 + this.scale1 = 1 - progress + this.opacity1 = 1 }) // The onExit callback is triggered frame by frame during the exit process. The input parameter is the normalized progress of the animation (0% to 100%). } } ``` - -``` +```ts // page1.ets @Entry @Component struct AExample { - @State scale: number = 1 - @State opacity: number = 1 + @State scale2: number = 1 + @State opacity2: number = 1 @State active: boolean = false + build() { Column() { Navigator({ target: 'pages/index' ,type: NavigationType.Push}) { Image($r('app.media.bg2')).width("100%").height("100%") } - }.height("100%").width("100%").scale({ x: this.scale }).opacity(this.opacity) + }.height("100%").width("100%").scale({ x: this.scale2 }).opacity(this.opacity2) } // Customization method 1: Customize the transition process. pageTransition() { PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) .onEnter((type: RouteType, progress: number) => { - this.scale = 1 - this.opacity = progress + this.scale2 = 1 + this.opacity2 = progress }) // The onEnter callback is triggered frame by frame during the entrance process. The input parameter is the normalized progress of the animation (0% to 100%). PageTransitionExit({ duration: 1500, curve: Curve.Ease }) .onExit((type: RouteType, progress: number) => { - this.scale = 1 - progress - this.opacity = 1 - }) // The onExit callback is triggered frame by frame during the exi process. The input parameter is the normalized progress of the animation (0% to 100%). + this.scale2 = 1 - progress + this.opacity2 = 1 + }) // The onExit callback is triggered frame by frame during the exit process. The input parameter is the normalized progress of the animation (0% to 100%). } } ``` @@ -136,14 +134,13 @@ struct AExample { Customization method 2: The entrance animation of the current page is configured to slide in from the left, and the exit animation is configured to zoom out with opacity change. - -``` +```ts // index.ets @Entry @Component struct PageTransitionExample { - @State scale: number = 1 - @State opacity: number = 1 + @State scale1: number = 1 + @State opacity1: number = 1 @State active: boolean = false build() { @@ -154,7 +151,7 @@ struct PageTransitionExample { .onClick(() => { this.active = true }) - }.scale({ x: this.scale }).opacity(this.opacity) + }.scale({ x: this.scale1 }).opacity(this.opacity1) } // Customization method 2: Use the default effects provided by the system, such as translation, scaling, and opacity. @@ -168,14 +165,13 @@ struct PageTransitionExample { } ``` - -``` +```ts // page1.ets @Entry @Component struct PageTransitionExample1 { - @State scale: number = 1 - @State opacity: number = 1 + @State scale2: number = 1 + @State opacity2: number = 1 @State active: boolean = false build() { @@ -186,7 +182,7 @@ struct PageTransitionExample1 { .onClick(() => { this.active = true }) - }.scale({ x: this.scale }).opacity(this.opacity) + }.scale({ x: this.scale2 }).opacity(this.opacity2) } // Customization method 2: Use the default effects provided by the system, such as translation, scaling, and opacity. 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 99d6a8384c15983023fde9b5de43de530aa678fc..aecb041e8ec1197c89c25a6d79409cd03e47dcab 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 @@ -63,7 +63,7 @@ struct Index { } ``` -![zh-cn_image_borderImage](figures/borderImage.png) +![en-us_image_borderImage](figures/borderImage.png) ```ts diff --git a/en/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md b/en/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md index b9a78d55f5819fd4fdfd70eb2a095dc15d0674f8..079b65ec647557a34f32e87b4a50d2ce95327663 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md @@ -1,7 +1,9 @@ # Component Area Change Event +The area change event is triggered when the component's size, position, or any other attribute that may affect its display area changes. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE** +> > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. @@ -12,20 +14,21 @@ None ## Events - | Name | Bubble Supported | Description | +| Name | Bubble Supported | Description | | -------- | -------- | -------- | -| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | No | Triggered when the component area changes. For details about the **Area** type, see **Area** attributes. | +| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | No | Triggered when the component area changes. For details about the **Area** type, see **Area** attributes. | ## Example -``` +```ts +// xxx.ets @Entry @Component struct AreaExample { @State value: string = 'Text' - @State size: string = '' + @State size1: string = '' build() { Column() { @@ -36,7 +39,7 @@ struct AreaExample { }) .onAreaChange((oldValue: Area, newValue: Area) => { console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) - this.size = JSON.stringify(newValue) + this.size1 = JSON.stringify(newValue) }) Text('new area is: \n' + this.size).margin({ right: 30, left: 30 }) } diff --git a/en/application-dev/ui/ts-basic-components-button.md b/en/application-dev/ui/ts-basic-components-button.md deleted file mode 100644 index 5f7d75d5406fd705e5a0716ff9d94fd3dd73de22..0000000000000000000000000000000000000000 --- a/en/application-dev/ui/ts-basic-components-button.md +++ /dev/null @@ -1,120 +0,0 @@ -# Button - -The **\