update docs (0827)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md

 # 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 **\<RichText>** 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 |
 | -------- | -------- | -------- |
-| \<h1>--\<h6> | Defines six levels of headings in the HTML document. \<h1> defines the most important heading, and \<h6> defines the least important heading.| \<h1>This is an H1 heading\</h1> \<h2>This is an H2 heading\</h2>|
-| \<p>\</p> | Defines a paragraph.| \<p>This is a paragraph\</p>|
-| \<br/> | Inserts a newline character.| \<p>This is a paragraph\<br/>This is a new paragraph\</p>|
-| \<hr/> | Defines a thematic break (such as a shift of topic) on an HTML page and creates a horizontal line.| \<p>This is a paragraph\</p>\<hr/>\<p>This is a paragraph\</p> |
-| \<div>\</div> | 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.| \<div style='color:#0000FF'>\<h3>This is the heading in a div element\</h3>\</div> |
-| \<i>\</i> | Displays text in italic style.| \<i>This is in italic style\</i> |
-| \<u>\</u> | 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 \<u> tag where it could be confused with a hyperlink.| \<p>\<u>This is an underlined paragraph\<u>\<p> |
-| \<style>\</style> | Used to embed CSS within an HTML document.| \<style>h1{color:red;}p{color:blue;}\</style> |
-| 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;'**.| \<h1 style='color:blue;text-align:center'>This is a heading\</h1>\<p style='color:green'>This is a paragraph\</p> |
-| \<script>\</script> | Used to embed or reference a client-side script, such as JavaScript.| \<script>document.write("Hello World!")\</script> |
+| \<h1>--\<h6> | Defines six levels of headings in the HTML document. \<h1> defines the most important heading, and \<h6> defines the least important heading. | \<h1>This is an H1 heading\</h1> \<h2>This is an H2 heading\</h2> |
+| \<p>\</p> | Defines a paragraph. | \<p>This is a paragraph\</p> |
+| \<br/> | Inserts a newline character. | \<p>This is a paragraph\<br/>This is a new paragraph\</p>|
+| \<hr/> | Defines a thematic break (such as a shift of topic) on an HTML page and creates a horizontal line. | \<p>This is a paragraph\</p>\<hr/>\<p>This is a paragraph\</p> |
+| \<div>\</div> | 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. | \<div style='color:#0000FF'>\<h3>This is the heading in a div element\</h3>\</div> |
+| \<i>\</i> | Displays text in italic style. | \<i>This is in italic style\</i> |
+| \<u>\</u> | 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 \<u> tag where it could be confused with a hyperlink. | \<p>\<u>This is an underlined paragraph\<u>\<p> |
+| \<style>\</style> | Used to embed CSS within an HTML document. | \<style>h1{color:red;}p{color:blue;}\</style> |
+| 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;'**. | \<h1 style='color:blue;text-align:center'>This is a heading\</h1>\<p style='color:green'>This is a paragraph\</p> |
+| \<script>\</script> | Used to embed or reference a client-side script, such as JavaScript. | \<script>document.write("Hello World!")\</script> |
 
 ## 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 {

en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md

 # XComponent
 
-  > **NOTE**<br>
+  > **NOTE**
+  >
   > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
-  The **\<XComponent>** can accept and display the EGL/OpenGLES and media data input.
+The **\<XComponent>** 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:<br>- **surface**: The content of this component is displayed individually, without being combined with that of other components.<br>- **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:<br>- **surface**: The content of this component is displayed individually, without being combined with that of other components.<br>- **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 **\<XComponent>** 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 **\<XComponent>**. 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 **\<XComponent>**. |
+| Type    | Description                     |
+| ------ | ----------------------- |
+| string | ID of the surface held by the **\<XComponent>**.|
 
 ### setXComponentSurfaceSize
 
@@ -62,12 +77,14 @@ setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}):
 
 Sets the width and height of the surface held by the **\<XComponent>**.
 
-- Parameters
+**System API**: This is a system API.
 
-  | Name       | Type | Mandatory | Default Value | Description              |
-  | ------------- | -------- | ---- | ------ | ----------------------------- |
-  | surfaceWidth  | number   | Yes  | -      | Width of the surface held by the **\<XComponent>**. |
-  | surfaceHeight | number   | Yes  | -      | Height of the surface held by the **\<XComponent>**. |
+**Parameters**
+
+| Name          | Type  | Mandatory | Description                     |
+| ------------- | ------ | ---- | ----------------------- |
+| surfaceWidth  | number | Yes   | Width of the surface held by the **\<XComponent>**.|
+| surfaceHeight | number | Yes   | Height of the surface held by the **\<XComponent>**.|
 
 ### getXComponentContext
 
@@ -75,16 +92,18 @@ getXComponentContext(): Object
 
 Obtains the context of an **\<XComponent>** object.
 
-- Return value
+**Return value**
 
-  | Type  | Description                                                        |
-  | ------ | ------------------------------------------------------------ |
-  | Object | Context of an **\<XComponent>** object. The APIs contained in the context are defined by developers. |
+| Type    | Description                                      |
+| ------ | ---------------------------------------- |
+| Object | Context of the **\<XComponent>** object. The APIs contained in the context are defined by developers.|
 
 ## Example
 
 Provide a surface-type **\<XComponent>** 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';

en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md

 # 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,<br/>popup: PopupOptions \| CustomPopupOptions | - | Settings of the popup bound to a component.<br/>**show**: whether to display the popup on the creation page by default. The default value is **false**.<br/>**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 | {<br/>value: string,<br/>action: () =&gt; void<br/>} | No | - | First button.<br/>**value**: text of the primary button in the popup.<br/>**action**: callback function for clicking the primary button. |
+| secondaryButton | {<br/>value: string,<br/>action: () =&gt; void<br/>} | No | - | Second button.<br/>**value**: text of the secondary button in the popup.<br/>**action**: callback function for clicking the secondary button. |
+| onStateChange | (isVisible: boolean) =&gt; void | No | - | Callback for the popup status change event.<br>**isVisible**: visibility of the popup. |
+
+## CustomPopupOptions<sup>8+</sup>
+| Name          | Type                                           | Mandatory | Default Value | Description |
+| ------------- | ---------------------------------------------- | ---- | ---------------- | ------------------------------------------------------------ |
+| builder       | () =&gt; 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) =&gt; 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 | {<br/>value: string,<br/>action: () =&gt; void<br/>} | No | - | First button.<br/>**value**: text of the primary button in the popup.<br/>**action**: callback function for clicking the primary button. |
-  | secondaryButton | {<br/>value: string,<br/>action: () =&gt; void<br/>} | No | - | Second button.<br/>**value**: text of the secondary button in the popup.<br/>**action**: callback function for clicking the secondary button. |
-  | onStateChange | (isVisible: boolean) =&gt; void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. |
-
-- CustomPopupOptions<sup>8+</sup>
-    | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | builder | () =&gt; 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) =&gt; void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. |
-
-- Placement<sup>8+</sup> 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)
   }
 

en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md

 # 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)
   }
 }