diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001250678457.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001250678457.gif index 6b44b6a2adc2528e13e95bc10d2a67874226a63b..96afd9a948c90e22cd52ab4c55218bf97591b3ec 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001250678457.gif and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001250678457.gif differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md b/en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md index d5d79e4e4fbc004715cac5dd92fce24f5a7f9b6d..f2f11f2a9e9aa56cdcdc8cecca1895144c1dd27c 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md @@ -1,55 +1,58 @@ # RichText -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. - The **\** component parses and displays HTML text. +> **NOTE** +> +> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. + ## Required Permissions None ## Child Components -None +Not supported ## APIs -RichText\(content:string\) +RichText(content:string) -- Parameters +**Parameters** - | Name| Type| Mandatory| Default Value| Description| - | -------- | -------- | -------- | -------- | -------- | - | content | string | Yes| - | String in HTML format.| +| Name| Type | Mandatory | Default Value | Description | +| -------- | -------- | -------- | -------- | -------- | +| content | string | Yes| - | Text string in HTML format. | ## Events -| Name| Description| +| Name | Description| | -------- | -------- | -| onStart() => void | Triggered when web page loading starts.| -| onComplete() => void | Triggered when web page loading is completed.| +| onStart(callback: () => void) => void | Triggered when web page loading starts. | +| onComplete(callback: () => void) => void | Triggered when web page loading is completed. | ## Supported Tags -| Name| Description| Example| +| Name | Description | Example | | -------- | -------- | -------- | -| \

--\

| Defines six levels of headings in the HTML document. \

defines the most important heading, and \

defines the least important heading.| \

This is an H1 heading\

\

This is an H2 heading\

| -| \

\

| Defines a paragraph.| \

This is a paragraph\

| -| \
| Inserts a newline character.| \

This is a paragraph\
This is a new paragraph\

| -| \
| Defines a thematic break (such as a shift of topic) on an HTML page and creates a horizontal line.| \

This is a paragraph\

\
\

This is a paragraph\

| -| \
\
| Defines a generic container that is generally used to group block-level elements. It allows you to apply CSS styles to multiple elements at the same time.| \
\

This is the heading in a div element\

\
| -| \\ | Displays text in italic style.| \This is in italic style\ | -| \\ | Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the \ tag where it could be confused with a hyperlink.| \

\This is an underlined paragraph\\

