diff --git a/en/application-dev/reference/apis/js-apis-notification.md b/en/application-dev/reference/apis/js-apis-notification.md index d3756234ba871baa90c70f6e48b6a015f0f50155..1305ce8f886430d5797e4e3654d7791d710068fe 100644 --- a/en/application-dev/reference/apis/js-apis-notification.md +++ b/en/application-dev/reference/apis/js-apis-notification.md @@ -3057,7 +3057,7 @@ Notification.subscribe(subscriber, subscribeCallback); | desc | Yes | Yes | string | No | Notification slot description. | | badgeFlag | Yes | Yes | boolean | No | Whether to display the badge. | | bypassDnd | Yes | Yes | boolean | No | Whether to bypass the DND mode in the system. | -| lockscreenVisibility | Yes | Yes | boolean | No | Mode for displaying the notification on the lock screen. | +| lockscreenVisibility | Yes | Yes | number | No | Mode for displaying the notification on the lock screen. | | vibrationEnabled | Yes | Yes | boolean | No | Whether vibration is supported for the notification. | | sound | Yes | Yes | string | No | Notification alert tone. | | lightEnabled | Yes | Yes | boolean | No | Whether the indicator blinks for the notification. | diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md index 3286784c4ce66c860be6ba6b2e824048d769b4a1..cf29ae5aa813734fdcbf648860938784f40646c6 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md @@ -35,33 +35,27 @@ Obtains an image from the specified source for subsequent rendering and display. **Parameters** -| Name| Type | Mandatory| Default Value| Description | -| ------ | ------------------------------------------------------------ | ---- | ------ | ------------------------------------------------------------ | -| src | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](../../ui/ts-types.md) | Yes | - | Image source. Both local and online images are supported.
When using resources referenced using a relative path, for example, `Image("common/test.jpg")`, the **\** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.
\- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.
\- Base64 strings are supported. The value format is `data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, where `[base64 data]` is a Base64 string.
\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability. | +| Name | Type | Mandatory | Default Value | Description | +| ---- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | +| src | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](/ts-types.md#resource-type) | Yes | - | Image source. Both local and online images are supported.
When using resources referenced using a relative path, for example, `Image("common/test.jpg")`, the **\** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.
- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.
\- Base64 strings are supported. \ The value format is `data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, where `[base64 data]` is a Base64 string.
\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability.| ## Attributes In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. -| Name | Type | Default Value | Description | -| --------------------- | ---------------------------------------- | ------------------------ | ---------------------------------------- | -| alt | string \| [Resource](../../ui/ts-types.md) | - | Placeholder image displayed during loading. Both local and Internet URIs are supported. | -| objectFit | ImageFit | Cover | Image scale type. | -| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | NoRepeat | Whether the image is repeated.
**NOTE**
This attribute is not applicable to SVG images. | -| interpolation | ImageInterpolation | None | Interpolation effect of the image. This attribute is valid only when the image is zoomed in.
**NOTE**
This attribute is not applicable to SVG images or **PixelMap** objects. | -| renderMode | ImageRenderMode | Original | Rendering mode of the image.
**NOTE**
This attribute is not applicable to SVG images. | +| Name | Type | Default Value | Description | +| --------------------- | ------------------------------------------------------- | ------------------------ | ------------------------------------------------------------ | +| alt | string \| [Resource](ts-types.md#resource-type) | - | Placeholder image displayed during loading. Both local and Internet URIs are supported. | +| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Cover | Image scale type. | +| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | NoRepeat | Whether the image is repeated.
**NOTE**
This attribute is not applicable to SVG images. | +| interpolation | ImageInterpolation | None | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.
**NOTE**
> This attribute is not applicable to SVG images.
> This attribute is not applicable to **PixelMap** objects. | +| renderMode | ImageRenderMode | Original | Rendering mode of the image.
**NOTE**
This attribute is not applicable to SVG images. | | sourceSize | {
width: number,
height: number
} | - | Decoding size of the image. The original image is decoded into an image of the specified size, in px.
**NOTE**
This attribute is not applicable to **PixelMap** objects. | -| syncLoad8+ | boolean | false | Whether to load images synchronously. By default, images are loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed. | - -## ImageFit - -| Name | Description | -| --------- | -------------------------------- | -| Cover | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries. | -| Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries. | -| Fill | The image is scaled to fill the display area, and its aspect ratio is not retained. | -| None | The image is displayed in its original size. Generally, this enum is used together with the **objectRepeat** attribute.| -| ScaleDown | The image is displayed with its aspect ratio retained, in a size smaller than or equal to the original size. | +| matchTextDirection | boolean | false | Whether to display the image in the system language direction. When this parameter is set to true, the image is horizontally flipped in the right-to-left (RTL) language context.| +| fitOriginalSize | boolean | true | Whether to fit the component to the original size of the image source when the component size is not set.| +| fillColor | [ResourceColor](ts-types.md#resourcecolor8) | - | Fill color. This parameter is valid only for SVG images. Once set, the fill color will replace that of the SVG image.| +| autoResize | boolean | true | Whether to resize the image source used for drawing based on the size of the display area during image decoding. This resizing can help reduce the memory usage.| +| syncLoad8+ | boolean | false | Whether to load images synchronously. By default, images are loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed. | ## ImageInterpolation @@ -82,11 +76,11 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ## Events -| Name | Description | -| ---------------------------------------- | ---------------------------------------- | -| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,
componentHeight: number, loadingStatus: number }) => void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.
- **width**: width of the image, in pixels.
- **height**: height of the image, in pixels.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
- **loadingStatus**: image loading status.
| -| onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void) | Triggered when an exception occurs during image loading.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
| -| onFinish(event: () => void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered.| +| Name | Description | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,
componentHeight: number, loadingStatus: number }) => void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.
- **width**: width of the image, in pixels.
- **height**: height of the image, in pixels.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
- **loadingStatus**: image loading status. | +| onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void) | Triggered when an exception occurs during image loading.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels. | +| onFinish(event: () => void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered. | ## Example @@ -179,12 +173,12 @@ struct ImageExample2 { .border({ width: 1 }).borderStyle(BorderStyle.Dashed) .overlay('Template', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) } - + Text('alt').fontSize(12).fontColor(0xcccccc).width('96%').height(30) Image('') .alt($r('app.media.Image_none')) .width(100).height(100).border({ width: 1 }).borderStyle(BorderStyle.Dashed) - + Text('sourceSize').fontSize(12).fontColor(0xcccccc).width('96%') Row({ space: 50 }) { Image($r('app.media.img_example')) @@ -204,7 +198,7 @@ struct ImageExample2 { .border({ width: 1 }).borderStyle(BorderStyle.Dashed) .overlay('w:200 h:200', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) } - + Text('objectRepeat').fontSize(12).fontColor(0xcccccc).width('96%').height(30) Row({ space: 5 }) { Image($r('app.media.ic_health_heart')) 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 43907b4096dc2a0eb3c524b33a489bfd8eed1689..e39d1458fbab496546f189571ab6f9f3cb3d624c 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 @@ -4,8 +4,7 @@ > **NOTE** > -> - The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. -> - The APIs provided by this module are system APIs. +> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. ## Required Permissions @@ -27,7 +26,7 @@ None getInspectorByKey(id: string): string -Obtains all attributes of the component with the specified ID, excluding the information about child components. +Obtains all attributes of the component with the specified ID, excluding the information about child components. This is a system API. - Parameters | Name | Type | Mandatory | Default Value | Description | @@ -43,7 +42,7 @@ Obtains all attributes of the component with the specified ID, excluding the inf getInspectorTree(): string -Obtains the component tree and component attributes. +Obtains the component tree and component attributes. This is a system API. - Return value @@ -55,7 +54,7 @@ Obtains the component tree and component attributes. sendEventByKey(id: string, action: number, params: string): boolean -Sends an event to the component with the specified ID. +Sends an event to the component with the specified ID. This is a system API. - Parameters | Name | Type | Mandatory | Default Value | Description | @@ -73,7 +72,7 @@ Sends an event to the component with the specified ID. sendTouchEvent(event: TouchObject): boolean -Sends a touch event. +Sends a touch event. This is a system API. - Parameters @@ -91,7 +90,7 @@ Sends a touch event. sendKeyEvent(event: KeyEvent): boolean -Sends a key event. +Sends a key event. This is a system API. - Parameters @@ -109,7 +108,7 @@ Sends a key event. sendMouseEvent(event: MouseEvent): boolean -Sends a mouse event. +Sends a mouse event. This is a system API. - Parameters diff --git a/en/application-dev/ui/ts-component-based-builder.md b/en/application-dev/ui/ts-component-based-builder.md index a07b244ffdc2bd9105102058e6881b14289fdf34..d626bde6074c5e3db373a00f3a78bf6e554cf46f 100644 --- a/en/application-dev/ui/ts-component-based-builder.md +++ b/en/application-dev/ui/ts-component-based-builder.md @@ -4,16 +4,17 @@ The **@Builder** decorated method is used to define the declarative UI description of a component and quickly generate multiple layouts in a custom component. The functionality and syntax of the **@Builder** decorator are the same as those of the [build Function](ts-function-build.md). -``` +```ts +// xxx.ets @Entry @Component struct CompA { - size : number = 100; + size1 : number = 100; @Builder SquareText(label: string) { Text(label) - .width(1 * this.size) - .height(1 * this.size) + .width(1 * this.size1) + .height(1 * this.size1) } @Builder RowOfSquareTexts(label1: string, label2: string) { @@ -21,8 +22,8 @@ struct CompA { this.SquareText(label1) this.SquareText(label2) } - .width(2 * this.size) - .height(1 * this.size) + .width(2 * this.size1) + .height(1 * this.size1) } build() { @@ -32,12 +33,12 @@ struct CompA { this.SquareText("B") // or as long as tsc is used } - .width(2 * this.size) - .height(1 * this.size) + .width(2 * this.size1) + .height(1 * this.size1) this.RowOfSquareTexts("C", "D") } - .width(2 * this.size) - .height(2 * this.size) + .width(2 * this.size1) + .height(2 * this.size1) } } ``` @@ -51,7 +52,8 @@ In certain circumstances, you may need to add a specific function, such as a cli ### Component Initialization Through Parameters When initializing a custom component through parameters, assign a **@Builder** decorated method to the **@BuilderParam** decorated attribute — **content**, and call the value of **content** in the custom component. If no parameter is passed when assigning a value to the **@BuilderParam** decorated attribute (for example, `content: this.specificParam`), define the type of the attribute as a function without a return value (for example, `@BuilderParam content: () => void`). If any parameter is passed when assigning a value to the **@BuilderParam** decorated attribute (for example, `callContent: this.specificParam1("111")`), define the type of the attribute as `any` (for example,`@BuilderParam callContent: any;`). -``` +```ts +// xxx.ets @Component struct CustomContainer { header: string = ""; @@ -100,7 +102,8 @@ struct CustomContainerUser { In a custom component, use the **@BuilderParam** decorated attribute to receive a trailing closure. When the custom component is initialized, the component name is followed by a pair of braces ({}) to form a trailing closure (`CustomComponent(){}`). You can consider a trailing closure as a container and add content to it. For example, you can add a component (`{Column(){Text("content")}`) to a trailing closure. The syntax of the closure is the same as that of [build](../ui/ts-function-build.md). In this scenario, the custom component has one and only one **@BuilderParam** decorated attribute. Example: Add a **\** component and a click event to the closure, and call the **specificParam** method decorated by **@Builder** in the new **\** component. After the **\** component is clicked, the value of the component's `header` attribute will change to `changeHeader`. In addition, when the component is initialized, the content of the trailing closure will be assigned to the `closer` attribute decorated by **@BuilderParam**. -``` +```ts +// xxx.ets @Component struct CustomContainer { header: string = "";