From f62400e3648e4fe431a7b38bda01964a4f5e561e Mon Sep 17 00:00:00 2001
From: esterzhou <ester.zhou@huawei.com>
Date: Tue, 6 Sep 2022 19:29:31 +0800
Subject: [PATCH] update docs (8236)

Signed-off-by: esterzhou <ester.zhou@huawei.com>
---
 .../reference/arkui-ts/ts-animatorproperty.md |  47 ++-
 .../ts-basic-components-imageanimator.md      |  75 ++---
 .../arkui-ts/ts-basic-components-scrollbar.md |  40 +--
 .../arkui-ts/ts-basic-components-text.md      |  21 +-
 .../reference/arkui-ts/ts-container-column.md |  25 +-
 .../reference/arkui-ts/ts-container-flex.md   |  37 +--
 .../reference/arkui-ts/ts-container-row.md    |  27 +-
 .../reference/arkui-ts/ts-container-scroll.md |  44 +--
 .../arkui-ts/ts-drawing-components-shape.md   |  62 ++--
 .../arkui-ts/ts-explicit-animation.md         |  61 ++--
 .../ts-transition-animation-component.md      |  48 ++-
 .../ts-universal-attributes-background.md     |  16 +-
 .../ts-universal-attributes-border.md         |  23 +-
 .../ts-universal-attributes-gradient-color.md |  28 +-
 .../ts-universal-attributes-hover-effect.md   |  22 +-
 .../arkui-ts/ts-universal-attributes-menu.md  |  19 +-
 .../ts-universal-attributes-text-style.md     |  25 +-
 .../ts-universal-attributes-visibility.md     |  10 +-
 .../arkui-ts/ts-universal-events-key.md       |  21 +-
 .../arkui-ts/ts-universal-events-touch.md     |  14 +-
 .../arkui-ts/ts-universal-mouse-key.md        |  25 +-
 en/application-dev/ui/ts-types.md             | 283 +++++++++++-------
 22 files changed, 423 insertions(+), 550 deletions(-)

diff --git a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md
index de967be1f6..e6c2c03cee 100644
--- a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md
+++ b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md
@@ -1,44 +1,31 @@
-# AnimatorProperty
+# Property Animator
 
+You can create a property animator to animate the universal attributes of a component.
 
 > **NOTE**
 >
-> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
+| API                      | Description                                                    |
+| ------------------------------ | ------------------------------------------------------------ |
+| animation(value: AnimateParam) | Applies a property animator to this component to control the transition of the component from one state to another.|
 
-When the universal attributes of a component change, you can create an **AnimatorProperty** for gradient to improve user experience.
+## AnimateParam
 
+- Attributes
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| duration | number | 1000 | Animation duration, in ms. The default duration is 1000 ms. |
-| curve | Curve | Curve.Linear | Animation curve. The default curve is linear. |
-| delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed. |
-| iterations | number | 1 | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. |
-| playMode | [PlayMode](ts-appendix-enums.md#playmode-enums) | PlayMode.Normal | Playback mode. By default, the animation is played from the beginning after the playback is complete. |
 
-
-- Curve enums
-    | Name | Description |
-  | -------- | -------- |
-  | Linear | The animation speed keeps unchanged. |
-  | Ease | The animation starts at a low speed and then accelerates. It slows down before the animation ends. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used. |
-  | EaseIn | The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used. |
-  | EaseOut | The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used. |
-  | EaseInOut | The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used. |
-  | FastOutSlowIn | The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0). |
-  | LinearOutSlowIn | The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0). |
-  | FastOutLinearIn | The animation uses the acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0). |
-  | ExtremeDeceleration | The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0). |
-  | Sharp | The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0). |
-  | Rhythm | The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0). |
-  | Smooth | The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0). |
-  | Friction | Damping curve. The cubic-bezier curve (0.2, 0.0, 0.2, 1.0) is used. |
+| Name        | Type                                    | Default Value            | Description                     |
+| ---------- | ---------------------------------------- | --------------- | ----------------------- |
+| duration   | number                                   | 1000            | Animation duration, in ms. The default duration is 1000 ms.   |
+| curve      | [Curve](ts-appendix-enums.md#curve)        | Curve.Linear    | Animation curve. The default curve is linear.               |
+| delay      | number                                   | 0               | Delay of animation playback, in ms. By default, the playback is not delayed.         |
+| iterations | number                                   | 1               | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.  |
+| playMode   | [PlayMode](ts-appendix-enums.md#playmode) | PlayMode.Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.|
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -67,8 +54,8 @@ struct AttrAnimationExample {
           curve: Curve.EaseOut, // Animation curve
           delay: 500, // Animation delay
           iterations: 1, // Number of playback times
-          playMode: PlayMode.Normal // Animation mode
-        }) // Animation configuration for the width and height attributes of the Button component
+          playMode: PlayMode.Normal // Animation playback mode
+        }) // Animation configuration for the width and height attributes of the <Button> component
     }.width('100%').margin({ top: 5 })
   }
 }
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md b/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
index 3aea124c11..eb08f7e673 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
@@ -1,11 +1,12 @@
-ImageAnimator
-
-The **\<ImageAnimator>** component enables images to be played frame by frame. The list of images to be played can be configured, and the duration of each image can be configured.
+# ImageAnimator
 
 > **NOTE**
->
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
+
+The **\<ImageAnimator>** component enables images to be played frame by frame. The list of images to be played can be configured, and the duration of each image can be configured.
+
+
 ## Required Permissions
 
 None
@@ -23,55 +24,41 @@ ImageAnimator()
 
 ## Attributes
 
