From 40eb60e6924342c15e73ad479879b36204ee62e8 Mon Sep 17 00:00:00 2001 From: "ester.zhou" Date: Tue, 27 Jun 2023 20:44:30 +0800 Subject: [PATCH] Update docs (19469) Signed-off-by: ester.zhou --- .../ts-basic-components-xcomponent.md | 50 +++++++++++++------ 1 file changed, 35 insertions(+), 15 deletions(-) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md b/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md index f775992c63..13ec25f929 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md @@ -14,20 +14,39 @@ Since API version 9, child components are supported when **type** is set to **"c ## APIs -XComponent(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}) +**API 1**: XComponent(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}) **Parameters** -| Name | Type | Mandatory | Description | -| ----------- | ---------------------------------------- | ---- | ---------------------------------------- | -| id | string | Yes | Unique ID of the component. The value can contain a maximum of 128 characters. | -| type | string | Yes | Type of the component. The options are as follows:
- **"surface"**: The content of the component is displayed individually, without being combined with that of other components. This option is used for displaying EGL/OpenGL ES and media data.
- **"component"**9+: The component becomes a container where non-UI logic can be executed to dynamically load the display content.| -| libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer. This parameter is valid only when the component type is **"surface"**.| -| controller | [XComponentcontroller](#xcomponentcontroller) | No | Controller bound to the component, which can be used to invoke methods of the component. This parameter is valid only when the component type is **"surface"**.| +| Name | Type | Mandatory| Description | +| ----------- | --------------------------------------------- | ---- | ------------------------------------------------------------ | +| id | string | Yes | Unique ID of the component. The value can contain a maximum of 128 characters. | +| type | string | Yes | Type of the component. The options are as follows:
- **"surface"**: The custom content is displayed individually on the screen. This option is used for displaying EGL/OpenGL ES and media data.
- **"component"**9+: The component becomes a container where non-UI logic can be executed to dynamically load the display content.
Any other value evaluates to **"surface"**.| +| libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer. This parameter is valid only when **type** is **"surface"**.| +| controller | [XComponentcontroller](#xcomponentcontroller) | No | Controller bound to the component, which can be used to invoke methods of the component. This parameter is valid only when the component type is **"surface"**.| + +**API 2**: XComponent(value: {id: string, type: XComponentType, libraryname?: string, controller?: XComponentController})10+ + +**Parameters** + +| Name | Type | Mandatory| Description | +| ----------- | --------------------------------------------- | ---- | ------------------------------------------------------------ | +| id | string | Yes | Unique ID of the component. The value can contain a maximum of 128 characters. | +| type | [XComponentType](#xcomponenttype10) | Yes | Type of the component. | +| libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer. This parameter is valid only when **type** is **SURFACE** or **TEXTURE**.| +| controller | [XComponentcontroller](#xcomponentcontroller) | No | Controller bound to the component, which can be used to invoke methods of the component. This parameter is valid only when **type** is **SURFACE** or **TEXTURE**.| + +## XComponentType10+ + +| Name | Description | +| --------- | ------------------------------------------------------------ | +| SURFACE | The custom content is displayed individually on the screen. This option is used for displaying EGL/OpenGL ES and media data.| +| COMPONENT | The component becomes a container where non-UI logic can be executed to dynamically load the display content.| +| TEXTURE | The custom content of the component is grouped and displayed together with content of the component.| > **NOTE** > -> When **type** is set to **"component"**, the **\** functions as a container, where child components are laid out vertically. +> When **type** is set to **COMPONENT("component")**, the **\** functions as a container, where child components are laid out vertically. > > - Vertical alignment: [FlexAlign](ts-appendix-enums.md#flexalign).Start > - Horizontal alignment: [FlexAlign](ts-appendix-enums.md#flexalign).Center @@ -39,13 +58,14 @@ XComponent(value: {id: string, type: string, libraryname?: string, controller?: > The non-UI logic written internally needs to be encapsulated in one or more functions. ## Attributes -- You can customize the content displayed in the **\**. Among the universal attributes, the [background](./ts-universal-attributes-background.md), [opacity](./ts-universal-attributes-opacity.md), and [image effects](./ts-universal-attributes-image-effect.md) attributes are not supported. -- When **type** is set to **"surface"**, you are advised to use the APIs provided by the EGL/OpenGL ES to set the display content. -- When **type** is set to **"component"**, you are advised to mount child components to set the display content. +- You can customize the content displayed in the **\**. Depending on the **type** settings, the support for the universal attributes [background](./ts-universal-attributes-background.md), [opacity](./ts-universal-attributes-opacity.md), and [image effects](./ts-universal-attributes-image-effect.md) varies: +- When **type** is set to **SURFACE("surface")**, none of these attributes is supported. For configuration, you are advised to use the APIs provided by EGL/OpenGL ES instead. +- When **type** is set to **COMPONENT("component")**, none of these attributes is supported. For configuration, you are advised to mount child components. +- When **type** is set to **TEXTURE**, only [opacity](./ts-universal-attributes-opacity.md) and **backgroundColor** in [background](./ts-universal-attributes-background.md) are supported. For configuration of other attributes, you are advised to use the APIs provided by EGL/OpenGL ES instead. ## Events -The following events are supported only when **type** is set to **"surface"**. The [universal events](ts-universal-events-click.md) and [universal gestures](ts-gesture-settings.md) are not supported. +When **type** is set to **SURFACE("surface")** or **TEXTURE**, the following events are supported. The [universal events](ts-universal-events-click.md) and gestures (ts-gesture-settings.md) are not supported. ### onLoad @@ -79,7 +99,7 @@ xcomponentController: XComponentController = new XComponentController() getXComponentSurfaceId(): string -Obtains the ID of the surface held by the **\**. The ID can be used for @ohos interfaces. For details, see [Camera Management](../apis/js-apis-camera.md). This API works only when **type** of the **\** is set to **"surface"**. +Obtains the ID of the surface held by the **\**, which can then be used for @ohos APIs. For details, see [Camera Management](../apis/js-apis-camera.md). This API works only when **type** of the **\** is set to **SURFACE("surface")** or **TEXTURE**. **Return value** @@ -93,7 +113,7 @@ Obtains the ID of the surface held by the **\**. The ID can be used setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}): void -Sets the width and height of the surface held by the **\**. This API works only when **type** of the **\** is set to **"surface"**. +Sets the width and height of the surface held by the **\**. This API works only when **type** of the **\** is set to **SURFACE("surface")** or **TEXTURE**. **Parameters** @@ -108,7 +128,7 @@ Sets the width and height of the surface held by the **\**. This API getXComponentContext(): Object -Obtains the context of an **\** object. This API works only when **type** of the **\** is set to **"surface"**. +Obtains the context of an **\** object. This API works only when **type** of the **\** is set to **SURFACE("surface")** or **TEXTURE**. **Return value** -- GitLab