| -| \ | Used to embed CSS within an HTML document.| \ | -| style | Defines the inline style of an element and is placed inside the tag. Use quotation marks (') to separate the styling text and use semicolons (;) to separate styles, for example, **style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'**.| \

This is a heading\

\

This is a paragraph\

| -| \ | Used to embed or reference a client-side script, such as JavaScript.| \ | +| \

--\

| Defines six levels of headings in the HTML document. \

defines the most important heading, and \

defines the least important heading. | \

This is an H1 heading\

\

This is an H2 heading\

| +| \

\

| Defines a paragraph. | \

This is a paragraph\

| +| \
| Inserts a newline character. | \

This is a paragraph\
This is a new paragraph\

| +| \
| Defines a thematic break (such as a shift of topic) on an HTML page and creates a horizontal line. | \

This is a paragraph\

\
\

This is a paragraph\

| +| \
\
| Defines a generic container that is generally used to group block-level elements. It allows you to apply CSS styles to multiple elements at the same time. | \
\

This is the heading in a div element\

\
| +| \\ | Displays text in italic style. | \This is in italic style\ | +| \\ | Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the \ tag where it could be confused with a hyperlink. | \

\This is an underlined paragraph\\

| +| \ | Used to embed CSS within an HTML document. | \ | +| style | Defines the inline style of an element and is placed inside the tag. Use quotation marks (') to separate the styling text and use semicolons (;) to separate styles, for example, **style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'**. | \

This is a heading\

\

This is a paragraph\

| +| \ | Used to embed or reference a client-side script, such as JavaScript. | \ | ## Example -``` +You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer. +```ts +// xxx.ets @Entry @Component struct RichTextExample { 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 3a90aab90084be24746bba23aa9b224b15b2b99f..6e66b0cf9bfd93562d37462ccbd9c21ba427e2cd 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 @@ -1,9 +1,10 @@ # XComponent - > **NOTE**
+ > **NOTE** + > > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. - The **\** can accept and display the EGL/OpenGLES and media data input. +The **\** can accept and display the EGL/OpenGL ES and media data input. ## Required Permissions @@ -15,24 +16,36 @@ ## APIs - XComponent\(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}\) +XComponent\(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}\) - - Name - - | 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 this component is displayed individually, without being combined with that of other components.
- **component**: The content of this component is displayed after having been combined with that of other components. | - | libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer. | - | controller | [XComponentController](#XComponentController) | No | Controller bound to the component, which can be used to invoke methods of the component. | +**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 this component is displayed individually, without being combined with that of other components.
- **component**: The content of this component is displayed after having been combined with that of other components.| +| libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer.| +| controller | [XComponentcontroller](#xcomponentcontroller) | No | Controller bound to the component, which can be used to invoke methods of the component.| ## Events -| Name | Description | -| ------------------------------- | ------------------------ | -| onLoad(context?: object) => void | Triggered when the plug-in is loaded. | -| onDestroy() => void | Triggered when the plug-in is destroyed. | +### onLoad + +onLoad(callback: (event?: object) => void ) + +Triggered when the plug-in is loaded. + +**Parameters** + +| Name | Type | Mandatory | Description | +| ------------- | ------ | ---- | ----------------------- | +| event | object | No | Context of the **\** object. The APIs contained in the context are defined at the C++ layer by developers.| + +### onDestroy + +onDestroy(event: () => void ) + +Triggered when the plug-in is destroyed. ## XComponentController @@ -50,11 +63,13 @@ getXComponentSurfaceId(): string Obtains the ID of the surface held by the **\**. The ID can be used for @ohos interfaces, such as camera-related interfaces. - - Return value +**System API**: This is a system API. + +**Return value** - | Type | Description | - | ------ | --------------------------- | - | string | ID of the surface held by the **\**. | +| Type | Description | +| ------ | ----------------------- | +| string | ID of the surface held by the **\**.| ### setXComponentSurfaceSize @@ -62,12 +77,14 @@ setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}): Sets the width and height of the surface held by the **\**. -- Parameters +**System API**: This is a system API. - | Name | Type | Mandatory | Default Value | Description | - | ------------- | -------- | ---- | ------ | ----------------------------- | - | surfaceWidth | number | Yes | - | Width of the surface held by the **\**. | - | surfaceHeight | number | Yes | - | Height of the surface held by the **\**. | +**Parameters** + +| Name | Type | Mandatory | Description | +| ------------- | ------ | ---- | ----------------------- | +| surfaceWidth | number | Yes | Width of the surface held by the **\**.| +| surfaceHeight | number | Yes | Height of the surface held by the **\**.| ### getXComponentContext @@ -75,16 +92,18 @@ getXComponentContext(): Object Obtains the context of an **\** object. -- Return value +**Return value** - | Type | Description | - | ------ | ------------------------------------------------------------ | - | Object | Context of an **\** object. The APIs contained in the context are defined by developers. | +| Type | Description | +| ------ | ---------------------------------------- | +| Object | Context of the **\** object. The APIs contained in the context are defined by developers.| ## Example Provide a surface-type **\** to support capabilities such as camera preview. +You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer. + ```ts // xxx.ets import camera from '@ohos.multimedia.camera'; 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 9d801b2503cc4225907879d5eba7596c120db3b6..a9d6cad9cc929354c1218cfe2ea37e375c810901 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 @@ -1,7 +1,8 @@ # Popup Control -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE** +> > This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. @@ -17,44 +18,34 @@ None | -------- | -------- | -------- | -------- | | bindPopup | show: boolean,
popup: PopupOptions \| CustomPopupOptions | - | Settings of the popup bound to a component.
**show**: whether to display the popup on the creation page by default. The default value is **false**.
**popup**: parameters of the current popup. | +## PopupOptions + +| Name | Type | Mandatory | Default Value | Description | +| -------- | -------- | -------- | -------- | -------- | +| message | string | Yes | - | Content of the popup message. | +| placementOnTop | boolean | No | false | Whether to display the popup above the component. The default value is **false**. | +| primaryButton | {
value: string,
action: () => void
} | No | - | First button.
**value**: text of the primary button in the popup.
**action**: callback function for clicking the primary button. | +| secondaryButton | {
value: string,
action: () => void
} | No | - | Second button.
**value**: text of the secondary button in the popup.
**action**: callback function for clicking the secondary button. | +| onStateChange | (isVisible: boolean) => void | No | - | Callback for the popup status change event.
**isVisible**: visibility of the popup. | + +## CustomPopupOptions8+ +| Name | Type | Mandatory | Default Value | Description | +| ------------- | ---------------------------------------------- | ---- | ---------------- | ------------------------------------------------------------ | +| builder | () => any | Yes | - | Builder of the tooltip content. | +| placement | [Placement](ts-appendix-enums.md) | No | Placement.Bottom | Preferred position of the tooltip component. If the set position is insufficient for holding the component, it will be automatically adjusted. | +| maskColor | [Color](ts-appendix-enums.md#color) | No | - | Color of the tooltip mask. | +| popupColor | [Color](ts-appendix-enums.md#color) | No | - | Color of the tooltip. | +| enableArrow | boolean | No | true | Whether to display arrows. Arrows are displayed only for tooltips in the up and down directions. | +| autoCancel | boolean | No | true | Whether to automatically close the tooltip when an operation is performed on the page. | +| onStateChange | (isVisible: boolean) => void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. | -- PopupOptions attributes - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | message | string | Yes | - | Content of the popup message. | - | placementOnTop | boolean | No | false | Whether to display the popup above the component. The default value is **false**. | - | primaryButton | {
value: string,
action: () => void
} | No | - | First button.
**value**: text of the primary button in the popup.
**action**: callback function for clicking the primary button. | - | secondaryButton | {
value: string,
action: () => void
} | No | - | Second button.
**value**: text of the secondary button in the popup.
**action**: callback function for clicking the secondary button. | - | onStateChange | (isVisible: boolean) => void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. | - -- CustomPopupOptions8+ - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | builder | () => any | Yes | - | Builder of the tooltip content. | - | placement | Placement | No | Placement.Bottom | Preferred position of the tooltip component. If the set position is insufficient for holding the component, it will be automatically adjusted. | - | maskColor | [Color](../../ui/ts-types.md) | No | - | Color of the tooltip mask. | - | popupColor | [Color](../../ui/ts-types.md) | No | - | Color of the tooltip. | - | enableArrow | boolean | No | true | Whether to display arrows. Arrows are displayed only for tooltips in the up and down directions. | - | autoCancel | boolean | No | true | Whether to automatically close the tooltip when an operation is performed on the page. | - | onStateChange | (isVisible: boolean) => void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. | - -- Placement8+ enums - | Name | Description | - | -------- | -------- | - | Left | The tooltip is on the left of the component. | - | Right | The tooltip is on the right of the component. | - | Top | The tooltip is on the top of the component. | - | Bottom | The tooltip is at the bottom of the component. | - | TopLeft | The tooltip is in the upper left corner of the component. | - | TopRight | The tooltip is in the upper right corner of the component. | - | BottomLeft | The tooltip is in the lower left corner of the component. | - | BottomRight | The tooltip is in the lower right corner of the component. | ## Example -``` +```ts +// xxx.ets @Entry @Component struct PopupExample { @@ -65,7 +56,7 @@ struct PopupExample { @Builder popupBuilder() { Row({ space: 2 }) { Image('/resource/ic_public_thumbsup.svg').width(24).height(24).margin({ left: -5 }) - Text('Custom Popup').fontSize(12) + Text('Custom Popup').fontSize(10) }.width(100).height(50).backgroundColor(Color.White) } 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 c18d5a4e20ca5f48ab6d5ccf368d9936c174fe0d..8504a31b188eacdd53b90bfe61d1ca1474fc2bd6 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 @@ -1,7 +1,9 @@ # Z-order Control +The **zIndex** attribute sets the z-order of a component in the stacking context. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE** +> > This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. @@ -13,15 +15,16 @@ None ## Attributes - | Name | Type | Default Value | Description | +| Name | Type | Default Value | Description | | -------- | -------- | -------- | -------- | -| zIndex | number | 0 | Hierarchy of sibling components in a container. A larger z-order value indicates a higher display level. | +| zIndex | number | 0 | Hierarchy of sibling components in a container. A larger value indicates a higher display level. | ## Example - -``` + +```ts +// xxx.ets @Entry @Component struct ZIndexExample { @@ -38,7 +41,7 @@ struct ZIndexExample { Text('third child, zIndex(1)') .size({width: '70%', height: '50%'}).backgroundColor(0xc1cbac).align(Alignment.TopStart) .zIndex(1) - } + }.width('100%').height(200) }.width('100%').height(200) } }