-| Name       | Type                                     | Default Value           | Mandatory | Description                              |
-| ---------- | ---------------------------------------- | ----------------------- | --------- | ---------------------------------------- |
-| images     | Array&lt;{<br>src:string,<br>width?:Length,<br>height?:Length,<br>top?:Length,<br>left?:Length,<br>duration?:number<br>}&gt; | []                      | Yes       | Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. The detailed description is as follows:<br>**src**: image path. The image format can be SVG, PNG, or JPG.<br>**width**: image width.<br>**height**: image height.<br>**top**: vertical coordinate of the image relative to the upper left corner of the component.<br>**left**: horizontal coordinate of the image relative to the upper left corner of the component.<br>**duration**: playback duration of the image, in ms. |
-| state      | AnimationStatus                          | AnimationStatus.Initial | No        | Playback status of the animation. The default status is **Initial**. |
-| duration   | number                                   | 1000                    | No        | Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in images, the setting of this attribute is invalid. |
-| reverse    | boolean                                  | false                   | No        | Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one. |
-| fixedSize  | boolean                                  | true                    | No        | Whether the image size is the same as the component size. **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid. **false**: The width, height, top, and left attributes of each image must be set separately. |
-| preDecode  | number                                   | 0                       | No        | Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. If this attribute is set to **2**, two images following the currently playing frame will be cached in advance to improve performance. |
-| fillMode   | FillMode                                 | FillMode.Forwards       | No        | Status before and after the animation starts. For details about the options, see **FillMode**. |
-| iterations | number                                   | 1                       | No        | By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. |
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| images | Array&lt;ImageFrameInfo&gt; | [] | Yes| Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. For details, see **ImageFrameInfo**.|
+| state | [AnimationStatus](ts-appendix-enums.md#animationstatus) | Initial | No| Playback status of the animation. The default status is **Initial**.|
+| duration | number | 1000 | No| Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in **images**, the setting of this attribute is invalid.|
+| reverse | boolean | false | No| Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one.|
+| fixedSize | boolean | true | No| Whether the image size is the same as the component size.<br> **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.<br> **false**: The width, height, top, and left attributes of each image must be set separately.|
+| preDecode | number | 0 | No| Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. The value **2** indicates that two images following the currently playing frame will be cached in advance to improve performance.|
+| fillMode | [FillMode](ts-appendix-enums.md#fillmode) | Forwards | No| Status before and after the animation starts. For details about the options, see **FillMode**.|
+| iterations | number | 1 | No| Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.|
 
 - ImageFrameInfo
-  | Name     | Type                                     | Default Value | Mandatory | Description                              |
-  | -------- | ---------------------------------------- | ------------- | --------- | ---------------------------------------- |
-  | src      | string \| [Resource](../../ui/ts-types.md)<sup>9+</sup> | ""            | Yes       | Image path. The image format can be .svg, .png, or .jpg. |
-  | width    | [Length](../../ui/ts-types.md)           | 0             | No        | Image width.                             |
-  | height   | [Length](../../ui/ts-types.md)           | 0             | No        | Image height.                            |
-  | top      | [Length](../../ui/ts-types.md)           | 0             | No        | Vertical coordinate of the image relative to the upper left corner of the component. |
-  | left     | [Length](../../ui/ts-types.md)           | 0             | No        | Horizontal coordinate of the image relative to the upper left corner of the component. |
-  | duration | number                                   | 0             | No        | Playback duration of each image frame, in milliseconds. |
-- AnimationStatus enums
-  | Name    | Description                            |
-  | ------- | -------------------------------------- |
-  | Initial | The animation is in the initial state. |
-  | Running | The animation is being played.         |
-  | Paused  | The animation is paused.               |
-  | Stopped | The animation is stopped.              |
-
-- FillMode enums
-  | Name     | Description                              |
-  | -------- | ---------------------------------------- |
-  | None     | After the playback is complete, the animation restores to the initial state. |
-  | Forwards | After the playback is complete, the animation remains in the end state. |
+  | Name| Type| Default Value| Mandatory| Description|
+  | -------- | -------- | -------- | -------- | -------- |
+  | src | string \| [Resource](.../ui/ts-types.md#resource-type)<sup>9+</sup>| "" | Yes| Image path. The image format can be .svg, .png, or .jpg.|
+  | width | [Length](.../ui/ts-types.md#length-type)| 0 | No| Image width.|
+  | height | [Length](.../ui/ts-types.md#length-type)| 0 | No| Image height.|
+  | top | [Length](.../ui/ts-types.md#length-type)| 0 | No| Vertical coordinate of the image relative to the upper left corner of the component.|
+  | left | [Length](.../ui/ts-types.md#length-type)| 0 | No| Horizontal coordinate of the image relative to the upper left corner of the component.|
+  | duration | number | 0 | No| Playback duration of each image frame, in milliseconds.|
 
 
 ## Events
 
-| Name                  | Description                              |
-| --------------------- | ---------------------------------------- |
-| onStart() =&gt; void  | Triggered when the animation starts to play. |
-| onPause() =&gt; void  | Triggered when the animation playback is paused. |
-| onRepeat() =&gt; void | Triggered when the animation playback is repeated. |
-| onCancel() =&gt; void | Triggered when the animation playback is canceled. |
-| onFinish() =&gt; void | Triggered when the animation playback is complete. |
+| Name| Description|
+| -------- | -------- |
+| onStart(event: () =&gt; void)  | Triggered when the animation starts to play.|
+| onPause(event: () =&gt; void)  | Triggered when the animation playback is paused.|
+| onRepeat(event: () =&gt; void) | Triggered when the animation playback is repeated.|
+| onCancel(event: () =&gt; void) | Triggered when the animation playback is canceled.|
+| onFinish(event: () =&gt; void) | Triggered when the animation playback is complete.|
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -85,7 +72,7 @@ struct ImageAnimatorExample {
     Column({ space:5 }) {
       ImageAnimator()
         .images([
-          {
+          { 
             // The comment folder is at the same level as the pages folder.
             src: '/comment/bg1.jpg',
             duration: 500,
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md b/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
index 9e722f408e..c0f5b51dfe 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
@@ -1,11 +1,10 @@
 # ScrollBar
 
-
-> **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 **&lt;ScrollBar&gt;** is used together with scrollable components, such as **&lt;List&gt;**, **&lt;Grid&gt;**, and **&lt;Scroll&gt;**.
+The **\<ScrollBar>** is used together with scrollable components, such as **\<List>**, **\<Grid>**, and **\<Scroll>**.
 
 
 ## Required Permissions
@@ -20,38 +19,31 @@ This component can contain a single child component.
 
 ## APIs
 
-ScrollBar(value: ScrollBarOptions)
+ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: BarState })
 
-- ScrollBarOptions parameters
-  | Name | Type | Mandatory | Default Value | Description |
+- ScrollBarOptions
+  | Name| Type| Mandatory| Default Value| Description|
   | -------- | -------- | -------- | -------- | -------- |
-  | scroller | [Scroller](ts-container-scroll.md#scroller) | Yes | - | Scroller, which can be bound to and control scrollable components. |
-  | direction | ScrollBarDirection | No | ScrollBarDirection.Vertical | Scrollbar direction in which scrollable components scroll. |
-  | state | BarState | No | BarState.Auto | Scrollbar state. |
+  | scroller | [Scroller](ts-container-scroll.md#scroller) | Yes| - | Scroller, which can be bound to scrollable components.|
+  | direction | ScrollBarDirection | No| ScrollBarDirection.Vertical | Scrollbar direction in which scrollable components scroll.|
+  | state | [BarState](ts-appendix-enums.md#barstate) | No| BarState.Auto | Scrollbar state.|
 
-  > **NOTE**<br>
-  > The **&lt;ScrollBar&gt;** component defines the behavior style of the scrollable area, and its subnodes define the behavior style of the scrollbar.
+  >  **NOTE**
+  > The **<\ScrollBar>** component defines the behavior style of the scrollable area, and its subnodes define the behavior style of the scrollbar.
   > 
-  > This component is bound to a scrollable component through **scroller**, and can be used to scroll the scrollable component only when their directions are the same. The **&lt;ScrollBar&gt;** component can be bound to only one scrollable component, and vice versa.
+  > This component is bound to a scrollable component through **scroller**, and can be used to scroll the scrollable component only when their directions are the same. The **\<ScrollBar>** component can be bound to only one scrollable component, and vice versa.
 
 - ScrollBarDirection enums
-  | Name | Description | 
-  | -------- | -------- |
-  | Vertical | Vertical scrollbar. | 
-  | Horizontal | Horizontal scrollbar. | 
-
-- BarState enums
-  | Name | Description | 
+  | Name| Description| 
   | -------- | -------- |
-  | On | Always display the scrollbar. | 
-  | Off | Hide the scrollbar. | 
-  | Auto | Display the scrollbar on demand (for example, display the scrollbar when the screen is touched or hide the scrollbar after 2s of inactivity). | 
+  | Vertical | Vertical scrollbar.| 
+  | Horizontal | Horizontal scrollbar.|
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ScrollBarExample {
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 f1586d1b2f..9a55b0b5d9 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
@@ -19,26 +19,31 @@ This component can contain the [\<Span>](ts-basic-components-span.md) child comp
 
 ## APIs
 
-Text(content?: string)
+Text(content?: ResourceStr)
 
 - Parameters
   | Name| Type| Mandatory| Default Value| Description|
   | -------- | -------- | -------- | -------- | -------- |
-  | content | string | No| '' | Text content. The content and style set for the **\<Text>** component do not take effect when it contains the **\<Span>** child component.|
+  | content | [ResourceStr](../../ui/ts-types.md#resourcestr8) | No| '' | Text content. The content and style set for the **\<Text>** component do not take effect when it contains the **\<Span>** child component.|
 
 
 ## Attributes
 
+In addition to the following attributes, the attributes in [Text Style](ts-universal-attributes-text-style.md) are supported.
+
 | Name| Type| Default Value| Description|
 | -------- | -------- | -------- | -------- |
-| textAlign | [TextAlign](ts-appendix-enums.md) | TextAlign.Start | Text alignment mode of multiple lines of text.|
-| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md)} | {overflow: TextOverflow.Clip} | Display mode when the text is too long.<br>**NOTE**<br/>Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters.<br>This attribute must be used with `maxLines` to take effect. |
+| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | TextAlign.Start | Text alignment mode of multiple lines of text.|
+| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | {overflow: TextOverflow.Clip} | Display mode when the text is too long.<br>**NOTE**<br/>Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters.<br>This attribute must be used with `maxLines` to take effect. |
 | maxLines | number | Infinity | Maximum number of lines in the text.<br>**NOTE**<br/>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 | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: Color<br>} | {<br>type: TextDecorationType.None,<br>color: Color.Black<br>} | Style and color of the text decorative line.|
-| baselineOffset | Length | - | Offset of the text baseline.|
+| lineHeight     | string \| number \| [Resource](../../ui/ts-types.md)  | - | 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     | {<br>type: TextDecorationType,<br>color?: [ResourceColor](../../ui/ts-types.md)<br>} | {<br>type: TextDecorationType.None,<br>color: Color.Black<br>} | Style and color of the text decorative line.                          |
+| baselineOffset | number \| string         | -         | Offset of the text baseline.                             |
+| letterSpacing       | [Length](../../ui/ts-types.md)                 | -                          | Letter spacing.                                |
+| minFontSize       | number \| string \| [Resource](../../ui/ts-types.md)      | -     | Minimum font size.                                |
+| maxFontSize       | number \| string \| [Resource](../../ui/ts-types.md)      | -     | Maximum font size.                                |
 | textCase | [TextCase](ts-appendix-enums.md#textcase) | TextCase.Normal | Text case.|
-| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md) | CopyOptions.None | Whether copy and paste is allowed.|
+| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | CopyOptions.None | Whether copy and paste is allowed.|
 
 >  **NOTE**
 >
diff --git a/en/application-dev/reference/arkui-ts/ts-container-column.md b/en/application-dev/reference/arkui-ts/ts-container-column.md
index 0203d572e0..de4212f082 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-column.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-column.md
@@ -20,33 +20,26 @@ This component can contain child components.
 
 ## APIs
 
-Column(value:{space?: Length})
+Column(value?:{space?: Length})
 
 
 - Parameters
-    | Name  | Type   | Mandatory | Default Value | Description                              |
-    | ----- | ------ | --------- | ------------- | ---------------------------------------- |
-    | space | Length | No        | 0             | Space between any two adjacent child components in the vertical layout. |
+  | Name| Type| Mandatory| Default Value| Description|
+  | -------- | -------- | -------- | -------- | -------- |
+  | space | Length | No| 0 | Space between two adjacent child components in the vertical layout.|
 
 
 ## Attributes
 
-| Name                        | Type                              | Default Value          | Description                              |
-| --------------------------- | --------------------------------- | ---------------------- | ---------------------------------------- |
-| alignItems                  | HorizontalAlign                   | HorizontalAlign.Center | Alignment mode of child components in the horizontal direction. |
-| justifyContent<sup>8+</sup> | [FlexAlign](ts-container-flex.md) | FlexAlign.Start        | Alignment mode of child components in the vertical direction. |
+| Name| Type| Default Value| Description|
+| -------- | -------- | -------- | -------- |
+| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | HorizontalAlign.Center | Alignment mode of the child components in the horizontal direction.|
+| justifyContent<sup>8+</sup> | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | Alignment mode of the child components in the vertical direction.|
 
-- HorizontalAlign enums
-    | Name   | Description                              |
-    | ------ | ---------------------------------------- |
-    | Start  | Aligned with the start edge in the same direction as the language in use. |
-    | Center | Aligned to the center. This is the default alignment mode. |
-    | End    | Aligned with the end edge in the same direction as the language in use. |
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -88,4 +81,4 @@ struct ColumnExample {
 }
 ```
 
-![](figures/Column.png)
+![Column](figures/Column.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-container-flex.md b/en/application-dev/reference/arkui-ts/ts-container-flex.md
index 8e2c5c5715..6ef5525a1f 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-flex.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-flex.md
@@ -19,43 +19,18 @@ This component can contain child components.
 
 ## APIs
 
-Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
+Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
 
 Creates a standard **\<Flex>** component.
 
 - Parameters
   | Name           | Type                                    | Mandatory  | Default Value              | Description                                    |
   | -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- |
-  | direction      | FlexDirection                            | No   | FlexDirection.Row | Direction in which child components are arranged in the **\<Flex>** component, that is, the direction of the main axis.                |
-  | wrap           | FlexWrap                                 | No   | FlexWrap.NoWrap   | Whether the **\<Flex>** component has a single line or multiple lines.                    |
-  | justifyContent | FlexAlign                                | No   | FlexAlign.Start   | Alignment mode of the child components in the **\<Flex>** component along the main axis.                     |
-  | alignItems     | [ItemAlign](ts-appendix-enums.md#itemalign-enums)| No   | ItemAlign.Stretch | Alignment mode of the child components in the **\<Flex>** component along the cross axis.                    |
-  | alignContent   | FlexAlign                                | No   | FlexAlign.Start   | Alignment mode of the child components in a multi-line **<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**.|
-
-- FlexDirection enums
-  | Name           | Description              |
-  | ------------- | ---------------- |
-  | Row           | The child components are arranged in the same direction as the main axis runs along the rows. |
-  | RowReverse    | The child components are arranged opposite to the **Row** direction. |
-  | Column        | The child components are arranged in the same direction as the main axis runs down the columns. |
-  | ColumnReverse | The child components are arranged opposite to the **Column** direction.|
-
-- FlexWrap enums
-  | Name       | Description                                             |
-  | ----------- | ------------------------------------------------- |
-  | NoWrap      | The child components in the **\<Flex>** component are arranged in a single line, and they cannot overflow.  |
-  | Wrap        | The child components in the **\<Flex>** component are arranged in multiple lines, and they may overflow.    |
-  | WrapReverse | The child components in the **\<Flex>** component are reversely arranged in multiple lines, and they may overflow.|
-
-- FlexAlign enums
-  | Name        | Description                                                        |
-  | ------------ | ------------------------------------------------------------ |
-  | Start        | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one.|
-  | Center       | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end.|
-  | End          | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one.|
-  | SpaceBetween | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same. |
-  | SpaceAround  | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components. |
-  | SpaceEvenly  | The child components are equally distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between two adjacent components are the same.|
+  | direction      | [FlexDirection](ts-appendix-enums.md#flexdirection) | No   | FlexDirection.Row | Direction in which child components are arranged in the **\<Flex>** component, that is, the direction of the main axis.                |
+  | wrap           | [FlexWrap](ts-appendix-enums.md#flexwrap)  | No   | FlexWrap.NoWrap   | Whether the **\<Flex>** component has a single line or multiple lines.                    |
+  | justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No   | FlexAlign.Start   | Alignment mode of the child components in the **\<Flex>** component along the main axis.                     |
+  | alignItems     | [ItemAlign](ts-appendix-enums.md#itemalign) | No   | ItemAlign.Stretch | Alignment mode of the child components in the **\<Flex>** component along the cross axis.                    |
+  | alignContent   | [FlexAlign](ts-appendix-enums.md#flexalign) | No   | FlexAlign.Start   | Alignment mode of the child components in a multi-line **<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**.|
 
 
 ## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-container-row.md b/en/application-dev/reference/arkui-ts/ts-container-row.md
index d9c825f985..ce5fe6943a 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-row.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-row.md
@@ -1,6 +1,7 @@
 # Row
 
-> **NOTE**<br>
+> **NOTE**
+>
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
@@ -19,32 +20,26 @@ Supported
 
 ## APIs
 
-Row(value:{space?: Length})
+Row(value?:{space?: Length})
 
 - Parameters
-  | Name | Type | Mandatory | Default Value | Description | 
+  | Name| Type| Mandatory| Default Value| Description|
   | -------- | -------- | -------- | -------- | -------- |
-  | space | Length | No| 0 | Space between two adjacent child components in the horizontal layout. | 
+  | space | Length | No| 0 | Space between two adjacent child components in the horizontal layout.|
 
 
 ## Attributes
 
-| Name | Type | Default Value | Description |
+| Name| Type| Default Value| Description|
 | -------- | -------- | -------- | -------- |
-| alignItems | VerticalAlign | VerticalAlign.Center | Alignment mode of the child components in the vertical direction. |
-| justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | Alignment mode of the child components in the horizontal direction. |
-
-- VerticalAlign enums
-  | Name | Description | 
-  | -------- | -------- |
-  | Top | Top aligned. | 
-  | Center | Center aligned. This is the default alignment mode. | 
-  | Bottom | Bottom aligned. |
+| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | VerticalAlign.Center | Alignment mode of the child components in the vertical direction.|
+| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | FlexAlign.Start | Alignment mode of the child components in the horizontal direction.|
 
 
 ## Example
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RowExample {
@@ -84,4 +79,4 @@ struct RowExample {
 }
 ```
 
-![en_image_0000001174422908](figures/row.png)
+![en-us_image_0000001174422908](figures/row.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-container-scroll.md b/en/application-dev/reference/arkui-ts/ts-container-scroll.md
index e1b0dbad31..4fd97bc87b 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-scroll.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-scroll.md
@@ -1,8 +1,9 @@
 # Scroll
 
 >  **NOTE**
-> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-> - When a **\<List>** is nested in this component, you are advised to specify the width and height of the **\<List>** under scenarios where consistently high performance is required. If the width and height are not specified, this component will load all content of the **\<List>**.
+>  - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+>  - When nesting a **\<List>** within this component, specify the width and height for the **\<List>** under scenarios where consistently high performance is required. If the width and height are not specified, this component will load all content of the **\<List>**.
+>  - This component can produce a bounce effect only when there is more than one screen of content.
 
 
 The **\<Scroll>** component scrolls the content when the layout size of a component exceeds the viewport of its parent component.
@@ -28,32 +29,41 @@ Scroll(scroller?: Scroller)
 | Name            | Type                                    | Default Value                     | Description       |
 | -------------- | ---------------------------------------- | ------------------------ | --------- |
 | scrollable     | ScrollDirection                          | ScrollDirection.Vertical | Scroll method.  |
-| scrollBar      | [BarState](ts-appendix-enums.md#barstate-enums)| ScrollDirection.Auto     | Scrollbar status. |
-| scrollBarColor | Color                                    | -                        | Color of the scrollbar.|
+| scrollBar      | [BarState](ts-appendix-enums.md#barstate) | BarState.Off     | Scrollbar status. |
+| scrollBarColor | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Color   | -                  | Color of the scrollbar.|
 | scrollBarWidth | Length                                   | -                        | Width of the scrollbar.|
+| edgeEffect     | EdgeEffect                               | EdgeEffect.Spring | Scroll effect. For details, see **EdgeEffect**.|
 
-- ScrollDirection enums
+## ScrollDirection enums
   | Name        | Description        |
   | ---------- | ---------- |
   | Horizontal | Only horizontal scrolling is supported.|
   | Vertical   | Only vertical scrolling is supported.|
   | None       | Scrolling is disabled.     |
 
+## EdgeEffect
+
+| Name    | Description                                      |
+| ------ | ---------------------------------------- |
+| Spring | Spring effect. When at one of the edges, the component can move beyond the bounds through touches, and produces a bounce effect when the user releases their finger.|
+| Fade   | Fade effect. When at one of the edges, the component produces a fade effect.         |
+| None   | No effect when the component is at one of the edges.                              |
+
 ## Events
 
 | Name                                      | Description                         |
 | ---------------------------------------- | ----------------------------- |
 | onScrollBegin<sup>9+</sup>(dx: number, dy: number)&nbsp;=&gt;&nbsp;{ dxRemain: number, dyRemain: number } | Invoked when scrolling starts.<br>Parameters:<br>- **dx**: amount to scroll by in the horizontal direction.<br>- **dy**: amount to scroll by in the vertical direction.<br>Return value:<br>- **dxRemain**: remaining amount to scroll by in the horizontal direction.<br>- **dyRemain**: remaining amount to scroll by in the vertical direction.|
-| onScroll(xOffset:&nbsp;number,&nbsp;yOffset:&nbsp;number)&nbsp;=&gt;&nbsp;void | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs.|
-| onScrollEdge(side:&nbsp;Edge)&nbsp;=&gt;&nbsp;void | Invoked when scrolling reaches the edge.                   |
-| onScrollEnd()&nbsp;=&gt;&nbsp;void       | Invoked when scrolling stops.                    |
+| onScroll(event: (xOffset: number, yOffset: number) => void) | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs.|
+| onScrollEdge(event: (side: Edge) => void) | Invoked when scrolling reaches the edge.                   |
+| onScrollEnd(event: () => void)      | Invoked when scrolling stops.                    |
 
 >  **NOTE**
 > If the **onScrollBegin** event and **scrollBy** API are used to implement nested scrolling, you must set **edgeEffect** of the scrolling child node to **None**. For example, if a **\<List>** is nested in the **\<Scroll>** component, the **edgeEffect** attribute of the **\<List>** must be set to **EdgeEffect.None**.
 
 ## Scroller
 
-Controller of the scrollable container component. You can bind this component to a container component and use it to control the scrolling of that component. Currently, this component can be bound to the **\<List>** and **\<Scroll>** components.
+Implements a controller for a scrollable container component. You can bind this component to a container component and use it to control the scrolling of that component. Currently, this component can be bound to the **\<Scroll>** and **\<ScrollBar>** components.
 
 
 ### Objects to Import
@@ -90,14 +100,8 @@ Scrolls to the edge of the container.
 - Parameters
   | Name  | Type| Mandatory  | Default Value | Description     |
   | ----- | ---- | ---- | ---- | --------- |
-  | value | Edge | Yes   | -    | Edge position to scroll to.|
-
-- Edge enums
+  | value | [Edge](ts-appendix-enums.md#edge) | Yes   | -    | Edge position to scroll to.|
 
-  | Name  | Value  | Description      |
-  | ------ | ---- | ---------- |
-  | Top    | 0    | Top edge.|
-  | Bottom | 2    | Bottom edge.|
 
   
 
@@ -111,7 +115,7 @@ Scrolls to the next or previous page.
   | Name      | Type   | Mandatory  | Default Value | Description                          |
   | --------- | ------- | ---- | ---- | ------------------------------ |
   | next      | boolean | Yes   | -    | Whether to turn to the next page. The value **true** means to scroll to the next page, and **false** means to scroll to the previous page.|
-  | direction | Axis    | No   | -    | Scrolling direction: horizontal or vertical.               |
+  | direction | [Axis](ts-appendix-enums.md#axis)    | No   | -    | Scrolling direction: horizontal or vertical.               |
 
 
 ### currentOffset
@@ -123,9 +127,9 @@ Obtains the scrolling offset.
 
 
 - Return value
-  | Type                                                    | Description                                                  |
-  | ------------------------------------------------------- | ------------------------------------------------------------ |
-  | {<br>xOffset:&nbsp;number,<br>yOffset:&nbsp;number<br>} | **xOffset**: horizontal scrolling offset.<br>**yOffset**: vertical scrolling offset. |
+  | Type                                      | Description                                      |
+  | ---------------------------------------- | ---------------------------------------- |
+  | {<br>xOffset:&nbsp;number,<br>yOffset:&nbsp;number<br>} | **xOffset**: horizontal scrolling offset.<br>**yOffset**: vertical scrolling offset.|
 
 
 ### scrollToIndex
diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
index 22d80925e0..a4e2b6fc8b 100644
--- a/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
+++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
@@ -1,17 +1,17 @@
 # Shape
 
-
-> **NOTE**<br>
+>  **NOTE**
+> 
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The **<Shape\>** component is the parent component of the drawing components. The attributes described in this topic are universal attributes supported by all the drawing components.
+The **\<Shape>** component is the parent component of the drawing components. The attributes described in this topic are universal attributes supported by all the drawing components.
 
 
-1. Drawing components use **<Shape\>** as their parent component to implement the effect similar to SVG.
+1. Drawing components use **\<Shape>** as their parent to implement the effect similar to SVG.
 
 
-2. The **<Shape\>** component is used independently to draw a specific shape.
+2. The **\<Shape>** component is used independently to draw a specific shape.
 
 
 ## Required Permissions
@@ -21,47 +21,43 @@ None
 
 ## Child Components
 
-The **&lt;Shape&gt;** component can contain child components.
+This component can contain child components.
 
 
 ## APIs
 
-Shape(value:{target?: PixelMap})
+Shape(value?: PixelMap)
 
 - Parameters
-  | Name | Type | Mandatory | Default Value | Description | 
+  | Name| Type| Mandatory| Default Value| Description| 
   | -------- | -------- | -------- | -------- | -------- |
-  | target | PixelMap | No | null | Shape to draw. You can draw a shape in the specified **PixelMap** object. If no object is specified, the shape is drawn in the current drawing target. | 
+  | value | PixelMap | No| - | Shape to draw. You can draw a shape in the specified **PixelMap** object. If no object is specified, the shape is drawn in the current drawing target.| 
 
 
 ## Attributes
 
-| Name | Type | Default Value | Mandatory | Description | 
-| -------- | -------- | -------- | -------- | -------- |
-| viewPort | {<br/>x: Length,<br/>y: Length,<br/>width: Length,<br/>height: Length<br/>} | - | Yes | View port of the shape. | 
-| fill | Color | Black | No | Fill color. | 
-| stroke | Color | - | No | Stroke color. | 
-| strokeDashArray | Array&lt;Length&gt; | [] | No | Stroke dash. | 
-| strokeDashOffset | Length | 0 | No | Offset of the start point for drawing the stroke. | 
-| strokeLineCap | LineCapStyle | LineCapStyle.Butt | No | Cap style of the stroke. | 
-| strokeLineJoin | LineJoinStyle | LineJoinStyle.Miter | No | Join style of the stroke. | 
-| strokeMiterLimit | number | 4 | No | Limit value when the sharp angle is drawn as a miter. | 
-| strokeOpacity | number | 1 | No | Stroke opacity. | 
-| strokeWidth | Length | 1 | No | Stroke width. | 
-| antiAlias | boolean | true | No | Whether anti-aliasing is enabled. | 
-
-- LineJoinStyle enums
-  | Name | Description | 
-  | -------- | -------- |
-  | Bevel | Bevel is used to connect paths. | 
-  | Miter | Miter is used to connect paths. | 
-  | Round | Round is used to connect paths. | 
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
 
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| viewPort | {<br>x?: number \| string,<br>y?: number \| string,<br>width?: number \| string,<br>height?: number \| string<br>} | { x:0, y:0, width:0, height:0 } | No| View port of the shape.|
+| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.|
+| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Opacity of the fill area.|
+| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Stroke color.|
+| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dash.|
+| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
+| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
+| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
+| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
+| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Stroke opacity.|
+| strokeWidth | number \| string | 1 | No| Stroke width.|
+| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
+| mesh<sup>8+</sup> | Array&lt;number&gt;,number,number | [],0,0 | No| Mesh effect. The first parameter is an array of lengths (column + 1) * (row + 1) * 2, which records the position of each vertex of the distorted bitmap. The second parameter is the number of columns in the mesh matrix. The third parameter is the number of rows in the mesh matrix.|
 
 ## Example
 
-  
 ```ts
+// xxx.ets
 @Entry
 @Component
 struct ShapeExample {
@@ -70,7 +66,7 @@ struct ShapeExample {
       Text('basic').fontSize(30).fontColor(0xCCCCCC).width(320)
       // Draw a 300 x 50 rectangle with strokes at (-2, -2). The fill color is 0x317Af7, the stroke color is black, the stroke width is 4, the stroke dash is 20, the offset is 10 to the left, the cap style is rounded, the join style is rounded, and anti-aliasing is enabled (default).
       // Draw a 300 x 50 ellipse with strokes at (-2, 58). The fill color is 0x317Af7, the stroke color is black, the stroke width is 4, the stroke dash is 20, the offset is 10 to the left, the cap style is rounded, the join style is rounded, and anti-aliasing is enabled (default).
-      // Draw a 300 x 10 path at (-2, 118). The fill color is 0x317Af7, the stroke color is black, the stroke width is 4, the stroke dash is 20, the offset is 10 to the left, the cap style is rounded, and the join style is rounded, and anti-aliasing is enabled (default).
+      // Draw a 300 x 10 path at (-2, 118). The fill color is 0x317Af7, the stroke color is black, the stroke width is 4, the stroke dash is 20, the offset is 10 to the left, the cap style is rounded, the join style is rounded, and anti-aliasing is enabled (default).
       Shape() {
         Rect().width(300).height(50)
         Ellipse().width(300).height(50).offset({ x: 0, y: 60 })
@@ -90,7 +86,7 @@ struct ShapeExample {
       Shape() {
         Path().width(300).height(10).commands('M0 0 L900 0')
       }.viewPort({ x: 0, y: -5, width: 300, height: 20 }).stroke(0xEE8443).strokeWidth(10).strokeDashArray([20])
-      // Draw a 300 x 10 path at (0, -5). The fill color is 0xEE8443, the stroke width is 10, the stroke gap is 20, and the offset is 10 to the left.
+      // Draw a 300 x 10 path at (0, -5). The fill color is 0xEE8443, the stroke width is 10, the stroke dash is 20, and the offset is 10 to the left.
       Shape() {
         Path().width(300).height(10).commands('M0 0 L900 0')
       }
@@ -123,4 +119,4 @@ struct ShapeExample {
 }
 ```
 
-![en-us_image_0000001257058393](figures/en-us_image_0000001257058393.png)
\ No newline at end of file
+![en-us_image_0000001257058393](figures/en-us_image_0000001257058393.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md
index 7b8d8873ef..0dfce9623a 100644
--- a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md
+++ b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md
@@ -1,37 +1,40 @@
 # Explicit Animation
 
+You can create explicit animation with your custom settings.
 
-> **NOTE**<br>
-> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+>  **NOTE**
+>
+>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-| Name | Description |
-| -------- | -------- |
-| animateTo(value: [AnimationOptions](#animationoptions), event: ()=&gt; void) : void | Provides a transition animation when the status changes due to the closure code.<br/>**event** specifies the closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function. |
+
+| API                                                    | Description                                                    |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| animateTo(value: [AnimationOptions](#animationoptions), event: ()=&gt; void) : void | Provides a transition animation when the status changes due to the closure code.<br>**event** specifies the closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function.|
 
 
 ## AnimationOptions
 
 - Attributes
-  | Name | Type | Default Value | Description |
+  | Name| Type| Default Value| Description|
   | -------- | -------- | -------- | -------- |
-  | duration | number | 1000 | Animation duration, in ms. |
-  | tempo | number | 1.0 | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation. |
-  | curve | Curve \| Curves | Linear | Animation curve. |
-  | delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed. |
-  | iterations | number | 1 | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. |
-  | playMode | PlayMode | Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete. |
+  | duration | number | 1000 | Animation duration, in ms.|
+  | tempo | number | 1.0 | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation.|
+  | curve | Curve \| Curves | Linear | Animation curve.|
+  | delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed.|
+  | iterations | number | 1 | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.|
+  | playMode | [PlayMode](ts-appendix-enums.md#playmode) | Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.|
 
 
 - APIs
-  | Name                  | Description                                               |
-  | --------------------- | --------------------------------------------------------- |
-  | onFinish() =&gt; void | Callback invoked when the animation playback is complete. |
+  | Name| Description|
+  | -------- | -------- |
+  | onFinish() =&gt; void | Callback invoked when the animation playback is complete.|
 
 
 ## Example
 
-
 ```ts
+// xxx.ets
 @Entry
 @Component
 struct AnimateToExample {
@@ -46,15 +49,15 @@ struct AnimateToExample {
         .height(this.heightSize)
         .backgroundColor(0x317aff)
         .onClick((event: ClickEvent) => {
-          // Animation configuration for the width and height attributes of the Button component
+          // Animation configuration for the width and height attributes of the <Button> component
           if (this.flag) {
             animateTo({
-            duration: 1000, // Animation duration
-            tempo: 0.5, // Playback speed
-            curve: Curve.EaseInOut, // Animation curve
-            delay: 200, // Animation delay
-          iterations: 1, // Number of playback times
-            playMode: PlayMode.Normal, // Animation mode
+              duration: 1000, // Animation duration
+              tempo: 0.5, // Playback speed
+              curve: Curve.EaseInOut, // Animation curve
+              delay: 200, // Animation delay
+              iterations: 1, // Number of playback times
+              playMode: PlayMode.Normal // Animation playback mode
               onFinish: () => {
                 console.info('play end')
               }
@@ -64,11 +67,11 @@ struct AnimateToExample {
             })
           } else {
             animateTo({
-            duration: 200, // Animation duration
-            curve: Curve.Ease, // Animation curve
-            delay: 200, // Animation delay
-          iterations: 1, // Number of playback times
-            playMode: PlayMode.Normal, // Animation mode
+              duration: 200, // Animation duration
+              curve: Curve.Ease, // Animated curve
+              delay: 200, // Animation delay
+              iterations: 1, // Number of playback times
+              playMode: PlayMode.Normal // Animation playback mode
               onFinish: () => {
                 console.info('play end')
               }
@@ -84,4 +87,4 @@ struct AnimateToExample {
 }
 ```
 
-![en-us_image_0000001256978345](figures/en-us_image_0000001256978345.gif)
\ No newline at end of file
+![en-us_image_0000001256978345](figures/en-us_image_0000001256978345.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md
index ddc5ffc7a1..c0c0a09928 100644
--- a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md
+++ b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md
@@ -1,61 +1,55 @@
 # Component Transition
 
+Configure the component transition animations for when a component is inserted or deleted. This feature takes effect only when **animateTo** is used. The animation duration, curve, and delay are the same as those configured in **animateTo**.
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-Configure the component transition animations for when a component is inserted or deleted, which improves user experience. This feature takes effect only when **animateTo** is used. The animation duration, curve, and delay are the same as those configured in **animateTo**.
+>  **NOTE**
+>
+>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Attributes
 
-  | Name | Type | Default Value | Description | 
+
+| Name| Type| Default Value| Description|
 | -------- | -------- | -------- | -------- |
-| transition | Object | - | All parameters are optional. For details, see **transition** parameters. | 
+| transition | Object | - | All parameters are optional. For details, see **transition**.|
 
-- transition parameters
-    | Name | Type | Default Value | Mandatory | Description | 
+- transition
+  | Name| Type| Default Value| Mandatory| Description|
   | -------- | -------- | -------- | -------- | -------- |
-  | type | TransitionType | TransitionType.All | No | Transition type, which includes component addition and deletion by default.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> If **type** is not specified, insertion and deletion use the same transition type. | 
-  | opacity | number | 1 | No | Opacity effect during component transition, which is the value of the start point of insertion and the end point of deletion. | 
-  | translate | {<br/>x? : number,<br/>y? : number,<br/>z? : number<br/>} | - | No | Translation effect during component transition, which is the value of the start point of insertion and the end point of deletion. | 
-  | scale | {<br/>x? : number,<br/>y? : number,<br/>z? : number,<br/>centerX? : number,<br/>centerY? : number<br/>} | - | No | Scaling effect during component transition, which is the value of the start point of insertion and the end point of deletion. | 
-  | rotate | {<br/>x?: number,<br/>y?: number,<br/>z?: number,<br/>angle?: Angle,<br/>centerX?: Length,<br/>centerY?: Length<br/>} | - | No | Rotation effect during component transition, which is the value of the start point of insertion and the end point of deletion. | 
-
-- TransitionType enums
-    | Name | Description | 
-  | -------- | -------- |
-  | All | The transition takes effect in all scenarios. | 
-  | Insert | The transition takes effect when a component is inserted. | 
-  | Delete | The transition takes effect when a component is deleted. | 
+  | type | [TransitionType](ts-appendix-enums.md#transitiontype)  | TransitionType.All | No| Transition type, which includes component addition and deletion by default.<br>**NOTE**<br>If **type** is not specified, insertion and deletion use the same transition type.|
+  | opacity | number | 1 | No| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.|
+  | translate | {<br>x? : number,<br>y? : number,<br>z? : number<br>} | - | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>-**x**: distance to translate along the x-axis.<br>-**y**: distance to translate along the y-axis.<br>-**z**: distance to translate along the z-axis.|
+  | scale | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number,<br>centerY? : number<br>} | - | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: scale factor along the x-axis.<br>- **y**: scale factor along the y-axis.<br>- **z**: scale factor along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the scale center, respectively.<br>- If the center point is 0, it indicates the upper left corner of the component. |
+  | rotate | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle?: Angle,<br>centerX?: Length,<br>centerY?: Length<br>} | - | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: rotation vector along the x-axis.<br>- **y**: rotation vector along the y-axis.<br>- **z**: rotation vector along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively.<br>- If the center point is (0, 0), it indicates the upper left corner of the component.|
 
 
 ## Example
 
 The following example shows how to use a button to control the appearance and disappearance of another button, and how to configure the required transition animations.
 
-  
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TransitionExample {
-  @State btn1: boolean = false
+  @State btn: boolean = false
   @State show: string = "show"
+
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,}) {
       Button(this.show).width(80).height(30).backgroundColor(0x317aff).margin({bottom:50})
         .onClick(() => {
           animateTo({ duration: 1000 }, () => {
-            this.btn1 = !this.btn1
-            if(this.btn1){
+            this.btn = !this.btn
+            if(this.btn){
               this.show = "hide"
             }else{
               this.show = "show"
             }
           })
         })
-      if (this.btn1) {
+      if (this.btn) {
         // The insertion and deletion have different transition effects.
         Button() {
           Image($r('app.media.bg1')).width("80%").height(300)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
index 2d898fce4e..f9ae12d65c 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
@@ -18,27 +18,19 @@ None
 | Name | Type | Default Value | Description |
 | -------- | -------- | -------- | -------- |
 | backgroundColor | [ResourceColor](../../ui/ts-types.md) | - | Background color of a component. |
-| backgroundImage | src: [ResourceStr](../../ui/ts-types.md),<br/>repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat-enums) | - | **src**: image address, which can be the address of an Internet or a local image. (SVG images are not supported.)<br/>**repeat**: whether the background image is repeatedly used. By default, the background image is not repeatedly used. |
-| backgroundImageSize | {<br/>width?: Length,<br/>height?: Length<br/>} \| ImageSize | Auto | Width and height of the background image. When the input is a **{width: Length, height: Length}** object, if only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged. |
-| backgroundImagePosition | {<br/>x?: Length,<br/>y?: Length<br/>} \| [Alignment](ts-appendix-enums.md#alignment-enums) | {<br/>x: 0,<br/>y: 0<br/>} | Position of the background image in the component. |
-
-
-- ImageSize enums
-  | Name | Description |
-  | -------- | -------- |
-  | Cover | Default value. 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. |
-  | Auto | The original image aspect ratio is retained. |
+| backgroundImage | src: [ResourceStr](../../ui/ts-types.md),<br/>repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat) | - | **src**: image address, which can be the address of an Internet or a local image. (SVG images are not supported.)<br/>**repeat**: whether the background image is repeatedly used. By default, the background image is not repeatedly used. |
+| backgroundImageSize | {<br/>width?: Length,<br/>height?: Length<br/>} \| [ImageSize](ts-appendix-enums.md#imagesize) | Auto | Width and height of the background image. When the input is a **{width: Length, height: Length}** object, if only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged. |
+| backgroundImagePosition | {<br/>x?: Length,<br/>y?: Length<br/>} \| [Alignment](ts-appendix-enums.md#alignment) | {<br/>x: 0,<br/>y: 0<br/>} | Position of the background image in the component. |
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
 @Component
 struct BackgroundExample {
+
   build() {
     Column({ space: 5 }) {
       Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
index 1b5343a36d..723327b65d 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
@@ -19,7 +19,7 @@ None
 | Name        | Type     | Default Value                 | Description                    |
 | ------------ | ------------- | ----------------------- | ------------------------ |
 | border       | BorderOptions | -                       | Unified border style.  |
-| borderStyle  | BorderStyle   | BorderStyle.Solid | Border style of an element.|
+| borderStyle  | [BorderStyle](ts-appendix-enums.md#borderstyle)   | BorderStyle.Solid | Border style of an element.|
 | borderWidth  | Length        | 0                       | Border width of an element.    |
 | borderColor  | [ResourceColor](../../ui/ts-types.md)         | -                       | Border color of an element.    |
 | borderRadius | Length \| BorderRadiuses<sup>9+</sup>        | 0                       | Border radius of an element.|
@@ -28,10 +28,10 @@ None
 
   | Name| Type                                                    | Default Value           | Mandatory| Description  |
   | -------- | ------------------------------------------------------------ | ----------------- | ---- | ---------- |
-  | width    | [Length](../../ui/ts-types.md) \| EdgeWidth<sup>9+</sup> | 0                 | No  | Border width.|
+  | width    | [Length](../../ui/ts-types.md#length) \| EdgeWidth<sup>9+</sup> | 0                 | No  | Border width.|
   | color    | [ResourceColor](../../ui/ts-types.md) \| EdgeColor<sup>9+</sup> | 'Black'           | No  | Border color.|
-  | radius   | [Length](../../ui/ts-types.md) \| BorderRadiuses<sup>9+</sup> | 0                 | No  | Border radius.|
-  | style    | BorderStyle \| EdgeStyle<sup>9+</sup>                          | BorderStyle.Solid | No  | Border style.|
+  | radius   | [Length](../../ui/ts-types.md#length) \| BorderRadiuses<sup>9+</sup> | 0                 | No  | Border radius.|
+  | style    | [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyle<sup>9+</sup>                          | BorderStyle.Solid | No  | Border style.|
 
 
 - EdgeWidth<sup>9+</sup>
@@ -73,17 +73,10 @@ None
 
   | Name   | Type        | Mandatory | Default Value     | Description                 |
   | ------ | ----------- | --------- | ----------------- | --------------------------- |
-  | left   | BorderStyle | No        | BorderStyle.Solid | Style of the left border.   |
-  | right  | BorderStyle | No        | BorderStyle.Solid | Style of the right border.  |
-  | top    | BorderStyle | No        | BorderStyle.Solid | Style of the top border.    |
-  | bottom | BorderStyle | No        | BorderStyle.Solid | Style of the bottom border. |
-- BorderStyle enums
-  
-  | Name| Description|
-  | -------- | -------- |
-  | Dotted | Dotted border. The radius of a dot is half of **borderWidth**.|
-  | Dashed | Dashed border.|
-  | Solid  | Solid border.|
+  | left   | [BorderStyle](ts-appendix-enums.md#borderstyle) | No        | BorderStyle.Solid | Style of the left border.   |
+  | right  | [BorderStyle](ts-appendix-enums.md#borderstyle) | No        | BorderStyle.Solid | Style of the right border.  |
+  | top    | [BorderStyle](ts-appendix-enums.md#borderstyle) | No        | BorderStyle.Solid | Style of the top border.    |
+  | bottom | [BorderStyle](ts-appendix-enums.md#borderstyle) | No        | BorderStyle.Solid | Style of the bottom border. |
 
 
 ## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
index 934cb61fd7..25f16649ec 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
@@ -2,7 +2,7 @@
 
 Create a more gorgeous look for a component by applying a gradient color effect to it.
 
-> **NOTE**
+>  **NOTE**
 >
 > This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
@@ -15,37 +15,21 @@ None
 ## Attributes
 
 
-| Name | Type | Default Value | Description |
+| Name| Type| Default Value| Description|
 | -------- | -------- | -------- | -------- |
-| linearGradient | {<br/>angle?: [Angle](../../ui/ts-types.md),<br/>direction?:GradientDirection,<br/>colors: Array<[ColorStop](../../ui/ts-types.md)><br/>repeating?: boolean<br/>} | - | Linear gradient.<br/>**angle**: angle of the linear gradient.<br/>**direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br/>**colors**: description of the gradient colors.<br/>**repeating**: whether the colors are repeated. |
-| sweepGradient | {<br/>center: Point,<br/>start?: angle,<br/>end?: angle,<br/>colors: Array<[ColorStop](../../ui/ts-types.md)><br/>repeating?: boolean<br/>} | - | Angle gradient.<br/>**center**: center point of the angle gradient.<br/>**start**: start point of the angle gradient.<br/>**end**: end point of the angle gradient.<br/>**colors**: description of the gradient colors.<br/>**repeating**: whether the colors are repeated. |
-| radialGradient | {<br/>center: Point,<br/>radius: Length,<br/>colors: Array<[ColorStop](../../ui/ts-types.md)><br/>repeating: boolean<br/>} | - | Radial gradient.<br/>**center**: center point of the radial gradient.<br/>**radius**: radius of the radial gradient.<br/>**colors**: description of the gradient colors.<br/>**repeating**: whether the colors are repeated. |
-
-- GradientDirection
-
-  Enumerates the gradient directions.
-
-  | Name | Description |
-  | -------- | -------- |
-  | Left | The gradient direction is from right to left. |
-  | Top | The gradient direction is from bottom to top. |
-  | Right | The gradient direction is from left to right. |
-  | Bottom | The gradient direction is from top to bottom. |
-  | LeftTop | The gradient direction is upper left. |
-  | LeftBottom | The gradient direction is lower left. |
-  | RightTop | The gradient direction is upper right. |
-  | RightBottom | The gradient direction is lower right. |
-  | None | No gradient. |
+| linearGradient | {<br>angle?: [Angle](../../ui/ts-types.md),<br>direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),<br>colors: Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br>repeating?: boolean<br>} | - | Linear gradient.<br>**angle**: angle of the linear gradient.<br>**direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br>**colors**: description of the gradient colors.<br>**repeating**: whether the colors are repeated.|
+| sweepGradient | {<br>center: Point,<br>start?: angle,<br>end?: angle,<br>colors: Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br>repeating?: boolean<br>} | - | Angle gradient.<br>**center**: center point of the angle gradient.<br>**start**: start point of the angle gradient.<br>**end**: end point of the angle gradient.<br>**colors**: description of the gradient colors.<br>**repeating**: whether the colors are repeated.|
+| radialGradient | {<br>center: Point,<br>radius: Length,<br>colors: Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br>repeating: boolean<br>} | - | Radial gradient.<br>**center**: center point of the radial gradient.<br>**radius**: radius of the radial gradient.<br>**colors**: description of the gradient colors.<br>**repeating**: whether the colors are repeated.|
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
 @Component
 struct ColorGradientExample {
+  
   build() {
     Column({ space: 5 }) {
       Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md
index 56ea57821d..33313c0f3d 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md
@@ -1,8 +1,10 @@
 # Hover Effect
 
+The hover effect is applied to a component in hover state.
 
-> ![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.
+> **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.
 
 
 ## Required Permissions
@@ -12,23 +14,15 @@ None
 
 ## Attributes
 
-| Name | Type | Default Value | Description |
+| Name| Type| Default Value| Description|
 | -------- | -------- | -------- | -------- |
-| hoverEffect | HoverEffect | HoverEffect.Auto | Hover effect of the component in hover state. |
-
-- HoverEffect enums
-    | Name | Description |
-  | -------- | -------- |
-  | Auto | Default hover effect. |
-  | Scale | Scale effect. |
-  | Highlight | Fade-in and fade-out effect. |
-  | None | No effect. |
+| hoverEffect | [HoverEffect](ts-appendix-enums.md#hovereffect8) | HoverEffect.Auto | Hover effect of the component in hover state.|
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct HoverExample {
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
index d322c63560..0d2ddb8289 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
@@ -1,10 +1,10 @@
 # Menu Control
 
-This module provides APIs for binding a menu – a vertical list of items – to a component. This menu is displayed by long-pressing, clicking, or right-clicking the component.
+A menu – a vertical list of items – can be bound to a component and displayed by long-pressing, clicking, or right-clicking the component.
 
->  **NOTE**
->
->  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+> **NOTE**
+> 
+> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
@@ -17,21 +17,16 @@ None
 
 | Name                          | Type                                    | Default Value  | Description                                |
 | ---------------------------- | ---------------------------------------- | ---- | ---------------------------------- |
-| bindMenu                     | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | -    | Menu bound to the component, which is displayed when you click the component. Textual and custom menu items are supported.|
-| bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](../../ui/ts-types.md),<br>responseType:&nbsp;ResponseType | -    | Context menu bound to the component, which is displayed when you long-press or right-click the component. Only custom menu items are supported. |
+| bindMenu                     | Array<MenuItem&gt; \| [CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | -    | Menu bound to the component, which is displayed when you click the component. Textual and custom menu items are supported.|
+| bindContextMenu<sup>8+</sup> | content: [CustomBuilder](../../ui/ts-types.md),<br>responseType: [ResponseType](ts-appendix-enums.md#responsetype8) | -    | Context menu bound to the component, which is displayed when you long-press or right-click the component. Only custom menu items are supported. |
 
 
 - MenuItem
   | Name    | Type                     | Description         |
   | ------ | ----------------------- | ----------- |
   | value  | string                  | Menu item text.     |
-  | action | ()&nbsp;=&gt;&nbsp;void | Action triggered when a menu item is clicked.|
+  | action | () =&gt; void | Action triggered when a menu item is clicked.|
 
-- ResponseType<sup>8+</sup>
-  | Value       | Description           |
-  | ---------- | ------------- |
-  | LongPress  | The menu is displayed when the component is long-pressed.  |
-  | RightClick | The menu is displayed when the component is right-clicked.|
 
 ## Example
 
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md
index 84c2a96cd2..eb2ff6cf70 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md
@@ -19,32 +19,13 @@ None
 | -------- | -------- | -------- | -------- |
 | fontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color. |
 | fontSize | Length&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md) | - | Text size. If the value is of the number type, the unit fp is used. |
-| fontStyle | FontStyle | FontStyle.Normal | Font style of the text. |
-| fontWeight | number&nbsp;\|&nbsp;FontWeight&nbsp;\|&nbsp;string | FontWeight.FontWeightNormal | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.<br/>For common values of the **FontWeight** type, see **FontWeight** enums. |
-| fontFamily | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md) | - | Font family of the text. Use commas (,) to separate multiple fonts. The priority the fonts is the sequence in which they are placed. An example value is **Arial, sans-serif**. |
-
-
-- FontStyle enums
-  | Name | Description |
-  | -------- | -------- |
-  | Normal | Standard font style. |
-  | Italic | Italic font style. |
-
-
-- FontWeight enums
-  | Name | Description |
-  | -------- | -------- |
-  | Lighter | The font weight is lighter. |
-  | Normal | The font weight is normal. |
-  | Regular | The font weight is regular. |
-  | Medium | The font weight is medium. |
-  | Bold | The font weight is bold. |
-  | Bolder | The font weight is bolder. |
+| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | FontStyle.Normal | Font style of the text. |
+| fontWeight | number&nbsp;\|&nbsp;[FontWeight](ts-appendix-enums.md#fontweight)&nbsp;\|&nbsp;string | FontWeight.FontWeightNormal | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.<br/>For common values of the **FontWeight** type, see **FontWeight** enums. |
+| fontFamily | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource-type) | - | Font family of the text. Use commas (,) to separate multiple fonts. The priority the fonts is the sequence in which they are placed. An example value is **Arial, sans-serif**. |
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
index cc589c8078..f9bdd7a99e 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
@@ -17,15 +17,7 @@ None
 
 | Name| Type| Default Value| Description|
 | -------- | -------- | -------- | -------- |
-| visibility | Visibility | Visibility.Visible | Whether the component is visible. Note that even if a component is hidden, it needs to be re-created when the page is refreshed. Therefore, you are advised to use [conditional rendering](../../ui/ts-rending-control-syntax-if-else.md) instead under scenarios where consistently high performance is required. |
-
-
-- Visibility enums
-  | Name| Description|
-  | -------- | -------- |
-  | Hidden | The component is hidden, and a placeholder is used for it in the layout.|
-  | Visible | The component is visible.|
-  | None | The component is hidden. It is not involved in the layout, and no placeholder is used for it.|
+| visibility | [Visibility](ts-appendix-enums.md#visibility) | Visibility.Visible | Whether the component is visible. Note that even if a component is hidden, it needs to be re-created when the page is refreshed. Therefore, you are advised to use [conditional rendering](../../ui/ts-rending-control-syntax-if-else.md) instead under scenarios where consistently high performance is required. |
 
 
 ## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-key.md b/en/application-dev/reference/arkui-ts/ts-universal-events-key.md
index 16ac524052..b64f0eee26 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-events-key.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-events-key.md
@@ -24,39 +24,24 @@ None
 - Attributes
   | Name                                         | Type                   | Description                  |
   | ------------------------------------- | --------------------------- | -------------------------- |
-  | type                                  | [KeyType](#keytype-enums)   | Type of a key.                 |
+  | type                                  | [KeyType](ts-appendix-enums.md#keytype)   | Type of a key.                 |
   | [keyCode](../apis/js-apis-keycode.md) | number                      | Key code.                      |
   | keyText                               | string                      | Key value.                     |
-  | keySource                             | [KeySource](#keysource-enums) | Type of the input device that triggers the key event. |
+  | keySource                             | [KeySource](ts-appendix-enums.md#keysource) | Type of the input device that triggers the key event. |
   | deviceId                              | number                        | ID of the input device that triggers the key event. |
   | metaKey                               | number                        | State of the metakey when the key is pressed. The value **1** means the pressed state, and **0** means the unpressed state. |
   | timestamp                             | number                        | Timestamp when the key is pressed. |
 
+
 - APIs
   | Name | Description |
   | -------- | -------- |
   | stopPropagation(): void | Stops the event from bubbling upwards or downwards. |
 
-## KeyType Enums
-
-| Name | Description |
-| -------- | -------- |
-| Down | The key is pressed. |
-| Up | The key is released. |
-
-
-## KeySource Enums
-| Name | Description |
-| -------- | -------- |
-| Unknown  | Unknown input device. |
-| Keyboard | The input device is a keyboard. |
-
-
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-touch.md b/en/application-dev/reference/arkui-ts/ts-universal-events-touch.md
index 58833a25b0..515ae47030 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-events-touch.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-events-touch.md
@@ -24,7 +24,7 @@ None
 - Attributes
   | Name               | Type                                      | Description          |
   | ------------------- | ---------------------------------------- | ------------ |
-  | type                | TouchType                                | Type of the touch event.    |
+  | type                | [TouchType](ts-appendix-enums.md#touchtype)                                | Type of the touch event.    |
   | touches             | Array&lt;[TouchObject](#touchobject)&gt; | All finger information.     |
   | changedTouches      | Array&lt;[TouchObject](#touchobject)&gt; | Finger information changed.|
   | timestamp           | number                                   | Timestamp of the event.      |
@@ -40,23 +40,13 @@ None
 ## TouchObject
 | Name   | Type                         | Description                 |
 | ------- | --------------------------- | ------------------- |
-| type    | [TouchType](#touchtype-enums) | Type of the touch event.           |
+| type    | [TouchType](ts-appendix-enums.md#touchtype) | Type of the touch event.           |
 | id      | number                      | Unique identifier of a finger.           |
 | screenX | number                      | X-coordinate of the touch point relative to the left edge of the screen. |
 | screenY | number                      | Y-coordinate of the touch point relative to the upper edge of the device screen. |
 | x       | number                      | X-coordinate of the touch point relative to the left edge of the element being touched. |
 | y       | number                      | Y-coordinate of the touch point relative to the upper edge of the element being touched. |
 
-
-## TouchType Enums
-| Name    | Description             |
-| ------ | --------------- |
-| Down   | A finger is pressed.       |
-| Up     | A finger is lifted.       |
-| Move   | A finger moves on the screen in pressed state.|
-| Cancel | A touch event is canceled.     |
-
-
 ## Example
 
 ```ts
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md b/en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
index 4174d6b266..c3a5cc8936 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
@@ -16,7 +16,7 @@ None
 
 | Name | Bubbling Supported | Description |
 | -------- | -------- | -------- |
-| onHover(callback: (isHover: boolean) =&gt; void) | No | Triggered when the mouse cursor enters or leaves the component.<br/>**isHover**: whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component. |
+| onHover(callback: (isHover?: boolean) =&gt; void) | No | Triggered when the mouse cursor enters or leaves the component.<br/>**isHover**: whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component. |
 | onMouse(callback: (event?: MouseEvent) =&gt; void) | Yes | Triggered when the component is clicked by a mouse button or the mouse cursor moves on the component. The **event** parameter indicates the timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered. |
 
 
@@ -29,30 +29,11 @@ None
 | screenY | number | Y-coordinate of the clicked point relative to the upper left corner of the screen. |
 | x | number | X-coordinate of the clicked point relative to the upper left corner of the component. |
 | y | number | Y-coordinate of the clicked point relative to the upper left corner of the component. |
-| button | [MouseButton](#mousebutton) | Mouse button. |
-| action | [MouseAction](#mouseaction) | Event action. |
-
-## MouseButton
-| Name | Type | Description |
-| -------- | -------- | -------- |
-| Left | number | Left mouse button. |
-| Right | number | Right mouse button. |
-| Middle | number | Middle mouse button. |
-| Back | number | Back button on the left of the mouse. |
-| Forward | number | Forward button on the left of the mouse. |
-| None | number | No button. |
-
-## MouseAction
-| Name | Type | Description |
-| -------- | -------- | -------- |
-| Press | number | The mouse button is pressed. |
-| Release | number | The mouse button is released. |
-| Move | number | The mouse cursor moves. |
-
+| button | [MouseButton](ts-appendix-enums.md#mousebutton) | Mouse button. |
+| action | [MouseAction](ts-appendix-enums.md#mouseaction) | Event action. |
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
diff --git a/en/application-dev/ui/ts-types.md b/en/application-dev/ui/ts-types.md
index ba7b55e7e2..b0c79c0e26 100644
--- a/en/application-dev/ui/ts-types.md
+++ b/en/application-dev/ui/ts-types.md
@@ -1,169 +1,224 @@
 # Types
 
-## Length Type
+## Resource
 
-| Name| Type| Description|
-| -------- | -------- | -------- |
-| Length | string \| number | Length unit. If the input is a number, use vp. If the input is a string, explicitly specify the unit, for example, '10px', or specify the length in percentage, for example, '100%'.|
+The **Resource** type is used to reference resources for setting component attribute values.
 
+If a **Resource** object is created using `$r` or `$rawfile`, modifying attribute values of the object is prohibited.
 
-## Angle Type
+- `$r('belonging.type.name')`
 
-| Name| Type| Description|
-| -------- | -------- | -------- |
-| Angle | string \| number | Angle unit. If the input is a number, use deg. If the input is a string, use either of the following angle units:<br>- deg: for example, '100deg'<br>- rad: for example, '3.14rad' |
+  **belonging**: system or application resource. The value can be **'sys'** or **'app'**.
 
+  **type**: resource type, which can be **'color'**, **'float'**, **'string'**, or **'media'**.
 
-## Point Type
+  **name**: resource name, which is determined during resource definition.
 
-| Name| Type| Description|
-| -------- | -------- | -------- |
-| Point | [Length, Length] | Coordinates of a point. The first value is the x-axis coordinate, and the second value is the y-axis coordinate.|
+- `$rawfile('filename')`
 
+  **filename**: name of the file in **resources/rawfile** of the project.
 
-## Color Type
+  | Name                   | Type  | Readable| Writable| Description      |
+  | ----------------------- | ------ | ---- | ---- | ---------- |
+  | id                      | number | Yes  | No  | Resource ID.   |
+  | type                    | number | Yes  | No  | Resource type.   |
+  | params                  | any[]  | Yes  | No  | Optional resource parameters. |
+  | bundleName<sup>9+</sup> | string | Yes  | No  | Bundle name. |
+  | moduleName<sup>9+</sup> | string | Yes  | No  | Module name.|
 
-The Color type used by component attribute methods is described as follows:
+## Length
 
-| Name| Type| Description|
-| -------- | -------- | -------- |
-| Color | string \| number \| Color | Color information. If the input is a string, use rgb or rgba to specify the color. If the input is a number, use Hex format to specify the color. If the input is a Color enum, use a color value to specify the color.<br>- 'rgb(255, 255, 255)'<br>- 'rgba(255, 255, 255, 1.0)'<br>- Hex format: 0xrrggbb, 0xaarrggbb, '\#FFFFFF'<br>- Enum: Color.Black, Color.White |
+The **Length** type is used to represent a size unit.
 
+| Type    | Description                                                        |
+| -------- | ------------------------------------------------------------ |
+| string   | String type. Explicitly specify the length unit, for example, **'10px'**, or the length in percentage, for example, **'100%'**.|
+| number   | Number type. The default unit is vp.                                                |
+| Resource | Size referenced from system or application resources.          |
 
-The supported Color enums are described as follows:
+## ResourceStr<sup>8+</sup>
 
+The **ResourceStr** type is used to represent the types that can be used by input parameters of the string type.
 
-| Color| Value| Illustration|
-| -------- | -------- | -------- |
-| Black | 0x000000 | ![en-us_image_0000001219864153](figures/en-us_image_0000001219864153.png) |
-| Blue | 0x0000ff | ![en-us_image_0000001174104404](figures/en-us_image_0000001174104404.png) |
-| Brown | 0xa52a2a | ![en-us_image_0000001219744201](figures/en-us_image_0000001219744201.png) |
-| Gray | 0x808080 | ![en-us_image_0000001174264376](figures/en-us_image_0000001174264376.png) |
-| Green | 0x008000 | ![en-us_image_0000001174422914](figures/en-us_image_0000001174422914.png) |
-| Orange | 0xffa500 | ![en-us_image_0000001219662661](figures/en-us_image_0000001219662661.png) |
-| Pink | 0xffc0cb | ![en-us_image_0000001219662663](figures/en-us_image_0000001219662663.png) |
-| Red | 0xff0000 | ![en-us_image_0000001219662665](figures/en-us_image_0000001219662665.png) |
-| White | 0xffffff | ![en-us_image_0000001174582866](figures/en-us_image_0000001174582866.png) |
-| Yellow | 0xffff00 | ![en-us_image_0000001174582864](figures/en-us_image_0000001174582864.png) |
+| Type    | Description                                                |
+| -------- | --------------------------------------------------- |
+| string   | String type.                                        |
+| Resource | String referenced from system or application resources.|
 
+## Padding
 
-## ColorStop Type
+The **Padding** type is used to describe the padding areas in different directions of a component.
 
-ColorStop is used to describe the progressive color stop.
+| Name    | Type    | Mandatory| Description                   |
+| ------- | ------   | ---- |------------------------ |
+| top     | Length   |  No | Height of the padding area on the top of the component.  |
+| right   | Length   |  No | Width of the padding area on the right of the component.|
+| bottom  | Length   |  No | Height of the padding area at the bottom of the component.  |
+| left    | Length   |  No | Width of the padding area on the left of the component.|
 
-| Name| Type| Description|
-| -------- | -------- | -------- |
-| ColorStop | [Color, number] | Type of the progressive color stop. The first parameter specifies the color value, and the second parameter specifies the ratio of 0 to 1.|
+## Margin
 
+The **Margin** type is used to describe the margin areas in different directions of a component.
 
-## Resource Type
+| Name    | Type    | Mandatory| Description                   |
+| ------- | ------   | ---- |------------------------ |
+| top     | Length   |  No | Height of the margin area above the component.  |
+| right   | Length   |  No | Width of the margin area on the right of the component.|
+| bottom  | Length   |  No | Height of the margin area below the component.  |
+| left    | Length   |  No | Width of the margin area on the left of the component.|
 
-The Resource type is used to reference resources for setting the value of a component attribute.
+## EdgeWidths<sup>9+</sup>
 
-You can use  `$r`  or  `$rawfile`  to create a Resource object. For details, see [Resource Access](ts-resource-access.md).
+The **EdgeWidths** type is used to describe the edge widths in different directions of a component.
 
-- `$r('belonging.type.name')`
+| Name    | Type    | Mandatory| Description                |
+| ------- | ------   | ---- |--------------------- |
+| top     | Length   |  No | Width of the top edge of the component.     |
+| right   | Length   |  No | Width of the right edge of the component.     |
+| bottom  | Length   |  No | Width of the bottom edge of the component.     |
+| left    | Length   |  No | Width of the left edge of the component.     |
 
-   `belonging` : system or application resource. The value can be 'sys' or 'app'.
+## BorderRadiuses<sup>9+</sup>
 
-   `type` : resource type, which can be 'color', 'float', 'string', or 'media'.
+The **BorderRadiuses** type is used to describe the radius of the rounded corners of a component.
 
-   `name` : resource name, which is determined during resource definition.
+| Name       | Type    | Mandatory| Description                |
+| ----------- | ------  | ---- |--------------------- |
+| topLeft     | Length   |  No | Radius of the top left rounded corner of the component.     |
+| topRight    | Length   |  No | Radius of the top right rounded corner of the component.     |
+| bottomLeft  | Length   |  No | Radius of the bottom left rounded corner of the component.     |
+| bottomRight | Length   |  No | Radius of the bottom right rounded corner of the component.     |
 
-- `$rawfile('filename')`
+## EdgeColors<sup>9+</sup>
+
+The **EdgeColors** type is used to describe the edge colors of a component.
+
+| Name    | Type           | Mandatory| Description                |
+| ------- | --------------- | ---- |--------------------- |
+| top     | ResourceColor   |  No | Color of the top edge of the component.     |
+| right   | ResourceColor   |  No | Color of the right edge of the component.     |
+| bottom  | ResourceColor   |  No | Color of the bottom edge of the component.     |
+| left    | ResourceColor   |  No | Color of the left edge of the component.     |
+
+## EdgeStyles<sup>9+</sup>
+
+The **EdgeStyles** type is used to describe the edge styles of a component.
+
+| Name    | Type         | Mandatory| Description                |
+| ------- | ------------- | ---- |--------------------- |
+| top     | BorderStyle   |  No | Style of the top edge of the component.     |
+| right   | BorderStyle   |  No | Style of the right edge of the component.     |
+| bottom  | BorderStyle   |  No | Style of the bottom edge of the component.     |
+| left    | BorderStyle   |  No | Style of the left edge of the component.     |
+
+
+## Offset
+
+The **Offset** type is used to describe the offset coordinates of a component in the layout.
+
+| Name    | Type    | Mandatory| Description                |
+| -------- | ------  | ---- |--------------------- |
+| dx       | Length   |  Yes | Horizontal offset.     |
+| dy       | Length   |  Yes | Vertical offset.     |
+
+## ResourceColor<sup>8+</sup>
+
+The **ResourceColor** type is used to describe the color types of resources.
+
+| Type    | Description                   |
+| -------- | ----------------------- |
+| [Color](../reference/arkui-ts/ts-appendix-enums.md#color)    | Color enum.            |
+| number   | Color in the hexadecimal notation.           |
+| string   | Color in the RGB or RGBA notion.    |
+| Resource | Color referenced from system or application resources.|
+
+## LengthConstrain
+
+The **LengthConstrain** type is used to limit the maximum and minimum lengths of a component.
+
+| Name     | Type    | Mandatory| Description           |
+| --------- | ------  | ---- |---------------- |
+| minLength | Length   |  Yes | Minimum length of the component.  |
+| maxLength | Length   |  Yes | Maximum length of the component.  |
+
+
+## Font
+
+The **Font** type is used to set the text style.
 
-   `filename` : name of the file in resources/rawfile of the project.
+| Name  | Type                          | Mandatory| Description                                                        |
+| ------ | ------------------------------ | ---- | ------------------------------------------------------------ |
+| size   | number                         | No  | Font size. If the value is of the number type, the unit fp is used.            |
+| weight | number                         | No  | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.|
+| family | [FontWeight](../reference/arkui-ts/ts-appendix-enums.md#fontweight) \| number \| string | No  | Font family of the text. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, sans-serif'**.|
+| style  | string \| Resource             | No  | Font style.                                        |
 
-| Name| Type| Description|
-| -------- | -------- | -------- |
-| Resource | {<br>readonly id: [number];<br>readonly type: [number];<br>readonly params?: any[];<br>} | **id**: resource ID.<br>**type**: resource type (enumerated value).<br>**params**: optional parameters.<br>After a **Resource** object is created using `$r` or `$rawfile`, modifying attribute values of the object is prohibited. |
+## Area<sup>8+</sup>
 
+The **Area** type is used to describe the area information of the target element.
 
-## ResourceStr Type<sup>8+</sup>
+| Name          | Type     | Description                                             |
+| -------------- | -------- | ------------------------------------------------- |
+| width          | Length   | Width of the target element. The value is of the number type when being used as the return value and the unit is vp. |
+| height         | Length   | Height of the target element. The value is of the number type when being used as the return value and the unit is vp. |
+| position       | Position | Position of the upper left corner of the target element relative to that of the parent element.               |
+| globalPosition | Position | Position of the upper left corner of the target element relative to that of the page.                 |
 
-| Name| Type| Description|
-| -------- | -------- | -------- |
-| ResourceStr | string \| Resource| Resource string.|
 
+## Position<sup>8+</sup>
 
-## ResourceColor Type<sup>8+</sup>
+The **Position** type is used to represent coordinates of a point.
 
-| Name| Type| Description|
-| -------- | -------- | -------- |
-| ResourceColor | Color \| number \| string \| Resource | Resource color.|
+| Name  | Type   | Mandatory| Description                                       |
+| ----- | ------- | ---- | ------------------------------------------- |
+| x     | Length  | No  | X coordinate. The value is of the number type when being used as the return value and the unit is vp.  |
+| y     | Length  | No  | Y coordinate. The value is of the number type when used as the return value and the unit is vp.  |
 
-## Font Type<sup>8+</sup>
+## ConstraintSizeOptions
 
-| Name| Type| Description|
-| -------- | -------- | -------- |
-| Font | {<br/>size?: Length;<br/>weight?: <a href="https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md">FontWeight</a>  \| number  \| string;<br/>family?: string  \| <a href="ts-types.md#Resource">Resource</a>;<br/>style?: <a href="https://gitee.com/superFat/docs/blob/master/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md">FontStyle</a>;<br/>}  | Text style.<br>**size**: font size. For the number type, use the unit fp.<br>weight: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is 400. A larger value indicates a larger font weight.<br>**family**: font family. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, sans-serif'**.<br>**style**: font style. |
+The **ConstraintSizeOptions** type is used to set the constraint size of a component, thereby limiting the size range during component layout.
 
-## CustomBuilder Type<sup>8+</sup>
+| Name     | Type     | Mandatory | Description          |
+| --------- | -------- | ---- | -------------- |
+| minWidth  | Length   |  No | Minimum width of the element. |
+| maxWidth  | Length   |  No | Maximum width of the element. |
+| minHeight | Length   |  No | Minimum height of the element. |
+| maxHeight | Length   |  No | Maximum height of the element. |
 
-You can use CustomBuilder to define custom UI descriptions in component attribute methods.
+## SizeOptions
 
-| Name| Type| Description|
-| -------- | -------- | -------- |
-| CustomBuilder | () => any | Builder of component attribute methods for defining custom UI descriptions. This type of method must be decorated by @Builder. For details, see [@Builder](ts-component-based-builder.md).|
+The **SizeOptions** type is used to set the width and height.
 
+| Name   | Type     | Mandatory| Description           |
+| ------- | -------- | ---- | -------------- |
+| width   | Length   |  No | Width of the element.     |
+| height  | Length   |  No | Height of the element.     |
 
-## Example
 
-```ts
-// xxx.ets
-@Entry
-@Component
-struct dataTypeExample {
-  build() {
-    Column({ space: 5 }) {
-      Text('Length').fontColor(0xCCCCCC).fontSize(9).width('90%')
-      Text('90%').width('90%').height(40).backgroundColor(0xF9CF93)
-        .textAlign(TextAlign.Center).fontColor(Color.White)
-      Text('320').width(320).height(40).backgroundColor(0xF9CF93)
-        .textAlign(TextAlign.Center).fontColor(Color.White)
-      Text('1000px').width('1000px').height(40).backgroundColor(0xF9CF93)
-        .textAlign(TextAlign.Center).fontColor(Color.White)
+## BorderOptions
 
-      Text('Angle').fontColor(0xCCCCCC).fontSize(9).width('90%')
-      Text('45deg')
-        .width(40).height(40)
-        .rotate({ x: 0, y: 0, z: 1, angle: 45, centerX: '50%', centerY: '50%' })
-        .fontColor(Color.White)
-        .backgroundColor(0xF9CF93).textAlign(TextAlign.Center)
+The **BorderOptions** type is used to provide border information.
 
-      Text('45rad')
-        .width(40).height(40)
-        .rotate({ x: 0, y: 0, z: 1, angle: '45rad', centerX: '50%', centerY: '50%' })
-        .fontColor(Color.White)
-        .backgroundColor(0xF9CF93).textAlign(TextAlign.Center).margin({ top: 30 })
+| Name  | Type                    | Mandatory | Description      |
+| ------ | ----------------------- | ---- | ----------- |
+| width  | Length  \| EdgeWidths<sup>9+</sup>  |  No | Border width.  |
+| color  | ResourceColor \| EdgeColors<sup>9+</sup> |  No | Border color.  |
+| radius | Length \| BorderRadiuses<sup>9+</sup>  |  No | Border radius.  |
+| style  | [BorderStyle](../reference/arkui-ts/ts-appendix-enums.md#borderstyle)  \| EdgeStyles<sup>9+</sup> |  No | Border style.  |
 
-      Text('Point').fontColor(0xCCCCCC).fontSize(9).width('90%')
-      Line().width(300).height(40).startPoint([0, 20]).endPoint([300, 20])
+## ColorFilter<sup>9+</sup>
 
-      Text('Color').fontColor('#CCCCCC').fontSize(9).width('90%')
-      Text('0xF9CF93')
-        .fontColor(Color.White).textAlign(TextAlign.Center)
-        .width('90%').height(40).backgroundColor(0xF9CF93)
+The **ColorFilter** type is used to create a color filter with a 4*5 matrix.
 
-      Text('#F9CF93')
-        .fontColor(Color.White).textAlign(TextAlign.Center)
-        .width('90%').height(40).backgroundColor('#F9CF93')
+| Name       | Type     | Mandatory  | Description                                                        |
+| ----------- | -------- | ------ | --------------------------------------------------------------- |
+| constructor | number[] | Yes    | Constructor for creating a color filter with a 4\*5 matrix. The input parameter is [m*n], which is the matrix value in row m and column n. The matrix is row-first. |
 
-      Text('rgb(249, 207, 147)')
-        .fontColor(Color.White).textAlign(TextAlign.Center)
-        .width('90%').height(40).backgroundColor('rgb(249, 207, 147)')
 
-      Text('rgba(249, 207, 147, 1.0)')
-        .fontColor(Color.White).textAlign(TextAlign.Center)
-        .width('90%').height(40).backgroundColor('rgba(249, 207, 147, 1.0)')
+## CustomBuilder<sup>8+</sup>
 
-      Text('Color.Yellow')
-        .textAlign(TextAlign.Center)
-        .width('90%').height(40).backgroundColor(Color.Yellow)
-    }
-    .width('100%').margin({ top: 5 })
-  }
-}
-```
+The **CustomBuilder** type is used to define custom UI descriptions in component attribute methods.
 
-![en-us_image_0000001219982719](figures/en-us_image_0000001219982719.png)
+| Name         | Type              | Description                                                        |
+| ------------- | ---------------------- | ------------------------------------------------------------ |
+| CustomBuilder | ()&nbsp;=&gt;&nbsp;any | Builder of component attribute methods for defining custom UI descriptions. This type of method must be decorated by **@Builder**. For details, see [@Builder](ts-component-based-builder.md).|
-- 
GitLab