diff --git a/en/application-dev/quick-start/basic-resource-file-categories.md b/en/application-dev/quick-start/basic-resource-file-categories.md
new file mode 100644
index 0000000000000000000000000000000000000000..db223b338d505727b8194c50ebc2e228daed89ec
--- /dev/null
+++ b/en/application-dev/quick-start/basic-resource-file-categories.md
@@ -0,0 +1,79 @@
+# Resource File Categories
+
+
+## resources Directory
+
+All the application resource files, such as strings, images, and audio files, are stored in the **resources** directory, allowing you to easily access, use, and maintain them. The **resources** directory consists of two types of sub-directories: the **base** sub-directory and qualifiers sub-directories, and the **rawfile** sub-directory. For details, see Categories of the **resources** directory.
+
+  Example of the **resources** directory:
+
+```
+resources
+|---base  // Default directory
+|   |---element
+|   |   |---string.json
+|   |---media
+|   |   |---icon.png
+|---en_GB-vertical-car-mdpi // Example of a qualifiers sub-directory, which needs to be created on your own
+|   |---element
+|   |   |---string.json
+|   |---media
+|   |   |---icon.png
+|---rawfile  // Default directory
+```
+
+  **Table 1** Categories of the **resources** directory
+
+| Category | base and Qualifiers Sub-directories | rawfile Sub-directory |
+| -------- | -------- | -------- |
+| Structure | Sub-directories&nbsp;are&nbsp;structured&nbsp;in&nbsp;two&nbsp;levels.&nbsp;The&nbsp;directory&nbsp;name&nbsp;must&nbsp;comply&nbsp;with&nbsp;specified&nbsp;naming&nbsp;conventions&nbsp;so&nbsp;that&nbsp;its&nbsp;target&nbsp;resource&nbsp;file&nbsp;in&nbsp;the&nbsp;correct&nbsp;directory&nbsp;can&nbsp;be&nbsp;matched&nbsp;based&nbsp;on&nbsp;the&nbsp;device&nbsp;status.<br/>&nbsp;&nbsp;The&nbsp;**base**&nbsp;sub-directory&nbsp;and&nbsp;qualifiers&nbsp;sub-directories&nbsp;are&nbsp;the&nbsp;first&nbsp;level&nbsp;of&nbsp;sub-directories&nbsp;under&nbsp;**resources**.<br/>-&nbsp;The&nbsp;**base**&nbsp;sub-directory&nbsp;is&nbsp;generated&nbsp;by&nbsp;default.&nbsp;If&nbsp;no&nbsp;qualifiers&nbsp;sub-directories&nbsp;in&nbsp;the&nbsp;**resources**&nbsp;directory&nbsp;of&nbsp;the&nbsp;application&nbsp;match&nbsp;the&nbsp;device&nbsp;status,&nbsp;the&nbsp;resource&nbsp;file&nbsp;in&nbsp;the&nbsp;**base**&nbsp;sub-directory&nbsp;will&nbsp;be&nbsp;automatically&nbsp;referenced.<br/>-&nbsp;You&nbsp;need&nbsp;to&nbsp;create&nbsp;qualifiers&nbsp;sub-directories&nbsp;on&nbsp;your&nbsp;own.&nbsp;Each&nbsp;directory&nbsp;name&nbsp;consists&nbsp;of&nbsp;one&nbsp;or&nbsp;more&nbsp;qualifiers&nbsp;that&nbsp;represent&nbsp;the&nbsp;application&nbsp;scenarios&nbsp;or&nbsp;device&nbsp;characteristics.&nbsp;For&nbsp;details,&nbsp;see&nbsp;[Qualifiers&nbsp;Sub-directories](#qualifiers-sub-directories).<br/>Resource&nbsp;group&nbsp;sub-directories&nbsp;are&nbsp;located&nbsp;at&nbsp;the&nbsp;second&nbsp;level&nbsp;of&nbsp;sub-directories&nbsp;to&nbsp;store&nbsp;basic&nbsp;elements&nbsp;such&nbsp;as&nbsp;strings,&nbsp;colors,&nbsp;and&nbsp;boolean&nbsp;values,&nbsp;as&nbsp;well&nbsp;as&nbsp;resource&nbsp;files&nbsp;such&nbsp;as&nbsp;media,&nbsp;animations,&nbsp;and&nbsp;layouts.&nbsp;For&nbsp;details,&nbsp;see&nbsp;[Resource&nbsp;Group&nbsp;Sub-directories](#resource-group-sub-directories). | You&nbsp;can&nbsp;create&nbsp;multiple&nbsp;levels&nbsp;of&nbsp;sub-directories&nbsp;with&nbsp;custom&nbsp;directory&nbsp;names.&nbsp;They&nbsp;can&nbsp;be&nbsp;used&nbsp;to&nbsp;store&nbsp;various&nbsp;resource&nbsp;files.<br/>However,&nbsp;resource&nbsp;files&nbsp;in&nbsp;the&nbsp;**rawfile**&nbsp;sub-directory&nbsp;will&nbsp;not&nbsp;be&nbsp;matched&nbsp;based&nbsp;on&nbsp;the&nbsp;device&nbsp;status. |
+| Compilation | Resource&nbsp;files&nbsp;in&nbsp;the&nbsp;sub-directories&nbsp;are&nbsp;compiled&nbsp;into&nbsp;binary&nbsp;files,&nbsp;and&nbsp;each&nbsp;resource&nbsp;file&nbsp;is&nbsp;assigned&nbsp;an&nbsp;ID. | Resource&nbsp;files&nbsp;in&nbsp;the&nbsp;sub-directory&nbsp;are&nbsp;directly&nbsp;packed&nbsp;into&nbsp;the&nbsp;application&nbsp;without&nbsp;being&nbsp;compiled,&nbsp;and&nbsp;no&nbsp;IDs&nbsp;will&nbsp;be&nbsp;assigned&nbsp;to&nbsp;the&nbsp;resource&nbsp;files. |
+| Reference | Resource&nbsp;files&nbsp;in&nbsp;the&nbsp;sub-directories&nbsp;are&nbsp;referenced&nbsp;based&nbsp;on&nbsp;the&nbsp;resource&nbsp;type&nbsp;and&nbsp;resource&nbsp;name. | Resource&nbsp;files&nbsp;in&nbsp;the&nbsp;sub-directories&nbsp;are&nbsp;referenced&nbsp;based&nbsp;on&nbsp;the&nbsp;specified&nbsp;file&nbsp;path&nbsp;and&nbsp;file&nbsp;name. |
+
+
+## Qualifiers Sub-directories
+
+The name of a qualifiers sub-directory consists of one or more qualifiers that represent the application scenarios or device characteristics, covering the mobile country code (MCC), mobile network code (MNC), language, script, country or region, screen orientation, device type, color mode, and screen density. The qualifiers are separated using underscores (_) or hyphens (-). When creating a qualifiers sub-directory, you need to understand the directory naming conventions and the rules for matching qualifiers sub-directories and the device status.
+
+**Naming Conventions for Qualifiers Sub-directories**
+
+- Qualifiers are ordered in the following sequence: _MCC_MNC-language_script_country/region-screen orientation-device type-color mode-screen density_. You can select one or multiple qualifiers to name your sub-directory based on your application scenarios and device characteristics.
+
+- Separation between qualifiers: The language, script, and country/region qualifiers are separated using underscores (_); the MNC and MCC qualifiers are also separated using underscores (_); other qualifiers are separated using hyphens (-). For example, **zh_Hant_CN** and **zh_CN-car-ldpi**.
+
+- Value range of qualifiers: The value of each qualifier must meet the requirements. Otherwise, the resource files in the sub-directory cannot be matched.
+    **Table 2** Requirements for qualifier values
+  
+  | Qualifier&nbsp;Type | Description&nbsp;and&nbsp;Value&nbsp;Range | 
+  | -------- | -------- |
+  | MCC&amp;MNC | Indicates&nbsp;the&nbsp;MCC&nbsp;and&nbsp;MNC,&nbsp;which&nbsp;are&nbsp;obtained&nbsp;from&nbsp;the&nbsp;network&nbsp;where&nbsp;the&nbsp;device&nbsp;is&nbsp;registered.&nbsp;The&nbsp;MCC&nbsp;can&nbsp;be&nbsp;either&nbsp;followed&nbsp;by&nbsp;the&nbsp;MNC&nbsp;with&nbsp;an&nbsp;underscore&nbsp;(_)&nbsp;in&nbsp;between&nbsp;or&nbsp;be&nbsp;used&nbsp;independently.&nbsp;For&nbsp;example,&nbsp;**mcc460**&nbsp;represents&nbsp;China,&nbsp;and&nbsp;**mcc460_mnc00**&nbsp;represents&nbsp;China&nbsp;Mobile.<br/>For&nbsp;details&nbsp;about&nbsp;the&nbsp;value&nbsp;range,&nbsp;refer&nbsp;to&nbsp;**ITU-T&nbsp;E.212**&nbsp;(the&nbsp;international&nbsp;identification&nbsp;plan&nbsp;for&nbsp;public&nbsp;networks&nbsp;and&nbsp;subscriptions). | 
+  | Language | Indicates&nbsp;the&nbsp;language&nbsp;used&nbsp;by&nbsp;the&nbsp;device.&nbsp;The&nbsp;value&nbsp;consists&nbsp;of&nbsp;two&nbsp;or&nbsp;three&nbsp;lowercase&nbsp;letters,&nbsp;for&nbsp;example,&nbsp;**zh**&nbsp;indicates&nbsp;Chinese,&nbsp;**en**&nbsp;indicates&nbsp;English,&nbsp;and&nbsp;**mai**&nbsp;indicates&nbsp;Maithili.<br/>For&nbsp;details&nbsp;about&nbsp;the&nbsp;value&nbsp;range,&nbsp;refer&nbsp;to&nbsp;**ISO&nbsp;639**&nbsp;(codes&nbsp;for&nbsp;the&nbsp;representation&nbsp;of&nbsp;names&nbsp;of&nbsp;languages). | 
+  | Script | Indicates&nbsp;the&nbsp;script&nbsp;type&nbsp;used&nbsp;by&nbsp;the&nbsp;device.&nbsp;The&nbsp;value&nbsp;starts&nbsp;with&nbsp;one&nbsp;uppercase&nbsp;letter&nbsp;followed&nbsp;by&nbsp;three&nbsp;lowercase&nbsp;letters,&nbsp;for&nbsp;example,&nbsp;**Hans**&nbsp;indicates&nbsp;simplified&nbsp;Chinese&nbsp;and&nbsp;**Hant**&nbsp;indicates&nbsp;traditional&nbsp;Chinese.<br/>For&nbsp;details&nbsp;about&nbsp;the&nbsp;value&nbsp;range,&nbsp;refer&nbsp;to&nbsp;**ISO&nbsp;15924**&nbsp;(codes&nbsp;for&nbsp;the&nbsp;representation&nbsp;of&nbsp;names&nbsp;of&nbsp;scripts). | 
+  | Country/Region | Indicates&nbsp;the&nbsp;country&nbsp;or&nbsp;region&nbsp;where&nbsp;a&nbsp;user&nbsp;is&nbsp;located.&nbsp;The&nbsp;value&nbsp;consists&nbsp;of&nbsp;two&nbsp;or&nbsp;three&nbsp;uppercase&nbsp;letters&nbsp;or&nbsp;three&nbsp;digits,&nbsp;for&nbsp;example,&nbsp;**CN**&nbsp;indicates&nbsp;China&nbsp;and&nbsp;**GB**&nbsp;indicates&nbsp;the&nbsp;United&nbsp;Kingdom.<br/>For&nbsp;details&nbsp;about&nbsp;the&nbsp;value&nbsp;range,&nbsp;refer&nbsp;to&nbsp;**ISO&nbsp;3166-1**&nbsp;(codes&nbsp;for&nbsp;the&nbsp;representation&nbsp;of&nbsp;names&nbsp;of&nbsp;countries&nbsp;and&nbsp;their&nbsp;subdivisions). | 
+  | Screen&nbsp;orientation | Indicates&nbsp;the&nbsp;screen&nbsp;orientation&nbsp;of&nbsp;the&nbsp;device.&nbsp;The&nbsp;value&nbsp;can&nbsp;be:<br/>-&nbsp;**vertical**:&nbsp;portrait&nbsp;orientation<br/>-&nbsp;**horizontal**:&nbsp;landscape&nbsp;orientation | 
+  | Device&nbsp;type | Indicates&nbsp;the&nbsp;device&nbsp;type.&nbsp;The&nbsp;value&nbsp;can&nbsp;be:<br/>-&nbsp;**phone**:&nbsp;smartphones<br/>-&nbsp;**tablet**:&nbsp;tablets<br/>-&nbsp;**car**:&nbsp;head&nbsp;units<br/>-&nbsp;**tv**:&nbsp;smart&nbsp;TVs<br/>-&nbsp;**wearable**:&nbsp;wearables | 
+  | Color&nbsp;mode | Indicates&nbsp;the&nbsp;color&nbsp;mode&nbsp;of&nbsp;the&nbsp;device.&nbsp;The&nbsp;value&nbsp;can&nbsp;be:<br/>-&nbsp;**dark**:&nbsp;dark&nbsp;mode<br/>-&nbsp;**light**:&nbsp;light&nbsp;mode | 
+  | Screen&nbsp;density | Indicates&nbsp;the&nbsp;screen&nbsp;density&nbsp;of&nbsp;the&nbsp;device,&nbsp;in&nbsp;dpi.&nbsp;The&nbsp;value&nbsp;can&nbsp;be:<br/>-&nbsp;**sdpi**:&nbsp;screen&nbsp;density&nbsp;with&nbsp;small-scale&nbsp;dots&nbsp;per&nbsp;inch&nbsp;(SDPI).&nbsp;This&nbsp;value&nbsp;is&nbsp;applicable&nbsp;for&nbsp;devices&nbsp;with&nbsp;a&nbsp;DPI&nbsp;range&nbsp;of&nbsp;(0,&nbsp;120].<br/>-&nbsp;**mdpi**:&nbsp;screen&nbsp;density&nbsp;with&nbsp;medium-scale&nbsp;dots&nbsp;per&nbsp;inch&nbsp;(MDPI).&nbsp;This&nbsp;value&nbsp;is&nbsp;applicable&nbsp;for&nbsp;devices&nbsp;with&nbsp;a&nbsp;DPI&nbsp;range&nbsp;of&nbsp;(120,&nbsp;160].<br/>-&nbsp;**ldpi**:&nbsp;screen&nbsp;density&nbsp;with&nbsp;large-scale&nbsp;dots&nbsp;per&nbsp;inch&nbsp;(LDPI).&nbsp;This&nbsp;value&nbsp;is&nbsp;applicable&nbsp;for&nbsp;devices&nbsp;with&nbsp;a&nbsp;DPI&nbsp;range&nbsp;of&nbsp;(160,&nbsp;240].<br/>-&nbsp;**xldpi**:&nbsp;screen&nbsp;density&nbsp;with&nbsp;extra-large-scale&nbsp;dots&nbsp;per&nbsp;inch&nbsp;(XLDPI).&nbsp;This&nbsp;value&nbsp;is&nbsp;applicable&nbsp;for&nbsp;devices&nbsp;with&nbsp;a&nbsp;DPI&nbsp;range&nbsp;of&nbsp;(240,&nbsp;320].<br/>-&nbsp;**xxldpi**:&nbsp;screen&nbsp;density&nbsp;with&nbsp;extra-extra-large-scale&nbsp;dots&nbsp;per&nbsp;inch&nbsp;(XXLDPI).&nbsp;This&nbsp;value&nbsp;is&nbsp;applicable&nbsp;for&nbsp;devices&nbsp;with&nbsp;a&nbsp;DPI&nbsp;range&nbsp;of&nbsp;(320,&nbsp;480].<br/>-&nbsp;**xxxldpi**:&nbsp;screen&nbsp;density&nbsp;with&nbsp;extra-extra-extra-large-scale&nbsp;dots&nbsp;per&nbsp;inch&nbsp;(XXXLDPI).&nbsp;This&nbsp;value&nbsp;is&nbsp;applicable&nbsp;for&nbsp;devices&nbsp;with&nbsp;a&nbsp;DPI&nbsp;range&nbsp;of&nbsp;(480,&nbsp;640]. | 
+
+**Rules for Matching Qualifiers Sub-directories and Device Resources**
+
+- Qualifiers are matched with the device resources in the following priorities: MCC&amp;MNC &gt; locale (options: language, language_script, language_country/region, and language_script_country/region) &gt; screen orientation &gt; device type &gt; color mode &gt; screen density
+
+- If the qualifiers sub-directories contain the **MCC, MNC, language, script, screen orientation, device type, and color mode** qualifiers, their values must be consistent with the current device status so that the sub-directories can be used for matching the device resources. For example, the qualifiers sub-directory **zh_CN-car-ldpi** cannot be used for matching the resource files labeled **en_US**.
+
+
+## Resource Group Sub-directories
+
+You can create resource group sub-directories (including element, media, animation, layout, graphic, and profile) in the **base** and qualifiers sub-directories to store resource files of specific types. For details, see Resource group sub-directories.
+
+
+  **Table 3** Resource group sub-directories
+
+| Resource&nbsp;Group&nbsp;Sub-directory | Description | Resource&nbsp;File | 
+| -------- | -------- | -------- |
+| element | Indicates&nbsp;element&nbsp;resources.&nbsp;Each&nbsp;type&nbsp;of&nbsp;data&nbsp;is&nbsp;represented&nbsp;by&nbsp;a&nbsp;JSON&nbsp;file.&nbsp;The&nbsp;options&nbsp;are&nbsp;as&nbsp;follows:<br/>-&nbsp;**boolean**:&nbsp;boolean&nbsp;data<br/>-&nbsp;**color**:&nbsp;color&nbsp;data<br/>-&nbsp;**float**:&nbsp;floating-point&nbsp;data<br/>-&nbsp;**intarray**:&nbsp;array&nbsp;of&nbsp;integer<br/>-&nbsp;**integer**:&nbsp;integer&nbsp;data<br/>-&nbsp;**pattern**:&nbsp;pattern&nbsp;data<br/>-&nbsp;**plural**:&nbsp;plural&nbsp;form&nbsp;data<br/>-&nbsp;**strarray**:&nbsp;array&nbsp;of&nbsp;strings<br/>-&nbsp;**string**:&nbsp;string&nbsp;data | It&nbsp;is&nbsp;recommended&nbsp;that&nbsp;files&nbsp;in&nbsp;the&nbsp;**element**&nbsp;sub-directory&nbsp;be&nbsp;named&nbsp;the&nbsp;same&nbsp;as&nbsp;the&nbsp;following&nbsp;files,&nbsp;each&nbsp;of&nbsp;which&nbsp;can&nbsp;contain&nbsp;only&nbsp;data&nbsp;of&nbsp;the&nbsp;same&nbsp;type:<br/>-&nbsp;boolean.json<br/>-&nbsp;color.json<br/>-&nbsp;float.json<br/>-&nbsp;intarray.json<br/>-&nbsp;integer.json<br/>-&nbsp;pattern.json<br/>-&nbsp;plural.json<br/>-&nbsp;strarray.json<br/>-&nbsp;string.json | 
+| media | Indicates&nbsp;media&nbsp;resources,&nbsp;including&nbsp;non-text&nbsp;files&nbsp;such&nbsp;as&nbsp;images,&nbsp;audios,&nbsp;and&nbsp;videos. | The&nbsp;file&nbsp;name&nbsp;can&nbsp;be&nbsp;customized,&nbsp;for&nbsp;example,&nbsp;**icon.png**. | 
+| animation | Indicates&nbsp;animation&nbsp;resources,&nbsp;in&nbsp;XML&nbsp;format. | The&nbsp;file&nbsp;name&nbsp;can&nbsp;be&nbsp;customized,&nbsp;for&nbsp;example,&nbsp;**zoom_in.xml**. | 
+| layout | Indicates&nbsp;layout&nbsp;resources,&nbsp;in&nbsp;XML&nbsp;format. | The&nbsp;file&nbsp;name&nbsp;can&nbsp;be&nbsp;customized,&nbsp;for&nbsp;example,&nbsp;**home_layout.xml**. | 
+| graphic | Indicates&nbsp;graphic&nbsp;resources,&nbsp;in&nbsp;XML&nbsp;format. | The&nbsp;file&nbsp;name&nbsp;can&nbsp;be&nbsp;customized,&nbsp;for&nbsp;example,&nbsp;**notifications_dark.xml**. | 
+| profile | Indicates&nbsp;other&nbsp;types&nbsp;of&nbsp;files,&nbsp;which&nbsp;are&nbsp;stored&nbsp;in&nbsp;their&nbsp;raw&nbsp;formats. | The&nbsp;file&nbsp;name&nbsp;can&nbsp;be&nbsp;customized. |
diff --git a/en/application-dev/reference/apis/figures/en-us_image_0000001164217678.png b/en/application-dev/reference/apis/figures/en-us_image_0000001164217678.png
deleted file mode 100644
index 2128f0852380b2895198ab725a2f9d299c480d84..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/apis/figures/en-us_image_0000001164217678.png and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/Readme-CN.md b/en/application-dev/reference/arkui-ts/Readme-CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..50acfac05c7c49fba421388be57e3dc97d7f113e
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/Readme-CN.md
@@ -0,0 +1,132 @@
+# reference/arkui-ts
+
+- Components
+    - Universal Components
+        - Universal Events
+            - [Click Event](ts-universal-events-click.md)
+            - [Touch Event](ts-universal-events-touch.md)
+            - [Show/Hide Event](ts-universal-events-show-hide.md)
+            - [Drag/Drop Event](ts-universal-events-drag-drop.md)
+            - [Key Event](ts-universal-events-key.md)
+            - [Focus Event](ts-universal-focus-event.md)
+            - [Mouse Event](ts-universal-mouse-key.md)
+            - [Component Area Change Event](ts-universal-component-area-change-event.md)
+        - Universal Attributes
+            - [Size](ts-universal-attributes-size.md)
+            - [Location](ts-universal-attributes-location.md)
+            - [Layout Constraints](ts-universal-attributes-layout-constraints.md)
+            - [Flex Layout](ts-universal-attributes-flex-layout.md)
+            - [Border](ts-universal-attributes-border.md)
+            - [Background](ts-universal-attributes-background.md)
+            - [Opacity](ts-universal-attributes-opacity.md)
+            - [Visibility](ts-universal-attributes-visibility.md)
+            - [Enable/Disable](ts-universal-attributes-enable.md)
+            - [Overlay](ts-universal-attributes-overlay.md)
+            - [Z-order Control](ts-universal-attributes-z-order.md)
+            - [Transformation](ts-universal-attributes-transformation.md)
+            - [Image Effect Configuration](ts-universal-attributes-image-effect.md)
+            - [Shape Clipping](ts-universal-attributes-sharp-clipping.md)
+            - [Text Style](ts-universal-attributes-text-style.md)
+            - [Grid](ts-universal-attributes-grid.md)
+            - [Gradient Color](ts-universal-attributes-gradient-color.md)
+            - [Popup Control](ts-universal-attributes-popup.md)
+            - [Menu Control](ts-universal-attributes-menu.md)
+            - [Click Control](ts-universal-attributes-click.md)
+            - [Focus Control](ts-universal-attributes-focus.md)
+            - [Hover Effect](ts-universal-attributes-hover-effect.md)
+            - [Component ID](ts-universal-attributes-component-id.md)
+            - [Touch Target](ts-universal-attributes-touch-target.md)
+            - [Polymorphic Style](ts-universal-attributes-polymorphic-style.md)
+        - Gesture Processing
+            - [Gesture Binding Methods](ts-gesture-settings.md)
+            - Basic Gestures
+                - [TapGesture](ts-basic-gestures-tapgesture.md)
+                - [LongPressGesture](ts-basic-gestures-longpressgesture.md)
+                - [PanGesture](ts-basic-gestures-pangesture.md)
+                - [PinchGesture](ts-basic-gestures-pinchgesture.md)
+                - [RotationGesture](ts-basic-gestures-rotationgesture.md)
+                - [SwipeGesture](ts-basic-gestures-swipegesture.md)
+            - [Combined Gestures](ts-combined-gestures.md)
+    - Basic Components
+        - [Blank](ts-basic-components-blank.md)
+        - [Button](ts-basic-components-button.md)
+        - [DataPanel](ts-basic-components-datapanel.md)
+        - [DatePicker](ts-basic-components-datepicker.md)
+        - [Divider](ts-basic-components-divider.md)
+        - [Image](ts-basic-components-image.md)
+        - [ImageAnimator](ts-basic-components-imageanimator.md)
+        - [Progress](ts-basic-components-progress.md)
+        - [QRCode](ts-basic-components-qrcode.md)
+        - [Rating](ts-basic-components-rating.md)
+        - [Select](ts-basic-components-rating.md)
+        - [Span](ts-basic-components-span.md)
+        - [Slider](ts-basic-components-slider.md)
+        - [Text](ts-basic-components-text.md)
+        - [TextArea](ts-basic-components-textarea.md)
+        - [TextInput](ts-basic-components-textinput.md)
+        - [TextPicker](ts-basic-components-textpicker.md)
+        - [TextTimer](ts-basic-components-texttimer.md)
+        - [Toggle](ts-basic-components-toggle.md)
+        - [TextClock](ts-basic-components-textclock.md)
+    - Container Components
+        - [AlphabetIndexer](ts-container-alphabet-indexer.md)
+        - [Badge](ts-container-badge.md)
+        - [Column](ts-container-column.md)
+        - [ColumnSplit](ts-container-columnsplit.md)
+        - [Counter](ts-container-counter.md)
+        - [Flex](ts-container-flex.md)
+        - [GridContainer](ts-container-gridcontainer.md)
+        - [Grid](ts-container-grid.md)
+        - [GridItem](ts-container-griditem.md)
+        - [List](ts-container-list.md)
+        - [ListItem](ts-container-listitem.md)
+        - [Navigator](ts-container-navigator.md)
+        - [Navigation](ts-basic-components-navigation.md)
+        - [Panel](ts-container-panel.md)
+        - [Row](ts-container-row.md)
+        - [RowSplit](ts-container-rowsplit.md)
+        - [Scroll](ts-container-scroll.md)
+        - [ScrollBar](ts-basic-components-scrollbar.md)
+        - [Stack](ts-container-stack.md)
+        - [Swiper](ts-container-swiper.md)
+        - [Tabs](ts-container-tabs.md)
+        - [TabContent](ts-container-tabcontent.md)
+    - Media Components
+        - [Video](ts-media-components-video.md)
+    - Drawing Components
+        - [Circle](ts-drawing-components-circle.md)
+        - [Ellipse](ts-drawing-components-ellipse.md)
+        - [Line](ts-drawing-components-line.md)
+        - [Polyline](ts-drawing-components-polyline.md)
+        - [Polygon](ts-drawing-components-polygon.md)
+        - [Path](ts-drawing-components-path.md)
+        - [Rect](ts-drawing-components-rect.md)
+        - [Shape](ts-drawing-components-shape.md)
+    - Canvas Components
+        - [Canvas](ts-components-canvas-canvas.md)
+        - [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)
+        - [OffscreenCanvasRenderingConxt2D](ts-offscreencanvasrenderingcontext2d.md)
+        - [Lottie](ts-components-canvas-lottie.md)
+        - [Path2D](ts-components-canvas-path2d.md)
+        - [CanvasGradient](ts-components-canvas-canvasgradient.md)
+        - [ImageBitmap](ts-components-canvas-imagebitmap.md)
+        - [ImageData](ts-components-canvas-imagedata.md)
+- Animation
+    - [AnimatorProperty](ts-animatorproperty.md)
+    - [Explicit Animation](ts-explicit-animation.md)
+    - Transition Animation
+        - [Page Transition](ts-page-transition-animation.md)
+        - [Component Transition](ts-transition-animation-component.md)
+        - [Transition of Shared Elements](ts-transition-animation-shared-elements.md)
+    - [Motion Path Animation](ts-motion-path-animation.md)
+    - [Matrix Transformation](ts-matrix-transformation.md)
+    - [Interpolation Calculation](ts-interpolation-calculation.md)
+- Global UI Methods
+    - [Image Cache](ts-methods-image-cache.md)
+    - [Media Query](ts-methods-media-query.md)
+    - Pop-up Window
+        - [Alert Dialog Box](ts-methods-alert-dialog-box.md)
+        - [Action Sheet](ts-methods-action-sheet.md)
+        - [Custom Dialog Box](ts-methods-custom-dialog-box.md)
+- Appendix
+    - [Built-in Enums](ts-appendix-enums.md)
diff --git a/en/application-dev/reference/arkui-ts/Readme-EN.md b/en/application-dev/reference/arkui-ts/Readme-EN.md
deleted file mode 100644
index 775bd3d067c466e6415a565eaefb15964956c61e..0000000000000000000000000000000000000000
--- a/en/application-dev/reference/arkui-ts/Readme-EN.md
+++ /dev/null
@@ -1,136 +0,0 @@
-# TypeScript-based Declarative Development Paradigm
-
--   [Components](ts-components.md)
-    -   [Universal Components](ts-universal-components.md)
-        -   [Universal Events](ts-universal-events.md)
-            -   [Click Event](ts-universal-events-click.md)
-            -   [Touch](ts-universal-events-touch.md)
-            -   [Show/Hide Event](ts-universal-events-show-hide.md)
-            -   [Key Event](ts-universal-events-key.md)
-            -   [Component Area Change Event](ts-universal-events-component-area-change.md)
-
-        -   [Universal Attributes](ts-universal-attributes.md)
-            -   [Size](ts-universal-attributes-size.md)
-            -   [Location](ts-universal-attributes-location.md)
-            -   [Layout Constraints](ts-universal-attributes-layout-constraints.md)
-            -   [Flex Layout](ts-universal-attributes-flex-layout.md)
-            -   [Border Configuration](ts-universal-attributes-border.md)
-            -   [Background](ts-universal-attributes-background.md)
-            -   [Opacity](ts-universal-attributes-opacity.md)
-            -   [Visibility](ts-universal-attributes-visibility.md)
-            -   [Enable/Disable](ts-universal-attributes-enable.md)
-            -   [Overlay](ts-universal-attributes-overlay.md)
-            -   [Z-order Control](ts-universal-attributes-z-order.md)
-            -   [Transformation](ts-universal-attributes-transformation.md)
-            -   [Image Effect Configuration](ts-universal-attributes-image-effect.md)
-            -   [Shape Clipping](ts-universal-attributes-sharp-clipping.md)
-            -   [Text Style](ts-universal-attributes-text-style.md)
-            -   [Grid](ts-universal-attributes-grid.md)
-            -   [Gradient Color](ts-universal-attributes-gradient-color.md)
-            -   [Popup Control](ts-universal-attributes-popup.md)
-            -   [Menu Control](ts-universal-attributes-menu.md)
-            -   [Click Control](ts-universal-attributes-touchable.md)
-            -   [Touch Target](ts-universal-attributes-response-region.md)
-
-        -   [Gesture Processing](ts-gesture-processing.md)
-            -   [Gesture Binding Methods](ts-gesture-settings.md)
-            -   [Basic Gestures](ts-basic-gestures.md)
-                -   [TapGesture](ts-basic-gestures-tapgesture.md)
-                -   [LongPressGesture](ts-basic-gestures-longpressgesture.md)
-                -   [PanGesture](ts-basic-gestures-pangesture.md)
-                -   [PinchGesture](ts-basic-gestures-pinchgesture.md)
-                -   [RotationGesture](ts-basic-gestures-rotationgesture.md)
-                -   [SwipeGesture](ts-basic-gestures-swipegesture.md)
-
-            -   [Combined Gestures](ts-combined-gestures.md)
-
-    -   [Basic Components](ts-basic-components.md)
-        -   [Blank](ts-basic-components-blank.md)
-        -   [Button](ts-basic-components-button.md)
-        -   [DataPanel](ts-basic-components-datapanel.md)
-        -   [Divider](ts-basic-components-divider.md)
-        -   [Gauge](ts-basic-components-gauge.md)
-        -   [Image](ts-basic-components-image.md)
-        -   [ImageAnimator](ts-basic-components-imageanimator.md)
-        -   [LoadingProgress](ts-basic-components-loadingprogress.md)
-        -   [Marquee](ts-basic-components-marquee.md)
-        -   [Progress](ts-basic-components-progress.md)
-        -   [QRCode](ts-basic-components-qrcode.md)
-        -   [Rating](ts-basic-components-rating.md)
-        -   [Select](ts-basic-components-select.md)
-        -   [Slider](ts-basic-components-slider.md)
-        -   [Span](ts-basic-components-span.md)
-        -   [Text](ts-basic-components-text.md)
-        -   [TextArea](ts-basic-components-textarea.md)
-        -   [TextInput](ts-basic-components-textinput.md)
-        -   [Toggle](ts-basic-components-toggle.md)
-        -   [TextClock](ts-basic-components-textclock.md)
-    
-    -   [Container Components](ts-components-container.md)
-        -   [AlphabetIndexer](ts-container-alphabet-indexer.md)
-        -   [Badge](ts-container-badge.md)
-        -   [Column](ts-container-column.md)
-        -   [ColumnSplit](ts-container-columnsplit.md)
-        -   [Counter](ts-container-counter.md)
-        -   [Flex](ts-container-flex.md)
-        -   [GridContainer](ts-container-gridcontainer.md)
-        -   [Grid](ts-container-grid.md)
-        -   [GridItem](ts-container-griditem.md)
-        -   [List](ts-container-list.md)
-        -   [ListItem](ts-container-listitem.md)
-        -   [Navigator](ts-container-navigator.md)
-        -   [Navigation](ts-container-navigation.md)
-        -   [Panel](ts-container-panel.md)
-        -   [Row](ts-container-row.md)
-        -   [RowSplit](ts-container-rowsplit.md)
-        -   [Scroll](ts-container-scroll.md)
-        -   [ScrollBar](ts-container-scrollbar.md)
-        -   [Stack](ts-container-stack.md)
-        -   [Swiper](ts-container-swiper.md)
-        -   [Tabs](ts-container-tabs.md)
-        -   [TabContent](ts-container-tabcontent.md)
-        
-        -   [Refresh](ts-container-refresh.md)
-    -   [Drawing Components](ts-drawing-components.md)
-        
-        -   [Circle](ts-drawing-components-circle.md)
-        -   [Ellipse](ts-drawing-components-ellipse.md)
-        -   [Line](ts-drawing-components-line.md)
-        -   [Polyline](ts-drawing-components-polyline.md)
-        -   [Polygon](ts-drawing-components-polygon.md)
-    -   [Path](ts-drawing-components-path.md)
-        -   [Rect](ts-drawing-components-rect.md)
-        -   [Shape](ts-drawing-components-shape.md)
-    
-    -   [Canvas Components](ts-components-canvas.md)
-        -   [Canvas](ts-components-canvas-canvas.md)
-        -   [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)
-        -   [OffscreenCanvasRenderingConxt2D](ts-offscreencanvasrenderingcontext2d.md)
-        -   [Lottie](ts-components-canvas-lottie.md)
-        -   [Path2D](ts-components-canvas-path2d.md)
-    -   [CanvasGradient](ts-components-canvas-canvasgradient.md)
-        -   [ImageBitmap](ts-components-canvas-imagebitmap.md)
-        -   [ImageData](ts-components-canvas-imagedata.md)
--   [Animation](ts-animation.md)
-    -   [Attribute Animation](ts-animatorproperty.md)
-    -   [Explicit Animation](ts-explicit-animation.md)
-    -   [Transition Animation](ts-transition-animation.md)
-        -   [Page Transition](ts-page-transition-animation.md)
-        -   [Component Transition](ts-transition-animation-component.md)
-        -   [Transition of Shared Elements](ts-transition-animation-shared-elements.md)
-
-    -   [Motion Path Animation](ts-motion-path-animation.md)
-    -   [Matrix Transformation](ts-matrix-transformation.md)
-    -   [Interpolation Calculation](ts-interpolation-calculation.md)
-
--   [Global UI Methods](ts-global-ui-methods.md)
-    -   [Alert Dialog Box](ts-methods-alert-dialog-box.md)
-    -   [Custom Dialog box](ts-methods-custom-dialog-box.md)
-    -   [Image Cache](ts-methods-image-cache.md)
-    -   [Media Query](ts-methods-media-query.md)
-    -   [List Selection Dialog Box](ts-methods-action-sheet.md)
-
--   [Appendix](ts-appendix.md)
-    
-    -   [Built-in Enums](ts-appendix-enums.md)
-
diff --git a/en/application-dev/reference/arkui-ts/figures/column.gif b/en/application-dev/reference/arkui-ts/figures/column.gif
deleted file mode 100644
index 3213fc124d255584be8f21a3074806c304953e7b..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/column.gif and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595194.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595194.png
deleted file mode 100644
index 348499bc3787a833ab3da5f87500b11c9c93773e..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595194.png and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192915178.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192915178.gif
deleted file mode 100644
index b1808e80a0e4d055d54b886ecca3ddc8efa64b9a..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192915178.gif and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001196780640.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001196780640.png
deleted file mode 100644
index 857e773f72d0cd7cd9ae13f50aa843a11aae4f97..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001196780640.png and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/border.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898466.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/border.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898466.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/appear.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898468.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/appear.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898468.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/imageanimator.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898470.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/imageanimator.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898470.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193322910.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898472.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193322910.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898472.png
diff --git a/en/application-dev/reference/arkui-ts/figures/swiper.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898474.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/swiper.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898474.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/datapanel.jpg b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898476.jpg
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/datapanel.jpg
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898476.jpg
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193642848.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898480.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193642848.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898480.png
diff --git a/en/application-dev/reference/arkui-ts/figures/11111-5.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898482.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/11111-5.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898482.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239925031.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898484.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239925031.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898484.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898486.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898486.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ccfd08401bceb09625add910f66bea401bcaf173
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898486.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595238.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898488.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595238.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898488.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238401029.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898490.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238401029.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898490.png
diff --git a/en/application-dev/reference/arkui-ts/figures/slider.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898492.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/slider.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898492.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/sharedtransition.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898494.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/sharedtransition.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898494.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en_image_0000001174582862.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898496.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en_image_0000001174582862.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898496.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/transition.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898498.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/transition.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898498.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/flex02.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898500.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/flex02.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898500.png
diff --git a/en/application-dev/reference/arkui-ts/figures/back.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898502.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/back.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898502.png
diff --git a/en/application-dev/reference/arkui-ts/figures/1.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898504.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/1.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898504.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237715165.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898506.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237715165.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898506.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193075164.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898508.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193075164.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898508.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193322850.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898510.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193322850.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898510.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898512.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898512.gif
new file mode 100644
index 0000000000000000000000000000000000000000..18bc8e9fbfba12c94b617b372b9c85d92c00088a
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898512.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192755182.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898514.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192755182.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898514.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192755178.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898516.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192755178.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898516.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237715159.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898518.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237715159.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898518.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595216.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898520.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595216.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898520.png
diff --git a/en/application-dev/reference/arkui-ts/figures/toggle.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898522.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/toggle.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898522.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/5.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058456.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/5.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058456.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/popup.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058458.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/popup.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058458.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/pagetransition2.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058460.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/pagetransition2.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058460.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193075180.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058462.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193075180.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058462.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058464.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058464.gif
new file mode 100644
index 0000000000000000000000000000000000000000..f0962619f5df0fec543cd693195045c9203378d9
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058464.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192915154.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058466.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192915154.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058466.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058468.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058468.png
new file mode 100644
index 0000000000000000000000000000000000000000..b15b9d83968672a6771322069b47394cfb3b8c1f
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058468.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/customdialog.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058470.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/customdialog.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058470.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194911566.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058472.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194911566.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058472.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194605518.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058474.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194605518.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058474.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058476.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058476.png
new file mode 100644
index 0000000000000000000000000000000000000000..77113dac339f335dc44b3fb4a271e92f7c8cbb00
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058476.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238556395.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058478.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238556395.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058478.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237555181.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058480.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237555181.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058480.png
diff --git a/en/application-dev/reference/arkui-ts/figures/rowsplit.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058482.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/rowsplit.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058482.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/duande.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058484.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/duande.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058484.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/navigator.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058486.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/navigator.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058486.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/ellipse.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058488.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/ellipse.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058488.png
diff --git a/en/application-dev/reference/arkui-ts/figures/gesturegroup.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058490.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/gesturegroup.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058490.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/path.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058492.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/path.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058492.png
diff --git a/en/application-dev/reference/arkui-ts/figures/s3.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058494.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/s3.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058494.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193075134.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058496.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193075134.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058496.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595228.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058498.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595228.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058498.png
diff --git a/en/application-dev/reference/arkui-ts/figures/11111.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058500.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/11111.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058500.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237555155.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058502.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237555155.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058502.png
diff --git a/en/application-dev/reference/arkui-ts/figures/displaypriorityexample.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058504.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/displaypriorityexample.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058504.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238282827.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058506.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238282827.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058506.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001201475612.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058508.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001201475612.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058508.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192755172.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058510.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192755172.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058510.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237555151.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058512.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237555151.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058512.png
diff --git a/en/application-dev/reference/arkui-ts/figures/enabled.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218428.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/enabled.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218428.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/tabs.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218430.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/tabs.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218430.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/polyline.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218432.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/polyline.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218432.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/grid-3.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218434.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/grid-3.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218434.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193075168.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218436.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193075168.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218436.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193802788.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218438.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193802788.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218438.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193737314.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218440.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193737314.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218440.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237355133.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218442.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237355133.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218442.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238402777.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218444.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238402777.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218444.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237355135.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218446.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237355135.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218446.png
diff --git a/en/application-dev/reference/arkui-ts/figures/2222.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218448.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/2222.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218448.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218450.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218450.gif
new file mode 100644
index 0000000000000000000000000000000000000000..a5092180309ecb061248cc205e4bd667eb290085
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218450.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/clip.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218452.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/clip.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218452.png
diff --git a/en/application-dev/reference/arkui-ts/figures/rect.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218454.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/rect.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218454.png
diff --git a/en/application-dev/reference/arkui-ts/figures/position.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218456.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/position.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218456.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/polygon.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218458.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/polygon.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218458.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/flex03.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218462.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/flex03.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218462.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/222.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218464.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/222.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218464.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193756416.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218466.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193756416.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218466.png
diff --git a/en/application-dev/reference/arkui-ts/figures/gif1.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218468.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/gif1.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218468.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/badge.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218470.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/badge.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218470.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193075178.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218472.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193075178.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218472.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237355137.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218474.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237355137.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218474.png
diff --git a/en/application-dev/reference/arkui-ts/figures/landscape-display.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218476.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/landscape-display.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218476.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238281069.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218478.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238281069.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218478.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192755188.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218480.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192755188.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218480.png
diff --git a/en/application-dev/reference/arkui-ts/figures/unnaming-(4).png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218482.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/unnaming-(4).png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218482.png
diff --git a/en/application-dev/reference/arkui-ts/figures/colorgradient.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218484.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/colorgradient.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218484.png
diff --git a/en/application-dev/reference/arkui-ts/figures/alphabetindexer.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378392.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/alphabetindexer.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378392.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/flex.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378394.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/flex.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378394.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193075170.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378396.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193075170.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378396.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238522733.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378398.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238522733.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378398.png
diff --git a/en/application-dev/reference/arkui-ts/figures/stack.jpg b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378400.jpg
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/stack.jpg
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378400.jpg
diff --git a/en/application-dev/reference/arkui-ts/figures/textinput1.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378402.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/textinput1.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378402.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595226.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378404.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595226.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378404.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595232.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378406.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595232.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378406.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192755194.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378408.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192755194.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378408.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237475139.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378410.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237475139.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378410.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192915130.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378412.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192915130.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378412.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193481094.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378414.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193481094.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378414.png
diff --git a/en/application-dev/reference/arkui-ts/figures/device-width-type-lg.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378416.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/device-width-type-lg.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378416.png
diff --git a/en/application-dev/reference/arkui-ts/figures/blank2.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378418.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/blank2.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378418.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/motion.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378420.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/motion.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378420.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/columnsplit.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378422.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/columnsplit.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378422.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/counter.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378424.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/counter.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378424.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/flex04-2.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378426.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/flex04-2.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378426.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/q1.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378428.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/q1.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378428.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193801070.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378430.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193801070.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378430.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378432.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378432.gif
new file mode 100644
index 0000000000000000000000000000000000000000..b0667769e77a2a2d1b131736bdce96489b7e064e
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378432.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192915162.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378434.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192915162.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378434.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192755180.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378436.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192755180.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378436.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595230.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378438.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595230.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378438.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237555163.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378440.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237555163.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378440.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237715153.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378442.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237715153.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378442.png
diff --git a/en/application-dev/reference/arkui-ts/figures/attranimation.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378444.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/attranimation.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378444.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595214.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378446.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595214.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378446.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237355087.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237355087.gif
deleted file mode 100644
index 38502c83c52aa9229da69d638e4b9b1f5a35009b..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237355087.gif and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237475107.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237475107.gif
deleted file mode 100644
index b3966d0abb39044241ee174a126fcf919f402d98..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237475107.gif and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237555149.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858381.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237555149.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858381.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858383.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858383.gif
new file mode 100644
index 0000000000000000000000000000000000000000..b8a7961adce1b592b8fdbce98966c70cf1da68e8
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858383.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/opacity.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858385.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/opacity.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858385.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/line.jpg b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858387.jpg
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/line.jpg
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858387.jpg
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193075166.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858389.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193075166.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858389.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237715151.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858391.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237715151.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858391.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193801072.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858393.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193801072.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858393.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238521021.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858395.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238521021.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858395.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194942468.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858397.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194942468.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858397.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/textarea1.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858399.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/textarea1.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858399.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858401.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858401.gif
new file mode 100644
index 0000000000000000000000000000000000000000..587325d41b6320ff8e25afd9d2b19e3d1b5a11d5
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858401.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/rotationgesture.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858403.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/rotationgesture.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858403.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/device-width-type-sm.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858405.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/device-width-type-sm.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858405.png
diff --git a/en/application-dev/reference/arkui-ts/figures/blank1.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858407.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/blank1.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858407.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/position2.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858409.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/position2.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858409.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858411.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858411.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7b839683df88c833812ce75bd656abd22dae950f
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858411.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/flex05.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858413.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/flex05.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858413.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/qrcode.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858415.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/qrcode.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858415.png
diff --git a/en/application-dev/reference/arkui-ts/figures/tapgesture.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858417.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/tapgesture.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858417.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/s1.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858419.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/s1.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858419.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193321138.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858421.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193321138.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858421.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193481096.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858423.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193481096.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858423.png
diff --git a/en/application-dev/reference/arkui-ts/figures/grid.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858425.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/grid.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858425.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193642802.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858427.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193642802.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858427.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237715141.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858429.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237715141.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858429.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193075172.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858431.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193075172.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858431.png
diff --git a/en/application-dev/reference/arkui-ts/figures/griditem.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858433.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/griditem.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858433.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/unnaming-(3).png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858435.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/unnaming-(3).png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858435.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193075122.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978331.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193075122.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978331.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/textstyle.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978333.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/textstyle.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978333.png
diff --git a/en/application-dev/reference/arkui-ts/figures/pagetransition1.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978335.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/pagetransition1.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978335.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237355131.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978339.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237355131.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978339.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237715155.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978341.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237715155.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978341.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193802836.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978343.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193802836.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978343.png
diff --git a/en/application-dev/reference/arkui-ts/figures/animateto.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978345.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/animateto.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978345.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595224.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978347.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595224.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978347.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237715149.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978349.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237715149.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978349.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595234.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978351.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595234.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978351.png
diff --git a/en/application-dev/reference/arkui-ts/figures/circle.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978353.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/circle.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978353.png
diff --git a/en/application-dev/reference/arkui-ts/figures/lottie-ark-2-0-canvas-ui-animate.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978355.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/lottie-ark-2-0-canvas-ui-animate.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978355.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/list.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978357.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/list.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978357.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/66666.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978359.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/66666.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978359.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en_image_0000001186807708.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978361.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en_image_0000001186807708.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978361.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/scroll.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978363.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/scroll.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978363.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/flex01.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978365.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/flex01.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978365.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/s4-(1).png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978367.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/s4-(1).png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978367.png
diff --git a/en/application-dev/reference/arkui-ts/figures/f.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978369.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/f.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978369.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/pangesture.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978371.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/pangesture.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978371.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193481098.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978373.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193481098.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978373.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193322872.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978375.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193322872.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978375.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192915180.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978377.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192915180.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978377.png
diff --git a/en/application-dev/reference/arkui-ts/figures/portrait-display.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978379.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/portrait-display.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978379.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/panel.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978381.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/panel.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978381.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192915184.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978383.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192915184.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978383.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192755174.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978385.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192755174.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978385.png
diff --git a/en/application-dev/reference/arkui-ts/figures/alertdialog.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978387.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/alertdialog.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978387.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/text2.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058391.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/text2.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058391.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/2-01.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058393.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/2-01.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058393.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237555173.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058395.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237555173.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058395.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193641084.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058397.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193641084.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058397.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237555165.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058399.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237555165.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058399.png
diff --git a/en/application-dev/reference/arkui-ts/figures/1111.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058401.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/1111.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058401.png
diff --git a/en/application-dev/reference/arkui-ts/figures/gif4.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058403.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/gif4.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058403.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237555179.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058405.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237555179.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058405.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058407.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058407.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2deeb8445fe0f3b66d2b0facbf9e0f0ed9911ca
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058407.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193482814.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058409.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193482814.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058409.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595220.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058411.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192595220.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058411.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237555167.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058413.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237555167.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058413.png
diff --git a/en/application-dev/reference/arkui-ts/figures/device-width-type-md.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058415.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/device-width-type-md.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058415.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058417.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058417.png
new file mode 100644
index 0000000000000000000000000000000000000000..999ad44c80a018d45353044e13923a8566bf3cf0
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058417.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/pinchgesture.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058419.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/pinchgesture.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058419.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/visibility.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058421.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/visibility.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058421.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/rating.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058423.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/rating.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058423.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/longpressgesture.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058425.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/longpressgesture.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058425.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238602821.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058427.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238602821.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058427.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238282783.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058429.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238282783.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058429.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193321136.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058431.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193321136.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058431.png
diff --git a/en/application-dev/reference/arkui-ts/figures/keyevent.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058433.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/keyevent.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058433.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238601051.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058435.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238601051.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058435.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238537297.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058437.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238537297.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058437.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238402745.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058439.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238402745.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058439.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238401031.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058441.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238401031.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058441.png
diff --git a/en/application-dev/reference/arkui-ts/figures/zindex.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058443.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/zindex.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058443.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192915158.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058445.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192915158.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058445.png
diff --git a/en/application-dev/reference/arkui-ts/figures/text1.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138337.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/text1.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138337.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/listitem.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138339.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/listitem.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138339.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/button.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138341.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/button.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138341.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238476361.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138343.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238476361.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138343.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138345.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138345.gif
new file mode 100644
index 0000000000000000000000000000000000000000..32d2334360f9fd90afd1709f50a39add4e2196c1
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138345.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193641086.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138347.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193641086.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138347.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238281067.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138349.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238281067.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138349.png
diff --git a/en/application-dev/reference/arkui-ts/figures/gif2.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138351.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/gif2.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138351.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238522783.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138353.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238522783.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138353.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138355.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138355.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c269eab06d9dd52463481510edc7089be19cb2b6
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138355.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237475137.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138357.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237475137.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138357.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238457271.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138359.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238457271.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138359.png
diff --git a/en/application-dev/reference/arkui-ts/figures/span.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138363.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/span.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138363.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/gif-0.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138365.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/gif-0.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138365.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/size.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138367.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/size.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138367.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/mediaquery.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138369.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/mediaquery.gif
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138369.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/flex04.jpg b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138371.jpg
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/flex04.jpg
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138371.jpg
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193436448.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138373.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193436448.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138373.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237475123.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138375.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237475123.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138375.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238602771.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138377.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238602771.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138377.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193482866.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138379.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193482866.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138379.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238601053.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138381.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238601053.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138381.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238521019.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138383.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238521019.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138383.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237355121.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138385.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237355121.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138385.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237475133.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138387.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237475133.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138387.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237475113.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138389.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001237475113.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138389.png
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193075154.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138391.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193075154.png
rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138391.png
diff --git a/en/application-dev/reference/arkui-ts/figures/gif-4.gif b/en/application-dev/reference/arkui-ts/figures/gif-4.gif
deleted file mode 100644
index 5bcc79b53b227b6bd0484045d20743d9686c8e08..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/gif-4.gif and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/gif.gif b/en/application-dev/reference/arkui-ts/figures/gif.gif
deleted file mode 100644
index 8eceb3bf5313485a1fedda5768e70cdb5febc464..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/gif.gif and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/loadingProgress.png b/en/application-dev/reference/arkui-ts/figures/loadingProgress.png
deleted file mode 100644
index afc52b1a469c858e3029282e193b684114803db0..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/loadingProgress.png and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/progress.png b/en/application-dev/reference/arkui-ts/figures/progress.png
deleted file mode 100644
index 0ff7595bc619e62c05376cd7b57a473dde3e9386..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/progress.png and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/ts-animation.md b/en/application-dev/reference/arkui-ts/ts-animation.md
index b5406cb67c82d3843280685dfc33bde75a76d689..3334eabe046e1539342decebfc232028fcf4a31b 100644
--- a/en/application-dev/reference/arkui-ts/ts-animation.md
+++ b/en/application-dev/reference/arkui-ts/ts-animation.md
@@ -1,15 +1,15 @@
-# Animation<a name="EN-US_TOPIC_0000001237355053"></a>
+# Animation
 
--   **[Attribute Animation](ts-animatorproperty.md)**  
 
--   **[Explicit Animation](ts-explicit-animation.md)**  
 
--   **[Transition Animation](ts-transition-animation.md)**  
+- **[AnimatorProperty](ts-animatorproperty.md)**
 
--   **[Motion Path Animation](ts-motion-path-animation.md)**  
+- **[Explicit Animation](ts-explicit-animation.md)**
 
--   **[Matrix Transformation](ts-matrix-transformation.md)**  
+- **[Transition Animation](ts-transition-animation.md)**
 
--   **[Interpolation Calculation](ts-interpolation-calculation.md)**  
+- **[Motion Path Animation](ts-motion-path-animation.md)**
 
+- **[Matrix Transformation](ts-matrix-transformation.md)**
 
+- **[Interpolation Calculation](ts-interpolation-calculation.md)**
\ No newline at end of file
diff --git a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md
index 1e78fb758a57f820506df5029e8e3283108e602c..f7073f5ef9a06093ff96768acf5c99585fbca0fe 100644
--- a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md
+++ b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md
@@ -1,148 +1,42 @@
-# Attribute Animation<a name="EN-US_TOPIC_0000001192915094"></a>
+# AnimatorProperty
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-When the universal attributes of a component change, you can create an  **AnimatorProperty**  for gradient to improve user experience.
+> ![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.
 
-<a name="table618mcpsimp"></a>
-<table><thead align="left"><tr id="row625mcpsimp"><th class="cellrowborder" valign="top" width="16.21%" id="mcps1.1.5.1.1"><p id="p627mcpsimp"><a name="p627mcpsimp"></a><a name="p627mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="15.980000000000002%" id="mcps1.1.5.1.2"><p id="p629mcpsimp"><a name="p629mcpsimp"></a><a name="p629mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="13.630000000000003%" id="mcps1.1.5.1.3"><p id="p631mcpsimp"><a name="p631mcpsimp"></a><a name="p631mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="54.18000000000001%" id="mcps1.1.5.1.4"><p id="p633mcpsimp"><a name="p633mcpsimp"></a><a name="p633mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row634mcpsimp"><td class="cellrowborder" valign="top" width="16.21%" headers="mcps1.1.5.1.1 "><p id="p636mcpsimp"><a name="p636mcpsimp"></a><a name="p636mcpsimp"></a>duration</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.980000000000002%" headers="mcps1.1.5.1.2 "><p id="p638mcpsimp"><a name="p638mcpsimp"></a><a name="p638mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.630000000000003%" headers="mcps1.1.5.1.3 "><p id="p640mcpsimp"><a name="p640mcpsimp"></a><a name="p640mcpsimp"></a>1000</p>
-</td>
-<td class="cellrowborder" valign="top" width="54.18000000000001%" headers="mcps1.1.5.1.4 "><p id="p642mcpsimp"><a name="p642mcpsimp"></a><a name="p642mcpsimp"></a>Animation duration, in ms. The default duration is 1000 ms.</p>
-</td>
-</tr>
-<tr id="row643mcpsimp"><td class="cellrowborder" valign="top" width="16.21%" headers="mcps1.1.5.1.1 "><p id="p645mcpsimp"><a name="p645mcpsimp"></a><a name="p645mcpsimp"></a>curve</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.980000000000002%" headers="mcps1.1.5.1.2 "><p id="p647mcpsimp"><a name="p647mcpsimp"></a><a name="p647mcpsimp"></a><a href="#li16621545614">Curve</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="13.630000000000003%" headers="mcps1.1.5.1.3 "><p id="p649mcpsimp"><a name="p649mcpsimp"></a><a name="p649mcpsimp"></a>Linear</p>
-</td>
-<td class="cellrowborder" valign="top" width="54.18000000000001%" headers="mcps1.1.5.1.4 "><p id="p651mcpsimp"><a name="p651mcpsimp"></a><a name="p651mcpsimp"></a>The default curve is linear. For details about the valid values, see <a href="#table12144170154116">Curve enums</a>.</p>
-</td>
-</tr>
-<tr id="row652mcpsimp"><td class="cellrowborder" valign="top" width="16.21%" headers="mcps1.1.5.1.1 "><p id="p654mcpsimp"><a name="p654mcpsimp"></a><a name="p654mcpsimp"></a>delay</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.980000000000002%" headers="mcps1.1.5.1.2 "><p id="p656mcpsimp"><a name="p656mcpsimp"></a><a name="p656mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.630000000000003%" headers="mcps1.1.5.1.3 "><p id="p658mcpsimp"><a name="p658mcpsimp"></a><a name="p658mcpsimp"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="54.18000000000001%" headers="mcps1.1.5.1.4 "><p id="p660mcpsimp"><a name="p660mcpsimp"></a><a name="p660mcpsimp"></a>Delay of animation playback, in ms. By default, the playback is not delayed.</p>
-</td>
-</tr>
-<tr id="row670mcpsimp"><td class="cellrowborder" valign="top" width="16.21%" headers="mcps1.1.5.1.1 "><p id="p672mcpsimp"><a name="p672mcpsimp"></a><a name="p672mcpsimp"></a>iterations</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.980000000000002%" headers="mcps1.1.5.1.2 "><p id="p674mcpsimp"><a name="p674mcpsimp"></a><a name="p674mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.630000000000003%" headers="mcps1.1.5.1.3 "><p id="p676mcpsimp"><a name="p676mcpsimp"></a><a name="p676mcpsimp"></a>1</p>
-</td>
-<td class="cellrowborder" valign="top" width="54.18000000000001%" headers="mcps1.1.5.1.4 "><p id="p678mcpsimp"><a name="p678mcpsimp"></a><a name="p678mcpsimp"></a>Number of times that the animation is played. By default, the animation is played once. The value <strong id="b149936423520"><a name="b149936423520"></a><a name="b149936423520"></a>-1</strong> indicates that the animation is played for an unlimited number of times.</p>
-</td>
-</tr>
-<tr id="row679mcpsimp"><td class="cellrowborder" valign="top" width="16.21%" headers="mcps1.1.5.1.1 "><p id="p681mcpsimp"><a name="p681mcpsimp"></a><a name="p681mcpsimp"></a>playMode</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.980000000000002%" headers="mcps1.1.5.1.2 "><p id="p683mcpsimp"><a name="p683mcpsimp"></a><a name="p683mcpsimp"></a><a href="ts-appendix-enums.md#section2780178121714">PlayMode</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="13.630000000000003%" headers="mcps1.1.5.1.3 "><p id="p685mcpsimp"><a name="p685mcpsimp"></a><a name="p685mcpsimp"></a>Normal</p>
-</td>
-<td class="cellrowborder" valign="top" width="54.18000000000001%" headers="mcps1.1.5.1.4 "><p id="p687mcpsimp"><a name="p687mcpsimp"></a><a name="p687mcpsimp"></a>Playback mode. By default, the animation is played from the beginning after the playback is complete.</p>
-</td>
-</tr>
-</tbody>
-</table>
 
--   <a name="li16621545614"></a>Curve enums
+When the universal attributes of a component change, you can create an **AnimatorProperty** for gradient to improve user experience.
 
-    <a name="table12144170154116"></a>
-    <table><thead align="left"><tr id="row1314430184118"><th class="cellrowborder" valign="top" width="22.48%" id="mcps1.1.3.1.1"><p id="p1614414014416"><a name="p1614414014416"></a><a name="p1614414014416"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="77.52%" id="mcps1.1.3.1.2"><p id="p1314415074113"><a name="p1314415074113"></a><a name="p1314415074113"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row61441505417"><td class="cellrowborder" valign="top" width="22.48%" headers="mcps1.1.3.1.1 "><p id="p191443034117"><a name="p191443034117"></a><a name="p191443034117"></a>Linear</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="77.52%" headers="mcps1.1.3.1.2 "><p id="p121447017412"><a name="p121447017412"></a><a name="p121447017412"></a>The animation speed keeps unchanged.</p>
-    </td>
-    </tr>
-    <tr id="row20144801418"><td class="cellrowborder" valign="top" width="22.48%" headers="mcps1.1.3.1.1 "><p id="p17145110194110"><a name="p17145110194110"></a><a name="p17145110194110"></a>Ease</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="77.52%" headers="mcps1.1.3.1.2 "><p id="p171454015415"><a name="p171454015415"></a><a name="p171454015415"></a>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.</p>
-    </td>
-    </tr>
-    <tr id="row914570194112"><td class="cellrowborder" valign="top" width="22.48%" headers="mcps1.1.3.1.1 "><p id="p714511012418"><a name="p714511012418"></a><a name="p714511012418"></a>EaseIn</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="77.52%" headers="mcps1.1.3.1.2 "><p id="p101451704415"><a name="p101451704415"></a><a name="p101451704415"></a>The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used.</p>
-    </td>
-    </tr>
-    <tr id="row414560184112"><td class="cellrowborder" valign="top" width="22.48%" headers="mcps1.1.3.1.1 "><p id="p1114590124110"><a name="p1114590124110"></a><a name="p1114590124110"></a>EaseOut</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="77.52%" headers="mcps1.1.3.1.2 "><p id="p13145007410"><a name="p13145007410"></a><a name="p13145007410"></a>The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.</p>
-    </td>
-    </tr>
-    <tr id="row09402054112813"><td class="cellrowborder" valign="top" width="22.48%" headers="mcps1.1.3.1.1 "><p id="p7940185413286"><a name="p7940185413286"></a><a name="p7940185413286"></a>EaseInOut</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="77.52%" headers="mcps1.1.3.1.2 "><p id="p159403543285"><a name="p159403543285"></a><a name="p159403543285"></a>The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.</p>
-    </td>
-    </tr>
-    <tr id="row968074706"><td class="cellrowborder" valign="top" width="22.48%" headers="mcps1.1.3.1.1 "><p id="p668004506"><a name="p668004506"></a><a name="p668004506"></a>FastOutSlowIn</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="77.52%" headers="mcps1.1.3.1.2 "><p id="p186801141202"><a name="p186801141202"></a><a name="p186801141202"></a>The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0).</p>
-    </td>
-    </tr>
-    <tr id="row7689991303"><td class="cellrowborder" valign="top" width="22.48%" headers="mcps1.1.3.1.1 "><p id="p46901197014"><a name="p46901197014"></a><a name="p46901197014"></a>LinearOutSlowIn</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="77.52%" headers="mcps1.1.3.1.2 "><p id="p19690593012"><a name="p19690593012"></a><a name="p19690593012"></a>The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0).</p>
-    </td>
-    </tr>
-    <tr id="row929620312"><td class="cellrowborder" valign="top" width="22.48%" headers="mcps1.1.3.1.1 "><p id="p122961101218"><a name="p122961101218"></a><a name="p122961101218"></a>FastOutLinearIn</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="77.52%" headers="mcps1.1.3.1.2 "><p id="p11296501511"><a name="p11296501511"></a><a name="p11296501511"></a>The animation uses the acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0).</p>
-    </td>
-    </tr>
-    <tr id="row3225344120"><td class="cellrowborder" valign="top" width="22.48%" headers="mcps1.1.3.1.1 "><p id="p17225342116"><a name="p17225342116"></a><a name="p17225342116"></a>ExtremeDeceleration</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="77.52%" headers="mcps1.1.3.1.2 "><p id="p142251341112"><a name="p142251341112"></a><a name="p142251341112"></a>The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0).</p>
-    </td>
-    </tr>
-    <tr id="row172861558115"><td class="cellrowborder" valign="top" width="22.48%" headers="mcps1.1.3.1.1 "><p id="p1828718551314"><a name="p1828718551314"></a><a name="p1828718551314"></a>Sharp</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="77.52%" headers="mcps1.1.3.1.2 "><p id="p62876551111"><a name="p62876551111"></a><a name="p62876551111"></a>The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0).</p>
-    </td>
-    </tr>
-    <tr id="row430245920118"><td class="cellrowborder" valign="top" width="22.48%" headers="mcps1.1.3.1.1 "><p id="p43029591216"><a name="p43029591216"></a><a name="p43029591216"></a>Rhythm</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="77.52%" headers="mcps1.1.3.1.2 "><p id="p16302159914"><a name="p16302159914"></a><a name="p16302159914"></a>The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0).</p>
-    </td>
-    </tr>
-    <tr id="row1584139216"><td class="cellrowborder" valign="top" width="22.48%" headers="mcps1.1.3.1.1 "><p id="p10840318214"><a name="p10840318214"></a><a name="p10840318214"></a>Smooth</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="77.52%" headers="mcps1.1.3.1.2 "><p id="p48410318212"><a name="p48410318212"></a><a name="p48410318212"></a>The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0).</p>
-    </td>
-    </tr>
-    <tr id="row1878101152919"><td class="cellrowborder" valign="top" width="22.48%" headers="mcps1.1.3.1.1 "><p id="p15781171162917"><a name="p15781171162917"></a><a name="p15781171162917"></a>Friction</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="77.52%" headers="mcps1.1.3.1.2 "><p id="p1378191102917"><a name="p1378191102917"></a><a name="p1378191102917"></a>Damping curve. The cubic-bezier curve (0.2, 0.0, 0.2, 1.0) is used.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
 
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| duration | number | 1000 | Animation&nbsp;duration,&nbsp;in&nbsp;ms.&nbsp;The&nbsp;default&nbsp;duration&nbsp;is&nbsp;1000&nbsp;ms. |
+| curve | Curve | Curve.Linear | Animation&nbsp;curve.&nbsp;The&nbsp;default&nbsp;curve&nbsp;is&nbsp;linear. |
+| delay | number | 0 | Delay&nbsp;of&nbsp;animation&nbsp;playback,&nbsp;in&nbsp;ms.&nbsp;By&nbsp;default,&nbsp;the&nbsp;playback&nbsp;is&nbsp;not&nbsp;delayed. |
+| iterations | number | 1 | Number&nbsp;of&nbsp;times&nbsp;that&nbsp;the&nbsp;animation&nbsp;is&nbsp;played.&nbsp;By&nbsp;default,&nbsp;the&nbsp;animation&nbsp;is&nbsp;played&nbsp;once.&nbsp;The&nbsp;value&nbsp;**-1**&nbsp;indicates&nbsp;that&nbsp;the&nbsp;animation&nbsp;is&nbsp;played&nbsp;for&nbsp;an&nbsp;unlimited&nbsp;number&nbsp;of&nbsp;times. |
+| playMode | [PlayMode](ts-appendix-enums.md#playmode-enums) | PlayMode.Normal | Playback&nbsp;mode.&nbsp;By&nbsp;default,&nbsp;the&nbsp;animation&nbsp;is&nbsp;played&nbsp;from&nbsp;the&nbsp;beginning&nbsp;after&nbsp;the&nbsp;playback&nbsp;is&nbsp;complete. |
+
+
+- Curve enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Linear | The&nbsp;animation&nbsp;speed&nbsp;keeps&nbsp;unchanged. | 
+  | Ease | The&nbsp;animation&nbsp;starts&nbsp;at&nbsp;a&nbsp;low&nbsp;speed&nbsp;and&nbsp;then&nbsp;accelerates.&nbsp;It&nbsp;slows&nbsp;down&nbsp;before&nbsp;the&nbsp;animation&nbsp;ends.&nbsp;The&nbsp;cubic-bezier&nbsp;curve&nbsp;(0.25,&nbsp;0.1,&nbsp;0.25,&nbsp;1.0)&nbsp;is&nbsp;used. | 
+  | EaseIn | The&nbsp;animation&nbsp;starts&nbsp;at&nbsp;a&nbsp;low&nbsp;speed.&nbsp;The&nbsp;cubic-bezier&nbsp;curve&nbsp;(0.42,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0)&nbsp;is&nbsp;used. | 
+  | EaseOut | The&nbsp;animation&nbsp;ends&nbsp;at&nbsp;a&nbsp;low&nbsp;speed.&nbsp;The&nbsp;cubic-bezier&nbsp;curve&nbsp;(0.0,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)&nbsp;is&nbsp;used. | 
+  | EaseInOut | The&nbsp;animation&nbsp;starts&nbsp;and&nbsp;ends&nbsp;at&nbsp;a&nbsp;low&nbsp;speed.&nbsp;The&nbsp;cubic-bezier&nbsp;curve&nbsp;(0.42,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)&nbsp;is&nbsp;used. | 
+  | FastOutSlowIn | The&nbsp;animation&nbsp;uses&nbsp;the&nbsp;standard&nbsp;cubic-bezier&nbsp;curve&nbsp;(0.4,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0). | 
+  | LinearOutSlowIn | The&nbsp;animation&nbsp;uses&nbsp;the&nbsp;deceleration&nbsp;cubic-bezier&nbsp;curve&nbsp;(0.0,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0). | 
+  | FastOutLinearIn | The&nbsp;animation&nbsp;uses&nbsp;the&nbsp;acceleration&nbsp;cubic-bezier&nbsp;curve&nbsp;(0.4,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0). | 
+  | ExtremeDeceleration | The&nbsp;animation&nbsp;uses&nbsp;the&nbsp;extreme&nbsp;deceleration&nbsp;cubic-bezier&nbsp;curve&nbsp;(0.0,&nbsp;0.0,&nbsp;0.0,&nbsp;1.0). | 
+  | Sharp | The&nbsp;animation&nbsp;uses&nbsp;the&nbsp;sharp&nbsp;cubic-bezier&nbsp;curve&nbsp;(0.33,&nbsp;0.0,&nbsp;0.67,&nbsp;1.0). | 
+  | Rhythm | The&nbsp;animation&nbsp;uses&nbsp;the&nbsp;rhythm&nbsp;cubic-bezier&nbsp;curve&nbsp;(0.7,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0). | 
+  | Smooth | The&nbsp;animation&nbsp;uses&nbsp;the&nbsp;smooth&nbsp;cubic-bezier&nbsp;curve&nbsp;(0.4,&nbsp;0.0,&nbsp;0.4,&nbsp;1.0). | 
+  | Friction | Damping&nbsp;curve.&nbsp;The&nbsp;cubic-bezier&nbsp;curve&nbsp;(0.2,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)&nbsp;is&nbsp;used. | 
+
+
+## Example
 
-## Example<a name="section137791934201313"></a>
 
 ```
 @Entry
@@ -178,5 +72,4 @@ struct AttrAnimationExample {
 }
 ```
 
-![](figures/attranimation.gif)
-
+![en-us_image_0000001212378444](figures/en-us_image_0000001212378444.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-appendix-enums.md b/en/application-dev/reference/arkui-ts/ts-appendix-enums.md
index 0947abd4085bdedcb912f38a114c22cfacc492c1..b45cb8914b740ede872e18625116671f13449994 100644
--- a/en/application-dev/reference/arkui-ts/ts-appendix-enums.md
+++ b/en/application-dev/reference/arkui-ts/ts-appendix-enums.md
@@ -1,300 +1,103 @@
-# Built-in Enums<a name="EN-US_TOPIC_0000001237715093"></a>
+# Built-in Enums
 
-## Alignment Enums<a name="section1145418513159"></a>
 
-<a name="table1070493410237"></a>
-<table><thead align="left"><tr id="row774018347233"><th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.1"><p id="p117401834182315"><a name="p117401834182315"></a><a name="p117401834182315"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.2"><p id="p16740103417236"><a name="p16740103417236"></a><a name="p16740103417236"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row67401934132311"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p1740113492311"><a name="p1740113492311"></a><a name="p1740113492311"></a>TopStart</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p07409341237"><a name="p07409341237"></a><a name="p07409341237"></a>Top start.</p>
-</td>
-</tr>
-<tr id="row117406346239"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p374015344237"><a name="p374015344237"></a><a name="p374015344237"></a>Top</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p1774103414230"><a name="p1774103414230"></a><a name="p1774103414230"></a>Horizontally centered on the top.</p>
-</td>
-</tr>
-<tr id="row1374143482316"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p1274173462312"><a name="p1274173462312"></a><a name="p1274173462312"></a>TopEnd</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p9741434142320"><a name="p9741434142320"></a><a name="p9741434142320"></a>Top end.</p>
-</td>
-</tr>
-<tr id="row77411534102311"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p147411534132313"><a name="p147411534132313"></a><a name="p147411534132313"></a>Start</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p3741734162310"><a name="p3741734162310"></a><a name="p3741734162310"></a>Vertically centered start.</p>
-</td>
-</tr>
-<tr id="row1974143472312"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p1074112342238"><a name="p1074112342238"></a><a name="p1074112342238"></a>Center</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p197411834112318"><a name="p197411834112318"></a><a name="p197411834112318"></a>Horizontally and vertically centered.</p>
-</td>
-</tr>
-<tr id="row2074153482316"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p1374183442314"><a name="p1374183442314"></a><a name="p1374183442314"></a>End</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p15741634162312"><a name="p15741634162312"></a><a name="p15741634162312"></a>Vertically centered end.</p>
-</td>
-</tr>
-<tr id="row474123472315"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p0741113442313"><a name="p0741113442313"></a><a name="p0741113442313"></a>BottomStart</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p1674143442311"><a name="p1674143442311"></a><a name="p1674143442311"></a>Bottom start.</p>
-</td>
-</tr>
-<tr id="row1474183412230"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p18741163414233"><a name="p18741163414233"></a><a name="p18741163414233"></a>Bottom</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p11741113462314"><a name="p11741113462314"></a><a name="p11741113462314"></a>Horizontally centered on the bottom.</p>
-</td>
-</tr>
-<tr id="row47413343231"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p197417348233"><a name="p197417348233"></a><a name="p197417348233"></a>BottomEnd</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p27411434112313"><a name="p27411434112313"></a><a name="p27411434112313"></a>Bottom end.</p>
-</td>
-</tr>
-</tbody>
-</table>
+## Alignment Enums
 
-## Axis enums<a name="section1397918486200"></a>
+  | Name | Description | 
+| -------- | -------- |
+| TopStart | Top&nbsp;start. | 
+| Top | Horizontally&nbsp;centered&nbsp;on&nbsp;the&nbsp;top. | 
+| TopEnd | Top&nbsp;end. | 
+| Start | Vertically&nbsp;centered&nbsp;start. | 
+| Center | Horizontally&nbsp;and&nbsp;vertically&nbsp;centered. | 
+| End | Vertically&nbsp;centered&nbsp;end. | 
+| BottomStart | Bottom&nbsp;start. | 
+| Bottom | Horizontally&nbsp;centered&nbsp;on&nbsp;the&nbsp;bottom. | 
+| BottomEnd | Bottom&nbsp;end. | 
 
-<a name="table1997916485207"></a>
-<table><thead align="left"><tr id="row17979154832018"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p99791648142018"><a name="p99791648142018"></a><a name="p99791648142018"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p3979174817207"><a name="p3979174817207"></a><a name="p3979174817207"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row20979648122015"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p19979194812011"><a name="p19979194812011"></a><a name="p19979194812011"></a>Vertical</p>
-</td>
-<td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p797913487204"><a name="p797913487204"></a><a name="p797913487204"></a>Vertical direction.</p>
-</td>
-</tr>
-<tr id="row10979184822017"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p29798488209"><a name="p29798488209"></a><a name="p29798488209"></a>Horizontal</p>
-</td>
-<td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p109791248102011"><a name="p109791248102011"></a><a name="p109791248102011"></a>Horizontal direction.</p>
-</td>
-</tr>
-</tbody>
-</table>
 
-## ItemAlign Enums<a name="section14211428171612"></a>
+## Axis Enums
 
-<a name="table1575224112180"></a>
-<table><thead align="left"><tr id="row16786941101817"><th class="cellrowborder" valign="top" width="37.54%" id="mcps1.1.3.1.1"><p id="p16951125924517"><a name="p16951125924517"></a><a name="p16951125924517"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="62.46000000000001%" id="mcps1.1.3.1.2"><p id="p1778604161812"><a name="p1778604161812"></a><a name="p1778604161812"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row9786194191813"><td class="cellrowborder" valign="top" width="37.54%" headers="mcps1.1.3.1.1 "><p id="p2786114171811"><a name="p2786114171811"></a><a name="p2786114171811"></a>Auto</p>
-</td>
-<td class="cellrowborder" valign="top" width="62.46000000000001%" headers="mcps1.1.3.1.2 "><p id="p878614171812"><a name="p878614171812"></a><a name="p878614171812"></a>The default configuration in the Flex container is used.</p>
-</td>
-</tr>
-<tr id="row1578664131813"><td class="cellrowborder" valign="top" width="37.54%" headers="mcps1.1.3.1.1 "><p id="p578634141819"><a name="p578634141819"></a><a name="p578634141819"></a>Start</p>
-</td>
-<td class="cellrowborder" valign="top" width="62.46000000000001%" headers="mcps1.1.3.1.2 "><p id="p1578614415184"><a name="p1578614415184"></a><a name="p1578614415184"></a>The elements are in the Flex container, top-aligned in the cross-axis direction</p>
-</td>
-</tr>
-<tr id="row2078654191813"><td class="cellrowborder" valign="top" width="37.54%" headers="mcps1.1.3.1.1 "><p id="p57861541171815"><a name="p57861541171815"></a><a name="p57861541171815"></a>Center</p>
-</td>
-<td class="cellrowborder" valign="top" width="62.46000000000001%" headers="mcps1.1.3.1.2 "><p id="p478694114180"><a name="p478694114180"></a><a name="p478694114180"></a>The elements are in the Flex container, centered in the cross-axis direction.</p>
-</td>
-</tr>
-<tr id="row12786144113184"><td class="cellrowborder" valign="top" width="37.54%" headers="mcps1.1.3.1.1 "><p id="p117869414189"><a name="p117869414189"></a><a name="p117869414189"></a>End</p>
-</td>
-<td class="cellrowborder" valign="top" width="62.46000000000001%" headers="mcps1.1.3.1.2 "><p id="p20786104115186"><a name="p20786104115186"></a><a name="p20786104115186"></a>The elements are in the Flex container, bottom-aligned in the cross-axis direction.</p>
-</td>
-</tr>
-<tr id="row4786194112185"><td class="cellrowborder" valign="top" width="37.54%" headers="mcps1.1.3.1.1 "><p id="p5787341171818"><a name="p5787341171818"></a><a name="p5787341171818"></a>Stretch</p>
-</td>
-<td class="cellrowborder" valign="top" width="62.46000000000001%" headers="mcps1.1.3.1.2 "><p id="p197871341131818"><a name="p197871341131818"></a><a name="p197871341131818"></a>The elements are in the Flex container, stretched and padded in the cross-axis direction. If the size is not set, the elements are stretched to the container size.</p>
-</td>
-</tr>
-<tr id="row1678720416188"><td class="cellrowborder" valign="top" width="37.54%" headers="mcps1.1.3.1.1 "><p id="p5787174114180"><a name="p5787174114180"></a><a name="p5787174114180"></a>Baseline</p>
-</td>
-<td class="cellrowborder" valign="top" width="62.46000000000001%" headers="mcps1.1.3.1.2 "><p id="p1978713413181"><a name="p1978713413181"></a><a name="p1978713413181"></a>The elements are in the Flex container, text baseline aligned in the cross-axis direction.</p>
-</td>
-</tr>
-</tbody>
-</table>
+  | Name | Description | 
+| -------- | -------- |
+| Vertical | Vertical&nbsp;direction. | 
+| Horizontal | Horizontal&nbsp;direction. | 
 
-## LineCapStyle Enums<a name="section549694781614"></a>
 
-<a name="table12144170154116"></a>
-<table><thead align="left"><tr id="row1314430184118"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p1614414014416"><a name="p1614414014416"></a><a name="p1614414014416"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p1314415074113"><a name="p1314415074113"></a><a name="p1314415074113"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row61441505417"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p191443034117"><a name="p191443034117"></a><a name="p191443034117"></a>Butt</p>
-</td>
-<td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p121447017412"><a name="p121447017412"></a><a name="p121447017412"></a>The ends of dividing lines are square.</p>
-</td>
-</tr>
-<tr id="row20144801418"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p17145110194110"><a name="p17145110194110"></a><a name="p17145110194110"></a>Round</p>
-</td>
-<td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p171454015415"><a name="p171454015415"></a><a name="p171454015415"></a>The ends of dividing lines are rounded.</p>
-</td>
-</tr>
-<tr id="row3357124910413"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p2357194974115"><a name="p2357194974115"></a><a name="p2357194974115"></a>Square</p>
-</td>
-<td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p18490148422"><a name="p18490148422"></a><a name="p18490148422"></a>The ends of dividing lines are square.</p>
-</td>
-</tr>
-</tbody>
-</table>
+## ItemAlign Enums
 
-## PlayMode Enums<a name="section2780178121714"></a>
+  | Name | Description | 
+| -------- | -------- |
+| Auto | The&nbsp;default&nbsp;configuration&nbsp;in&nbsp;the&nbsp;Flex&nbsp;container&nbsp;is&nbsp;used. | 
+| Start | The&nbsp;elements&nbsp;are&nbsp;in&nbsp;the&nbsp;Flex&nbsp;container,&nbsp;top-aligned&nbsp;in&nbsp;the&nbsp;cross-axis&nbsp;direction | 
+| Center | The&nbsp;elements&nbsp;are&nbsp;in&nbsp;the&nbsp;Flex&nbsp;container,&nbsp;centered&nbsp;in&nbsp;the&nbsp;cross-axis&nbsp;direction. | 
+| End | The&nbsp;elements&nbsp;are&nbsp;in&nbsp;the&nbsp;Flex&nbsp;container,&nbsp;bottom-aligned&nbsp;in&nbsp;the&nbsp;cross-axis&nbsp;direction. | 
+| Stretch | The&nbsp;elements&nbsp;are&nbsp;in&nbsp;the&nbsp;Flex&nbsp;container,&nbsp;stretched&nbsp;and&nbsp;padded&nbsp;in&nbsp;the&nbsp;cross-axis&nbsp;direction.&nbsp;If&nbsp;the&nbsp;size&nbsp;is&nbsp;not&nbsp;set,&nbsp;the&nbsp;elements&nbsp;are&nbsp;stretched&nbsp;to&nbsp;the&nbsp;container&nbsp;size. | 
+| Baseline | The&nbsp;elements&nbsp;are&nbsp;in&nbsp;the&nbsp;Flex&nbsp;container,&nbsp;text&nbsp;baseline&nbsp;aligned&nbsp;in&nbsp;the&nbsp;cross-axis&nbsp;direction. | 
 
-<a name="table16898204411469"></a>
-<table><thead align="left"><tr id="row189380442462"><th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.1"><p id="p19938164417465"><a name="p19938164417465"></a><a name="p19938164417465"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.2"><p id="p18938444194618"><a name="p18938444194618"></a><a name="p18938444194618"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row19381644184620"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p793817448464"><a name="p793817448464"></a><a name="p793817448464"></a>Normal</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p293834444618"><a name="p293834444618"></a><a name="p293834444618"></a>The animation is played normally.</p>
-</td>
-</tr>
-<tr id="row7938164454614"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p1093817446463"><a name="p1093817446463"></a><a name="p1093817446463"></a>Reverse</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p893819444465"><a name="p893819444465"></a><a name="p893819444465"></a>The animation is played reversely.</p>
-</td>
-</tr>
-<tr id="row09381944124612"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p149381544164610"><a name="p149381544164610"></a><a name="p149381544164610"></a>Alternate</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p7938114411462"><a name="p7938114411462"></a><a name="p7938114411462"></a>The animation is played normally for an odd number of times (1, 3, 5...) and reversely for an even number of times (2, 4, 6...).</p>
-</td>
-</tr>
-<tr id="row99381544114613"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p18938134464616"><a name="p18938134464616"></a><a name="p18938134464616"></a>AlternateReverse</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p6938184414616"><a name="p6938184414616"></a><a name="p6938184414616"></a>The animation is played reversely for an odd number of times (1, 3, 5...) and normally for an even number of times (2, 4, 6...).</p>
-</td>
-</tr>
-</tbody>
-</table>
 
-## ImageRepeat Enums<a name="section5656191941718"></a>
+## LineCapStyle Enums
 
-<a name="table13256165496"></a>
-<table><thead align="left"><tr id="row17325121620499"><th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.1"><p id="p4325101694913"><a name="p4325101694913"></a><a name="p4325101694913"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.2"><p id="p23259168496"><a name="p23259168496"></a><a name="p23259168496"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row203257168497"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p9326181610498"><a name="p9326181610498"></a><a name="p9326181610498"></a>X</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p1332671610494"><a name="p1332671610494"></a><a name="p1332671610494"></a>Images are repeatedly drawn only on the horizontal axis.</p>
-</td>
-</tr>
-<tr id="row332681634917"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p332681624910"><a name="p332681624910"></a><a name="p332681624910"></a>Y</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p832661615491"><a name="p832661615491"></a><a name="p832661615491"></a>Images are repeatedly drawn only on the vertical axis.</p>
-</td>
-</tr>
-<tr id="row1632671624914"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p93261116124910"><a name="p93261116124910"></a><a name="p93261116124910"></a>XY</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p73261916204919"><a name="p73261916204919"></a><a name="p73261916204919"></a>Images are repeatedly drawn on both axes.</p>
-</td>
-</tr>
-<tr id="row20326516114911"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p832611618499"><a name="p832611618499"></a><a name="p832611618499"></a>NoRepeat</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p432612169492"><a name="p432612169492"></a><a name="p432612169492"></a>Images are not repeatedly drawn.</p>
-</td>
-</tr>
-</tbody>
-</table>
+  | Name | Description | 
+| -------- | -------- |
+| Butt | The&nbsp;ends&nbsp;of&nbsp;dividing&nbsp;lines&nbsp;are&nbsp;square. | 
+| Round | The&nbsp;ends&nbsp;of&nbsp;dividing&nbsp;lines&nbsp;are&nbsp;rounded. | 
+| Square | The&nbsp;ends&nbsp;of&nbsp;dividing&nbsp;lines&nbsp;are&nbsp;square. | 
 
-## TextDecorationType Enums<a name="section81063305178"></a>
 
-<a name="table618625214598"></a>
-<table><thead align="left"><tr id="row9226175210595"><th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.1"><p id="p10226175235920"><a name="p10226175235920"></a><a name="p10226175235920"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.2"><p id="p14226205212591"><a name="p14226205212591"></a><a name="p14226205212591"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row13226652105920"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p62261052165911"><a name="p62261052165911"></a><a name="p62261052165911"></a>Underline</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p15226752105913"><a name="p15226752105913"></a><a name="p15226752105913"></a>Line under the text.</p>
-</td>
-</tr>
-<tr id="row14226125235912"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p622715211592"><a name="p622715211592"></a><a name="p622715211592"></a>LineThrough</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p72271152145918"><a name="p72271152145918"></a><a name="p72271152145918"></a>Line through the text.</p>
-</td>
-</tr>
-<tr id="row2022719524594"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p8227852115918"><a name="p8227852115918"></a><a name="p8227852115918"></a>Overline</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p1622765218591"><a name="p1622765218591"></a><a name="p1622765218591"></a>Line over the text.</p>
-</td>
-</tr>
-<tr id="row13227105213595"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p92275529599"><a name="p92275529599"></a><a name="p92275529599"></a>None</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p182271652165910"><a name="p182271652165910"></a><a name="p182271652165910"></a>No decorative lines.</p>
-</td>
-</tr>
-</tbody>
-</table>
+## PlayMode Enums
 
-## TextCase Enums<a name="section1276124151715"></a>
+  | Name | Description | 
+| -------- | -------- |
+| Normal | The&nbsp;animation&nbsp;is&nbsp;played&nbsp;normally. | 
+| Reverse | The&nbsp;animation&nbsp;is&nbsp;played&nbsp;reversely. | 
+| Alternate | The&nbsp;animation&nbsp;is&nbsp;played&nbsp;normally&nbsp;for&nbsp;an&nbsp;odd&nbsp;number&nbsp;of&nbsp;times&nbsp;(1,&nbsp;3,&nbsp;5...)&nbsp;and&nbsp;reversely&nbsp;for&nbsp;an&nbsp;even&nbsp;number&nbsp;of&nbsp;times&nbsp;(2,&nbsp;4,&nbsp;6...). | 
+| AlternateReverse | The&nbsp;animation&nbsp;is&nbsp;played&nbsp;reversely&nbsp;for&nbsp;an&nbsp;odd&nbsp;number&nbsp;of&nbsp;times&nbsp;(1,&nbsp;3,&nbsp;5...)&nbsp;and&nbsp;normally&nbsp;for&nbsp;an&nbsp;even&nbsp;number&nbsp;of&nbsp;times&nbsp;(2,&nbsp;4,&nbsp;6...). | 
 
-<a name="table201356431635"></a>
-<table><thead align="left"><tr id="row1015713431938"><th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.1"><p id="p915754315319"><a name="p915754315319"></a><a name="p915754315319"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.2"><p id="p14157643635"><a name="p14157643635"></a><a name="p14157643635"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1915715431032"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p91571243233"><a name="p91571243233"></a><a name="p91571243233"></a>Normal</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p1115764311315"><a name="p1115764311315"></a><a name="p1115764311315"></a>Normal case.</p>
-</td>
-</tr>
-<tr id="row7157143932"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p181577436310"><a name="p181577436310"></a><a name="p181577436310"></a>LowerCase</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p21571643833"><a name="p21571643833"></a><a name="p21571643833"></a>All lowercase.</p>
-</td>
-</tr>
-<tr id="row181578436316"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p1315764310311"><a name="p1315764310311"></a><a name="p1315764310311"></a>UpperCase</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p71570431138"><a name="p71570431138"></a><a name="p71570431138"></a>All uppercase.</p>
-</td>
-</tr>
-</tbody>
-</table>
 
-## BarState Enums<a name="section122549529179"></a>
+## ImageRepeat Enums
 
-<a name="table925931117237"></a>
-<table><thead align="left"><tr id="row2289101112319"><th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.1"><p id="p14289191192310"><a name="p14289191192310"></a><a name="p14289191192310"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.2"><p id="p2028913117238"><a name="p2028913117238"></a><a name="p2028913117238"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1528910119238"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p20289811122310"><a name="p20289811122310"></a><a name="p20289811122310"></a>Off</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p528915111237"><a name="p528915111237"></a><a name="p528915111237"></a>Hide.</p>
-</td>
-</tr>
-<tr id="row15289141122319"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p132891211112313"><a name="p132891211112313"></a><a name="p132891211112313"></a>On</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p15290131119233"><a name="p15290131119233"></a><a name="p15290131119233"></a>Display.</p>
-</td>
-</tr>
-<tr id="row529061122311"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p162901311132314"><a name="p162901311132314"></a><a name="p162901311132314"></a>Auto</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p2290911172311"><a name="p2290911172311"></a><a name="p2290911172311"></a>Display on demand (displays when the screen is touched and disappears after 2s).</p>
-</td>
-</tr>
-</tbody>
-</table>
+  | Name | Description | 
+| -------- | -------- |
+| X | Images&nbsp;are&nbsp;repeatedly&nbsp;drawn&nbsp;only&nbsp;on&nbsp;the&nbsp;horizontal&nbsp;axis. | 
+| Y | Images&nbsp;are&nbsp;repeatedly&nbsp;drawn&nbsp;only&nbsp;on&nbsp;the&nbsp;vertical&nbsp;axis. | 
+| XY | Images&nbsp;are&nbsp;repeatedly&nbsp;drawn&nbsp;on&nbsp;both&nbsp;axes. | 
+| NoRepeat | Images&nbsp;are&nbsp;not&nbsp;repeatedly&nbsp;drawn. | 
+
+
+## TextDecorationType Enums
+
+  | Name | Description | 
+| -------- | -------- |
+| Underline | Line&nbsp;under&nbsp;the&nbsp;text. | 
+| LineThrough | Line&nbsp;through&nbsp;the&nbsp;text. | 
+| Overline | Line&nbsp;over&nbsp;the&nbsp;text. | 
+| None | No&nbsp;decorative&nbsp;lines. | 
+
+
+## TextCase Enums
+
+  | Name | Description | 
+| -------- | -------- |
+| Normal | Normal&nbsp;case. | 
+| LowerCase | All&nbsp;lowercase. | 
+| UpperCase | All&nbsp;uppercase. | 
+
+
+## BarState Enums
+
+  | Name | Description | 
+| -------- | -------- |
+| Off | Hide. | 
+| On | Display. | 
+| Auto | Display&nbsp;on&nbsp;demand&nbsp;(displays&nbsp;when&nbsp;the&nbsp;screen&nbsp;is&nbsp;touched&nbsp;and&nbsp;disappears&nbsp;after&nbsp;2s). | 
+
+## LayoutDirection Enums
+
+| Name          | Description                                                  |
+| ------------- | ------------------------------------------------------------ |
+| Row           | The child components are arranged in the same direction as the main axis runs along the rows. |
+| Column        | The child components are arranged in the same direction as the main axis runs down the columns. |
+| RowReverse    | The child components are arranged opposite to the **Row** direction. |
+| ColumnReverse | The child components are arranged opposite to the **Column** direction. |
 
diff --git a/en/application-dev/reference/arkui-ts/ts-appendix.md b/en/application-dev/reference/arkui-ts/ts-appendix.md
index 3ba8ba978eabe4cc2cae5d35bcbd82d57ca61141..1c5695fcbd4625299dc554d307cc7993d4603add 100644
--- a/en/application-dev/reference/arkui-ts/ts-appendix.md
+++ b/en/application-dev/reference/arkui-ts/ts-appendix.md
@@ -1,5 +1,5 @@
-# Appendix<a name="EN-US_TOPIC_0000001237555099"></a>
+# Appendix
 
--   **[Built-in Enums](ts-appendix-enums.md)**  
 
 
+- **[Built-in Enums](ts-appendix-enums.md)**
\ No newline at end of file
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md b/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md
index d005082951b2e5846084878df9a411a3d1fa021b..12a4e44539e3d688c6a3d867dbf6254c69e05275 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md
@@ -1,82 +1,46 @@
-# Blank<a name="EN-US_TOPIC_0000001192915120"></a>
+# Blank
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Blank\>**  component supports automatic filling of the empty part of the container along the main axis. This component is valid only when the parent component is  **<Row\>**  or  **<Column\>**.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+
+The **&lt;Blank&gt;** component supports automatic filling of the empty part of the container along the main axis. This component is valid only when the parent component is **&lt;Row&gt;** or **&lt;Column&gt;**.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section171053164519"></a>
+
+## Child Components
 
 None
 
-## APIs<a name="section314622835214"></a>
-
-Blank\(min?:  Length\)
-
--   Parameters
-
-    <a name="table51331156183410"></a>
-    <table><thead align="left"><tr id="row111341565346"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p6134195615345"><a name="p6134195615345"></a><a name="p6134195615345"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="15.959999999999999%" id="mcps1.1.6.1.2"><p id="p1113435614341"><a name="p1113435614341"></a><a name="p1113435614341"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.04%" id="mcps1.1.6.1.3"><p id="p213410561340"><a name="p213410561340"></a><a name="p213410561340"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="8.83%" id="mcps1.1.6.1.4"><p id="p71341656103410"><a name="p71341656103410"></a><a name="p71341656103410"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="48.06%" id="mcps1.1.6.1.5"><p id="p1913475613348"><a name="p1913475613348"></a><a name="p1913475613348"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1513415615348"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p19134165610345"><a name="p19134165610345"></a><a name="p19134165610345"></a>min</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.959999999999999%" headers="mcps1.1.6.1.2 "><p id="p16134135612342"><a name="p16134135612342"></a><a name="p16134135612342"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.04%" headers="mcps1.1.6.1.3 "><p id="p1313417561349"><a name="p1313417561349"></a><a name="p1313417561349"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.83%" headers="mcps1.1.6.1.4 "><p id="p81354564345"><a name="p81354564345"></a><a name="p81354564345"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="48.06%" headers="mcps1.1.6.1.5 "><p id="p15135856173410"><a name="p15135856173410"></a><a name="p15135856173410"></a>Minimum size of the <strong id="b1394223116342"><a name="b1394223116342"></a><a name="b1394223116342"></a>&lt;Blank&gt;</strong> component in the container along the main axis.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section135766153337"></a>
-
-<a name="table1088mcpsimp"></a>
-<table><thead align="left"><tr id="row1095mcpsimp"><th class="cellrowborder" valign="top" width="13.389999999999999%" id="mcps1.1.5.1.1"><p id="p1097mcpsimp"><a name="p1097mcpsimp"></a><a name="p1097mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="14.430000000000001%" id="mcps1.1.5.1.2"><p id="p1099mcpsimp"><a name="p1099mcpsimp"></a><a name="p1099mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="22.36%" id="mcps1.1.5.1.3"><p id="p1101mcpsimp"><a name="p1101mcpsimp"></a><a name="p1101mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="49.82%" id="mcps1.1.5.1.4"><p id="p1103mcpsimp"><a name="p1103mcpsimp"></a><a name="p1103mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1104mcpsimp"><td class="cellrowborder" valign="top" width="13.389999999999999%" headers="mcps1.1.5.1.1 "><p id="p1106mcpsimp"><a name="p1106mcpsimp"></a><a name="p1106mcpsimp"></a>color</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.430000000000001%" headers="mcps1.1.5.1.2 "><p id="p0229681416"><a name="p0229681416"></a><a name="p0229681416"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="22.36%" headers="mcps1.1.5.1.3 "><p id="p1110mcpsimp"><a name="p1110mcpsimp"></a><a name="p1110mcpsimp"></a>0x00000000</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.82%" headers="mcps1.1.5.1.4 "><p id="p1112mcpsimp"><a name="p1112mcpsimp"></a><a name="p1112mcpsimp"></a>Color to fill the blank.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->-   Universal attribute methods are not supported.
-
-## Example<a name="section18551123820541"></a>
 
+## APIs
+
+Blank(min?:  Length)
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | min | Length | No | 0 | Minimum&nbsp;size&nbsp;of&nbsp;the&nbsp;**&lt;Blank&gt;**&nbsp;component&nbsp;in&nbsp;the&nbsp;container&nbsp;along&nbsp;the&nbsp;main&nbsp;axis. | 
+
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| color | Color | 0x00000000 | Color&nbsp;to&nbsp;fill&nbsp;the&nbsp;blank. | 
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> - Universal attribute methods are not supported.
+
+
+## Example
+
+  
 ```
 @Entry
 @Component
@@ -95,9 +59,8 @@ struct BlankExample {
 
 Portrait mode
 
-![](figures/blank1.gif)
+![en-us_image_0000001256858407](figures/en-us_image_0000001256858407.gif)
 
 Landscape mode
 
-![](figures/blank2.gif)
-
+![en-us_image_0000001212378418](figures/en-us_image_0000001212378418.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md
index 8f39a509ef8286766236ff37112df6a4db590729..ef11b28c3564d70642a90d6e4325d872a9b8528d 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md
@@ -1,175 +1,67 @@
-# Button<a name="EN-US_TOPIC_0000001192755124"></a>
+# Button
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Button\>**  component represents a component that can trigger actions.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section173151571452"></a>
+
+The **&lt;Button&gt;** component represents a component that can trigger actions.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section13412913174619"></a>
-
-This component can contain a single child component.
-
-## APIs<a name="section124082310463"></a>
-
--   Button\(options?: \{type?: ButtonType, stateEffect?: boolean\}\)
-
-    **Table  1** **options**  parameters
-
-    <a name="table712610266288"></a>
-    <table><thead align="left"><tr id="row14126132602813"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.2.6.1.1"><p id="p12126162672817"><a name="p12126162672817"></a><a name="p12126162672817"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="15.47%" id="mcps1.2.6.1.2"><p id="p612662615285"><a name="p612662615285"></a><a name="p612662615285"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.03%" id="mcps1.2.6.1.3"><p id="p171261526112810"><a name="p171261526112810"></a><a name="p171261526112810"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.18%" id="mcps1.2.6.1.4"><p id="p16126122652819"><a name="p16126122652819"></a><a name="p16126122652819"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="42.21%" id="mcps1.2.6.1.5"><p id="p1612622618286"><a name="p1612622618286"></a><a name="p1612622618286"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1512619268285"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.2.6.1.1 "><p id="p912612612814"><a name="p912612612814"></a><a name="p912612612814"></a>type</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.47%" headers="mcps1.2.6.1.2 "><p id="p5126926132817"><a name="p5126926132817"></a><a name="p5126926132817"></a>ButtonType</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.03%" headers="mcps1.2.6.1.3 "><p id="p91262026102811"><a name="p91262026102811"></a><a name="p91262026102811"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.18%" headers="mcps1.2.6.1.4 "><p id="p912616260283"><a name="p912616260283"></a><a name="p912616260283"></a>Capsule</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.2.6.1.5 "><p id="p5126192617281"><a name="p5126192617281"></a><a name="p5126192617281"></a>Button type.</p>
-    </td>
-    </tr>
-    <tr id="row1412632622819"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.2.6.1.1 "><p id="p0126202632815"><a name="p0126202632815"></a><a name="p0126202632815"></a>stateEffect</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.47%" headers="mcps1.2.6.1.2 "><p id="p11126142615280"><a name="p11126142615280"></a><a name="p11126142615280"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.03%" headers="mcps1.2.6.1.3 "><p id="p5126326122820"><a name="p5126326122820"></a><a name="p5126326122820"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.18%" headers="mcps1.2.6.1.4 "><p id="p71264261281"><a name="p71264261281"></a><a name="p71264261281"></a>true</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.2.6.1.5 "><p id="p5126162618289"><a name="p5126162618289"></a><a name="p5126162618289"></a>Whether to enable the state switchover effect when a button is pressed. When the state is set to <strong id="b18920321715"><a name="b18920321715"></a><a name="b18920321715"></a>false</strong>, the state switchover effect is disabled.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Button\(label?: string, options?: \{ type?: ButtonType, stateEffect?: boolean \}\)
-
-    Creates a button component based on text content. In this case, the  **<Button\>**  component cannot contain subcomponents.
-
-    **Table  2** **value**  parameters
-
-    <a name="table244753515284"></a>
-    <table><thead align="left"><tr id="row3447113522811"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.2.6.1.1"><p id="p1144753517284"><a name="p1144753517284"></a><a name="p1144753517284"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.01%" id="mcps1.2.6.1.2"><p id="p54471535192817"><a name="p54471535192817"></a><a name="p54471535192817"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.49%" id="mcps1.2.6.1.3"><p id="p4447173516281"><a name="p4447173516281"></a><a name="p4447173516281"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.18%" id="mcps1.2.6.1.4"><p id="p18447835162816"><a name="p18447835162816"></a><a name="p18447835162816"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="42.21%" id="mcps1.2.6.1.5"><p id="p744723519280"><a name="p744723519280"></a><a name="p744723519280"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row134475355286"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.2.6.1.1 "><p id="p104487359288"><a name="p104487359288"></a><a name="p104487359288"></a>label</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.2.6.1.2 "><p id="p94480357284"><a name="p94480357284"></a><a name="p94480357284"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.49%" headers="mcps1.2.6.1.3 "><p id="p10448935142819"><a name="p10448935142819"></a><a name="p10448935142819"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.18%" headers="mcps1.2.6.1.4 "><p id="p15448123542819"><a name="p15448123542819"></a><a name="p15448123542819"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.2.6.1.5 "><p id="p10448835182820"><a name="p10448835182820"></a><a name="p10448835182820"></a>Button text.</p>
-    </td>
-    </tr>
-    <tr id="row18448133582812"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.2.6.1.1 "><p id="p044823519281"><a name="p044823519281"></a><a name="p044823519281"></a>options</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.2.6.1.2 "><p id="p044873511289"><a name="p044873511289"></a><a name="p044873511289"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.49%" headers="mcps1.2.6.1.3 "><p id="p4448153510281"><a name="p4448153510281"></a><a name="p4448153510281"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.18%" headers="mcps1.2.6.1.4 "><p id="p1444820359284"><a name="p1444820359284"></a><a name="p1444820359284"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.2.6.1.5 "><p id="p16448163513282"><a name="p16448163513282"></a><a name="p16448163513282"></a>For details, see the <a href="#table712610266288">options parameters</a>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section94181084473"></a>
-
-<a name="table1088mcpsimp"></a>
-<table><thead align="left"><tr id="row1095mcpsimp"><th class="cellrowborder" valign="top" width="13.389999999999999%" id="mcps1.1.5.1.1"><p id="p1097mcpsimp"><a name="p1097mcpsimp"></a><a name="p1097mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="14.430000000000001%" id="mcps1.1.5.1.2"><p id="p1099mcpsimp"><a name="p1099mcpsimp"></a><a name="p1099mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="11.87%" id="mcps1.1.5.1.3"><p id="p1101mcpsimp"><a name="p1101mcpsimp"></a><a name="p1101mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="60.309999999999995%" id="mcps1.1.5.1.4"><p id="p1103mcpsimp"><a name="p1103mcpsimp"></a><a name="p1103mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1104mcpsimp"><td class="cellrowborder" valign="top" width="13.389999999999999%" headers="mcps1.1.5.1.1 "><p id="p1106mcpsimp"><a name="p1106mcpsimp"></a><a name="p1106mcpsimp"></a>type</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.430000000000001%" headers="mcps1.1.5.1.2 "><p id="p1108mcpsimp"><a name="p1108mcpsimp"></a><a name="p1108mcpsimp"></a><a href="#li93236107910">ButtonType</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="11.87%" headers="mcps1.1.5.1.3 "><p id="p1110mcpsimp"><a name="p1110mcpsimp"></a><a name="p1110mcpsimp"></a>Capsule</p>
-</td>
-<td class="cellrowborder" valign="top" width="60.309999999999995%" headers="mcps1.1.5.1.4 "><p id="p1112mcpsimp"><a name="p1112mcpsimp"></a><a name="p1112mcpsimp"></a>Button type.</p>
-</td>
-</tr>
-<tr id="row1561916101034"><td class="cellrowborder" valign="top" width="13.389999999999999%" headers="mcps1.1.5.1.1 "><p id="p1161918103312"><a name="p1161918103312"></a><a name="p1161918103312"></a>stateEffect</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.430000000000001%" headers="mcps1.1.5.1.2 "><p id="p961941017310"><a name="p961941017310"></a><a name="p961941017310"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.87%" headers="mcps1.1.5.1.3 "><p id="p2619610432"><a name="p2619610432"></a><a name="p2619610432"></a>true</p>
-</td>
-<td class="cellrowborder" valign="top" width="60.309999999999995%" headers="mcps1.1.5.1.4 "><p id="p186192101435"><a name="p186192101435"></a><a name="p186192101435"></a>Whether to enable the state switchover effect. When the state is set to <strong id="b1327661382120"><a name="b1327661382120"></a><a name="b1327661382120"></a>false</strong>, the state switchover effect is disabled.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li93236107910"></a>ButtonType enums
-
-    <a name="table18600037183510"></a>
-    <table><thead align="left"><tr id="row196013379350"><th class="cellrowborder" valign="top" width="25.3%" id="mcps1.1.3.1.1"><p id="p2601837143511"><a name="p2601837143511"></a><a name="p2601837143511"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.7%" id="mcps1.1.3.1.2"><p id="p16601203719358"><a name="p16601203719358"></a><a name="p16601203719358"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row176011137123513"><td class="cellrowborder" valign="top" width="25.3%" headers="mcps1.1.3.1.1 "><p id="p1760153713511"><a name="p1760153713511"></a><a name="p1760153713511"></a>Capsule</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.7%" headers="mcps1.1.3.1.2 "><p id="p1601133783516"><a name="p1601133783516"></a><a name="p1601133783516"></a>Capsule-type button (the round corner is half of the height by default).</p>
-    </td>
-    </tr>
-    <tr id="row5601133715357"><td class="cellrowborder" valign="top" width="25.3%" headers="mcps1.1.3.1.1 "><p id="p156011037133513"><a name="p156011037133513"></a><a name="p156011037133513"></a>Circle</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.7%" headers="mcps1.1.3.1.2 "><p id="p1360123717359"><a name="p1360123717359"></a><a name="p1360123717359"></a>Circle button.</p>
-    </td>
-    </tr>
-    <tr id="row8601103713511"><td class="cellrowborder" valign="top" width="25.3%" headers="mcps1.1.3.1.1 "><p id="p1360133716358"><a name="p1360133716358"></a><a name="p1360133716358"></a>Normal</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.7%" headers="mcps1.1.3.1.2 "><p id="p5601837143516"><a name="p5601837143516"></a><a name="p5601837143516"></a>Normal button (without rounded corners by default).</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->-   The rounded corner of a button is set by using  [**borderRadius**](ts-universal-attributes-border.md). \(The rounded corner cannot be set by using a border API.\)
->-   The button text is set using the  [common text style](ts-universal-attributes-text-style.md).
-
-## Example<a name="section449999124812"></a>
+
+## Child Component
+
+This component can contain child components.
+
+
+## APIs
+
+- Button(options?: {type?: ButtonType, stateEffect?: boolean})
+    **Table1** options parameters
+  
+  | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | type | ButtonType | No | Capsule | Button&nbsp;type. | 
+  | stateEffect | boolean | No | true | Whether&nbsp;to&nbsp;enable&nbsp;the&nbsp;state&nbsp;switchover&nbsp;effect&nbsp;when&nbsp;a&nbsp;button&nbsp;is&nbsp;pressed.&nbsp;When&nbsp;the&nbsp;state&nbsp;is&nbsp;set&nbsp;to&nbsp;**false**,&nbsp;the&nbsp;state&nbsp;switchover&nbsp;effect&nbsp;is&nbsp;disabled. | 
+
+
+- Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })
+  Creates a button component based on text content. In this case, the **&lt;Button&gt;** component cannot contain subcomponents.
+
+    **Table2** value parameters
+  
+  | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | label | string | No | - | Button&nbsp;text. | 
+  | options | Object | No | - | For&nbsp;details,&nbsp;see&nbsp;the&nbsp;**options**&nbsp;parameters. | 
+
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| type | ButtonType | Capsule | Button&nbsp;type. | 
+| stateEffect | boolean | true | Whether&nbsp;to&nbsp;enable&nbsp;the&nbsp;state&nbsp;switchover&nbsp;effect.&nbsp;When&nbsp;the&nbsp;state&nbsp;is&nbsp;set&nbsp;to&nbsp;**false**,&nbsp;the&nbsp;state&nbsp;switchover&nbsp;effect&nbsp;is&nbsp;disabled. | 
+
+- ButtonType enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Capsule | Capsule-type&nbsp;button&nbsp;(the&nbsp;round&nbsp;corner&nbsp;is&nbsp;half&nbsp;of&nbsp;the&nbsp;height&nbsp;by&nbsp;default). | 
+  | Circle | Circle&nbsp;button. | 
+  | Normal | Normal&nbsp;button&nbsp;(without&nbsp;rounded&nbsp;corners&nbsp;by&nbsp;default). | 
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> - The rounded corner of a button is set by using [Border](ts-universal-attributes-border.md). (The rounded corner cannot be set by using a border API.)
+> 
+> - The button text is set using the [common text style](ts-universal-attributes-text-style.md).
+
+
+## Example
+
 
 ```
 @Entry
@@ -220,5 +112,4 @@ struct ButtonExample {
 }
 ```
 
-![](figures/button.gif)
-
+![en-us_image_0000001257138341](figures/en-us_image_0000001257138341.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md b/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md
index 2045636c93f2fba167e4c6c4c84aa699b09efe7f..5369c7767ed5f2ddcfd0b90b055cf72ec3046982 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md
@@ -1,96 +1,44 @@
-# DataPanel<a name="EN-US_TOPIC_0000001237355069"></a>
+# DataPanel
 
-The  **<DataPanel\>**  component displays proportions in a chart.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+The **&lt;DataPanel&gt;** component displays proportions in a chart.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section53281531154915"></a>
+
+## Child Components
 
 None
 
-## APIs<a name="section1989913519718"></a>
-
-DataPanel\(value:\{values: number\[\], max?: number, type?: DataPanelType\}\)
-
--   Parameters
-
-    <a name="table1392916196212"></a>
-    <table><thead align="left"><tr id="row19306191218"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p199307193217"><a name="p199307193217"></a><a name="p199307193217"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.01%" id="mcps1.1.6.1.2"><p id="p119302191128"><a name="p119302191128"></a><a name="p119302191128"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="5.82%" id="mcps1.1.6.1.3"><p id="p7930141911211"><a name="p7930141911211"></a><a name="p7930141911211"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="17.78%" id="mcps1.1.6.1.4"><p id="p1393020194219"><a name="p1393020194219"></a><a name="p1393020194219"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="46.28%" id="mcps1.1.6.1.5"><p id="p693061912210"><a name="p693061912210"></a><a name="p693061912210"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1093021911217"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p119307198218"><a name="p119307198218"></a><a name="p119307198218"></a>values</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p129301719828"><a name="p129301719828"></a><a name="p129301719828"></a>number[]</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="5.82%" headers="mcps1.1.6.1.3 "><p id="p893091913213"><a name="p893091913213"></a><a name="p893091913213"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.78%" headers="mcps1.1.6.1.4 "><p id="p421641117507"><a name="p421641117507"></a><a name="p421641117507"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="46.28%" headers="mcps1.1.6.1.5 "><p id="p693016198212"><a name="p693016198212"></a><a name="p693016198212"></a>Value list. A maximum of nine values are supported.</p>
-    </td>
-    </tr>
-    <tr id="row199301191726"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p0930419923"><a name="p0930419923"></a><a name="p0930419923"></a>max</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p1993071918217"><a name="p1993071918217"></a><a name="p1993071918217"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="5.82%" headers="mcps1.1.6.1.3 "><p id="p29309191029"><a name="p29309191029"></a><a name="p29309191029"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.78%" headers="mcps1.1.6.1.4 "><p id="p393019193220"><a name="p393019193220"></a><a name="p393019193220"></a>100</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="46.28%" headers="mcps1.1.6.1.5 "><p id="p2299847712"><a name="p2299847712"></a><a name="p2299847712"></a>1. When set to a value greater than 0, this parameter indicates the maximum value in the <strong id="b476723173313"><a name="b476723173313"></a><a name="b476723173313"></a>values</strong> list.</p>
-    <p id="p793001918220"><a name="p793001918220"></a><a name="p793001918220"></a>2. When set to a value equal to or smaller than 0, this parameter indicates the sum of values in the <strong id="b215814566332"><a name="b215814566332"></a><a name="b215814566332"></a>values</strong> list. The values are displayed in proportion.</p>
-    </td>
-    </tr>
-    <tr id="row8532922203314"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p145324221335"><a name="p145324221335"></a><a name="p145324221335"></a>type<sup id="sup1585891816340"><a name="sup1585891816340"></a><a name="sup1585891816340"></a>8+</sup></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p1253215221335"><a name="p1253215221335"></a><a name="p1253215221335"></a><a href="#li1012319404371">DataPanelType</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="5.82%" headers="mcps1.1.6.1.3 "><p id="p205321122193316"><a name="p205321122193316"></a><a name="p205321122193316"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.78%" headers="mcps1.1.6.1.4 "><p id="p15532152253317"><a name="p15532152253317"></a><a name="p15532152253317"></a>DataPanelType.Circle</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="46.28%" headers="mcps1.1.6.1.5 "><p id="p175322022153312"><a name="p175322022153312"></a><a name="p175322022153312"></a>Type of the data panel.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   <a name="li1012319404371"></a>DataPanelType enums
-
-    <a name="table160095963710"></a>
-    <table><thead align="left"><tr id="row1860019590371"><th class="cellrowborder" valign="top" width="23.990000000000002%" id="mcps1.1.3.1.1"><p id="p845614410388"><a name="p845614410388"></a><a name="p845614410388"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="76.01%" id="mcps1.1.3.1.2"><p id="p1860165923719"><a name="p1860165923719"></a><a name="p1860165923719"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row5601145912377"><td class="cellrowborder" valign="top" width="23.990000000000002%" headers="mcps1.1.3.1.1 "><p id="p1760119592377"><a name="p1760119592377"></a><a name="p1760119592377"></a>Line</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="76.01%" headers="mcps1.1.3.1.2 "><p id="p156012599374"><a name="p156012599374"></a><a name="p156012599374"></a>Line data panel.</p>
-    </td>
-    </tr>
-    <tr id="row1560113598379"><td class="cellrowborder" valign="top" width="23.990000000000002%" headers="mcps1.1.3.1.1 "><p id="p1127435012409"><a name="p1127435012409"></a><a name="p1127435012409"></a>Circle</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="76.01%" headers="mcps1.1.3.1.2 "><p id="p106011559113711"><a name="p106011559113711"></a><a name="p106011559113711"></a>Circle data panel.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section13800193662114"></a>
+
+## APIs
+
+DataPanel(value:{values: number[], max?: number, type?: DataPanelType})
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | values | number[] | Yes | - | Value&nbsp;list.&nbsp;A&nbsp;maximum&nbsp;of&nbsp;nine&nbsp;values&nbsp;are&nbsp;supported. | 
+  | max | number | No | 100 | -&nbsp;When&nbsp;set&nbsp;to&nbsp;a&nbsp;value&nbsp;greater&nbsp;than&nbsp;0,&nbsp;this&nbsp;parameter&nbsp;indicates&nbsp;the&nbsp;maximum&nbsp;value&nbsp;in&nbsp;the&nbsp;**values**&nbsp;list.<br/>-&nbsp;When&nbsp;set&nbsp;to&nbsp;a&nbsp;value&nbsp;equal&nbsp;to&nbsp;or&nbsp;smaller&nbsp;than&nbsp;0,&nbsp;this&nbsp;parameter&nbsp;indicates&nbsp;the&nbsp;sum&nbsp;of&nbsp;values&nbsp;in&nbsp;the&nbsp;**values**&nbsp;list.&nbsp;The&nbsp;values&nbsp;are&nbsp;displayed&nbsp;in&nbsp;proportion. | 
+  | type<sup>8+</sup> | DataPanelType | No | DataPanelType.Circle | Type&nbsp;of&nbsp;the&nbsp;data&nbsp;panel. | 
+
+
+- DataPanelType enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Line | Line&nbsp;data&nbsp;panel. | 
+  | Circle | Circle&nbsp;data&nbsp;panel. |
+
+
+## Example
+
 
 ```
 @Entry
@@ -110,5 +58,4 @@ struct DataPanelExample {
 }
 ```
 
-![](figures/datapanel.jpg)
-
+![en-us_image_0000001211898476](figures/en-us_image_0000001211898476.jpg)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md b/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
new file mode 100644
index 0000000000000000000000000000000000000000..28230a8c6c0c890f2cccc60a2b076f90e79a9e94
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
@@ -0,0 +1,153 @@
+# DatePicker
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+The **&lt;DatePicker&gt;** component allows users to select date and time.
+
+
+## Required Permissions
+
+None
+
+
+## Child Component
+
+None
+
+
+## APIs
+
+DatePicker(value:{start?: Date, end?: Date, selected?: Date, type?: DatePickerType})
+
+Creates a date picker that allows users to select a date or time within the specified range.
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | start | Date | No | Date('1970-1-1') | Start&nbsp;date&nbsp;of&nbsp;the&nbsp;date&nbsp;picker. | 
+  | end | Date | No | Date('2100-12-31') | End&nbsp;date&nbsp;of&nbsp;the&nbsp;date&nbsp;picker. | 
+  | selected | Date | No | Current&nbsp;system&nbsp;date&nbsp;or&nbsp;time | Selected&nbsp;date&nbsp;when&nbsp;**type**&nbsp;is&nbsp;set&nbsp;to&nbsp;**DatePickerType.Date**&nbsp;and&nbsp;selected&nbsp;time&nbsp;when&nbsp;**type**&nbsp;is&nbsp;set&nbsp;to&nbsp;**DatePickerType.Time**. | 
+  | type | DatePickerType | No | DatePickerType.Date | Picker&nbsp;type,&nbsp;which&nbsp;can&nbsp;be&nbsp;date&nbsp;picker&nbsp;and&nbsp;time&nbsp;picker.&nbsp;The&nbsp;date&nbsp;picker&nbsp;is&nbsp;used&nbsp;by&nbsp;default. | 
+
+- DatePickerType enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Date | Date&nbsp;picker. | 
+  | Time | Time&nbsp;picker. | 
+
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- |-------- |
+| lunar | boolean | false | Whether&nbsp;to&nbsp;display&nbsp;the&nbsp;lunar&nbsp;calendar.<br/>-&nbsp;**true**:&nbsp;The&nbsp;lunar&nbsp;calendar&nbsp;is&nbsp;displayed.<br/>-&nbsp;**false**:&nbsp;The&nbsp;lunar&nbsp;calendar&nbsp;is&nbsp;not&nbsp;displayed. | 
+| useMilitaryTime | boolean | false | Whether&nbsp;the&nbsp;display&nbsp;time&nbsp;is&nbsp;in&nbsp;24-hour&nbsp;format. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onChange(callback:&nbsp;(value:&nbsp;DatePickerResult)&nbsp;=&gt;&nbsp;void) | This&nbsp;event&nbsp;is&nbsp;triggered&nbsp;when&nbsp;a&nbsp;date&nbsp;or&nbsp;time&nbsp;is&nbsp;selected. | 
+
+- DatePickerResult object description
+    | Name | Type | Description | 
+  | -------- | -------- | -------- |
+  | year | number | Year&nbsp;of&nbsp;the&nbsp;selected&nbsp;date&nbsp;(when&nbsp;**type**&nbsp;is&nbsp;**DatePickerType.Date**). | 
+  | month | number | Month&nbsp;of&nbsp;the&nbsp;selected&nbsp;date&nbsp;(when&nbsp;**type**&nbsp;is&nbsp;**DatePickerType.Date**). | 
+  | day | number | Date&nbsp;of&nbsp;the&nbsp;selected&nbsp;date&nbsp;(when&nbsp;**type**&nbsp;is&nbsp;**DatePickerType.Date**). | 
+  | hour | number | Hour&nbsp;portion&nbsp;of&nbsp;the&nbsp;selected&nbsp;time&nbsp;(when&nbsp;**type**&nbsp;is&nbsp;**DatePickerType.Time**). | 
+  | minute | number | Minute&nbsp;portion&nbsp;of&nbsp;the&nbsp;selected&nbsp;time&nbsp;(when&nbsp;**type**&nbsp;is&nbsp;**DatePickerType.Time**). | 
+
+
+## Example
+
+
+### Date Picker (with Lunar Calendar)
+
+
+```
+@Entry
+@Component
+struct DatePickerExample01 {
+  private selectedDate: Date = new Date('2021-08-08')
+
+  build() {
+    Column() {
+      DatePicker({
+        start: new Date('1970-1-1'),
+        end: new Date('2200-1-1'),
+        selected: this.selectedDate,
+        type: DatePickerType.Date
+      })
+      .lunar(true)
+      .onChange((date: DatePickerResult) => {
+        console.info('select current date is: ' + JSON.stringify(date))
+      })
+    }.width('100%')
+  }
+}
+```
+
+![en-us_image_0000001211898486](figures/en-us_image_0000001211898486.gif)
+
+
+### Date Picker (Without Lunar Calendar)
+
+
+```
+@Entry
+@Component
+struct DatePickerExample02 {
+  private selectedDate: Date = new Date('2021-08-08')
+
+  build() {
+    Column() {
+      DatePicker({
+        start: new Date('1970-1-1'),
+        end: new Date('2200-1-1'),
+        selected: this.selectedDate,
+        type: DatePickerType.Date
+      })
+      .lunar(false)
+      .onChange((date: DatePickerResult) => {
+        console.info('select current date is: ' + JSON.stringify(date))
+      })
+    }.width('100%')
+  }
+}
+```
+
+![en-us_image_0000001257138355](figures/en-us_image_0000001257138355.gif)
+
+
+### Time Picker
+
+
+```
+@Entry
+@Component
+struct DatePickerExample03 {
+  private selectedTime: Date = new Date('2021-9-29 08:00:00')
+
+  build() {
+    Column() {
+      DatePicker({
+        start: new Date('00:00:00'),
+        end: new Date('23:59:59'),
+        selected: this.selectedTime,
+        type: DatePickerType.Time
+      })
+      .useMilitaryTime(true)
+      .onChange((date: DatePickerResult) => {
+        console.info('select current date is: ' + JSON.stringify(date))
+      })
+    }.width('100%')
+  }
+}
+```
+
+![en-us_image_0000001256858401](figures/en-us_image_0000001256858401.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md b/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md
index 975737f94d718f15edb7ea3e3c37cdaf7998e50a..748bdec42a3608c783135d773b43c6a4a813ab24 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md
@@ -1,79 +1,45 @@
-# Divider<a name="EN-US_TOPIC_0000001192755128"></a>
+# Divider
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Divider\>**  component is used to separate content blocks and content elements.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+
+The **&lt;Divider&gt;** component is used to separate content blocks and content elements.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section171053164519"></a>
+
+## Child Components
 
 None
 
-## APIs<a name="section314622835214"></a>
-
-Divider\(\)
-
-## Attributes<a name="section065712415316"></a>
-
-<a name="table1166mcpsimp"></a>
-<table><thead align="left"><tr id="row1173mcpsimp"><th class="cellrowborder" valign="top" width="14.540000000000001%" id="mcps1.1.5.1.1"><p id="p1175mcpsimp"><a name="p1175mcpsimp"></a><a name="p1175mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="14.82%" id="mcps1.1.5.1.2"><p id="p1177mcpsimp"><a name="p1177mcpsimp"></a><a name="p1177mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="9.64%" id="mcps1.1.5.1.3"><p id="p1179mcpsimp"><a name="p1179mcpsimp"></a><a name="p1179mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="61%" id="mcps1.1.5.1.4"><p id="p1181mcpsimp"><a name="p1181mcpsimp"></a><a name="p1181mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1182mcpsimp"><td class="cellrowborder" valign="top" width="14.540000000000001%" headers="mcps1.1.5.1.1 "><p id="p1184mcpsimp"><a name="p1184mcpsimp"></a><a name="p1184mcpsimp"></a>vertical</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.2 "><p id="p1186mcpsimp"><a name="p1186mcpsimp"></a><a name="p1186mcpsimp"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.64%" headers="mcps1.1.5.1.3 "><p id="p1188mcpsimp"><a name="p1188mcpsimp"></a><a name="p1188mcpsimp"></a>false</p>
-</td>
-<td class="cellrowborder" valign="top" width="61%" headers="mcps1.1.5.1.4 "><p id="p1190mcpsimp"><a name="p1190mcpsimp"></a><a name="p1190mcpsimp"></a>Whether a vertical divider is used. The value <strong id="b1119922554315"><a name="b1119922554315"></a><a name="b1119922554315"></a>true</strong> means that a vertical divider is used, and <strong id="b179503434318"><a name="b179503434318"></a><a name="b179503434318"></a>false</strong> means that a horizontal divider is used.</p>
-</td>
-</tr>
-<tr id="row1191mcpsimp"><td class="cellrowborder" valign="top" width="14.540000000000001%" headers="mcps1.1.5.1.1 "><p id="p1193mcpsimp"><a name="p1193mcpsimp"></a><a name="p1193mcpsimp"></a>color</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.2 "><p id="p1195mcpsimp"><a name="p1195mcpsimp"></a><a name="p1195mcpsimp"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.64%" headers="mcps1.1.5.1.3 "><p id="p1197mcpsimp"><a name="p1197mcpsimp"></a><a name="p1197mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="61%" headers="mcps1.1.5.1.4 "><p id="p1199mcpsimp"><a name="p1199mcpsimp"></a><a name="p1199mcpsimp"></a>Color of the divider.</p>
-</td>
-</tr>
-<tr id="row1200mcpsimp"><td class="cellrowborder" valign="top" width="14.540000000000001%" headers="mcps1.1.5.1.1 "><p id="p1202mcpsimp"><a name="p1202mcpsimp"></a><a name="p1202mcpsimp"></a>strokeWidth</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.2 "><p id="p1204mcpsimp"><a name="p1204mcpsimp"></a><a name="p1204mcpsimp"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.64%" headers="mcps1.1.5.1.3 "><p id="p1206mcpsimp"><a name="p1206mcpsimp"></a><a name="p1206mcpsimp"></a>1</p>
-</td>
-<td class="cellrowborder" valign="top" width="61%" headers="mcps1.1.5.1.4 "><p id="p1208mcpsimp"><a name="p1208mcpsimp"></a><a name="p1208mcpsimp"></a>Width of the divider.</p>
-</td>
-</tr>
-<tr id="row1209mcpsimp"><td class="cellrowborder" valign="top" width="14.540000000000001%" headers="mcps1.1.5.1.1 "><p id="p1211mcpsimp"><a name="p1211mcpsimp"></a><a name="p1211mcpsimp"></a>lineCap</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.2 "><p id="p1213mcpsimp"><a name="p1213mcpsimp"></a><a name="p1213mcpsimp"></a><a href="ts-appendix-enums.md#section549694781614">LineCapStyle</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="9.64%" headers="mcps1.1.5.1.3 "><p id="p1215mcpsimp"><a name="p1215mcpsimp"></a><a name="p1215mcpsimp"></a>Butt</p>
-</td>
-<td class="cellrowborder" valign="top" width="61%" headers="mcps1.1.5.1.4 "><p id="p1217mcpsimp"><a name="p1217mcpsimp"></a><a name="p1217mcpsimp"></a>Cap style of the divider. The default value is <strong id="b2497816144410"><a name="b2497816144410"></a><a name="b2497816144410"></a>Butt</strong>.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Events<a name="section8567175225417"></a>
+
+## APIs
+
+Divider()
+
+
+## Attributes
+
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| vertical | boolean | false | Whether&nbsp;a&nbsp;vertical&nbsp;divider&nbsp;is&nbsp;used.&nbsp;The&nbsp;value&nbsp;**true**&nbsp;means&nbsp;that&nbsp;a&nbsp;vertical&nbsp;divider&nbsp;is&nbsp;used,&nbsp;and&nbsp;**false**&nbsp;means&nbsp;that&nbsp;a&nbsp;horizontal&nbsp;divider&nbsp;is&nbsp;used. |
+| color | Color | - | Color&nbsp;of&nbsp;the&nbsp;divider. |
+| strokeWidth | Length | 1 | Width&nbsp;of&nbsp;the&nbsp;divider. |
+| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle-enums) | LineCapStyle.Butt | Cap&nbsp;style&nbsp;of&nbsp;the&nbsp;divider. |
+
+
+## Events
 
 Universal events are not supported.
 
-## Example<a name="section18551123820541"></a>
+
+## Example
+
 
 ```
 @Entry
@@ -104,5 +70,4 @@ struct DividerExample {
 }
 ```
 
-![](figures/en-us_image_0000001196780640.png)
-
+![en-us_image_0000001257058407](figures/en-us_image_0000001257058407.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md b/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
deleted file mode 100644
index 1f6b9bc92c5d1508850b1ee64dd90088e8652c1b..0000000000000000000000000000000000000000
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
+++ /dev/null
@@ -1,152 +0,0 @@
-# Gauge<a name="EN-US_TOPIC_0000001237715089"></a>
-
->![](../../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.
-
-Data gauge chart widget, which is used to display data in a ring chart.
-
-## Required Permissions<a name="section781125411508"></a>
-
-None
-
-## Child Component<a name="section19640115511114"></a>
-
-N/A
-
-## APIs<a name="section5420929101113"></a>
-
-Gauge\(value:\{value: number, min?: number, max?: number\}\)
-
--   Parameter
-
-    <a name="table1392916196212"></a>
-    <table><thead align="left"><tr id="row19306191218"><th class="cellrowborder" valign="top" width="16.21%" id="mcps1.1.6.1.1"><p id="p199307193217"><a name="p199307193217"></a><a name="p199307193217"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.91%" id="mcps1.1.6.1.2"><p id="p119302191128"><a name="p119302191128"></a><a name="p119302191128"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.499999999999998%" id="mcps1.1.6.1.3"><p id="p7930141911211"><a name="p7930141911211"></a><a name="p7930141911211"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.170000000000002%" id="mcps1.1.6.1.4"><p id="p1393020194219"><a name="p1393020194219"></a><a name="p1393020194219"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="42.21%" id="mcps1.1.6.1.5"><p id="p693061912210"><a name="p693061912210"></a><a name="p693061912210"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1093021911217"><td class="cellrowborder" valign="top" width="16.21%" headers="mcps1.1.6.1.1 "><p id="p119307198218"><a name="p119307198218"></a><a name="p119307198218"></a>value</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.91%" headers="mcps1.1.6.1.2 "><p id="p129301719828"><a name="p129301719828"></a><a name="p129301719828"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p893091913213"><a name="p893091913213"></a><a name="p893091913213"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p793071910214"><a name="p793071910214"></a><a name="p793071910214"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p693016198212"><a name="p693016198212"></a><a name="p693016198212"></a>Current data value.</p>
-    </td>
-    </tr>
-    <tr id="row199301191726"><td class="cellrowborder" valign="top" width="16.21%" headers="mcps1.1.6.1.1 "><p id="p0930419923"><a name="p0930419923"></a><a name="p0930419923"></a>min</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.91%" headers="mcps1.1.6.1.2 "><p id="p1993071918217"><a name="p1993071918217"></a><a name="p1993071918217"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p29309191029"><a name="p29309191029"></a><a name="p29309191029"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p393019193220"><a name="p393019193220"></a><a name="p393019193220"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p793001918220"><a name="p793001918220"></a><a name="p793001918220"></a>Minimum value of the current data segment.</p>
-    </td>
-    </tr>
-    <tr id="row210122354115"><td class="cellrowborder" valign="top" width="16.21%" headers="mcps1.1.6.1.1 "><p id="p171011023174118"><a name="p171011023174118"></a><a name="p171011023174118"></a>max</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.91%" headers="mcps1.1.6.1.2 "><p id="p510102313410"><a name="p510102313410"></a><a name="p510102313410"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p5101192374119"><a name="p5101192374119"></a><a name="p5101192374119"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p10101132354111"><a name="p10101132354111"></a><a name="p10101132354111"></a>100</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p1310182384115"><a name="p1310182384115"></a><a name="p1310182384115"></a>Maximum value of the current data segment.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section49201029171417"></a>
-
-<a name="table1782119567143"></a>
-<table><thead align="left"><tr id="row9821165611146"><th class="cellrowborder" valign="top" width="19.02%" id="mcps1.1.5.1.1"><p id="p1182117568143"><a name="p1182117568143"></a><a name="p1182117568143"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="27.169999999999998%" id="mcps1.1.5.1.2"><p id="p6821356151412"><a name="p6821356151412"></a><a name="p6821356151412"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="12.24%" id="mcps1.1.5.1.3"><p id="p1821105681420"><a name="p1821105681420"></a><a name="p1821105681420"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="41.57%" id="mcps1.1.5.1.4"><p id="p13821115617148"><a name="p13821115617148"></a><a name="p13821115617148"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1682165614143"><td class="cellrowborder" valign="top" width="19.02%" headers="mcps1.1.5.1.1 "><p id="p7821145601413"><a name="p7821145601413"></a><a name="p7821145601413"></a>value</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.169999999999998%" headers="mcps1.1.5.1.2 "><p id="p582135612146"><a name="p582135612146"></a><a name="p582135612146"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.24%" headers="mcps1.1.5.1.3 "><p id="p1282195691412"><a name="p1282195691412"></a><a name="p1282195691412"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="41.57%" headers="mcps1.1.5.1.4 "><p id="p1782175610142"><a name="p1782175610142"></a><a name="p1782175610142"></a>Sets the value of the current data chart.</p>
-</td>
-</tr>
-<tr id="row1782112568147"><td class="cellrowborder" valign="top" width="19.02%" headers="mcps1.1.5.1.1 "><p id="p1482145641410"><a name="p1482145641410"></a><a name="p1482145641410"></a>startAngle</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.169999999999998%" headers="mcps1.1.5.1.2 "><p id="p1382145671418"><a name="p1382145671418"></a><a name="p1382145671418"></a>Angle</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.24%" headers="mcps1.1.5.1.3 "><p id="p1682275613143"><a name="p1682275613143"></a><a name="p1682275613143"></a>-150</p>
-</td>
-<td class="cellrowborder" valign="top" width="41.57%" headers="mcps1.1.5.1.4 "><p id="p2822105651412"><a name="p2822105651412"></a><a name="p2822105651412"></a>Set the start angle. Clock 0 indicates 0 degree, and the clockwise direction indicates the positive angle.</p>
-</td>
-</tr>
-<tr id="row19822456161411"><td class="cellrowborder" valign="top" width="19.02%" headers="mcps1.1.5.1.1 "><p id="p198224567149"><a name="p198224567149"></a><a name="p198224567149"></a>endAngle</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.169999999999998%" headers="mcps1.1.5.1.2 "><p id="p582216569142"><a name="p582216569142"></a><a name="p582216569142"></a>Angle</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.24%" headers="mcps1.1.5.1.3 "><p id="p58221256171410"><a name="p58221256171410"></a><a name="p58221256171410"></a>150</p>
-</td>
-<td class="cellrowborder" valign="top" width="41.57%" headers="mcps1.1.5.1.4 "><p id="p58229562149"><a name="p58229562149"></a><a name="p58229562149"></a>Sets the end angle position. The clock 0 point is 0 degree, and the clockwise direction is the positive angle.</p>
-</td>
-</tr>
-<tr id="row58221756151414"><td class="cellrowborder" valign="top" width="19.02%" headers="mcps1.1.5.1.1 "><p id="p88220563141"><a name="p88220563141"></a><a name="p88220563141"></a>colors</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.169999999999998%" headers="mcps1.1.5.1.2 "><p id="p7822155613145"><a name="p7822155613145"></a><a name="p7822155613145"></a>Color | Array&lt;ColorStop&gt;</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.24%" headers="mcps1.1.5.1.3 "><p id="p19823135691414"><a name="p19823135691414"></a><a name="p19823135691414"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="41.57%" headers="mcps1.1.5.1.4 "><p id="p8823155611145"><a name="p8823155611145"></a><a name="p8823155611145"></a>Set the color of the chart. You can set the pure color or segmental gradient color.</p>
-</td>
-</tr>
-<tr id="row38231856161419"><td class="cellrowborder" valign="top" width="19.02%" headers="mcps1.1.5.1.1 "><p id="p882313569148"><a name="p882313569148"></a><a name="p882313569148"></a>strokeWidth</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.169999999999998%" headers="mcps1.1.5.1.2 "><p id="p58236564147"><a name="p58236564147"></a><a name="p58236564147"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.24%" headers="mcps1.1.5.1.3 "><p id="p1782315601412"><a name="p1782315601412"></a><a name="p1782315601412"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="41.57%" headers="mcps1.1.5.1.4 "><p id="p4823125671411"><a name="p4823125671411"></a><a name="p4823125671411"></a>Sets the ring thickness of a ring chart.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section1951681592110"></a>
-
-```
-@Entry
-@Component
-struct GaugeExample {
-  build() {
-    Column() {
-      Gauge({ value: 50, min: 0, max: 100 })
-        .startAngle(210).endAngle(150)
-        .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1], [0xD94838, 1]])
-        .strokeWidth(20)
-        .width(200).height(200)
-    }.width('100%').margin({ top: 5 })
-  }
-}
-```
-
-![](figures/gauge.png)
-
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md
index 9909adf2dab633a418cc4c473ef04c3a0f3b01e8..ce5beb1a61e330811d97a6ec4ab85c933a343db3 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md
@@ -1,271 +1,87 @@
-# Image<a name="EN-US_TOPIC_0000001237555109"></a>
+# Image
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Image\>**  component is used to render and display images.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section1662116135572"></a>
 
-ohos.permission.INTERNET \(using Internet images\)
+The **&lt;Image&gt;** component is used to render and display images.
 
-## Child Components<a name="section057112518574"></a>
+
+## Required Permissions
+
+ohos.permission.INTERNET (using Internet images)
+
+
+## Child Components
 
 None
 
-## APIs<a name="section15735153218576"></a>
-
-Image\(value: \{uri: string | PixelMap\}\)
-
--   Parameters
-
-    <a name="table1887813614528"></a>
-    <table><thead align="left"><tr id="row587936175218"><th class="cellrowborder" valign="top" width="12.7%" id="mcps1.1.6.1.1"><p id="p0879369522"><a name="p0879369522"></a><a name="p0879369522"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="19.46%" id="mcps1.1.6.1.2"><p id="p1987911618521"><a name="p1987911618521"></a><a name="p1987911618521"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.96%" id="mcps1.1.6.1.3"><p id="p587919613525"><a name="p587919613525"></a><a name="p587919613525"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.86%" id="mcps1.1.6.1.4"><p id="p68798645219"><a name="p68798645219"></a><a name="p68798645219"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="47.02%" id="mcps1.1.6.1.5"><p id="p16879176155216"><a name="p16879176155216"></a><a name="p16879176155216"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row4879761529"><td class="cellrowborder" valign="top" width="12.7%" headers="mcps1.1.6.1.1 "><p id="p1187919675215"><a name="p1187919675215"></a><a name="p1187919675215"></a>uri</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.46%" headers="mcps1.1.6.1.2 "><p id="p1387910665219"><a name="p1387910665219"></a><a name="p1387910665219"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.96%" headers="mcps1.1.6.1.3 "><p id="p4879126205218"><a name="p4879126205218"></a><a name="p4879126205218"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.86%" headers="mcps1.1.6.1.4 "><p id="p5879126155211"><a name="p5879126155211"></a><a name="p5879126155211"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="47.02%" headers="mcps1.1.6.1.5 "><p id="p148791165528"><a name="p148791165528"></a><a name="p148791165528"></a>Image URI. Both local and Internal URIs are supported.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section1749314421802"></a>
-
-<a name="table801mcpsimp"></a>
-<table><thead align="left"><tr id="row808mcpsimp"><th class="cellrowborder" valign="top" width="14.899999999999999%" id="mcps1.1.5.1.1"><p id="p810mcpsimp"><a name="p810mcpsimp"></a><a name="p810mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="17.62%" id="mcps1.1.5.1.2"><p id="p812mcpsimp"><a name="p812mcpsimp"></a><a name="p812mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="17.46%" id="mcps1.1.5.1.3"><p id="p814mcpsimp"><a name="p814mcpsimp"></a><a name="p814mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="50.019999999999996%" id="mcps1.1.5.1.4"><p id="p816mcpsimp"><a name="p816mcpsimp"></a><a name="p816mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row817mcpsimp"><td class="cellrowborder" valign="top" width="14.899999999999999%" headers="mcps1.1.5.1.1 "><p id="p819mcpsimp"><a name="p819mcpsimp"></a><a name="p819mcpsimp"></a>alt</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.62%" headers="mcps1.1.5.1.2 "><p id="p821mcpsimp"><a name="p821mcpsimp"></a><a name="p821mcpsimp"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.46%" headers="mcps1.1.5.1.3 "><p id="p823mcpsimp"><a name="p823mcpsimp"></a><a name="p823mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="50.019999999999996%" headers="mcps1.1.5.1.4 "><p id="p825mcpsimp"><a name="p825mcpsimp"></a><a name="p825mcpsimp"></a>Placeholder image displayed during loading. Both local and Internal URIs are supported.</p>
-</td>
-</tr>
-<tr id="row826mcpsimp"><td class="cellrowborder" valign="top" width="14.899999999999999%" headers="mcps1.1.5.1.1 "><p id="p828mcpsimp"><a name="p828mcpsimp"></a><a name="p828mcpsimp"></a>objectFit</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.62%" headers="mcps1.1.5.1.2 "><p id="p830mcpsimp"><a name="p830mcpsimp"></a><a name="p830mcpsimp"></a><a href="#li2939204152619">ImageFit</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="17.46%" headers="mcps1.1.5.1.3 "><p id="p832mcpsimp"><a name="p832mcpsimp"></a><a name="p832mcpsimp"></a>Cover</p>
-</td>
-<td class="cellrowborder" valign="top" width="50.019999999999996%" headers="mcps1.1.5.1.4 "><p id="p834mcpsimp"><a name="p834mcpsimp"></a><a name="p834mcpsimp"></a>Image scale type.</p>
-</td>
-</tr>
-<tr id="row93570531925"><td class="cellrowborder" valign="top" width="14.899999999999999%" headers="mcps1.1.5.1.1 "><p id="p183571853522"><a name="p183571853522"></a><a name="p183571853522"></a>objectRepeat</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.62%" headers="mcps1.1.5.1.2 "><p id="p2035720532211"><a name="p2035720532211"></a><a name="p2035720532211"></a><a href="ts-appendix-enums.md#section5656191941718">ImageRepeat</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="17.46%" headers="mcps1.1.5.1.3 "><p id="p103571153928"><a name="p103571153928"></a><a name="p103571153928"></a>NoRepeat</p>
-</td>
-<td class="cellrowborder" valign="top" width="50.019999999999996%" headers="mcps1.1.5.1.4 "><p id="p8811191510314"><a name="p8811191510314"></a><a name="p8811191510314"></a>Whether the image is repeated.</p>
-<div class="note" id="note023191635"><a name="note023191635"></a><a name="note023191635"></a><span class="notetitle"> NOTE: </span><div class="notebody"><a name="ul1567102713310"></a><a name="ul1567102713310"></a><ul id="ul1567102713310"><li>This attribute is not applicable to SVG images.</li></ul>
-</div></div>
-</td>
-</tr>
-<tr id="row8918174518319"><td class="cellrowborder" valign="top" width="14.899999999999999%" headers="mcps1.1.5.1.1 "><p id="p1691918451033"><a name="p1691918451033"></a><a name="p1691918451033"></a>interpolation</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.62%" headers="mcps1.1.5.1.2 "><p id="p0919184514310"><a name="p0919184514310"></a><a name="p0919184514310"></a><a href="#li3882486263">ImageInterpolation</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="17.46%" headers="mcps1.1.5.1.3 "><p id="p149191945735"><a name="p149191945735"></a><a name="p149191945735"></a>None</p>
-</td>
-<td class="cellrowborder" valign="top" width="50.019999999999996%" headers="mcps1.1.5.1.4 "><p id="p4919204517316"><a name="p4919204517316"></a><a name="p4919204517316"></a>Interpolation effect of the image. This attribute is valid only when the image is zoomed in.</p>
-<div class="note" id="note172111343148"><a name="note172111343148"></a><a name="note172111343148"></a><span class="notetitle"> NOTE: </span><div class="notebody"><a name="ul16158175015412"></a><a name="ul16158175015412"></a><ul id="ul16158175015412"><li>This attribute is not applicable to SVG images.</li><li>This attribute is not applicable to a <strong id="b1619617220505"><a name="b1619617220505"></a><a name="b1619617220505"></a>PixelMap</strong> object.</li></ul>
-</div></div>
-</td>
-</tr>
-<tr id="row882594557"><td class="cellrowborder" valign="top" width="14.899999999999999%" headers="mcps1.1.5.1.1 "><p id="p28251847517"><a name="p28251847517"></a><a name="p28251847517"></a>renderMode</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.62%" headers="mcps1.1.5.1.2 "><p id="p18250416511"><a name="p18250416511"></a><a name="p18250416511"></a><a href="#li174151754162611">ImageRenderMode</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="17.46%" headers="mcps1.1.5.1.3 "><p id="p482534252"><a name="p482534252"></a><a name="p482534252"></a>Original</p>
-</td>
-<td class="cellrowborder" valign="top" width="50.019999999999996%" headers="mcps1.1.5.1.4 "><p id="p882564056"><a name="p882564056"></a><a name="p882564056"></a>Rendering mode of the image.</p>
-<div class="note" id="note86719241255"><a name="note86719241255"></a><a name="note86719241255"></a><span class="notetitle"> NOTE: </span><div class="notebody"><a name="ul161481435653"></a><a name="ul161481435653"></a><ul id="ul161481435653"><li>This attribute is not applicable to SVG images.</li></ul>
-</div></div>
-</td>
-</tr>
-<tr id="row133724010510"><td class="cellrowborder" valign="top" width="14.899999999999999%" headers="mcps1.1.5.1.1 "><p id="p333724020515"><a name="p333724020515"></a><a name="p333724020515"></a>sourceSize</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.62%" headers="mcps1.1.5.1.2 "><p id="p518714164588"><a name="p518714164588"></a><a name="p518714164588"></a>{</p>
-<p id="p9341323185811"><a name="p9341323185811"></a><a name="p9341323185811"></a>width: number,</p>
-<p id="p147301427185813"><a name="p147301427185813"></a><a name="p147301427185813"></a>height: number</p>
-<p id="p133373401516"><a name="p133373401516"></a><a name="p133373401516"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.46%" headers="mcps1.1.5.1.3 "><p id="p193378403511"><a name="p193378403511"></a><a name="p193378403511"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="50.019999999999996%" headers="mcps1.1.5.1.4 "><p id="p183371140553"><a name="p183371140553"></a><a name="p183371140553"></a>Decoding size of the image. The original image is decoded into an image of the specified size. If the value is of the number type, the unit px is used.</p>
-<div class="note" id="note374810206156"><a name="note374810206156"></a><a name="note374810206156"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p2748162014159"><a name="p2748162014159"></a><a name="p2748162014159"></a>This attribute is not applicable to a <strong id="b1471919148510"><a name="b1471919148510"></a><a name="b1471919148510"></a>PixelMap</strong> object.</p>
-</div></div>
-</td>
-</tr>
-<tr id="row6137112734612"><td class="cellrowborder" valign="top" width="14.899999999999999%" headers="mcps1.1.5.1.1 "><p id="p15138127154611"><a name="p15138127154611"></a><a name="p15138127154611"></a>syncLoad<sup id="sup1585891816340"><a name="sup1585891816340"></a><a name="sup1585891816340"></a>8+</sup></p>
-</td>
-<td class="cellrowborder" valign="top" width="17.62%" headers="mcps1.1.5.1.2 "><p id="p1713812744620"><a name="p1713812744620"></a><a name="p1713812744620"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.46%" headers="mcps1.1.5.1.3 "><p id="p3139162711464"><a name="p3139162711464"></a><a name="p3139162711464"></a>false</p>
-</td>
-<td class="cellrowborder" valign="top" width="50.019999999999996%" headers="mcps1.1.5.1.4 "><p id="p115061143124713"><a name="p115061143124713"></a><a name="p115061143124713"></a>Whether to load images synchronously. By default, images are loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li2939204152619"></a>ImageFit enums
-
-    <a name="table3635183673819"></a>
-    <table><thead align="left"><tr id="row26364363382"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p1963653633810"><a name="p1963653633810"></a><a name="p1963653633810"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p166366362387"><a name="p166366362387"></a><a name="p166366362387"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row11636193673815"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p13636193653819"><a name="p13636193653819"></a><a name="p13636193653819"></a>Cover</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p7636103615383"><a name="p7636103615383"></a><a name="p7636103615383"></a>The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.</p>
-    </td>
-    </tr>
-    <tr id="row1163613615385"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p4636183653810"><a name="p4636183653810"></a><a name="p4636183653810"></a>Contain</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p10636123618385"><a name="p10636123618385"></a><a name="p10636123618385"></a>The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries.</p>
-    </td>
-    </tr>
-    <tr id="row363613613816"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p263693683810"><a name="p263693683810"></a><a name="p263693683810"></a>Fill</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p2636153673812"><a name="p2636153673812"></a><a name="p2636153673812"></a>The video content is resized to fill the display area while retaining its aspect ratio.</p>
-    </td>
-    </tr>
-    <tr id="row146361036123817"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1636436173817"><a name="p1636436173817"></a><a name="p1636436173817"></a>None</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p163603611385"><a name="p163603611385"></a><a name="p163603611385"></a>The original size is retained. Generally, this enum is used together with the <strong id="b1409154410539"><a name="b1409154410539"></a><a name="b1409154410539"></a>objectRepeat</strong> attribute.</p>
-    </td>
-    </tr>
-    <tr id="row263683611380"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p12636236143812"><a name="p12636236143812"></a><a name="p12636236143812"></a>ScaleDown</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1463619364382"><a name="p1463619364382"></a><a name="p1463619364382"></a>The image content is displayed with its aspect ratio retained. The size is smaller than or equal to the original size.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   <a name="li3882486263"></a>ImageInterpolation enums
-
-    <a name="table83091251143820"></a>
-    <table><thead align="left"><tr id="row1731016514381"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p163102513385"><a name="p163102513385"></a><a name="p163102513385"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p3310651133812"><a name="p3310651133812"></a><a name="p3310651133812"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row17310165193813"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p163101951123820"><a name="p163101951123820"></a><a name="p163101951123820"></a>None</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p03108513383"><a name="p03108513383"></a><a name="p03108513383"></a>Interpolation image data is not used.</p>
-    </td>
-    </tr>
-    <tr id="row14310175113810"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p2031065117389"><a name="p2031065117389"></a><a name="p2031065117389"></a>High</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p15310115111387"><a name="p15310115111387"></a><a name="p15310115111387"></a>The interpolation image data is used at the high level. The use of the interpolation image data may affect the image rendering speed.</p>
-    </td>
-    </tr>
-    <tr id="row163101851163819"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p83101151203811"><a name="p83101151203811"></a><a name="p83101151203811"></a>Medium</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p123101251123817"><a name="p123101251123817"></a><a name="p123101251123817"></a>The interpolation image data is used at the medium level.</p>
-    </td>
-    </tr>
-    <tr id="row20310205123811"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p11310751173812"><a name="p11310751173812"></a><a name="p11310751173812"></a>Low</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p63101451153820"><a name="p63101451153820"></a><a name="p63101451153820"></a>The interpolation image data is used at the low level.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   <a name="li174151754162611"></a>ImageRenderMode enums
-
-    <a name="table194261554384"></a>
-    <table><thead align="left"><tr id="row174260551387"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p204261755173813"><a name="p204261755173813"></a><a name="p204261755173813"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p1442665593817"><a name="p1442665593817"></a><a name="p1442665593817"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row15426115543812"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p34269556383"><a name="p34269556383"></a><a name="p34269556383"></a>Original</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p442625511387"><a name="p442625511387"></a><a name="p442625511387"></a>The image is rendered based on the original image, including the color.</p>
-    </td>
-    </tr>
-    <tr id="row134261455143818"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p154265557384"><a name="p154265557384"></a><a name="p154265557384"></a>Template</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p7426355163815"><a name="p7426355163815"></a><a name="p7426355163815"></a>The image is rendered as a template image, and its color is ignored.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Events<a name="section68973361117"></a>
-
-<a name="table872mcpsimp"></a>
-<table><thead align="left"><tr id="row878mcpsimp"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p882mcpsimp"><a name="p882mcpsimp"></a><a name="p882mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p884mcpsimp"><a name="p884mcpsimp"></a><a name="p884mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row885mcpsimp"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p6075115471"><a name="p6075115471"></a><a name="p6075115471"></a>onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number }) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p891mcpsimp"><a name="p891mcpsimp"></a><a name="p891mcpsimp"></a>Triggered when an image is successfully loaded. The loaded image is returned.</p>
-</td>
-</tr>
-<tr id="row892mcpsimp"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p894mcpsimp"><a name="p894mcpsimp"></a><a name="p894mcpsimp"></a>onError(callback: (event?: { componentWidth: number, componentHeight: number }) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p898mcpsimp"><a name="p898mcpsimp"></a><a name="p898mcpsimp"></a>An exception occurs during image loading.</p>
-</td>
-</tr>
-<tr id="row190418159260"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p1490411519261"><a name="p1490411519261"></a><a name="p1490411519261"></a>onFinish(callback: () =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p190501532618"><a name="p190501532618"></a><a name="p190501532618"></a>If the source file to be loaded is an SVG image, this callback is invoked when the SVG animation playback is complete. If the animation is an infinite loop, this callback is not triggered.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section6664181981216"></a>
+
+## APIs
+
+Image(value: {uri: string | PixelMap})
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | uri | string | Yes | - | Image&nbsp;URI.&nbsp;Both&nbsp;local&nbsp;and&nbsp;Internal&nbsp;URIs&nbsp;are&nbsp;supported. | 
+
+
+## Attributes
+
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| alt | string | - | Placeholder&nbsp;image&nbsp;displayed&nbsp;during&nbsp;loading.&nbsp;Both&nbsp;local&nbsp;and&nbsp;Internal&nbsp;URIs&nbsp;are&nbsp;supported. |
+| objectFit | ImageFit | ImageFit.Cover | Image&nbsp;scale&nbsp;type. |
+| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat enums) | ImageRepeat.NoRepeat | Whether&nbsp;the&nbsp;image&nbsp;is&nbsp;repeated.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;-&nbsp;This&nbsp;attribute&nbsp;is&nbsp;not&nbsp;applicable&nbsp;to&nbsp;SVG&nbsp;images. |
+| interpolation | ImageInterpolation | ImageInterpolation.None | Interpolation&nbsp;effect&nbsp;of&nbsp;the&nbsp;image.&nbsp;This&nbsp;attribute&nbsp;is&nbsp;valid&nbsp;only&nbsp;when&nbsp;the&nbsp;image&nbsp;is&nbsp;zoomed&nbsp;in.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;-&nbsp;This&nbsp;attribute&nbsp;is&nbsp;not&nbsp;applicable&nbsp;to&nbsp;SVG&nbsp;images.<br/>>&nbsp;<br/>>&nbsp;-&nbsp;This&nbsp;attribute&nbsp;is&nbsp;not&nbsp;applicable&nbsp;to&nbsp;a&nbsp;**PixelMap**&nbsp;object. |
+| renderMode | ImageRenderMode | ImageRenderMode.Original | Rendering&nbsp;mode&nbsp;of&nbsp;the&nbsp;image.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;-&nbsp;This&nbsp;attribute&nbsp;is&nbsp;not&nbsp;applicable&nbsp;to&nbsp;SVG&nbsp;images. |
+| sourceSize | {<br/>width:&nbsp;number,<br/>height:&nbsp;number<br/>} | - | Decoding&nbsp;size&nbsp;of&nbsp;the&nbsp;image.&nbsp;The&nbsp;original&nbsp;image&nbsp;is&nbsp;decoded&nbsp;into&nbsp;an&nbsp;image&nbsp;of&nbsp;the&nbsp;specified&nbsp;size.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;of&nbsp;the&nbsp;number&nbsp;type,&nbsp;the&nbsp;unit&nbsp;px&nbsp;is&nbsp;used.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;This&nbsp;attribute&nbsp;is&nbsp;not&nbsp;applicable&nbsp;to&nbsp;a&nbsp;**PixelMap**&nbsp;object. |
+| syncLoad<sup>8+</sup> | boolean | false | Whether&nbsp;to&nbsp;load&nbsp;images&nbsp;synchronously.&nbsp;By&nbsp;default,&nbsp;images&nbsp;are&nbsp;loaded&nbsp;asynchronously.&nbsp;During&nbsp;synchronous&nbsp;loading,&nbsp;the&nbsp;UI&nbsp;thread&nbsp;is&nbsp;blocked&nbsp;and&nbsp;the&nbsp;placeholder&nbsp;diagram&nbsp;is&nbsp;not&nbsp;displayed. |
+
+- ImageFit enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Cover | The&nbsp;image&nbsp;is&nbsp;scaled&nbsp;with&nbsp;its&nbsp;aspect&nbsp;ratio&nbsp;retained&nbsp;for&nbsp;both&nbsp;sides&nbsp;to&nbsp;be&nbsp;greater&nbsp;than&nbsp;or&nbsp;equal&nbsp;to&nbsp;the&nbsp;display&nbsp;boundaries. | 
+  | Contain | The&nbsp;image&nbsp;is&nbsp;scaled&nbsp;with&nbsp;its&nbsp;aspect&nbsp;ratio&nbsp;retained&nbsp;for&nbsp;the&nbsp;content&nbsp;to&nbsp;be&nbsp;completely&nbsp;displayed&nbsp;within&nbsp;the&nbsp;display&nbsp;boundaries. | 
+  | Fill | The&nbsp;video&nbsp;content&nbsp;is&nbsp;resized&nbsp;to&nbsp;fill&nbsp;the&nbsp;display&nbsp;area&nbsp;while&nbsp;retaining&nbsp;its&nbsp;aspect&nbsp;ratio. | 
+  | None | The&nbsp;original&nbsp;size&nbsp;is&nbsp;retained.&nbsp;Generally,&nbsp;this&nbsp;enum&nbsp;is&nbsp;used&nbsp;together&nbsp;with&nbsp;the&nbsp;**objectRepeat**&nbsp;attribute. | 
+  | ScaleDown | The&nbsp;image&nbsp;content&nbsp;is&nbsp;displayed&nbsp;with&nbsp;its&nbsp;aspect&nbsp;ratio&nbsp;retained.&nbsp;The&nbsp;size&nbsp;is&nbsp;smaller&nbsp;than&nbsp;or&nbsp;equal&nbsp;to&nbsp;the&nbsp;original&nbsp;size. | 
+
+- ImageInterpolation enums
+    | Name | Description | 
+  | -------- | -------- |
+  | None | Interpolation&nbsp;image&nbsp;data&nbsp;is&nbsp;not&nbsp;used. | 
+  | High | The&nbsp;interpolation&nbsp;image&nbsp;data&nbsp;is&nbsp;used&nbsp;at&nbsp;the&nbsp;high&nbsp;level.&nbsp;The&nbsp;use&nbsp;of&nbsp;the&nbsp;interpolation&nbsp;image&nbsp;data&nbsp;may&nbsp;affect&nbsp;the&nbsp;image&nbsp;rendering&nbsp;speed. | 
+  | Medium | The&nbsp;interpolation&nbsp;image&nbsp;data&nbsp;is&nbsp;used&nbsp;at&nbsp;the&nbsp;medium&nbsp;level. | 
+  | Low | The&nbsp;interpolation&nbsp;image&nbsp;data&nbsp;is&nbsp;used&nbsp;at&nbsp;the&nbsp;low&nbsp;level. | 
+
+- ImageRenderMode enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Original | The&nbsp;image&nbsp;is&nbsp;rendered&nbsp;based&nbsp;on&nbsp;the&nbsp;original&nbsp;image,&nbsp;including&nbsp;the&nbsp;color. | 
+  | Template | The&nbsp;image&nbsp;is&nbsp;rendered&nbsp;as&nbsp;a&nbsp;template&nbsp;image,&nbsp;and&nbsp;its&nbsp;color&nbsp;is&nbsp;ignored. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onComplete(callback:&nbsp;(event?:&nbsp;{&nbsp;width:&nbsp;number,&nbsp;height:&nbsp;number,&nbsp;componentWidth:&nbsp;number,&nbsp;componentHeight:&nbsp;number,&nbsp;loadingStatus:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;an&nbsp;image&nbsp;is&nbsp;successfully&nbsp;loaded.&nbsp;The&nbsp;loaded&nbsp;image&nbsp;is&nbsp;returned. | 
+| onError(callback:&nbsp;(event?:&nbsp;{&nbsp;componentWidth:&nbsp;number,&nbsp;componentHeight:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | An&nbsp;exception&nbsp;occurs&nbsp;during&nbsp;image&nbsp;loading. | 
+| onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | If&nbsp;the&nbsp;source&nbsp;file&nbsp;to&nbsp;be&nbsp;loaded&nbsp;is&nbsp;an&nbsp;SVG&nbsp;image,&nbsp;this&nbsp;callback&nbsp;is&nbsp;invoked&nbsp;when&nbsp;the&nbsp;SVG&nbsp;animation&nbsp;playback&nbsp;is&nbsp;complete.&nbsp;If&nbsp;the&nbsp;animation&nbsp;is&nbsp;an&nbsp;infinite&nbsp;loop,&nbsp;this&nbsp;callback&nbsp;is&nbsp;not&nbsp;triggered. | 
+
+
+## Example
+
 
 ```
 // Image1
 @Entry
 @Component
 struct ImageExample1 {
-  private on: string = 'www.example.com'
+  private on: string = 'www.example.com' 
   @State src: string = this.on
 
   build() {
@@ -325,7 +141,8 @@ struct ImageExample1 {
 }
 ```
 
-![](figures/en-us_image_0000001239925031.gif)
+![en-us_image_0000001211898484](figures/en-us_image_0000001211898484.gif)
+
 
 ```
 // Image2
@@ -394,7 +211,8 @@ struct ImageExample2 {
 }
 ```
 
-![](figures/en-us_image_0000001194605518.png)
+![en-us_image_0000001212058474](figures/en-us_image_0000001212058474.png)
+
 
 ```
 // Image3
@@ -456,5 +274,4 @@ struct ImageExample3 {
 }
 ```
 
-![](figures/en-us_image_0000001194942468.gif)
-
+![en-us_image_0000001256858397](figures/en-us_image_0000001256858397.gif)
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 af1a3aaaa8f9297be8efbb28d8455d4c46f5ab5e..a80064b6e432469b98b5361cb293c8ada80af1dd 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,245 +1,69 @@
-# ImageAnimator<a name="EN-US_TOPIC_0000001192595166"></a>
+# ImageAnimator
 
->![](../../public_sys-resources/icon-note.gif) **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.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+
+The **&lt;ImageAnimator&gt;** 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
 
-## Child Components<a name="section1848323814535"></a>
+
+## Child Components
 
 None
 
-## APIs<a name="section195458521537"></a>
 
-ImageAnimator\(\)
+## APIs
+
+ImageAnimator()
 
-## Attributes<a name="section792713805418"></a>
 
-<a name="table5252022152119"></a>
-<table><thead align="left"><tr id="row11104142212214"><th class="cellrowborder" valign="top" width="16.939999999999998%" id="mcps1.1.6.1.1"><p id="p910452215216"><a name="p910452215216"></a><a name="p910452215216"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="23.06%" id="mcps1.1.6.1.2"><p id="p101048225219"><a name="p101048225219"></a><a name="p101048225219"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="13.87%" id="mcps1.1.6.1.3"><p id="p12104182213214"><a name="p12104182213214"></a><a name="p12104182213214"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="8.34%" id="mcps1.1.6.1.4"><p id="p1110412227213"><a name="p1110412227213"></a><a name="p1110412227213"></a>Mandatory</p>
-</th>
-<th class="cellrowborder" valign="top" width="37.79%" id="mcps1.1.6.1.5"><p id="p111041222216"><a name="p111041222216"></a><a name="p111041222216"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row151041822122115"><td class="cellrowborder" valign="top" width="16.939999999999998%" headers="mcps1.1.6.1.1 "><p id="p18104202212211"><a name="p18104202212211"></a><a name="p18104202212211"></a>images</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.06%" headers="mcps1.1.6.1.2 "><p id="p1559165935118"><a name="p1559165935118"></a><a name="p1559165935118"></a>Array&lt;{</p>
-<p id="p2028416211528"><a name="p2028416211528"></a><a name="p2028416211528"></a>src:string,</p>
-<p id="p19739134125218"><a name="p19739134125218"></a><a name="p19739134125218"></a>width?:Length,</p>
-<p id="p124821213115210"><a name="p124821213115210"></a><a name="p124821213115210"></a>height?:Length,</p>
-<p id="p18227201965218"><a name="p18227201965218"></a><a name="p18227201965218"></a>top?:Length,</p>
-<p id="p4119183012527"><a name="p4119183012527"></a><a name="p4119183012527"></a>left?:Length,</p>
-<p id="p6946343195211"><a name="p6946343195211"></a><a name="p6946343195211"></a>duration?:number</p>
-<p id="p2010416225213"><a name="p2010416225213"></a><a name="p2010416225213"></a>}&gt;</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p1010417225219"><a name="p1010417225219"></a><a name="p1010417225219"></a>[]</p>
-</td>
-<td class="cellrowborder" valign="top" width="8.34%" headers="mcps1.1.6.1.4 "><p id="p13104182232113"><a name="p13104182232113"></a><a name="p13104182232113"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.79%" headers="mcps1.1.6.1.5 "><p id="p043414238598"><a name="p043414238598"></a><a name="p043414238598"></a>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:</p>
-<p id="p10262184312594"><a name="p10262184312594"></a><a name="p10262184312594"></a><strong id="b61841953029"><a name="b61841953029"></a><a name="b61841953029"></a>src</strong>: image path. The image format can be SVG, PNG, or JPG.</p>
-<p id="p1858275019595"><a name="p1858275019595"></a><a name="p1858275019595"></a><strong id="b751711315311"><a name="b751711315311"></a><a name="b751711315311"></a>width</strong>: image width.</p>
-<p id="p159991882004"><a name="p159991882004"></a><a name="p159991882004"></a><strong id="b168721591734"><a name="b168721591734"></a><a name="b168721591734"></a>height</strong>: image height.</p>
-<p id="p123627151909"><a name="p123627151909"></a><a name="p123627151909"></a><strong id="b02857211338"><a name="b02857211338"></a><a name="b02857211338"></a>top</strong>: vertical coordinate of the image relative to the upper left corner of the component.</p>
-<p id="p1921915211809"><a name="p1921915211809"></a><a name="p1921915211809"></a><strong id="b154821021049"><a name="b154821021049"></a><a name="b154821021049"></a>left</strong>: horizontal coordinate of the image relative to the upper left corner of the component.</p>
-<p id="p5104182210213"><a name="p5104182210213"></a><a name="p5104182210213"></a><strong id="b182931725557"><a name="b182931725557"></a><a name="b182931725557"></a>duration</strong>: playback duration of the image, in ms.</p>
-</td>
-</tr>
-<tr id="row17104222172116"><td class="cellrowborder" valign="top" width="16.939999999999998%" headers="mcps1.1.6.1.1 "><p id="p310472210213"><a name="p310472210213"></a><a name="p310472210213"></a>state</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.06%" headers="mcps1.1.6.1.2 "><p id="p1410411222211"><a name="p1410411222211"></a><a name="p1410411222211"></a>AnimationStatus</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p121041522132116"><a name="p121041522132116"></a><a name="p121041522132116"></a>Initial</p>
-</td>
-<td class="cellrowborder" valign="top" width="8.34%" headers="mcps1.1.6.1.4 "><p id="p3104022142114"><a name="p3104022142114"></a><a name="p3104022142114"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.79%" headers="mcps1.1.6.1.5 "><p id="p8104202272119"><a name="p8104202272119"></a><a name="p8104202272119"></a>Playback status of the animation. The default status is <strong id="b8997195619"><a name="b8997195619"></a><a name="b8997195619"></a>Initial</strong>.</p>
-</td>
-</tr>
-<tr id="row131041222162111"><td class="cellrowborder" valign="top" width="16.939999999999998%" headers="mcps1.1.6.1.1 "><p id="p4104182262112"><a name="p4104182262112"></a><a name="p4104182262112"></a>duration</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.06%" headers="mcps1.1.6.1.2 "><p id="p101041222112114"><a name="p101041222112114"></a><a name="p101041222112114"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p81046226216"><a name="p81046226216"></a><a name="p81046226216"></a>1000</p>
-</td>
-<td class="cellrowborder" valign="top" width="8.34%" headers="mcps1.1.6.1.4 "><p id="p2104112211215"><a name="p2104112211215"></a><a name="p2104112211215"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.79%" headers="mcps1.1.6.1.5 "><p id="p8104622102117"><a name="p8104622102117"></a><a name="p8104622102117"></a>Playback duration, in ms. The default duration is 1000 ms. When the duration is <strong id="b17997185918710"><a name="b17997185918710"></a><a name="b17997185918710"></a>0</strong>, 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.</p>
-</td>
-</tr>
-<tr id="row1310442232120"><td class="cellrowborder" valign="top" width="16.939999999999998%" headers="mcps1.1.6.1.1 "><p id="p1010422232111"><a name="p1010422232111"></a><a name="p1010422232111"></a>reverse</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.06%" headers="mcps1.1.6.1.2 "><p id="p1210420226213"><a name="p1210420226213"></a><a name="p1210420226213"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p410442272119"><a name="p410442272119"></a><a name="p410442272119"></a>false</p>
-</td>
-<td class="cellrowborder" valign="top" width="8.34%" headers="mcps1.1.6.1.4 "><p id="p12104182292114"><a name="p12104182292114"></a><a name="p12104182292114"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.79%" headers="mcps1.1.6.1.5 "><p id="p91041922102111"><a name="p91041922102111"></a><a name="p91041922102111"></a>Playback sequence. The value <strong id="b152051371103"><a name="b152051371103"></a><a name="b152051371103"></a>false</strong> indicates that images are played from the first one to the last one, and <strong id="b5211937191016"><a name="b5211937191016"></a><a name="b5211937191016"></a>true</strong> indicates that images are played from the last one to the first one.</p>
-</td>
-</tr>
-<tr id="row11104822162112"><td class="cellrowborder" valign="top" width="16.939999999999998%" headers="mcps1.1.6.1.1 "><p id="p11105102202118"><a name="p11105102202118"></a><a name="p11105102202118"></a>fixedSize</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.06%" headers="mcps1.1.6.1.2 "><p id="p1410512222113"><a name="p1410512222113"></a><a name="p1410512222113"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p141057229210"><a name="p141057229210"></a><a name="p141057229210"></a>true</p>
-</td>
-<td class="cellrowborder" valign="top" width="8.34%" headers="mcps1.1.6.1.4 "><p id="p91054228213"><a name="p91054228213"></a><a name="p91054228213"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.79%" headers="mcps1.1.6.1.5 "><p id="p19105132212212"><a name="p19105132212212"></a><a name="p19105132212212"></a>Whether the image size is the same as the component size. <strong id="b2987194717106"><a name="b2987194717106"></a><a name="b2987194717106"></a>true</strong>: 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. <strong id="b54149151113"><a name="b54149151113"></a><a name="b54149151113"></a>false</strong>: The width, height, top, and left attributes of each image must be set separately.</p>
-</td>
-</tr>
-<tr id="row1910519227213"><td class="cellrowborder" valign="top" width="16.939999999999998%" headers="mcps1.1.6.1.1 "><p id="p10105112211216"><a name="p10105112211216"></a><a name="p10105112211216"></a>preDecode</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.06%" headers="mcps1.1.6.1.2 "><p id="p18105122292114"><a name="p18105122292114"></a><a name="p18105122292114"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p131058220216"><a name="p131058220216"></a><a name="p131058220216"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="8.34%" headers="mcps1.1.6.1.4 "><p id="p1510542272119"><a name="p1510542272119"></a><a name="p1510542272119"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.79%" headers="mcps1.1.6.1.5 "><p id="p410552211216"><a name="p410552211216"></a><a name="p410552211216"></a>Whether to enable pre-decoding. The default value <strong id="b155462951118"><a name="b155462951118"></a><a name="b155462951118"></a>0</strong> indicates that pre-decoding is disabled. If this attribute is set to <strong id="b355313991115"><a name="b355313991115"></a><a name="b355313991115"></a>2</strong>, two images following the currently playing frame will be cached in advance to improve performance.</p>
-</td>
-</tr>
-<tr id="row710572202119"><td class="cellrowborder" valign="top" width="16.939999999999998%" headers="mcps1.1.6.1.1 "><p id="p11051622142116"><a name="p11051622142116"></a><a name="p11051622142116"></a>fillMode</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.06%" headers="mcps1.1.6.1.2 "><p id="p91051022152115"><a name="p91051022152115"></a><a name="p91051022152115"></a>FillMode</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p16105112212116"><a name="p16105112212116"></a><a name="p16105112212116"></a>Forwards</p>
-</td>
-<td class="cellrowborder" valign="top" width="8.34%" headers="mcps1.1.6.1.4 "><p id="p15105122282118"><a name="p15105122282118"></a><a name="p15105122282118"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.79%" headers="mcps1.1.6.1.5 "><p id="p51051622152114"><a name="p51051622152114"></a><a name="p51051622152114"></a>Status before and after the animation starts. For details about the options, see <strong id="b15960256131115"><a name="b15960256131115"></a><a name="b15960256131115"></a>FillMode</strong>.</p>
-</td>
-</tr>
-<tr id="row17105022202118"><td class="cellrowborder" valign="top" width="16.939999999999998%" headers="mcps1.1.6.1.1 "><p id="p6105112252111"><a name="p6105112252111"></a><a name="p6105112252111"></a>iterations</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.06%" headers="mcps1.1.6.1.2 "><p id="p1810512214213"><a name="p1810512214213"></a><a name="p1810512214213"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p1010515222214"><a name="p1010515222214"></a><a name="p1010515222214"></a>1</p>
-</td>
-<td class="cellrowborder" valign="top" width="8.34%" headers="mcps1.1.6.1.4 "><p id="p010518228214"><a name="p010518228214"></a><a name="p010518228214"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.79%" headers="mcps1.1.6.1.5 "><p id="p8105122202117"><a name="p8105122202117"></a><a name="p8105122202117"></a>By default, the animation is played once. The value <strong id="b2072770101214"><a name="b2072770101214"></a><a name="b2072770101214"></a>-1</strong> indicates that the animation is played for an unlimited number of times.</p>
-</td>
-</tr>
-</tbody>
-</table>
+## Attributes
 
--   AnimationStatus enums
+| Name | Type | Default&nbsp;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&nbsp;frame&nbsp;information.&nbsp;The&nbsp;information&nbsp;of&nbsp;each&nbsp;frame&nbsp;includes&nbsp;the&nbsp;image&nbsp;path,&nbsp;image&nbsp;size,&nbsp;image&nbsp;position,&nbsp;and&nbsp;image&nbsp;playback&nbsp;duration.&nbsp;The&nbsp;detailed&nbsp;description&nbsp;is&nbsp;as&nbsp;follows:<br/>**src**:&nbsp;image&nbsp;path.&nbsp;The&nbsp;image&nbsp;format&nbsp;can&nbsp;be&nbsp;SVG,&nbsp;PNG,&nbsp;or&nbsp;JPG.<br/>**width**:&nbsp;image&nbsp;width.<br/>**height**:&nbsp;image&nbsp;height.<br/>**top**:&nbsp;vertical&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;image&nbsp;relative&nbsp;to&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;component.<br/>**left**:&nbsp;horizontal&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;image&nbsp;relative&nbsp;to&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;component.<br/>**duration**:&nbsp;playback&nbsp;duration&nbsp;of&nbsp;the&nbsp;image,&nbsp;in&nbsp;ms. |
+| state | AnimationStatus | AnimationStatus.Initial | No | Playback&nbsp;status&nbsp;of&nbsp;the&nbsp;animation.&nbsp;The&nbsp;default&nbsp;status&nbsp;is&nbsp;**Initial**. |
+| duration | number | 1000 | No | Playback&nbsp;duration,&nbsp;in&nbsp;ms.&nbsp;The&nbsp;default&nbsp;duration&nbsp;is&nbsp;1000&nbsp;ms.&nbsp;When&nbsp;the&nbsp;duration&nbsp;is&nbsp;**0**,&nbsp;no&nbsp;image&nbsp;is&nbsp;played.&nbsp;The&nbsp;value&nbsp;change&nbsp;takes&nbsp;effect&nbsp;only&nbsp;at&nbsp;the&nbsp;beginning&nbsp;of&nbsp;the&nbsp;next&nbsp;cycle.&nbsp;When&nbsp;a&nbsp;separate&nbsp;duration&nbsp;is&nbsp;set&nbsp;in&nbsp;images,&nbsp;the&nbsp;setting&nbsp;of&nbsp;this&nbsp;attribute&nbsp;is&nbsp;invalid. |
+| reverse | boolean | false | No | Playback&nbsp;sequence.&nbsp;The&nbsp;value&nbsp;**false**&nbsp;indicates&nbsp;that&nbsp;images&nbsp;are&nbsp;played&nbsp;from&nbsp;the&nbsp;first&nbsp;one&nbsp;to&nbsp;the&nbsp;last&nbsp;one,&nbsp;and&nbsp;**true**&nbsp;indicates&nbsp;that&nbsp;images&nbsp;are&nbsp;played&nbsp;from&nbsp;the&nbsp;last&nbsp;one&nbsp;to&nbsp;the&nbsp;first&nbsp;one. |
+| fixedSize | boolean | true | No | Whether&nbsp;the&nbsp;image&nbsp;size&nbsp;is&nbsp;the&nbsp;same&nbsp;as&nbsp;the&nbsp;component&nbsp;size.&nbsp;**true**:&nbsp;The&nbsp;image&nbsp;size&nbsp;is&nbsp;the&nbsp;same&nbsp;as&nbsp;the&nbsp;component&nbsp;size.&nbsp;In&nbsp;this&nbsp;case,&nbsp;the&nbsp;width,&nbsp;height,&nbsp;top,&nbsp;and&nbsp;left&nbsp;attributes&nbsp;of&nbsp;the&nbsp;image&nbsp;are&nbsp;invalid.&nbsp;**false**:&nbsp;The&nbsp;width,&nbsp;height,&nbsp;top,&nbsp;and&nbsp;left&nbsp;attributes&nbsp;of&nbsp;each&nbsp;image&nbsp;must&nbsp;be&nbsp;set&nbsp;separately. |
+| preDecode | number | 0 | No | Whether&nbsp;to&nbsp;enable&nbsp;pre-decoding.&nbsp;The&nbsp;default&nbsp;value&nbsp;**0**&nbsp;indicates&nbsp;that&nbsp;pre-decoding&nbsp;is&nbsp;disabled.&nbsp;If&nbsp;this&nbsp;attribute&nbsp;is&nbsp;set&nbsp;to&nbsp;**2**,&nbsp;two&nbsp;images&nbsp;following&nbsp;the&nbsp;currently&nbsp;playing&nbsp;frame&nbsp;will&nbsp;be&nbsp;cached&nbsp;in&nbsp;advance&nbsp;to&nbsp;improve&nbsp;performance. |
+| fillMode | FillMode | FillMode.Forwards | No | Status&nbsp;before&nbsp;and&nbsp;after&nbsp;the&nbsp;animation&nbsp;starts.&nbsp;For&nbsp;details&nbsp;about&nbsp;the&nbsp;options,&nbsp;see&nbsp;**FillMode**. |
+| iterations | number | 1 | No | By&nbsp;default,&nbsp;the&nbsp;animation&nbsp;is&nbsp;played&nbsp;once.&nbsp;The&nbsp;value&nbsp;**-1**&nbsp;indicates&nbsp;that&nbsp;the&nbsp;animation&nbsp;is&nbsp;played&nbsp;for&nbsp;an&nbsp;unlimited&nbsp;number&nbsp;of&nbsp;times. |
 
-    <a name="table3452114216394"></a>
-    <table><thead align="left"><tr id="row245219426397"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p545244283914"><a name="p545244283914"></a><a name="p545244283914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p2452114203917"><a name="p2452114203917"></a><a name="p2452114203917"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6452144218390"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p34529427398"><a name="p34529427398"></a><a name="p34529427398"></a>Initial</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245211421393"><a name="p1245211421393"></a><a name="p1245211421393"></a>The animation is in the initial state.</p>
-    </td>
-    </tr>
-    <tr id="row12452184217398"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p54523425398"><a name="p54523425398"></a><a name="p54523425398"></a>Running</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p745215426391"><a name="p745215426391"></a><a name="p745215426391"></a>The animation is being played.</p>
-    </td>
-    </tr>
-    <tr id="row9452134213392"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p510719111403"><a name="p510719111403"></a><a name="p510719111403"></a>Paused</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p154533425394"><a name="p154533425394"></a><a name="p154533425394"></a>The animation is paused.</p>
-    </td>
-    </tr>
-    <tr id="row1345313424399"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1766215124010"><a name="p1766215124010"></a><a name="p1766215124010"></a>Stopped</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245319426394"><a name="p1245319426394"></a><a name="p1245319426394"></a>The animation is stopped.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+- AnimationStatus enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Initial | The&nbsp;animation&nbsp;is&nbsp;in&nbsp;the&nbsp;initial&nbsp;state. | 
+  | Running | The&nbsp;animation&nbsp;is&nbsp;being&nbsp;played. | 
+  | Paused | The&nbsp;animation&nbsp;is&nbsp;paused. | 
+  | Stopped | The&nbsp;animation&nbsp;is&nbsp;stopped. | 
 
+- FillMode enums
+    | Name | Description | 
+  | -------- | -------- |
+  | None | After&nbsp;the&nbsp;playback&nbsp;is&nbsp;complete,&nbsp;the&nbsp;animation&nbsp;restores&nbsp;to&nbsp;the&nbsp;initial&nbsp;state. | 
+  | Forwards | After&nbsp;the&nbsp;playback&nbsp;is&nbsp;complete,&nbsp;the&nbsp;animation&nbsp;remains&nbsp;in&nbsp;the&nbsp;end&nbsp;state. | 
 
--   FillMode enums
 
-    <a name="table7527153712012"></a>
-    <table><thead align="left"><tr id="row45277371008"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p616316585179"><a name="p616316585179"></a><a name="p616316585179"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p185278372020"><a name="p185278372020"></a><a name="p185278372020"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row185271437105"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p2527137309"><a name="p2527137309"></a><a name="p2527137309"></a>None</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1252716372017"><a name="p1252716372017"></a><a name="p1252716372017"></a>After the playback is complete, the animation restores to the initial state.</p>
-    </td>
-    </tr>
-    <tr id="row10527193716013"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p15275371703"><a name="p15275371703"></a><a name="p15275371703"></a>Forwards</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p17527203717017"><a name="p17527203717017"></a><a name="p17527203717017"></a>After the playback is complete, the animation remains in the end state.</p>
-    </td>
-    </tr>
-    <tr id="row15271837301"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p14527203712015"><a name="p14527203712015"></a><a name="p14527203712015"></a>Backwards</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p20527143716011"><a name="p20527143716011"></a><a name="p20527143716011"></a>The attribute value is applied during the period specified by <strong id="b17176152112181"><a name="b17176152112181"></a><a name="b17176152112181"></a>animation-delay</strong> and before the animation is played.</p>
-    </td>
-    </tr>
-    <tr id="row7527183711010"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p75271737601"><a name="p75271737601"></a><a name="p75271737601"></a>Both</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1952714379015"><a name="p1952714379015"></a><a name="p1952714379015"></a>Both the <strong id="b7231540112414"><a name="b7231540112414"></a><a name="b7231540112414"></a>Forwards</strong> and <strong id="b270119446248"><a name="b270119446248"></a><a name="b270119446248"></a>Backwards</strong> values are applied.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+## Events
 
+  | Name | Description | 
+| -------- | -------- | -------- |
+| onStart()&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;animation&nbsp;starts&nbsp;to&nbsp;play. | 
+| onPause()&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;animation&nbsp;playback&nbsp;is&nbsp;paused. | 
+| onRepeat()&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;animation&nbsp;playback&nbsp;is&nbsp;repeated. | 
+| onCancel()&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;animation&nbsp;playback&nbsp;is&nbsp;canceled. | 
+| onFinish()&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;animation&nbsp;playback&nbsp;is&nbsp;complete. | 
 
-## Events<a name="section8249161475516"></a>
 
-<a name="table439122102118"></a>
-<table><thead align="left"><tr id="row3105722182112"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p210552218212"><a name="p210552218212"></a><a name="p210552218212"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p19105182282113"><a name="p19105182282113"></a><a name="p19105182282113"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row6105132212112"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p010512211212"><a name="p010512211212"></a><a name="p010512211212"></a>onStart() =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p1810582222115"><a name="p1810582222115"></a><a name="p1810582222115"></a>Triggered when the animation starts to play.</p>
-</td>
-</tr>
-<tr id="row8105522142117"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p4105022182111"><a name="p4105022182111"></a><a name="p4105022182111"></a>onPause() =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p5105112232111"><a name="p5105112232111"></a><a name="p5105112232111"></a>Triggered when the animation playback is paused.</p>
-</td>
-</tr>
-<tr id="row310552220210"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p810662212210"><a name="p810662212210"></a><a name="p810662212210"></a>onRepeat() =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p0106202216214"><a name="p0106202216214"></a><a name="p0106202216214"></a>Triggered when the animation playback is repeated.</p>
-</td>
-</tr>
-<tr id="row1210611228211"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p18106322162117"><a name="p18106322162117"></a><a name="p18106322162117"></a>onCancel() =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p5106132214211"><a name="p5106132214211"></a><a name="p5106132214211"></a>Triggered when the animation playback is canceled.</p>
-</td>
-</tr>
-<tr id="row201061222112114"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p410602214217"><a name="p410602214217"></a><a name="p410602214217"></a>onFinish() =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p510642218218"><a name="p510642218218"></a><a name="p510642218218"></a>Triggered when the animation playback is complete.</p>
-</td>
-</tr>
-</tbody>
-</table>
+## Example
 
-## Example<a name="section4459736105512"></a>
 
 ```
 @Entry
@@ -331,5 +155,4 @@ struct ImageAnimatorExample {
 }
 ```
 
-![](figures/imageanimator.gif)
-
+![en-us_image_0000001211898470](figures/en-us_image_0000001211898470.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md
deleted file mode 100644
index c7e5d0022e7b90ef0fa6a4755bbd3e7a4cdd8b47..0000000000000000000000000000000000000000
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md
+++ /dev/null
@@ -1,51 +0,0 @@
-# LoadingProgress
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-The **<LoadingProgress\>** component is used to display the loading progress.
-
-
-## Required Permissions
-
-None
-
-
-## Child Components
-
-None
-
-
-## APIs
-
-LoadingProgress()
-
-Creates a **LoadingProgress** instance.
-
-
-
-## Attributes
-
-| Name| Type| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| color | Color | - | Foreground color of the loading progress bar.|
-
-
-
-## Example
-
-```
-@Entry
-@Component
-struct LoadingProgressExample {
-  build() {
-    Column({ space: 5 }) {
-      Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%')
-      LoadingProgress()
-        .color(Color.Blue)
-    }.width('100%').margin({ top: 5 })
-  }
-}
-```
-
-![zh-cn_image_0000001198839004](figures/loadingProgress.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md b/en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md
deleted file mode 100644
index 5348e4f44d4442d67cc63f1e0491aaa3a0d9976f..0000000000000000000000000000000000000000
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md
+++ /dev/null
@@ -1,172 +0,0 @@
-# Marquee<a name="EN-US_TOPIC_0000001193075120"></a>
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-The  **<Marquee\>**  component displays single-line scrolling text.
-
-## Required Permissions<a name="section781125411508"></a>
-
-None
-
-## Child Components<a name="section1747133474417"></a>
-
-None
-
-## APIs<a name="section9359185354414"></a>
-
-Marquee\(value: \{ start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string \}\)
-
--   Parameters
-
-    <a name="table1392916196212"></a>
-    <table><thead align="left"><tr id="row19306191218"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p199307193217"><a name="p199307193217"></a><a name="p199307193217"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.01%" id="mcps1.1.6.1.2"><p id="p119302191128"><a name="p119302191128"></a><a name="p119302191128"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.499999999999998%" id="mcps1.1.6.1.3"><p id="p7930141911211"><a name="p7930141911211"></a><a name="p7930141911211"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.170000000000002%" id="mcps1.1.6.1.4"><p id="p1393020194219"><a name="p1393020194219"></a><a name="p1393020194219"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="42.21%" id="mcps1.1.6.1.5"><p id="p693061912210"><a name="p693061912210"></a><a name="p693061912210"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1093021911217"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p119307198218"><a name="p119307198218"></a><a name="p119307198218"></a>start</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p129301719828"><a name="p129301719828"></a><a name="p129301719828"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p893091913213"><a name="p893091913213"></a><a name="p893091913213"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p793071910214"><a name="p793071910214"></a><a name="p793071910214"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p693016198212"><a name="p693016198212"></a><a name="p693016198212"></a>Whether to set the marquee scroll.</p>
-    </td>
-    </tr>
-    <tr id="row199301191726"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p0930419923"><a name="p0930419923"></a><a name="p0930419923"></a>step</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p1993071918217"><a name="p1993071918217"></a><a name="p1993071918217"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p29309191029"><a name="p29309191029"></a><a name="p29309191029"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p118311842123617"><a name="p118311842123617"></a><a name="p118311842123617"></a>6</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p793001918220"><a name="p793001918220"></a><a name="p793001918220"></a>Scroll step of the marquee text.</p>
-    </td>
-    </tr>
-    <tr id="row10370145873614"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p4370135818365"><a name="p4370135818365"></a><a name="p4370135818365"></a>loop</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p53708580369"><a name="p53708580369"></a><a name="p53708580369"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p15370165813367"><a name="p15370165813367"></a><a name="p15370165813367"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p13701558103616"><a name="p13701558103616"></a><a name="p13701558103616"></a>-1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p6370105815365"><a name="p6370105815365"></a><a name="p6370105815365"></a>Number of times the marquee scrolls. If the value is less than or equal to 0, the marquee scrolls continuously.</p>
-    </td>
-    </tr>
-    <tr id="row247175183714"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p3471958371"><a name="p3471958371"></a><a name="p3471958371"></a>fromStart</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p13471257376"><a name="p13471257376"></a><a name="p13471257376"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p6471454375"><a name="p6471454375"></a><a name="p6471454375"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p1747135123718"><a name="p1747135123718"></a><a name="p1747135123718"></a>true</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p18471153375"><a name="p18471153375"></a><a name="p18471153375"></a>Whether the marquee scrolls from the start of the text. If the value is <strong id="b052932855811"><a name="b052932855811"></a><a name="b052932855811"></a>false</strong>, the marquee scrolls from the end of the text.</p>
-    </td>
-    </tr>
-    <tr id="row157653817379"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p197654883718"><a name="p197654883718"></a><a name="p197654883718"></a>src</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p11765108153716"><a name="p11765108153716"></a><a name="p11765108153716"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p137659813720"><a name="p137659813720"></a><a name="p137659813720"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p1765208133711"><a name="p1765208133711"></a><a name="p1765208133711"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p16765158143711"><a name="p16765158143711"></a><a name="p16765158143711"></a>Text to be scrolled.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Events<a name="section1635844417475"></a>
-
-<a name="table111753094820"></a>
-<table><thead align="left"><tr id="row11176100164815"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p276mcpsimp"><a name="p276mcpsimp"></a><a name="p276mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p3176150114819"><a name="p3176150114819"></a><a name="p3176150114819"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row171761700484"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p6940113511352"><a name="p6940113511352"></a><a name="p6940113511352"></a>onStart(callback: () =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p71769012486"><a name="p71769012486"></a><a name="p71769012486"></a>Invoked when scrolling starts.</p>
-</td>
-</tr>
-<tr id="row5176601485"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p1287810465356"><a name="p1287810465356"></a><a name="p1287810465356"></a>onBounce(callback: () =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p317711014811"><a name="p317711014811"></a><a name="p317711014811"></a>Invoked when scrolling reaches the end.</p>
-</td>
-</tr>
-<tr id="row8177706483"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p10795054203519"><a name="p10795054203519"></a><a name="p10795054203519"></a>onFinish(callback: () =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p61771084820"><a name="p61771084820"></a><a name="p61771084820"></a>Invoked when scrolling is complete.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section3609114210499"></a>
-
-```
-@Entry
-@Component
-struct MarqueeExample {
-  @State start: boolean = false
-  @State fromStart: boolean = true
-  @State step: number = 50
-  @State loop: number = 3
-  @State src: string = "Running Marquee starts rolling"
-
-  build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-      Marquee({
-        start: this.start,
-        step: this.step,
-        loop: this.loop,
-        fromStart: this.fromStart,
-        src: this.src
-      })
-        .fontColor(Color.White)
-        .fontSize(50)
-        .allowScale(false)
-        .fontWeight(FontWeight.Bold)
-        .backgroundColor(Color.Black)
-        .margin({bottom:40})
-        .onStart(() => {
-          console.log('Marquee animation complete onStart')
-        })
-        .onBounce(() => {
-          console.log('Marquee animation complete onBounce')
-        })
-        .onFinish(() => {
-          console.log('Marquee animation complete onFinish')
-        })
-        Button('start')
-          .onClick(() => {
-            this.start = true
-             })
-          .width(200)
-          .height(60)
-          .margin({bottom:20})
-    }
-    .width('100%')
-    .height('100%')
-  }
-}
-```
-
-![](figures/gif-1.gif)
-
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md b/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
new file mode 100644
index 0000000000000000000000000000000000000000..14c7af39a01f94de4daa5bb820d43615a1dabc2b
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
@@ -0,0 +1,222 @@
+# Navigation
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+The **&lt;Navigation&gt;** component typically functions as the root container of a page and displays the page title, toolbar, and menu based on the attribute settings.
+
+
+## Required Permissions
+
+None
+
+
+## Child Component
+
+It can contain subcomponents.
+
+
+## APIs
+
+Navigation()
+
+Creates a component that can automatically display the navigation bar, title, and toolbar based on the attribute settings.
+
+
+## Attributes
+
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| title | string&nbsp;\|&nbsp;[Custom Builder](../../ui/ts-types.md) | - | Page&nbsp;title. |
+| subtitle | string | - | Subtitle&nbsp;of&nbsp;the&nbsp;page. |
+| menus | Array&lt;NavigationMenuItem&gt;&nbsp;\|&nbsp;[Custom Builder](../../ui/ts-types.md) | - | Menu&nbsp;in&nbsp;the&nbsp;upper&nbsp;right&nbsp;corner&nbsp;of&nbsp;the&nbsp;page. |
+| titleMode | NavigationTitleMode | NavigationTitleMode.Free | Display&nbsp;mode&nbsp;of&nbsp;the&nbsp;page&nbsp;title&nbsp;bar. |
+| toolBar | {<br/>items:[<br/>Object<br/>]&nbsp;}<br/>\|&nbsp;[Custom Builder](../../ui/ts-types.md) | - | Content&nbsp;of&nbsp;the&nbsp;toolbar.<br/>**items**:&nbsp;all&nbsp;items&nbsp;on&nbsp;the&nbsp;toolbar. |
+| hideToolBar | boolean | false | Whether&nbsp;to&nbsp;hide&nbsp;the&nbsp;toolbar.<br/>**true**:&nbsp;Hide&nbsp;the&nbsp;toolbar.<br/>**false**:&nbsp;Show&nbsp;the&nbsp;toolbar. |
+| hideTitleBar | boolean | false | Whether&nbsp;to&nbsp;hide&nbsp;the&nbsp;title&nbsp;bar. |
+| hideBackButton | boolean | false | Whether&nbsp;to&nbsp;hide&nbsp;the&nbsp;back&nbsp;button. |
+
+- NavigationMenuItem attributes
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | value | string | Yes | - | Text&nbsp;of&nbsp;an&nbsp;option&nbsp;on&nbsp;the&nbsp;menu&nbsp;bar. | 
+  | icon | string | No | - | Icon&nbsp;path&nbsp;of&nbsp;an&nbsp;option&nbsp;on&nbsp;the&nbsp;menu&nbsp;bar. | 
+  | action | ()&nbsp;=&gt;&nbsp;void | No | - | Callback&nbsp;invoked&nbsp;when&nbsp;an&nbsp;option&nbsp;is&nbsp;selected. | 
+
+- Object attributes
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | value | string | Yes | - | Text&nbsp;of&nbsp;an&nbsp;option&nbsp;on&nbsp;the&nbsp;toolbar. | 
+  | icon | string | No | - | Icon&nbsp;path&nbsp;of&nbsp;an&nbsp;option&nbsp;on&nbsp;the&nbsp;toolbar. | 
+  | action | ()&nbsp;=&gt;&nbsp;void | No | - | Callback&nbsp;invoked&nbsp;when&nbsp;an&nbsp;option&nbsp;is&nbsp;selected. | 
+
+- NavigationTitleMode enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Free | When&nbsp;the&nbsp;content&nbsp;is&nbsp;a&nbsp;scrollable&nbsp;component,&nbsp;the&nbsp;title&nbsp;shrinks&nbsp;as&nbsp;the&nbsp;content&nbsp;scrolls&nbsp;up&nbsp;(the&nbsp;subtitle&nbsp;fades&nbsp;out&nbsp;with&nbsp;its&nbsp;size&nbsp;remaining&nbsp;unchanged)&nbsp;and&nbsp;restores&nbsp;as&nbsp;the&nbsp;content&nbsp;scrolls&nbsp;down. | 
+  | Mini | The&nbsp;mode&nbsp;is&nbsp;fixed&nbsp;at&nbsp;mini&nbsp;mode&nbsp;(icon&nbsp;+&nbsp;main&nbsp;title&nbsp;and&nbsp;subtitle). | 
+  | Full | The&nbsp;mode&nbsp;is&nbsp;fixed&nbsp;at&nbsp;full&nbsp;mode&nbsp;(main&nbsp;title&nbsp;and&nbsp;subtitle). | 
+
+  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+  > Currently, only the scrollable component **&lt;List&gt;** is supported.
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onTitleModeChanged(callback:&nbsp;(titleMode:&nbsp;NavigationTitleMode)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;**titleMode**&nbsp;is&nbsp;set&nbsp;to&nbsp;**NavigationTitleMode.Free**&nbsp;and&nbsp;the&nbsp;title&nbsp;bar&nbsp;mode&nbsp;changes&nbsp;as&nbsp;content&nbsp;scrolls. | 
+
+
+## Example
+
+
+```
+// Example 01
+@Entry
+@Component
+struct NavigationExample {
+  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+  @State hideBar: boolean = true
+
+  @Builder NavigationTitle() {
+    Column() {
+      Text('title')
+        .width(80)
+        .height(60)
+        .fontColor(Color.Blue)
+        .fontSize(30)
+    }
+    .onClick(() => {
+      console.log("title")
+    })
+  }
+
+  @Builder NavigationMenus() {
+    Row() {
+      Image('images/add.png')
+        .width(25)
+        .height(25)
+      Image('comment/more.png')
+        .width(25)
+        .height(25)
+        .margin({ left: 30 })
+    }.width(100)
+  }
+
+  build() {
+    Column() {
+      Navigation() {
+        Search({ value: '', placeholder: "" }).width('85%').margin(26)
+        List({ space: 5, initialIndex: 0 }) {
+          ForEach(this.arr, (item) => {
+            ListItem() {
+              Text('' + item)
+                .width('90%')
+                .height(80)
+                .backgroundColor('#3366CC')
+                .borderRadius(15)
+                .fontSize(16)
+                .textAlign(TextAlign.Center)
+            }.editable(true)
+          }, item => item)
+        }
+        .listDirection(Axis.Vertical)
+        .height(300)
+        .margin({ top: 10, left: 18 })
+        .width('100%')
+
+        Button(this.hideBar ? "tool bar" : "hide bar")
+          .onClick(() => {
+            this.hideBar = !this.hideBar
+          })
+          .margin({ left: 135, top: 60 })
+      }
+      .title(this.NavigationTitle)
+      .subTitle('subtitle')
+      .menus(this.NavigationMenus)
+      .titleMode(NavigationTitleMode.Free)
+      .hideTitleBar(false)
+      .hideBackButton(false)
+      .onTitleModeChanged((titleModel: NavigationTitleMode) => {
+        console.log('titleMode')
+      })
+      .toolBar({ items: [
+        { value: 'app', icon: 'images/grid.svg', action: () => {
+          console.log("app")
+        } },
+        { value: 'add', icon: 'images/add.svg', action: () => {
+          console.log("add")
+        } },
+        { value: 'collect', icon: 'images/collect.svg', action: () => {
+          console.log("collect")
+        } }] })
+      .hideToolBar(this.hideBar)
+    }
+  }
+}
+```
+
+![en-us_image_0000001256978359](figures/en-us_image_0000001256978359.gif)
+
+
+```
+// Example 02
+@Entry
+@Component
+struct ToolbarBuilderExample {
+  @State currentIndex: number = 0
+  @State Build: Array<Object> = [
+    {
+      icon: $r('app.media.ic_public_add'),
+      icon_after: $r('app.media.ic_public_addcolor'),
+      text: 'add',
+      num: 0
+    },
+    {
+      icon: $r('app.media.ic_public_app'),
+      icon_after: $r('app.media.ic_public_appcolor'),
+      text: 'app',
+      num: 1
+    },
+    {
+      icon: $r('app.media.ic_public_collect'),
+      icon_after: $r('app.media.ic_public_collectcolor'),
+      text: 'collect',
+      num: 2
+    }
+  ]
+
+  @Builder NavigationToolbar() {
+    Row() {
+      ForEach(this.Build, item => {
+        Column() {
+          Image(this.currentIndex == item.num ? item.icon_after : item.icon)
+            .width(25)
+            .height(25)
+          Text(item.text)
+            .fontColor(this.currentIndex == item.num ? "#ff7500" : "#000000")
+        }
+        .onClick(() => {
+          this.currentIndex = item.num
+        })
+        .margin({ left: 70 })
+      })
+    }
+  }
+
+  build() {
+    Column() {
+      Navigation() {
+        Flex() {
+        }
+      }
+      .toolBar(this.NavigationToolbar)
+    }
+  }
+}
+```
+
+![en-us_image_0000001212058484](figures/en-us_image_0000001212058484.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md
index 8652d7554cb1d95285770d158fff4df3aa4b8b0b..cc242502989bfed47fd22a63fe7071bdbff0c194 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md
@@ -1,145 +1,99 @@
-# Progress<a name="EN-US_TOPIC_0000001193075086"></a>
+# Progress
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Progress\>**  component is used to provide a progress bar that displays the progress of content loading or an operation.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+
+The **&lt;Progress&gt;** component is used to provide a progress bar that displays the progress of content loading or an operation.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section53281531154915"></a>
+
+## Child Components
 
 None
 
-## APIs<a name="section1989913519718"></a>
-
-Progress\(value: \{value: number, total?: number, style?: ProgressStyle\}\)
-
-Creates a progress bar with a specified progress value.
-
--   Parameters
-
-    <a name="table11384430418"></a>
-    <table><thead align="left"><tr id="row103841930216"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p038517301118"><a name="p038517301118"></a><a name="p038517301118"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.3%" id="mcps1.1.6.1.2"><p id="p17385530915"><a name="p17385530915"></a><a name="p17385530915"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.71%" id="mcps1.1.6.1.3"><p id="p03857305117"><a name="p03857305117"></a><a name="p03857305117"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.869999999999997%" id="mcps1.1.6.1.4"><p id="p93855306110"><a name="p93855306110"></a><a name="p93855306110"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="40.01%" id="mcps1.1.6.1.5"><p id="p103852301819"><a name="p103852301819"></a><a name="p103852301819"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row103858301018"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p23851230613"><a name="p23851230613"></a><a name="p23851230613"></a>value</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.3%" headers="mcps1.1.6.1.2 "><p id="p1738512301610"><a name="p1738512301610"></a><a name="p1738512301610"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.71%" headers="mcps1.1.6.1.3 "><p id="p113851302115"><a name="p113851302115"></a><a name="p113851302115"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.869999999999997%" headers="mcps1.1.6.1.4 "><p id="p5385163016119"><a name="p5385163016119"></a><a name="p5385163016119"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.01%" headers="mcps1.1.6.1.5 "><p id="p73857301211"><a name="p73857301211"></a><a name="p73857301211"></a>Current progress.</p>
-    </td>
-    </tr>
-    <tr id="row538517301316"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p638510301813"><a name="p638510301813"></a><a name="p638510301813"></a>total</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.3%" headers="mcps1.1.6.1.2 "><p id="p838511307111"><a name="p838511307111"></a><a name="p838511307111"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.71%" headers="mcps1.1.6.1.3 "><p id="p1338517309117"><a name="p1338517309117"></a><a name="p1338517309117"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.869999999999997%" headers="mcps1.1.6.1.4 "><p id="p238583011119"><a name="p238583011119"></a><a name="p238583011119"></a>100</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.01%" headers="mcps1.1.6.1.5 "><p id="p13853301411"><a name="p13853301411"></a><a name="p13853301411"></a>Total progress.</p>
-    </td>
-    </tr>
-    <tr id="row1838563011114"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p43853301117"><a name="p43853301117"></a><a name="p43853301117"></a>style</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.3%" headers="mcps1.1.6.1.2 "><p id="p43851130511"><a name="p43851130511"></a><a name="p43851130511"></a><a href="#table12144170154116">ProgressStyle</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.71%" headers="mcps1.1.6.1.3 "><p id="p113851630312"><a name="p113851630312"></a><a name="p113851630312"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.869999999999997%" headers="mcps1.1.6.1.4 "><p id="p17385183010110"><a name="p17385183010110"></a><a name="p17385183010110"></a>Linear</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.01%" headers="mcps1.1.6.1.5 "><p id="p15385430418"><a name="p15385430418"></a><a name="p15385430418"></a>Style of the progress bar.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   ProgressStyle enums
-
-    <a name="table12144170154116"></a>
-    <table><thead align="left"><tr id="row1314430184118"><th class="cellrowborder" valign="top" width="24.69%" id="mcps1.1.3.1.1"><p id="p1614414014416"><a name="p1614414014416"></a><a name="p1614414014416"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="75.31%" id="mcps1.1.3.1.2"><p id="p1314415074113"><a name="p1314415074113"></a><a name="p1314415074113"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row61441505417"><td class="cellrowborder" valign="top" width="24.69%" headers="mcps1.1.3.1.1 "><p id="p191443034117"><a name="p191443034117"></a><a name="p191443034117"></a>Linear</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="75.31%" headers="mcps1.1.3.1.2 "><p id="p121447017412"><a name="p121447017412"></a><a name="p121447017412"></a>Linear progress bar.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section18430105671014"></a>
-
-<a name="table952mcpsimp"></a>
-<table><thead align="left"><tr id="row959mcpsimp"><th class="cellrowborder" valign="top" width="16%" id="mcps1.1.5.1.1"><p id="p961mcpsimp"><a name="p961mcpsimp"></a><a name="p961mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.5.1.2"><p id="p963mcpsimp"><a name="p963mcpsimp"></a><a name="p963mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="12.82%" id="mcps1.1.5.1.3"><p id="p965mcpsimp"><a name="p965mcpsimp"></a><a name="p965mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="42.67%" id="mcps1.1.5.1.4"><p id="p967mcpsimp"><a name="p967mcpsimp"></a><a name="p967mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row163041291058"><td class="cellrowborder" valign="top" width="16%" headers="mcps1.1.5.1.1 "><p id="p1352619001912"><a name="p1352619001912"></a><a name="p1352619001912"></a>value</p>
-</td>
-<td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.5.1.2 "><p id="p9247199201913"><a name="p9247199201913"></a><a name="p9247199201913"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.82%" headers="mcps1.1.5.1.3 "><p id="p23053910513"><a name="p23053910513"></a><a name="p23053910513"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="42.67%" headers="mcps1.1.5.1.4 "><p id="p18583122017217"><a name="p18583122017217"></a><a name="p18583122017217"></a>Current progress.</p>
-</td>
-</tr>
-<tr id="row14401548131820"><td class="cellrowborder" valign="top" width="16%" headers="mcps1.1.5.1.1 "><p id="p10401174801810"><a name="p10401174801810"></a><a name="p10401174801810"></a>color</p>
-</td>
-<td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.5.1.2 "><p id="p3401104810185"><a name="p3401104810185"></a><a name="p3401104810185"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.82%" headers="mcps1.1.5.1.3 "><p id="p10401048181818"><a name="p10401048181818"></a><a name="p10401048181818"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="42.67%" headers="mcps1.1.5.1.4 "><p id="p1153317296299"><a name="p1153317296299"></a><a name="p1153317296299"></a>Background color of the progress bar.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section13800193662114"></a>
 
+## APIs
+
+Progress(value: {value: number, total?: number, style?: ProgressStyle})
+
+Creates a progress bar.
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | value | number | Yes | - | Current&nbsp;progress. | 
+  | total | number | No | 100 | Total&nbsp;progress. | 
+  | style | ProgressStyle | No | ProgressStyle.Linear | Style&nbsp;of&nbsp;the&nbsp;progress&nbsp;bar. | 
+
+
+- ProgressStyle enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Linear | Linear&nbsp;style. | 
+  | Ring<sup>8+</sup> | Ring&nbsp;style&nbsp;without&nbsp;scale.&nbsp;The&nbsp;ring&nbsp;fills&nbsp;up&nbsp;as&nbsp;the&nbsp;progress&nbsp;increases. | 
+  | Eclipse | Eclipse&nbsp;style,&nbsp;which&nbsp;visualizes&nbsp;the&nbsp;progress&nbsp;in&nbsp;a&nbsp;way&nbsp;similar&nbsp;to&nbsp;the&nbsp;moon&nbsp;waxing&nbsp;from&nbsp;new&nbsp;to&nbsp;full. | 
+  | ScaleRing<sup>8+</sup> | Ring&nbsp;style&nbsp;with&nbsp;scale,&nbsp;which&nbsp;is&nbsp;similar&nbsp;to&nbsp;the&nbsp;clock&nbsp;scale&nbsp;style. | 
+  | Capsule<sup>8+</sup> | Capsule&nbsp;style.&nbsp;At&nbsp;both&nbsp;ends,&nbsp;the&nbsp;progress&nbsp;bar&nbsp;changes&nbsp;from&nbsp;an&nbsp;arc&nbsp;to&nbsp;a&nbsp;straight&nbsp;line&nbsp;and&nbsp;from&nbsp;a&nbsp;straight&nbsp;line&nbsp;to&nbsp;an&nbsp;arc.&nbsp;In&nbsp;the&nbsp;middle&nbsp;part&nbsp;of&nbsp;the&nbsp;capsule,&nbsp;the&nbsp;progress&nbsp;bar&nbsp;moves&nbsp;to&nbsp;the&nbsp;right. | 
+
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| value | number | - | Current&nbsp;progress. | 
+| color | Color | - | Background&nbsp;color&nbsp;of&nbsp;the&nbsp;progress&nbsp;bar. | 
+| style8+ | {<br/>strokeWidth?&nbsp;:&nbsp;Length,<br/>scaleCount?&nbsp;:&nbsp;number,<br/>scaleWidth?&nbsp;:&nbsp;Length<br/>} | - | Component&nbsp;style.<br/>-&nbsp;**strokeWidth**:&nbsp;width&nbsp;of&nbsp;the&nbsp;progress&nbsp;bar.<br/>-&nbsp;**scaleCount**:&nbsp;scale&nbsp;count&nbsp;of&nbsp;the&nbsp;circular&nbsp;progress&nbsp;bar.<br/>-&nbsp;**scaleWidth**:&nbsp;scale&nbsp;width&nbsp;of&nbsp;the&nbsp;circular&nbsp;progress&nbsp;bar.<br/>If&nbsp;the&nbsp;scale&nbsp;thickness&nbsp;is&nbsp;greater&nbsp;than&nbsp;the&nbsp;progress&nbsp;bar&nbsp;width,&nbsp;the&nbsp;default&nbsp;scale&nbsp;thickness&nbsp;is&nbsp;used. | 
+
+
+## Example
+
+  
 ```
 @Entry
 @Component
 struct ProgressExample {
   build() {
-    Column({ space: 5 }) {
+    Column({ space: 15 }) {
       Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
       Progress({ value: 10, style: ProgressStyle.Linear }).width(200)
-
-      Text('Linear Progress Color').fontSize(9).fontColor(0xCCCCCC).width('90%')
-      Progress({ value: 20, total: 150, style: ProgressStyle.Linear }).color(Color.Red).value(50).width(200)
-    }.width('100%').margin({ top: 5 })
+      Progress({ value: 20, total: 150, style: ProgressStyle.Linear }).color(Color.Grey).value(50).width(200)
+
+      Text('Eclipse Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Row({ space: 40 }) {
+        Progress({ value: 10, style: ProgressStyle.Eclipse }).width(100)
+        Progress({ value: 20, total: 150, style: ProgressStyle.Eclipse }).color(Color.Grey).value(50).width(100)
+      }
+
+      Text('ScaleRing Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Row({ space: 40 }) {
+        Progress({ value: 10, style: ProgressStyle.ScaleRing }).width(100)
+        Progress({ value: 20, total: 150, style: ProgressStyle.ScaleRing })
+          .color(Color.Grey).value(50).width(100)
+          .style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 })
+      }
+
+      Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Row({ space: 40 }) {
+        Progress({ value: 10, style: ProgressStyle.Ring }).width(100)
+        Progress({ value: 20, total: 150, style: ProgressStyle.Ring })
+          .color(Color.Grey).value(50).width(100)
+          .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 20 })
+      }
+
+      Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Row({ space: 40 }) {
+        Progress({ value: 10, style: ProgressStyle.Capsule }).width(100)
+        Progress({ value: 20, total: 150, style: ProgressStyle.Capsule }).color(Color.Grey).value(50).width(100)
+      }
+    }.width('100%').margin({ top: 30 })
   }
 }
 ```
 
-![](figures/progress.png)
-
+![en-us_image_0000001212378432](figures/en-us_image_0000001212378432.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md b/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md
index 05e0575e6178ffe6028062fe936635c48ec99605..612fdfeb294d65a1e74b69c4e63063991547b5fe 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md
@@ -1,83 +1,48 @@
-# QRCode<a name="EN-US_TOPIC_0000001237475049"></a>
+# QRCode
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<QRCode\>**  component is used to display QR code information.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section435712372238"></a>
+
+The **&lt;QRCode&gt;** component is used to display QR code information.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section13981154442315"></a>
+
+## Child Components
 
 None
 
-## APIs<a name="section18806175252314"></a>
-
-QRCode\(value: string\)
-
--   Parameters
-
-    <a name="table1392916196212"></a>
-    <table><thead align="left"><tr id="row19306191218"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p199307193217"><a name="p199307193217"></a><a name="p199307193217"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.01%" id="mcps1.1.6.1.2"><p id="p119302191128"><a name="p119302191128"></a><a name="p119302191128"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13%" id="mcps1.1.6.1.3"><p id="p7930141911211"><a name="p7930141911211"></a><a name="p7930141911211"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.869999999999997%" id="mcps1.1.6.1.4"><p id="p1393020194219"><a name="p1393020194219"></a><a name="p1393020194219"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="40.01%" id="mcps1.1.6.1.5"><p id="p693061912210"><a name="p693061912210"></a><a name="p693061912210"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1093021911217"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p119307198218"><a name="p119307198218"></a><a name="p119307198218"></a>value</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p129301719828"><a name="p129301719828"></a><a name="p129301719828"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13%" headers="mcps1.1.6.1.3 "><p id="p893091913213"><a name="p893091913213"></a><a name="p893091913213"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.869999999999997%" headers="mcps1.1.6.1.4 "><p id="p421641117507"><a name="p421641117507"></a><a name="p421641117507"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.01%" headers="mcps1.1.6.1.5 "><p id="p693016198212"><a name="p693016198212"></a><a name="p693016198212"></a>QR code content string.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section12170272251"></a>
-
-<a name="table1848913413256"></a>
-<table><thead align="left"><tr id="row248924182514"><th class="cellrowborder" valign="top" width="20.64%" id="mcps1.1.5.1.1"><p id="p14901241192512"><a name="p14901241192512"></a><a name="p14901241192512"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="19.97%" id="mcps1.1.5.1.2"><p id="p19490541192514"><a name="p19490541192514"></a><a name="p19490541192514"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="20.05%" id="mcps1.1.5.1.3"><p id="p1349064115259"><a name="p1349064115259"></a><a name="p1349064115259"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="39.34%" id="mcps1.1.5.1.4"><p id="p049016417259"><a name="p049016417259"></a><a name="p049016417259"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row204906412251"><td class="cellrowborder" valign="top" width="20.64%" headers="mcps1.1.5.1.1 "><p id="p9490134122512"><a name="p9490134122512"></a><a name="p9490134122512"></a>color</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.97%" headers="mcps1.1.5.1.2 "><p id="p1490194172513"><a name="p1490194172513"></a><a name="p1490194172513"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="20.05%" headers="mcps1.1.5.1.3 "><p id="p114909415254"><a name="p114909415254"></a><a name="p114909415254"></a>Black</p>
-</td>
-<td class="cellrowborder" valign="top" width="39.34%" headers="mcps1.1.5.1.4 "><p id="p17490204115252"><a name="p17490204115252"></a><a name="p17490204115252"></a>QR code color.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Events<a name="section9578105714273"></a>
+
+## APIs
+
+QRCode(value: string)
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | value | string | Yes | - | QR&nbsp;code&nbsp;content&nbsp;string. | 
+
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| color | Color | Black | QR&nbsp;code&nbsp;color. | 
+
+
+## Events
 
 Among all the universal events, only the click event is supported.
 
-## Example<a name="section158692046152618"></a>
 
+## Example
+
+  
 ```
 @Entry
 @Component
@@ -96,5 +61,4 @@ struct QRCodeExample {
 }
 ```
 
-![](figures/qrcode.png)
-
+![en-us_image_0000001256858415](figures/en-us_image_0000001256858415.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md b/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md
index 240dd361951228d2c0202167e6eb3f93218494fc..b7de6f882cb5b0b6787888cdeade4f50c4bfda36 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md
@@ -1,130 +1,52 @@
-# Rating<a name="EN-US_TOPIC_0000001192595156"></a>
+# Rating
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Rating\>**  component provides a rating bar.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+
+The **&lt;Rating&gt;** component provides a rating bar.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section53281531154915"></a>
+
+## Child Components
 
 None
 
-## APIs<a name="section1989913519718"></a>
-
-Rating\(options?: \{ rating: number, indicator?: boolean \}\)
-
--   Parameters
-
-    <a name="table1392916196212"></a>
-    <table><thead align="left"><tr id="row19306191218"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p199307193217"><a name="p199307193217"></a><a name="p199307193217"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.01%" id="mcps1.1.6.1.2"><p id="p119302191128"><a name="p119302191128"></a><a name="p119302191128"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13%" id="mcps1.1.6.1.3"><p id="p7930141911211"><a name="p7930141911211"></a><a name="p7930141911211"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.869999999999997%" id="mcps1.1.6.1.4"><p id="p1393020194219"><a name="p1393020194219"></a><a name="p1393020194219"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="40.01%" id="mcps1.1.6.1.5"><p id="p693061912210"><a name="p693061912210"></a><a name="p693061912210"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1093021911217"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p119307198218"><a name="p119307198218"></a><a name="p119307198218"></a>rating</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p129301719828"><a name="p129301719828"></a><a name="p129301719828"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13%" headers="mcps1.1.6.1.3 "><p id="p893091913213"><a name="p893091913213"></a><a name="p893091913213"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.869999999999997%" headers="mcps1.1.6.1.4 "><p id="p421641117507"><a name="p421641117507"></a><a name="p421641117507"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.01%" headers="mcps1.1.6.1.5 "><p id="p693016198212"><a name="p693016198212"></a><a name="p693016198212"></a>Value to rate.</p>
-    </td>
-    </tr>
-    <tr id="row199301191726"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p0930419923"><a name="p0930419923"></a><a name="p0930419923"></a>indicator</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p1993071918217"><a name="p1993071918217"></a><a name="p1993071918217"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13%" headers="mcps1.1.6.1.3 "><p id="p29309191029"><a name="p29309191029"></a><a name="p29309191029"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.869999999999997%" headers="mcps1.1.6.1.4 "><p id="p393019193220"><a name="p393019193220"></a><a name="p393019193220"></a>false</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.01%" headers="mcps1.1.6.1.5 "><p id="p793001918220"><a name="p793001918220"></a><a name="p793001918220"></a>Used only as an indicator and cannot be operated.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section18430105671014"></a>
-
-<a name="table181736291110"></a>
-<table><thead align="left"><tr id="row1117442161117"><th class="cellrowborder" valign="top" width="13.84%" id="mcps1.1.5.1.1"><p id="p2017411217117"><a name="p2017411217117"></a><a name="p2017411217117"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="19.77%" id="mcps1.1.5.1.2"><p id="p1517432171118"><a name="p1517432171118"></a><a name="p1517432171118"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="10.38%" id="mcps1.1.5.1.3"><p id="p11174326110"><a name="p11174326110"></a><a name="p11174326110"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="56.010000000000005%" id="mcps1.1.5.1.4"><p id="p20174826118"><a name="p20174826118"></a><a name="p20174826118"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1007mcpsimp"><td class="cellrowborder" valign="top" width="13.84%" headers="mcps1.1.5.1.1 "><p id="p04101229003"><a name="p04101229003"></a><a name="p04101229003"></a>stars</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.77%" headers="mcps1.1.5.1.2 "><p id="p1011mcpsimp"><a name="p1011mcpsimp"></a><a name="p1011mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="10.38%" headers="mcps1.1.5.1.3 "><p id="p1013mcpsimp"><a name="p1013mcpsimp"></a><a name="p1013mcpsimp"></a>5</p>
-</td>
-<td class="cellrowborder" valign="top" width="56.010000000000005%" headers="mcps1.1.5.1.4 "><p id="p3126411302"><a name="p3126411302"></a><a name="p3126411302"></a>Total number of stars.</p>
-</td>
-</tr>
-<tr id="row173321411165311"><td class="cellrowborder" valign="top" width="13.84%" headers="mcps1.1.5.1.1 "><p id="p351415454015"><a name="p351415454015"></a><a name="p351415454015"></a>stepSize</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.77%" headers="mcps1.1.5.1.2 "><p id="p43327112538"><a name="p43327112538"></a><a name="p43327112538"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="10.38%" headers="mcps1.1.5.1.3 "><p id="p193322011185315"><a name="p193322011185315"></a><a name="p193322011185315"></a>0.5</p>
-</td>
-<td class="cellrowborder" valign="top" width="56.010000000000005%" headers="mcps1.1.5.1.4 "><p id="p68256235554"><a name="p68256235554"></a><a name="p68256235554"></a>Step of an operation.</p>
-</td>
-</tr>
-<tr id="row4821201513537"><td class="cellrowborder" valign="top" width="13.84%" headers="mcps1.1.5.1.1 "><p id="p2822615195315"><a name="p2822615195315"></a><a name="p2822615195315"></a>starStyle</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.77%" headers="mcps1.1.5.1.2 "><p id="p112697110520"><a name="p112697110520"></a><a name="p112697110520"></a>{</p>
-<p id="p101214416375"><a name="p101214416375"></a><a name="p101214416375"></a>backgroundUri: string,</p>
-<p id="p38258993711"><a name="p38258993711"></a><a name="p38258993711"></a>foregroundUri: string,</p>
-<p id="p88411654514"><a name="p88411654514"></a><a name="p88411654514"></a>secondaryUri?: string</p>
-<p id="p198221415155318"><a name="p198221415155318"></a><a name="p198221415155318"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="10.38%" headers="mcps1.1.5.1.3 "><p id="p192321429143611"><a name="p192321429143611"></a><a name="p192321429143611"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="56.010000000000005%" headers="mcps1.1.5.1.4 "><p id="p1349715591831"><a name="p1349715591831"></a><a name="p1349715591831"></a><strong id="b596754622914"><a name="b596754622914"></a><a name="b596754622914"></a>backgroundSrc</strong>: image link of the unselected star. You can customize the image or use the default image. Only local images are supported.</p>
-<p id="p166841745114110"><a name="p166841745114110"></a><a name="p166841745114110"></a><strong id="b61077216812"><a name="b61077216812"></a><a name="b61077216812"></a>foregroundSrc</strong>: image path of the selected star. You can customize the image or use the default image. Only local images are supported.</p>
-<p id="p668494524114"><a name="p668494524114"></a><a name="p668494524114"></a><strong id="b496620252810"><a name="b496620252810"></a><a name="b496620252810"></a>secondarySrc</strong>: image path of the partially selected star. You can customize the image or use the default image. Only local images are supported.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Events<a name="section449664852016"></a>
-
-<a name="table952mcpsimp"></a>
-<table><thead align="left"><tr id="row959mcpsimp"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p963mcpsimp"><a name="p963mcpsimp"></a><a name="p963mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p967mcpsimp"><a name="p967mcpsimp"></a><a name="p967mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row163041291058"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p1352619001912"><a name="p1352619001912"></a><a name="p1352619001912"></a>onChange(callback:(value: number) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p18583122017217"><a name="p18583122017217"></a><a name="p18583122017217"></a>Triggered when the rating value changes.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section13800193662114"></a>
+
+## APIs
+
+Rating(options?: { rating: number, indicator?: boolean })
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | rating | number | Yes | 0 | Value&nbsp;to&nbsp;rate. | 
+  | indicator | boolean | No | false | Used&nbsp;only&nbsp;as&nbsp;an&nbsp;indicator&nbsp;and&nbsp;cannot&nbsp;be&nbsp;operated. | 
+
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| stars | number | 5 | Total&nbsp;number&nbsp;of&nbsp;stars. | 
+| stepSize | number | 0.5 | Step&nbsp;of&nbsp;an&nbsp;operation. | 
+| starStyle | {<br/>backgroundUri:&nbsp;string,<br/>foregroundUri:&nbsp;string,<br/>secondaryUri?:&nbsp;string<br/>} | - | **backgroundSrc**:&nbsp;image&nbsp;link&nbsp;of&nbsp;the&nbsp;unselected&nbsp;star.&nbsp;You&nbsp;can&nbsp;customize&nbsp;the&nbsp;image&nbsp;or&nbsp;use&nbsp;the&nbsp;default&nbsp;image.&nbsp;Only&nbsp;local&nbsp;images&nbsp;are&nbsp;supported.<br/>**foregroundSrc**:&nbsp;image&nbsp;path&nbsp;of&nbsp;the&nbsp;selected&nbsp;star.&nbsp;You&nbsp;can&nbsp;customize&nbsp;the&nbsp;image&nbsp;or&nbsp;use&nbsp;the&nbsp;default&nbsp;image.&nbsp;Only&nbsp;local&nbsp;images&nbsp;are&nbsp;supported.<br/>**secondarySrc**:&nbsp;image&nbsp;path&nbsp;of&nbsp;the&nbsp;partially&nbsp;selected&nbsp;star.&nbsp;You&nbsp;can&nbsp;customize&nbsp;the&nbsp;image&nbsp;or&nbsp;use&nbsp;the&nbsp;default&nbsp;image.&nbsp;Only&nbsp;local&nbsp;images&nbsp;are&nbsp;supported. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onChange(callback:(value:&nbsp;number)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;rating&nbsp;value&nbsp;changes. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -147,5 +69,4 @@ struct RatingExample {
 }
 ```
 
-![](figures/rating.gif)
-
+![en-us_image_0000001257058423](figures/en-us_image_0000001257058423.gif)
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
new file mode 100644
index 0000000000000000000000000000000000000000..1d0e8d4d760779a50a02301f0793867829753319
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
@@ -0,0 +1,96 @@
+# ScrollBar
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+The **&lt;ScrollBar&gt;** is used together with scrollable components, such as **&lt;List&gt;**, **&lt;Grid&gt;**, and **&lt;Scroll&gt;**.
+
+
+## Required Permissions
+
+None
+
+
+## Child Components
+
+This component can contain a single child component.
+
+
+## APIs
+
+ScrollBar(value: ScrollBarOption)
+
+- ScrollBarOption parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | scroller | [Scroller](ts-container-scroll.md#scroller) | Yes | - | Scroller,&nbsp;which&nbsp;can&nbsp;be&nbsp;bound&nbsp;to&nbsp;and&nbsp;control&nbsp;scrollable&nbsp;components. |
+  | direction | ScrollBarDirection | No | ScrollBarDirection.Vertical | Scrollbar&nbsp;direction&nbsp;in&nbsp;which&nbsp;scrollable&nbsp;components&nbsp;scroll. |
+  | state | BarState | No | BarState.Auto | Scrollbar&nbsp;state. |
+
+  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+  > The **&lt;ScrollBar&gt;** 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.
+
+- ScrollBarDirection enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Vertical | Vertical&nbsp;scrollbar. | 
+  | Horizontal | Horizontal&nbsp;scrollbar. | 
+
+- BarState enums
+    | Name | Description | 
+  | -------- | -------- |
+  | On | Always&nbsp;display. | 
+  | Off | Hide. | 
+  | Auto | Display&nbsp;on&nbsp;demand&nbsp;(displays&nbsp;when&nbsp;the&nbsp;screen&nbsp;is&nbsp;touched&nbsp;and&nbsp;disappears&nbsp;after&nbsp;2s&nbsp;of&nbsp;inactivity). | 
+
+
+## Example
+
+
+```
+@Entry
+@Component
+struct ScrollBarExample {
+  private scroller: Scroller = new Scroller()
+  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+
+  build() {
+    Column() {
+      Stack({ alignContent: Alignment.End }) {
+        Scroll(this.scroller) {
+          Flex({ direction: FlexDirection.Column }) {
+            ForEach(this.arr, (item) => {
+              Row() {
+                Text(item.toString())
+                  .width('90%')
+                  .height(100)
+                  .backgroundColor('#3366CC')
+                  .borderRadius(15)
+                  .fontSize(16)
+                  .textAlign(TextAlign.Center)
+                  .margin({ top: 5 })
+              }
+            }, item => item)
+          }.margin({ left: 52 })
+        }
+        .scrollBar(BarState.Off)
+        .scrollable(ScrollDirection.Vertical)
+        ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) {
+          Text()
+            .width(30)
+            .height(100)
+            .borderRadius(10)
+            .backgroundColor('#C0C0C0')
+        }.width(30).backgroundColor('#ededed')
+      }
+    }
+  }
+}
+```
+
+
+![en-us_image_0000001256978369](figures/en-us_image_0000001256978369.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-select.md b/en/application-dev/reference/arkui-ts/ts-basic-components-select.md
index 25d73234a372a9e13f9a693e2e834e45d6bf9cda..1f4891eb9c210fd3e59f9338e52359408dd98c87 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-select.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-select.md
@@ -20,8 +20,8 @@ Select(options: Array<SelectOption>)
 
   | Name| Type| Mandatory| Default Value| Description|
   | ------ | ----------------------------------------------- | ---- | ------ | -------------- |
-  | value  | [ResourceStr](../../ui/ts-types.md#ResourceStr) | Yes| -      | Value of an option in the drop-down list box.|
-  | icon   | [ResourceStr](../../ui/ts-types.md#ResourceStr) | No| -      | Icon of an option in the drop-down list box.|
+  | value  | [ResourceStr](../../ui/ts-types.md#resourcestr) | Yes| -      | Value of an option in the drop-down list box.|
+  | icon   | [ResourceStr](../../ui/ts-types.md#resourcestr) | No| -      | Icon of an option in the drop-down list box.|
 
 ## Attributes
 
@@ -30,13 +30,13 @@ Select(options: Array<SelectOption>)
 | selected                | number                                              | -      | Index of the initial selected option in the drop-down list box. The index of the first option is **0**.|
 | value                   | string                                              | -      | Text of the drop-down button.|
 | font                    | [Font](../../ui/ts-types.md)                   | -      | Text font of the drop-down button.|
-| fontColor               | [ResourceColor](../../ui/ts-types.md#ResourceColor) | -      | Text color of the drop-down button.|
-| selectedOptionBgColor   | [ResourceColor](../../ui/ts-types.md#ResourceColor) | -      | Background color of the selected option in the drop-down list box.|
+| fontColor               | [ResourceColor](../../ui/ts-types.md#resourcecolor) | -      | Text color of the drop-down button.|
+| selectedOptionBgColor   | [ResourceColor](../../ui/ts-types.md#resourcecolor) | -      | Background color of the selected option in the drop-down list box.|
 | selectedOptionFont      | [Font](../../ui/ts-types.md)                   | -      | Text font of the selected option in the drop-down list box.|
-| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | -      | Text color of the selected option in the drop-down list box.|
-| optionBgColor           | [ResourceColor](../../ui/ts-types.md#ResourceColor) | -      | Background color of an option in the drop-down list box.|
+| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md#resourcecolor) | -      | Text color of the selected option in the drop-down list box.|
+| optionBgColor           | [ResourceColor](../../ui/ts-types.md#resourcecolor) | -      | Background color of an option in the drop-down list box.|
 | optionFont              | [Font](../../ui/ts-types.md)                   | -      | Text font of an option in the drop-down list box.|
-| optionFontColor         | [ResourceColor](../../ui/ts-types.md#ResourceColor) | -      | Text color of an option in the drop-down list box.|
+| optionFontColor         | [ResourceColor](../../ui/ts-types.md#resourcecolor) | -      | Text color of an option in the drop-down list box.|
 
 ## Events
 
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md b/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md
index 009ab92e5a7e8646b6d7ba79b0ce0d34755ac809..5635d1fbed14354d7249b4499813f5c1e43eda94 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md
@@ -1,242 +1,76 @@
-# Slider<a name="EN-US_TOPIC_0000001193075098"></a>
+# Slider
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Slider\>**  component is used to quickly adjust settings, such as the volume and brightness.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+
+The **&lt;Slider&gt;** component is used to quickly adjust settings, such as the volume and brightness.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section53281531154915"></a>
+
+## Child Components
 
 None
 
-## APIs<a name="section1989913519718"></a>
-
-Slider\(value:\{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis\}\)
-
--   Parameters
-
-    <a name="table1392916196212"></a>
-    <table><thead align="left"><tr id="row19306191218"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p199307193217"><a name="p199307193217"></a><a name="p199307193217"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.01%" id="mcps1.1.6.1.2"><p id="p119302191128"><a name="p119302191128"></a><a name="p119302191128"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.99%" id="mcps1.1.6.1.3"><p id="p7930141911211"><a name="p7930141911211"></a><a name="p7930141911211"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.709999999999999%" id="mcps1.1.6.1.4"><p id="p1393020194219"><a name="p1393020194219"></a><a name="p1393020194219"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="46.18%" id="mcps1.1.6.1.5"><p id="p693061912210"><a name="p693061912210"></a><a name="p693061912210"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1093021911217"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p119307198218"><a name="p119307198218"></a><a name="p119307198218"></a>value</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p129301719828"><a name="p129301719828"></a><a name="p129301719828"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.99%" headers="mcps1.1.6.1.3 "><p id="p893091913213"><a name="p893091913213"></a><a name="p893091913213"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.709999999999999%" headers="mcps1.1.6.1.4 "><p id="p421641117507"><a name="p421641117507"></a><a name="p421641117507"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="46.18%" headers="mcps1.1.6.1.5 "><p id="p693016198212"><a name="p693016198212"></a><a name="p693016198212"></a>Current progress.</p>
-    </td>
-    </tr>
-    <tr id="row199301191726"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p0930419923"><a name="p0930419923"></a><a name="p0930419923"></a>min</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p1993071918217"><a name="p1993071918217"></a><a name="p1993071918217"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.99%" headers="mcps1.1.6.1.3 "><p id="p29309191029"><a name="p29309191029"></a><a name="p29309191029"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.709999999999999%" headers="mcps1.1.6.1.4 "><p id="p393019193220"><a name="p393019193220"></a><a name="p393019193220"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="46.18%" headers="mcps1.1.6.1.5 "><p id="p793001918220"><a name="p793001918220"></a><a name="p793001918220"></a>Minimum value.</p>
-    </td>
-    </tr>
-    <tr id="row1272345516214"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p12723105511214"><a name="p12723105511214"></a><a name="p12723105511214"></a>max</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p172345511213"><a name="p172345511213"></a><a name="p172345511213"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.99%" headers="mcps1.1.6.1.3 "><p id="p672316554211"><a name="p672316554211"></a><a name="p672316554211"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.709999999999999%" headers="mcps1.1.6.1.4 "><p id="p187241455022"><a name="p187241455022"></a><a name="p187241455022"></a>100</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="46.18%" headers="mcps1.1.6.1.5 "><p id="p1472495511213"><a name="p1472495511213"></a><a name="p1472495511213"></a>Maximum value.</p>
-    </td>
-    </tr>
-    <tr id="row727120511728"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p1327110515216"><a name="p1327110515216"></a><a name="p1327110515216"></a>step</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p9271125114215"><a name="p9271125114215"></a><a name="p9271125114215"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.99%" headers="mcps1.1.6.1.3 "><p id="p152711751328"><a name="p152711751328"></a><a name="p152711751328"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.709999999999999%" headers="mcps1.1.6.1.4 "><p id="p72711251121"><a name="p72711251121"></a><a name="p72711251121"></a>1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="46.18%" headers="mcps1.1.6.1.5 "><p id="p11271195118217"><a name="p11271195118217"></a><a name="p11271195118217"></a>Step of the slider. When the corresponding step is set, the slider slides intermittently.</p>
-    </td>
-    </tr>
-    <tr id="row153190591429"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p14319459729"><a name="p14319459729"></a><a name="p14319459729"></a>style</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p1131911595213"><a name="p1131911595213"></a><a name="p1131911595213"></a><a href="#li1754841215312">SliderStyle</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.99%" headers="mcps1.1.6.1.3 "><p id="p23195591625"><a name="p23195591625"></a><a name="p23195591625"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.709999999999999%" headers="mcps1.1.6.1.4 "><p id="p1031915594211"><a name="p1031915594211"></a><a name="p1031915594211"></a>SliderStyle.OutSet</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="46.18%" headers="mcps1.1.6.1.5 "><p id="p14319959825"><a name="p14319959825"></a><a name="p14319959825"></a>Style of the slider.</p>
-    </td>
-    </tr>
-    <tr id="row12196385536"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p673310695318"><a name="p673310695318"></a><a name="p673310695318"></a>direction<sup id="sup147861551955"><a name="sup147861551955"></a><a name="sup147861551955"></a>8+</sup></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p673376125316"><a name="p673376125316"></a><a name="p673376125316"></a><a href="ts-appendix-enums.md#section1397918486200">Axis</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.99%" headers="mcps1.1.6.1.3 "><p id="p27331261536"><a name="p27331261536"></a><a name="p27331261536"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.709999999999999%" headers="mcps1.1.6.1.4 "><p id="p273311617538"><a name="p273311617538"></a><a name="p273311617538"></a>Axis.Horizontal</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="46.18%" headers="mcps1.1.6.1.5 "><p id="p27331563533"><a name="p27331563533"></a><a name="p27331563533"></a>Whether the slider moves horizontally or vertically.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li1754841215312"></a>SliderStyle enums
-
-    <a name="table3452114216394"></a>
-    <table><thead align="left"><tr id="row245219426397"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p545244283914"><a name="p545244283914"></a><a name="p545244283914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p2452114203917"><a name="p2452114203917"></a><a name="p2452114203917"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6452144218390"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p34529427398"><a name="p34529427398"></a><a name="p34529427398"></a>OutSet</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245211421393"><a name="p1245211421393"></a><a name="p1245211421393"></a>The slider is on the slider rail.</p>
-    </td>
-    </tr>
-    <tr id="row12452184217398"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p54523425398"><a name="p54523425398"></a><a name="p54523425398"></a>InSet</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p745215426391"><a name="p745215426391"></a><a name="p745215426391"></a>The slider is in the slider rail.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section18430105671014"></a>
+
+## APIs
+
+Slider(value:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis})
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | value | number | No | 0 | Current&nbsp;progress. |
+  | min | number | No | 0 | Minimum&nbsp;value. |
+  | max | number | No | 100 | Maximum&nbsp;value. |
+  | step | number | No | 1 | Step&nbsp;of&nbsp;the&nbsp;slider.&nbsp;When&nbsp;the&nbsp;corresponding&nbsp;step&nbsp;is&nbsp;set,&nbsp;the&nbsp;slider&nbsp;slides&nbsp;intermittently. |
+  | style | SliderStyle | No | SliderStyle.OutSet | Style&nbsp;of&nbsp;the&nbsp;slider. |
+  | direction<sup>8+</sup> | [Axis](ts-appendix-enums.md) | No | Axis.Horizontal | Whether&nbsp;the&nbsp;slider&nbsp;moves&nbsp;horizontally&nbsp;or&nbsp;vertically. |
+  | reverse<sup>8+</sup> | boolean | No | false | Whether&nbsp;the&nbsp;slider&nbsp;values&nbsp;are&nbsp;reversed. |
+
+- SliderStyle enums
+    | Name | Description | 
+  | -------- | -------- |
+  | OutSet | The&nbsp;slider&nbsp;is&nbsp;on&nbsp;the&nbsp;slider&nbsp;rail. | 
+  | InSet | The&nbsp;slider&nbsp;is&nbsp;in&nbsp;the&nbsp;slider&nbsp;rail. | 
+
+
+## Attributes
 
 Touch target configuration is not supported.
 
-<a name="table181736291110"></a>
-<table><thead align="left"><tr id="row1117442161117"><th class="cellrowborder" valign="top" width="18.72%" id="mcps1.1.5.1.1"><p id="p2017411217117"><a name="p2017411217117"></a><a name="p2017411217117"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="16.33%" id="mcps1.1.5.1.2"><p id="p1517432171118"><a name="p1517432171118"></a><a name="p1517432171118"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="17.62%" id="mcps1.1.5.1.3"><p id="p11174326110"><a name="p11174326110"></a><a name="p11174326110"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="47.33%" id="mcps1.1.5.1.4"><p id="p20174826118"><a name="p20174826118"></a><a name="p20174826118"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1007mcpsimp"><td class="cellrowborder" valign="top" width="18.72%" headers="mcps1.1.5.1.1 "><p id="p1009mcpsimp"><a name="p1009mcpsimp"></a><a name="p1009mcpsimp"></a>blockColor</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.33%" headers="mcps1.1.5.1.2 "><p id="p1011mcpsimp"><a name="p1011mcpsimp"></a><a name="p1011mcpsimp"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.62%" headers="mcps1.1.5.1.3 "><p id="p1013mcpsimp"><a name="p1013mcpsimp"></a><a name="p1013mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.33%" headers="mcps1.1.5.1.4 "><p id="p218541705511"><a name="p218541705511"></a><a name="p218541705511"></a>Color of the slider.</p>
-</td>
-</tr>
-<tr id="row173321411165311"><td class="cellrowborder" valign="top" width="18.72%" headers="mcps1.1.5.1.1 "><p id="p1332201195316"><a name="p1332201195316"></a><a name="p1332201195316"></a>trackColor</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.33%" headers="mcps1.1.5.1.2 "><p id="p43327112538"><a name="p43327112538"></a><a name="p43327112538"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.62%" headers="mcps1.1.5.1.3 "><p id="p193322011185315"><a name="p193322011185315"></a><a name="p193322011185315"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.33%" headers="mcps1.1.5.1.4 "><p id="p68256235554"><a name="p68256235554"></a><a name="p68256235554"></a>Background color of the slider.</p>
-</td>
-</tr>
-<tr id="row4821201513537"><td class="cellrowborder" valign="top" width="18.72%" headers="mcps1.1.5.1.1 "><p id="p2822615195315"><a name="p2822615195315"></a><a name="p2822615195315"></a>selectedColor</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.33%" headers="mcps1.1.5.1.2 "><p id="p198221415155318"><a name="p198221415155318"></a><a name="p198221415155318"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.62%" headers="mcps1.1.5.1.3 "><p id="p19822191511533"><a name="p19822191511533"></a><a name="p19822191511533"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.33%" headers="mcps1.1.5.1.4 "><p id="p12822151515311"><a name="p12822151515311"></a><a name="p12822151515311"></a>Color of the slider rail that has been slid.</p>
-</td>
-</tr>
-<tr id="row752815895218"><td class="cellrowborder" valign="top" width="18.72%" headers="mcps1.1.5.1.1 "><p id="p185284589526"><a name="p185284589526"></a><a name="p185284589526"></a>showSteps</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.33%" headers="mcps1.1.5.1.2 "><p id="p752814585523"><a name="p752814585523"></a><a name="p752814585523"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.62%" headers="mcps1.1.5.1.3 "><p id="p452918585527"><a name="p452918585527"></a><a name="p452918585527"></a>false</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.33%" headers="mcps1.1.5.1.4 "><p id="p16529858195210"><a name="p16529858195210"></a><a name="p16529858195210"></a>Whether to display the current step.</p>
-</td>
-</tr>
-<tr id="row15632175145210"><td class="cellrowborder" valign="top" width="18.72%" headers="mcps1.1.5.1.1 "><p id="p1863395113526"><a name="p1863395113526"></a><a name="p1863395113526"></a>showTips</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.33%" headers="mcps1.1.5.1.2 "><p id="p10633165175217"><a name="p10633165175217"></a><a name="p10633165175217"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.62%" headers="mcps1.1.5.1.3 "><p id="p2633125175210"><a name="p2633125175210"></a><a name="p2633125175210"></a>false</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.33%" headers="mcps1.1.5.1.4 "><p id="p9634125116523"><a name="p9634125116523"></a><a name="p9634125116523"></a>Whether to display a bubble to indicate the percentage when sliding.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Events<a name="section449664852016"></a>
-
-Among all the universal events, only  **OnAppear**  and  **OnDisAppear**  are supported.
-
-<a name="table952mcpsimp"></a>
-<table><thead align="left"><tr id="row959mcpsimp"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p963mcpsimp"><a name="p963mcpsimp"></a><a name="p963mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p967mcpsimp"><a name="p967mcpsimp"></a><a name="p967mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row163041291058"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p1352619001912"><a name="p1352619001912"></a><a name="p1352619001912"></a>onChange(callback: (value: number, mode: <a href="#li164030311374">SliderChangeMode</a>) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p18583122017217"><a name="p18583122017217"></a><a name="p18583122017217"></a>Callback invoked when the slider slides.</p>
-<p id="p167349586143"><a name="p167349586143"></a><a name="p167349586143"></a><strong id="b13575711113919"><a name="b13575711113919"></a><a name="b13575711113919"></a>value</strong>: current progress.</p>
-<p id="p971045311329"><a name="p971045311329"></a><a name="p971045311329"></a><strong id="b82690189394"><a name="b82690189394"></a><a name="b82690189394"></a>mode</strong>: dragging state.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li164030311374"></a>SliderChangeMode enums
-
-    <a name="table1256714217311"></a>
-    <table><thead align="left"><tr id="row356762110317"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p1056719211930"><a name="p1056719211930"></a><a name="p1056719211930"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p18567221931"><a name="p18567221931"></a><a name="p18567221931"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1356772112319"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p756720210315"><a name="p756720210315"></a><a name="p756720210315"></a>Begin</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p3567142116311"><a name="p3567142116311"></a><a name="p3567142116311"></a>The user starts to drag the slider.</p>
-    </td>
-    </tr>
-    <tr id="row14567102116319"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1156732110311"><a name="p1156732110311"></a><a name="p1156732110311"></a>Moving</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p356716211030"><a name="p356716211030"></a><a name="p356716211030"></a>The user is dragging the slider.</p>
-    </td>
-    </tr>
-    <tr id="row9452134213392"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p510719111403"><a name="p510719111403"></a><a name="p510719111403"></a>End</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p154533425394"><a name="p154533425394"></a><a name="p154533425394"></a>The user stops dragging the slider.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section13800193662114"></a>
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| blockColor | Color | - | Color&nbsp;of&nbsp;the&nbsp;slider. | 
+| trackColor | Color | - | Background&nbsp;color&nbsp;of&nbsp;the&nbsp;slider. | 
+| selectedColor | Color | - | Color&nbsp;of&nbsp;the&nbsp;slider&nbsp;rail&nbsp;that&nbsp;has&nbsp;been&nbsp;slid. | 
+| showSteps | boolean | false | Whether&nbsp;to&nbsp;display&nbsp;the&nbsp;current&nbsp;step. | 
+| showTips | boolean | false | Whether&nbsp;to&nbsp;display&nbsp;a&nbsp;bubble&nbsp;to&nbsp;indicate&nbsp;the&nbsp;percentage&nbsp;when&nbsp;sliding. | 
+
+
+## Events
+
+Among all the universal events, only **OnAppear** and **OnDisAppear** are supported.
+
+| Name | Description |
+| -------- | -------- |
+| onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode: SliderChangeMode)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;the&nbsp;slider&nbsp;slides.<br/>**value**:&nbsp;current&nbsp;progress.<br/>**mode**:&nbsp;dragging&nbsp;state. |
+
+- SliderChangeMode enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Begin | The&nbsp;user&nbsp;starts&nbsp;to&nbsp;drag&nbsp;the&nbsp;slider. | 
+  | Moving | The&nbsp;user&nbsp;is&nbsp;dragging&nbsp;the&nbsp;slider. | 
+  | End | The&nbsp;user&nbsp;stops&nbsp;dragging&nbsp;the&nbsp;slider. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -345,5 +179,4 @@ struct SliderExample {
 }
 ```
 
-![](figures/slider.gif)
-
+![en-us_image_0000001211898492](figures/en-us_image_0000001211898492.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-span.md b/en/application-dev/reference/arkui-ts/ts-basic-components-span.md
index 5ff2deb2320b6195d66fb3ff38516ff3b59abc3a..568211d1bbc795d6242fa49597b03c871b9016ed 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-span.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-span.md
@@ -1,101 +1,53 @@
-# Span<a name="EN-US_TOPIC_0000001237475051"></a>
+# Span
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The <Span\> component is used to display a paragraph of textual information. It can be used only as a child component in the  **<Text\>**  component.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section6238143720229"></a>
+
+The **&lt;Span&gt;** component is used to display a paragraph of textual information. It can be used only as a child component in the **&lt;Text&gt;** component.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section163926568224"></a>
+
+## Child Components
 
 None
 
-## APIs<a name="section769166122319"></a>
-
-Span\(content: string\)
-
--   Parameters
-
-    <a name="table1392916196212"></a>
-    <table><thead align="left"><tr id="row19306191218"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p199307193217"><a name="p199307193217"></a><a name="p199307193217"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.01%" id="mcps1.1.6.1.2"><p id="p119302191128"><a name="p119302191128"></a><a name="p119302191128"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13%" id="mcps1.1.6.1.3"><p id="p7930141911211"><a name="p7930141911211"></a><a name="p7930141911211"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.869999999999997%" id="mcps1.1.6.1.4"><p id="p1393020194219"><a name="p1393020194219"></a><a name="p1393020194219"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="40.01%" id="mcps1.1.6.1.5"><p id="p693061912210"><a name="p693061912210"></a><a name="p693061912210"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1093021911217"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p119307198218"><a name="p119307198218"></a><a name="p119307198218"></a>content</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p129301719828"><a name="p129301719828"></a><a name="p129301719828"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13%" headers="mcps1.1.6.1.3 "><p id="p893091913213"><a name="p893091913213"></a><a name="p893091913213"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.869999999999997%" headers="mcps1.1.6.1.4 "><p id="p421641117507"><a name="p421641117507"></a><a name="p421641117507"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.01%" headers="mcps1.1.6.1.5 "><p id="p693016198212"><a name="p693016198212"></a><a name="p693016198212"></a>Text content.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section11378635172316"></a>
+
+## APIs
+
+Span(content: string)
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | content | string | Yes | - | Text&nbsp;content. | 
+
+
+## Attributes
 
 In addition to the text style attributes, the attributes below are supported.
 
-<a name="table952mcpsimp"></a>
-<table><thead align="left"><tr id="row959mcpsimp"><th class="cellrowborder" valign="top" width="16%" id="mcps1.1.5.1.1"><p id="p961mcpsimp"><a name="p961mcpsimp"></a><a name="p961mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="26.009999999999998%" id="mcps1.1.5.1.2"><p id="p963mcpsimp"><a name="p963mcpsimp"></a><a name="p963mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="21.790000000000003%" id="mcps1.1.5.1.3"><p id="p965mcpsimp"><a name="p965mcpsimp"></a><a name="p965mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="36.199999999999996%" id="mcps1.1.5.1.4"><p id="p967mcpsimp"><a name="p967mcpsimp"></a><a name="p967mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row163041291058"><td class="cellrowborder" valign="top" width="16%" headers="mcps1.1.5.1.1 "><p id="p63041596511"><a name="p63041596511"></a><a name="p63041596511"></a>decoration</p>
-</td>
-<td class="cellrowborder" valign="top" width="26.009999999999998%" headers="mcps1.1.5.1.2 "><p id="p531151195414"><a name="p531151195414"></a><a name="p531151195414"></a>{</p>
-<p id="p790212415415"><a name="p790212415415"></a><a name="p790212415415"></a>type: <a href="ts-appendix-enums.md#section81063305178">TextDecorationType</a>,</p>
-<p id="p7196189541"><a name="p7196189541"></a><a name="p7196189541"></a>color?: Color</p>
-<p id="p4225174410519"><a name="p4225174410519"></a><a name="p4225174410519"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="21.790000000000003%" headers="mcps1.1.5.1.3 "><p id="p128501411541"><a name="p128501411541"></a><a name="p128501411541"></a>{</p>
-<p id="p186271915542"><a name="p186271915542"></a><a name="p186271915542"></a>type: TextDecorationType.None</p>
-<p id="p23053910513"><a name="p23053910513"></a><a name="p23053910513"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="36.199999999999996%" headers="mcps1.1.5.1.4 "><p id="p12726144512611"><a name="p12726144512611"></a><a name="p12726144512611"></a>Style and color of the text decorative line.</p>
-</td>
-</tr>
-<tr id="row2542164915718"><td class="cellrowborder" valign="top" width="16%" headers="mcps1.1.5.1.1 "><p id="p1542849972"><a name="p1542849972"></a><a name="p1542849972"></a>textCase</p>
-</td>
-<td class="cellrowborder" valign="top" width="26.009999999999998%" headers="mcps1.1.5.1.2 "><p id="p1454214498717"><a name="p1454214498717"></a><a name="p1454214498717"></a><a href="ts-appendix-enums.md#section1276124151715">TextCase</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="21.790000000000003%" headers="mcps1.1.5.1.3 "><p id="p85421449872"><a name="p85421449872"></a><a name="p85421449872"></a>Normal</p>
-</td>
-<td class="cellrowborder" valign="top" width="36.199999999999996%" headers="mcps1.1.5.1.4 "><p id="p75429492719"><a name="p75429492719"></a><a name="p75429492719"></a>Text case.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Events<a name="section1093554116361"></a>
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype-enums),<br/>color?:&nbsp;Color<br/>} | {<br/>type:&nbsp;TextDecorationType.None<br/>} | Style&nbsp;and&nbsp;color&nbsp;of&nbsp;the&nbsp;text&nbsp;decorative&nbsp;line. |
+| textCase | [TextCase](ts-appendix-enums.md#textcase-enums) | Normal | Text&nbsp;case. |
+
+
+## Events
 
 Among all the universal events, only the click event is supported.
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->As the  **<Span\>**  component does not have size information, the  **target**  attribute of the  **ClickEvent**  object returned by the click event is invalid.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> As the **&lt;Span&gt;** component does not have size information, the **target** attribute of the **ClickEvent** object returned by the click event is invalid.
+
+
+## Example
 
-## Example<a name="section21711157202411"></a>
 
 ```
 @Entry
@@ -134,5 +86,4 @@ struct SpanExample {
 }
 ```
 
-![](figures/span.gif)
-
+![en-us_image_0000001257138363](figures/en-us_image_0000001257138363.gif)
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 6973ed419c06f81dc200b425fa815ae79ec41e22..89ca41780e4a619c2628db67f2c205bd924d79c2 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
@@ -1,258 +1,80 @@
-# Text<a name="EN-US_TOPIC_0000001192915102"></a>
+# Text
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Text\>**  component is used to display a paragraph of textual information.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section1895361713156"></a>
+
+The **&lt;Text&gt;** component is used to display a paragraph of textual information.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section1444658131617"></a>
-
-The  **<Text\>**  component can contain the child component  [<Span\>](ts-basic-components-span.md).
-
-## APIs<a name="section1383178131719"></a>
-
-Text\(content?: string\)
-
--   Parameters
-
-    <a name="table1392916196212"></a>
-    <table><thead align="left"><tr id="row19306191218"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p199307193217"><a name="p199307193217"></a><a name="p199307193217"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.01%" id="mcps1.1.6.1.2"><p id="p119302191128"><a name="p119302191128"></a><a name="p119302191128"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13%" id="mcps1.1.6.1.3"><p id="p7930141911211"><a name="p7930141911211"></a><a name="p7930141911211"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.869999999999997%" id="mcps1.1.6.1.4"><p id="p1393020194219"><a name="p1393020194219"></a><a name="p1393020194219"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="40.01%" id="mcps1.1.6.1.5"><p id="p693061912210"><a name="p693061912210"></a><a name="p693061912210"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1093021911217"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p119307198218"><a name="p119307198218"></a><a name="p119307198218"></a>content</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p129301719828"><a name="p129301719828"></a><a name="p129301719828"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13%" headers="mcps1.1.6.1.3 "><p id="p893091913213"><a name="p893091913213"></a><a name="p893091913213"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.869999999999997%" headers="mcps1.1.6.1.4 "><p id="p421641117507"><a name="p421641117507"></a><a name="p421641117507"></a>''</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.01%" headers="mcps1.1.6.1.5 "><p id="p693016198212"><a name="p693016198212"></a><a name="p693016198212"></a>Text content, which is the content of the child component <strong id="b151011122422"><a name="b151011122422"></a><a name="b151011122422"></a>&lt;Span&gt;</strong>. This parameter does not take effect when the child component <strong id="b1465974710421"><a name="b1465974710421"></a><a name="b1465974710421"></a>&lt;Span&gt;</strong> is contained.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section175320400172"></a>
-
-<a name="table952mcpsimp"></a>
-<table><thead align="left"><tr id="row959mcpsimp"><th class="cellrowborder" valign="top" width="16%" id="mcps1.1.5.1.1"><p id="p961mcpsimp"><a name="p961mcpsimp"></a><a name="p961mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="24.14%" id="mcps1.1.5.1.2"><p id="p963mcpsimp"><a name="p963mcpsimp"></a><a name="p963mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="33.35%" id="mcps1.1.5.1.3"><p id="p965mcpsimp"><a name="p965mcpsimp"></a><a name="p965mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="26.51%" id="mcps1.1.5.1.4"><p id="p967mcpsimp"><a name="p967mcpsimp"></a><a name="p967mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1007mcpsimp"><td class="cellrowborder" valign="top" width="16%" headers="mcps1.1.5.1.1 "><p id="p1009mcpsimp"><a name="p1009mcpsimp"></a><a name="p1009mcpsimp"></a>textAlign</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.14%" headers="mcps1.1.5.1.2 "><p id="p1011mcpsimp"><a name="p1011mcpsimp"></a><a name="p1011mcpsimp"></a><a href="#li16164333289">TextAlign</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="33.35%" headers="mcps1.1.5.1.3 "><p id="p1013mcpsimp"><a name="p1013mcpsimp"></a><a name="p1013mcpsimp"></a>Start</p>
-</td>
-<td class="cellrowborder" valign="top" width="26.51%" headers="mcps1.1.5.1.4 "><p id="p1015mcpsimp"><a name="p1015mcpsimp"></a><a name="p1015mcpsimp"></a>Text alignment mode of multiple lines of text.</p>
-</td>
-</tr>
-<tr id="row1029mcpsimp"><td class="cellrowborder" valign="top" width="16%" headers="mcps1.1.5.1.1 "><p id="p1031mcpsimp"><a name="p1031mcpsimp"></a><a name="p1031mcpsimp"></a>textOverflow</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.14%" headers="mcps1.1.5.1.2 "><p id="p1033mcpsimp"><a name="p1033mcpsimp"></a><a name="p1033mcpsimp"></a>{overflow: <a href="#li3837144314284">TextOverflow</a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.35%" headers="mcps1.1.5.1.3 "><p id="p11638840426"><a name="p11638840426"></a><a name="p11638840426"></a>{overflow: TextOverflow.Clip}</p>
-</td>
-<td class="cellrowborder" valign="top" width="26.51%" headers="mcps1.1.5.1.4 "><p id="p1037mcpsimp"><a name="p1037mcpsimp"></a><a name="p1037mcpsimp"></a>Display mode when the text is too long.</p>
-</td>
-</tr>
-<tr id="row1041mcpsimp"><td class="cellrowborder" valign="top" width="16%" headers="mcps1.1.5.1.1 "><p id="p1043mcpsimp"><a name="p1043mcpsimp"></a><a name="p1043mcpsimp"></a>maxLines</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.14%" headers="mcps1.1.5.1.2 "><p id="p1045mcpsimp"><a name="p1045mcpsimp"></a><a name="p1045mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.35%" headers="mcps1.1.5.1.3 "><p id="p1047mcpsimp"><a name="p1047mcpsimp"></a><a name="p1047mcpsimp"></a>Infinity</p>
-</td>
-<td class="cellrowborder" valign="top" width="26.51%" headers="mcps1.1.5.1.4 "><p id="p1049mcpsimp"><a name="p1049mcpsimp"></a><a name="p1049mcpsimp"></a>Maximum number of lines in the text.</p>
-</td>
-</tr>
-<tr id="row543016141359"><td class="cellrowborder" valign="top" width="16%" headers="mcps1.1.5.1.1 "><p id="p139641823122615"><a name="p139641823122615"></a><a name="p139641823122615"></a>lineHeight</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.14%" headers="mcps1.1.5.1.2 "><p id="p18964172311266"><a name="p18964172311266"></a><a name="p18964172311266"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.35%" headers="mcps1.1.5.1.3 "><p id="p896413235265"><a name="p896413235265"></a><a name="p896413235265"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="26.51%" headers="mcps1.1.5.1.4 "><p id="p159651223202613"><a name="p159651223202613"></a><a name="p159651223202613"></a>Text line height. If the value is less than or equal to <strong id="b17795171804316"><a name="b17795171804316"></a><a name="b17795171804316"></a>0</strong>, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.</p>
-</td>
-</tr>
-<tr id="row163041291058"><td class="cellrowborder" valign="top" width="16%" headers="mcps1.1.5.1.1 "><p id="p63041596511"><a name="p63041596511"></a><a name="p63041596511"></a>decoration</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.14%" headers="mcps1.1.5.1.2 "><p id="p143131349610"><a name="p143131349610"></a><a name="p143131349610"></a>{</p>
-<p id="p282514269218"><a name="p282514269218"></a><a name="p282514269218"></a>type: <a href="#li182215492284">TextDecorationType</a>,</p>
-<p id="p1236612297213"><a name="p1236612297213"></a><a name="p1236612297213"></a>color?: Color</p>
-<p id="p4225174410519"><a name="p4225174410519"></a><a name="p4225174410519"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.35%" headers="mcps1.1.5.1.3 "><p id="p9718489210"><a name="p9718489210"></a><a name="p9718489210"></a>{</p>
-<p id="p18996125116210"><a name="p18996125116210"></a><a name="p18996125116210"></a>type: TextDecorationType.None,</p>
-<p id="p027574216212"><a name="p027574216212"></a><a name="p027574216212"></a>color: Color.Black</p>
-<p id="p23053910513"><a name="p23053910513"></a><a name="p23053910513"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="26.51%" headers="mcps1.1.5.1.4 "><p id="p12726144512611"><a name="p12726144512611"></a><a name="p12726144512611"></a>Style and color of the text decorative line.</p>
-</td>
-</tr>
-<tr id="row936214307719"><td class="cellrowborder" valign="top" width="16%" headers="mcps1.1.5.1.1 "><p id="p33620302718"><a name="p33620302718"></a><a name="p33620302718"></a>baselineOffset</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.14%" headers="mcps1.1.5.1.2 "><p id="p63637301577"><a name="p63637301577"></a><a name="p63637301577"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.35%" headers="mcps1.1.5.1.3 "><p id="p19363163018717"><a name="p19363163018717"></a><a name="p19363163018717"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="26.51%" headers="mcps1.1.5.1.4 "><p id="p163635301075"><a name="p163635301075"></a><a name="p163635301075"></a>Offset of the text baseline.</p>
-</td>
-</tr>
-<tr id="row2542164915718"><td class="cellrowborder" valign="top" width="16%" headers="mcps1.1.5.1.1 "><p id="p1542849972"><a name="p1542849972"></a><a name="p1542849972"></a>textCase</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.14%" headers="mcps1.1.5.1.2 "><p id="p1454214498717"><a name="p1454214498717"></a><a name="p1454214498717"></a><a href="#li6551155619287">TextCase</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="33.35%" headers="mcps1.1.5.1.3 "><p id="p85421449872"><a name="p85421449872"></a><a name="p85421449872"></a>Normal</p>
-</td>
-<td class="cellrowborder" valign="top" width="26.51%" headers="mcps1.1.5.1.4 "><p id="p75429492719"><a name="p75429492719"></a><a name="p75429492719"></a>Text case.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li16164333289"></a>TextAlign enums
-
-    <a name="table12144170154116"></a>
-    <table><thead align="left"><tr id="row1314430184118"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p1614414014416"><a name="p1614414014416"></a><a name="p1614414014416"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p1314415074113"><a name="p1314415074113"></a><a name="p1314415074113"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row61441505417"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p191443034117"><a name="p191443034117"></a><a name="p191443034117"></a>Center</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p121447017412"><a name="p121447017412"></a><a name="p121447017412"></a>The text is center-aligned.</p>
-    </td>
-    </tr>
-    <tr id="row20144801418"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p17145110194110"><a name="p17145110194110"></a><a name="p17145110194110"></a>Start</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p171454015415"><a name="p171454015415"></a><a name="p171454015415"></a>The text is aligned with the direction in which the text is written.</p>
-    </td>
-    </tr>
-    <tr id="row914570194112"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p714511012418"><a name="p714511012418"></a><a name="p714511012418"></a>End</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p101451704415"><a name="p101451704415"></a><a name="p101451704415"></a>The text is aligned with the opposite direction in which the text is written.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   <a name="li3837144314284"></a>TextOverflow enums
-
-    <a name="table189737541745"></a>
-    <table><thead align="left"><tr id="row1797335419414"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p1597314541412"><a name="p1597314541412"></a><a name="p1597314541412"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p1197365410413"><a name="p1197365410413"></a><a name="p1197365410413"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row149730541412"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1797310541344"><a name="p1797310541344"></a><a name="p1797310541344"></a>Clip</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p13973105416419"><a name="p13973105416419"></a><a name="p13973105416419"></a>Extra text is truncated.</p>
-    </td>
-    </tr>
-    <tr id="row189732054048"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1597313541444"><a name="p1597313541444"></a><a name="p1597313541444"></a>Ellipsis</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p119741754244"><a name="p119741754244"></a><a name="p119741754244"></a>The ellipsis (...) is used for extra-long text.</p>
-    </td>
-    </tr>
-    <tr id="row1997445416413"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p13974185410411"><a name="p13974185410411"></a><a name="p13974185410411"></a>None</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p69744541410"><a name="p69744541410"></a><a name="p69744541410"></a>No truncation or ellipsis is used for extra-long text.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   <a name="li182215492284"></a>TextDecorationType enums
-
-    <a name="table3452114216394"></a>
-    <table><thead align="left"><tr id="row245219426397"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p545244283914"><a name="p545244283914"></a><a name="p545244283914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p2452114203917"><a name="p2452114203917"></a><a name="p2452114203917"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6452144218390"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p34529427398"><a name="p34529427398"></a><a name="p34529427398"></a>Underline</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245211421393"><a name="p1245211421393"></a><a name="p1245211421393"></a>An underline is used.</p>
-    </td>
-    </tr>
-    <tr id="row12452184217398"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p54523425398"><a name="p54523425398"></a><a name="p54523425398"></a>LineThrough</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p745215426391"><a name="p745215426391"></a><a name="p745215426391"></a>A strikethrough is used.</p>
-    </td>
-    </tr>
-    <tr id="row9452134213392"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p510719111403"><a name="p510719111403"></a><a name="p510719111403"></a>Overline</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p154533425394"><a name="p154533425394"></a><a name="p154533425394"></a>An overline is used.</p>
-    </td>
-    </tr>
-    <tr id="row1345313424399"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1766215124010"><a name="p1766215124010"></a><a name="p1766215124010"></a>None</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245319426394"><a name="p1245319426394"></a><a name="p1245319426394"></a>No decorative line is used.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   <a name="li6551155619287"></a>TextCase enums
-
-    <a name="table5287134045213"></a>
-    <table><thead align="left"><tr id="row02871840155217"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p10287184045214"><a name="p10287184045214"></a><a name="p10287184045214"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p1287164085212"><a name="p1287164085212"></a><a name="p1287164085212"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row228717404527"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p928710407525"><a name="p928710407525"></a><a name="p928710407525"></a>Normal</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1128719404524"><a name="p1128719404524"></a><a name="p1128719404524"></a>The original case of the text is retained.</p>
-    </td>
-    </tr>
-    <tr id="row62871040175213"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p0287140135215"><a name="p0287140135215"></a><a name="p0287140135215"></a>LowerCase</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p028784055213"><a name="p028784055213"></a><a name="p028784055213"></a>All letters in the text are in lowercase.</p>
-    </td>
-    </tr>
-    <tr id="row19287164065216"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p0288114019528"><a name="p0288114019528"></a><a name="p0288114019528"></a>UpperCase</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p11288104015214"><a name="p11288104015214"></a><a name="p11288104015214"></a>All letters in the text are in uppercase.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->The  **<Text\>**  component cannot contain both the text and the child component  **<Span\>**. If both of them exist, only the content in  **<Span\>**  is displayed.
-
-## Example<a name="section13800193662114"></a>
+
+## Child Components
+
+The **&lt;Text&gt;** component can contain the child component [<Span>](../reference/arkui-ts/ts-basic-components-span.md).
+
+
+## APIs
+
+Text(content?: string)
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | content | string | No | '' | Text&nbsp;content,&nbsp;which&nbsp;is&nbsp;the&nbsp;content&nbsp;of&nbsp;the&nbsp;child&nbsp;component&nbsp;**&lt;Span&gt;**.&nbsp;This&nbsp;parameter&nbsp;does&nbsp;not&nbsp;take&nbsp;effect&nbsp;when&nbsp;the&nbsp;child&nbsp;component&nbsp;**&lt;Span&gt;**&nbsp;is&nbsp;contained. | 
+
+
+## Attributes
+
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| textAlign | TextAlign | TextAlign.Start                                              | Text&nbsp;alignment&nbsp;mode&nbsp;of&nbsp;multiple&nbsp;lines&nbsp;of&nbsp;text. |
+| textOverflow | {overflow:&nbsp;TextOverflow} | {overflow:&nbsp;TextOverflow.Clip} | Display&nbsp;mode&nbsp;when&nbsp;the&nbsp;text&nbsp;is&nbsp;too&nbsp;long. |
+| maxLines | number | Infinity | Maximum&nbsp;number&nbsp;of&nbsp;lines&nbsp;in&nbsp;the&nbsp;text. |
+| lineHeight | Length | - | Text&nbsp;line&nbsp;height.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;less&nbsp;than&nbsp;or&nbsp;equal&nbsp;to&nbsp;**0**,&nbsp;the&nbsp;line&nbsp;height&nbsp;is&nbsp;not&nbsp;limited&nbsp;and&nbsp;the&nbsp;font&nbsp;size&nbsp;is&nbsp;adaptive.&nbsp;If&nbsp;the&nbsp;value&nbsp;of&nbsp;the&nbsp;number&nbsp;type,&nbsp;the&nbsp;unit&nbsp;fp&nbsp;is&nbsp;used. |
+| decoration | {<br/>type:&nbsp;TextDecorationType,<br/>color?:&nbsp;Color<br/>} | {<br/>type:&nbsp;TextDecorationType.None,<br/>color:&nbsp;Color.Black<br/>} | Style&nbsp;and&nbsp;color&nbsp;of&nbsp;the&nbsp;text&nbsp;decorative&nbsp;line. |
+| baselineOffset | Length | - | Offset&nbsp;of&nbsp;the&nbsp;text&nbsp;baseline. |
+| textCase | TextCase | TextCase.Normal | Text&nbsp;case. |
+
+- TextAlign enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Center | The&nbsp;text&nbsp;is&nbsp;center-aligned. | 
+  | Start | The&nbsp;text&nbsp;is&nbsp;aligned&nbsp;with&nbsp;the&nbsp;direction&nbsp;in&nbsp;which&nbsp;the&nbsp;text&nbsp;is&nbsp;written. | 
+  | End | The&nbsp;text&nbsp;is&nbsp;aligned&nbsp;with&nbsp;the&nbsp;opposite&nbsp;direction&nbsp;in&nbsp;which&nbsp;the&nbsp;text&nbsp;is&nbsp;written. | 
+
+- TextOverflow enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Clip | Extra&nbsp;text&nbsp;is&nbsp;truncated. | 
+  | Ellipsis | The&nbsp;ellipsis&nbsp;(...)&nbsp;is&nbsp;used&nbsp;for&nbsp;extra-long&nbsp;text. | 
+  | None | No&nbsp;truncation&nbsp;or&nbsp;ellipsis&nbsp;is&nbsp;used&nbsp;for&nbsp;extra-long&nbsp;text. | 
+
+- TextDecorationType enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Underline | An&nbsp;underline&nbsp;is&nbsp;used. | 
+  | LineThrough | A&nbsp;strikethrough&nbsp;is&nbsp;used. | 
+  | Overline | An&nbsp;overline&nbsp;is&nbsp;used. | 
+  | None | No&nbsp;decorative&nbsp;line&nbsp;is&nbsp;used. | 
+
+- TextCase enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Normal | The&nbsp;original&nbsp;case&nbsp;of&nbsp;the&nbsp;text&nbsp;is&nbsp;retained. | 
+  | LowerCase | All&nbsp;letters&nbsp;in&nbsp;the&nbsp;text&nbsp;are&nbsp;in&nbsp;lowercase. | 
+  | UpperCase | All&nbsp;letters&nbsp;in&nbsp;the&nbsp;text&nbsp;are&nbsp;in&nbsp;uppercase. | 
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> The **&lt;Text&gt;** component cannot contain both the text and the child component **&lt;Span&gt;**. If both of them exist, only the content in **&lt;Span&gt;** is displayed.
+
+
+## Example
+
 
 ```
 @Entry
@@ -290,7 +112,8 @@ struct TextExample1 {
 }
 ```
 
-![](figures/text1.gif)
+![en-us_image_0000001257138337](figures/en-us_image_0000001257138337.gif)
+
 
 ```
 @Entry
@@ -332,5 +155,4 @@ struct TextExample2 {
 }
 ```
 
-![](figures/text2.gif)
-
+![en-us_image_0000001257058391](figures/en-us_image_0000001257058391.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
index 8ea07e9d812d3895368a806b700121997598e308..5f0d05bb0a5f8b57ad2e9e3336eefef0609cd7a6 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
@@ -1,168 +1,87 @@
-# TextArea<a name="EN-US_TOPIC_0000001192755102"></a>
+# TextArea
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-Provides the multi-line text input component.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+
+The **&lt;TextArea&gt;** component provides multi-line text input.
+
+
+## Required Permissions
 
 None
 
-## Child Component<a name="section53281531154915"></a>
+
+## Child Component
 
 N/A
 
-## APIs<a name="section1989913519718"></a>
-
-TextArea\(value?: \{ placeholder?: string \}\)
-
--   Parameters
-
-    <a name="table1392916196212"></a>
-    <table><thead align="left"><tr id="row19306191218"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p199307193217"><a name="p199307193217"></a><a name="p199307193217"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.01%" id="mcps1.1.6.1.2"><p id="p119302191128"><a name="p119302191128"></a><a name="p119302191128"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.44%" id="mcps1.1.6.1.3"><p id="p7930141911211"><a name="p7930141911211"></a><a name="p7930141911211"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.950000000000001%" id="mcps1.1.6.1.4"><p id="p1393020194219"><a name="p1393020194219"></a><a name="p1393020194219"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="48.49%" id="mcps1.1.6.1.5"><p id="p693061912210"><a name="p693061912210"></a><a name="p693061912210"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1093021911217"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p119307198218"><a name="p119307198218"></a><a name="p119307198218"></a>placeholder</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p129301719828"><a name="p129301719828"></a><a name="p129301719828"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.44%" headers="mcps1.1.6.1.3 "><p id="p893091913213"><a name="p893091913213"></a><a name="p893091913213"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.950000000000001%" headers="mcps1.1.6.1.4 "><p id="p793071910214"><a name="p793071910214"></a><a name="p793071910214"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="48.49%" headers="mcps1.1.6.1.5 "><p id="p693016198212"><a name="p693016198212"></a><a name="p693016198212"></a>Text displayed when there is no input.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section18430105671014"></a>
-
-In addition to the attributes in  [Universal Attributes](ts-universal-attributes.md), the following attributes are supported.
-
-<a name="table1687143610336"></a>
-<table><thead align="left"><tr id="row66873367334"><th class="cellrowborder" valign="top" width="18.709999999999997%" id="mcps1.1.5.1.1"><p id="p16687193613335"><a name="p16687193613335"></a><a name="p16687193613335"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="21.78%" id="mcps1.1.5.1.2"><p id="p18687163610335"><a name="p18687163610335"></a><a name="p18687163610335"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="13.51%" id="mcps1.1.5.1.3"><p id="p968743623315"><a name="p968743623315"></a><a name="p968743623315"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="46%" id="mcps1.1.5.1.4"><p id="p11687136103313"><a name="p11687136103313"></a><a name="p11687136103313"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row12688133616332"><td class="cellrowborder" valign="top" width="18.709999999999997%" headers="mcps1.1.5.1.1 "><p id="p1368817365334"><a name="p1368817365334"></a><a name="p1368817365334"></a>placeholderColor</p>
-</td>
-<td class="cellrowborder" valign="top" width="21.78%" headers="mcps1.1.5.1.2 "><p id="p468853614333"><a name="p468853614333"></a><a name="p468853614333"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.51%" headers="mcps1.1.5.1.3 "><p id="p116887362331"><a name="p116887362331"></a><a name="p116887362331"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="46%" headers="mcps1.1.5.1.4 "><p id="p18688103623318"><a name="p18688103623318"></a><a name="p18688103623318"></a>Placeholder text color.</p>
-</td>
-</tr>
-<tr id="row1688536173315"><td class="cellrowborder" valign="top" width="18.709999999999997%" headers="mcps1.1.5.1.1 "><p id="p3688103623316"><a name="p3688103623316"></a><a name="p3688103623316"></a>placeholderFont</p>
-</td>
-<td class="cellrowborder" valign="top" width="21.78%" headers="mcps1.1.5.1.2 "><p id="p13224252496"><a name="p13224252496"></a><a name="p13224252496"></a>{</p>
-<p id="p1897895315911"><a name="p1897895315911"></a><a name="p1897895315911"></a>size?: number,</p>
-<p id="p259423124117"><a name="p259423124117"></a><a name="p259423124117"></a>weight?:number | <a href="ts-universal-attributes-text-style.md#li24391125115311">FontWeight</a>,</p>
-<p id="p1543313581098"><a name="p1543313581098"></a><a name="p1543313581098"></a>family?: string,</p>
-<p id="p17521110141018"><a name="p17521110141018"></a><a name="p17521110141018"></a>style?: <a href="ts-universal-attributes-text-style.md#li6906111945316">FontStyle</a></p>
-<p id="p3688636103319"><a name="p3688636103319"></a><a name="p3688636103319"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.51%" headers="mcps1.1.5.1.3 "><p id="p126881366333"><a name="p126881366333"></a><a name="p126881366333"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="46%" headers="mcps1.1.5.1.4 "><p id="p45161321194215"><a name="p45161321194215"></a><a name="p45161321194215"></a>Placeholder text style.</p>
-<a name="ul183144224216"></a><a name="ul183144224216"></a><ul id="ul183144224216"><li><strong id="b1641473203114"><a name="b1641473203114"></a><a name="b1641473203114"></a>size</strong>: font size. If the value is of the number type, the unit fp is used.</li><li><strong id="b57593612338"><a name="b57593612338"></a><a name="b57593612338"></a>weight</strong>: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is <strong id="b3756155873216"><a name="b3756155873216"></a><a name="b3756155873216"></a>400</strong>. A larger value indicates a larger font weight.</li><li><strong id="b19118103403918"><a name="b19118103403918"></a><a name="b19118103403918"></a>family</strong>: 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 <strong id="b1114919274018"><a name="b1114919274018"></a><a name="b1114919274018"></a>Arial, sans-serif</strong>.</li><li><strong id="b657431218403"><a name="b657431218403"></a><a name="b657431218403"></a>style</strong>: font style.</li></ul>
-</td>
-</tr>
-<tr id="row268917361332"><td class="cellrowborder" valign="top" width="18.709999999999997%" headers="mcps1.1.5.1.1 "><p id="p106891536113312"><a name="p106891536113312"></a><a name="p106891536113312"></a>textAlign</p>
-</td>
-<td class="cellrowborder" valign="top" width="21.78%" headers="mcps1.1.5.1.2 "><p id="p176892363339"><a name="p176892363339"></a><a name="p176892363339"></a>TextAlign</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.51%" headers="mcps1.1.5.1.3 "><p id="p9689183633317"><a name="p9689183633317"></a><a name="p9689183633317"></a>TextAlign.Start</p>
-</td>
-<td class="cellrowborder" valign="top" width="46%" headers="mcps1.1.5.1.4 "><p id="p186898362335"><a name="p186898362335"></a><a name="p186898362335"></a>Sets the text horizontal alignment mode.</p>
-</td>
-</tr>
-<tr id="row768983643315"><td class="cellrowborder" valign="top" width="18.709999999999997%" headers="mcps1.1.5.1.1 "><p id="p1568983673318"><a name="p1568983673318"></a><a name="p1568983673318"></a>caretColor</p>
-</td>
-<td class="cellrowborder" valign="top" width="21.78%" headers="mcps1.1.5.1.2 "><p id="p4689143616333"><a name="p4689143616333"></a><a name="p4689143616333"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.51%" headers="mcps1.1.5.1.3 "><p id="p15689236103316"><a name="p15689236103316"></a><a name="p15689236103316"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="46%" headers="mcps1.1.5.1.4 "><p id="p126899368337"><a name="p126899368337"></a><a name="p126899368337"></a>Sets the color of the cursor in the text box.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   TextAlign enumeration description
-
-    <a name="table1889814410423"></a>
-    <table><thead align="left"><tr id="row6899649423"><th class="cellrowborder" valign="top" width="22.56%" id="mcps1.1.3.1.1"><p id="p089910424220"><a name="p089910424220"></a><a name="p089910424220"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="77.44%" id="mcps1.1.3.1.2"><p id="p1389917420424"><a name="p1389917420424"></a><a name="p1389917420424"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row16899174204211"><td class="cellrowborder" valign="top" width="22.56%" headers="mcps1.1.3.1.1 "><p id="p198997424217"><a name="p198997424217"></a><a name="p198997424217"></a>Start</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="77.44%" headers="mcps1.1.3.1.2 "><p id="p198999494210"><a name="p198999494210"></a><a name="p198999494210"></a>Aligns the header horizontally.</p>
-    </td>
-    </tr>
-    <tr id="row389974144214"><td class="cellrowborder" valign="top" width="22.56%" headers="mcps1.1.3.1.1 "><p id="p089912415423"><a name="p089912415423"></a><a name="p089912415423"></a>Center</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="77.44%" headers="mcps1.1.3.1.2 "><p id="p1889944204220"><a name="p1889944204220"></a><a name="p1889944204220"></a>Horizontal center alignment.</p>
-    </td>
-    </tr>
-    <tr id="row1789904154211"><td class="cellrowborder" valign="top" width="22.56%" headers="mcps1.1.3.1.1 "><p id="p2089918413423"><a name="p2089918413423"></a><a name="p2089918413423"></a>End</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="77.44%" headers="mcps1.1.3.1.2 "><p id="p48998419426"><a name="p48998419426"></a><a name="p48998419426"></a>Align the tail horizontally.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Events<a name="section449664852016"></a>
-
-<a name="table952mcpsimp"></a>
-<table><thead align="left"><tr id="row959mcpsimp"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p963mcpsimp"><a name="p963mcpsimp"></a><a name="p963mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p967mcpsimp"><a name="p967mcpsimp"></a><a name="p967mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row163041291058"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p1352619001912"><a name="p1352619001912"></a><a name="p1352619001912"></a>onChange(callback: (value: string) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p772854496"><a name="p772854496"></a><a name="p772854496"></a>When the input changes, the callback function is triggered.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section13800193662114"></a>
+
+## APIs
+
+TextArea(value?:{placeholder?: string controller?: TextAreaController})
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | placeholder | string | No | - | Text&nbsp;displayed&nbsp;when&nbsp;there&nbsp;is&nbsp;no&nbsp;input. | 
+  | controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | No | - | Text&nbsp;area&nbsp;controller. | 
+
+
+## Attributes
+
+In addition to [universal attributes](ts-universal-attributes.md), the following attributes are supported.
+
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| placeholderColor | Color | - | Placeholder&nbsp;text&nbsp;color. |
+| placeholderFont | {<br/>size?:&nbsp;number,<br/>weight?:number&nbsp;\|&nbsp;[FontWeight](ts-universal-attributes-text-style.md),<br/>family?:&nbsp;string,<br/>style?:&nbsp;[FontStyle](ts-universal-attributes-text-style.md)<br/>} | - | Placeholder&nbsp;text&nbsp;style.<br/>-&nbsp;**size**:&nbsp;font&nbsp;size.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;of&nbsp;the&nbsp;number&nbsp;type,&nbsp;the&nbsp;unit&nbsp;fp&nbsp;is&nbsp;used.<br/>-&nbsp;**weight**:&nbsp;font&nbsp;weight.&nbsp;For&nbsp;the&nbsp;number&nbsp;type,&nbsp;the&nbsp;value&nbsp;ranges&nbsp;from&nbsp;100&nbsp;to&nbsp;900,&nbsp;at&nbsp;an&nbsp;interval&nbsp;of&nbsp;100.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**400**.&nbsp;A&nbsp;larger&nbsp;value&nbsp;indicates&nbsp;a&nbsp;larger&nbsp;font&nbsp;weight.<br/>-&nbsp;**family**:&nbsp;font&nbsp;family.&nbsp;Use&nbsp;commas&nbsp;(,)&nbsp;to&nbsp;separate&nbsp;multiple&nbsp;fonts,&nbsp;for&nbsp;example,&nbsp;**'Arial,&nbsp;sans-serif'**.&nbsp;The&nbsp;priority&nbsp;of&nbsp;the&nbsp;fonts&nbsp;is&nbsp;the&nbsp;sequence&nbsp;in&nbsp;which&nbsp;they&nbsp;are&nbsp;placed.<br/>-&nbsp;**style**:&nbsp;font&nbsp;style. |
+| textAlign | TextAlign | Start | Sets&nbsp;the&nbsp;text&nbsp;horizontal&nbsp;alignment&nbsp;mode. |
+| caretColor | Color | - | Sets&nbsp;the&nbsp;color&nbsp;of&nbsp;the&nbsp;cursor&nbsp;in&nbsp;the&nbsp;text&nbsp;box. |
+| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](../../ui/ts-types.md),<br/>error?:&nbsp;(value:&nbsp;string)<br/>} | - | Regular&nbsp;expression&nbsp;for&nbsp;input&nbsp;filtering.&nbsp;Only&nbsp;inputs&nbsp;that&nbsp;comply&nbsp;with&nbsp;the&nbsp;regular&nbsp;expression&nbsp;can&nbsp;be&nbsp;displayed.&nbsp;Other&nbsp;inputs&nbsp;are&nbsp;ignored.&nbsp;The&nbsp;specified&nbsp;regular&nbsp;expression&nbsp;can&nbsp;match&nbsp;single&nbsp;characters,&nbsp;but&nbsp;not&nbsp;strings.&nbsp;Example:&nbsp;^(?&nbsp;=.\*\d)(?&nbsp;=.\*[a-z])(?&nbsp;=.\*[A-Z]).{8,10}$.&nbsp;Strong&nbsp;passwords&nbsp;containing&nbsp;8&nbsp;to&nbsp;10&nbsp;characters&nbsp;cannot&nbsp;be&nbsp;filtered.<br/>-&nbsp;**value**:&nbsp;indicates&nbsp;the&nbsp;regular&nbsp;expression&nbsp;to&nbsp;set.<br/>-&nbsp;**error**:&nbsp;returns&nbsp;the&nbsp;ignored&nbsp;content&nbsp;when&nbsp;regular&nbsp;expression&nbsp;matching&nbsp;fails. |
+
+- TextAlign enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Start | Aligns&nbsp;the&nbsp;header&nbsp;horizontally. | 
+  | Center | Horizontal&nbsp;center&nbsp;alignment. | 
+  | End | Align&nbsp;the&nbsp;tail&nbsp;horizontally. | 
+
+
+### TextAreaController<sup>8+</sup>
+
+Defines the controller for controlling the **&lt;TextArea&gt;** component.
+
+  | Name | Description | 
+| -------- | -------- |
+| caretPosition(value:&nbsp;number):&nbsp;void | Position&nbsp;of&nbsp;the&nbsp;input&nbsp;cursor.<br/>**value**:&nbsp;indicates&nbsp;the&nbsp;length&nbsp;from&nbsp;the&nbsp;start&nbsp;of&nbsp;the&nbsp;string&nbsp;to&nbsp;the&nbsp;position&nbsp;where&nbsp;the&nbsp;input&nbsp;cursor&nbsp;is&nbsp;located. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onChange(callback:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;input&nbsp;changes. | 
+| onCopy<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;copy&nbsp;button&nbsp;on&nbsp;the&nbsp;pasteboard,&nbsp;which&nbsp;displays&nbsp;when&nbsp;the&nbsp;text&nbsp;box&nbsp;is&nbsp;long&nbsp;pressed,&nbsp;is&nbsp;clicked.<br/>**value**:&nbsp;text&nbsp;to&nbsp;be&nbsp;copied. | 
+| onCut<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;cut&nbsp;button&nbsp;on&nbsp;the&nbsp;pasteboard,&nbsp;which&nbsp;displays&nbsp;when&nbsp;the&nbsp;text&nbsp;box&nbsp;is&nbsp;long&nbsp;pressed,&nbsp;is&nbsp;clicked.<br/>**value**:&nbsp;text&nbsp;to&nbsp;be&nbsp;cut. | 
+| onPaste<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;paste&nbsp;button&nbsp;on&nbsp;the&nbsp;pasteboard,&nbsp;which&nbsp;displays&nbsp;when&nbsp;the&nbsp;text&nbsp;box&nbsp;is&nbsp;long&nbsp;pressed,&nbsp;is&nbsp;clicked.<br/>**value**:&nbsp;text&nbsp;to&nbsp;be&nbsp;pasted. | 
+
+
+## Example
+
+
+### Multi-line Text Input
+
 
 ```
 @Entry
 @Component
-struct TextAreaExample {
+struct TextAreaExample2 {
   @State text: string = ''
-
   build() {
     Column() {
-      TextArea({ placeholder: 'input your word' })
+      TextArea({ placeholder: 'input your word'})
         .placeholderColor("rgb(0,0,225)")
         .placeholderFont({ size: 30, weight: 100, family: 'cursive', style: FontStyle.Italic })
         .textAlign(TextAlign.Center)
@@ -173,6 +92,9 @@ struct TextAreaExample {
         .fontFamily("sans-serif")
         .fontStyle(FontStyle.Normal)
         .fontColor(Color.Red)
+        .inputFilter('^[\u4E00-\u9FA5A-Za-z0-9_]+$',(value: string) => {
+          console.info("hyb"+value)
+        })
         .onChange((value: string) => {
           this.text = value
         })
@@ -182,5 +104,27 @@ struct TextAreaExample {
 }
 ```
 
-![](figures/textarea1.gif)
+![en-us_image_0000001256858399](figures/en-us_image_0000001256858399.gif)
+
+
+### Setting the Input Cursor
+
+
+```
+@Entry
+@Component
+struct TextAreaTest {
+    controller: TextAreaController = new TextAreaController()
+    build() {
+        Column() {
+            TextArea({ placeholder: 'input your word',controller:this.controller })
+            Button('caretPosition')
+                .onClick(() => {
+                    this.controller.caretPosition(4)
+                })
+          }
+    }
+}
+```
 
+![en-us_image_0000001212058476](figures/en-us_image_0000001212058476.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
index c2073e5be95e0abef7bccb498ab11d0d4a014702..e805c5feaacb318a1d68128cbb943c8310cb3620 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
@@ -1,268 +1,164 @@
-# TextInput<a name="EN-US_TOPIC_0000001192595168"></a>
+# TextInput
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<TextInput\>**  component provides single-line text input.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+
+The **&lt;TextInput&gt;** component provides single-line text input.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section1037371523612"></a>
+
+## Child Components
 
 None
 
-## APIs<a name="section33135508"></a>
-
-TextInput\(value?: \{ placeholder?: string \}\)
-
--   Parameters
-
-    <a name="table1392916196212"></a>
-    <table><thead align="left"><tr id="row19306191218"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p199307193217"><a name="p199307193217"></a><a name="p199307193217"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.01%" id="mcps1.1.6.1.2"><p id="p119302191128"><a name="p119302191128"></a><a name="p119302191128"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.499999999999998%" id="mcps1.1.6.1.3"><p id="p7930141911211"><a name="p7930141911211"></a><a name="p7930141911211"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.170000000000002%" id="mcps1.1.6.1.4"><p id="p1393020194219"><a name="p1393020194219"></a><a name="p1393020194219"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="42.21%" id="mcps1.1.6.1.5"><p id="p693061912210"><a name="p693061912210"></a><a name="p693061912210"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1093021911217"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p119307198218"><a name="p119307198218"></a><a name="p119307198218"></a>placeholder</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p129301719828"><a name="p129301719828"></a><a name="p129301719828"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p92371110145314"><a name="p92371110145314"></a><a name="p92371110145314"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p793071910214"><a name="p793071910214"></a><a name="p793071910214"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p693016198212"><a name="p693016198212"></a><a name="p693016198212"></a>Text displayed when there is no input.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section18430105671014"></a>
-
-In addition to the attributes in  [Universal Attributes](ts-universal-attributes.md), the following attributes are supported.
-
-<a name="table1687143610336"></a>
-<table><thead align="left"><tr id="row66873367334"><th class="cellrowborder" valign="top" width="15.98%" id="mcps1.1.5.1.1"><p id="p16687193613335"><a name="p16687193613335"></a><a name="p16687193613335"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="27.500000000000004%" id="mcps1.1.5.1.2"><p id="p18687163610335"><a name="p18687163610335"></a><a name="p18687163610335"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="13.239999999999998%" id="mcps1.1.5.1.3"><p id="p968743623315"><a name="p968743623315"></a><a name="p968743623315"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="43.28%" id="mcps1.1.5.1.4"><p id="p11687136103313"><a name="p11687136103313"></a><a name="p11687136103313"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row12688133616332"><td class="cellrowborder" valign="top" width="15.98%" headers="mcps1.1.5.1.1 "><p id="p1368817365334"><a name="p1368817365334"></a><a name="p1368817365334"></a>type</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.500000000000004%" headers="mcps1.1.5.1.2 "><p id="p468853614333"><a name="p468853614333"></a><a name="p468853614333"></a><a href="#li1018842194211">InputType</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="13.239999999999998%" headers="mcps1.1.5.1.3 "><p id="p116887362331"><a name="p116887362331"></a><a name="p116887362331"></a>InputType.Normal</p>
-</td>
-<td class="cellrowborder" valign="top" width="43.28%" headers="mcps1.1.5.1.4 "><p id="p3812938142619"><a name="p3812938142619"></a><a name="p3812938142619"></a>Input box type.</p>
-</td>
-</tr>
-<tr id="row12220165182710"><td class="cellrowborder" valign="top" width="15.98%" headers="mcps1.1.5.1.1 "><p id="p122135162713"><a name="p122135162713"></a><a name="p122135162713"></a>placeholderColor</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.500000000000004%" headers="mcps1.1.5.1.2 "><p id="p222119513275"><a name="p222119513275"></a><a name="p222119513275"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.239999999999998%" headers="mcps1.1.5.1.3 "><p id="p182215552714"><a name="p182215552714"></a><a name="p182215552714"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="43.28%" headers="mcps1.1.5.1.4 "><p id="p11222145152719"><a name="p11222145152719"></a><a name="p11222145152719"></a>Placeholder color.</p>
-</td>
-</tr>
-<tr id="row1688536173315"><td class="cellrowborder" valign="top" width="15.98%" headers="mcps1.1.5.1.1 "><p id="p3688103623316"><a name="p3688103623316"></a><a name="p3688103623316"></a>placeholderFont</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.500000000000004%" headers="mcps1.1.5.1.2 "><p id="p882493814282"><a name="p882493814282"></a><a name="p882493814282"></a>{</p>
-<p id="p184037108449"><a name="p184037108449"></a><a name="p184037108449"></a>size?: Length,</p>
-<p id="p19398101644016"><a name="p19398101644016"></a><a name="p19398101644016"></a>weight?: number | <a href="ts-universal-attributes-text-style.md#li24391125115311">FontWeight</a>,</p>
-<p id="p72012120614"><a name="p72012120614"></a><a name="p72012120614"></a>family?: string,</p>
-<p id="p1146164442811"><a name="p1146164442811"></a><a name="p1146164442811"></a>style?: <a href="ts-basic-components-textarea.md#table952mcpsimp">FontStyle</a></p>
-<p id="p1997730195410"><a name="p1997730195410"></a><a name="p1997730195410"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.239999999999998%" headers="mcps1.1.5.1.3 "><p id="p126881366333"><a name="p126881366333"></a><a name="p126881366333"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="43.28%" headers="mcps1.1.5.1.4 "><p id="p12813172410123"><a name="p12813172410123"></a><a name="p12813172410123"></a>Placeholder text style.</p>
-<a name="ul183144224216"></a><a name="ul183144224216"></a><ul id="ul183144224216"><li><strong id="b1289754510410"><a name="b1289754510410"></a><a name="b1289754510410"></a>size</strong>: font size. If the value is of the number type, the unit fp is used.</li><li><strong id="b1643995074118"><a name="b1643995074118"></a><a name="b1643995074118"></a>weight</strong>: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is <strong id="b1044545020416"><a name="b1044545020416"></a><a name="b1044545020416"></a>400</strong>. A larger value indicates a larger font weight.</li><li><strong id="b553705184110"><a name="b553705184110"></a><a name="b553705184110"></a>family</strong>: 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 <strong id="b587695310415"><a name="b587695310415"></a><a name="b587695310415"></a>Arial, sans-serif</strong>.</li><li><strong id="b96676548411"><a name="b96676548411"></a><a name="b96676548411"></a>style</strong>: font style.</li></ul>
-</td>
-</tr>
-<tr id="row1816315198291"><td class="cellrowborder" valign="top" width="15.98%" headers="mcps1.1.5.1.1 "><p id="p1024618557297"><a name="p1024618557297"></a><a name="p1024618557297"></a>enterKeyType</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.500000000000004%" headers="mcps1.1.5.1.2 "><p id="p1116431919292"><a name="p1116431919292"></a><a name="p1116431919292"></a><a href="#li1231618102427">EnterKeyType</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="13.239999999999998%" headers="mcps1.1.5.1.3 "><p id="p181641919162912"><a name="p181641919162912"></a><a name="p181641919162912"></a>EnterKeyType.Done</p>
-</td>
-<td class="cellrowborder" valign="top" width="43.28%" headers="mcps1.1.5.1.4 "><p id="p143216412306"><a name="p143216412306"></a><a name="p143216412306"></a>How the Enter key is labeled.</p>
-</td>
-</tr>
-<tr id="row768983643315"><td class="cellrowborder" valign="top" width="15.98%" headers="mcps1.1.5.1.1 "><p id="p1568983673318"><a name="p1568983673318"></a><a name="p1568983673318"></a>caretColor</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.500000000000004%" headers="mcps1.1.5.1.2 "><p id="p4689143616333"><a name="p4689143616333"></a><a name="p4689143616333"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.239999999999998%" headers="mcps1.1.5.1.3 "><p id="p15689236103316"><a name="p15689236103316"></a><a name="p15689236103316"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="43.28%" headers="mcps1.1.5.1.4 "><p id="p126899368337"><a name="p126899368337"></a><a name="p126899368337"></a>Color of the caret (also known as the text insertion cursor).</p>
-</td>
-</tr>
-<tr id="row1072711357529"><td class="cellrowborder" valign="top" width="15.98%" headers="mcps1.1.5.1.1 "><p id="p455216340525"><a name="p455216340525"></a><a name="p455216340525"></a>maxLength</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.500000000000004%" headers="mcps1.1.5.1.2 "><p id="p831934135317"><a name="p831934135317"></a><a name="p831934135317"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.239999999999998%" headers="mcps1.1.5.1.3 "><p id="p20553113445216"><a name="p20553113445216"></a><a name="p20553113445216"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="43.28%" headers="mcps1.1.5.1.4 "><p id="p755333417520"><a name="p755333417520"></a><a name="p755333417520"></a>Maximum number of characters in the text input.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li1231618102427"></a>EnterKeyType enums
-
-    <a name="table8101631142317"></a>
-    <table><thead align="left"><tr id="row1610133132320"><th class="cellrowborder" valign="top" width="26.13%" id="mcps1.1.3.1.1"><p id="p101083192316"><a name="p101083192316"></a><a name="p101083192316"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="73.87%" id="mcps1.1.3.1.2"><p id="p6101631102315"><a name="p6101631102315"></a><a name="p6101631102315"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row51063112236"><td class="cellrowborder" valign="top" width="26.13%" headers="mcps1.1.3.1.1 "><p id="p01016313235"><a name="p01016313235"></a><a name="p01016313235"></a>Go</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="73.87%" headers="mcps1.1.3.1.2 "><p id="p18112319232"><a name="p18112319232"></a><a name="p18112319232"></a>The Enter key is labeled "Go."</p>
-    </td>
-    </tr>
-    <tr id="row141110316236"><td class="cellrowborder" valign="top" width="26.13%" headers="mcps1.1.3.1.1 "><p id="p011431152310"><a name="p011431152310"></a><a name="p011431152310"></a>Search</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="73.87%" headers="mcps1.1.3.1.2 "><p id="p1011131122310"><a name="p1011131122310"></a><a name="p1011131122310"></a>The Enter key is labeled "Search."</p>
-    </td>
-    </tr>
-    <tr id="row11110317238"><td class="cellrowborder" valign="top" width="26.13%" headers="mcps1.1.3.1.1 "><p id="p61163118233"><a name="p61163118233"></a><a name="p61163118233"></a>Send</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="73.87%" headers="mcps1.1.3.1.2 "><p id="p21163116234"><a name="p21163116234"></a><a name="p21163116234"></a>The Enter key is labeled "Send."</p>
-    </td>
-    </tr>
-    <tr id="row41183114239"><td class="cellrowborder" valign="top" width="26.13%" headers="mcps1.1.3.1.1 "><p id="p2011631162310"><a name="p2011631162310"></a><a name="p2011631162310"></a>Next</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="73.87%" headers="mcps1.1.3.1.2 "><p id="p1111931202317"><a name="p1111931202317"></a><a name="p1111931202317"></a>The Enter key is labeled "Next."</p>
-    </td>
-    </tr>
-    <tr id="row811173110237"><td class="cellrowborder" valign="top" width="26.13%" headers="mcps1.1.3.1.1 "><p id="p11117313230"><a name="p11117313230"></a><a name="p11117313230"></a>Done</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="73.87%" headers="mcps1.1.3.1.2 "><p id="p1411331182311"><a name="p1411331182311"></a><a name="p1411331182311"></a>The Enter key is labeled "Done."</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   <a name="li1018842194211"></a>InputType enums
-
-    <a name="table1399312391899"></a>
-    <table><thead align="left"><tr id="row12993143919912"><th class="cellrowborder" valign="top" width="26.13%" id="mcps1.1.3.1.1"><p id="p12993183910920"><a name="p12993183910920"></a><a name="p12993183910920"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="73.87%" id="mcps1.1.3.1.2"><p id="p1499317391799"><a name="p1499317391799"></a><a name="p1499317391799"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row699420391094"><td class="cellrowborder" valign="top" width="26.13%" headers="mcps1.1.3.1.1 "><p id="p79942391992"><a name="p79942391992"></a><a name="p79942391992"></a>Normal</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="73.87%" headers="mcps1.1.3.1.2 "><p id="p49949391798"><a name="p49949391798"></a><a name="p49949391798"></a>Normal input mode.</p>
-    </td>
-    </tr>
-    <tr id="row189944396915"><td class="cellrowborder" valign="top" width="26.13%" headers="mcps1.1.3.1.1 "><p id="p19949391291"><a name="p19949391291"></a><a name="p19949391291"></a>Password</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="73.87%" headers="mcps1.1.3.1.2 "><p id="p899433910917"><a name="p899433910917"></a><a name="p899433910917"></a>Password input mode.</p>
-    </td>
-    </tr>
-    <tr id="row3994153916912"><td class="cellrowborder" valign="top" width="26.13%" headers="mcps1.1.3.1.1 "><p id="p2099416394913"><a name="p2099416394913"></a><a name="p2099416394913"></a>Email</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="73.87%" headers="mcps1.1.3.1.2 "><p id="p29941393911"><a name="p29941393911"></a><a name="p29941393911"></a>Email address input mode.</p>
-    </td>
-    </tr>
-    <tr id="row1899410394914"><td class="cellrowborder" valign="top" width="26.13%" headers="mcps1.1.3.1.1 "><p id="p19941339195"><a name="p19941339195"></a><a name="p19941339195"></a>Number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="73.87%" headers="mcps1.1.3.1.2 "><p id="p16994103919917"><a name="p16994103919917"></a><a name="p16994103919917"></a>Digit input mode.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Events<a name="section449664852016"></a>
-
-<a name="table952mcpsimp"></a>
-<table><thead align="left"><tr id="row959mcpsimp"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p963mcpsimp"><a name="p963mcpsimp"></a><a name="p963mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p967mcpsimp"><a name="p967mcpsimp"></a><a name="p967mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row163041291058"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p1352619001912"><a name="p1352619001912"></a><a name="p1352619001912"></a>onChange(value: string) =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p772854496"><a name="p772854496"></a><a name="p772854496"></a>Triggered when the input changes.</p>
-</td>
-</tr>
-<tr id="row799082415332"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p146301030123313"><a name="p146301030123313"></a><a name="p146301030123313"></a>onSubmit(callback: (enterKey: <a href="#li1231618102427">EnterKeyType</a>) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p1499122417333"><a name="p1499122417333"></a><a name="p1499122417333"></a>Triggered when the Enter key on the physical or soft keyboard is pressed.</p>
-</td>
-</tr>
-<tr id="row784037123313"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p5593444143313"><a name="p5593444143313"></a><a name="p5593444143313"></a>onEditChanged(callback: (isEditing: boolean) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p19312125443411"><a name="p19312125443411"></a><a name="p19312125443411"></a>Triggered when the input status changes.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section3619717314"></a>
+
+## APIs
+
+TextInput(value?:{placeholder?: string controller?: TextInputController})
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | placeholder | string | No | - | Text&nbsp;displayed&nbsp;when&nbsp;there&nbsp;is&nbsp;no&nbsp;input. | 
+  | controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | No | - | Text&nbsp;input&nbsp;controller. | 
+
+
+## Attributes
+
+In addition to [universal attributes](ts-universal-attributes.md), the following attributes are supported.
+
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| type | InputType | InputType.Normal | Input&nbsp;box&nbsp;type. |
+| placeholderColor | Color | - | Placeholder&nbsp;color. |
+| placeholderFont | {<br/>size?:&nbsp;Length,<br/>weight?:&nbsp;number\|[FontWeight](ts-universal-attributes-text-style.md),<br/>family?:&nbsp;string,<br/>style?:&nbsp;[FontStyle](ts-universal-attributes-text-style.md)<br/>} | - | Placeholder&nbsp;text&nbsp;style.<br/>-&nbsp;**size**:&nbsp;font&nbsp;size.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;of&nbsp;the&nbsp;number&nbsp;type,&nbsp;the&nbsp;unit&nbsp;fp&nbsp;is&nbsp;used.<br/>-&nbsp;**weight**:&nbsp;font&nbsp;weight.&nbsp;For&nbsp;the&nbsp;number&nbsp;type,&nbsp;the&nbsp;value&nbsp;ranges&nbsp;from&nbsp;100&nbsp;to&nbsp;900,&nbsp;at&nbsp;an&nbsp;interval&nbsp;of&nbsp;100.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**400**.&nbsp;A&nbsp;larger&nbsp;value&nbsp;indicates&nbsp;a&nbsp;larger&nbsp;font&nbsp;weight.<br/>-&nbsp;**family**:&nbsp;font&nbsp;family.&nbsp;Use&nbsp;commas&nbsp;(,)&nbsp;to&nbsp;separate&nbsp;multiple&nbsp;fonts,&nbsp;for&nbsp;example,&nbsp;**'Arial,&nbsp;sans-serif'**.&nbsp;The&nbsp;priority&nbsp;of&nbsp;the&nbsp;fonts&nbsp;is&nbsp;the&nbsp;sequence&nbsp;in&nbsp;which&nbsp;they&nbsp;are&nbsp;placed.<br/>-&nbsp;**style**:&nbsp;font&nbsp;style. |
+| enterKeyType | EnterKeyType | EnterKeyType.Done | How&nbsp;the&nbsp;Enter&nbsp;key&nbsp;is&nbsp;labeled. |
+| caretColor | Color | - | Color&nbsp;of&nbsp;the&nbsp;caret&nbsp;(also&nbsp;known&nbsp;as&nbsp;the&nbsp;text&nbsp;insertion&nbsp;cursor). |
+| maxLength<sup>8+</sup> | number | - | Maximum&nbsp;number&nbsp;of&nbsp;characters&nbsp;in&nbsp;the&nbsp;text&nbsp;input. |
+| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](../../ui/ts-types.md#resourcestr8),<br/>error?:&nbsp;(value:&nbsp;string)<br/>} | - | Regular&nbsp;expression&nbsp;for&nbsp;input&nbsp;filtering.&nbsp;Only&nbsp;inputs&nbsp;that&nbsp;comply&nbsp;with&nbsp;the&nbsp;regular&nbsp;expression&nbsp;can&nbsp;be&nbsp;displayed.&nbsp;Other&nbsp;inputs&nbsp;are&nbsp;ignored.&nbsp;The&nbsp;specified&nbsp;regular&nbsp;expression&nbsp;can&nbsp;match&nbsp;single&nbsp;characters,&nbsp;but&nbsp;not&nbsp;strings.&nbsp;Example:&nbsp;^(?&nbsp;=.\*\d)(?&nbsp;=.\*[a-z])(?&nbsp;=.\*[A-Z]).{8,10}$.&nbsp;Strong&nbsp;passwords&nbsp;containing&nbsp;8&nbsp;to&nbsp;10&nbsp;characters&nbsp;cannot&nbsp;be&nbsp;filtered.<br/>-&nbsp;**value**:&nbsp;indicates&nbsp;the&nbsp;regular&nbsp;expression&nbsp;to&nbsp;set.<br/>-&nbsp;**error**:&nbsp;returns&nbsp;the&nbsp;ignored&nbsp;content&nbsp;when&nbsp;regular&nbsp;expression&nbsp;matching&nbsp;fails. |
+
+- EnterKeyType enums
+    | Name | Description | 
+  | -------- | -------- |
+  | EnterKeyType.Go | The&nbsp;Enter&nbsp;key&nbsp;is&nbsp;labeled&nbsp;"Go." | 
+  | EnterKeyType.Search | The&nbsp;Enter&nbsp;key&nbsp;is&nbsp;labeled&nbsp;"Search." | 
+  | EnterKeyType.Send | The&nbsp;Enter&nbsp;key&nbsp;is&nbsp;labeled&nbsp;"Send." | 
+  | EnterKeyType.Next | The&nbsp;Enter&nbsp;key&nbsp;is&nbsp;labeled&nbsp;"Next." | 
+  | EnterKeyType.Done | The&nbsp;Enter&nbsp;key&nbsp;is&nbsp;labeled&nbsp;"Done." | 
+
+- InputType enums
+    | Name | Description | 
+  | -------- | -------- |
+  | InputType.Normal | Normal&nbsp;input&nbsp;mode. | 
+  | InputType.Password | Password&nbsp;input&nbsp;mode. | 
+  | InputType.Email | Email&nbsp;address&nbsp;input&nbsp;mode. | 
+  | InputType.Number | Digit&nbsp;input&nbsp;mode. | 
+
+
+### TextInputController<sup>8+</sup>
+
+Implements the controller of the **&lt;TextInput&gt;** component.
+
+  | Name | Description | 
+| -------- | -------- |
+| caretPosition(value:&nbsp;number):void | Position&nbsp;of&nbsp;the&nbsp;input&nbsp;cursor.<br/>**value**:&nbsp;indicates&nbsp;the&nbsp;length&nbsp;from&nbsp;the&nbsp;start&nbsp;of&nbsp;the&nbsp;string&nbsp;to&nbsp;the&nbsp;position&nbsp;where&nbsp;the&nbsp;input&nbsp;cursor&nbsp;is&nbsp;located. | 
+
+
+### Objects to Import
+
+
+```
+controller: TextInputController = new TextInputController()
+```
+
+
+### controller.createPosition
+
+caretPosition(value: number): void
+
+Sets the cursor in a specified position.
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | value | number | Yes | - | Position&nbsp;of&nbsp;the&nbsp;input&nbsp;cursor.<br/>**value**:&nbsp;indicates&nbsp;the&nbsp;length&nbsp;from&nbsp;the&nbsp;start&nbsp;of&nbsp;the&nbsp;string&nbsp;to&nbsp;the&nbsp;position&nbsp;where&nbsp;the&nbsp;input&nbsp;cursor&nbsp;is&nbsp;located. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onChange(value:&nbsp;string)&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;input&nbsp;changes. | 
+| onSubmit(callback:&nbsp;(enterKey:&nbsp;EnterKeyType)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;Enter&nbsp;key&nbsp;on&nbsp;the&nbsp;physical&nbsp;or&nbsp;soft&nbsp;keyboard&nbsp;is&nbsp;pressed. | 
+| onEditChanged(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;input&nbsp;status&nbsp;changes. | 
+| onCopy<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;copy&nbsp;button&nbsp;on&nbsp;the&nbsp;pasteboard,&nbsp;which&nbsp;displays&nbsp;when&nbsp;the&nbsp;text&nbsp;box&nbsp;is&nbsp;long&nbsp;pressed,&nbsp;is&nbsp;clicked.<br/>**value**:&nbsp;text&nbsp;to&nbsp;be&nbsp;copied. | 
+| onCut<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;cut&nbsp;button&nbsp;on&nbsp;the&nbsp;pasteboard,&nbsp;which&nbsp;displays&nbsp;when&nbsp;the&nbsp;text&nbsp;box&nbsp;is&nbsp;long&nbsp;pressed,&nbsp;is&nbsp;clicked.<br/>**value**:&nbsp;text&nbsp;to&nbsp;be&nbsp;cut. | 
+| onPaste<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;paste&nbsp;button&nbsp;on&nbsp;the&nbsp;pasteboard,&nbsp;which&nbsp;displays&nbsp;when&nbsp;the&nbsp;text&nbsp;box&nbsp;is&nbsp;long&nbsp;pressed,&nbsp;is&nbsp;clicked.<br/>**value**:&nbsp;text&nbsp;to&nbsp;be&nbsp;pasted. | 
+
+
+## Example
+
+
+### Single-line Text Input
+
+
+```
+@Entry
+@Component
+struct TextAreaExample2 {
+  @State text: string = ''
+
+  build() {
+    Column() {
+      TextArea({ placeholder: 'input your word' })
+        .placeholderColor("rgb(0,0,225)")
+        .placeholderFont({ size: 30, weight: 100, family: 'cursive', style: FontStyle.Italic })
+        .textAlign(TextAlign.Center)
+        .caretColor(Color.Blue)
+        .height(50)
+        .fontSize(30)
+        .fontWeight(FontWeight.Bold)
+        .fontFamily("sans-serif")
+        .fontStyle(FontStyle.Normal)
+        .fontColor(Color.Red)
+        .onChange((value: string) => {
+          this.text = value
+        })
+      Text(this.text).width('90%')
+    }
+  }
+}
+```
+
+
+![en-us_image_0000001212378402](figures/en-us_image_0000001212378402.gif)
+
+
+### Setting the Input Cursor
+
 
 ```
 @Entry
 @Component
 struct TextInputTest {
     @State text: string = ''
-    @State text1: string = ''
-    @State text2: string = ''
+    controller: TextInputController = new TextInputController()
     build() {
-      Column() {
-        TextInput({ placeholder: 'input your word' })
-          .type(InputType.Normal)
-          .placeholderColor(Color.Blue)
-          .placeholderFont({ size: 40, weight: FontWeight.Normal, family: "sans-serif", style: FontStyle.Normal })
-          .enterKeyType(EnterKeyType.Next)
-          .caretColor(Color.Green)
-          .height(60)
-          .fontSize(30)
-          .fontWeight(FontWeight.Bold)
-          .fontFamily("cursive")
-          .fontStyle(FontStyle.Italic)
-          .fontColor(Color.Red)
-          .maxLength(20)
-          .onChange((value: string) => {
-            this.text = value
-          })
-          .onSubmit((enterKey) => {
-            this.text1 = 'onSubmit'
-          })
-          .onEditChanged((isEditing) => {
-            this.text2 = 'onEditChanged'
-          })
-          Text(this.text)
-          Text(this.text1)
-          Text(this.text2)
+        Column() {
+            TextInput({ placeholder: 'Please input your words.', controller:this.controller})
+            Button('caretPosition')
+                .onClick(() => {
+                this.controller.caretPosition(4)
+            })
         }
     }
 }
 ```
 
-![](figures/textinput1.gif)
-
+![en-us_image_0000001212058468](figures/en-us_image_0000001212058468.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
new file mode 100644
index 0000000000000000000000000000000000000000..c9557ccbc4b443674bb9f18a346064be7d8d7ac8
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
@@ -0,0 +1,69 @@
+# TextPicker
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+The **&lt;TextPicker&gt;** component allows users to select text from a list of options.
+
+
+## Required Permissions
+
+None
+
+
+## Child Component
+
+None
+
+
+## APIs
+
+TextPicker(value: {range: string[], selected?: number})
+
+Creates a text picker based on the selection range specified by **range**.
+
+- Parameter
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | range | string[] | Yes | - | Data&nbsp;selection&nbsp;range&nbsp;of&nbsp;the&nbsp;picker. | 
+  | selected | number | No | First&nbsp;element | Index&nbsp;value&nbsp;of&nbsp;the&nbsp;selected&nbsp;item&nbsp;in&nbsp;the&nbsp;array. | 
+
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| defaultPickerItemHeight | Length | - | Default&nbsp;height&nbsp;of&nbsp;a&nbsp;Picker&nbsp;content&nbsp;item&nbsp;element. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- | 
+| onChange(callback:&nbsp;(value:&nbsp;string,&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;an&nbsp;item&nbsp;in&nbsp;the&nbsp;picker&nbsp;is&nbsp;selected.<br/>-&nbsp;**value**:&nbsp;text&nbsp;of&nbsp;the&nbsp;selected&nbsp;item.<br/>-&nbsp;**index**:&nbsp;index&nbsp;of&nbsp;the&nbsp;selected&nbsp;item. | 
+
+
+## Example
+
+
+```
+@Entry
+@Component
+struct TextPickerExample {
+  private select: number = 1
+  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4']
+
+  build() {
+    Column() {
+      TextPicker({range: this.fruits, selected: this.select})
+        .onChange((value: string, index: number) => {
+          console.info('Picker item changed, value: ' + value + ', index: ' + index)
+        })
+    }
+  }
+}
+```
+
+![en-us_image_0000001257058417](figures/en-us_image_0000001257058417.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md b/en/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
new file mode 100644
index 0000000000000000000000000000000000000000..a56349de2246384b00990476735a8876643a04ae
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
@@ -0,0 +1,94 @@
+# TextTimer
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+The **&lt;TextTimer&gt;** component supports custom time formats.
+
+
+## Required Permissions
+
+None
+
+
+## Child Components
+
+None
+
+
+## APIs
+
+TextTimer(options: { isCountDown?: boolean, count?: number, controller?: TextTimerController })
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | isCountDown | boolean | No | false | Whether&nbsp;to&nbsp;count&nbsp;down. | 
+  | count | number | No | 60000 | Countdown&nbsp;time,&nbsp;in&nbsp;milliseconds.&nbsp;This&nbsp;parameter&nbsp;is&nbsp;valid&nbsp;only&nbsp;when&nbsp;**isCountDown**&nbsp;is&nbsp;set&nbsp;to&nbsp;**true**.<br/>-&nbsp;If&nbsp;the&nbsp;value&nbsp;of&nbsp;**count**&nbsp;is&nbsp;less&nbsp;than&nbsp;or&nbsp;equal&nbsp;to&nbsp;0,&nbsp;the&nbsp;default&nbsp;value&nbsp;is&nbsp;used.<br/>-&nbsp;If&nbsp;the&nbsp;value&nbsp;of&nbsp;**count**&nbsp;is&nbsp;greater&nbsp;than&nbsp;0,&nbsp;it&nbsp;is&nbsp;used. | 
+  | controller | [TextTimerController](#texttimercontroller) | No | null | **&lt;TextTimer&gt;**&nbsp;controller. | 
+
+
+### TextTimerController
+
+Defines the controller for controlling the **&lt;TextTimer&gt;** component.
+
+  | Name | Description | 
+| -------- | -------- |
+| start() | Starts&nbsp;the&nbsp;timer. | 
+| pause() | Pauses&nbsp;the&nbsp;timer. | 
+| reset() | Resets&nbsp;the&nbsp;timer. | 
+
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| format | string | 'hh:mm:ss.ms' | Custom&nbsp;format.&nbsp;The&nbsp;value&nbsp;must&nbsp;contain&nbsp;at&nbsp;least&nbsp;one&nbsp;of&nbsp;the&nbsp;following&nbsp;keywords:&nbsp;**hh**,&nbsp;**mm**,&nbsp;**ss**,&nbsp;and&nbsp;**ms**. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onTimer(callback:&nbsp;(utc:&nbsp;number,&nbsp;elapsedTime:&nbsp;number)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;time&nbsp;text&nbsp;changes.<br/>**utc**:&nbsp;currently&nbsp;displayed&nbsp;time,&nbsp;in&nbsp;milliseconds.<br/>**elapsedTime**:&nbsp;elapsed&nbsp;time&nbsp;of&nbsp;the&nbsp;timer,&nbsp;in&nbsp;milliseconds. | 
+
+
+## Example
+
+
+```
+@Entry
+@Component
+struct TextTimerExample {
+  myTimerController: TextTimerController = new TextTimerController()
+  @State format: string = 'hh:mm:ss.ms'
+
+  build() {
+    Column() {
+      TextTimer({controller: this.myTimerController})
+        .format(this.format)
+        .fontColor(Color.Black)
+        .fontSize(this.textSize)
+        .onTimer((utc: number, elapsedTime: number) => {
+          console.info('textTimer notCountDown utc is:' + utc + ', elapsedTime: ' + elapsedTime)
+        })
+      Row() {
+        Button("start").onClick(() => {
+          this.myTimerController.start();
+        });
+        Button("pause").onClick(() => {
+          this.myTimerController.pause();
+        });
+        Button("reset").onClick(() => {
+          this.myTimerController.reset();
+        });
+      }
+    }
+  }
+}
+```
+
+
+![en-us_image_0000001257138345](figures/en-us_image_0000001257138345.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md b/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md
index 2d4f723cbbf7002e12748e661c13ad3f15345026..a969be1ae9968b38172a7a9d3f60bc1c2aa9e1be 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md
@@ -1,145 +1,56 @@
-# Toggle<a name="EN-US_TOPIC_0000001193075090"></a>
+# Toggle
 
->![](../../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.
 
-## Required Permissions<a name="section1562254617330"></a>
+> ![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.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section53281531154915"></a>
+
+## Child Components
 
 None
 
-## APIs<a name="section1383178131719"></a>
-
-Toggle\(options: \{ type: ToggleType, isOn?: boolean \}\)
-
--   Parameters
-
-    <a name="table15965125931318"></a>
-    <table><thead align="left"><tr id="row396518599132"><th class="cellrowborder" valign="top" width="16.110000000000003%" id="mcps1.1.6.1.1"><p id="p896516598135"><a name="p896516598135"></a><a name="p896516598135"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="15.770000000000003%" id="mcps1.1.6.1.2"><p id="p896535917137"><a name="p896535917137"></a><a name="p896535917137"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.22%" id="mcps1.1.6.1.3"><p id="p1196665918139"><a name="p1196665918139"></a><a name="p1196665918139"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.89%" id="mcps1.1.6.1.4"><p id="p696655912138"><a name="p696655912138"></a><a name="p696655912138"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="40.010000000000005%" id="mcps1.1.6.1.5"><p id="p296685911135"><a name="p296685911135"></a><a name="p296685911135"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row8966135991317"><td class="cellrowborder" valign="top" width="16.110000000000003%" headers="mcps1.1.6.1.1 "><p id="p189664596134"><a name="p189664596134"></a><a name="p189664596134"></a>type</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.770000000000003%" headers="mcps1.1.6.1.2 "><p id="p89669599135"><a name="p89669599135"></a><a name="p89669599135"></a><a href="#li544003914117">ToggleType</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.22%" headers="mcps1.1.6.1.3 "><p id="p9966155914130"><a name="p9966155914130"></a><a name="p9966155914130"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.89%" headers="mcps1.1.6.1.4 "><p id="p12966175961319"><a name="p12966175961319"></a><a name="p12966175961319"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.010000000000005%" headers="mcps1.1.6.1.5 "><p id="p16966259141314"><a name="p16966259141314"></a><a name="p16966259141314"></a>Type of the toggle.</p>
-    </td>
-    </tr>
-    <tr id="row189661259161317"><td class="cellrowborder" valign="top" width="16.110000000000003%" headers="mcps1.1.6.1.1 "><p id="p9966105910138"><a name="p9966105910138"></a><a name="p9966105910138"></a>isOn</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.770000000000003%" headers="mcps1.1.6.1.2 "><p id="p20966105911137"><a name="p20966105911137"></a><a name="p20966105911137"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.22%" headers="mcps1.1.6.1.3 "><p id="p8966659111317"><a name="p8966659111317"></a><a name="p8966659111317"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.89%" headers="mcps1.1.6.1.4 "><p id="p8966135913131"><a name="p8966135913131"></a><a name="p8966135913131"></a>false</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.010000000000005%" headers="mcps1.1.6.1.5 "><p id="p1196725917132"><a name="p1196725917132"></a><a name="p1196725917132"></a>Initial state of the toggle.</p>
-    <div class="note" id="note163011220111"><a name="note163011220111"></a><a name="note163011220111"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p15301822191119"><a name="p15301822191119"></a><a name="p15301822191119"></a>If <strong id="b26561317548"><a name="b26561317548"></a><a name="b26561317548"></a>isOn</strong> is not set during component creation, the selected state can be retained during component reuse. If <strong id="b14208183615513"><a name="b14208183615513"></a><a name="b14208183615513"></a>isOn</strong> is set, the selected state needs to be retained during component reuse after the selected state is recorded using an event method.</p>
-    </div></div>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   <a name="li544003914117"></a>ToggleType enums
-
-    <a name="table896716596134"></a>
-    <table><thead align="left"><tr id="row1796715991313"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p8967359171312"><a name="p8967359171312"></a><a name="p8967359171312"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p18967115912133"><a name="p18967115912133"></a><a name="p18967115912133"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row10967165914136"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p7967125910136"><a name="p7967125910136"></a><a name="p7967125910136"></a>Checkbox</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p14967175919135"><a name="p14967175919135"></a><a name="p14967175919135"></a>A checkbox is provided. The text setting of the child component does not take effect. If the text setting is required, you can place the <strong id="b36321156155017"><a name="b36321156155017"></a><a name="b36321156155017"></a>&lt;Text&gt;</strong> component and the current component in the layout component.</p>
-    </td>
-    </tr>
-    <tr id="row796775951312"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p6967165981311"><a name="p6967165981311"></a><a name="p6967165981311"></a>Button</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p596718591138"><a name="p596718591138"></a><a name="p596718591138"></a>A button is provided. If the text setting is available, the corresponding text content is displayed inside the button.</p>
-    </td>
-    </tr>
-    <tr id="row1967559141319"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p9967115911139"><a name="p9967115911139"></a><a name="p9967115911139"></a>Switch</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p99671759161314"><a name="p99671759161314"></a><a name="p99671759161314"></a>A switch is provided. The text setting of the child component does not take effect. If the text setting is required, you can place the <strong id="b15836205611516"><a name="b15836205611516"></a><a name="b15836205611516"></a>&lt;Text&gt;</strong> component and the current component in the layout component.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section1071518220395"></a>
-
-<a name="table18914191724710"></a>
-<table><thead align="left"><tr id="row199155176474"><th class="cellrowborder" valign="top" width="20.669999999999998%" id="mcps1.1.5.1.1"><p id="p291581754712"><a name="p291581754712"></a><a name="p291581754712"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="16.009999999999998%" id="mcps1.1.5.1.2"><p id="p4915817114714"><a name="p4915817114714"></a><a name="p4915817114714"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="13.61%" id="mcps1.1.5.1.3"><p id="p19152177470"><a name="p19152177470"></a><a name="p19152177470"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="49.71%" id="mcps1.1.5.1.4"><p id="p891514174477"><a name="p891514174477"></a><a name="p891514174477"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1591511764720"><td class="cellrowborder" valign="top" width="20.669999999999998%" headers="mcps1.1.5.1.1 "><p id="p11135191144819"><a name="p11135191144819"></a><a name="p11135191144819"></a>selectedColor</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.009999999999998%" headers="mcps1.1.5.1.2 "><p id="p1391581714712"><a name="p1391581714712"></a><a name="p1391581714712"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.61%" headers="mcps1.1.5.1.3 "><p id="p991581712473"><a name="p991581712473"></a><a name="p991581712473"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.71%" headers="mcps1.1.5.1.4 "><p id="p129151175476"><a name="p129151175476"></a><a name="p129151175476"></a>Background color of the toggle when it is enabled.</p>
-</td>
-</tr>
-<tr id="row49151817194712"><td class="cellrowborder" valign="top" width="20.669999999999998%" headers="mcps1.1.5.1.1 "><p id="p165591275487"><a name="p165591275487"></a><a name="p165591275487"></a>switchPointColor</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.009999999999998%" headers="mcps1.1.5.1.2 "><p id="p69154175478"><a name="p69154175478"></a><a name="p69154175478"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.61%" headers="mcps1.1.5.1.3 "><p id="p13915017114713"><a name="p13915017114713"></a><a name="p13915017114713"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.71%" headers="mcps1.1.5.1.4 "><p id="p5915141719475"><a name="p5915141719475"></a><a name="p5915141719475"></a>Color of the circular slider of the <strong id="b22191229125211"><a name="b22191229125211"></a><a name="b22191229125211"></a>Switch</strong> type.</p>
-<div class="note" id="note1974233484713"><a name="note1974233484713"></a><a name="note1974233484713"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p8447163864712"><a name="p8447163864712"></a><a name="p8447163864712"></a>This attribute is valid only when type is set to <strong id="b14623916161413"><a name="b14623916161413"></a><a name="b14623916161413"></a>ToggleType.Switch</strong>.</p>
-</div></div>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Events<a name="section449664852016"></a>
-
-<a name="table952mcpsimp"></a>
-<table><thead align="left"><tr id="row959mcpsimp"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p963mcpsimp"><a name="p963mcpsimp"></a><a name="p963mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p967mcpsimp"><a name="p967mcpsimp"></a><a name="p967mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row163041291058"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p63041596511"><a name="p63041596511"></a><a name="p63041596511"></a>onChange(callback: (isOn: boolean) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p18583122017217"><a name="p18583122017217"></a><a name="p18583122017217"></a>Triggered when the switch status changes.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section215304717201"></a>
+
+## APIs
+
+Toggle(options: { type: ToggleType, isOn?: boolean })
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | type | ToggleType | Yes | - | Type&nbsp;of&nbsp;the&nbsp;toggle. |
+  | isOn | boolean | No | false | Initial&nbsp;state&nbsp;of&nbsp;the&nbsp;toggle.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;If&nbsp;**isOn**&nbsp;is&nbsp;not&nbsp;set&nbsp;during&nbsp;component&nbsp;creation,&nbsp;the&nbsp;selected&nbsp;state&nbsp;can&nbsp;be&nbsp;retained&nbsp;during&nbsp;component&nbsp;reuse.&nbsp;If&nbsp;**isOn**&nbsp;is&nbsp;set,&nbsp;the&nbsp;selected&nbsp;state&nbsp;needs&nbsp;to&nbsp;be&nbsp;retained&nbsp;during&nbsp;component&nbsp;reuse&nbsp;after&nbsp;the&nbsp;selected&nbsp;state&nbsp;is&nbsp;recorded&nbsp;using&nbsp;an&nbsp;event&nbsp;method. |
+
+
+- ToggleType enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Checkbox | A&nbsp;checkbox&nbsp;is&nbsp;provided.&nbsp;The&nbsp;text&nbsp;setting&nbsp;of&nbsp;the&nbsp;child&nbsp;component&nbsp;does&nbsp;not&nbsp;take&nbsp;effect.&nbsp;If&nbsp;the&nbsp;text&nbsp;setting&nbsp;is&nbsp;required,&nbsp;you&nbsp;can&nbsp;place&nbsp;the&nbsp;**&lt;Text&gt;**&nbsp;component&nbsp;and&nbsp;the&nbsp;current&nbsp;component&nbsp;in&nbsp;the&nbsp;layout&nbsp;component. | 
+  | Button | A&nbsp;button&nbsp;is&nbsp;provided.&nbsp;If&nbsp;the&nbsp;text&nbsp;setting&nbsp;is&nbsp;available,&nbsp;the&nbsp;corresponding&nbsp;text&nbsp;content&nbsp;is&nbsp;displayed&nbsp;inside&nbsp;the&nbsp;button. | 
+  | Switch | A&nbsp;switch&nbsp;is&nbsp;provided.&nbsp;The&nbsp;text&nbsp;setting&nbsp;of&nbsp;the&nbsp;child&nbsp;component&nbsp;does&nbsp;not&nbsp;take&nbsp;effect.&nbsp;If&nbsp;the&nbsp;text&nbsp;setting&nbsp;is&nbsp;required,&nbsp;you&nbsp;can&nbsp;place&nbsp;the&nbsp;**&lt;Text&gt;**&nbsp;component&nbsp;and&nbsp;the&nbsp;current&nbsp;component&nbsp;in&nbsp;the&nbsp;layout&nbsp;component. | 
+
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| selectedColor | Color | - | Background&nbsp;color&nbsp;of&nbsp;the&nbsp;toggle&nbsp;when&nbsp;it&nbsp;is&nbsp;enabled. | 
+| switchPointColor | Color | - | Color&nbsp;of&nbsp;the&nbsp;circular&nbsp;slider&nbsp;of&nbsp;the&nbsp;**Switch**&nbsp;type.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;This&nbsp;attribute&nbsp;is&nbsp;valid&nbsp;only&nbsp;when&nbsp;type&nbsp;is&nbsp;set&nbsp;to&nbsp;**ToggleType.Switch**. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onChange(callback:&nbsp;(isOn:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;switch&nbsp;status&nbsp;changes. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -204,5 +115,4 @@ struct ToggleExample {
 }
 ```
 
-![](figures/toggle.gif)
-
+![en-us_image_0000001211898522](figures/en-us_image_0000001211898522.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components.md b/en/application-dev/reference/arkui-ts/ts-basic-components.md
index 4d256bb16eafa12eaac506f2f931431abc08a772..657554b6f2feb37910b9991e8ecb79cf0ec8812c 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components.md
@@ -1,37 +1,39 @@
-# Basic Components<a name="EN-US_TOPIC_0000001193075088"></a>
+# Basic Components
 
--   **[Blank](ts-basic-components-blank.md)**  
 
--   **[Button](ts-basic-components-button.md)**  
 
--   **[DataPanel](ts-basic-components-datapanel.md)**  
+- **[Blank](ts-basic-components-blank.md)**
 
--   **[Divider](ts-basic-components-divider.md)**  
+- **[Button](ts-basic-components-button.md)**
 
--   **[Gauge](ts-basic-components-gauge.md)**  
+- **[DataPanel](ts-basic-components-datapanel.md)**
 
--   **[Image](ts-basic-components-image.md)**  
+- **[DatePicker](ts-basic-components-datepicker.md)**
 
--   **[ImageAnimator](ts-basic-components-imageanimator.md)**  
+- **[Divider](ts-basic-components-divider.md)**
 
--   **[Marquee](ts-basic-components-marquee.md)**  
+- **[Image](ts-basic-components-image.md)**
 
--   **[Progress](ts-basic-components-progress.md)**  
+- **[ImageAnimator](ts-basic-components-imageanimator.md)**
 
--   **[QRCode](ts-basic-components-qrcode.md)**  
+- **[Progress](ts-basic-components-progress.md)**
 
--   **[Rating](ts-basic-components-rating.md)**  
+- **[QRCode](ts-basic-components-qrcode.md)**
 
--   **[Span](ts-basic-components-span.md)**  
+- **[Rating](ts-basic-components-rating.md)**
 
--   **[Slider](ts-basic-components-slider.md)**  
+- **[Span](ts-basic-components-span.md)**
 
--   **[Text](ts-basic-components-text.md)**  
+- **[Slider](ts-basic-components-slider.md)**
 
--   **[TextArea](ts-basic-components-textarea.md)**  
+- **[Text](ts-basic-components-text.md)**
 
--   **[TextInput](ts-basic-components-textinput.md)**  
+- **[TextArea](ts-basic-components-textarea.md)**
 
--   **[Toggle](ts-basic-components-toggle.md)**  
+- **[TextInput](ts-basic-components-textinput.md)**
 
+- **[TextPicker](ts-basic-components-textpicker.md)**
 
+- **[TextTimer](ts-basic-components-texttimer.md)**
+
+- **[Toggle](ts-basic-components-toggle.md)**
\ No newline at end of file
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
index ffef167c0a41c16297c6de534e027ff2418031c2..952bf6d555f0997770a6d2e3ca5e783ec51bfe5b 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
@@ -1,120 +1,43 @@
-# LongPressGesture<a name="EN-US_TOPIC_0000001237555117"></a>
+# LongPressGesture
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## APIs<a name="section710011405537"></a>
-
-LongPressGesture\(options?: \{ fingers?: number, repeat?: boolean, duration?: number \}\)
-
--   Parameters
-
-    <a name="table1392916196212"></a>
-    <table><thead align="left"><tr id="row19306191218"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p199307193217"><a name="p199307193217"></a><a name="p199307193217"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.180000000000001%" id="mcps1.1.6.1.2"><p id="p119302191128"><a name="p119302191128"></a><a name="p119302191128"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.82%" id="mcps1.1.6.1.3"><p id="p7930141911211"><a name="p7930141911211"></a><a name="p7930141911211"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.88%" id="mcps1.1.6.1.4"><p id="p1393020194219"><a name="p1393020194219"></a><a name="p1393020194219"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="40.01%" id="mcps1.1.6.1.5"><p id="p693061912210"><a name="p693061912210"></a><a name="p693061912210"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1093021911217"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p119307198218"><a name="p119307198218"></a><a name="p119307198218"></a>fingers</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.180000000000001%" headers="mcps1.1.6.1.2 "><p id="p129301719828"><a name="p129301719828"></a><a name="p129301719828"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.82%" headers="mcps1.1.6.1.3 "><p id="p893091913213"><a name="p893091913213"></a><a name="p893091913213"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.88%" headers="mcps1.1.6.1.4 "><p id="p421641117507"><a name="p421641117507"></a><a name="p421641117507"></a>1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.01%" headers="mcps1.1.6.1.5 "><p id="p176763225917"><a name="p176763225917"></a><a name="p176763225917"></a>Minimum number of fingers to trigger a long press gesture. The value ranges from 1 to 10.</p>
-    </td>
-    </tr>
-    <tr id="row126591442115811"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p10659342135818"><a name="p10659342135818"></a><a name="p10659342135818"></a>repeat</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.180000000000001%" headers="mcps1.1.6.1.2 "><p id="p465944219588"><a name="p465944219588"></a><a name="p465944219588"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.82%" headers="mcps1.1.6.1.3 "><p id="p965920427583"><a name="p965920427583"></a><a name="p965920427583"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.88%" headers="mcps1.1.6.1.4 "><p id="p3659104211582"><a name="p3659104211582"></a><a name="p3659104211582"></a>false</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.01%" headers="mcps1.1.6.1.5 "><p id="p156682039155912"><a name="p156682039155912"></a><a name="p156682039155912"></a>Whether to continuously trigger the event callback.</p>
-    </td>
-    </tr>
-    <tr id="row6281649195819"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p1281124917585"><a name="p1281124917585"></a><a name="p1281124917585"></a>duration</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.180000000000001%" headers="mcps1.1.6.1.2 "><p id="p528134912583"><a name="p528134912583"></a><a name="p528134912583"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.82%" headers="mcps1.1.6.1.3 "><p id="p028164919585"><a name="p028164919585"></a><a name="p028164919585"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.88%" headers="mcps1.1.6.1.4 "><p id="p42811149185811"><a name="p42811149185811"></a><a name="p42811149185811"></a>500</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.01%" headers="mcps1.1.6.1.5 "><p id="p6809144419592"><a name="p6809144419592"></a><a name="p6809144419592"></a>Minimum hold-down time, in ms.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Events<a name="section526892112537"></a>
-
-<a name="table135406579437"></a>
-<table><thead align="left"><tr id="row1154015719436"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p85411457184316"><a name="p85411457184316"></a><a name="p85411457184316"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p5541457194319"><a name="p5541457194319"></a><a name="p5541457194319"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row4541257114319"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p5541357194313"><a name="p5541357194313"></a><a name="p5541357194313"></a>onAction((event?: <a href="#li21621335144710">LongPressGestureEvent</a>) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p11541155710434"><a name="p11541155710434"></a><a name="p11541155710434"></a>Callback invoked when a long press gesture is recognized.</p>
-</td>
-</tr>
-<tr id="row2899841162916"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p15900174162916"><a name="p15900174162916"></a><a name="p15900174162916"></a>onActionEnd((event?: <a href="#li21621335144710">LongPressGestureEvent</a>) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p69001041172920"><a name="p69001041172920"></a><a name="p69001041172920"></a>Callback invoked when the finger used for a long press gesture is lift.</p>
-</td>
-</tr>
-<tr id="row13598134672914"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p85999460299"><a name="p85999460299"></a><a name="p85999460299"></a>onActionCancel(event: () =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p1459954652916"><a name="p1459954652916"></a><a name="p1459954652916"></a>Callback invoked when a tap cancellation event is received after a long press gesture is recognized.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li21621335144710"></a>LongPressGestureEvent attributes<sup>8+</sup>
-
-    Inherited from  [GestureEvent](ts-gesture-settings.md#table290mcpsimp).
-
-    <a name="table290mcpsimp"></a>
-    <table><thead align="left"><tr id="row296mcpsimp"><th class="cellrowborder" valign="top" width="20.09%" id="mcps1.1.4.1.1"><p id="p298mcpsimp"><a name="p298mcpsimp"></a><a name="p298mcpsimp"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.41%" id="mcps1.1.4.1.2"><p id="p300mcpsimp"><a name="p300mcpsimp"></a><a name="p300mcpsimp"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.5%" id="mcps1.1.4.1.3"><p id="p302mcpsimp"><a name="p302mcpsimp"></a><a name="p302mcpsimp"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row303mcpsimp"><td class="cellrowborder" valign="top" width="20.09%" headers="mcps1.1.4.1.1 "><p id="p305mcpsimp"><a name="p305mcpsimp"></a><a name="p305mcpsimp"></a>repeat</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.41%" headers="mcps1.1.4.1.2 "><p id="p307mcpsimp"><a name="p307mcpsimp"></a><a name="p307mcpsimp"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.5%" headers="mcps1.1.4.1.3 "><p id="p309mcpsimp"><a name="p309mcpsimp"></a><a name="p309mcpsimp"></a>Whether the event is repeated.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section16900453182718"></a>
+
+## APIs
+
+LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: number })
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | fingers | number | No | 1 | Minimum&nbsp;number&nbsp;of&nbsp;fingers&nbsp;to&nbsp;trigger&nbsp;a&nbsp;long&nbsp;press&nbsp;gesture.&nbsp;The&nbsp;value&nbsp;ranges&nbsp;from&nbsp;1&nbsp;to&nbsp;10. | 
+  | repeat | boolean | No | false | Whether&nbsp;to&nbsp;continuously&nbsp;trigger&nbsp;the&nbsp;event&nbsp;callback. | 
+  | duration | number | No | 500 | Minimum&nbsp;hold-down&nbsp;time,&nbsp;in&nbsp;ms. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onAction((event?:&nbsp;LongPressGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;long&nbsp;press&nbsp;gesture&nbsp;is&nbsp;recognized. | 
+| onActionEnd((event?:&nbsp;LongPressGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;the&nbsp;finger&nbsp;used&nbsp;for&nbsp;a&nbsp;long&nbsp;press&nbsp;gesture&nbsp;is&nbsp;lift. | 
+| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;tap&nbsp;cancellation&nbsp;event&nbsp;is&nbsp;received&nbsp;after&nbsp;a&nbsp;long&nbsp;press&nbsp;gesture&nbsp;is&nbsp;recognized. | 
+
+- LongPressGestureEvent<sup>8+</sup> attributes
+    | Name | Type | Description | 
+  | -------- | -------- | -------- |
+  | repeat | boolean | Whether&nbsp;the&nbsp;event&nbsp;is&nbsp;repeated. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -142,5 +65,4 @@ struct LongPressGestureExample {
 }
 ```
 
-![](figures/longpressgesture.gif)
-
+![en-us_image_0000001257058425](figures/en-us_image_0000001257058425.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
index 176c52260ab026e9a4d3e41eb7eb2355220170ea..9cf81839bae55d25d71ab296debbf4ea9c891283 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
@@ -1,223 +1,74 @@
-# PanGesture<a name="EN-US_TOPIC_0000001192595174"></a>
+# PanGesture
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## APIs<a name="section710011405537"></a>
-
-PanGesture\(options?: \{ fingers?: number, direction?: PanDirection, distance?: number \} |  [PanGestureOption](#section14214195212149)\)
-
--   <a name="li118312377710"></a>Parameters
-
-    <a name="table10575153161116"></a>
-    <table><thead align="left"><tr id="row1333463916149"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p14576115371112"><a name="p14576115371112"></a><a name="p14576115371112"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="15.959999999999999%" id="mcps1.1.6.1.2"><p id="p205771253151118"><a name="p205771253151118"></a><a name="p205771253151118"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.04%" id="mcps1.1.6.1.3"><p id="p18577053171114"><a name="p18577053171114"></a><a name="p18577053171114"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.72%" id="mcps1.1.6.1.4"><p id="p657719534113"><a name="p657719534113"></a><a name="p657719534113"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="46.17%" id="mcps1.1.6.1.5"><p id="p135781953191120"><a name="p135781953191120"></a><a name="p135781953191120"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1433516398146"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p165784532117"><a name="p165784532117"></a><a name="p165784532117"></a>fingers</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.959999999999999%" headers="mcps1.1.6.1.2 "><p id="p145782535119"><a name="p145782535119"></a><a name="p145782535119"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.04%" headers="mcps1.1.6.1.3 "><p id="p10578165318114"><a name="p10578165318114"></a><a name="p10578165318114"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.72%" headers="mcps1.1.6.1.4 "><p id="p5579165371112"><a name="p5579165371112"></a><a name="p5579165371112"></a>1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="46.17%" headers="mcps1.1.6.1.5 "><p id="p205796538113"><a name="p205796538113"></a><a name="p205796538113"></a>Minimum number of fingers to trigger a long press gesture. The value ranges from 1 to 10.</p>
-    </td>
-    </tr>
-    <tr id="row633543919148"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p757911530111"><a name="p757911530111"></a><a name="p757911530111"></a>direction</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.959999999999999%" headers="mcps1.1.6.1.2 "><p id="p9579153101115"><a name="p9579153101115"></a><a name="p9579153101115"></a><a href="#li204761598810">PanDirection</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.04%" headers="mcps1.1.6.1.3 "><p id="p7580125381120"><a name="p7580125381120"></a><a name="p7580125381120"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.72%" headers="mcps1.1.6.1.4 "><p id="p7580253131119"><a name="p7580253131119"></a><a name="p7580253131119"></a>All</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="46.17%" headers="mcps1.1.6.1.5 "><p id="p17580253111111"><a name="p17580253111111"></a><a name="p17580253111111"></a>Slide direction. The enumerated value supports the AND (&amp;) and OR (|) operations.</p>
-    </td>
-    </tr>
-    <tr id="row8335239171414"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p5581653121118"><a name="p5581653121118"></a><a name="p5581653121118"></a>distance</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.959999999999999%" headers="mcps1.1.6.1.2 "><p id="p1158185321113"><a name="p1158185321113"></a><a name="p1158185321113"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.04%" headers="mcps1.1.6.1.3 "><p id="p145815537119"><a name="p145815537119"></a><a name="p145815537119"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.72%" headers="mcps1.1.6.1.4 "><p id="p125817535116"><a name="p125817535116"></a><a name="p125817535116"></a>5.0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="46.17%" headers="mcps1.1.6.1.5 "><p id="p958285381110"><a name="p958285381110"></a><a name="p958285381110"></a>Minimum slide recognition distance, in vp.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li204761598810"></a>PanDirection enums
-
-    <a name="table1883711211687"></a>
-    <table><thead align="left"><tr id="row15837521586"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p78372213817"><a name="p78372213817"></a><a name="p78372213817"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p1383712211589"><a name="p1383712211589"></a><a name="p1383712211589"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row98375213817"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p188371221788"><a name="p188371221788"></a><a name="p188371221788"></a>All</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p683722111815"><a name="p683722111815"></a><a name="p683722111815"></a>All directions.</p>
-    </td>
-    </tr>
-    <tr id="row138371521585"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p18837162116811"><a name="p18837162116811"></a><a name="p18837162116811"></a>Horizontal</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p168372211186"><a name="p168372211186"></a><a name="p168372211186"></a>Horizontal slide.</p>
-    </td>
-    </tr>
-    <tr id="row6837102111810"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p283762118812"><a name="p283762118812"></a><a name="p283762118812"></a>Vertical</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1983710219819"><a name="p1983710219819"></a><a name="p1983710219819"></a>Vertical slide.</p>
-    </td>
-    </tr>
-    <tr id="row1783772113813"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p8837521883"><a name="p8837521883"></a><a name="p8837521883"></a>Left</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p083717212811"><a name="p083717212811"></a><a name="p083717212811"></a>Slide to the left.</p>
-    </td>
-    </tr>
-    <tr id="row1283711211785"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p483710211789"><a name="p483710211789"></a><a name="p483710211789"></a>Right</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1783711211887"><a name="p1783711211887"></a><a name="p1783711211887"></a>Slide to the right.</p>
-    </td>
-    </tr>
-    <tr id="row38371021980"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p188370211881"><a name="p188370211881"></a><a name="p188370211881"></a>Up</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p11837721381"><a name="p11837721381"></a><a name="p11837721381"></a>Slide up.</p>
-    </td>
-    </tr>
-    <tr id="row183710212086"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1683752115812"><a name="p1683752115812"></a><a name="p1683752115812"></a>Down</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p58375211985"><a name="p58375211985"></a><a name="p58375211985"></a>Slide down.</p>
-    </td>
-    </tr>
-    <tr id="row5837421689"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p683711211081"><a name="p683711211081"></a><a name="p683711211081"></a>None</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p188371221782"><a name="p188371221782"></a><a name="p188371221782"></a>Slide disabled.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-### PanGestureOption<a name="section14214195212149"></a>
-
-The attributes of the slide gesture recognizer can be dynamically modified using the  **PanGestureOption**  AP. This avoids modifying attributes through status variables, which will cause the UI to be refreshed.
-
-PanGestureOption\(options?: \{ fingers?: number, direction?: PanDirection, distance?: number \}\)
-
--   Parameters
-
-    For details, see the parameter description of  [PanGesture](#li118312377710).
-
-
--   APIs
-
-    <a name="table168621941175"></a>
-    <table><thead align="left"><tr id="row1786219416718"><th class="cellrowborder" valign="top" width="34.31%" id="mcps1.1.3.1.1"><p id="p5862948717"><a name="p5862948717"></a><a name="p5862948717"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="65.69%" id="mcps1.1.3.1.2"><p id="p486214416714"><a name="p486214416714"></a><a name="p486214416714"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1862134077"><td class="cellrowborder" valign="top" width="34.31%" headers="mcps1.1.3.1.1 "><p id="p118152361974"><a name="p118152361974"></a><a name="p118152361974"></a>setDirection(value: PanDirection)</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="65.69%" headers="mcps1.1.3.1.2 "><p id="p163641244113119"><a name="p163641244113119"></a><a name="p163641244113119"></a>Sets the direction.</p>
-    </td>
-    </tr>
-    <tr id="row0427191513714"><td class="cellrowborder" valign="top" width="34.31%" headers="mcps1.1.3.1.1 "><p id="p54287151573"><a name="p54287151573"></a><a name="p54287151573"></a>setDistance(value: number)</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="65.69%" headers="mcps1.1.3.1.2 "><p id="p24283151578"><a name="p24283151578"></a><a name="p24283151578"></a>Sets the distance.</p>
-    </td>
-    </tr>
-    <tr id="row145452115718"><td class="cellrowborder" valign="top" width="34.31%" headers="mcps1.1.3.1.1 "><p id="p204545213715"><a name="p204545213715"></a><a name="p204545213715"></a>setFingers(value: number)</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="65.69%" headers="mcps1.1.3.1.2 "><p id="p68029515817"><a name="p68029515817"></a><a name="p68029515817"></a>Sets the number of fingers.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Events<a name="section1410875314552"></a>
-
-<a name="table23971548825"></a>
-<table><thead align="left"><tr id="row17397194810210"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p139710488218"><a name="p139710488218"></a><a name="p139710488218"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p139714814218"><a name="p139714814218"></a><a name="p139714814218"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1239716482219"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p939715481627"><a name="p939715481627"></a><a name="p939715481627"></a>onActionStart(callback: (event?: <a href="#li21621335144710">PanGestureEvent</a>) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p19397248426"><a name="p19397248426"></a><a name="p19397248426"></a>Callback for the pan gestures recognition event.</p>
-</td>
-</tr>
-<tr id="row1839712484218"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p1839715484210"><a name="p1839715484210"></a><a name="p1839715484210"></a>onActionUpdate(callback: (event?: <a href="#li21621335144710">PanGestureEvent</a>) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p1939717489216"><a name="p1939717489216"></a><a name="p1939717489216"></a>Callback for the pan gesture movement event.</p>
-</td>
-</tr>
-<tr id="row73976481829"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p12397134811215"><a name="p12397134811215"></a><a name="p12397134811215"></a>onActionEnd(callback: (event?: <a href="#li21621335144710">PanGestureEvent</a>) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p10398148327"><a name="p10398148327"></a><a name="p10398148327"></a>Callback for fingers pick-up.</p>
-</td>
-</tr>
-<tr id="row639834815211"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p4398154814218"><a name="p4398154814218"></a><a name="p4398154814218"></a>onActionCancel(callback: () =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p33985481128"><a name="p33985481128"></a><a name="p33985481128"></a>Callback for the touch cancellation event.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li21621335144710"></a>PanGestureEvent attributes<sup>8+</sup>
-
-    Inherited from  [GestureEvent](ts-gesture-settings.md#table290mcpsimp).
-
-    <a name="table290mcpsimp"></a>
-    <table><thead align="left"><tr id="row296mcpsimp"><th class="cellrowborder" valign="top" width="20.09%" id="mcps1.1.4.1.1"><p id="p298mcpsimp"><a name="p298mcpsimp"></a><a name="p298mcpsimp"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.41%" id="mcps1.1.4.1.2"><p id="p300mcpsimp"><a name="p300mcpsimp"></a><a name="p300mcpsimp"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.5%" id="mcps1.1.4.1.3"><p id="p302mcpsimp"><a name="p302mcpsimp"></a><a name="p302mcpsimp"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row303mcpsimp"><td class="cellrowborder" valign="top" width="20.09%" headers="mcps1.1.4.1.1 "><p id="p312mcpsimp"><a name="p312mcpsimp"></a><a name="p312mcpsimp"></a>offsetX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.41%" headers="mcps1.1.4.1.2 "><p id="p314mcpsimp"><a name="p314mcpsimp"></a><a name="p314mcpsimp"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.5%" headers="mcps1.1.4.1.3 "><p id="p316mcpsimp"><a name="p316mcpsimp"></a><a name="p316mcpsimp"></a>Offset of the gesture event, in vp.</p>
-    </td>
-    </tr>
-    <tr id="row310mcpsimp"><td class="cellrowborder" valign="top" width="20.09%" headers="mcps1.1.4.1.1 "><p id="p319mcpsimp"><a name="p319mcpsimp"></a><a name="p319mcpsimp"></a>offsetY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.41%" headers="mcps1.1.4.1.2 "><p id="p321mcpsimp"><a name="p321mcpsimp"></a><a name="p321mcpsimp"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.5%" headers="mcps1.1.4.1.3 "><p id="p323mcpsimp"><a name="p323mcpsimp"></a><a name="p323mcpsimp"></a>Offset of the gesture event, in vp.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section16900453182718"></a>
+
+## APIs
+
+PanGesture(options?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOption](#pangestureoption))
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | fingers | number | No | 1 | Minimum&nbsp;number&nbsp;of&nbsp;fingers&nbsp;to&nbsp;trigger&nbsp;a&nbsp;long&nbsp;press&nbsp;gesture.&nbsp;The&nbsp;value&nbsp;ranges&nbsp;from&nbsp;1&nbsp;to&nbsp;10. | 
+  | direction | PanDirection | No | All | Slide&nbsp;direction.&nbsp;The&nbsp;enumerated&nbsp;value&nbsp;supports&nbsp;the&nbsp;AND&nbsp;(&amp;)&nbsp;and&nbsp;OR&nbsp;(\|)&nbsp;operations. | 
+  | distance | number | No | 5.0 | Minimum&nbsp;slide&nbsp;recognition&nbsp;distance,&nbsp;in&nbsp;vp. | 
+
+- PanDirection enums
+    | Name | Description | 
+  | -------- | -------- |
+  | All | All&nbsp;directions. | 
+  | Horizontal | Horizontal&nbsp;slide. | 
+  | Vertical | Vertical&nbsp;slide. | 
+  | Left | Slide&nbsp;to&nbsp;the&nbsp;left. | 
+  | Right | Slide&nbsp;to&nbsp;the&nbsp;right. | 
+  | Up | Slide&nbsp;up. | 
+  | Down | Slide&nbsp;down. | 
+  | None | Slide&nbsp;disabled. | 
+
+
+### PanGestureOption
+
+The attributes of the slide gesture recognizer can be dynamically modified using the **PanGestureOption** AP. This avoids modifying attributes through status variables, which will cause the UI to be refreshed.
+
+PanGestureOption(options?: { fingers?: number, direction?: PanDirection, distance?: number })
+
+- Parameters
+  For details, see **PanGesture**.
+
+- APIs
+    | Name | Description | 
+  | -------- | -------- |
+  | setDirection(value:&nbsp;PanDirection) | Sets&nbsp;the&nbsp;direction. | 
+  | setDistance(value:&nbsp;number) | Sets&nbsp;the&nbsp;distance. | 
+  | setFingers(value:&nbsp;number) | Sets&nbsp;the&nbsp;number&nbsp;of&nbsp;fingers. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onActionStart(callback:&nbsp;(event?:&nbsp;PanGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;for&nbsp;the&nbsp;pan&nbsp;gestures&nbsp;reorganization&nbsp;event. | 
+| onActionUpdate(callback:&nbsp;(event?:&nbsp;PanGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;pan&nbsp;gesture&nbsp;is&nbsp;recognized. | 
+| onActionEnd(callback:&nbsp;(event?:&nbsp;PanGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;the&nbsp;finger&nbsp;used&nbsp;for&nbsp;a&nbsp;pan&nbsp;gesture&nbsp;is&nbsp;lift. | 
+| onActionCancel(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;tap&nbsp;cancellation&nbsp;event&nbsp;is&nbsp;received&nbsp;after&nbsp;a&nbsp;pan&nbsp;gesture&nbsp;is&nbsp;recognized. | 
+
+- PanGestureEvent<sup>8+</sup> attributes
+    | Name | Type | Description | 
+  | -------- | -------- | -------- |
+  | offsetX | number | Offset&nbsp;of&nbsp;the&nbsp;gesture&nbsp;event,&nbsp;in&nbsp;vp. | 
+  | offsetY | number | Offset&nbsp;of&nbsp;the&nbsp;gesture&nbsp;event,&nbsp;in&nbsp;vp. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -249,5 +100,4 @@ struct PanGestureExample {
 }
 ```
 
-![](figures/pangesture.gif)
-
+![en-us_image_0000001256978371](figures/en-us_image_0000001256978371.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
index 0906de7217ea2259a8aad053fcc0f38ddd4e68f6..a3eab5de94e653faee5826987a619e45eb84faf9 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
@@ -1,128 +1,45 @@
-# PinchGesture<a name="EN-US_TOPIC_0000001237715101"></a>
+# PinchGesture
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## APIs<a name="section46581530142116"></a>
-
-PinchGesture\(options?: \{ fingers?: number, distance?: number \}\)
-
--   Parameters
-
-    <a name="table6433854121111"></a>
-    <table><thead align="left"><tr id="row1333463916149"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p543535461112"><a name="p543535461112"></a><a name="p543535461112"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="15.959999999999999%" id="mcps1.1.6.1.2"><p id="p24351054201110"><a name="p24351054201110"></a><a name="p24351054201110"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.04%" id="mcps1.1.6.1.3"><p id="p1043518544112"><a name="p1043518544112"></a><a name="p1043518544112"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.709999999999999%" id="mcps1.1.6.1.4"><p id="p17436954101117"><a name="p17436954101117"></a><a name="p17436954101117"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="45.18%" id="mcps1.1.6.1.5"><p id="p174361554111115"><a name="p174361554111115"></a><a name="p174361554111115"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1433516398146"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p3436454151117"><a name="p3436454151117"></a><a name="p3436454151117"></a>fingers</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.959999999999999%" headers="mcps1.1.6.1.2 "><p id="p17437185411115"><a name="p17437185411115"></a><a name="p17437185411115"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.04%" headers="mcps1.1.6.1.3 "><p id="p2437054181119"><a name="p2437054181119"></a><a name="p2437054181119"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.709999999999999%" headers="mcps1.1.6.1.4 "><p id="p44377543115"><a name="p44377543115"></a><a name="p44377543115"></a>2</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="45.18%" headers="mcps1.1.6.1.5 "><p id="p1843825411110"><a name="p1843825411110"></a><a name="p1843825411110"></a>Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5.</p>
-    </td>
-    </tr>
-    <tr id="row8335239171414"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p843855441111"><a name="p843855441111"></a><a name="p843855441111"></a>distance</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.959999999999999%" headers="mcps1.1.6.1.2 "><p id="p243965411110"><a name="p243965411110"></a><a name="p243965411110"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.04%" headers="mcps1.1.6.1.3 "><p id="p6439754141115"><a name="p6439754141115"></a><a name="p6439754141115"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.709999999999999%" headers="mcps1.1.6.1.4 "><p id="p174391754151110"><a name="p174391754151110"></a><a name="p174391754151110"></a>3.0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="45.18%" headers="mcps1.1.6.1.5 "><p id="p44401854141112"><a name="p44401854141112"></a><a name="p44401854141112"></a>Minimum recognition distance, in vp.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Events<a name="section1121514205616"></a>
-
-<a name="table135406579437"></a>
-<table><thead align="left"><tr id="row1154015719436"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p85411457184316"><a name="p85411457184316"></a><a name="p85411457184316"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p5541457194319"><a name="p5541457194319"></a><a name="p5541457194319"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row4541257114319"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p5541357194313"><a name="p5541357194313"></a><a name="p5541357194313"></a>onActionStart((event?: <a href="#li21621335144710">PinchGestureEvent</a>) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p11541155710434"><a name="p11541155710434"></a><a name="p11541155710434"></a>Callback invoked when a pinch gesture is recognized.</p>
-</td>
-</tr>
-<tr id="row54544191113"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p145591931117"><a name="p145591931117"></a><a name="p145591931117"></a>onActionUpdate((event?: <a href="#li21621335144710">PinchGestureEvent</a>) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p1455111961111"><a name="p1455111961111"></a><a name="p1455111961111"></a>Callback invoked during the movement of a pinch gesture.</p>
-</td>
-</tr>
-<tr id="row2899841162916"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p15900174162916"><a name="p15900174162916"></a><a name="p15900174162916"></a>onActionEnd((event?: <a href="#li21621335144710">PinchGestureEvent</a>) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p69001041172920"><a name="p69001041172920"></a><a name="p69001041172920"></a>Callback invoked when the finger used for a pinch gesture is lift.</p>
-</td>
-</tr>
-<tr id="row13598134672914"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p85999460299"><a name="p85999460299"></a><a name="p85999460299"></a>onActionCancel(event: () =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p1459954652916"><a name="p1459954652916"></a><a name="p1459954652916"></a>Callback invoked when a tap cancellation event is received after a pinch gesture is recognized.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li21621335144710"></a>PinchGestureEvent attributes<sup>8+</sup>
-
-    Inherited from  [GestureEvent](ts-gesture-settings.md#table290mcpsimp).
-
-    <a name="table290mcpsimp"></a>
-    <table><thead align="left"><tr id="row296mcpsimp"><th class="cellrowborder" valign="top" width="20.09%" id="mcps1.1.4.1.1"><p id="p298mcpsimp"><a name="p298mcpsimp"></a><a name="p298mcpsimp"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.41%" id="mcps1.1.4.1.2"><p id="p300mcpsimp"><a name="p300mcpsimp"></a><a name="p300mcpsimp"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.5%" id="mcps1.1.4.1.3"><p id="p302mcpsimp"><a name="p302mcpsimp"></a><a name="p302mcpsimp"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row303mcpsimp"><td class="cellrowborder" valign="top" width="20.09%" headers="mcps1.1.4.1.1 "><p id="p326mcpsimp"><a name="p326mcpsimp"></a><a name="p326mcpsimp"></a>scale</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.41%" headers="mcps1.1.4.1.2 "><p id="p328mcpsimp"><a name="p328mcpsimp"></a><a name="p328mcpsimp"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.5%" headers="mcps1.1.4.1.3 "><p id="p330mcpsimp"><a name="p330mcpsimp"></a><a name="p330mcpsimp"></a>Scale ratio. This attribute is used for the pinch gesture.</p>
-    </td>
-    </tr>
-    <tr id="row310mcpsimp"><td class="cellrowborder" valign="top" width="20.09%" headers="mcps1.1.4.1.1 "><p id="p1626610325382"><a name="p1626610325382"></a><a name="p1626610325382"></a>pinchCenterX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.41%" headers="mcps1.1.4.1.2 "><p id="p1526643203814"><a name="p1526643203814"></a><a name="p1526643203814"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.5%" headers="mcps1.1.4.1.3 "><p id="p4266163216388"><a name="p4266163216388"></a><a name="p4266163216388"></a>X coordinate of the center of the pinch, in px.</p>
-    </td>
-    </tr>
-    <tr id="row317mcpsimp"><td class="cellrowborder" valign="top" width="20.09%" headers="mcps1.1.4.1.1 "><p id="p19386163653814"><a name="p19386163653814"></a><a name="p19386163653814"></a>pinchCenterY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.41%" headers="mcps1.1.4.1.2 "><p id="p638693615380"><a name="p638693615380"></a><a name="p638693615380"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.5%" headers="mcps1.1.4.1.3 "><p id="p1238643673818"><a name="p1238643673818"></a><a name="p1238643673818"></a>Y coordinate of the center of the pinch, in px.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section16900453182718"></a>
+
+## APIs
+
+PinchGesture(options?: { fingers?: number, distance?: number })
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | fingers | number | No | 2 | Minimum&nbsp;number&nbsp;of&nbsp;fingers&nbsp;to&nbsp;trigger&nbsp;a&nbsp;pinch.&nbsp;The&nbsp;value&nbsp;ranges&nbsp;from&nbsp;2&nbsp;to&nbsp;5. | 
+  | distance | number | No | 3.0 | Minimum&nbsp;recognition&nbsp;distance,&nbsp;in&nbsp;vp. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onActionStart((event?:&nbsp;PinchGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;pinch&nbsp;gesture&nbsp;is&nbsp;recognized. | 
+| onActionUpdate((event?:&nbsp;PinchGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;during&nbsp;the&nbsp;movement&nbsp;of&nbsp;a&nbsp;pinch&nbsp;gesture. | 
+| onActionEnd((event?:&nbsp;PinchGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;the&nbsp;finger&nbsp;used&nbsp;for&nbsp;a&nbsp;pinch&nbsp;gesture&nbsp;is&nbsp;lift. | 
+| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;tap&nbsp;cancellation&nbsp;event&nbsp;is&nbsp;received&nbsp;after&nbsp;a&nbsp;pinch&nbsp;gesture&nbsp;is&nbsp;recognized. | 
+
+- PinchGestureEvent<sup>8+</sup> attributes
+    | Name | Type | Description | 
+  | -------- | -------- | -------- |
+  | scale | number | Scale&nbsp;ratio.&nbsp;This&nbsp;attribute&nbsp;is&nbsp;used&nbsp;for&nbsp;the&nbsp;pinch&nbsp;gesture. | 
+  | pinchCenterX | number | X-coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;of&nbsp;the&nbsp;pinch&nbsp;gesture,&nbsp;in&nbsp;px. | 
+  | pinchCenterY | number | Y-coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;of&nbsp;the&nbsp;pinch&nbsp;gesture,&nbsp;in&nbsp;px. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -152,5 +69,4 @@ struct PinchGestureExample {
 }
 ```
 
-![](figures/pinchgesture.gif)
-
+![en-us_image_0000001257058419](figures/en-us_image_0000001257058419.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
index a5b02f328549297bea12cb3f00c82afd3c77abfc..f8aba766277511d75bc2fa2b29bcb726e8c978e0 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
@@ -1,128 +1,43 @@
-# RotationGesture<a name="EN-US_TOPIC_0000001192595172"></a>
+# RotationGesture
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## APIs<a name="section46581530142116"></a>
-
-RotationGesture\(options?: \{ fingers?: number, angle?: number \}\)
-
--   Parameters
-
-    <a name="table932781715123"></a>
-    <table><thead align="left"><tr id="row1333463916149"><th class="cellrowborder" valign="top" width="13.639999999999999%" id="mcps1.1.6.1.1"><p id="p43281617131211"><a name="p43281617131211"></a><a name="p43281617131211"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.11%" id="mcps1.1.6.1.2"><p id="p10329101721217"><a name="p10329101721217"></a><a name="p10329101721217"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.27%" id="mcps1.1.6.1.3"><p id="p16330171731218"><a name="p16330171731218"></a><a name="p16330171731218"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.64%" id="mcps1.1.6.1.4"><p id="p143311717141217"><a name="p143311717141217"></a><a name="p143311717141217"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="53.339999999999996%" id="mcps1.1.6.1.5"><p id="p93324175121"><a name="p93324175121"></a><a name="p93324175121"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1433516398146"><td class="cellrowborder" valign="top" width="13.639999999999999%" headers="mcps1.1.6.1.1 "><p id="p4332191717121"><a name="p4332191717121"></a><a name="p4332191717121"></a>fingers</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.11%" headers="mcps1.1.6.1.2 "><p id="p1433318173127"><a name="p1433318173127"></a><a name="p1433318173127"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.27%" headers="mcps1.1.6.1.3 "><p id="p193349174125"><a name="p193349174125"></a><a name="p193349174125"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.64%" headers="mcps1.1.6.1.4 "><p id="p113355171122"><a name="p113355171122"></a><a name="p113355171122"></a>2</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="53.339999999999996%" headers="mcps1.1.6.1.5 "><p id="p833614175126"><a name="p833614175126"></a><a name="p833614175126"></a>Minimum number of fingers to trigger a rotation. The value ranges from 2 to 5.</p>
-    </td>
-    </tr>
-    <tr id="row8335239171414"><td class="cellrowborder" valign="top" width="13.639999999999999%" headers="mcps1.1.6.1.1 "><p id="p183371017151212"><a name="p183371017151212"></a><a name="p183371017151212"></a>angle</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.11%" headers="mcps1.1.6.1.2 "><p id="p1533851710127"><a name="p1533851710127"></a><a name="p1533851710127"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.27%" headers="mcps1.1.6.1.3 "><p id="p17339517201212"><a name="p17339517201212"></a><a name="p17339517201212"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.64%" headers="mcps1.1.6.1.4 "><p id="p8340171711125"><a name="p8340171711125"></a><a name="p8340171711125"></a>1.0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="53.339999999999996%" headers="mcps1.1.6.1.5 "><p id="p934101751214"><a name="p934101751214"></a><a name="p934101751214"></a>Minimum degree that can trigger the rotation gesture.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Events<a name="section171844635610"></a>
-
-<a name="table135406579437"></a>
-<table><thead align="left"><tr id="row1154015719436"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p85411457184316"><a name="p85411457184316"></a><a name="p85411457184316"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p5541457194319"><a name="p5541457194319"></a><a name="p5541457194319"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row4541257114319"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p5541357194313"><a name="p5541357194313"></a><a name="p5541357194313"></a>onActionStart((event?: <a href="#li21621335144710">RotationGestureEvent</a>) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p11541155710434"><a name="p11541155710434"></a><a name="p11541155710434"></a>Callback invoked when a rotation gesture is recognized.</p>
-</td>
-</tr>
-<tr id="row54544191113"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p145591931117"><a name="p145591931117"></a><a name="p145591931117"></a>onActionUpdate((event?: <a href="#li21621335144710">RotationGestureEvent</a>) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p1455111961111"><a name="p1455111961111"></a><a name="p1455111961111"></a>Callback invoked during the movement of the rotation gesture.</p>
-</td>
-</tr>
-<tr id="row2899841162916"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p15900174162916"><a name="p15900174162916"></a><a name="p15900174162916"></a>onActionEnd((event?: <a href="#li21621335144710">RotationGestureEvent</a>) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p69001041172920"><a name="p69001041172920"></a><a name="p69001041172920"></a>Callback invoked when the finger used for the rotation gesture is lift.</p>
-</td>
-</tr>
-<tr id="row13598134672914"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p85999460299"><a name="p85999460299"></a><a name="p85999460299"></a>onActionCancel(event: () =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p1459954652916"><a name="p1459954652916"></a><a name="p1459954652916"></a>Callback invoked when a tap cancellation event is received after the rotation gesture is recognized.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li21621335144710"></a>RotationGestureEvent attributes<sup>8+</sup>
-
-    Inherited from  [GestureEvent](ts-gesture-settings.md#table290mcpsimp).
-
-    <a name="table290mcpsimp"></a>
-    <table><thead align="left"><tr id="row296mcpsimp"><th class="cellrowborder" valign="top" width="20.09%" id="mcps1.1.4.1.1"><p id="p298mcpsimp"><a name="p298mcpsimp"></a><a name="p298mcpsimp"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.41%" id="mcps1.1.4.1.2"><p id="p300mcpsimp"><a name="p300mcpsimp"></a><a name="p300mcpsimp"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.5%" id="mcps1.1.4.1.3"><p id="p302mcpsimp"><a name="p302mcpsimp"></a><a name="p302mcpsimp"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row303mcpsimp"><td class="cellrowborder" valign="top" width="20.09%" headers="mcps1.1.4.1.1 "><p id="p333mcpsimp"><a name="p333mcpsimp"></a><a name="p333mcpsimp"></a>angle</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.41%" headers="mcps1.1.4.1.2 "><p id="p335mcpsimp"><a name="p335mcpsimp"></a><a name="p335mcpsimp"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.5%" headers="mcps1.1.4.1.3 "><p id="p337mcpsimp"><a name="p337mcpsimp"></a><a name="p337mcpsimp"></a>Rotation angle.</p>
-    </td>
-    </tr>
-    <tr id="row310mcpsimp"><td class="cellrowborder" valign="top" width="20.09%" headers="mcps1.1.4.1.1 "><p id="p1626610325382"><a name="p1626610325382"></a><a name="p1626610325382"></a>pinchCenterX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.41%" headers="mcps1.1.4.1.2 "><p id="p1526643203814"><a name="p1526643203814"></a><a name="p1526643203814"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.5%" headers="mcps1.1.4.1.3 "><p id="p4266163216388"><a name="p4266163216388"></a><a name="p4266163216388"></a>X coordinate of the center of the pinch, in px.</p>
-    </td>
-    </tr>
-    <tr id="row317mcpsimp"><td class="cellrowborder" valign="top" width="20.09%" headers="mcps1.1.4.1.1 "><p id="p19386163653814"><a name="p19386163653814"></a><a name="p19386163653814"></a>pinchCenterY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.41%" headers="mcps1.1.4.1.2 "><p id="p638693615380"><a name="p638693615380"></a><a name="p638693615380"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.5%" headers="mcps1.1.4.1.3 "><p id="p1238643673818"><a name="p1238643673818"></a><a name="p1238643673818"></a>Y coordinate of the center of the pinch, in px.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section16900453182718"></a>
+
+## APIs
+
+RotationGesture(options?: { fingers?: number, angle?: number })
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | fingers | number | No | 2 | Minimum&nbsp;number&nbsp;of&nbsp;fingers&nbsp;to&nbsp;trigger&nbsp;a&nbsp;rotation.&nbsp;The&nbsp;value&nbsp;ranges&nbsp;from&nbsp;2&nbsp;to&nbsp;5. | 
+  | angle | number | No | 1.0 | Minimum&nbsp;degree&nbsp;that&nbsp;can&nbsp;trigger&nbsp;the&nbsp;rotation&nbsp;gesture. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onActionStart((event?:&nbsp;RotationGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;rotation&nbsp;gesture&nbsp;is&nbsp;recognized. | 
+| onActionUpdate((event?:&nbsp;RotationGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;during&nbsp;the&nbsp;movement&nbsp;of&nbsp;the&nbsp;rotation&nbsp;gesture. | 
+| onActionEnd((event?:&nbsp;RotationGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;the&nbsp;finger&nbsp;used&nbsp;for&nbsp;the&nbsp;rotation&nbsp;gesture&nbsp;is&nbsp;lift. | 
+| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;tap&nbsp;cancellation&nbsp;event&nbsp;is&nbsp;received&nbsp;after&nbsp;the&nbsp;rotation&nbsp;gesture&nbsp;is&nbsp;recognized. | 
+
+- RotationGestureEvent<sup>8+</sup> attributes
+    | Name | Type | Description | 
+  | -------- | -------- | -------- |
+  | angle | number | Rotation&nbsp;angle. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -152,5 +67,4 @@ struct RotationGestureExample {
 }
 ```
 
-![](figures/rotationgesture.gif)
-
+![en-us_image_0000001256858403](figures/en-us_image_0000001256858403.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
index 77bb943dc66d8e4a410a25196678f4d914e1ef79..f4431bc7986b9ebe020d6629e8f26ee766b75259 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
@@ -1,144 +1,50 @@
-# SwipeGesture<a name="EN-US_TOPIC_0000001237475077"></a>
+# SwipeGesture
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This attribute is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This gesture is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## APIs<a name="section46581530142116"></a>
-
-SwipeGesture\(value?: \{ fingers?: number; direction?: SwipeDirection; speed?: number \}\)
-
--   Parameters
-
-    <a name="table932781715123"></a>
-    <table><thead align="left"><tr id="row1333463916149"><th class="cellrowborder" valign="top" width="13.62%" id="mcps1.1.6.1.1"><p id="p43281617131211"><a name="p43281617131211"></a><a name="p43281617131211"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="17.16%" id="mcps1.1.6.1.2"><p id="p10329101721217"><a name="p10329101721217"></a><a name="p10329101721217"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="6.239999999999999%" id="mcps1.1.6.1.3"><p id="p16330171731218"><a name="p16330171731218"></a><a name="p16330171731218"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.4%" id="mcps1.1.6.1.4"><p id="p143311717141217"><a name="p143311717141217"></a><a name="p143311717141217"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="42.58%" id="mcps1.1.6.1.5"><p id="p93324175121"><a name="p93324175121"></a><a name="p93324175121"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1433516398146"><td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.1 "><p id="p4332191717121"><a name="p4332191717121"></a><a name="p4332191717121"></a>fingers</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.16%" headers="mcps1.1.6.1.2 "><p id="p1433318173127"><a name="p1433318173127"></a><a name="p1433318173127"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.239999999999999%" headers="mcps1.1.6.1.3 "><p id="p193349174125"><a name="p193349174125"></a><a name="p193349174125"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.4%" headers="mcps1.1.6.1.4 "><p id="p113355171122"><a name="p113355171122"></a><a name="p113355171122"></a>1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.58%" headers="mcps1.1.6.1.5 "><p id="p833614175126"><a name="p833614175126"></a><a name="p833614175126"></a>Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.</p>
-    </td>
-    </tr>
-    <tr id="row8335239171414"><td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.1 "><p id="p183371017151212"><a name="p183371017151212"></a><a name="p183371017151212"></a>direction</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.16%" headers="mcps1.1.6.1.2 "><p id="p1533851710127"><a name="p1533851710127"></a><a name="p1533851710127"></a><a href="#li1176517215161">SwipeDirection</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.239999999999999%" headers="mcps1.1.6.1.3 "><p id="p17339517201212"><a name="p17339517201212"></a><a name="p17339517201212"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.4%" headers="mcps1.1.6.1.4 "><p id="p8340171711125"><a name="p8340171711125"></a><a name="p8340171711125"></a>SwipeDirection.All</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.58%" headers="mcps1.1.6.1.5 "><p id="p133468582313"><a name="p133468582313"></a><a name="p133468582313"></a>Swipe direction</p>
-    </td>
-    </tr>
-    <tr id="row1054013952317"><td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.1 "><p id="p16541123902317"><a name="p16541123902317"></a><a name="p16541123902317"></a>speed</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.16%" headers="mcps1.1.6.1.2 "><p id="p35412396232"><a name="p35412396232"></a><a name="p35412396232"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.239999999999999%" headers="mcps1.1.6.1.3 "><p id="p17541133962311"><a name="p17541133962311"></a><a name="p17541133962311"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.4%" headers="mcps1.1.6.1.4 "><p id="p13541739112313"><a name="p13541739112313"></a><a name="p13541739112313"></a>100</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.58%" headers="mcps1.1.6.1.5 "><p id="p7542039182314"><a name="p7542039182314"></a><a name="p7542039182314"></a>Minimum speed of the swipe operation (100 vp/s).</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li1176517215161"></a>SwipeDirection enums
-
-    <a name="table3452114216394"></a>
-    <table><thead align="left"><tr id="row245219426397"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p545244283914"><a name="p545244283914"></a><a name="p545244283914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p2452114203917"><a name="p2452114203917"></a><a name="p2452114203917"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6452144218390"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p34529427398"><a name="p34529427398"></a><a name="p34529427398"></a>All</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p9757214162714"><a name="p9757214162714"></a><a name="p9757214162714"></a>All directions.</p>
-    </td>
-    </tr>
-    <tr id="row12452184217398"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p144813311274"><a name="p144813311274"></a><a name="p144813311274"></a>Horizontal</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p745215426391"><a name="p745215426391"></a><a name="p745215426391"></a>Horizontal direction.</p>
-    </td>
-    </tr>
-    <tr id="row9452134213392"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p195968892719"><a name="p195968892719"></a><a name="p195968892719"></a>Vertical</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p154533425394"><a name="p154533425394"></a><a name="p154533425394"></a>Vertical direction.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Events<a name="section171844635610"></a>
-
-<a name="table135406579437"></a>
-<table><thead align="left"><tr id="row1154015719436"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p85411457184316"><a name="p85411457184316"></a><a name="p85411457184316"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p5541457194319"><a name="p5541457194319"></a><a name="p5541457194319"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row4541257114319"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p5541357194313"><a name="p5541357194313"></a><a name="p5541357194313"></a>onAction(callback:(event?: <a href="#li497431115208">SwipeGestureEvent</a>) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p11541155710434"><a name="p11541155710434"></a><a name="p11541155710434"></a>Callback for the swipe gesture recognition event.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li497431115208"></a>SwipeGestureEvent attributes
-
-    Inherited from  [GestureEvent](ts-gesture-settings.md#table290mcpsimp).
-
-    <a name="table15580161813418"></a>
-    <table><thead align="left"><tr id="row45806181744"><th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.1.4.1.1"><p id="p165801018649"><a name="p165801018649"></a><a name="p165801018649"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.1.4.1.2"><p id="p9580131818410"><a name="p9580131818410"></a><a name="p9580131818410"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.1.4.1.3"><p id="p858010183417"><a name="p858010183417"></a><a name="p858010183417"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row25801186415"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p358018181444"><a name="p358018181444"></a><a name="p358018181444"></a>angle</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.2 "><p id="p6580161813416"><a name="p6580161813416"></a><a name="p6580161813416"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.3 "><p id="p10581201811415"><a name="p10581201811415"></a><a name="p10581201811415"></a>Angle of the swipe gesture.</p>
-    </td>
-    </tr>
-    <tr id="row2581518249"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p135816181040"><a name="p135816181040"></a><a name="p135816181040"></a>speed</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.2 "><p id="p1258116186414"><a name="p1258116186414"></a><a name="p1258116186414"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.3 "><p id="p758191810414"><a name="p758191810414"></a><a name="p758191810414"></a>Speed of the swipe gesture.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section16900453182718"></a>
+
+## APIs
+
+SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: number })
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | fingers | number | No | 1 | Minimum&nbsp;number&nbsp;of&nbsp;fingers&nbsp;to&nbsp;trigger&nbsp;a&nbsp;swipe&nbsp;gesture.&nbsp;The&nbsp;value&nbsp;ranges&nbsp;from&nbsp;1&nbsp;to&nbsp;10. | 
+  | direction | SwipeDirection | No | SwipeDirection.All | Swipe&nbsp;direction. | 
+  | speed | number | No | 100 | Minimum&nbsp;speed&nbsp;of&nbsp;the&nbsp;swipe&nbsp;gesture&nbsp;(100&nbsp;vp/s). | 
+
+- SwipeDirection enums
+    | Name | Description | 
+  | -------- | -------- |
+  | All | All&nbsp;directions. | 
+  | Horizontal | Horizontal&nbsp;direction. | 
+  | Vertical | Vertical&nbsp;direction. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onAction(callback:(event?:&nbsp;SwipeGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;swipe&nbsp;gesture&nbsp;is&nbsp;recognized. | 
+
+
+- SwipeGestureEvent attributes
+    | Name | Type | Description | 
+  | -------- | -------- | -------- |
+  | angle | number | Angle&nbsp;of&nbsp;the&nbsp;swipe&nbsp;gesture. | 
+  | speed | number | Speed&nbsp;of&nbsp;the&nbsp;swipe&nbsp;gesture. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -149,8 +55,8 @@ struct SwipeGestureExample {
 
   build() {
     Column() {
-      Text("SwipGesture speed ： " + this.speed)
-      Text("SwipGesture angle ： " + this.rotateAngle)
+      Text("SwipGesture speed : " + this.speed)
+      Text("SwipGesture angle : " + this.rotateAngle)
     }
     .position({x: 80, y: 200})
     .border({width:2})
@@ -167,5 +73,4 @@ struct SwipeGestureExample {
 }
 ```
 
-![](figures/gif-0.gif)
-
+![en-us_image_0000001257138365](figures/en-us_image_0000001257138365.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
index 79dc179371733d521140bff5f07045ea09372e82..f0e6dd76bd653d1685b80e8e67b09b89cf4c18cf 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
@@ -1,85 +1,35 @@
-# TapGesture<a name="EN-US_TOPIC_0000001237475081"></a>
+# TapGesture
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## APIs<a name="section11129153920518"></a>
-
-TapGesture\(options?: \{ count?: number, fingers?: number \}\)
-
--   Parameters
-
-    <a name="table1392916196212"></a>
-    <table><thead align="left"><tr id="row19306191218"><th class="cellrowborder" valign="top" width="14.330000000000002%" id="mcps1.1.6.1.1"><p id="p199307193217"><a name="p199307193217"></a><a name="p199307193217"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.799999999999999%" id="mcps1.1.6.1.2"><p id="p119302191128"><a name="p119302191128"></a><a name="p119302191128"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.58%" id="mcps1.1.6.1.3"><p id="p7930141911211"><a name="p7930141911211"></a><a name="p7930141911211"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="8.219999999999999%" id="mcps1.1.6.1.4"><p id="p1393020194219"><a name="p1393020194219"></a><a name="p1393020194219"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="51.07000000000001%" id="mcps1.1.6.1.5"><p id="p693061912210"><a name="p693061912210"></a><a name="p693061912210"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1238121310306"><td class="cellrowborder" valign="top" width="14.330000000000002%" headers="mcps1.1.6.1.1 "><p id="p938113193017"><a name="p938113193017"></a><a name="p938113193017"></a>count</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.799999999999999%" headers="mcps1.1.6.1.2 "><p id="p23861373017"><a name="p23861373017"></a><a name="p23861373017"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.58%" headers="mcps1.1.6.1.3 "><p id="p183814131307"><a name="p183814131307"></a><a name="p183814131307"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.219999999999999%" headers="mcps1.1.6.1.4 "><p id="p163831312306"><a name="p163831312306"></a><a name="p163831312306"></a>1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="51.07000000000001%" headers="mcps1.1.6.1.5 "><p id="p103814137301"><a name="p103814137301"></a><a name="p103814137301"></a>Number of consecutive taps. If this parameter is set to a value less than <strong id="b137681238173218"><a name="b137681238173218"></a><a name="b137681238173218"></a>1</strong>, the default value will be used.</p>
-    <div class="note" id="note1962422343316"><a name="note1962422343316"></a><a name="note1962422343316"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p1262452373311"><a name="p1262452373311"></a><a name="p1262452373311"></a>If multi-tap is configured, the timeout interval between a lift and the next tap is 300 ms.</p>
-    </div></div>
-    </td>
-    </tr>
-    <tr id="row1093021911217"><td class="cellrowborder" valign="top" width="14.330000000000002%" headers="mcps1.1.6.1.1 "><p id="p119307198218"><a name="p119307198218"></a><a name="p119307198218"></a>fingers</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.799999999999999%" headers="mcps1.1.6.1.2 "><p id="p129301719828"><a name="p129301719828"></a><a name="p129301719828"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.58%" headers="mcps1.1.6.1.3 "><p id="p893091913213"><a name="p893091913213"></a><a name="p893091913213"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.219999999999999%" headers="mcps1.1.6.1.4 "><p id="p421641117507"><a name="p421641117507"></a><a name="p421641117507"></a>1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="51.07000000000001%" headers="mcps1.1.6.1.5 "><p id="p1791619538303"><a name="p1791619538303"></a><a name="p1791619538303"></a>Minimum number of fingers to trigger a tap. The value ranges from 1 to 10.</p>
-    <div class="note" id="note439342719312"><a name="note439342719312"></a><a name="note439342719312"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p116781255143118"><a name="p116781255143118"></a><a name="p116781255143118"></a>1. When multi-finger is configured, if the number of fingers used for tap does not reach the specified number within 300 ms after the first finger is tapped, the gesture fails to be recognized.</p>
-    <p id="p939311275319"><a name="p939311275319"></a><a name="p939311275319"></a>2. Gesture recognition fails if the number of fingers used for tap exceeds the configured number.</p>
-    </div></div>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Events<a name="section23760590517"></a>
-
-<a name="table135406579437"></a>
-<table><thead align="left"><tr id="row1154015719436"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p85411457184316"><a name="p85411457184316"></a><a name="p85411457184316"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p5541457194319"><a name="p5541457194319"></a><a name="p5541457194319"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row4541257114319"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p5541357194313"><a name="p5541357194313"></a><a name="p5541357194313"></a>onAction((event?: <a href="#li21621335144710">TapGestureEvent</a>) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p11541155710434"><a name="p11541155710434"></a><a name="p11541155710434"></a>Callback invoked when a tap gesture is recognized.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li21621335144710"></a>TapGestureEvent attributes<sup>8+</sup>
-
-    Inherited from  [GestureEvent](ts-gesture-settings.md#table290mcpsimp).
-
-
-## Example<a name="section16900453182718"></a>
+
+## APIs
+
+TapGesture(options?: { count?: number, fingers?: number })
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | count | number | No | 1 | Number&nbsp;of&nbsp;consecutive&nbsp;taps.&nbsp;If&nbsp;this&nbsp;parameter&nbsp;is&nbsp;set&nbsp;to&nbsp;a&nbsp;value&nbsp;less&nbsp;than&nbsp;**1**,&nbsp;the&nbsp;default&nbsp;value&nbsp;will&nbsp;be&nbsp;used.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;If&nbsp;multi-tap&nbsp;is&nbsp;configured,&nbsp;the&nbsp;timeout&nbsp;interval&nbsp;between&nbsp;a&nbsp;lift&nbsp;and&nbsp;the&nbsp;next&nbsp;tap&nbsp;is&nbsp;300&nbsp;ms. | 
+  | fingers | number | No | 1 | Minimum&nbsp;number&nbsp;of&nbsp;fingers&nbsp;to&nbsp;trigger&nbsp;a&nbsp;tap.&nbsp;The&nbsp;value&nbsp;ranges&nbsp;from&nbsp;1&nbsp;to&nbsp;10.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;1.&nbsp;When&nbsp;multi-finger&nbsp;is&nbsp;configured,&nbsp;if&nbsp;the&nbsp;number&nbsp;of&nbsp;fingers&nbsp;used&nbsp;for&nbsp;tap&nbsp;does&nbsp;not&nbsp;reach&nbsp;the&nbsp;specified&nbsp;number&nbsp;within&nbsp;300&nbsp;ms&nbsp;after&nbsp;the&nbsp;first&nbsp;finger&nbsp;is&nbsp;tapped,&nbsp;the&nbsp;gesture&nbsp;fails&nbsp;to&nbsp;be&nbsp;recognized.<br/>>&nbsp;<br/>>&nbsp;2.&nbsp;Gesture&nbsp;recognition&nbsp;fails&nbsp;if&nbsp;the&nbsp;number&nbsp;of&nbsp;fingers&nbsp;used&nbsp;for&nbsp;tap&nbsp;exceeds&nbsp;the&nbsp;configured&nbsp;number. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onAction((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;tap&nbsp;gesture&nbsp;is&nbsp;recognized. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -103,5 +53,4 @@ struct TapGestureExample {
 }
 ```
 
-![](figures/tapgesture.gif)
-
+![en-us_image_0000001256858417](figures/en-us_image_0000001256858417.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures.md
index 1dca7a6b84f0ef88837ed77e3530986a78a8f139..25046a17e29a8eb3effb693fcc1b698be32d24dd 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-gestures.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures.md
@@ -1,15 +1,15 @@
-# Basic Gestures<a name="EN-US_TOPIC_0000001192915098"></a>
+# Basic Gestures
 
--   **[TapGesture](ts-basic-gestures-tapgesture.md)**  
 
--   **[LongPressGesture](ts-basic-gestures-longpressgesture.md)**  
 
--   **[PanGesture](ts-basic-gestures-pangesture.md)**  
+- **[TapGesture](ts-basic-gestures-tapgesture.md)**
 
--   **[PinchGesture](ts-basic-gestures-pinchgesture.md)**  
+- **[LongPressGesture](ts-basic-gestures-longpressgesture.md)**
 
--   **[RotationGesture](ts-basic-gestures-rotationgesture.md)**  
+- **[PanGesture](ts-basic-gestures-pangesture.md)**
 
--   **[SwipeGesture](ts-basic-gestures-swipegesture.md)**  
+- **[PinchGesture](ts-basic-gestures-pinchgesture.md)**
 
+- **[RotationGesture](ts-basic-gestures-rotationgesture.md)**
 
+- **[SwipeGesture](ts-basic-gestures-swipegesture.md)**
\ No newline at end of file
diff --git a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
index 542885a1c19801d87cb3a26899ecd6d041aebf93..75926592770220faf93644706762de670b11feaf 100644
--- a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
@@ -1,274 +1,64 @@
-# CanvasRenderingContext2D<a name="EN-US_TOPIC_0000001193075104"></a>
-
->![](../../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.
-
-Use  **RenderingContext**  to draw rectangles, text, images, and other objects on a canvas.
-
-## APIs<a name="section15647101282420"></a>
-
-CanvasRenderingContext2D\(setting: RenderingContextSettings\)
-
--   Parameters
-
-    <a name="table193606194544"></a>
-    <table><thead align="left"><tr id="row536071910541"><th class="cellrowborder" valign="top" width="12.540000000000001%" id="mcps1.1.6.1.1"><p id="p436112199544"><a name="p436112199544"></a><a name="p436112199544"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.150000000000002%" id="mcps1.1.6.1.2"><p id="p19361319115410"><a name="p19361319115410"></a><a name="p19361319115410"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.49%" id="mcps1.1.6.1.3"><p id="p9361201975417"><a name="p9361201975417"></a><a name="p9361201975417"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.6%" id="mcps1.1.6.1.4"><p id="p43611199542"><a name="p43611199542"></a><a name="p43611199542"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="36.22%" id="mcps1.1.6.1.5"><p id="p1136141975419"><a name="p1136141975419"></a><a name="p1136141975419"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row10361101915545"><td class="cellrowborder" valign="top" width="12.540000000000001%" headers="mcps1.1.6.1.1 "><p id="p1361119155417"><a name="p1361119155417"></a><a name="p1361119155417"></a>setting</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.150000000000002%" headers="mcps1.1.6.1.2 "><p id="p8361181913548"><a name="p8361181913548"></a><a name="p8361181913548"></a><a href="#section189411348141711">RenderingContextSettings</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.49%" headers="mcps1.1.6.1.3 "><p id="p153611119195411"><a name="p153611119195411"></a><a name="p153611119195411"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.6%" headers="mcps1.1.6.1.4 "><p id="p1436114193546"><a name="p1436114193546"></a><a name="p1436114193546"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p328155017218"><a name="p328155017218"></a><a name="p328155017218"></a>See <a href="#section189411348141711">RenderingContextSettings</a>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-### RenderingContextSettings<a name="section189411348141711"></a>
-
-RenderingContextSettings\(antialias?: bool\)
-
-Configures the settings of a  **CanvasRenderingContext2D**  object, including whether to enable antialiasing.
-
--   Parameters
-
-    <a name="table11183414541"></a>
-    <table><thead align="left"><tr id="row819144195410"><th class="cellrowborder" valign="top" width="12.540000000000001%" id="mcps1.1.6.1.1"><p id="p11191141115417"><a name="p11191141115417"></a><a name="p11191141115417"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.150000000000002%" id="mcps1.1.6.1.2"><p id="p21912416548"><a name="p21912416548"></a><a name="p21912416548"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.49%" id="mcps1.1.6.1.3"><p id="p19191141125419"><a name="p19191141125419"></a><a name="p19191141125419"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.6%" id="mcps1.1.6.1.4"><p id="p101911418548"><a name="p101911418548"></a><a name="p101911418548"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="36.22%" id="mcps1.1.6.1.5"><p id="p6192417542"><a name="p6192417542"></a><a name="p6192417542"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row18191341135410"><td class="cellrowborder" valign="top" width="12.540000000000001%" headers="mcps1.1.6.1.1 "><p id="p7200416545"><a name="p7200416545"></a><a name="p7200416545"></a>antialias</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.150000000000002%" headers="mcps1.1.6.1.2 "><p id="p620184115418"><a name="p620184115418"></a><a name="p620184115418"></a>bool</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.49%" headers="mcps1.1.6.1.3 "><p id="p1220154175416"><a name="p1220154175416"></a><a name="p1220154175416"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.6%" headers="mcps1.1.6.1.4 "><p id="p42074112544"><a name="p42074112544"></a><a name="p42074112544"></a>false</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p120104120547"><a name="p120104120547"></a><a name="p120104120547"></a>Whether antialiasing is enabled.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section122871125229"></a>
-
-<a name="table5448mcpsimp"></a>
-<table><thead align="left"><tr id="row5456mcpsimp"><th class="cellrowborder" valign="top" width="13.951395139513952%" id="mcps1.1.5.1.1"><p id="p5458mcpsimp"><a name="p5458mcpsimp"></a><a name="p5458mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="26.72267226722672%" id="mcps1.1.5.1.2"><p id="p5460mcpsimp"><a name="p5460mcpsimp"></a><a name="p5460mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="9.69096909690969%" id="mcps1.1.5.1.3"><p id="p138236401285"><a name="p138236401285"></a><a name="p138236401285"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="49.63496349634964%" id="mcps1.1.5.1.4"><p id="p5466mcpsimp"><a name="p5466mcpsimp"></a><a name="p5466mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row5467mcpsimp"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p194373617255"><a name="p194373617255"></a><a name="p194373617255"></a><a href="#section14391838151316">fillStyle</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.72267226722672%" headers="mcps1.1.5.1.2 "><p id="p5471mcpsimp"><a name="p5471mcpsimp"></a><a name="p5471mcpsimp"></a>&lt;color&gt; | <a href="ts-components-canvas-canvasgradient.md">CanvasGradient</a> | <a href="#section146853345417">CanvasPattern</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="9.69096909690969%" headers="mcps1.1.5.1.3 "><p id="p128231040182817"><a name="p128231040182817"></a><a name="p128231040182817"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p5477mcpsimp"><a name="p5477mcpsimp"></a><a name="p5477mcpsimp"></a>Style to fill an area.</p>
-<a name="ul139315155296"></a><a name="ul139315155296"></a><ul id="ul139315155296"><li>When the type is <strong id="b350212423212"><a name="b350212423212"></a><a name="b350212423212"></a>&lt;color&gt;</strong>, this parameter indicates the color of the filling area.</li><li>When the type is <strong id="b196551478217"><a name="b196551478217"></a><a name="b196551478217"></a>CanvasGradient</strong>, this parameter indicates a gradient object, which is created using the <a href="#section10822717373">createLinearGradient</a> method.</li><li>When the type is <strong id="b17834162152216"><a name="b17834162152216"></a><a name="b17834162152216"></a>CanvasPattern</strong>, use the <a href="#section1643216163371">createPattern</a> method to create a pattern.</li></ul>
-</td>
-</tr>
-<tr id="row5478mcpsimp"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p5480mcpsimp"><a name="p5480mcpsimp"></a><a name="p5480mcpsimp"></a><a href="#section104861220181415">lineWidth</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.72267226722672%" headers="mcps1.1.5.1.2 "><p id="p19243401305"><a name="p19243401305"></a><a name="p19243401305"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.69096909690969%" headers="mcps1.1.5.1.3 "><p id="p88231840142814"><a name="p88231840142814"></a><a name="p88231840142814"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p5488mcpsimp"><a name="p5488mcpsimp"></a><a name="p5488mcpsimp"></a>Line width.</p>
-</td>
-</tr>
-<tr id="row1930464616243"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p9305154611244"><a name="p9305154611244"></a><a name="p9305154611244"></a><a href="#section1216741261620">strokeStyle</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.72267226722672%" headers="mcps1.1.5.1.2 "><p id="p143052463243"><a name="p143052463243"></a><a name="p143052463243"></a>&lt;color&gt; | <a href="ts-components-canvas-canvasgradient.md">CanvasGradient</a> | <a href="#section146853345417">CanvasPattern</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="9.69096909690969%" headers="mcps1.1.5.1.3 "><p id="p103051746202413"><a name="p103051746202413"></a><a name="p103051746202413"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p1431612011267"><a name="p1431612011267"></a><a name="p1431612011267"></a>Stroke style.</p>
-<a name="ul53168018260"></a><a name="ul53168018260"></a><ul id="ul53168018260"><li>When the type is <strong id="b1891573020284"><a name="b1891573020284"></a><a name="b1891573020284"></a>&lt;color&gt;</strong>, this parameter indicates the stroke color.</li><li>When the type is <strong id="b251434162819"><a name="b251434162819"></a><a name="b251434162819"></a>CanvasGradient</strong>, this parameter indicates a gradient object, which is created using the <a href="#section10822717373">createLinearGradient</a> method.</li><li>When the type is <strong id="b8418154912281"><a name="b8418154912281"></a><a name="b8418154912281"></a>CanvasPattern</strong>, use the <a href="#section1643216163371">createPattern</a> method to create a pattern.</li></ul>
-</td>
-</tr>
-<tr id="row1491315492523"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p6914104918527"><a name="p6914104918527"></a><a name="p6914104918527"></a><a href="#section887817337173">lineCap</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.72267226722672%" headers="mcps1.1.5.1.2 "><p id="p12914449165217"><a name="p12914449165217"></a><a name="p12914449165217"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.69096909690969%" headers="mcps1.1.5.1.3 "><p id="p4914194995218"><a name="p4914194995218"></a><a name="p4914194995218"></a>'butt'</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p388031620530"><a name="p388031620530"></a><a name="p388031620530"></a>Style of the specified line endpoint. The options are as follows:</p>
-<a name="ul4880171605310"></a><a name="ul4880171605310"></a><ul id="ul4880171605310"><li><strong id="b978411481291"><a name="b978411481291"></a><a name="b978411481291"></a>butt</strong>: The endpoints of the line are squared off.</li><li><strong id="b23729503013"><a name="b23729503013"></a><a name="b23729503013"></a>round</strong>: The endpoints of the line are rounded.</li><li><strong id="b732817306"><a name="b732817306"></a><a name="b732817306"></a>square</strong>: The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.</li></ul>
-</td>
-</tr>
-<tr id="row3349241115414"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p034954105410"><a name="p034954105410"></a><a name="p034954105410"></a><a href="#section77593271919">lineJoin</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.72267226722672%" headers="mcps1.1.5.1.2 "><p id="p1835013416547"><a name="p1835013416547"></a><a name="p1835013416547"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.69096909690969%" headers="mcps1.1.5.1.3 "><p id="p03501741145413"><a name="p03501741145413"></a><a name="p03501741145413"></a>'miter'</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p1529212156559"><a name="p1529212156559"></a><a name="p1529212156559"></a>Style of the intersection point between line segments. The options are as follows:</p>
-<a name="ul929219154551"></a><a name="ul929219154551"></a><ul id="ul929219154551"><li><strong id="b8732720133010"><a name="b8732720133010"></a><a name="b8732720133010"></a>'round'</strong>: The intersection is a sector, whose radius at the rounded corner is equal to the line width.</li><li><strong id="b19797194719303"><a name="b19797194719303"></a><a name="b19797194719303"></a>'bevel'</strong>: The intersection is a triangle. The rectangular corner of each line is independent.</li><li><strong id="b9923155363017"><a name="b9923155363017"></a><a name="b9923155363017"></a>'miter'</strong>: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in <strong id="b10924205353012"><a name="b10924205353012"></a><a name="b10924205353012"></a>miterLimit</strong>.</li></ul>
-</td>
-</tr>
-<tr id="row169726172599"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p10972217205918"><a name="p10972217205918"></a><a name="p10972217205918"></a><a href="#section177441243427">miterLimit</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.72267226722672%" headers="mcps1.1.5.1.2 "><p id="p1997281785917"><a name="p1997281785917"></a><a name="p1997281785917"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.69096909690969%" headers="mcps1.1.5.1.3 "><p id="p997311725915"><a name="p997311725915"></a><a name="p997311725915"></a>10</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p1797319176594"><a name="p1797319176594"></a><a name="p1797319176594"></a>Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.</p>
-</td>
-</tr>
-<tr id="row17431738523"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p9437315210"><a name="p9437315210"></a><a name="p9437315210"></a><a href="#section185699365434">font</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.72267226722672%" headers="mcps1.1.5.1.2 "><p id="p54315316521"><a name="p54315316521"></a><a name="p54315316521"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.69096909690969%" headers="mcps1.1.5.1.3 "><p id="p5122135214815"><a name="p5122135214815"></a><a name="p5122135214815"></a>'normal normal 14px sans-serif'</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p112514494494"><a name="p112514494494"></a><a name="p112514494494"></a>Font style.</p>
-<p id="p24315121810"><a name="p24315121810"></a><a name="p24315121810"></a>Syntax: ctx.font="font-size font-family"</p>
-<a name="ul9432122811"></a><a name="ul9432122811"></a><ul id="ul9432122811"><li>(Optional) <strong id="b1120211421414"><a name="b1120211421414"></a><a name="b1120211421414"></a>font-size</strong>: font size and row height. The unit can only be pixels.</li><li>(Optional) <strong id="b361724715214"><a name="b361724715214"></a><a name="b361724715214"></a>font-family</strong>: font family.</li></ul>
-<p id="p14804172734717"><a name="p14804172734717"></a><a name="p14804172734717"></a>Syntax: ctx.font="font-style font-weight font-size font-family"</p>
-<a name="ul128041227164715"></a><a name="ul128041227164715"></a><ul id="ul128041227164715"><li>(Optional) <strong id="b1190518588220"><a name="b1190518588220"></a><a name="b1190518588220"></a>font-style</strong>: font style. Available values are <strong id="b12905185817213"><a name="b12905185817213"></a><a name="b12905185817213"></a>'normal'</strong> and <strong id="b11906135818211"><a name="b11906135818211"></a><a name="b11906135818211"></a>'italic'</strong>.</li><li>(Optional) <strong id="b1846054031"><a name="b1846054031"></a><a name="b1846054031"></a>font-weight</strong>: font weight. Available values are as follows: <strong id="b55335419312"><a name="b55335419312"></a><a name="b55335419312"></a>'normal'</strong>, <strong id="b5549541531"><a name="b5549541531"></a><a name="b5549541531"></a>'bold'</strong>, <strong id="b2054165411313"><a name="b2054165411313"></a><a name="b2054165411313"></a>'bolder'</strong>, <strong id="b254195416314"><a name="b254195416314"></a><a name="b254195416314"></a>'lighter'</strong>, <strong id="b195512547310"><a name="b195512547310"></a><a name="b195512547310"></a>100</strong>, <strong id="b14551554830"><a name="b14551554830"></a><a name="b14551554830"></a>200</strong>, <strong id="b35513549312"><a name="b35513549312"></a><a name="b35513549312"></a>300</strong>, <strong id="b55516541733"><a name="b55516541733"></a><a name="b55516541733"></a>400</strong>, <strong id="b15567547317"><a name="b15567547317"></a><a name="b15567547317"></a>500</strong>, <strong id="b6561254137"><a name="b6561254137"></a><a name="b6561254137"></a>600</strong>, <strong id="b135615545318"><a name="b135615545318"></a><a name="b135615545318"></a>700</strong>, <strong id="b35735414317"><a name="b35735414317"></a><a name="b35735414317"></a>800</strong>, <strong id="b1057155418316"><a name="b1057155418316"></a><a name="b1057155418316"></a>900</strong></li><li>(Optional) <strong id="b109696305514"><a name="b109696305514"></a><a name="b109696305514"></a>font-size</strong>: font size and row height. The unit can only be pixels.</li><li>(Optional) <strong id="b37913317818"><a name="b37913317818"></a><a name="b37913317818"></a>font-family</strong>: font family. Available values are <strong id="b10791634811"><a name="b10791634811"></a><a name="b10791634811"></a>'sans-serif'</strong>, <strong id="b17808312816"><a name="b17808312816"></a><a name="b17808312816"></a>'serif'</strong>, and <strong id="b38014311815"><a name="b38014311815"></a><a name="b38014311815"></a>'monospace'</strong>.</li></ul>
-</td>
-</tr>
-<tr id="row568518327518"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p10685203255117"><a name="p10685203255117"></a><a name="p10685203255117"></a><a href="#section41621415164419">textAlign</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.72267226722672%" headers="mcps1.1.5.1.2 "><p id="p206851132195115"><a name="p206851132195115"></a><a name="p206851132195115"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.69096909690969%" headers="mcps1.1.5.1.3 "><p id="p768516327516"><a name="p768516327516"></a><a name="p768516327516"></a>'left'</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p1268512328512"><a name="p1268512328512"></a><a name="p1268512328512"></a>Text alignment mode. Available values are as follows:</p>
-<a name="ul47713282523"></a><a name="ul47713282523"></a><ul id="ul47713282523"><li><strong id="b10355316812"><a name="b10355316812"></a><a name="b10355316812"></a>'left'</strong>: The text is left-aligned.</li><li><strong id="b158081837680"><a name="b158081837680"></a><a name="b158081837680"></a>'right'</strong>: The text is right-aligned.</li><li><strong id="b1062412421282"><a name="b1062412421282"></a><a name="b1062412421282"></a>'center'</strong>: The text is center-aligned.</li><li><strong id="b135152482086"><a name="b135152482086"></a><a name="b135152482086"></a>'start'</strong>: The text is aligned with the start bound.</li><li><strong id="b1447143931412"><a name="b1447143931412"></a><a name="b1447143931412"></a>'end'</strong>: The text is aligned with the end bound.</li></ul>
-<div class="note" id="note18771928165213"><a name="note18771928165213"></a><a name="note18771928165213"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p977142811526"><a name="p977142811526"></a><a name="p977142811526"></a>In the <strong id="b14945184661415"><a name="b14945184661415"></a><a name="b14945184661415"></a>ltr</strong> layout mode, the value <strong id="b794634619149"><a name="b794634619149"></a><a name="b794634619149"></a>'start'</strong> equals <strong id="b394614466146"><a name="b394614466146"></a><a name="b394614466146"></a>'left'</strong>. In the <strong id="b1294694681410"><a name="b1294694681410"></a><a name="b1294694681410"></a>rtl</strong> layout mode, the value <strong id="b1194774619149"><a name="b1194774619149"></a><a name="b1194774619149"></a>'start'</strong> equals <strong id="b1794717468146"><a name="b1794717468146"></a><a name="b1794717468146"></a>'right'</strong>.</p>
-</div></div>
-</td>
-</tr>
-<tr id="row162312415315"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p1729812301537"><a name="p1729812301537"></a><a name="p1729812301537"></a><a href="#section0497195924412">textBaseline</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.72267226722672%" headers="mcps1.1.5.1.2 "><p id="p56231324155312"><a name="p56231324155312"></a><a name="p56231324155312"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.69096909690969%" headers="mcps1.1.5.1.3 "><p id="p1862372445314"><a name="p1862372445314"></a><a name="p1862372445314"></a>'alphabetic'</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p1662319249536"><a name="p1662319249536"></a><a name="p1662319249536"></a>Horizontal alignment mode of text. Available values are as follows:</p>
-<a name="ul1944781165420"></a><a name="ul1944781165420"></a><ul id="ul1944781165420"><li><strong id="b13824141117158"><a name="b13824141117158"></a><a name="b13824141117158"></a>'alphabetic'</strong>: The text baseline is the normal alphabetic baseline.</li><li><strong id="b16515141771513"><a name="b16515141771513"></a><a name="b16515141771513"></a>'top'</strong>: The text baseline is on the top of the text bounding box.</li><li><strong id="b691052391517"><a name="b691052391517"></a><a name="b691052391517"></a>'hanging'</strong>: The text baseline is a hanging baseline over the text.</li><li><strong id="b535313414156"><a name="b535313414156"></a><a name="b535313414156"></a>'middle'</strong>: The text baseline is in the middle of the text bounding box.</li><li><strong id="b3549104701510"><a name="b3549104701510"></a><a name="b3549104701510"></a>'ideographic'</strong>: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.</li><li><strong id="b1415765851710"><a name="b1415765851710"></a><a name="b1415765851710"></a>'bottom'</strong>: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.</li></ul>
-</td>
-</tr>
-<tr id="row1861912319472"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p6620153194714"><a name="p6620153194714"></a><a name="p6620153194714"></a><a href="#section14962525174510">globalAlpha</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.72267226722672%" headers="mcps1.1.5.1.2 "><p id="p0620143114710"><a name="p0620143114710"></a><a name="p0620143114710"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.69096909690969%" headers="mcps1.1.5.1.3 "><p id="p16620536473"><a name="p16620536473"></a><a name="p16620536473"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p1062063174719"><a name="p1062063174719"></a><a name="p1062063174719"></a>Opacity. <strong id="b691216516187"><a name="b691216516187"></a><a name="b691216516187"></a>0.0</strong>: completely transparent; <strong id="b1991905118181"><a name="b1991905118181"></a><a name="b1991905118181"></a>1.0</strong>: completely opaque.</p>
-</td>
-</tr>
-<tr id="row674934291912"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p15749144231914"><a name="p15749144231914"></a><a name="p15749144231914"></a><a href="#section10163191119469">lineDashOffset</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.72267226722672%" headers="mcps1.1.5.1.2 "><p id="p1749842121919"><a name="p1749842121919"></a><a name="p1749842121919"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.69096909690969%" headers="mcps1.1.5.1.3 "><p id="p11749144201914"><a name="p11749144201914"></a><a name="p11749144201914"></a>0.0</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p674954211197"><a name="p674954211197"></a><a name="p674954211197"></a>Offset of the dashed line. The precision is float.</p>
-</td>
-</tr>
-<tr id="row95411935182216"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p115417357226"><a name="p115417357226"></a><a name="p115417357226"></a><a href="#section20658135394618">globalCompositeOperation</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.72267226722672%" headers="mcps1.1.5.1.2 "><p id="p25411035182217"><a name="p25411035182217"></a><a name="p25411035182217"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.69096909690969%" headers="mcps1.1.5.1.3 "><p id="p19541735112215"><a name="p19541735112215"></a><a name="p19541735112215"></a>'source-over'</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p254163517229"><a name="p254163517229"></a><a name="p254163517229"></a>Composition operation type. Available values are as follows: 'source-over', 'source-atop', 'source-in', 'source-out', 'destination-over', 'destination-atop', 'destination-in', 'destination-out', 'lighter', 'copy', and 'xor'.</p>
-</td>
-</tr>
-<tr id="row9663153633113"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p106641736183111"><a name="p106641736183111"></a><a name="p106641736183111"></a><a href="#section962555815501">shadowBlur</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.72267226722672%" headers="mcps1.1.5.1.2 "><p id="p15664836133114"><a name="p15664836133114"></a><a name="p15664836133114"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.69096909690969%" headers="mcps1.1.5.1.3 "><p id="p46641736183114"><a name="p46641736183114"></a><a name="p46641736183114"></a>0.0</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p7664103673118"><a name="p7664103673118"></a><a name="p7664103673118"></a>Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.</p>
-</td>
-</tr>
-<tr id="row056212488333"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p1056264873311"><a name="p1056264873311"></a><a name="p1056264873311"></a><a href="#section1380963318510">shadowColor</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.72267226722672%" headers="mcps1.1.5.1.2 "><p id="p1856213484334"><a name="p1856213484334"></a><a name="p1856213484334"></a>&lt;color&gt;</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.69096909690969%" headers="mcps1.1.5.1.3 "><p id="p25621848163318"><a name="p25621848163318"></a><a name="p25621848163318"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p1562748123320"><a name="p1562748123320"></a><a name="p1562748123320"></a>Shadow color.</p>
-</td>
-</tr>
-<tr id="row1288144353519"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p6881143153511"><a name="p6881143153511"></a><a name="p6881143153511"></a><a href="#section83601599526">shadowOffsetX</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.72267226722672%" headers="mcps1.1.5.1.2 "><p id="p68814363510"><a name="p68814363510"></a><a name="p68814363510"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.69096909690969%" headers="mcps1.1.5.1.3 "><p id="p1488104393514"><a name="p1488104393514"></a><a name="p1488104393514"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p588164310356"><a name="p588164310356"></a><a name="p588164310356"></a>X-axis shadow offset relative to the original object.</p>
-</td>
-</tr>
-<tr id="row83031316183814"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p1641410177382"><a name="p1641410177382"></a><a name="p1641410177382"></a><a href="#section10859152455314">shadowOffsetY</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.72267226722672%" headers="mcps1.1.5.1.2 "><p id="p83031616153813"><a name="p83031616153813"></a><a name="p83031616153813"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.69096909690969%" headers="mcps1.1.5.1.3 "><p id="p1330318161388"><a name="p1330318161388"></a><a name="p1330318161388"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p1830451623810"><a name="p1830451623810"></a><a name="p1830451623810"></a>Y-axis shadow offset relative to the original object.</p>
-</td>
-</tr>
-<tr id="row18343553194012"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p14343353164014"><a name="p14343353164014"></a><a name="p14343353164014"></a><a href="#section132528555535">imageSmoothingEnabled</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.72267226722672%" headers="mcps1.1.5.1.2 "><p id="p1734319533401"><a name="p1734319533401"></a><a name="p1734319533401"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.69096909690969%" headers="mcps1.1.5.1.3 "><p id="p134315324012"><a name="p134315324012"></a><a name="p134315324012"></a>true</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p83431253164015"><a name="p83431253164015"></a><a name="p83431253164015"></a>Whether to adjust the image smoothness during image drawing. The value <strong id="b7690112422019"><a name="b7690112422019"></a><a name="b7690112422019"></a>true</strong> means to enable this feature, and <strong id="b4690112412208"><a name="b4690112412208"></a><a name="b4690112412208"></a>false</strong> means the opposite.</p>
-</td>
-</tr>
-<tr id="row6429324184315"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p2429122414430"><a name="p2429122414430"></a><a name="p2429122414430"></a>imageSmoothingQuality</p>
-</td>
-<td class="cellrowborder" valign="top" width="26.72267226722672%" headers="mcps1.1.5.1.2 "><p id="p19429172413432"><a name="p19429172413432"></a><a name="p19429172413432"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.69096909690969%" headers="mcps1.1.5.1.3 "><p id="p1842912464313"><a name="p1842912464313"></a><a name="p1842912464313"></a>'low'</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p45511755196"><a name="p45511755196"></a><a name="p45511755196"></a>Image smoothness. The value can be <strong id="b6325943219"><a name="b6325943219"></a><a name="b6325943219"></a>'low'</strong>, <strong id="b1633194112113"><a name="b1633194112113"></a><a name="b1633194112113"></a>'medium'</strong>, or <strong id="b2033284162113"><a name="b2033284162113"></a><a name="b2033284162113"></a>'high'</strong>.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->The value of the  **<color\>**  type can be in 'rgb\(255, 255, 255\)', 'rgba\(255, 255, 255, 1.0\)', or '\#FFFFFF' format.
-
-### fillStyle<a name="section14391838151316"></a>
+# CanvasRenderingContext2D
+
+
+> ![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.
+
+
+Use **RenderingContext** to draw rectangles, text, images, and other objects on a canvas.
+
+
+## APIs
+
+CanvasRenderingContext2D(setting: RenderingContextSetting)
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | setting | [RenderingContextSettings](#renderingcontextsettings) | Yes | - | See&nbsp;RenderingContextSettings. | 
+
+
+### RenderingContextSettings
+
+RenderingContextSettings(antialias?: bool)
+
+Configures the settings of a **CanvasRenderingContext2D** object, including whether to enable antialiasing.
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | antialias | bool | No | false | Whether&nbsp;antialiasing&nbsp;is&nbsp;enabled. | 
+
+
+## Attributes
+
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| [fillStyle](#fillstyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | Style&nbsp;used&nbsp;to&nbsp;fill&nbsp;an&nbsp;area.<br/>-&nbsp;When&nbsp;the&nbsp;type&nbsp;is&nbsp;**&lt;color&gt;**,&nbsp;this&nbsp;attribute&nbsp;indicates&nbsp;the&nbsp;fill&nbsp;color.<br/>-&nbsp;When&nbsp;the&nbsp;type&nbsp;is&nbsp;**CanvasGradient**,&nbsp;this&nbsp;attribute&nbsp;indicates&nbsp;a&nbsp;gradient&nbsp;object,&nbsp;which&nbsp;is&nbsp;created&nbsp;using&nbsp;the&nbsp;[createLinearGradient](#createlineargradient)&nbsp;method.<br/>-&nbsp;When&nbsp;the&nbsp;type&nbsp;is&nbsp;**CanvasPattern**,&nbsp;this&nbsp;attribute&nbsp;indicates&nbsp;a&nbsp;pattern,&nbsp;which&nbsp;is&nbsp;created&nbsp;using&nbsp;the&nbsp;[createPattern](#createpattern)&nbsp;method. |
+| [lineWidth](#linewidth) | number | - | Line&nbsp;width. |
+| [strokeStyle](#strokestyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | Stroke&nbsp;style.<br/>-&nbsp;When&nbsp;the&nbsp;type&nbsp;is&nbsp;**&lt;color&gt;**,&nbsp;this&nbsp;attribute&nbsp;indicates&nbsp;the&nbsp;stroke&nbsp;color.<br/>-&nbsp;When&nbsp;the&nbsp;type&nbsp;is&nbsp;**CanvasGradient**,&nbsp;this&nbsp;attribute&nbsp;indicates&nbsp;a&nbsp;gradient&nbsp;object,&nbsp;which&nbsp;is&nbsp;created&nbsp;using&nbsp;the&nbsp;[createLinearGradient](#createlineargradient)&nbsp;method.<br/>-&nbsp;When&nbsp;the&nbsp;type&nbsp;is&nbsp;**CanvasPattern**,&nbsp;this&nbsp;attribute&nbsp;indicates&nbsp;a&nbsp;pattern,&nbsp;which&nbsp;is&nbsp;created&nbsp;using&nbsp;the&nbsp;[createPattern](#createpattern)&nbsp;method. |
+| [lineCap](#linecap) | string | 'butt' | Style&nbsp;of&nbsp;the&nbsp;line&nbsp;endpoints.&nbsp;The&nbsp;options&nbsp;are&nbsp;as&nbsp;follows:<br/>-&nbsp;**'butt'**:&nbsp;The&nbsp;endpoints&nbsp;of&nbsp;the&nbsp;line&nbsp;are&nbsp;squared&nbsp;off.<br/>-&nbsp;**'round'**:&nbsp;The&nbsp;endpoints&nbsp;of&nbsp;the&nbsp;line&nbsp;are&nbsp;rounded.<br/>-&nbsp;**'square'**:&nbsp;The&nbsp;endpoints&nbsp;of&nbsp;the&nbsp;line&nbsp;are&nbsp;squared&nbsp;off&nbsp;by&nbsp;adding&nbsp;a&nbsp;box&nbsp;with&nbsp;an&nbsp;equal&nbsp;width&nbsp;and&nbsp;half&nbsp;the&nbsp;height&nbsp;of&nbsp;the&nbsp;line's&nbsp;thickness. |
+| [lineJoin](#linejoin) | string | 'miter' | Style&nbsp;of&nbsp;the&nbsp;shape&nbsp;used&nbsp;to&nbsp;join&nbsp;line&nbsp;segments.&nbsp;The&nbsp;options&nbsp;are&nbsp;as&nbsp;follows:<br/>-&nbsp;**'round'**:&nbsp;The&nbsp;shape&nbsp;used&nbsp;to&nbsp;join&nbsp;line&nbsp;segments&nbsp;is&nbsp;a&nbsp;rounded&nbsp;corner&nbsp;with&nbsp;the&nbsp;radius&nbsp;equal&nbsp;to&nbsp;the&nbsp;line&nbsp;width.<br/>-&nbsp;**'bevel'**:&nbsp;The&nbsp;shape&nbsp;used&nbsp;to&nbsp;join&nbsp;line&nbsp;segments&nbsp;is&nbsp;a&nbsp;beveled&nbsp;corner.&nbsp;The&nbsp;rectangular&nbsp;corner&nbsp;of&nbsp;each&nbsp;line&nbsp;is&nbsp;independent.<br/>-&nbsp;**'miter'**:&nbsp;The&nbsp;shape&nbsp;used&nbsp;to&nbsp;join&nbsp;line&nbsp;segments&nbsp;is&nbsp;a&nbsp;mitered&nbsp;corner.&nbsp;The&nbsp;corner&nbsp;is&nbsp;formed&nbsp;by&nbsp;extending&nbsp;the&nbsp;outside&nbsp;edges&nbsp;of&nbsp;the&nbsp;lines&nbsp;until&nbsp;they&nbsp;meet.&nbsp;You&nbsp;can&nbsp;adjust&nbsp;the&nbsp;effect&nbsp;of&nbsp;this&nbsp;attribute&nbsp;using&nbsp;**miterLimit**. |
+| [miterLimit](#miterlimit) | number | 10 | Maximum&nbsp;miter&nbsp;length.&nbsp;The&nbsp;miter&nbsp;length&nbsp;is&nbsp;the&nbsp;distance&nbsp;between&nbsp;the&nbsp;inner&nbsp;corner&nbsp;and&nbsp;the&nbsp;outer&nbsp;corner&nbsp;where&nbsp;two&nbsp;lines&nbsp;meet. |
+| [font](#font) | string | 'normal&nbsp;normal&nbsp;14px&nbsp;sans-serif' | Font&nbsp;style.<br/>Syntax:&nbsp;ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;(Optional)&nbsp;**font-size**:&nbsp;font&nbsp;size&nbsp;and&nbsp;row&nbsp;height.&nbsp;The&nbsp;unit&nbsp;can&nbsp;only&nbsp;be&nbsp;px.<br/>-&nbsp;(Optional)&nbsp;**font-family**:&nbsp;font&nbsp;family.<br/>Syntax:&nbsp;ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;(Optional)&nbsp;**font-style**:&nbsp;font&nbsp;style.&nbsp;Available&nbsp;values&nbsp;are&nbsp;**'normal'**&nbsp;and&nbsp;**'italic'**.<br/>-&nbsp;(Optional)&nbsp;**font-weight**:&nbsp;font&nbsp;weight.&nbsp;Available&nbsp;values&nbsp;are&nbsp;as&nbsp;follows:&nbsp;**'normal'**,&nbsp;**'bold'**,&nbsp;**'bolder'**,&nbsp;**'lighter'**,&nbsp;**100**,&nbsp;**200**,&nbsp;**300**,&nbsp;**400**,&nbsp;**500**,&nbsp;**600**,&nbsp;**700**,&nbsp;**800**,&nbsp;**900**<br/>-&nbsp;(Optional)&nbsp;**font-size**:&nbsp;font&nbsp;size&nbsp;and&nbsp;row&nbsp;height.&nbsp;The&nbsp;unit&nbsp;can&nbsp;only&nbsp;be&nbsp;px.<br/>-&nbsp;(Optional)&nbsp;**font-family**:&nbsp;font&nbsp;family.&nbsp;Available&nbsp;values&nbsp;are&nbsp;**'sans-serif'**,&nbsp;**'serif'**,&nbsp;and&nbsp;**'monospace'**. |
+| [textAlign](#textalign) | string | 'left' | Text&nbsp;alignment&nbsp;mode.&nbsp;Available&nbsp;values&nbsp;are&nbsp;as&nbsp;follows:<br/>-&nbsp;**'left'**:&nbsp;The&nbsp;text&nbsp;is&nbsp;left-aligned.<br/>-&nbsp;**'right'**:&nbsp;The&nbsp;text&nbsp;is&nbsp;right-aligned.<br/>-&nbsp;**'center'**:&nbsp;The&nbsp;text&nbsp;is&nbsp;center-aligned.<br/>-&nbsp;**'start'**:&nbsp;The&nbsp;text&nbsp;is&nbsp;aligned&nbsp;with&nbsp;the&nbsp;start&nbsp;bound.<br/>-&nbsp;**'end'**:&nbsp;The&nbsp;text&nbsp;is&nbsp;aligned&nbsp;with&nbsp;the&nbsp;end&nbsp;bound.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;In&nbsp;the&nbsp;**ltr**&nbsp;layout&nbsp;mode,&nbsp;the&nbsp;value&nbsp;**'start'**&nbsp;equals&nbsp;**'left'**.&nbsp;In&nbsp;the&nbsp;**rtl**&nbsp;layout&nbsp;mode,&nbsp;the&nbsp;value&nbsp;**'start'**&nbsp;equals&nbsp;**'right'**. |
+| [textBaseline](#textbaseline) | string | 'alphabetic' | Horizontal&nbsp;alignment&nbsp;mode&nbsp;of&nbsp;text.&nbsp;Available&nbsp;values&nbsp;are&nbsp;as&nbsp;follows:<br/>-&nbsp;**'alphabetic'**:&nbsp;The&nbsp;text&nbsp;baseline&nbsp;is&nbsp;the&nbsp;normal&nbsp;alphabetic&nbsp;baseline.<br/>-&nbsp;**'top'**:&nbsp;The&nbsp;text&nbsp;baseline&nbsp;is&nbsp;on&nbsp;the&nbsp;top&nbsp;of&nbsp;the&nbsp;text&nbsp;bounding&nbsp;box.<br/>-&nbsp;**'hanging'**:&nbsp;The&nbsp;text&nbsp;baseline&nbsp;is&nbsp;a&nbsp;hanging&nbsp;baseline&nbsp;over&nbsp;the&nbsp;text.<br/>-&nbsp;**'middle'**:&nbsp;The&nbsp;text&nbsp;baseline&nbsp;is&nbsp;in&nbsp;the&nbsp;middle&nbsp;of&nbsp;the&nbsp;text&nbsp;bounding&nbsp;box.<br/>-&nbsp;**'ideographic'**:&nbsp;The&nbsp;text&nbsp;baseline&nbsp;is&nbsp;the&nbsp;ideographic&nbsp;baseline.&nbsp;If&nbsp;a&nbsp;character&nbsp;exceeds&nbsp;the&nbsp;alphabetic&nbsp;baseline,&nbsp;the&nbsp;ideographic&nbsp;baseline&nbsp;is&nbsp;located&nbsp;at&nbsp;the&nbsp;bottom&nbsp;of&nbsp;the&nbsp;excess&nbsp;character.<br/>-&nbsp;**'bottom'**:&nbsp;The&nbsp;text&nbsp;baseline&nbsp;is&nbsp;at&nbsp;the&nbsp;bottom&nbsp;of&nbsp;the&nbsp;text&nbsp;bounding&nbsp;box.&nbsp;Its&nbsp;difference&nbsp;from&nbsp;the&nbsp;ideographic&nbsp;baseline&nbsp;is&nbsp;that&nbsp;the&nbsp;ideographic&nbsp;baseline&nbsp;does&nbsp;not&nbsp;consider&nbsp;letters&nbsp;in&nbsp;the&nbsp;next&nbsp;line. |
+| [globalAlpha](#globalalpha) | number | - | Opacity.&nbsp;**0.0**:&nbsp;completely&nbsp;transparent;&nbsp;**1.0**:&nbsp;completely&nbsp;opaque. |
+| [lineDashOffset](#linedashoffset) | number | 0.0 | Offset&nbsp;of&nbsp;the&nbsp;dashed&nbsp;line.&nbsp;The&nbsp;precision&nbsp;is&nbsp;float. |
+| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | Composition&nbsp;operation&nbsp;type.&nbsp;Available&nbsp;values&nbsp;are&nbsp;as&nbsp;follows:&nbsp;**'source-over'**,&nbsp;**'source-atop'**,&nbsp;**'source-in'**,&nbsp;**'source-out'**,&nbsp;**'destination-over'**,&nbsp;**'destination-atop'**,&nbsp;**'destination-in'**,&nbsp;**'destination-out'**,&nbsp;**'lighter'**,&nbsp;**'copy'**,&nbsp;and&nbsp;**'xor'**. |
+| [shadowBlur](#shadowblur) | number | 0.0 | Blur&nbsp;level&nbsp;during&nbsp;shadow&nbsp;drawing.&nbsp;A&nbsp;larger&nbsp;value&nbsp;indicates&nbsp;a&nbsp;more&nbsp;blurred&nbsp;effect.&nbsp;The&nbsp;precision&nbsp;is&nbsp;float. |
+| [shadowColor](#shadowcolor) | &lt;color&gt; | - | Shadow&nbsp;color. |
+| [shadowOffsetX](#shadowoffsetx) | number | - | X-axis&nbsp;shadow&nbsp;offset&nbsp;relative&nbsp;to&nbsp;the&nbsp;original&nbsp;object. |
+| [shadowOffsetY](#shadowoffsety) | number | - | Y-axis&nbsp;shadow&nbsp;offset&nbsp;relative&nbsp;to&nbsp;the&nbsp;original&nbsp;object. |
+| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | Whether&nbsp;to&nbsp;adjust&nbsp;the&nbsp;image&nbsp;smoothness&nbsp;during&nbsp;image&nbsp;drawing.&nbsp;The&nbsp;value&nbsp;**true**&nbsp;means&nbsp;to&nbsp;enable&nbsp;this&nbsp;feature,&nbsp;and&nbsp;**false**&nbsp;means&nbsp;the&nbsp;opposite. |
+| imageSmoothingQuality | string | 'low' | Image&nbsp;smoothness.&nbsp;The&nbsp;value&nbsp;can&nbsp;be&nbsp;**'low'**,&nbsp;**'medium'**,&nbsp;or&nbsp;**'high'**. |
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> The value of the **&lt;color&gt;** type can be in 'rgb(255, 255, 255)', 'rgba(255, 255, 255, 1.0)', or '\#FFFFFF' format.
+
+
+### fillStyle
+
 
 ```
 @Entry
@@ -294,9 +84,11 @@ struct FillStyleExample {
 }
 ```
 
-![](figures/en-us_image_0000001193322850.png)
+![en-us_image_0000001257058395](figures/en-us_image_0000001257058395.png)
+
+
+### lineWidth
 
-### lineWidth<a name="section104861220181415"></a>
 
 ```
 @Entry
@@ -322,9 +114,11 @@ struct LineWidthExample {
 }
 ```
 
-![](figures/en-us_image_0000001238402745.png)
+![en-us_image_0000001212378408](figures/en-us_image_0000001212378408.png)
+
+
+### strokeStyle
 
-### strokeStyle<a name="section1216741261620"></a>
 
 ```
 @Entry
@@ -351,9 +145,12 @@ struct StrokeStyleExample {
 }
 ```
 
-![](figures/en-us_image_0000001238282783.png)
 
-### lineCap<a name="section887817337173"></a>
+![en-us_image_0000001212218446](figures/en-us_image_0000001212218446.png)
+
+
+### lineCap
+
 
 ```
 @Entry
@@ -383,9 +180,11 @@ struct LineCapExample {
 }
 ```
 
-![](figures/en-us_image_0000001193642802.png)
+![en-us_image_0000001212378406](figures/en-us_image_0000001212378406.png)
+
+
+### lineJoin
 
-### lineJoin<a name="section77593271919"></a>
 
 ```
 @Entry
@@ -416,9 +215,11 @@ struct LineJoinExample {
 }
 ```
 
-![](figures/en-us_image_0000001193802788.png)
+![en-us_image_0000001212218438](figures/en-us_image_0000001212218438.png)
+
+
+### miterLimit
 
-### miterLimit<a name="section177441243427"></a>
 
 ```
 @Entry
@@ -449,9 +250,11 @@ struct MiterLimit {
 }
 ```
 
-![](figures/en-us_image_0000001238522733.png)
+![en-us_image_0000001212378398](figures/en-us_image_0000001212378398.png)
+
+
+### font
 
-### font<a name="section185699365434"></a>
 
 ```
 @Entry
@@ -477,9 +280,11 @@ struct Font {
 }
 ```
 
-![](figures/en-us_image_0000001193482814.png)
+![en-us_image_0000001257058409](figures/en-us_image_0000001257058409.png)
+
+
+### textAlign
 
-### textAlign<a name="section41621415164419"></a>
 
 ```
 @Entry
@@ -520,9 +325,11 @@ struct CanvasExample {
 }
 ```
 
-![](figures/en-us_image_0000001238602771.png)
+![en-us_image_0000001256978351](figures/en-us_image_0000001256978351.png)
+
+
+### textBaseline
 
-### textBaseline<a name="section0497195924412"></a>
 
 ```
 @Entry
@@ -563,9 +370,11 @@ struct TextBaseline {
 }
 ```
 
-![](figures/en-us_image_0000001193322872.png)
+![en-us_image_0000001212058462](figures/en-us_image_0000001212058462.png)
+
+
+### globalAlpha
 
-### globalAlpha<a name="section14962525174510"></a>
 
 ```
 @Entry
@@ -594,9 +403,11 @@ struct GlobalAlpha {
 }
 ```
 
-![](figures/en-us_image_0000001238402777.png)
+![en-us_image_0000001212218444](figures/en-us_image_0000001212218444.png)
+
+
+### lineDashOffset
 
-### lineDashOffset<a name="section10163191119469"></a>
 
 ```
 @Entry
@@ -623,74 +434,25 @@ struct LineDashOffset {
 }
 ```
 
-![](figures/en-us_image_0000001238282827.png)
-
-### globalCompositeOperation<a name="section20658135394618"></a>
-
-<a name="table1171418182610"></a>
-<table><thead align="left"><tr id="row2168191820268"><th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.1"><p id="p1816811815262"><a name="p1816811815262"></a><a name="p1816811815262"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.2"><p id="p15168618142618"><a name="p15168618142618"></a><a name="p15168618142618"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row316821852620"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p1116811184264"><a name="p1116811184264"></a><a name="p1116811184264"></a>source-over</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p31681918182610"><a name="p31681918182610"></a><a name="p31681918182610"></a>Displays the new drawing above the existing drawing. This attribute is used by default.</p>
-</td>
-</tr>
-<tr id="row016881852610"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p12168131819266"><a name="p12168131819266"></a><a name="p12168131819266"></a>source-atop</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p316811184267"><a name="p316811184267"></a><a name="p316811184267"></a>Displays the new drawing on the top of the existing drawing.</p>
-</td>
-</tr>
-<tr id="row131681018112611"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p51681618132610"><a name="p51681618132610"></a><a name="p51681618132610"></a>source-in</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p101681318112617"><a name="p101681318112617"></a><a name="p101681318112617"></a>Displays the new drawing inside the existing drawing.</p>
-</td>
-</tr>
-<tr id="row4169191872617"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p316831842612"><a name="p316831842612"></a><a name="p316831842612"></a>source-out</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p1416961812613"><a name="p1416961812613"></a><a name="p1416961812613"></a>Displays the part of the new drawing that is outside of the existing drawing.</p>
-</td>
-</tr>
-<tr id="row116951812260"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p1169318112610"><a name="p1169318112610"></a><a name="p1169318112610"></a>destination-over</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p191691118182610"><a name="p191691118182610"></a><a name="p191691118182610"></a>Displays the existing drawing above the new drawing.</p>
-</td>
-</tr>
-<tr id="row21691318122615"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p91690186265"><a name="p91690186265"></a><a name="p91690186265"></a>destination-atop</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p111691918162610"><a name="p111691918162610"></a><a name="p111691918162610"></a>Displays the existing drawing above the new drawing.</p>
-</td>
-</tr>
-<tr id="row1817018186267"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p5169618122614"><a name="p5169618122614"></a><a name="p5169618122614"></a>destination-in</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p01691518162615"><a name="p01691518162615"></a><a name="p01691518162615"></a>Displays the existing drawing inside the new drawing.</p>
-</td>
-</tr>
-<tr id="row81701518132612"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p1917012187269"><a name="p1917012187269"></a><a name="p1917012187269"></a>destination-out</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p1817041842615"><a name="p1817041842615"></a><a name="p1817041842615"></a>Displays the part of the existing drawing that is outside of the new drawing.</p>
-</td>
-</tr>
-<tr id="row217031872611"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p141701518192616"><a name="p141701518192616"></a><a name="p141701518192616"></a>lighter</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p7170718112616"><a name="p7170718112616"></a><a name="p7170718112616"></a>Displays both the new drawing and the existing drawing.</p>
-</td>
-</tr>
-<tr id="row131701118112615"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p317081852616"><a name="p317081852616"></a><a name="p317081852616"></a>copy</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p1170718182615"><a name="p1170718182615"></a><a name="p1170718182615"></a>Displays the new drawing and neglects the existing drawing.</p>
-</td>
-</tr>
-<tr id="row10171161862615"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p6170191819269"><a name="p6170191819269"></a><a name="p6170191819269"></a>xor</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p71716181269"><a name="p71716181269"></a><a name="p71716181269"></a>Combines the new drawing and existing drawing using the XOR operation.</p>
-</td>
-</tr>
-</tbody>
-</table>
+![en-us_image_0000001212058480](figures/en-us_image_0000001212058480.png)
+
+
+### globalCompositeOperation
+
+  | Name | Description | 
+| -------- | -------- |
+| source-over | Displays&nbsp;the&nbsp;new&nbsp;drawing&nbsp;above&nbsp;the&nbsp;existing&nbsp;drawing.&nbsp;This&nbsp;attribute&nbsp;is&nbsp;used&nbsp;by&nbsp;default. | 
+| source-atop | Displays&nbsp;the&nbsp;new&nbsp;drawing&nbsp;on&nbsp;the&nbsp;top&nbsp;of&nbsp;the&nbsp;existing&nbsp;drawing. | 
+| source-in | Displays&nbsp;the&nbsp;new&nbsp;drawing&nbsp;inside&nbsp;the&nbsp;existing&nbsp;drawing. | 
+| source-out | Displays&nbsp;the&nbsp;part&nbsp;of&nbsp;the&nbsp;new&nbsp;drawing&nbsp;that&nbsp;is&nbsp;outside&nbsp;of&nbsp;the&nbsp;existing&nbsp;drawing. | 
+| destination-over | Displays&nbsp;the&nbsp;existing&nbsp;drawing&nbsp;above&nbsp;the&nbsp;new&nbsp;drawing. | 
+| destination-atop | Displays&nbsp;the&nbsp;existing&nbsp;drawing&nbsp;on&nbsp;the&nbsp;top&nbsp;of&nbsp;the&nbsp;new&nbsp;drawing. | 
+| destination-in | Displays&nbsp;the&nbsp;existing&nbsp;drawing&nbsp;inside&nbsp;the&nbsp;new&nbsp;drawing. | 
+| destination-out | Displays&nbsp;the&nbsp;part&nbsp;of&nbsp;the&nbsp;existing&nbsp;drawing&nbsp;that&nbsp;is&nbsp;outside&nbsp;of&nbsp;the&nbsp;new&nbsp;drawing. | 
+| lighter | Displays&nbsp;both&nbsp;the&nbsp;new&nbsp;drawing&nbsp;and&nbsp;the&nbsp;existing&nbsp;drawing. | 
+| copy | Displays&nbsp;the&nbsp;new&nbsp;drawing&nbsp;and&nbsp;neglects&nbsp;the&nbsp;existing&nbsp;drawing. | 
+| xor | Combines&nbsp;the&nbsp;new&nbsp;drawing&nbsp;and&nbsp;existing&nbsp;drawing&nbsp;using&nbsp;the&nbsp;XOR&nbsp;operation. | 
+
 
 ```
 @Entry
@@ -724,9 +486,11 @@ struct GlobalCompositeOperation {
 }
 ```
 
-![](figures/en-us_image_0000001193642848.png)
+![en-us_image_0000001211898480](figures/en-us_image_0000001211898480.png)
+
+
+### shadowBlur
 
-### shadowBlur<a name="section962555815501"></a>
 
 ```
 @Entry
@@ -754,9 +518,11 @@ struct ShadowBlur {
 }
 ```
 
-![](figures/en-us_image_0000001193802836.png)
+![en-us_image_0000001256978343](figures/en-us_image_0000001256978343.png)
+
+
+### shadowColor
 
-### shadowColor<a name="section1380963318510"></a>
 
 ```
 @Entry
@@ -784,9 +550,11 @@ struct ShadowColor {
 }
 ```
 
-![](figures/en-us_image_0000001238522783.png)
+![en-us_image_0000001257138353](figures/en-us_image_0000001257138353.png)
+
+
+### shadowOffsetX
 
-### shadowOffsetX<a name="section83601599526"></a>
 
 ```
 @Entry
@@ -815,9 +583,11 @@ struct ShadowOffsetX {
 }
 ```
 
-![](figures/en-us_image_0000001193482866.png)
+![en-us_image_0000001212218436](figures/en-us_image_0000001212218436.png)
+
+
+### shadowOffsetY
 
-### shadowOffsetY<a name="section10859152455314"></a>
 
 ```
 @Entry
@@ -845,9 +615,11 @@ struct ShadowOffsetY {
 }
 ```
 
-![](figures/en-us_image_0000001238602821.png)
+![en-us_image_0000001212378410](figures/en-us_image_0000001212378410.png)
+
+
+### imageSmoothingEnabled
 
-### imageSmoothingEnabled<a name="section132528555535"></a>
 
 ```
 @Entry
@@ -874,2932 +646,1399 @@ struct ImageSmoothingEnabled {
 }
 ```
 
-![](figures/en-us_image_0000001193322910.png)
+![en-us_image_0000001211898472](figures/en-us_image_0000001211898472.png)
 
-## Methods<a name="section15116165271718"></a>
 
-### fillRect<a name="section119009111877"></a>
+## Methods
 
-fillRect\(x: number, y: number, w: number, h: number\): void
+
+### fillRect
+
+fillRect(x: number, y: number, w: number, h: number): void
 
 Fills a rectangle on the canvas.
 
--   Parameters
-
-    <a name="table22700517475"></a>
-    <table><thead align="left"><tr id="row627105114475"><th class="cellrowborder" valign="top" width="23.67236723672367%" id="mcps1.1.6.1.1"><p id="p142716519477"><a name="p142716519477"></a><a name="p142716519477"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.742074207420742%" id="mcps1.1.6.1.2"><p id="p9271451154716"><a name="p9271451154716"></a><a name="p9271451154716"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.291429142914291%" id="mcps1.1.6.1.3"><p id="p20454148115111"><a name="p20454148115111"></a><a name="p20454148115111"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.781278127812781%" id="mcps1.1.6.1.4"><p id="p7500013516"><a name="p7500013516"></a><a name="p7500013516"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.512851285128516%" id="mcps1.1.6.1.5"><p id="p1627105124719"><a name="p1627105124719"></a><a name="p1627105124719"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row4271175119479"><td class="cellrowborder" valign="top" width="23.67236723672367%" headers="mcps1.1.6.1.1 "><p id="p1827185124716"><a name="p1827185124716"></a><a name="p1827185124716"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.742074207420742%" headers="mcps1.1.6.1.2 "><p id="p127175114710"><a name="p127175114710"></a><a name="p127175114710"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.291429142914291%" headers="mcps1.1.6.1.3 "><p id="p171691549105011"><a name="p171691549105011"></a><a name="p171691549105011"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.781278127812781%" headers="mcps1.1.6.1.4 "><p id="p12517019511"><a name="p12517019511"></a><a name="p12517019511"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.5 "><p id="p7271051204714"><a name="p7271051204714"></a><a name="p7271051204714"></a>X-coordinate of the upper left corner of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row142711551154714"><td class="cellrowborder" valign="top" width="23.67236723672367%" headers="mcps1.1.6.1.1 "><p id="p1327135134712"><a name="p1327135134712"></a><a name="p1327135134712"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.742074207420742%" headers="mcps1.1.6.1.2 "><p id="p4271751134716"><a name="p4271751134716"></a><a name="p4271751134716"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.291429142914291%" headers="mcps1.1.6.1.3 "><p id="p916915498503"><a name="p916915498503"></a><a name="p916915498503"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.781278127812781%" headers="mcps1.1.6.1.4 "><p id="p8510035119"><a name="p8510035119"></a><a name="p8510035119"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.5 "><p id="p17271185194717"><a name="p17271185194717"></a><a name="p17271185194717"></a>Y-coordinate of the upper left corner of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row132711451164714"><td class="cellrowborder" valign="top" width="23.67236723672367%" headers="mcps1.1.6.1.1 "><p id="p1827111517473"><a name="p1827111517473"></a><a name="p1827111517473"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.742074207420742%" headers="mcps1.1.6.1.2 "><p id="p42720512473"><a name="p42720512473"></a><a name="p42720512473"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.291429142914291%" headers="mcps1.1.6.1.3 "><p id="p816924920504"><a name="p816924920504"></a><a name="p816924920504"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.781278127812781%" headers="mcps1.1.6.1.4 "><p id="p1651901515"><a name="p1651901515"></a><a name="p1651901515"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.5 "><p id="p25861842185019"><a name="p25861842185019"></a><a name="p25861842185019"></a>Width of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row1272115184714"><td class="cellrowborder" valign="top" width="23.67236723672367%" headers="mcps1.1.6.1.1 "><p id="p2272155134718"><a name="p2272155134718"></a><a name="p2272155134718"></a>height</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.742074207420742%" headers="mcps1.1.6.1.2 "><p id="p42721551184719"><a name="p42721551184719"></a><a name="p42721551184719"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.291429142914291%" headers="mcps1.1.6.1.3 "><p id="p1616912492500"><a name="p1616912492500"></a><a name="p1616912492500"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.781278127812781%" headers="mcps1.1.6.1.4 "><p id="p185120145120"><a name="p185120145120"></a><a name="p185120145120"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.5 "><p id="p758612425506"><a name="p758612425506"></a><a name="p758612425506"></a>Height of the rectangle.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct FillRect {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.fillRect(0,30,100,100)
-           })
-          }
-        .width('100%')
-        .height('100%')
-      }
-    }
-    ```
-
-    ![](figures/en-us_image_0000001193737314.png)
-
-
-### strokeRect<a name="section592311819"></a>
-
-strokeRect\(x: number, y: number, w: number, h: number\): void
-
-Draws a rectangle stroke on the canvas.
-
--   Parameters
-
-    <a name="table165775763110"></a>
-    <table><thead align="left"><tr id="row18567574310"><th class="cellrowborder" valign="top" width="20.45%" id="mcps1.1.6.1.1"><p id="p165618578317"><a name="p165618578317"></a><a name="p165618578317"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="23.97%" id="mcps1.1.6.1.2"><p id="p05655711314"><a name="p05655711314"></a><a name="p05655711314"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.72%" id="mcps1.1.6.1.3"><p id="p174981419115215"><a name="p174981419115215"></a><a name="p174981419115215"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.35%" id="mcps1.1.6.1.4"><p id="p6370101215216"><a name="p6370101215216"></a><a name="p6370101215216"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p1656457113110"><a name="p1656457113110"></a><a name="p1656457113110"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row756105716319"><td class="cellrowborder" valign="top" width="20.45%" headers="mcps1.1.6.1.1 "><p id="p185610575318"><a name="p185610575318"></a><a name="p185610575318"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.97%" headers="mcps1.1.6.1.2 "><p id="p135685763118"><a name="p135685763118"></a><a name="p135685763118"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.72%" headers="mcps1.1.6.1.3 "><p id="p349818194528"><a name="p349818194528"></a><a name="p349818194528"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.35%" headers="mcps1.1.6.1.4 "><p id="p237191215213"><a name="p237191215213"></a><a name="p237191215213"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p165610577318"><a name="p165610577318"></a><a name="p165610577318"></a>X-coordinate of the upper left corner of the rectangle stroke.</p>
-    </td>
-    </tr>
-    <tr id="row25795753111"><td class="cellrowborder" valign="top" width="20.45%" headers="mcps1.1.6.1.1 "><p id="p556195712315"><a name="p556195712315"></a><a name="p556195712315"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.97%" headers="mcps1.1.6.1.2 "><p id="p357155773110"><a name="p357155773110"></a><a name="p357155773110"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.72%" headers="mcps1.1.6.1.3 "><p id="p3498919165216"><a name="p3498919165216"></a><a name="p3498919165216"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.35%" headers="mcps1.1.6.1.4 "><p id="p037161285217"><a name="p037161285217"></a><a name="p037161285217"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p105785723112"><a name="p105785723112"></a><a name="p105785723112"></a>Y-coordinate of the upper left corner of the rectangle stroke.</p>
-    </td>
-    </tr>
-    <tr id="row195712570312"><td class="cellrowborder" valign="top" width="20.45%" headers="mcps1.1.6.1.1 "><p id="p205735793111"><a name="p205735793111"></a><a name="p205735793111"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.97%" headers="mcps1.1.6.1.2 "><p id="p45795713311"><a name="p45795713311"></a><a name="p45795713311"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.72%" headers="mcps1.1.6.1.3 "><p id="p2498201985216"><a name="p2498201985216"></a><a name="p2498201985216"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.35%" headers="mcps1.1.6.1.4 "><p id="p183712124529"><a name="p183712124529"></a><a name="p183712124529"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1357357193110"><a name="p1357357193110"></a><a name="p1357357193110"></a>Width of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row4571357203118"><td class="cellrowborder" valign="top" width="20.45%" headers="mcps1.1.6.1.1 "><p id="p65775713317"><a name="p65775713317"></a><a name="p65775713317"></a>height</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.97%" headers="mcps1.1.6.1.2 "><p id="p1557195713111"><a name="p1557195713111"></a><a name="p1557195713111"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.72%" headers="mcps1.1.6.1.3 "><p id="p0498141915523"><a name="p0498141915523"></a><a name="p0498141915523"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.35%" headers="mcps1.1.6.1.4 "><p id="p1371171210524"><a name="p1371171210524"></a><a name="p1371171210524"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p6571057123119"><a name="p6571057123119"></a><a name="p6571057123119"></a>Height of the rectangle.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct StrokeRect {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.strokeRect(30, 30, 200, 150)
-          })
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | width | number | Yes | 0 | Width&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | height | number | Yes | 0 | Height&nbsp;of&nbsp;the&nbsp;rectangle. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct FillRect {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.fillRect(0,30,100,100)
+         })
         }
-        .width('100%')
-        .height('100%')
+      .width('100%')
+      .height('100%')
+    }
+  }
+  ```
+
+  ![en-us_image_0000001212218440](figures/en-us_image_0000001212218440.png)
+
+
+### strokeRect
+
+strokeRect(x: number, y: number, w: number, h: number): void
+
+Draws an outlined rectangle on the canvas.
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | width | number | Yes | 0 | Width&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | height | number | Yes | 0 | Height&nbsp;of&nbsp;the&nbsp;rectangle. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct StrokeRect {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.strokeRect(30, 30, 200, 150)
+        })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001238457271.png)
+  ![en-us_image_0000001257138359](figures/en-us_image_0000001257138359.png)
 
 
-### clearRect<a name="section1726732320916"></a>
+### clearRect
 
-clearRect\(x: number, y: number, w: number, h: number\): void
+clearRect(x: number, y: number, w: number, h: number): void
 
 Clears the content in a rectangle on the canvas.
 
--   Parameters
-
-    <a name="table1497325113371"></a>
-    <table><thead align="left"><tr id="row99691512370"><th class="cellrowborder" valign="top" width="17.54%" id="mcps1.1.6.1.1"><p id="p1596995153719"><a name="p1596995153719"></a><a name="p1596995153719"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.12%" id="mcps1.1.6.1.2"><p id="p99691451183714"><a name="p99691451183714"></a><a name="p99691451183714"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="15.229999999999999%" id="mcps1.1.6.1.3"><p id="p1642092585315"><a name="p1642092585315"></a><a name="p1642092585315"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.599999999999998%" id="mcps1.1.6.1.4"><p id="p17258191914538"><a name="p17258191914538"></a><a name="p17258191914538"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p1396985112376"><a name="p1396985112376"></a><a name="p1396985112376"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row4970951163719"><td class="cellrowborder" valign="top" width="17.54%" headers="mcps1.1.6.1.1 "><p id="p169692516373"><a name="p169692516373"></a><a name="p169692516373"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.12%" headers="mcps1.1.6.1.2 "><p id="p1297015119378"><a name="p1297015119378"></a><a name="p1297015119378"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.229999999999999%" headers="mcps1.1.6.1.3 "><p id="p54201925125311"><a name="p54201925125311"></a><a name="p54201925125311"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.599999999999998%" headers="mcps1.1.6.1.4 "><p id="p92582196539"><a name="p92582196539"></a><a name="p92582196539"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p179701351103712"><a name="p179701351103712"></a><a name="p179701351103712"></a>X-coordinate of the upper left corner of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row2970145103712"><td class="cellrowborder" valign="top" width="17.54%" headers="mcps1.1.6.1.1 "><p id="p4970951123718"><a name="p4970951123718"></a><a name="p4970951123718"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.12%" headers="mcps1.1.6.1.2 "><p id="p597085193715"><a name="p597085193715"></a><a name="p597085193715"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.229999999999999%" headers="mcps1.1.6.1.3 "><p id="p1142032510532"><a name="p1142032510532"></a><a name="p1142032510532"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.599999999999998%" headers="mcps1.1.6.1.4 "><p id="p2259111912539"><a name="p2259111912539"></a><a name="p2259111912539"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1297095193713"><a name="p1297095193713"></a><a name="p1297095193713"></a>Y-coordinate of the upper left corner of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row097345115375"><td class="cellrowborder" valign="top" width="17.54%" headers="mcps1.1.6.1.1 "><p id="p179721951193717"><a name="p179721951193717"></a><a name="p179721951193717"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.12%" headers="mcps1.1.6.1.2 "><p id="p1297365173713"><a name="p1297365173713"></a><a name="p1297365173713"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.229999999999999%" headers="mcps1.1.6.1.3 "><p id="p242017251531"><a name="p242017251531"></a><a name="p242017251531"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.599999999999998%" headers="mcps1.1.6.1.4 "><p id="p425981919537"><a name="p425981919537"></a><a name="p425981919537"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p129731351153719"><a name="p129731351153719"></a><a name="p129731351153719"></a>Width of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row12973125193714"><td class="cellrowborder" valign="top" width="17.54%" headers="mcps1.1.6.1.1 "><p id="p16973195173713"><a name="p16973195173713"></a><a name="p16973195173713"></a>height</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.12%" headers="mcps1.1.6.1.2 "><p id="p297365110376"><a name="p297365110376"></a><a name="p297365110376"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.229999999999999%" headers="mcps1.1.6.1.3 "><p id="p742092510534"><a name="p742092510534"></a><a name="p742092510534"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.599999999999998%" headers="mcps1.1.6.1.4 "><p id="p1325941914538"><a name="p1325941914538"></a><a name="p1325941914538"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p14973195116379"><a name="p14973195116379"></a><a name="p14973195116379"></a>Height of the rectangle.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct ClearRect {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.fillStyle = 'rgb(0,0,255)'
-              this.context.fillRect(0,0,500,500)
-              this.context.clearRect(20,20,150,100)
-          })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | width | number | Yes | 0 | Width&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | height | number | Yes | 0 | Height&nbsp;of&nbsp;the&nbsp;rectangle. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct ClearRect {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.fillStyle = 'rgb(0,0,255)'
+            this.context.fillRect(0,0,500,500)
+            this.context.clearRect(20,20,150,100)
+        })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/11111.png)
+  ![en-us_image_0000001211898482](figures/en-us_image_0000001211898482.png)
 
 
-### fillText<a name="section7744121831019"></a>
+### fillText
 
-fillText\(text: string, x: number, y: number\): void
+fillText(text: string, x: number, y: number): void
 
 Draws filled text on the canvas.
 
--   Parameters
-
-    <a name="table103261612144511"></a>
-    <table><thead align="left"><tr id="row9325171204513"><th class="cellrowborder" valign="top" width="19.52%" id="mcps1.1.6.1.1"><p id="p1632411210454"><a name="p1632411210454"></a><a name="p1632411210454"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="23.03%" id="mcps1.1.6.1.2"><p id="p20325312114512"><a name="p20325312114512"></a><a name="p20325312114512"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.96%" id="mcps1.1.6.1.3"><p id="p8278153019541"><a name="p8278153019541"></a><a name="p8278153019541"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.98%" id="mcps1.1.6.1.4"><p id="p178651824115416"><a name="p178651824115416"></a><a name="p178651824115416"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p9325121294515"><a name="p9325121294515"></a><a name="p9325121294515"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1325201212455"><td class="cellrowborder" valign="top" width="19.52%" headers="mcps1.1.6.1.1 "><p id="p93251612194518"><a name="p93251612194518"></a><a name="p93251612194518"></a>text</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.03%" headers="mcps1.1.6.1.2 "><p id="p163251512164512"><a name="p163251512164512"></a><a name="p163251512164512"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.3 "><p id="p1227853015411"><a name="p1227853015411"></a><a name="p1227853015411"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.98%" headers="mcps1.1.6.1.4 "><p id="p4865182413542"><a name="p4865182413542"></a><a name="p4865182413542"></a>""</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p3325191210452"><a name="p3325191210452"></a><a name="p3325191210452"></a>Text to draw.</p>
-    </td>
-    </tr>
-    <tr id="row1332612125451"><td class="cellrowborder" valign="top" width="19.52%" headers="mcps1.1.6.1.1 "><p id="p1632515127457"><a name="p1632515127457"></a><a name="p1632515127457"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.03%" headers="mcps1.1.6.1.2 "><p id="p19325121212456"><a name="p19325121212456"></a><a name="p19325121212456"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.3 "><p id="p5278230135415"><a name="p5278230135415"></a><a name="p5278230135415"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.98%" headers="mcps1.1.6.1.4 "><p id="p1986562475418"><a name="p1986562475418"></a><a name="p1986562475418"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p16326101284514"><a name="p16326101284514"></a><a name="p16326101284514"></a>X-coordinate of the lower left corner of the text.</p>
-    </td>
-    </tr>
-    <tr id="row6326121224511"><td class="cellrowborder" valign="top" width="19.52%" headers="mcps1.1.6.1.1 "><p id="p1032613121457"><a name="p1032613121457"></a><a name="p1032613121457"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.03%" headers="mcps1.1.6.1.2 "><p id="p19326212164513"><a name="p19326212164513"></a><a name="p19326212164513"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.3 "><p id="p827863055414"><a name="p827863055414"></a><a name="p827863055414"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.98%" headers="mcps1.1.6.1.4 "><p id="p186510247545"><a name="p186510247545"></a><a name="p186510247545"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p732691284511"><a name="p732691284511"></a><a name="p732691284511"></a>Y-coordinate of the lower left corner of the text.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct FillText {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.font = '30px sans-serif'
-              this.context.fillText("Hello World!", 20, 100)
-          })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | text | string | Yes | "" | Text&nbsp;to&nbsp;draw. | 
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;lower&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;text. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;lower&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;text. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct FillText {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.font = '30px sans-serif'
+            this.context.fillText("Hello World!", 20, 100)
+        })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001238537297.png)
+  ![en-us_image_0000001257058399](figures/en-us_image_0000001257058399.png)
 
 
-### strokeText<a name="section124111813201112"></a>
+### strokeText
 
-strokeText\(text: string, x: number, y: number\): void
+strokeText(text: string, x: number, y: number): void
 
 Draws a text stroke on the canvas.
 
--   Parameters
-
-    <a name="table189228539482"></a>
-    <table><thead align="left"><tr id="row11921155384816"><th class="cellrowborder" valign="top" width="19.75%" id="mcps1.1.6.1.1"><p id="p12920145313483"><a name="p12920145313483"></a><a name="p12920145313483"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="24.55%" id="mcps1.1.6.1.2"><p id="p89211953114816"><a name="p89211953114816"></a><a name="p89211953114816"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.41%" id="mcps1.1.6.1.3"><p id="p3411171520559"><a name="p3411171520559"></a><a name="p3411171520559"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.78%" id="mcps1.1.6.1.4"><p id="p15205122114556"><a name="p15205122114556"></a><a name="p15205122114556"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p9921165312483"><a name="p9921165312483"></a><a name="p9921165312483"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1192175324817"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p1392116531480"><a name="p1392116531480"></a><a name="p1392116531480"></a>text</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="24.55%" headers="mcps1.1.6.1.2 "><p id="p1792155364820"><a name="p1792155364820"></a><a name="p1792155364820"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.3 "><p id="p1941111517554"><a name="p1941111517554"></a><a name="p1941111517554"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.6.1.4 "><p id="p1205102155514"><a name="p1205102155514"></a><a name="p1205102155514"></a>""</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p69211553194811"><a name="p69211553194811"></a><a name="p69211553194811"></a>Text to draw.</p>
-    </td>
-    </tr>
-    <tr id="row199221653124812"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p11921175394815"><a name="p11921175394815"></a><a name="p11921175394815"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="24.55%" headers="mcps1.1.6.1.2 "><p id="p692295320489"><a name="p692295320489"></a><a name="p692295320489"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.3 "><p id="p24114152550"><a name="p24114152550"></a><a name="p24114152550"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.6.1.4 "><p id="p1620592111556"><a name="p1620592111556"></a><a name="p1620592111556"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p179221353164818"><a name="p179221353164818"></a><a name="p179221353164818"></a>X-coordinate of the lower left corner of the text.</p>
-    </td>
-    </tr>
-    <tr id="row9922453144814"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p2922175384813"><a name="p2922175384813"></a><a name="p2922175384813"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="24.55%" headers="mcps1.1.6.1.2 "><p id="p189223537489"><a name="p189223537489"></a><a name="p189223537489"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.3 "><p id="p1041115154552"><a name="p1041115154552"></a><a name="p1041115154552"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.6.1.4 "><p id="p620572117554"><a name="p620572117554"></a><a name="p620572117554"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p10922175364811"><a name="p10922175364811"></a><a name="p10922175364811"></a>Y-coordinate of the lower left corner of the text.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct StrokeText {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.font = '55px sans-serif'
-              this.context.strokeText("Hello World!", 20, 60)
-          })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | text | string | Yes | "" | Text&nbsp;to&nbsp;draw. | 
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;lower&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;text. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;lower&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;text. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct StrokeText {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.font = '55px sans-serif'
+            this.context.strokeText("Hello World!", 20, 60)
+        })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
-
-    ![](figures/en-us_image_0000001193756416.png)
-
-
-### measureText<a name="section112201413151219"></a>
-
-measureText\(text: string\): TextMetrics
-
-Returns a  **TextMetrics**  object used to obtain the width of specified text.
-
--   Parameters
-
-    <a name="table44681253165017"></a>
-    <table><thead align="left"><tr id="row1746814532503"><th class="cellrowborder" valign="top" width="21.73%" id="mcps1.1.6.1.1"><p id="p144671653105011"><a name="p144671653105011"></a><a name="p144671653105011"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="15.329999999999998%" id="mcps1.1.6.1.2"><p id="p16467053115020"><a name="p16467053115020"></a><a name="p16467053115020"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.15%" id="mcps1.1.6.1.3"><p id="p53223268565"><a name="p53223268565"></a><a name="p53223268565"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.28%" id="mcps1.1.6.1.4"><p id="p1437813214565"><a name="p1437813214565"></a><a name="p1437813214565"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p64681853145011"><a name="p64681853145011"></a><a name="p64681853145011"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1246815355020"><td class="cellrowborder" valign="top" width="21.73%" headers="mcps1.1.6.1.1 "><p id="p14468145385014"><a name="p14468145385014"></a><a name="p14468145385014"></a>text</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.329999999999998%" headers="mcps1.1.6.1.2 "><p id="p1146819531509"><a name="p1146819531509"></a><a name="p1146819531509"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.15%" headers="mcps1.1.6.1.3 "><p id="p12322926205620"><a name="p12322926205620"></a><a name="p12322926205620"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.28%" headers="mcps1.1.6.1.4 "><p id="p153782032195616"><a name="p153782032195616"></a><a name="p153782032195616"></a>""</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p94681853175017"><a name="p94681853175017"></a><a name="p94681853175017"></a>Text to be measured.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Return values
-
-    <a name="table16391145317913"></a>
-    <table><thead align="left"><tr id="row2391145319910"><th class="cellrowborder" valign="top" width="17.380000000000003%" id="mcps1.1.3.1.1"><p id="p13911353991"><a name="p13911353991"></a><a name="p13911353991"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="82.62%" id="mcps1.1.3.1.2"><p id="p193911531395"><a name="p193911531395"></a><a name="p193911531395"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1339114531391"><td class="cellrowborder" valign="top" width="17.380000000000003%" headers="mcps1.1.3.1.1 "><p id="p156879250282"><a name="p156879250282"></a><a name="p156879250282"></a>TextMetrics</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="82.62%" headers="mcps1.1.3.1.2 "><p id="p1312703682719"><a name="p1312703682719"></a><a name="p1312703682719"></a><strong id="b1311412844718"><a name="b1311412844718"></a><a name="b1311412844718"></a>TextMetrics</strong> object.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   **TextMetrics**  attributes
-
-    <a name="table67211828124016"></a>
-    <table><thead align="left"><tr id="row108577289405"><th class="cellrowborder" valign="top" width="22.872287228722872%" id="mcps1.1.4.1.1"><p id="p385742814403"><a name="p385742814403"></a><a name="p385742814403"></a>Attribute</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="29.352935293529352%" id="mcps1.1.4.1.2"><p id="p19857192816408"><a name="p19857192816408"></a><a name="p19857192816408"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="47.774777477747776%" id="mcps1.1.4.1.3"><p id="p18573288402"><a name="p18573288402"></a><a name="p18573288402"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1085792824019"><td class="cellrowborder" valign="top" width="22.872287228722872%" headers="mcps1.1.4.1.1 "><p id="p1485792815404"><a name="p1485792815404"></a><a name="p1485792815404"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.352935293529352%" headers="mcps1.1.4.1.2 "><p id="p11857182804010"><a name="p11857182804010"></a><a name="p11857182804010"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="47.774777477747776%" headers="mcps1.1.4.1.3 "><p id="p1785711281405"><a name="p1785711281405"></a><a name="p1785711281405"></a>Width of the text string.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct MeasureText {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.font = '50px sans-serif'
-              this.context.fillText("Hello World!", 20, 100)
-              this.context.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200)
-          })
-        }
-        .width('100%')
-        .height('100%')
+  }
+  ```
+
+  ![en-us_image_0000001256978349](figures/en-us_image_0000001256978349.png)
+
+
+### measureText
+
+measureText(text: string): TextMetrics
+
+Returns a **TextMetrics** object used to obtain the width of specified text.
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | text | string | Yes | "" | Text&nbsp;to&nbsp;be&nbsp;measured. | 
+
+- Return value
+    | Type | Description | 
+  | -------- | -------- |
+  | TextMetrics | **TextMetrics**&nbsp;object. | 
+
+- **TextMetrics** attributes
+    | Name | Type | Description | 
+  | -------- | -------- | -------- |
+  | width | number | Width&nbsp;of&nbsp;the&nbsp;text. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct MeasureText {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.font = '50px sans-serif'
+            this.context.fillText("Hello World!", 20, 100)
+            this.context.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200)
+        })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001238476361.png)
+  ![en-us_image_0000001257138343](figures/en-us_image_0000001257138343.png)
 
 
-### stroke<a name="section2208152412139"></a>
+### stroke
 
-stroke\(path?: Path2D\): void
+stroke(path?: Path2D): void
 
 Strokes a path.
 
--   Parameters
-
-    <a name="table01731111185812"></a>
-    <table><thead align="left"><tr id="row1317391185820"><th class="cellrowborder" valign="top" width="19.75%" id="mcps1.1.6.1.1"><p id="p1617431110587"><a name="p1617431110587"></a><a name="p1617431110587"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="24.55%" id="mcps1.1.6.1.2"><p id="p217471110589"><a name="p217471110589"></a><a name="p217471110589"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.41%" id="mcps1.1.6.1.3"><p id="p41741511145812"><a name="p41741511145812"></a><a name="p41741511145812"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.78%" id="mcps1.1.6.1.4"><p id="p317461165818"><a name="p317461165818"></a><a name="p317461165818"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p3174181135812"><a name="p3174181135812"></a><a name="p3174181135812"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row18174121155810"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p1517411110585"><a name="p1517411110585"></a><a name="p1517411110585"></a>path</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="24.55%" headers="mcps1.1.6.1.2 "><p id="p111741011145820"><a name="p111741011145820"></a><a name="p111741011145820"></a><a href="ts-components-canvas-path2d.md">Path2D</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.3 "><p id="p417431135819"><a name="p417431135819"></a><a name="p417431135819"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.6.1.4 "><p id="p11751111155815"><a name="p11751111155815"></a><a name="p11751111155815"></a>null</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p171751711145810"><a name="p171751711145810"></a><a name="p171751711145810"></a>A <strong id="b20467161218541"><a name="b20467161218541"></a><a name="b20467161218541"></a>Path2D</strong> path to draw.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct CanvasExample {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.moveTo(25, 25)
-              this.context.lineTo(25, 105)
-              this.context.strokeStyle = 'rgb(0,0,255)'
-              this.context.stroke()
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | path | [Path2D](../reference/arkui-ts/ts-components-canvas-path2d.md) | No | null | A&nbsp;**Path2D**&nbsp;path&nbsp;to&nbsp;draw. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct Stroke {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.moveTo(25, 25)
+            this.context.lineTo(25, 105)
+            this.context.strokeStyle = 'rgb(0,0,255)'
+            this.context.stroke()
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001193436448.png)
+  ![en-us_image_0000001257058411](figures/en-us_image_0000001257058411.png)
 
 
-### beginPath<a name="section1921154810137"></a>
+### beginPath
 
-beginPath\(\): void
+beginPath(): void
 
 Creates a drawing path.
 
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct BeginPath {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.beginPath()
-              this.context.lineWidth = 6
-              this.context.strokeStyle = '#0000ff'
-              this.context.moveTo(15, 80)
-              this.context.lineTo(280, 160)
-              this.context.stroke()
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct BeginPath {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.beginPath()
+            this.context.lineWidth = 6
+            this.context.strokeStyle = '#0000ff'
+            this.context.moveTo(15, 80)
+            this.context.lineTo(280, 160)
+            this.context.stroke()
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001238556395.png)
+  ![en-us_image_0000001212058478](figures/en-us_image_0000001212058478.png)
 
 
-### moveTo<a name="section1154275516341"></a>
+### moveTo
 
-moveTo\(x: number, y: number\): void
+moveTo(x: number, y: number): void
 
 Moves a drawing path to a target position on the canvas.
 
--   Parameters
-
-    <a name="table043983775614"></a>
-    <table><thead align="left"><tr id="row11437143711564"><th class="cellrowborder" valign="top" width="16.6%" id="mcps1.1.6.1.1"><p id="p17437193775619"><a name="p17437193775619"></a><a name="p17437193775619"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.979999999999997%" id="mcps1.1.6.1.2"><p id="p1643773714564"><a name="p1643773714564"></a><a name="p1643773714564"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.78%" id="mcps1.1.6.1.3"><p id="p105471588213"><a name="p105471588213"></a><a name="p105471588213"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="21.13%" id="mcps1.1.6.1.4"><p id="p5994549311"><a name="p5994549311"></a><a name="p5994549311"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p04379374560"><a name="p04379374560"></a><a name="p04379374560"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row20438153716561"><td class="cellrowborder" valign="top" width="16.6%" headers="mcps1.1.6.1.1 "><p id="p10437337195612"><a name="p10437337195612"></a><a name="p10437337195612"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.979999999999997%" headers="mcps1.1.6.1.2 "><p id="p743753720562"><a name="p743753720562"></a><a name="p743753720562"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.6.1.3 "><p id="p5548185814218"><a name="p5548185814218"></a><a name="p5548185814218"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.13%" headers="mcps1.1.6.1.4 "><p id="p1099410410313"><a name="p1099410410313"></a><a name="p1099410410313"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p443813719561"><a name="p443813719561"></a><a name="p443813719561"></a>X-coordinate of the target position.</p>
-    </td>
-    </tr>
-    <tr id="row12439163719567"><td class="cellrowborder" valign="top" width="16.6%" headers="mcps1.1.6.1.1 "><p id="p1143873755614"><a name="p1143873755614"></a><a name="p1143873755614"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.979999999999997%" headers="mcps1.1.6.1.2 "><p id="p154384373560"><a name="p154384373560"></a><a name="p154384373560"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.6.1.3 "><p id="p55486589211"><a name="p55486589211"></a><a name="p55486589211"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.13%" headers="mcps1.1.6.1.4 "><p id="p119941442316"><a name="p119941442316"></a><a name="p119941442316"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p9438203717562"><a name="p9438203717562"></a><a name="p9438203717562"></a>Y-coordinate of the target position.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct MoveTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.beginPath()
-              this.context.moveTo(10, 10)
-              this.context.lineTo(280, 160)
-              this.context.stroke()
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;target&nbsp;position. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;target&nbsp;position. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct MoveTo {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.beginPath()
+            this.context.moveTo(10, 10)
+            this.context.lineTo(280, 160)
+            this.context.stroke()
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001193481094.png)
+  ![en-us_image_0000001256858391](figures/en-us_image_0000001256858391.png)
 
 
-### lineTo<a name="section1754164915355"></a>
+### lineTo
 
-lineTo\(x: number, y: number\): void
+lineTo(x: number, y: number): void
 
 Connects the current point to a target position using a straight line.
 
--   Parameters
-
-    <a name="table36786515365"></a>
-    <table><thead align="left"><tr id="row3678205163613"><th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.1"><p id="p166791352362"><a name="p166791352362"></a><a name="p166791352362"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.78%" id="mcps1.1.6.1.2"><p id="p136791256363"><a name="p136791256363"></a><a name="p136791256363"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.21%" id="mcps1.1.6.1.3"><p id="p13679855361"><a name="p13679855361"></a><a name="p13679855361"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.989999999999998%" id="mcps1.1.6.1.4"><p id="p8679145153619"><a name="p8679145153619"></a><a name="p8679145153619"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p767911583619"><a name="p767911583619"></a><a name="p767911583619"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row36795543610"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p106797533618"><a name="p106797533618"></a><a name="p106797533618"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.78%" headers="mcps1.1.6.1.2 "><p id="p167918514362"><a name="p167918514362"></a><a name="p167918514362"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.21%" headers="mcps1.1.6.1.3 "><p id="p1567912515362"><a name="p1567912515362"></a><a name="p1567912515362"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.989999999999998%" headers="mcps1.1.6.1.4 "><p id="p36791453361"><a name="p36791453361"></a><a name="p36791453361"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p186791551361"><a name="p186791551361"></a><a name="p186791551361"></a>X-coordinate of the target position.</p>
-    </td>
-    </tr>
-    <tr id="row167912523610"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p146801757367"><a name="p146801757367"></a><a name="p146801757367"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.78%" headers="mcps1.1.6.1.2 "><p id="p1868018514361"><a name="p1868018514361"></a><a name="p1868018514361"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.21%" headers="mcps1.1.6.1.3 "><p id="p768010523612"><a name="p768010523612"></a><a name="p768010523612"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.989999999999998%" headers="mcps1.1.6.1.4 "><p id="p1268020563620"><a name="p1268020563620"></a><a name="p1268020563620"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p19680656365"><a name="p19680656365"></a><a name="p19680656365"></a>Y-coordinate of the target position.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct LineTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.beginPath()
-              this.context.moveTo(10, 10)
-              this.context.lineTo(280, 160)
-              this.context.stroke()
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;target&nbsp;position. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;target&nbsp;position. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct LineTo {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.beginPath()
+            this.context.moveTo(10, 10)
+            this.context.lineTo(280, 160)
+            this.context.stroke()
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001238601051.png)
+  ![en-us_image_0000001212378414](figures/en-us_image_0000001212378414.png)
 
 
-### closePath<a name="section10498111510364"></a>
+### closePath
 
-closePath\(\): void
+closePath(): void
 
 Draws a closed path.
 
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct ClosePath {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-                this.context.beginPath()
-                this.context.moveTo(30, 30)
-                this.context.lineTo(110, 30)
-                this.context.lineTo(70, 90)
-                this.context.closePath()
-                this.context.stroke()
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct ClosePath {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+              this.context.beginPath()
+              this.context.moveTo(30, 30)
+              this.context.lineTo(110, 30)
+              this.context.lineTo(70, 90)
+              this.context.closePath()
+              this.context.stroke()
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001193321136.png)
+  ![en-us_image_0000001256978347](figures/en-us_image_0000001256978347.png)
 
 
-### createPattern<a name="section1643216163371"></a>
+### createPattern
 
-createPattern\(image: ImageBitmap, repetition: string\): void
+createPattern(image: ImageBitmap, repetition: string): void
 
 Creates a pattern for image filling based on a specified source image and repetition mode.
 
--   Parameters
-
-    <a name="table13990205814558"></a>
-    <table><thead align="left"><tr id="row199901558125515"><th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.1"><p id="p2098995825514"><a name="p2098995825514"></a><a name="p2098995825514"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="17.330000000000002%" id="mcps1.1.6.1.2"><p id="p6989958155520"><a name="p6989958155520"></a><a name="p6989958155520"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.44%" id="mcps1.1.6.1.3"><p id="p178971910470"><a name="p178971910470"></a><a name="p178971910470"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.21%" id="mcps1.1.6.1.4"><p id="p17300151771"><a name="p17300151771"></a><a name="p17300151771"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p9990358145510"><a name="p9990358145510"></a><a name="p9990358145510"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row199075815553"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p09905583557"><a name="p09905583557"></a><a name="p09905583557"></a>image</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.330000000000002%" headers="mcps1.1.6.1.2 "><p id="p19901558185511"><a name="p19901558185511"></a><a name="p19901558185511"></a><a href="ts-components-canvas-imagebitmap.md">ImageBitmap</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.44%" headers="mcps1.1.6.1.3 "><p id="p168975106719"><a name="p168975106719"></a><a name="p168975106719"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.4 "><p id="p773012152711"><a name="p773012152711"></a><a name="p773012152711"></a>null</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1399075815558"><a name="p1399075815558"></a><a name="p1399075815558"></a>Source image. For details, see <a href="ts-components-canvas-imagebitmap.md">ImageBitmap</a>.</p>
-    </td>
-    </tr>
-    <tr id="row17990058105510"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p8990165812552"><a name="p8990165812552"></a><a name="p8990165812552"></a>repetition</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.330000000000002%" headers="mcps1.1.6.1.2 "><p id="p19905580556"><a name="p19905580556"></a><a name="p19905580556"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.44%" headers="mcps1.1.6.1.3 "><p id="p2897910374"><a name="p2897910374"></a><a name="p2897910374"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.4 "><p id="p67303153711"><a name="p67303153711"></a><a name="p67303153711"></a>""</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p699017580554"><a name="p699017580554"></a><a name="p699017580554"></a>Repetition mode. The value can be <strong id="b46231362329"><a name="b46231362329"></a><a name="b46231362329"></a>'repeat'</strong>, <strong id="b962410616322"><a name="b962410616322"></a><a name="b962410616322"></a>'repeat-x'</strong>, <strong id="b962411614322"><a name="b962411614322"></a><a name="b962411614322"></a>'repeat-y'</strong>, or <strong id="b562406173216"><a name="b562406173216"></a><a name="b562406173216"></a>'no-repeat'</strong>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct CreatePattern {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
-    
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              var pattern = this.context.createPattern(this.img, 'repeat')
-              this.context.fillStyle = pattern
-              this.context.fillRect(0, 0, 200, 200)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | image | [ERROR:Invalid&nbsp;link:en-us_topic_0000001212378364.xml#en-us_topic_0000001193075104_xref1892917323814,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml) | Yes | null | Source&nbsp;image.&nbsp;For&nbsp;details,&nbsp;see&nbsp;[ERROR:Invalid&nbsp;link:en-us_topic_0000001212378364.xml#xref539610179238,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml). | 
+  | repetition | string | Yes | "" | Repetition&nbsp;mode.&nbsp;The&nbsp;value&nbsp;can&nbsp;be&nbsp;**'repeat'**,&nbsp;**'repeat-x'**,&nbsp;**'repeat-y'**,&nbsp;or&nbsp;**'no-repeat'**. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct CreatePattern {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            var pattern = this.context.createPattern(this.img, 'repeat')
+            this.context.fillStyle = pattern
+            this.context.fillRect(0, 0, 200, 200)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001238401029.png)
+  ![en-us_image_0000001211898490](figures/en-us_image_0000001211898490.png)
 
 
-### bezierCurveTo<a name="section16886718383"></a>
+### bezierCurveTo
 
-bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number\): void
+bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void
 
 Draws a cubic bezier curve on the canvas.
 
--   Parameters
-
-    <a name="table1846413314014"></a>
-    <table><thead align="left"><tr id="row104611434015"><th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.1"><p id="p19461531705"><a name="p19461531705"></a><a name="p19461531705"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.42%" id="mcps1.1.6.1.2"><p id="p646114310018"><a name="p646114310018"></a><a name="p646114310018"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.65%" id="mcps1.1.6.1.3"><p id="p58496449811"><a name="p58496449811"></a><a name="p58496449811"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.91%" id="mcps1.1.6.1.4"><p id="p181781550984"><a name="p181781550984"></a><a name="p181781550984"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p194611739019"><a name="p194611739019"></a><a name="p194611739019"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row44611732013"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p14612031206"><a name="p14612031206"></a><a name="p14612031206"></a>cp1x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.42%" headers="mcps1.1.6.1.2 "><p id="p164611735019"><a name="p164611735019"></a><a name="p164611735019"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.65%" headers="mcps1.1.6.1.3 "><p id="p98496449818"><a name="p98496449818"></a><a name="p98496449818"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.91%" headers="mcps1.1.6.1.4 "><p id="p5178195012810"><a name="p5178195012810"></a><a name="p5178195012810"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p54611233019"><a name="p54611233019"></a><a name="p54611233019"></a>X-coordinate of the first parameter of the bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row4462123601"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p84612031108"><a name="p84612031108"></a><a name="p84612031108"></a>cp1y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.42%" headers="mcps1.1.6.1.2 "><p id="p134621131401"><a name="p134621131401"></a><a name="p134621131401"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.65%" headers="mcps1.1.6.1.3 "><p id="p08491644983"><a name="p08491644983"></a><a name="p08491644983"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.91%" headers="mcps1.1.6.1.4 "><p id="p16178850583"><a name="p16178850583"></a><a name="p16178850583"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1046212316013"><a name="p1046212316013"></a><a name="p1046212316013"></a>Y-coordinate of the first parameter of the bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row194621034020"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p646213701"><a name="p646213701"></a><a name="p646213701"></a>cp2x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.42%" headers="mcps1.1.6.1.2 "><p id="p8462193507"><a name="p8462193507"></a><a name="p8462193507"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.65%" headers="mcps1.1.6.1.3 "><p id="p88492447818"><a name="p88492447818"></a><a name="p88492447818"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.91%" headers="mcps1.1.6.1.4 "><p id="p91784507818"><a name="p91784507818"></a><a name="p91784507818"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p746263502"><a name="p746263502"></a><a name="p746263502"></a>X-coordinate of the second parameter of the bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row144621935018"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p1446243505"><a name="p1446243505"></a><a name="p1446243505"></a>cp2y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.42%" headers="mcps1.1.6.1.2 "><p id="p1746217311020"><a name="p1746217311020"></a><a name="p1746217311020"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.65%" headers="mcps1.1.6.1.3 "><p id="p128498446811"><a name="p128498446811"></a><a name="p128498446811"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.91%" headers="mcps1.1.6.1.4 "><p id="p817895013813"><a name="p817895013813"></a><a name="p817895013813"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p9462732001"><a name="p9462732001"></a><a name="p9462732001"></a>Y-coordinate of the second parameter of the bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row14637315013"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p34621339011"><a name="p34621339011"></a><a name="p34621339011"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.42%" headers="mcps1.1.6.1.2 "><p id="p16463939016"><a name="p16463939016"></a><a name="p16463939016"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.65%" headers="mcps1.1.6.1.3 "><p id="p085019441280"><a name="p085019441280"></a><a name="p085019441280"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.91%" headers="mcps1.1.6.1.4 "><p id="p017813502087"><a name="p017813502087"></a><a name="p017813502087"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p104631831109"><a name="p104631831109"></a><a name="p104631831109"></a>X-coordinate of the end point on the bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row114631533016"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p346315313015"><a name="p346315313015"></a><a name="p346315313015"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.42%" headers="mcps1.1.6.1.2 "><p id="p84631033020"><a name="p84631033020"></a><a name="p84631033020"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.65%" headers="mcps1.1.6.1.3 "><p id="p68507441081"><a name="p68507441081"></a><a name="p68507441081"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.91%" headers="mcps1.1.6.1.4 "><p id="p61781501384"><a name="p61781501384"></a><a name="p61781501384"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p74631331309"><a name="p74631331309"></a><a name="p74631331309"></a>Y-coordinate of the end point on the bezier curve.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct BezierCurveTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.beginPath()
-              this.context.moveTo(10, 10)
-              this.context.bezierCurveTo(20, 100, 200, 100, 200, 20)
-              this.context.stroke()
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | cp1x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;first&nbsp;parameter&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve. | 
+  | cp1y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;first&nbsp;parameter&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve. | 
+  | cp2x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;second&nbsp;parameter&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve. | 
+  | cp2y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;second&nbsp;parameter&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve. | 
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;on&nbsp;the&nbsp;bezier&nbsp;curve. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;on&nbsp;the&nbsp;bezier&nbsp;curve. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct BezierCurveTo {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.beginPath()
+            this.context.moveTo(10, 10)
+            this.context.bezierCurveTo(20, 100, 200, 100, 200, 20)
+            this.context.stroke()
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001238281067.png)
+  ![en-us_image_0000001257138349](figures/en-us_image_0000001257138349.png)
 
 
-### quadraticCurveTo<a name="section191815248399"></a>
+### quadraticCurveTo
 
-quadraticCurveTo\(cpx: number, cpy: number, x: number, y: number\): void
+quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
 
 Draws a quadratic curve on the canvas.
 
--   Parameters
-
-    <a name="table844513311575"></a>
-    <table><thead align="left"><tr id="row154437316717"><th class="cellrowborder" valign="top" width="28.51000000000001%" id="mcps1.1.6.1.1"><p id="p1844333114710"><a name="p1844333114710"></a><a name="p1844333114710"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="15.750000000000004%" id="mcps1.1.6.1.2"><p id="p194430318720"><a name="p194430318720"></a><a name="p194430318720"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.260000000000002%" id="mcps1.1.6.1.3"><p id="p698743112914"><a name="p698743112914"></a><a name="p698743112914"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.970000000000002%" id="mcps1.1.6.1.4"><p id="p63541938298"><a name="p63541938298"></a><a name="p63541938298"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51000000000001%" id="mcps1.1.6.1.5"><p id="p544383119711"><a name="p544383119711"></a><a name="p544383119711"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1444412310715"><td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.1 "><p id="p134443311719"><a name="p134443311719"></a><a name="p134443311719"></a>cpx</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.750000000000004%" headers="mcps1.1.6.1.2 "><p id="p134446311572"><a name="p134446311572"></a><a name="p134446311572"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.260000000000002%" headers="mcps1.1.6.1.3 "><p id="p2987531891"><a name="p2987531891"></a><a name="p2987531891"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.970000000000002%" headers="mcps1.1.6.1.4 "><p id="p1135473817912"><a name="p1135473817912"></a><a name="p1135473817912"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.5 "><p id="p04441311574"><a name="p04441311574"></a><a name="p04441311574"></a>X-coordinate of the bezier curve parameter.</p>
-    </td>
-    </tr>
-    <tr id="row174449318711"><td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.1 "><p id="p9444431675"><a name="p9444431675"></a><a name="p9444431675"></a>cpy</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.750000000000004%" headers="mcps1.1.6.1.2 "><p id="p84444319719"><a name="p84444319719"></a><a name="p84444319719"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.260000000000002%" headers="mcps1.1.6.1.3 "><p id="p1998716319912"><a name="p1998716319912"></a><a name="p1998716319912"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.970000000000002%" headers="mcps1.1.6.1.4 "><p id="p33541388916"><a name="p33541388916"></a><a name="p33541388916"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.5 "><p id="p144415316718"><a name="p144415316718"></a><a name="p144415316718"></a>Y-coordinate of the bezier curve parameter.</p>
-    </td>
-    </tr>
-    <tr id="row64452311714"><td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.1 "><p id="p184441831872"><a name="p184441831872"></a><a name="p184441831872"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.750000000000004%" headers="mcps1.1.6.1.2 "><p id="p1044417311871"><a name="p1044417311871"></a><a name="p1044417311871"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.260000000000002%" headers="mcps1.1.6.1.3 "><p id="p139871231498"><a name="p139871231498"></a><a name="p139871231498"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.970000000000002%" headers="mcps1.1.6.1.4 "><p id="p10354838791"><a name="p10354838791"></a><a name="p10354838791"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.5 "><p id="p144440318719"><a name="p144440318719"></a><a name="p144440318719"></a>X-coordinate of the end point on the bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row14451031679"><td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.1 "><p id="p184458316712"><a name="p184458316712"></a><a name="p184458316712"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.750000000000004%" headers="mcps1.1.6.1.2 "><p id="p19445183111717"><a name="p19445183111717"></a><a name="p19445183111717"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.260000000000002%" headers="mcps1.1.6.1.3 "><p id="p398783119910"><a name="p398783119910"></a><a name="p398783119910"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.970000000000002%" headers="mcps1.1.6.1.4 "><p id="p1535483815915"><a name="p1535483815915"></a><a name="p1535483815915"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.5 "><p id="p8445203119717"><a name="p8445203119717"></a><a name="p8445203119717"></a>Y-coordinate of the end point on the bezier curve.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct QuadraticCurveTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true);
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.beginPath();
-              this.context.moveTo(20, 20);
-              this.context.quadraticCurveTo(100, 100, 200, 20);
-              this.context.stroke();
-          })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | cpx | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve&nbsp;parameter. | 
+  | cpy | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve&nbsp;parameter. | 
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;on&nbsp;the&nbsp;bezier&nbsp;curve. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;on&nbsp;the&nbsp;bezier&nbsp;curve. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct QuadraticCurveTo {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.beginPath();
+            this.context.moveTo(20, 20);
+            this.context.quadraticCurveTo(100, 100, 200, 20);
+            this.context.stroke();
+        })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001193641084.png)
+  ![en-us_image_0000001257058397](figures/en-us_image_0000001257058397.png)
 
 
-### arc<a name="section884848134014"></a>
+### arc
 
-arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean\): void
+arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
 
 Draws an arc on the canvas.
 
--   Parameters
-
-    <a name="table1685815501294"></a>
-    <table><thead align="left"><tr id="row58561950293"><th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.1"><p id="p18565502915"><a name="p18565502915"></a><a name="p18565502915"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="19.139999999999997%" id="mcps1.1.6.1.2"><p id="p13856175017919"><a name="p13856175017919"></a><a name="p13856175017919"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.15%" id="mcps1.1.6.1.3"><p id="p17163102401019"><a name="p17163102401019"></a><a name="p17163102401019"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.69%" id="mcps1.1.6.1.4"><p id="p544133219101"><a name="p544133219101"></a><a name="p544133219101"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p16856125011919"><a name="p16856125011919"></a><a name="p16856125011919"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1785705020920"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p285685011911"><a name="p285685011911"></a><a name="p285685011911"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.139999999999997%" headers="mcps1.1.6.1.2 "><p id="p1685612506911"><a name="p1685612506911"></a><a name="p1685612506911"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.15%" headers="mcps1.1.6.1.3 "><p id="p51631424171012"><a name="p51631424171012"></a><a name="p51631424171012"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.69%" headers="mcps1.1.6.1.4 "><p id="p174493251016"><a name="p174493251016"></a><a name="p174493251016"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p6857105019918"><a name="p6857105019918"></a><a name="p6857105019918"></a>X-coordinate of the center point of the arc.</p>
-    </td>
-    </tr>
-    <tr id="row1485745015913"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p148573503915"><a name="p148573503915"></a><a name="p148573503915"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.139999999999997%" headers="mcps1.1.6.1.2 "><p id="p1585719507913"><a name="p1585719507913"></a><a name="p1585719507913"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.15%" headers="mcps1.1.6.1.3 "><p id="p71639241108"><a name="p71639241108"></a><a name="p71639241108"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.69%" headers="mcps1.1.6.1.4 "><p id="p74410325105"><a name="p74410325105"></a><a name="p74410325105"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1685725017912"><a name="p1685725017912"></a><a name="p1685725017912"></a>Y-coordinate of the center point of the arc.</p>
-    </td>
-    </tr>
-    <tr id="row885717501999"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p128576506913"><a name="p128576506913"></a><a name="p128576506913"></a>radius</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.139999999999997%" headers="mcps1.1.6.1.2 "><p id="p085765018915"><a name="p085765018915"></a><a name="p085765018915"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.15%" headers="mcps1.1.6.1.3 "><p id="p216362441010"><a name="p216362441010"></a><a name="p216362441010"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.69%" headers="mcps1.1.6.1.4 "><p id="p19441732111015"><a name="p19441732111015"></a><a name="p19441732111015"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p685716502912"><a name="p685716502912"></a><a name="p685716502912"></a>Radius of the arc.</p>
-    </td>
-    </tr>
-    <tr id="row1885817507919"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p985755013918"><a name="p985755013918"></a><a name="p985755013918"></a>startAngle</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.139999999999997%" headers="mcps1.1.6.1.2 "><p id="p68571150999"><a name="p68571150999"></a><a name="p68571150999"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.15%" headers="mcps1.1.6.1.3 "><p id="p016342413100"><a name="p016342413100"></a><a name="p016342413100"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.69%" headers="mcps1.1.6.1.4 "><p id="p1344143241019"><a name="p1344143241019"></a><a name="p1344143241019"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p118573505912"><a name="p118573505912"></a><a name="p118573505912"></a>Start radian of the arc.</p>
-    </td>
-    </tr>
-    <tr id="row2858185013911"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p88585501991"><a name="p88585501991"></a><a name="p88585501991"></a>endAngle</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.139999999999997%" headers="mcps1.1.6.1.2 "><p id="p188581050996"><a name="p188581050996"></a><a name="p188581050996"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.15%" headers="mcps1.1.6.1.3 "><p id="p1016332441011"><a name="p1016332441011"></a><a name="p1016332441011"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.69%" headers="mcps1.1.6.1.4 "><p id="p1344183291013"><a name="p1344183291013"></a><a name="p1344183291013"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p98581950097"><a name="p98581950097"></a><a name="p98581950097"></a>End radian of the arc.</p>
-    </td>
-    </tr>
-    <tr id="row178587502914"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p148583501595"><a name="p148583501595"></a><a name="p148583501595"></a>anticlockwise</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.139999999999997%" headers="mcps1.1.6.1.2 "><p id="p1285812501894"><a name="p1285812501894"></a><a name="p1285812501894"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.15%" headers="mcps1.1.6.1.3 "><p id="p4163624101016"><a name="p4163624101016"></a><a name="p4163624101016"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.69%" headers="mcps1.1.6.1.4 "><p id="p1744163214109"><a name="p1744163214109"></a><a name="p1744163214109"></a>false</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p98589506912"><a name="p98589506912"></a><a name="p98589506912"></a>Whether to draw the arc counterclockwise.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct Arc {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.beginPath()
-              this.context.arc(100, 75, 50, 0, 6.28)
-              this.context.stroke()
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;point&nbsp;of&nbsp;the&nbsp;arc. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;point&nbsp;of&nbsp;the&nbsp;arc. | 
+  | radius | number | Yes | 0 | Radius&nbsp;of&nbsp;the&nbsp;arc. | 
+  | startAngle | number | Yes | 0 | Start&nbsp;radian&nbsp;of&nbsp;the&nbsp;arc. | 
+  | endAngle | number | Yes | 0 | End&nbsp;radian&nbsp;of&nbsp;the&nbsp;arc. | 
+  | anticlockwise | boolean | No | false | Whether&nbsp;to&nbsp;draw&nbsp;the&nbsp;arc&nbsp;counterclockwise. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct Arc {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.beginPath()
+            this.context.arc(100, 75, 50, 0, 6.28)
+            this.context.stroke()
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001193801070.png)
+  ![en-us_image_0000001212378404](figures/en-us_image_0000001212378404.png)
 
 
-### arcTo<a name="section183412917414"></a>
+### arcTo
 
-arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void
+arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
 
 Draws an arc based on the radius and points on the arc.
 
--   Parameters
-
-    <a name="table1329914791515"></a>
-    <table><thead align="left"><tr id="row182970710154"><th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.1"><p id="p162979719153"><a name="p162979719153"></a><a name="p162979719153"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.17%" id="mcps1.1.6.1.2"><p id="p1529712713151"><a name="p1529712713151"></a><a name="p1529712713151"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="p713917244118"><a name="p713917244118"></a><a name="p713917244118"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.330000000000002%" id="mcps1.1.6.1.4"><p id="p8619122971118"><a name="p8619122971118"></a><a name="p8619122971118"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p14297271157"><a name="p14297271157"></a><a name="p14297271157"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1629837141513"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p1829797201512"><a name="p1829797201512"></a><a name="p1829797201512"></a>x1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.17%" headers="mcps1.1.6.1.2 "><p id="p1429719711152"><a name="p1429719711152"></a><a name="p1429719711152"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p13139182441120"><a name="p13139182441120"></a><a name="p13139182441120"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.330000000000002%" headers="mcps1.1.6.1.4 "><p id="p461911294112"><a name="p461911294112"></a><a name="p461911294112"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p2029819715156"><a name="p2029819715156"></a><a name="p2029819715156"></a>X-coordinate of the first point on the arc.</p>
-    </td>
-    </tr>
-    <tr id="row162982741511"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p429815720159"><a name="p429815720159"></a><a name="p429815720159"></a>y1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.17%" headers="mcps1.1.6.1.2 "><p id="p1329827111513"><a name="p1329827111513"></a><a name="p1329827111513"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p1014018242117"><a name="p1014018242117"></a><a name="p1014018242117"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.330000000000002%" headers="mcps1.1.6.1.4 "><p id="p261952917118"><a name="p261952917118"></a><a name="p261952917118"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p102981771158"><a name="p102981771158"></a><a name="p102981771158"></a>Y-coordinate of the first point on the arc.</p>
-    </td>
-    </tr>
-    <tr id="row12985718157"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p62987761517"><a name="p62987761517"></a><a name="p62987761517"></a>x2</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.17%" headers="mcps1.1.6.1.2 "><p id="p1629813720153"><a name="p1629813720153"></a><a name="p1629813720153"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p814042461114"><a name="p814042461114"></a><a name="p814042461114"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.330000000000002%" headers="mcps1.1.6.1.4 "><p id="p4619172901119"><a name="p4619172901119"></a><a name="p4619172901119"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p152986711512"><a name="p152986711512"></a><a name="p152986711512"></a>X-coordinate of the second point on the arc.</p>
-    </td>
-    </tr>
-    <tr id="row22996701511"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p92981870152"><a name="p92981870152"></a><a name="p92981870152"></a>y2</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.17%" headers="mcps1.1.6.1.2 "><p id="p22981677154"><a name="p22981677154"></a><a name="p22981677154"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p914092420115"><a name="p914092420115"></a><a name="p914092420115"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.330000000000002%" headers="mcps1.1.6.1.4 "><p id="p156209292113"><a name="p156209292113"></a><a name="p156209292113"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1929919717158"><a name="p1929919717158"></a><a name="p1929919717158"></a>Y-coordinate of the second point on the arc.</p>
-    </td>
-    </tr>
-    <tr id="row1429915718151"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p102991571157"><a name="p102991571157"></a><a name="p102991571157"></a>radius</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.17%" headers="mcps1.1.6.1.2 "><p id="p1829947171517"><a name="p1829947171517"></a><a name="p1829947171517"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p1140182431119"><a name="p1140182431119"></a><a name="p1140182431119"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.330000000000002%" headers="mcps1.1.6.1.4 "><p id="p162022914111"><a name="p162022914111"></a><a name="p162022914111"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p02997741518"><a name="p02997741518"></a><a name="p02997741518"></a>Radius of the arc.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct ArcTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.moveTo(100, 20);
-              this.context.arcTo(150, 20, 150, 70, 50);
-              this.context.stroke();
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x1 | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;first&nbsp;point&nbsp;on&nbsp;the&nbsp;arc. | 
+  | y1 | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;first&nbsp;point&nbsp;on&nbsp;the&nbsp;arc. | 
+  | x2 | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;second&nbsp;point&nbsp;on&nbsp;the&nbsp;arc. | 
+  | y2 | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;second&nbsp;point&nbsp;on&nbsp;the&nbsp;arc. | 
+  | radius | number | Yes | 0 | Radius&nbsp;of&nbsp;the&nbsp;arc. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct ArcTo {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.moveTo(100, 20);
+            this.context.arcTo(150, 20, 150, 70, 50);
+            this.context.stroke();
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001238521019.png)
+  ![en-us_image_0000001257058413](figures/en-us_image_0000001257058413.png)
 
 
-### ellipse<a name="section16516279415"></a>
+### ellipse
 
-ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean\): void
+ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
 
 Draws an ellipse in the specified rectangular region.
 
--   Parameters
-
-    <a name="table450718315196"></a>
-    <table><thead align="left"><tr id="row175044320194"><th class="cellrowborder" valign="top" width="19.75%" id="mcps1.1.6.1.1"><p id="p1504334195"><a name="p1504334195"></a><a name="p1504334195"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.14%" id="mcps1.1.6.1.2"><p id="p1950420318199"><a name="p1950420318199"></a><a name="p1950420318199"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.87%" id="mcps1.1.6.1.3"><p id="p821312914144"><a name="p821312914144"></a><a name="p821312914144"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.03%" id="mcps1.1.6.1.4"><p id="p1785311416148"><a name="p1785311416148"></a><a name="p1785311416148"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="30.209999999999997%" id="mcps1.1.6.1.5"><p id="p950418320192"><a name="p950418320192"></a><a name="p950418320192"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row195051317198"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p5504123101910"><a name="p5504123101910"></a><a name="p5504123101910"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p4504433196"><a name="p4504433196"></a><a name="p4504433196"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p521315911413"><a name="p521315911413"></a><a name="p521315911413"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.6.1.4 "><p id="p1885313143145"><a name="p1885313143145"></a><a name="p1885313143145"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.209999999999997%" headers="mcps1.1.6.1.5 "><p id="p15056351910"><a name="p15056351910"></a><a name="p15056351910"></a>X-coordinate of the ellipse center.</p>
-    </td>
-    </tr>
-    <tr id="row65051638195"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p1750517314199"><a name="p1750517314199"></a><a name="p1750517314199"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p3505143161914"><a name="p3505143161914"></a><a name="p3505143161914"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p32134912140"><a name="p32134912140"></a><a name="p32134912140"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.6.1.4 "><p id="p13853101411416"><a name="p13853101411416"></a><a name="p13853101411416"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.209999999999997%" headers="mcps1.1.6.1.5 "><p id="p85058311915"><a name="p85058311915"></a><a name="p85058311915"></a>Y-coordinate of the ellipse center.</p>
-    </td>
-    </tr>
-    <tr id="row25051439198"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p95059391919"><a name="p95059391919"></a><a name="p95059391919"></a>radiusX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p165051036193"><a name="p165051036193"></a><a name="p165051036193"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p8213129141419"><a name="p8213129141419"></a><a name="p8213129141419"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.6.1.4 "><p id="p68537149141"><a name="p68537149141"></a><a name="p68537149141"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.209999999999997%" headers="mcps1.1.6.1.5 "><p id="p1650519341912"><a name="p1650519341912"></a><a name="p1650519341912"></a>Ellipse radius on the x-axis.</p>
-    </td>
-    </tr>
-    <tr id="row105059313190"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p3505736199"><a name="p3505736199"></a><a name="p3505736199"></a>radiusY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p185056314199"><a name="p185056314199"></a><a name="p185056314199"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p1821399171420"><a name="p1821399171420"></a><a name="p1821399171420"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.6.1.4 "><p id="p8853151471412"><a name="p8853151471412"></a><a name="p8853151471412"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.209999999999997%" headers="mcps1.1.6.1.5 "><p id="p165054319193"><a name="p165054319193"></a><a name="p165054319193"></a>Ellipse radius on the y-axis.</p>
-    </td>
-    </tr>
-    <tr id="row650614321914"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p1450511310194"><a name="p1450511310194"></a><a name="p1450511310194"></a>rotation</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p205061235199"><a name="p205061235199"></a><a name="p205061235199"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p15213179111418"><a name="p15213179111418"></a><a name="p15213179111418"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.6.1.4 "><p id="p16853214121415"><a name="p16853214121415"></a><a name="p16853214121415"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.209999999999997%" headers="mcps1.1.6.1.5 "><p id="p05061638195"><a name="p05061638195"></a><a name="p05061638195"></a>Rotation angle of the ellipse, in radians.</p>
-    </td>
-    </tr>
-    <tr id="row1506731196"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p14506831197"><a name="p14506831197"></a><a name="p14506831197"></a>startAngle</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p1750623101910"><a name="p1750623101910"></a><a name="p1750623101910"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p9213189131411"><a name="p9213189131411"></a><a name="p9213189131411"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.6.1.4 "><p id="p1785301431414"><a name="p1785301431414"></a><a name="p1785301431414"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.209999999999997%" headers="mcps1.1.6.1.5 "><p id="p9506123121920"><a name="p9506123121920"></a><a name="p9506123121920"></a>Angle of the start point for drawing the ellipse, in radians.</p>
-    </td>
-    </tr>
-    <tr id="row65061537199"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p850619317199"><a name="p850619317199"></a><a name="p850619317199"></a>endAngle</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p95062331912"><a name="p95062331912"></a><a name="p95062331912"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p321314913144"><a name="p321314913144"></a><a name="p321314913144"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.6.1.4 "><p id="p28535144142"><a name="p28535144142"></a><a name="p28535144142"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.209999999999997%" headers="mcps1.1.6.1.5 "><p id="p185061837197"><a name="p185061837197"></a><a name="p185061837197"></a>Angle of the end point for drawing the ellipse, in radians.</p>
-    </td>
-    </tr>
-    <tr id="row1150717316199"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p11506193181911"><a name="p11506193181911"></a><a name="p11506193181911"></a>anticlockwise</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p3507538196"><a name="p3507538196"></a><a name="p3507538196"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p172131199142"><a name="p172131199142"></a><a name="p172131199142"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.6.1.4 "><p id="p4853111451419"><a name="p4853111451419"></a><a name="p4853111451419"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.209999999999997%" headers="mcps1.1.6.1.5 "><p id="p1850718313190"><a name="p1850718313190"></a><a name="p1850718313190"></a>Whether to draw the ellipse in the counterclockwise direction. The value <strong id="b18482173514412"><a name="b18482173514412"></a><a name="b18482173514412"></a>0</strong> means to draw the ellipse in the clockwise direction, and <strong id="b04821635164414"><a name="b04821635164414"></a><a name="b04821635164414"></a>1</strong> means to draw the ellipse in the counterclockwise direction. This parameter is optional. The default value is <strong id="b12883759124419"><a name="b12883759124419"></a><a name="b12883759124419"></a>0</strong>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct Ellipse {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.beginPath()
-              this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, true)
-              this.context.stroke()
-            })
-          Button('back')
-            .onClick(() => {
-              router.back()
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;ellipse&nbsp;center. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;ellipse&nbsp;center. | 
+  | radiusX | number | Yes | 0 | Ellipse&nbsp;radius&nbsp;on&nbsp;the&nbsp;x-axis. | 
+  | radiusY | number | Yes | 0 | Ellipse&nbsp;radius&nbsp;on&nbsp;the&nbsp;y-axis. | 
+  | rotation | number | Yes | 0 | Rotation&nbsp;angle&nbsp;of&nbsp;the&nbsp;ellipse,&nbsp;in&nbsp;radians. | 
+  | startAngle | number | Yes | 0 | Angle&nbsp;of&nbsp;the&nbsp;start&nbsp;point&nbsp;for&nbsp;drawing&nbsp;the&nbsp;ellipse,&nbsp;in&nbsp;radians. | 
+  | endAngle | number | Yes | 0 | Angle&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;for&nbsp;drawing&nbsp;the&nbsp;ellipse,&nbsp;in&nbsp;radians. | 
+  | anticlockwise | boolean | No | false | Whether&nbsp;to&nbsp;draw&nbsp;the&nbsp;ellipse&nbsp;in&nbsp;the&nbsp;counterclockwise&nbsp;direction. | 
+
+- Example
+
+  
+  ```
+  @Entry
+  @Component
+  struct CanvasExample {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.beginPath()
+            this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI)
+            this.context.stroke()
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001193481096.png)
+  ![en-us_image_0000001256978339](figures/en-us_image_0000001256978339.png)
 
 
-### rect<a name="section1947706184216"></a>
+### rect
 
-rect\(x: number, y: number, width: number, height: number\): void
+rect(x: number, y: number, width: number, height: number): void
 
 Creates a rectangle.
 
--   Parameters
-
-    <a name="table1622173213205"></a>
-    <table><thead align="left"><tr id="row14220032182013"><th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.1"><p id="p02201232112019"><a name="p02201232112019"></a><a name="p02201232112019"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.2"><p id="p18220133212011"><a name="p18220133212011"></a><a name="p18220133212011"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.9%" id="mcps1.1.6.1.3"><p id="p11820919101519"><a name="p11820919101519"></a><a name="p11820919101519"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.969999999999999%" id="mcps1.1.6.1.4"><p id="p267692818152"><a name="p267692818152"></a><a name="p267692818152"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p1922093242018"><a name="p1922093242018"></a><a name="p1922093242018"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row02204322207"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p19220173219209"><a name="p19220173219209"></a><a name="p19220173219209"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.2 "><p id="p192201332162010"><a name="p192201332162010"></a><a name="p192201332162010"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.9%" headers="mcps1.1.6.1.3 "><p id="p1282091912157"><a name="p1282091912157"></a><a name="p1282091912157"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.969999999999999%" headers="mcps1.1.6.1.4 "><p id="p1267622817151"><a name="p1267622817151"></a><a name="p1267622817151"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p622093282017"><a name="p622093282017"></a><a name="p622093282017"></a>X-coordinate of the upper left corner of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row1022133216200"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p52202328209"><a name="p52202328209"></a><a name="p52202328209"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.2 "><p id="p02210325203"><a name="p02210325203"></a><a name="p02210325203"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.9%" headers="mcps1.1.6.1.3 "><p id="p19820141971513"><a name="p19820141971513"></a><a name="p19820141971513"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.969999999999999%" headers="mcps1.1.6.1.4 "><p id="p367692811517"><a name="p367692811517"></a><a name="p367692811517"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1122119323205"><a name="p1122119323205"></a><a name="p1122119323205"></a>Y-coordinate of the upper left corner of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row22211532142010"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p02211232172017"><a name="p02211232172017"></a><a name="p02211232172017"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.2 "><p id="p1221123215204"><a name="p1221123215204"></a><a name="p1221123215204"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.9%" headers="mcps1.1.6.1.3 "><p id="p68202194158"><a name="p68202194158"></a><a name="p68202194158"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.969999999999999%" headers="mcps1.1.6.1.4 "><p id="p1267618283156"><a name="p1267618283156"></a><a name="p1267618283156"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p32211432182014"><a name="p32211432182014"></a><a name="p32211432182014"></a>Width of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row7221532132018"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p6221032102010"><a name="p6221032102010"></a><a name="p6221032102010"></a>height</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.2 "><p id="p1322114329207"><a name="p1322114329207"></a><a name="p1322114329207"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.9%" headers="mcps1.1.6.1.3 "><p id="p14820121913154"><a name="p14820121913154"></a><a name="p14820121913154"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.969999999999999%" headers="mcps1.1.6.1.4 "><p id="p196768285154"><a name="p196768285154"></a><a name="p196768285154"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p5221632122018"><a name="p5221632122018"></a><a name="p5221632122018"></a>Height of the rectangle.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct CanvasExample {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
-              this.context.stroke()
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | width | number | Yes | 0 | Width&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | height | number | Yes | 0 | Height&nbsp;of&nbsp;the&nbsp;rectangle. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct CanvasExample {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
+            this.context.stroke()
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001238601053.png)
+  ![en-us_image_0000001256978341](figures/en-us_image_0000001256978341.png)
 
 
-### fill<a name="section1845722810424"></a>
+### fill
 
-fill\(\): void
+fill(): void
 
 Fills the area inside a closed path.
 
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct Fill {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
-              this.context.fill()
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct Fill {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
+            this.context.fill()
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001193321138.png)
+  ![en-us_image_0000001256858389](figures/en-us_image_0000001256858389.png)
 
 
-### clip<a name="section12413626164316"></a>
+### clip
 
-clip\(\): void
+clip(): void
 
 Sets the current path to a clipping path.
 
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct Clip {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.rect(0, 0, 200, 200)
-              this.context.stroke()
-              this.context.clip()
-              this.context.fillStyle = "rgb(255,0,0)"
-              this.context.fillRect(0, 0, 150, 150)
-            })
-          Button('back')
-            .onClick(() => {
-              router.back()
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct Clip {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.rect(0, 0, 200, 200)
+            this.context.stroke()
+            this.context.clip()
+            this.context.fillStyle = "rgb(255,0,0)"
+            this.context.fillRect(0, 0, 150, 150)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001238401031.png)
+  ![en-us_image_0000001211898488](figures/en-us_image_0000001211898488.png)
 
 
-### rotate<a name="section1971313465438"></a>
+### rotate
 
-rotate\(rotate: number\): void
+rotate(rotate: number): void
 
 Rotates a canvas clockwise around its coordinate axes.
 
--   Parameters
-
-    <a name="table105511032162410"></a>
-    <table><thead align="left"><tr id="row195511832162416"><th class="cellrowborder" valign="top" width="14.729999999999999%" id="mcps1.1.6.1.1"><p id="p855143217248"><a name="p855143217248"></a><a name="p855143217248"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.26%" id="mcps1.1.6.1.2"><p id="p65511132102412"><a name="p65511132102412"></a><a name="p65511132102412"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.030000000000001%" id="mcps1.1.6.1.3"><p id="p19314185712167"><a name="p19314185712167"></a><a name="p19314185712167"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="19.02%" id="mcps1.1.6.1.4"><p id="p1829813215176"><a name="p1829813215176"></a><a name="p1829813215176"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="40.96%" id="mcps1.1.6.1.5"><p id="p955173242412"><a name="p955173242412"></a><a name="p955173242412"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row25511132132416"><td class="cellrowborder" valign="top" width="14.729999999999999%" headers="mcps1.1.6.1.1 "><p id="p8551632142419"><a name="p8551632142419"></a><a name="p8551632142419"></a>rotate</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.26%" headers="mcps1.1.6.1.2 "><p id="p165511632102419"><a name="p165511632102419"></a><a name="p165511632102419"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.030000000000001%" headers="mcps1.1.6.1.3 "><p id="p931419572164"><a name="p931419572164"></a><a name="p931419572164"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.02%" headers="mcps1.1.6.1.4 "><p id="p1629817231716"><a name="p1629817231716"></a><a name="p1629817231716"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.96%" headers="mcps1.1.6.1.5 "><p id="p1855193292413"><a name="p1855193292413"></a><a name="p1855193292413"></a>Clockwise rotation angle. You can use <strong id="b16144104994916"><a name="b16144104994916"></a><a name="b16144104994916"></a>Math.PI / 180</strong> to convert the angle to a radian.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct Rotate {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.rotate(45 * Math.PI / 180) // Rotate the rectangle 45 degrees
-              this.context.fillRect(70, 20, 50, 50)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | rotate | number | Yes | 0 | Clockwise&nbsp;rotation&nbsp;angle.&nbsp;You&nbsp;can&nbsp;use&nbsp;**Math.PI&nbsp;/&nbsp;180**&nbsp;to&nbsp;convert&nbsp;the&nbsp;angle&nbsp;to&nbsp;a&nbsp;radian. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct Rotate {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.rotate(45 * Math.PI / 180) // Rotate the rectangle 45 degrees
+            this.context.fillRect(70, 20, 50, 50)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
-
-    ![](figures/en-us_image_0000001238281069.png)
-
-
-### scale<a name="section132348984414"></a>
-
-scale\(x: number, y: number\): void
-
-Scales a canvas based on scaling factors.
-
--   Parameters
-
-    <a name="table8153193817250"></a>
-    <table><thead align="left"><tr id="row1415333822513"><th class="cellrowborder" valign="top" width="17.330000000000002%" id="mcps1.1.6.1.1"><p id="p8152143812517"><a name="p8152143812517"></a><a name="p8152143812517"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.860000000000003%" id="mcps1.1.6.1.2"><p id="p13152238132513"><a name="p13152238132513"></a><a name="p13152238132513"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.27%" id="mcps1.1.6.1.3"><p id="p181861841161716"><a name="p181861841161716"></a><a name="p181861841161716"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.03%" id="mcps1.1.6.1.4"><p id="p152111436121714"><a name="p152111436121714"></a><a name="p152111436121714"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p1215283812511"><a name="p1215283812511"></a><a name="p1215283812511"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6153103872517"><td class="cellrowborder" valign="top" width="17.330000000000002%" headers="mcps1.1.6.1.1 "><p id="p1415353817251"><a name="p1415353817251"></a><a name="p1415353817251"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.860000000000003%" headers="mcps1.1.6.1.2 "><p id="p18153338162512"><a name="p18153338162512"></a><a name="p18153338162512"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.27%" headers="mcps1.1.6.1.3 "><p id="p518634101715"><a name="p518634101715"></a><a name="p518634101715"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.03%" headers="mcps1.1.6.1.4 "><p id="p5211636191711"><a name="p5211636191711"></a><a name="p5211636191711"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p9153193812256"><a name="p9153193812256"></a><a name="p9153193812256"></a>Horizontal scale factor.</p>
-    </td>
-    </tr>
-    <tr id="row91531438182510"><td class="cellrowborder" valign="top" width="17.330000000000002%" headers="mcps1.1.6.1.1 "><p id="p10153113811252"><a name="p10153113811252"></a><a name="p10153113811252"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.860000000000003%" headers="mcps1.1.6.1.2 "><p id="p19153173822518"><a name="p19153173822518"></a><a name="p19153173822518"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.27%" headers="mcps1.1.6.1.3 "><p id="p18186164151713"><a name="p18186164151713"></a><a name="p18186164151713"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.03%" headers="mcps1.1.6.1.4 "><p id="p1021113621711"><a name="p1021113621711"></a><a name="p1021113621711"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p8153203842518"><a name="p8153203842518"></a><a name="p8153203842518"></a>Vertical scale factor.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct Scale {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.strokeRect(10, 10, 25, 25)
-              this.context.scale(2, 2) // Scale to 200%
-              this.context.strokeRect(10, 10, 25, 25)
-            })
-        }
-        .width('100%')
-        .height('100%')
+  }
+  ```
+
+  ![en-us_image_0000001212218442](figures/en-us_image_0000001212218442.png)
+
+
+### scale
+
+scale(x: number, y: number): void
+
+Scales a canvas based on scale factors.
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | Horizontal&nbsp;scale&nbsp;factor. | 
+  | y | number | Yes | 0 | Vertical&nbsp;scale&nbsp;factor. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct Scale {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.strokeRect(10, 10, 25, 25)
+            this.context.scale(2, 2) // Scale to 200%
+            this.context.strokeRect(10, 10, 25, 25)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001193641086.png)
+  ![en-us_image_0000001257138347](figures/en-us_image_0000001257138347.png)
 
 
-### transform<a name="section617033484418"></a>
+### transform
 
-transform\(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number\): void
+transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void
 
 Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects.
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->The following formulas calculate coordinates of the transformed graph.  **x**  and  **y**  represent coordinates before transformation, and  **x'**  and  **y'**  represent coordinates after transformation.
->-   x' = scaleX \* x + skewY \* y + translateX
->-   y' = skewX \* x + scaleY \* y + translateY
-
--   Parameters
-
-    <a name="table1191915312717"></a>
-    <table><thead align="left"><tr id="row09169362712"><th class="cellrowborder" valign="top" width="22.05%" id="mcps1.1.6.1.1"><p id="p129161332716"><a name="p129161332716"></a><a name="p129161332716"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.14%" id="mcps1.1.6.1.2"><p id="p491617311278"><a name="p491617311278"></a><a name="p491617311278"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.78%" id="mcps1.1.6.1.3"><p id="p26021281182"><a name="p26021281182"></a><a name="p26021281182"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.520000000000001%" id="mcps1.1.6.1.4"><p id="p16978193418183"><a name="p16978193418183"></a><a name="p16978193418183"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p1991603132713"><a name="p1991603132713"></a><a name="p1991603132713"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row69170319276"><td class="cellrowborder" valign="top" width="22.05%" headers="mcps1.1.6.1.1 "><p id="p1391619317278"><a name="p1391619317278"></a><a name="p1391619317278"></a>scaleX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p2091612342712"><a name="p2091612342712"></a><a name="p2091612342712"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.78%" headers="mcps1.1.6.1.3 "><p id="p17602828111819"><a name="p17602828111819"></a><a name="p17602828111819"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.520000000000001%" headers="mcps1.1.6.1.4 "><p id="p1097910343186"><a name="p1097910343186"></a><a name="p1097910343186"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1891617342711"><a name="p1891617342711"></a><a name="p1891617342711"></a>X-axis scale.</p>
-    </td>
-    </tr>
-    <tr id="row19917163112715"><td class="cellrowborder" valign="top" width="22.05%" headers="mcps1.1.6.1.1 "><p id="p9917113122716"><a name="p9917113122716"></a><a name="p9917113122716"></a>skewX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p391713372715"><a name="p391713372715"></a><a name="p391713372715"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.78%" headers="mcps1.1.6.1.3 "><p id="p360222816181"><a name="p360222816181"></a><a name="p360222816181"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.520000000000001%" headers="mcps1.1.6.1.4 "><p id="p11979934131812"><a name="p11979934131812"></a><a name="p11979934131812"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p491713112718"><a name="p491713112718"></a><a name="p491713112718"></a>X-axis skew.</p>
-    </td>
-    </tr>
-    <tr id="row7917334279"><td class="cellrowborder" valign="top" width="22.05%" headers="mcps1.1.6.1.1 "><p id="p10917639275"><a name="p10917639275"></a><a name="p10917639275"></a>skewY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p9917103192711"><a name="p9917103192711"></a><a name="p9917103192711"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.78%" headers="mcps1.1.6.1.3 "><p id="p1602122831817"><a name="p1602122831817"></a><a name="p1602122831817"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.520000000000001%" headers="mcps1.1.6.1.4 "><p id="p15979173401810"><a name="p15979173401810"></a><a name="p15979173401810"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1791717382713"><a name="p1791717382713"></a><a name="p1791717382713"></a>Y-axis skew.</p>
-    </td>
-    </tr>
-    <tr id="row1918335276"><td class="cellrowborder" valign="top" width="22.05%" headers="mcps1.1.6.1.1 "><p id="p109171338271"><a name="p109171338271"></a><a name="p109171338271"></a>scaleY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p1391711362710"><a name="p1391711362710"></a><a name="p1391711362710"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.78%" headers="mcps1.1.6.1.3 "><p id="p26021228131819"><a name="p26021228131819"></a><a name="p26021228131819"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.520000000000001%" headers="mcps1.1.6.1.4 "><p id="p59791834181814"><a name="p59791834181814"></a><a name="p59791834181814"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p109175314271"><a name="p109175314271"></a><a name="p109175314271"></a>Y-axis scale.</p>
-    </td>
-    </tr>
-    <tr id="row109184316272"><td class="cellrowborder" valign="top" width="22.05%" headers="mcps1.1.6.1.1 "><p id="p49187322717"><a name="p49187322717"></a><a name="p49187322717"></a>translateX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p18918153102713"><a name="p18918153102713"></a><a name="p18918153102713"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.78%" headers="mcps1.1.6.1.3 "><p id="p1060214282187"><a name="p1060214282187"></a><a name="p1060214282187"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.520000000000001%" headers="mcps1.1.6.1.4 "><p id="p797953461811"><a name="p797953461811"></a><a name="p797953461811"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p49181233272"><a name="p49181233272"></a><a name="p49181233272"></a>X-axis translation.</p>
-    </td>
-    </tr>
-    <tr id="row691910342710"><td class="cellrowborder" valign="top" width="22.05%" headers="mcps1.1.6.1.1 "><p id="p29184342713"><a name="p29184342713"></a><a name="p29184342713"></a>translateY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p169191337272"><a name="p169191337272"></a><a name="p169191337272"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.78%" headers="mcps1.1.6.1.3 "><p id="p106021428181818"><a name="p106021428181818"></a><a name="p106021428181818"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.520000000000001%" headers="mcps1.1.6.1.4 "><p id="p3979153461816"><a name="p3979153461816"></a><a name="p3979153461816"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p179191311272"><a name="p179191311272"></a><a name="p179191311272"></a>Y-axis translation.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct Transform {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.fillStyle = 'rgb(0,0,0)'
-              this.context.fillRect(0, 0, 100, 100)
-              this.context.transform(1, 0.5, -0.5, 1, 10, 10)
-              this.context.fillStyle = 'rgb(255,0,0)'
-              this.context.fillRect(0, 0, 100, 100)
-              this.context.transform(1, 0.5, -0.5, 1, 10, 10)
-              this.context.fillStyle = 'rgb(0,0,255)'
-              this.context.fillRect(0, 0, 100, 100)
-            })
-        }
-        .width('100%')
-        .height('100%')
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
+> 
+> - x' = scaleX \* x + skewY \* y + translateX
+> 
+> - y' = skewX \* x + scaleY \* y + translateY
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | scaleX | number | Yes | 0 | X-axis&nbsp;scale. | 
+  | skewX | number | Yes | 0 | X-axis&nbsp;skew. | 
+  | skewY | number | Yes | 0 | Y-axis&nbsp;skew. | 
+  | scaleY | number | Yes | 0 | Y-axis&nbsp;scale. | 
+  | translateX | number | Yes | 0 | X-axis&nbsp;translation. | 
+  | translateY | number | Yes | 0 | Y-axis&nbsp;translation. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct Transform {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: RenderingContext = new RenderingContext(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.fillStyle = 'rgb(0,0,0)'
+            this.context.fillRect(0, 0, 100, 100)
+            this.context.transform(1, 0.5, -0.5, 1, 10, 10)
+            this.context.fillStyle = 'rgb(255,0,0)'
+            this.context.fillRect(0, 0, 100, 100)
+            this.context.transform(1, 0.5, -0.5, 1, 10, 10)
+            this.context.fillStyle = 'rgb(0,0,255)'
+            this.context.fillRect(0, 0, 100, 100)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
-
-    ![](figures/en-us_image_0000001193801072.png)
-
-
-### setTransform<a name="section137074217452"></a>
-
-setTransform\(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number\): void
-
-Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the  **transform\(\)**  function.
-
--   Parameters
-
-    <a name="table1118143092810"></a>
-    <table><thead align="left"><tr id="row13111230202813"><th class="cellrowborder" valign="top" width="23.14%" id="mcps1.1.6.1.1"><p id="p71101130122816"><a name="p71101130122816"></a><a name="p71101130122816"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.27%" id="mcps1.1.6.1.2"><p id="p191102030142814"><a name="p191102030142814"></a><a name="p191102030142814"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.96%" id="mcps1.1.6.1.3"><p id="p16738101331912"><a name="p16738101331912"></a><a name="p16738101331912"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.120000000000001%" id="mcps1.1.6.1.4"><p id="p131621187198"><a name="p131621187198"></a><a name="p131621187198"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p10110103010286"><a name="p10110103010286"></a><a name="p10110103010286"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row111117307283"><td class="cellrowborder" valign="top" width="23.14%" headers="mcps1.1.6.1.1 "><p id="p711103011287"><a name="p711103011287"></a><a name="p711103011287"></a>scaleX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.27%" headers="mcps1.1.6.1.2 "><p id="p7111193092813"><a name="p7111193092813"></a><a name="p7111193092813"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.96%" headers="mcps1.1.6.1.3 "><p id="p773921371915"><a name="p773921371915"></a><a name="p773921371915"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.120000000000001%" headers="mcps1.1.6.1.4 "><p id="p8162918171914"><a name="p8162918171914"></a><a name="p8162918171914"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p7111113014288"><a name="p7111113014288"></a><a name="p7111113014288"></a>X-axis scale.</p>
-    </td>
-    </tr>
-    <tr id="row1117930172816"><td class="cellrowborder" valign="top" width="23.14%" headers="mcps1.1.6.1.1 "><p id="p91111830132813"><a name="p91111830132813"></a><a name="p91111830132813"></a>skewX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.27%" headers="mcps1.1.6.1.2 "><p id="p511173022814"><a name="p511173022814"></a><a name="p511173022814"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.96%" headers="mcps1.1.6.1.3 "><p id="p1873951301913"><a name="p1873951301913"></a><a name="p1873951301913"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.120000000000001%" headers="mcps1.1.6.1.4 "><p id="p1716261815196"><a name="p1716261815196"></a><a name="p1716261815196"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1117143014284"><a name="p1117143014284"></a><a name="p1117143014284"></a>X-axis skew.</p>
-    </td>
-    </tr>
-    <tr id="row15117430152814"><td class="cellrowborder" valign="top" width="23.14%" headers="mcps1.1.6.1.1 "><p id="p13117163011285"><a name="p13117163011285"></a><a name="p13117163011285"></a>skewY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.27%" headers="mcps1.1.6.1.2 "><p id="p1911743019284"><a name="p1911743019284"></a><a name="p1911743019284"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.96%" headers="mcps1.1.6.1.3 "><p id="p37392134196"><a name="p37392134196"></a><a name="p37392134196"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.120000000000001%" headers="mcps1.1.6.1.4 "><p id="p716331811193"><a name="p716331811193"></a><a name="p716331811193"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p0117130102818"><a name="p0117130102818"></a><a name="p0117130102818"></a>Y-axis skew.</p>
-    </td>
-    </tr>
-    <tr id="row111171630112814"><td class="cellrowborder" valign="top" width="23.14%" headers="mcps1.1.6.1.1 "><p id="p7117153018282"><a name="p7117153018282"></a><a name="p7117153018282"></a>scaleY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.27%" headers="mcps1.1.6.1.2 "><p id="p19117123012281"><a name="p19117123012281"></a><a name="p19117123012281"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.96%" headers="mcps1.1.6.1.3 "><p id="p14739513131910"><a name="p14739513131910"></a><a name="p14739513131910"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.120000000000001%" headers="mcps1.1.6.1.4 "><p id="p316381881915"><a name="p316381881915"></a><a name="p316381881915"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1411773032810"><a name="p1411773032810"></a><a name="p1411773032810"></a>Y-axis scale.</p>
-    </td>
-    </tr>
-    <tr id="row8118183012281"><td class="cellrowborder" valign="top" width="23.14%" headers="mcps1.1.6.1.1 "><p id="p16117163012282"><a name="p16117163012282"></a><a name="p16117163012282"></a>translateX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.27%" headers="mcps1.1.6.1.2 "><p id="p2118103092816"><a name="p2118103092816"></a><a name="p2118103092816"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.96%" headers="mcps1.1.6.1.3 "><p id="p2073919132194"><a name="p2073919132194"></a><a name="p2073919132194"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.120000000000001%" headers="mcps1.1.6.1.4 "><p id="p61631118161913"><a name="p61631118161913"></a><a name="p61631118161913"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1811873072819"><a name="p1811873072819"></a><a name="p1811873072819"></a>X-axis translation.</p>
-    </td>
-    </tr>
-    <tr id="row111823072817"><td class="cellrowborder" valign="top" width="23.14%" headers="mcps1.1.6.1.1 "><p id="p11118130102816"><a name="p11118130102816"></a><a name="p11118130102816"></a>translateY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.27%" headers="mcps1.1.6.1.2 "><p id="p2118930102813"><a name="p2118930102813"></a><a name="p2118930102813"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.96%" headers="mcps1.1.6.1.3 "><p id="p11739101321913"><a name="p11739101321913"></a><a name="p11739101321913"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.120000000000001%" headers="mcps1.1.6.1.4 "><p id="p171634183195"><a name="p171634183195"></a><a name="p171634183195"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p3118163014289"><a name="p3118163014289"></a><a name="p3118163014289"></a>Y-axis translation.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct SetTransform {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.fillStyle = 'rgb(255,0,0)'
-              this.context.fillRect(0, 0, 100, 100)
-              this.context.setTransform(1,0.5, -0.5, 1, 10, 10)
-              this.context.fillStyle = 'rgb(0,0,255)'
-              this.context.fillRect(0, 0, 100, 100)
-            })
-        }
-        .width('100%')
-        .height('100%')
+  }
+  ```
+
+  ![en-us_image_0000001256858393](figures/en-us_image_0000001256858393.png)
+
+
+### setTransform
+
+setTransform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void
+
+Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform()** function.
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | scaleX | number | Yes | 0 | X-axis&nbsp;scale. | 
+  | skewX | number | Yes | 0 | X-axis&nbsp;skew. | 
+  | skewY | number | Yes | 0 | Y-axis&nbsp;skew. | 
+  | scaleY | number | Yes | 0 | Y-axis&nbsp;scale. | 
+  | translateX | number | Yes | 0 | X-axis&nbsp;translation. | 
+  | translateY | number | Yes | 0 | Y-axis&nbsp;translation. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct SetTransform {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.fillStyle = 'rgb(255,0,0)'
+            this.context.fillRect(0, 0, 100, 100)
+            this.context.setTransform(1,0.5, -0.5, 1, 10, 10)
+            this.context.fillStyle = 'rgb(0,0,255)'
+            this.context.fillRect(0, 0, 100, 100)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001238521021.png)
+  ![en-us_image_0000001256858395](figures/en-us_image_0000001256858395.png)
 
 
-### translate<a name="section111184617490"></a>
+### translate
 
-translate\(x: number, y: number\): void
+translate(x: number, y: number): void
 
 Moves the origin of the coordinate system.
 
--   Parameters
-
-    <a name="table1362133712301"></a>
-    <table><thead align="left"><tr id="row9361173710307"><th class="cellrowborder" valign="top" width="23.26%" id="mcps1.1.6.1.1"><p id="p536113717306"><a name="p536113717306"></a><a name="p536113717306"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="21.12%" id="mcps1.1.6.1.2"><p id="p2036193714304"><a name="p2036193714304"></a><a name="p2036193714304"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.6%" id="mcps1.1.6.1.3"><p id="p129235563190"><a name="p129235563190"></a><a name="p129235563190"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.509999999999998%" id="mcps1.1.6.1.4"><p id="p1594681182016"><a name="p1594681182016"></a><a name="p1594681182016"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p13361103733012"><a name="p13361103733012"></a><a name="p13361103733012"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row5362163783010"><td class="cellrowborder" valign="top" width="23.26%" headers="mcps1.1.6.1.1 "><p id="p03621937153018"><a name="p03621937153018"></a><a name="p03621937153018"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.12%" headers="mcps1.1.6.1.2 "><p id="p18362637123017"><a name="p18362637123017"></a><a name="p18362637123017"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.6%" headers="mcps1.1.6.1.3 "><p id="p17923195614192"><a name="p17923195614192"></a><a name="p17923195614192"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.509999999999998%" headers="mcps1.1.6.1.4 "><p id="p694661132019"><a name="p694661132019"></a><a name="p694661132019"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p93621037183013"><a name="p93621037183013"></a><a name="p93621037183013"></a>X-axis translation</p>
-    </td>
-    </tr>
-    <tr id="row4362037133012"><td class="cellrowborder" valign="top" width="23.26%" headers="mcps1.1.6.1.1 "><p id="p1936213710301"><a name="p1936213710301"></a><a name="p1936213710301"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.12%" headers="mcps1.1.6.1.2 "><p id="p936253712309"><a name="p936253712309"></a><a name="p936253712309"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.6%" headers="mcps1.1.6.1.3 "><p id="p139231456161915"><a name="p139231456161915"></a><a name="p139231456161915"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.509999999999998%" headers="mcps1.1.6.1.4 "><p id="p11946212202"><a name="p11946212202"></a><a name="p11946212202"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p143621037153019"><a name="p143621037153019"></a><a name="p143621037153019"></a>Y-axis translation.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct Translate {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.fillRect(10, 10, 50, 50)
-              this.context.translate(70, 70)
-              this.context.fillRect(10, 10, 50, 50)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-axis&nbsp;translation. | 
+  | y | number | Yes | 0 | Y-axis&nbsp;translation. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct Translate {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.fillRect(10, 10, 50, 50)
+            this.context.translate(70, 70)
+            this.context.fillRect(10, 10, 50, 50)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001193481098.png)
+  ![en-us_image_0000001257138357](figures/en-us_image_0000001257138357.png)
 
 
-### drawImage<a name="section426381785019"></a>
+### drawImage
 
-drawImage\(image: ImageBitmap, dx: number, dy: number\): void
+drawImage(image: ImageBitmap, dx: number, dy: number): void
 
-drawImage\(image: ImageBitmap, dx: number, dy: number, dWidth: number, dHeight: number\): void
+drawImage(image: ImageBitmap, dx: number, dy: number, dWidth: number, dHeight: number): void
 
-drawImage\(image: ImageBitmap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number\):void
+drawImage(image: ImageBitmap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void
 
 Draws an image.
 
--   Parameters
-
-    <a name="table045918133582"></a>
-    <table><thead align="left"><tr id="row846011136587"><th class="cellrowborder" valign="top" width="18.47%" id="mcps1.1.6.1.1"><p id="p18460201355812"><a name="p18460201355812"></a><a name="p18460201355812"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="23.73%" id="mcps1.1.6.1.2"><p id="p1846017136587"><a name="p1846017136587"></a><a name="p1846017136587"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.879999999999999%" id="mcps1.1.6.1.3"><p id="p1846013130587"><a name="p1846013130587"></a><a name="p1846013130587"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.41%" id="mcps1.1.6.1.4"><p id="p8460313155815"><a name="p8460313155815"></a><a name="p8460313155815"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p16460613175816"><a name="p16460613175816"></a><a name="p16460613175816"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row8461131317581"><td class="cellrowborder" valign="top" width="18.47%" headers="mcps1.1.6.1.1 "><p id="p746151311580"><a name="p746151311580"></a><a name="p746151311580"></a>image</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.73%" headers="mcps1.1.6.1.2 "><p id="p1035415257411"><a name="p1035415257411"></a><a name="p1035415257411"></a><a href="ts-components-canvas-imagebitmap.md">ImageBitmap</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.879999999999999%" headers="mcps1.1.6.1.3 "><p id="p746151385819"><a name="p746151385819"></a><a name="p746151385819"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.4 "><p id="p7461111311585"><a name="p7461111311585"></a><a name="p7461111311585"></a>null</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p84611713175816"><a name="p84611713175816"></a><a name="p84611713175816"></a>Image resource. For details, see <a href="ts-components-canvas-imagebitmap.md">ImageBitmap</a>.</p>
-    </td>
-    </tr>
-    <tr id="row14461111355814"><td class="cellrowborder" valign="top" width="18.47%" headers="mcps1.1.6.1.1 "><p id="p11461161316582"><a name="p11461161316582"></a><a name="p11461161316582"></a>sx</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.73%" headers="mcps1.1.6.1.2 "><p id="p10461121345810"><a name="p10461121345810"></a><a name="p10461121345810"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.879999999999999%" headers="mcps1.1.6.1.3 "><p id="p346220131588"><a name="p346220131588"></a><a name="p346220131588"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.4 "><p id="p34621413135811"><a name="p34621413135811"></a><a name="p34621413135811"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p74628135580"><a name="p74628135580"></a><a name="p74628135580"></a>X-coordinate of the upper left corner of the rectangle used to crop the source image.</p>
-    </td>
-    </tr>
-    <tr id="row12462191314583"><td class="cellrowborder" valign="top" width="18.47%" headers="mcps1.1.6.1.1 "><p id="p8462121315816"><a name="p8462121315816"></a><a name="p8462121315816"></a>sy</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.73%" headers="mcps1.1.6.1.2 "><p id="p746213132582"><a name="p746213132582"></a><a name="p746213132582"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.879999999999999%" headers="mcps1.1.6.1.3 "><p id="p16462121311585"><a name="p16462121311585"></a><a name="p16462121311585"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.4 "><p id="p1246381335814"><a name="p1246381335814"></a><a name="p1246381335814"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p20463151311581"><a name="p20463151311581"></a><a name="p20463151311581"></a>Y-coordinate of the upper left corner of the rectangle used to crop the source image.</p>
-    </td>
-    </tr>
-    <tr id="row646331317589"><td class="cellrowborder" valign="top" width="18.47%" headers="mcps1.1.6.1.1 "><p id="p18463191335817"><a name="p18463191335817"></a><a name="p18463191335817"></a>sWidth</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.73%" headers="mcps1.1.6.1.2 "><p id="p446331315583"><a name="p446331315583"></a><a name="p446331315583"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.879999999999999%" headers="mcps1.1.6.1.3 "><p id="p20463171320581"><a name="p20463171320581"></a><a name="p20463171320581"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.4 "><p id="p6463161318581"><a name="p6463161318581"></a><a name="p6463161318581"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p14635139588"><a name="p14635139588"></a><a name="p14635139588"></a>Target width to crop the source image.</p>
-    </td>
-    </tr>
-    <tr id="row1646318132587"><td class="cellrowborder" valign="top" width="18.47%" headers="mcps1.1.6.1.1 "><p id="p646451355810"><a name="p646451355810"></a><a name="p646451355810"></a>sHeight</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.73%" headers="mcps1.1.6.1.2 "><p id="p4464913115814"><a name="p4464913115814"></a><a name="p4464913115814"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.879999999999999%" headers="mcps1.1.6.1.3 "><p id="p20464113165812"><a name="p20464113165812"></a><a name="p20464113165812"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.4 "><p id="p246481311582"><a name="p246481311582"></a><a name="p246481311582"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1546421365813"><a name="p1546421365813"></a><a name="p1546421365813"></a>Target height to crop the source image.</p>
-    </td>
-    </tr>
-    <tr id="row446451375813"><td class="cellrowborder" valign="top" width="18.47%" headers="mcps1.1.6.1.1 "><p id="p1946411335816"><a name="p1946411335816"></a><a name="p1946411335816"></a>dx</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.73%" headers="mcps1.1.6.1.2 "><p id="p8465151313589"><a name="p8465151313589"></a><a name="p8465151313589"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.879999999999999%" headers="mcps1.1.6.1.3 "><p id="p3465181310587"><a name="p3465181310587"></a><a name="p3465181310587"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.4 "><p id="p10465913155814"><a name="p10465913155814"></a><a name="p10465913155814"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p14465813115813"><a name="p14465813115813"></a><a name="p14465813115813"></a>X-coordinate of the upper left corner of the drawing area on the canvas.</p>
-    </td>
-    </tr>
-    <tr id="row12465513195815"><td class="cellrowborder" valign="top" width="18.47%" headers="mcps1.1.6.1.1 "><p id="p1465201313585"><a name="p1465201313585"></a><a name="p1465201313585"></a>dy</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.73%" headers="mcps1.1.6.1.2 "><p id="p74651135580"><a name="p74651135580"></a><a name="p74651135580"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.879999999999999%" headers="mcps1.1.6.1.3 "><p id="p64651613205817"><a name="p64651613205817"></a><a name="p64651613205817"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.4 "><p id="p1546614137582"><a name="p1546614137582"></a><a name="p1546614137582"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p3466161325816"><a name="p3466161325816"></a><a name="p3466161325816"></a>Y-coordinate of the upper left corner of the drawing area on the canvas.</p>
-    </td>
-    </tr>
-    <tr id="row12466313185817"><td class="cellrowborder" valign="top" width="18.47%" headers="mcps1.1.6.1.1 "><p id="p144661313155813"><a name="p144661313155813"></a><a name="p144661313155813"></a>dWidth</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.73%" headers="mcps1.1.6.1.2 "><p id="p24661613155810"><a name="p24661613155810"></a><a name="p24661613155810"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.879999999999999%" headers="mcps1.1.6.1.3 "><p id="p104661013135816"><a name="p104661013135816"></a><a name="p104661013135816"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.4 "><p id="p144665133586"><a name="p144665133586"></a><a name="p144665133586"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p046671314587"><a name="p046671314587"></a><a name="p046671314587"></a>Width of the drawing area.</p>
-    </td>
-    </tr>
-    <tr id="row1467181325811"><td class="cellrowborder" valign="top" width="18.47%" headers="mcps1.1.6.1.1 "><p id="p18467191355819"><a name="p18467191355819"></a><a name="p18467191355819"></a>dHeight</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.73%" headers="mcps1.1.6.1.2 "><p id="p1246712138583"><a name="p1246712138583"></a><a name="p1246712138583"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.879999999999999%" headers="mcps1.1.6.1.3 "><p id="p184678132583"><a name="p184678132583"></a><a name="p184678132583"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.4 "><p id="p4467813175813"><a name="p4467813175813"></a><a name="p4467813175813"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p144671913115820"><a name="p144671913115820"></a><a name="p144671913115820"></a>Height of the drawing area.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct ImageExample {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true);
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
-      private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.drawImage( this.img,0,0,500,500,0,0,400,200);
-          })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | image | [ERROR:Invalid&nbsp;link:en-us_topic_0000001212378364.xml#en-us_topic_0000001193075104_xref962584519412,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml) | Yes | null | Image&nbsp;resource.&nbsp;For&nbsp;details,&nbsp;see&nbsp;[ERROR:Invalid&nbsp;link:en-us_topic_0000001212378364.xml#xref29052050153012,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml). | 
+  | sx | number | No | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;used&nbsp;to&nbsp;crop&nbsp;the&nbsp;source&nbsp;image. | 
+  | sy | number | No | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;used&nbsp;to&nbsp;crop&nbsp;the&nbsp;source&nbsp;image. | 
+  | sWidth | number | No | 0 | Target&nbsp;width&nbsp;to&nbsp;crop&nbsp;the&nbsp;source&nbsp;image. | 
+  | sHeight | number | No | 0 | Target&nbsp;height&nbsp;to&nbsp;crop&nbsp;the&nbsp;source&nbsp;image. | 
+  | dx | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;drawing&nbsp;area&nbsp;on&nbsp;the&nbsp;canvas. | 
+  | dy | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;drawing&nbsp;area&nbsp;on&nbsp;the&nbsp;canvas. | 
+  | dWidth | number | No | 0 | Width&nbsp;of&nbsp;the&nbsp;drawing&nbsp;area. | 
+  | dHeight | number | No | 0 | Height&nbsp;of&nbsp;the&nbsp;drawing&nbsp;area. | 
+
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct ImageExample {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.drawImage( this.img,0,0,500,500,0,0,400,200);
+        })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
-
-    ![](figures/en-us_image_0000001192915154.png)
-
-
-### createImageData<a name="section1324226142420"></a>
-
-createImageData\(width: number, height: number\): Object
-
-Creates an  **ImageData**  object. For details, see  [ImageData](ts-components-canvas-imagedata.md).
-
--   Parameters
-
-    <a name="table1315461283811"></a>
-    <table><thead align="left"><tr id="row1015231243811"><th class="cellrowborder" valign="top" width="28.512851285128516%" id="mcps1.1.6.1.1"><p id="p7152312153810"><a name="p7152312153810"></a><a name="p7152312153810"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.521652165216523%" id="mcps1.1.6.1.2"><p id="p1015261263817"><a name="p1015261263817"></a><a name="p1015261263817"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.49094909490949%" id="mcps1.1.6.1.3"><p id="p29247427221"><a name="p29247427221"></a><a name="p29247427221"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.16161616161616%" id="mcps1.1.6.1.4"><p id="p15522134752214"><a name="p15522134752214"></a><a name="p15522134752214"></a>Default</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="29.312931293129314%" id="mcps1.1.6.1.5"><p id="p9152712143812"><a name="p9152712143812"></a><a name="p9152712143812"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row815320122384"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p61525123383"><a name="p61525123383"></a><a name="p61525123383"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.521652165216523%" headers="mcps1.1.6.1.2 "><p id="p10153151283815"><a name="p10153151283815"></a><a name="p10153151283815"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.49094909490949%" headers="mcps1.1.6.1.3 "><p id="p12924164242215"><a name="p12924164242215"></a><a name="p12924164242215"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.16161616161616%" headers="mcps1.1.6.1.4 "><p id="p6522144762218"><a name="p6522144762218"></a><a name="p6522144762218"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p1315331263812"><a name="p1315331263812"></a><a name="p1315331263812"></a>Width of the <strong id="b163240381569"><a name="b163240381569"></a><a name="b163240381569"></a>ImageData</strong> object.</p>
-    </td>
-    </tr>
-    <tr id="row121531812153813"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p4153141214385"><a name="p4153141214385"></a><a name="p4153141214385"></a>height</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.521652165216523%" headers="mcps1.1.6.1.2 "><p id="p01531212143810"><a name="p01531212143810"></a><a name="p01531212143810"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.49094909490949%" headers="mcps1.1.6.1.3 "><p id="p1492413424226"><a name="p1492413424226"></a><a name="p1492413424226"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.16161616161616%" headers="mcps1.1.6.1.4 "><p id="p152274715224"><a name="p152274715224"></a><a name="p152274715224"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p3153131217382"><a name="p3153131217382"></a><a name="p3153131217382"></a>Height of the <strong id="b1342144185616"><a name="b1342144185616"></a><a name="b1342144185616"></a>ImageData</strong> object.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-### createImageData<a name="section237295915248"></a>
-
-createImageData\(imageData: Object\): Object
-
-Creates an  **ImageData**  object. For details, see  [ImageData](ts-components-canvas-imagedata.md).
-
--   Parameters
-
-    <a name="table1376617177461"></a>
-    <table><thead align="left"><tr id="row476771711469"><th class="cellrowborder" valign="top" width="28.512851285128516%" id="mcps1.1.6.1.1"><p id="p13767131714620"><a name="p13767131714620"></a><a name="p13767131714620"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.521652165216523%" id="mcps1.1.6.1.2"><p id="p376751724611"><a name="p376751724611"></a><a name="p376751724611"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.49094909490949%" id="mcps1.1.6.1.3"><p id="p1876751718462"><a name="p1876751718462"></a><a name="p1876751718462"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.16161616161616%" id="mcps1.1.6.1.4"><p id="p1976701744613"><a name="p1976701744613"></a><a name="p1976701744613"></a>Default</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="29.312931293129314%" id="mcps1.1.6.1.5"><p id="p1276841724620"><a name="p1276841724620"></a><a name="p1276841724620"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1677141717462"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p377131712467"><a name="p377131712467"></a><a name="p377131712467"></a>imagedata</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.521652165216523%" headers="mcps1.1.6.1.2 "><p id="p1777191734616"><a name="p1777191734616"></a><a name="p1777191734616"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.49094909490949%" headers="mcps1.1.6.1.3 "><p id="p6772417114619"><a name="p6772417114619"></a><a name="p6772417114619"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.16161616161616%" headers="mcps1.1.6.1.4 "><p id="p1377217176463"><a name="p1377217176463"></a><a name="p1377217176463"></a>null</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p11772161744612"><a name="p11772161744612"></a><a name="p11772161744612"></a><strong id="b18399911105718"><a name="b18399911105718"></a><a name="b18399911105718"></a>ImageData</strong> object with the same width and height copied from the original <strong id="b640051165715"><a name="b640051165715"></a><a name="b640051165715"></a>ImageData</strong> object.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-### getImageData<a name="section13015437255"></a>
-
-getImageData\(sx: number, sy: number, sw: number, sh: number\): Object
-
-Creates an  [ImageData](ts-components-canvas-imagedata.md)  object with pixels in the specified area on the canvas.
-
--   Parameters
-
-    <a name="table03551423182717"></a>
-    <table><thead align="left"><tr id="row23561523152710"><th class="cellrowborder" valign="top" width="28.51000000000001%" id="mcps1.1.6.1.1"><p id="p1335652312713"><a name="p1335652312713"></a><a name="p1335652312713"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.960000000000004%" id="mcps1.1.6.1.2"><p id="p0356182332717"><a name="p0356182332717"></a><a name="p0356182332717"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.63%" id="mcps1.1.6.1.3"><p id="p1043529172512"><a name="p1043529172512"></a><a name="p1043529172512"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.39%" id="mcps1.1.6.1.4"><p id="p17308333182513"><a name="p17308333182513"></a><a name="p17308333182513"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51000000000001%" id="mcps1.1.6.1.5"><p id="p12356723122713"><a name="p12356723122713"></a><a name="p12356723122713"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1435692342711"><td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.1 "><p id="p8356223102718"><a name="p8356223102718"></a><a name="p8356223102718"></a>sx</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.960000000000004%" headers="mcps1.1.6.1.2 "><p id="p14357142313278"><a name="p14357142313278"></a><a name="p14357142313278"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.63%" headers="mcps1.1.6.1.3 "><p id="p74332962510"><a name="p74332962510"></a><a name="p74332962510"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.39%" headers="mcps1.1.6.1.4 "><p id="p8308133102515"><a name="p8308133102515"></a><a name="p8308133102515"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.5 "><p id="p1357923192710"><a name="p1357923192710"></a><a name="p1357923192710"></a>X-coordinate of the upper left corner of the output area.</p>
-    </td>
-    </tr>
-    <tr id="row7357142352712"><td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.1 "><p id="p4357172313279"><a name="p4357172313279"></a><a name="p4357172313279"></a>sy</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.960000000000004%" headers="mcps1.1.6.1.2 "><p id="p133571523152710"><a name="p133571523152710"></a><a name="p133571523152710"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.63%" headers="mcps1.1.6.1.3 "><p id="p1943162918254"><a name="p1943162918254"></a><a name="p1943162918254"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.39%" headers="mcps1.1.6.1.4 "><p id="p19308153312519"><a name="p19308153312519"></a><a name="p19308153312519"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.5 "><p id="p18357152311271"><a name="p18357152311271"></a><a name="p18357152311271"></a>Y-coordinate of the upper left corner of the output area.</p>
-    </td>
-    </tr>
-    <tr id="row83571223112712"><td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.1 "><p id="p12358132313275"><a name="p12358132313275"></a><a name="p12358132313275"></a>sw</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.960000000000004%" headers="mcps1.1.6.1.2 "><p id="p18358123162711"><a name="p18358123162711"></a><a name="p18358123162711"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.63%" headers="mcps1.1.6.1.3 "><p id="p174312296257"><a name="p174312296257"></a><a name="p174312296257"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.39%" headers="mcps1.1.6.1.4 "><p id="p3308203382517"><a name="p3308203382517"></a><a name="p3308203382517"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.5 "><p id="p1035842332715"><a name="p1035842332715"></a><a name="p1035842332715"></a>Width of the output area.</p>
-    </td>
-    </tr>
-    <tr id="row113588236273"><td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.1 "><p id="p8358142392715"><a name="p8358142392715"></a><a name="p8358142392715"></a>sh</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.960000000000004%" headers="mcps1.1.6.1.2 "><p id="p435882352717"><a name="p435882352717"></a><a name="p435882352717"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.63%" headers="mcps1.1.6.1.3 "><p id="p194352972513"><a name="p194352972513"></a><a name="p194352972513"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.39%" headers="mcps1.1.6.1.4 "><p id="p13308333172514"><a name="p13308333172514"></a><a name="p13308333172514"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.5 "><p id="p1335832316271"><a name="p1335832316271"></a><a name="p1335832316271"></a>Height of the output area.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-### putImageData<a name="section12653151732618"></a>
-
-putImageData\(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number\): void
-
-Puts the  [ImageData](ts-components-canvas-imagedata.md)  onto a rectangular area on the canvas.
-
--   Parameters
-
-    <a name="table1140093817271"></a>
-    <table><thead align="left"><tr id="row1400738152714"><th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.1"><p id="p1340073812276"><a name="p1340073812276"></a><a name="p1340073812276"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.96%" id="mcps1.1.6.1.2"><p id="p1740033816275"><a name="p1740033816275"></a><a name="p1740033816275"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.24%" id="mcps1.1.6.1.3"><p id="p097033012619"><a name="p097033012619"></a><a name="p097033012619"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="15.78%" id="mcps1.1.6.1.4"><p id="p38681535192616"><a name="p38681535192616"></a><a name="p38681535192616"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p740143832713"><a name="p740143832713"></a><a name="p740143832713"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row940163812710"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p64019386271"><a name="p64019386271"></a><a name="p64019386271"></a>imagedata</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.2 "><p id="p114011138132714"><a name="p114011138132714"></a><a name="p114011138132714"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.24%" headers="mcps1.1.6.1.3 "><p id="p1497063018261"><a name="p1497063018261"></a><a name="p1497063018261"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.78%" headers="mcps1.1.6.1.4 "><p id="p9868335182611"><a name="p9868335182611"></a><a name="p9868335182611"></a>null</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p8401173882716"><a name="p8401173882716"></a><a name="p8401173882716"></a><strong id="b114645517580"><a name="b114645517580"></a><a name="b114645517580"></a>ImageData</strong> object with pixels to put onto the canvas.</p>
-    </td>
-    </tr>
-    <tr id="row54014381278"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p184021338132711"><a name="p184021338132711"></a><a name="p184021338132711"></a>dx</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.2 "><p id="p540223872716"><a name="p540223872716"></a><a name="p540223872716"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.24%" headers="mcps1.1.6.1.3 "><p id="p697114305261"><a name="p697114305261"></a><a name="p697114305261"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.78%" headers="mcps1.1.6.1.4 "><p id="p14868635132618"><a name="p14868635132618"></a><a name="p14868635132618"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p174021238172710"><a name="p174021238172710"></a><a name="p174021238172710"></a>X-axis offset of the rectangular area on the canvas.</p>
-    </td>
-    </tr>
-    <tr id="row184027380274"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p174021738192710"><a name="p174021738192710"></a><a name="p174021738192710"></a>dy</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.2 "><p id="p204022386272"><a name="p204022386272"></a><a name="p204022386272"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.24%" headers="mcps1.1.6.1.3 "><p id="p9971133042616"><a name="p9971133042616"></a><a name="p9971133042616"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.78%" headers="mcps1.1.6.1.4 "><p id="p7868435132615"><a name="p7868435132615"></a><a name="p7868435132615"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p184021438162711"><a name="p184021438162711"></a><a name="p184021438162711"></a>Y-axis offset of the rectangular area on the canvas.</p>
-    </td>
-    </tr>
-    <tr id="row940213892715"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p194031938102716"><a name="p194031938102716"></a><a name="p194031938102716"></a>dirtyX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.2 "><p id="p24034381275"><a name="p24034381275"></a><a name="p24034381275"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.24%" headers="mcps1.1.6.1.3 "><p id="p497153042619"><a name="p497153042619"></a><a name="p497153042619"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.78%" headers="mcps1.1.6.1.4 "><p id="p88681635102617"><a name="p88681635102617"></a><a name="p88681635102617"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p140363822713"><a name="p140363822713"></a><a name="p140363822713"></a>X-axis offset of the upper left corner of the rectangular area relative to that of the source image.</p>
-    </td>
-    </tr>
-    <tr id="row114031538202712"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p1740393862716"><a name="p1740393862716"></a><a name="p1740393862716"></a>dirtyY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.2 "><p id="p3403143862714"><a name="p3403143862714"></a><a name="p3403143862714"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.24%" headers="mcps1.1.6.1.3 "><p id="p09711030182613"><a name="p09711030182613"></a><a name="p09711030182613"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.78%" headers="mcps1.1.6.1.4 "><p id="p486853552613"><a name="p486853552613"></a><a name="p486853552613"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p74045383271"><a name="p74045383271"></a><a name="p74045383271"></a>Y-axis offset of the upper left corner of the rectangular area relative to that of the source image.</p>
-    </td>
-    </tr>
-    <tr id="row340443882716"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p124041738162713"><a name="p124041738162713"></a><a name="p124041738162713"></a>dirtyWidth</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.2 "><p id="p0404238182716"><a name="p0404238182716"></a><a name="p0404238182716"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.24%" headers="mcps1.1.6.1.3 "><p id="p109711230182618"><a name="p109711230182618"></a><a name="p109711230182618"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.78%" headers="mcps1.1.6.1.4 "><p id="p5868435102615"><a name="p5868435102615"></a><a name="p5868435102615"></a>Width of the <strong id="b1899913418594"><a name="b1899913418594"></a><a name="b1899913418594"></a>ImageData</strong> object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1840403813271"><a name="p1840403813271"></a><a name="p1840403813271"></a>Width of the rectangular area to crop the source image.</p>
-    </td>
-    </tr>
-    <tr id="row1640417387275"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p94041238122716"><a name="p94041238122716"></a><a name="p94041238122716"></a>dirtyHeight</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.2 "><p id="p14040385271"><a name="p14040385271"></a><a name="p14040385271"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.24%" headers="mcps1.1.6.1.3 "><p id="p59711930142612"><a name="p59711930142612"></a><a name="p59711930142612"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.78%" headers="mcps1.1.6.1.4 "><p id="p1486815355264"><a name="p1486815355264"></a><a name="p1486815355264"></a>Height of the <strong id="b166585013593"><a name="b166585013593"></a><a name="b166585013593"></a>ImageData</strong> object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p84051382278"><a name="p84051382278"></a><a name="p84051382278"></a>Height of the rectangular area to crop the source image.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct PutImageData {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              var imageData = this.context.createImageData(100, 100)
-              for (var i = 0; i < imageData.data.length; i += 4) {
-                imageData.data[i + 0] = 255
-                imageData.data[i + 1] = 0
-                imageData.data[i + 2] = 255
-                imageData.data[i + 3] = 255
-              }
-              this.context.putImageData(imageData, 10, 10)
-            })
-        }
-        .width('100%')
-        .height('100%')
+  }
+  ```
+
+  ![en-us_image_0000001212058466](figures/en-us_image_0000001212058466.png)
+
+
+### createImageData
+
+createImageData(width: number, height: number): Object
+
+Creates an **ImageData** object. For details, see [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md).
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | width | number | Yes | 0 | Width&nbsp;of&nbsp;the&nbsp;**ImageData**&nbsp;object. | 
+  | height | number | Yes | 0 | Height&nbsp;of&nbsp;the&nbsp;**ImageData**&nbsp;object. | 
+
+
+### createImageData
+
+createImageData(imageData: Object): Object
+
+Creates an **ImageData** object. For details, see [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md).
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | imagedata | Object | Yes | null | **ImageData**&nbsp;object&nbsp;with&nbsp;the&nbsp;same&nbsp;width&nbsp;and&nbsp;height&nbsp;copied&nbsp;from&nbsp;the&nbsp;original&nbsp;**ImageData**&nbsp;object. | 
+
+
+### getImageData
+
+getImageData(sx: number, sy: number, sw: number, sh: number): Object
+
+  Creates an [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md) object with pixels in the specified area on the canvas.
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | sx | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;output&nbsp;area. | 
+  | sy | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;output&nbsp;area. | 
+  | sw | number | Yes | 0 | Width&nbsp;of&nbsp;the&nbsp;output&nbsp;area. | 
+  | sh | number | Yes | 0 | Height&nbsp;of&nbsp;the&nbsp;output&nbsp;area. | 
+
+
+### putImageData
+
+putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number): void
+
+Puts the [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md) onto a rectangular area on the canvas.
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | imagedata | Object | Yes | null | **ImageData**&nbsp;object&nbsp;with&nbsp;pixels&nbsp;to&nbsp;put&nbsp;onto&nbsp;the&nbsp;canvas. | 
+  | dx | number | Yes | 0 | X-axis&nbsp;offset&nbsp;of&nbsp;the&nbsp;rectangular&nbsp;area&nbsp;on&nbsp;the&nbsp;canvas. | 
+  | dy | number | Yes | 0 | Y-axis&nbsp;offset&nbsp;of&nbsp;the&nbsp;rectangular&nbsp;area&nbsp;on&nbsp;the&nbsp;canvas. | 
+  | dirtyX | number | No | 0 | X-axis&nbsp;offset&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangular&nbsp;area&nbsp;relative&nbsp;to&nbsp;that&nbsp;of&nbsp;the&nbsp;source&nbsp;image. | 
+  | dirtyY | number | No | 0 | Y-axis&nbsp;offset&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangular&nbsp;area&nbsp;relative&nbsp;to&nbsp;that&nbsp;of&nbsp;the&nbsp;source&nbsp;image. | 
+  | dirtyWidth | number | No | Width&nbsp;of&nbsp;the&nbsp;**ImageData**&nbsp;object | Width&nbsp;of&nbsp;the&nbsp;rectangular&nbsp;area&nbsp;to&nbsp;crop&nbsp;the&nbsp;source&nbsp;image. | 
+  | dirtyHeight | number | No | Height&nbsp;of&nbsp;the&nbsp;**ImageData**&nbsp;object | Height&nbsp;of&nbsp;the&nbsp;rectangular&nbsp;area&nbsp;to&nbsp;crop&nbsp;the&nbsp;source&nbsp;image. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct PutImageData {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            var imageData = this.context.createImageData(100, 100)
+            for (var i = 0; i < imageData.data.length; i += 4) {
+              imageData.data[i + 0] = 255
+              imageData.data[i + 1] = 0
+              imageData.data[i + 2] = 255
+              imageData.data[i + 3] = 255
+            }
+            this.context.putImageData(imageData, 10, 10)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001193075134.png)
+  ![en-us_image_0000001212378396](figures/en-us_image_0000001212378396.png)
 
 
-### restore<a name="section16330131011274"></a>
+### restore
 
-restore\(\): void
+restore(): void
 
 Restores the saved drawing context.
 
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct CanvasExample {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.restore()
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct CanvasExample {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.restore()
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
 
-### save<a name="section6171122153717"></a>
+### save
 
-save\(\): void
+save(): void
 
 Saves the current drawing context.
 
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct CanvasExample {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.context.save()
-          })
-        }
-        .width('100%')
-        .height('100%')
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct CanvasExample {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.save()
+        })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
 
-### createLinearGradient<a name="section10822717373"></a>
+### createLinearGradient
 
-createLinearGradient\(x0: number, y0: number, x1: number, y1: number\): void
+createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
 
 Creates a linear gradient.
 
--   Parameters
-
-    <a name="table138621614535"></a>
-    <table><thead align="left"><tr id="row985101685315"><th class="cellrowborder" valign="top" width="28.512851285128516%" id="mcps1.1.6.1.1"><p id="p48411169533"><a name="p48411169533"></a><a name="p48411169533"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.641664166416643%" id="mcps1.1.6.1.2"><p id="p184716145317"><a name="p184716145317"></a><a name="p184716145317"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.02120212021202%" id="mcps1.1.6.1.3"><p id="p1164517478287"><a name="p1164517478287"></a><a name="p1164517478287"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.511351135113511%" id="mcps1.1.6.1.4"><p id="p5988953122811"><a name="p5988953122811"></a><a name="p5988953122811"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="29.312931293129314%" id="mcps1.1.6.1.5"><p id="p88541613538"><a name="p88541613538"></a><a name="p88541613538"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row188512161533"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p1785141695316"><a name="p1785141695316"></a><a name="p1785141695316"></a>x0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.641664166416643%" headers="mcps1.1.6.1.2 "><p id="p88581645314"><a name="p88581645314"></a><a name="p88581645314"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.02120212021202%" headers="mcps1.1.6.1.3 "><p id="p11645154732816"><a name="p11645154732816"></a><a name="p11645154732816"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.511351135113511%" headers="mcps1.1.6.1.4 "><p id="p3988175311285"><a name="p3988175311285"></a><a name="p3988175311285"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p685216145320"><a name="p685216145320"></a><a name="p685216145320"></a>X-coordinate of the start point.</p>
-    </td>
-    </tr>
-    <tr id="row12851816185311"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p1985191655315"><a name="p1985191655315"></a><a name="p1985191655315"></a>y0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.641664166416643%" headers="mcps1.1.6.1.2 "><p id="p1085171618532"><a name="p1085171618532"></a><a name="p1085171618532"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.02120212021202%" headers="mcps1.1.6.1.3 "><p id="p1464516471281"><a name="p1464516471281"></a><a name="p1464516471281"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.511351135113511%" headers="mcps1.1.6.1.4 "><p id="p49887536287"><a name="p49887536287"></a><a name="p49887536287"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p3852166531"><a name="p3852166531"></a><a name="p3852166531"></a>Y-coordinate of the start point.</p>
-    </td>
-    </tr>
-    <tr id="row188511168531"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p178518163533"><a name="p178518163533"></a><a name="p178518163533"></a>x1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.641664166416643%" headers="mcps1.1.6.1.2 "><p id="p78571611530"><a name="p78571611530"></a><a name="p78571611530"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.02120212021202%" headers="mcps1.1.6.1.3 "><p id="p264574762811"><a name="p264574762811"></a><a name="p264574762811"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.511351135113511%" headers="mcps1.1.6.1.4 "><p id="p189886531283"><a name="p189886531283"></a><a name="p189886531283"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p78501665319"><a name="p78501665319"></a><a name="p78501665319"></a>X-coordinate of the end point.</p>
-    </td>
-    </tr>
-    <tr id="row586121665311"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p1685101614536"><a name="p1685101614536"></a><a name="p1685101614536"></a>y1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.641664166416643%" headers="mcps1.1.6.1.2 "><p id="p4862163539"><a name="p4862163539"></a><a name="p4862163539"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.02120212021202%" headers="mcps1.1.6.1.3 "><p id="p15645547102815"><a name="p15645547102815"></a><a name="p15645547102815"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.511351135113511%" headers="mcps1.1.6.1.4 "><p id="p14988353142810"><a name="p14988353142810"></a><a name="p14988353142810"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p986121685316"><a name="p986121685316"></a><a name="p986121685316"></a>Y-coordinate of the end point.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct CreateLinearGradient {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x0 | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;start&nbsp;point. | 
+  | y0 | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;start&nbsp;point. | 
+  | x1 | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;end&nbsp;point. | 
+  | y1 | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;end&nbsp;point. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct CreateLinearGradient {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              var grad = this.context.createLinearGradient(50,0, 300,100)
-              gra.addColorStop(0.0, 'red')
-              gra.addColorStop(0.5, 'white')
-              gra.addColorStop(1.0, 'green')
-              this.context.fillStyle = grad
-              this.context.fillRect(0, 0, 500, 500)
-            })
-        }
-        .width('100%')
-        .height('100%')
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            var grad = this.context.createLinearGradient(50,0, 300,100)
+            this.grad.addColorStop(0.0, 'red')
+            this.grad.addColorStop(0.5, 'white')
+            this.grad.addColorStop(1.0, 'green')
+            this.context.fillStyle = grad
+            this.context.fillRect(0, 0, 500, 500)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
-    
+  }
+  ```
 
-![](figures/en-us_image_0000001237555149.png)
+  ![en-us_image_0000001212378412](figures/en-us_image_0000001212378412.png)
 
 
-### createRadialGradient<a name="section932032913385"></a>
+### createRadialGradient
 
-createRadialGradient\(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number\): void
+createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): void
 
 Creates a linear gradient.
 
--   Parameters
-
-    <a name="table14083215541"></a>
-    <table><thead align="left"><tr id="row5388326541"><th class="cellrowborder" valign="top" width="28.512851285128516%" id="mcps1.1.6.1.1"><p id="p113753285412"><a name="p113753285412"></a><a name="p113753285412"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="17.25172517251725%" id="mcps1.1.6.1.2"><p id="p163711328546"><a name="p163711328546"></a><a name="p163711328546"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.931193119311931%" id="mcps1.1.6.1.3"><p id="p47877337291"><a name="p47877337291"></a><a name="p47877337291"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.991299129912989%" id="mcps1.1.6.1.4"><p id="p1751720443295"><a name="p1751720443295"></a><a name="p1751720443295"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="29.312931293129314%" id="mcps1.1.6.1.5"><p id="p18381032145418"><a name="p18381032145418"></a><a name="p18381032145418"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row63873215548"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p33863217543"><a name="p33863217543"></a><a name="p33863217543"></a>x0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.25172517251725%" headers="mcps1.1.6.1.2 "><p id="p83814323549"><a name="p83814323549"></a><a name="p83814323549"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.931193119311931%" headers="mcps1.1.6.1.3 "><p id="p4787123317291"><a name="p4787123317291"></a><a name="p4787123317291"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.991299129912989%" headers="mcps1.1.6.1.4 "><p id="p1451784442917"><a name="p1451784442917"></a><a name="p1451784442917"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p73823295417"><a name="p73823295417"></a><a name="p73823295417"></a>X-coordinate of the center of the start circle.</p>
-    </td>
-    </tr>
-    <tr id="row838183255414"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p1338193214546"><a name="p1338193214546"></a><a name="p1338193214546"></a>y0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.25172517251725%" headers="mcps1.1.6.1.2 "><p id="p1238832155416"><a name="p1238832155416"></a><a name="p1238832155416"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.931193119311931%" headers="mcps1.1.6.1.3 "><p id="p5787933122910"><a name="p5787933122910"></a><a name="p5787933122910"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.991299129912989%" headers="mcps1.1.6.1.4 "><p id="p15517944112912"><a name="p15517944112912"></a><a name="p15517944112912"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p338173275413"><a name="p338173275413"></a><a name="p338173275413"></a>Y-coordinate of the center of the start circle.</p>
-    </td>
-    </tr>
-    <tr id="row1539143211548"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p143893265415"><a name="p143893265415"></a><a name="p143893265415"></a>r0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.25172517251725%" headers="mcps1.1.6.1.2 "><p id="p33963213548"><a name="p33963213548"></a><a name="p33963213548"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.931193119311931%" headers="mcps1.1.6.1.3 "><p id="p107871933102913"><a name="p107871933102913"></a><a name="p107871933102913"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.991299129912989%" headers="mcps1.1.6.1.4 "><p id="p1151794422915"><a name="p1151794422915"></a><a name="p1151794422915"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p239232165411"><a name="p239232165411"></a><a name="p239232165411"></a>Radius of the start circle, which must be a non-negative finite number.</p>
-    </td>
-    </tr>
-    <tr id="row7392327549"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p73953205420"><a name="p73953205420"></a><a name="p73953205420"></a>x1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.25172517251725%" headers="mcps1.1.6.1.2 "><p id="p23913217543"><a name="p23913217543"></a><a name="p23913217543"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.931193119311931%" headers="mcps1.1.6.1.3 "><p id="p1178753312292"><a name="p1178753312292"></a><a name="p1178753312292"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.991299129912989%" headers="mcps1.1.6.1.4 "><p id="p4517544102915"><a name="p4517544102915"></a><a name="p4517544102915"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p43933210545"><a name="p43933210545"></a><a name="p43933210545"></a>X-coordinate of the center of the end circle.</p>
-    </td>
-    </tr>
-    <tr id="row1339732195410"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p839932105413"><a name="p839932105413"></a><a name="p839932105413"></a>y1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.25172517251725%" headers="mcps1.1.6.1.2 "><p id="p43910327541"><a name="p43910327541"></a><a name="p43910327541"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.931193119311931%" headers="mcps1.1.6.1.3 "><p id="p078733392919"><a name="p078733392919"></a><a name="p078733392919"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.991299129912989%" headers="mcps1.1.6.1.4 "><p id="p1151784422916"><a name="p1151784422916"></a><a name="p1151784422916"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p9391032195411"><a name="p9391032195411"></a><a name="p9391032195411"></a>Y-coordinate of the center of the end circle.</p>
-    </td>
-    </tr>
-    <tr id="row740143275410"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p1440632125419"><a name="p1440632125419"></a><a name="p1440632125419"></a>r1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.25172517251725%" headers="mcps1.1.6.1.2 "><p id="p2405320545"><a name="p2405320545"></a><a name="p2405320545"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.931193119311931%" headers="mcps1.1.6.1.3 "><p id="p678713315293"><a name="p678713315293"></a><a name="p678713315293"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.991299129912989%" headers="mcps1.1.6.1.4 "><p id="p15171944172915"><a name="p15171944172915"></a><a name="p15171944172915"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p240173211546"><a name="p240173211546"></a><a name="p240173211546"></a>Radius of the end circle, which must be a non-negative finite number.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct CreateRadialGradient {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              var grad = this.context.createRadialGradient(200,200,50, 200,200,200)
-              gra.addColorStop(0.0, 'red')
-              gra.addColorStop(0.5, 'white')
-              gra.addColorStop(1.0, 'green')
-              this.context.fillStyle = grad
-              this.context.fillRect(0, 0, 500, 500)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x0 | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;of&nbsp;the&nbsp;start&nbsp;circle. | 
+  | y0 | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;of&nbsp;the&nbsp;start&nbsp;circle. | 
+  | r0 | number | Yes | 0 | Radius&nbsp;of&nbsp;the&nbsp;start&nbsp;circle,&nbsp;which&nbsp;must&nbsp;be&nbsp;a&nbsp;non-negative&nbsp;finite&nbsp;number. | 
+  | x1 | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;of&nbsp;the&nbsp;end&nbsp;circle. | 
+  | y1 | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;of&nbsp;the&nbsp;end&nbsp;circle. | 
+  | r1 | number | Yes | 0 | Radius&nbsp;of&nbsp;the&nbsp;end&nbsp;circle,&nbsp;which&nbsp;must&nbsp;be&nbsp;a&nbsp;non-negative&nbsp;finite&nbsp;number. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct CreateRadialGradient {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            var grad = this.context.createRadialGradient(200,200,50, 200,200,200)
+            this.grad.addColorStop(0.0, 'red')
+            this.grad.addColorStop(0.5, 'white')
+            this.grad.addColorStop(1.0, 'green')
+            this.context.fillStyle = grad
+            this.context.fillRect(0, 0, 500, 500)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
-    
-![](figures/en-us_image_0000001192755188.png)
+  }
+  ```
 
+  ![en-us_image_0000001257058405](figures/en-us_image_0000001257058405.png)
 
-## CanvasPattern<a name="section146853345417"></a>
 
-Defines an object created by using the  [createPattern](#section1643216163371)  method.
+## CanvasPattern
 
+Defines an object created by using the [createPattern](#createpattern) method.
diff --git a/en/application-dev/reference/arkui-ts/ts-combined-gestures.md b/en/application-dev/reference/arkui-ts/ts-combined-gestures.md
index bbcfb02bb9daa3fc81bf01a900c2ad8315238d69..cbfe726ced5593f908adcef668b7a61789841c3f 100644
--- a/en/application-dev/reference/arkui-ts/ts-combined-gestures.md
+++ b/en/application-dev/reference/arkui-ts/ts-combined-gestures.md
@@ -1,106 +1,42 @@
-# Combined Gestures<a name="EN-US_TOPIC_0000001193075118"></a>
+# Combined Gestures
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> Combined gestures are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## APIs<a name="section46581530142116"></a>
-
-GestureGroup\(mode: GestureMode, ...gesture: GestureType\[\]\)
-
--   Parameters
-
-    <a name="table173341539181419"></a>
-    <table><thead align="left"><tr id="row1333463916149"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p133353392142"><a name="p133353392142"></a><a name="p133353392142"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.330000000000002%" id="mcps1.1.6.1.2"><p id="p1335143919146"><a name="p1335143919146"></a><a name="p1335143919146"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.450000000000001%" id="mcps1.1.6.1.3"><p id="p0335193981413"><a name="p0335193981413"></a><a name="p0335193981413"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.35%" id="mcps1.1.6.1.4"><p id="p1333543911418"><a name="p1333543911418"></a><a name="p1333543911418"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="42.76%" id="mcps1.1.6.1.5"><p id="p6335173915149"><a name="p6335173915149"></a><a name="p6335173915149"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1433516398146"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p9335439111419"><a name="p9335439111419"></a><a name="p9335439111419"></a>mode</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.330000000000002%" headers="mcps1.1.6.1.2 "><p id="p43352391148"><a name="p43352391148"></a><a name="p43352391148"></a><a href="#li1176517215161">GestureMode</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.450000000000001%" headers="mcps1.1.6.1.3 "><p id="p9335239141417"><a name="p9335239141417"></a><a name="p9335239141417"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.35%" headers="mcps1.1.6.1.4 "><p id="p15335839161412"><a name="p15335839161412"></a><a name="p15335839161412"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.76%" headers="mcps1.1.6.1.5 "><p id="p71884403389"><a name="p71884403389"></a><a name="p71884403389"></a>Recognition mode of combined gestures.</p>
-    </td>
-    </tr>
-    <tr id="row8335239171414"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p17335153941411"><a name="p17335153941411"></a><a name="p17335153941411"></a>gesture</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.330000000000002%" headers="mcps1.1.6.1.2 "><p id="p207391156164411"><a name="p207391156164411"></a><a name="p207391156164411"></a><a href="ts-basic-gestures-tapgesture.md">TapGesture</a></p>
-    <p id="p1873975624410"><a name="p1873975624410"></a><a name="p1873975624410"></a>| <a href="ts-basic-gestures-longpressgesture.md">LongPressGesture</a></p>
-    <p id="p17391556114410"><a name="p17391556114410"></a><a name="p17391556114410"></a>| <a href="ts-basic-gestures-pangesture.md">PanGesture</a></p>
-    <p id="p12739556194416"><a name="p12739556194416"></a><a name="p12739556194416"></a>| <a href="ts-basic-gestures-pinchgesture.md">PinchGesture</a></p>
-    <p id="p9739185616449"><a name="p9739185616449"></a><a name="p9739185616449"></a>| <a href="ts-basic-gestures-rotationgesture.md">RotationGesture</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.450000000000001%" headers="mcps1.1.6.1.3 "><p id="p14335639151414"><a name="p14335639151414"></a><a name="p14335639151414"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.35%" headers="mcps1.1.6.1.4 "><p id="p103359397141"><a name="p103359397141"></a><a name="p103359397141"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.76%" headers="mcps1.1.6.1.5 "><p id="p203351539171416"><a name="p203351539171416"></a><a name="p203351539171416"></a>Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li1176517215161"></a>GestureMode enums
-
-    <a name="table3452114216394"></a>
-    <table><thead align="left"><tr id="row245219426397"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p545244283914"><a name="p545244283914"></a><a name="p545244283914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p2452114203917"><a name="p2452114203917"></a><a name="p2452114203917"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6452144218390"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p34529427398"><a name="p34529427398"></a><a name="p34529427398"></a>Sequence</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245211421393"><a name="p1245211421393"></a><a name="p1245211421393"></a>Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized.</p>
-    </td>
-    </tr>
-    <tr id="row12452184217398"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p54523425398"><a name="p54523425398"></a><a name="p54523425398"></a>Parallel</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p745215426391"><a name="p745215426391"></a><a name="p745215426391"></a>Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other.</p>
-    </td>
-    </tr>
-    <tr id="row9452134213392"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p510719111403"><a name="p510719111403"></a><a name="p510719111403"></a>Exclusive</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p154533425394"><a name="p154533425394"></a><a name="p154533425394"></a>Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Events<a name="section660220206578"></a>
-
-<a name="table2683193511513"></a>
-<table><thead align="left"><tr id="row76836351515"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p196831635195112"><a name="p196831635195112"></a><a name="p196831635195112"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p186841835145111"><a name="p186841835145111"></a><a name="p186841835145111"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1468416359511"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p156841935195116"><a name="p156841935195116"></a><a name="p156841935195116"></a>onCancel(event: () =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p17684103595118"><a name="p17684103595118"></a><a name="p17684103595118"></a>Callback for the GestureMode.Sequence cancellation event.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section16900453182718"></a>
+
+## APIs
+
+GestureGroup(mode: GestureMode, ...gesture: GestureType[])
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | mode | GestureMode | Yes | - | Recognition&nbsp;mode&nbsp;of&nbsp;combined&nbsp;gestures. |
+  | gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br/>\|&nbsp;[LongPressGesture](ts-basic-gestures-longpressgesture.md)<br/>\|&nbsp;[PanGesture](ts-basic-gestures-pangesture.md)<br/>\|&nbsp;[PinchGesture](ts-basic-gestures-pinchgesture.md)<br/>\|&nbsp;[RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes | - | Variable-length&nbsp;parameter,&nbsp;indicating&nbsp;one&nbsp;or&nbsp;more&nbsp;basic&nbsp;gesture&nbsp;types.&nbsp;These&nbsp;gestures&nbsp;are&nbsp;recognized&nbsp;in&nbsp;combination. |
+
+- GestureMode enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Sequence | Sequential&nbsp;recognition:&nbsp;Gestures&nbsp;are&nbsp;recognized&nbsp;in&nbsp;the&nbsp;registration&nbsp;sequence&nbsp;until&nbsp;all&nbsp;gestures&nbsp;are&nbsp;recognized&nbsp;successfully.&nbsp;When&nbsp;one&nbsp;gesture&nbsp;fails&nbsp;to&nbsp;be&nbsp;recognized,&nbsp;all&nbsp;gestures&nbsp;fail&nbsp;to&nbsp;be&nbsp;recognized. | 
+  | Parallel | Parallel&nbsp;recognition.&nbsp;Registered&nbsp;gestures&nbsp;are&nbsp;recognized&nbsp;concurrently&nbsp;until&nbsp;all&nbsp;gestures&nbsp;are&nbsp;recognized.&nbsp;The&nbsp;recognition&nbsp;result&nbsp;of&nbsp;each&nbsp;gesture&nbsp;does&nbsp;not&nbsp;affect&nbsp;each&nbsp;other. | 
+  | Exclusive | Exclusive&nbsp;recognition.&nbsp;Registered&nbsp;gestures&nbsp;are&nbsp;identified&nbsp;concurrently.&nbsp;If&nbsp;one&nbsp;gesture&nbsp;is&nbsp;successfully&nbsp;recognized,&nbsp;gesture&nbsp;recognition&nbsp;ends. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Callback&nbsp;for&nbsp;the&nbsp;GestureMode.Sequence&nbsp;cancellation&nbsp;event. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -145,5 +81,4 @@ struct GestureGroupExample {
 }
 ```
 
-![](figures/gesturegroup.gif)
-
+![en-us_image_0000001212058490](figures/en-us_image_0000001212058490.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
index f34c7ce4e16a6aa3e97fb37d4c1f2b30de43dac3..1fd47e4c50e772548d9392df87f77addeb4508a2 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
@@ -1,80 +1,49 @@
-# Canvas<a name="EN-US_TOPIC_0000001237355065"></a>
+# Canvas
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Canvas\>**  component can be used to customize drawings.
+> ![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.
 
-## Required Permissions<a name="section53281531154915"></a>
+
+The **&lt;Canvas&gt;** component can be used to customize drawings.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section9288143101012"></a>
+
+## Child Components
 
 None
 
-## APIs<a name="section15647101282420"></a>
-
-Canvas\(context: CanvasRenderingContext2D\)
-
--   Parameters
-
-    <a name="table193606194544"></a>
-    <table><thead align="left"><tr id="row536071910541"><th class="cellrowborder" valign="top" width="12.540000000000001%" id="mcps1.1.6.1.1"><p id="p436112199544"><a name="p436112199544"></a><a name="p436112199544"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.150000000000002%" id="mcps1.1.6.1.2"><p id="p19361319115410"><a name="p19361319115410"></a><a name="p19361319115410"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.49%" id="mcps1.1.6.1.3"><p id="p9361201975417"><a name="p9361201975417"></a><a name="p9361201975417"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.6%" id="mcps1.1.6.1.4"><p id="p43611199542"><a name="p43611199542"></a><a name="p43611199542"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="36.22%" id="mcps1.1.6.1.5"><p id="p1136141975419"><a name="p1136141975419"></a><a name="p1136141975419"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row10361101915545"><td class="cellrowborder" valign="top" width="12.540000000000001%" headers="mcps1.1.6.1.1 "><p id="p1361119155417"><a name="p1361119155417"></a><a name="p1361119155417"></a>context</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.150000000000002%" headers="mcps1.1.6.1.2 "><p id="p115573011512"><a name="p115573011512"></a><a name="p115573011512"></a><a href="ts-canvasrenderingcontext2d.md">CanvasRenderingContext2D</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.49%" headers="mcps1.1.6.1.3 "><p id="p153611119195411"><a name="p153611119195411"></a><a name="p153611119195411"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.6%" headers="mcps1.1.6.1.4 "><p id="p1436114193546"><a name="p1436114193546"></a><a name="p1436114193546"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p328155017218"><a name="p328155017218"></a><a name="p328155017218"></a>For details, see <a href="ts-canvasrenderingcontext2d.md">CanvasRenderingContext2D</a>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section2907183951110"></a>
-
-[Universal attributes](ts-universal-attributes-size.md)  are supported.
-
-## Events<a name="section47669296127"></a>
-
-In addition to  [universal events](ts-universal-events-click.md), the following events are supported.
-
-<a name="td0f869ce272e4d90b1c7df558ad7635e"></a>
-<table><thead align="left"><tr id="rf11e90428c78465b9e3a0c3ec2222a3c"><th class="cellrowborder" valign="top" width="34.2%" id="mcps1.1.4.1.1"><p id="a11b4cb4edcf14b5584841b089cbea895"><a name="a11b4cb4edcf14b5584841b089cbea895"></a><a name="a11b4cb4edcf14b5584841b089cbea895"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="16.470000000000002%" id="mcps1.1.4.1.2"><p id="ac56fe081db8a4ddca537c39d9abfcd33"><a name="ac56fe081db8a4ddca537c39d9abfcd33"></a><a name="ac56fe081db8a4ddca537c39d9abfcd33"></a>Parameter</p>
-</th>
-<th class="cellrowborder" valign="top" width="49.33%" id="mcps1.1.4.1.3"><p id="a05cdd2c741a54fe3a44575a5b2384be3"><a name="a05cdd2c741a54fe3a44575a5b2384be3"></a><a name="a05cdd2c741a54fe3a44575a5b2384be3"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="r960677f8f5e64d7f9b33b8a0ae0c824f"><td class="cellrowborder" valign="top" width="34.2%" headers="mcps1.1.4.1.1 "><p id="p931916913120"><a name="p931916913120"></a><a name="p931916913120"></a>onReady(callback: () =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.470000000000002%" headers="mcps1.1.4.1.2 "><p id="p685785963319"><a name="p685785963319"></a><a name="p685785963319"></a>None</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.33%" headers="mcps1.1.4.1.3 "><p id="p14183154363412"><a name="p14183154363412"></a><a name="p14183154363412"></a>Triggered when .</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section42931433142318"></a>
+
+## APIs
+
+Canvas(context: CanvasRenderingContext2D)
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | Yes | - | For&nbsp;details,&nbsp;see&nbsp;CanvasRenderingContext2D. |
+
+
+## Attributes
+
+[Universal attributes](ts-universal-attributes-size.md) are supported.
+
+
+## Events
+
+In addition to [universal events](ts-universal-events-click.md), the following events are supported.
+
+  | Name | Parameter | Description | 
+| -------- | -------- | -------- |
+| onReady(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | None | Triggered&nbsp;when&nbsp;. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -98,4 +67,3 @@ struct CanvasExample {
   }
 }
 ```
-
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
index b601e5821a052b5d077692a6a22dfe8b34e33718..c218127bbbd13f612e56f6e9a518682efdfe07ee 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
@@ -1,86 +1,53 @@
-# CanvasGradient<a name="EN-US_TOPIC_0000001193075102"></a>
+# CanvasGradient
 
->![](../../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.
 
-**CanvasGradient**  provides a gradient object.
+> ![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.
 
-## addColorStop<a name="section12691015917"></a>
 
-addColorStop\(offset: number, color: string\): void
+**CanvasGradient** provides a gradient object.
 
-Adds a color stop for the  **CanvasGradient**  object based on the specified offset and gradient color.
 
--   Parameters
+## addColorStop
 
-    <a name="table1032173253712"></a>
-    <table><thead align="left"><tr id="row166643263712"><th class="cellrowborder" valign="top" width="18.55185518551855%" id="mcps1.1.6.1.1"><p id="p1966932123714"><a name="p1966932123714"></a><a name="p1966932123714"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.48114811481148%" id="mcps1.1.6.1.2"><p id="p10661232173710"><a name="p10661232173710"></a><a name="p10661232173710"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="6.440644064406441%" id="mcps1.1.6.1.3"><p id="p1613216534368"><a name="p1613216534368"></a><a name="p1613216534368"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.35103510351035%" id="mcps1.1.6.1.4"><p id="p1435194883610"><a name="p1435194883610"></a><a name="p1435194883610"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="53.17531753175317%" id="mcps1.1.6.1.5"><p id="p66673283719"><a name="p66673283719"></a><a name="p66673283719"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1166193243714"><td class="cellrowborder" valign="top" width="18.55185518551855%" headers="mcps1.1.6.1.1 "><p id="p96673263717"><a name="p96673263717"></a><a name="p96673263717"></a>offset</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.48114811481148%" headers="mcps1.1.6.1.2 "><p id="p1674323372"><a name="p1674323372"></a><a name="p1674323372"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.440644064406441%" headers="mcps1.1.6.1.3 "><p id="p213216535366"><a name="p213216535366"></a><a name="p213216535366"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.35103510351035%" headers="mcps1.1.6.1.4 "><p id="p17436194873615"><a name="p17436194873615"></a><a name="p17436194873615"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="53.17531753175317%" headers="mcps1.1.6.1.5 "><p id="p12672326374"><a name="p12672326374"></a><a name="p12672326374"></a>Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1.</p>
-    </td>
-    </tr>
-    <tr id="row146783253715"><td class="cellrowborder" valign="top" width="18.55185518551855%" headers="mcps1.1.6.1.1 "><p id="p46773203715"><a name="p46773203715"></a><a name="p46773203715"></a>color</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.48114811481148%" headers="mcps1.1.6.1.2 "><p id="p1967173213712"><a name="p1967173213712"></a><a name="p1967173213712"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.440644064406441%" headers="mcps1.1.6.1.3 "><p id="p1813214531367"><a name="p1813214531367"></a><a name="p1813214531367"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.35103510351035%" headers="mcps1.1.6.1.4 "><p id="p94361648183610"><a name="p94361648183610"></a><a name="p94361648183610"></a>'ffffff'</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="53.17531753175317%" headers="mcps1.1.6.1.5 "><p id="p1467123233710"><a name="p1467123233710"></a><a name="p1467123233710"></a>Gradient color to set.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+addColorStop(offset: number, color: string): void
 
--   Example
+Adds a color stop for the **CanvasGradient** object based on the specified offset and gradient color.
 
-    ```
-    @Entry
-    @Component
-    struct Page45 {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private gra:CanvasGradient = new CanvasGradient()
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | offset | number | Yes | 0 | Proportion&nbsp;of&nbsp;the&nbsp;distance&nbsp;between&nbsp;the&nbsp;color&nbsp;stop&nbsp;and&nbsp;the&nbsp;start&nbsp;point&nbsp;to&nbsp;the&nbsp;total&nbsp;length.&nbsp;The&nbsp;value&nbsp;ranges&nbsp;from&nbsp;0&nbsp;to&nbsp;1. | 
+  | color | string | Yes | 'ffffff' | Gradient&nbsp;color&nbsp;to&nbsp;set. | 
+
+- Example
     
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              var grad = this.context.createLinearGradient(50,0, 300,100)
-              gra.addColorStop(0.0, 'red')
-              gra.addColorStop(0.5, 'white')
-              gra.addColorStop(1.0, 'green')
-              this.context.fillStyle = grad
-              this.context.fillRect(0, 0, 500, 500)
-            })
-        }
-        .width('100%')
-        .height('100%')
+  ```
+  @Entry
+  @Component
+  struct Page45 {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            var grad = this.context.createLinearGradient(50,0, 300,100)
+            this.grad.addColorStop(0.0, 'red')
+            this.grad.addColorStop(0.5, 'white')
+            this.grad.addColorStop(1.0, 'green')
+            this.context.fillStyle = grad
+            this.context.fillRect(0, 0, 500, 500)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
-
-    ![](figures/en-us_image_0000001192915130.png)
+  }
+  ```
 
+  ![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
index ad48b3ddbedceba5f3e68743ebf8cf55fd3a76a9..4c19546b8c0b96ead05ae454c90621551f70bbb2 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
@@ -1,109 +1,17 @@
-# ImageBitmap<a name="EN-US_TOPIC_0000001192915114"></a>
+# ImageBitmap
 
->![](../../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.
 
-**ImageBitmap**  allows you to add an image bitmap.
+> ![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.
 
-## APIs<a name="section475132292218"></a>
 
-ImageBitmap\(src: string\)
+**CanvasImageData** stores pixel data rendered on a canvas.
 
--   Parameters
 
-    <a name="table193606194544"></a>
-    <table><thead align="left"><tr id="row536071910541"><th class="cellrowborder" valign="top" width="12.540000000000001%" id="mcps1.1.6.1.1"><p id="p436112199544"><a name="p436112199544"></a><a name="p436112199544"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.150000000000002%" id="mcps1.1.6.1.2"><p id="p19361319115410"><a name="p19361319115410"></a><a name="p19361319115410"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.49%" id="mcps1.1.6.1.3"><p id="p9361201975417"><a name="p9361201975417"></a><a name="p9361201975417"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.6%" id="mcps1.1.6.1.4"><p id="p43611199542"><a name="p43611199542"></a><a name="p43611199542"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="36.22%" id="mcps1.1.6.1.5"><p id="p1136141975419"><a name="p1136141975419"></a><a name="p1136141975419"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row10361101915545"><td class="cellrowborder" valign="top" width="12.540000000000001%" headers="mcps1.1.6.1.1 "><p id="p1361119155417"><a name="p1361119155417"></a><a name="p1361119155417"></a>src</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.150000000000002%" headers="mcps1.1.6.1.2 "><p id="p8361181913548"><a name="p8361181913548"></a><a name="p8361181913548"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.49%" headers="mcps1.1.6.1.3 "><p id="p153611119195411"><a name="p153611119195411"></a><a name="p153611119195411"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.6%" headers="mcps1.1.6.1.4 "><p id="p1436114193546"><a name="p1436114193546"></a><a name="p1436114193546"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p328155017218"><a name="p328155017218"></a><a name="p328155017218"></a>Path of the image bitmap object.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section12589251192117"></a>
-
-<a name="table858917515217"></a>
-<table><thead align="left"><tr id="row458711513210"><th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.1"><p id="p11587165172115"><a name="p11587165172115"></a><a name="p11587165172115"></a>Attribute</p>
-</th>
-<th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.2"><p id="p1558745192116"><a name="p1558745192116"></a><a name="p1558745192116"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.3"><p id="p11587551182110"><a name="p11587551182110"></a><a name="p11587551182110"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.4"><p id="p75879518212"><a name="p75879518212"></a><a name="p75879518212"></a>Mandatory</p>
-</th>
-<th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.5"><p id="p145872518214"><a name="p145872518214"></a><a name="p145872518214"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row458835117215"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p18587651132114"><a name="p18587651132114"></a><a name="p18587651132114"></a>width</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p05871051142111"><a name="p05871051142111"></a><a name="p05871051142111"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p135871151102115"><a name="p135871151102115"></a><a name="p135871151102115"></a>0px</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p65889512215"><a name="p65889512215"></a><a name="p65889512215"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p165881151162119"><a name="p165881151162119"></a><a name="p165881151162119"></a>Image width.</p>
-</td>
-</tr>
-<tr id="row5588651152112"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p65881951162115"><a name="p65881951162115"></a><a name="p65881951162115"></a>height</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p4883529131919"><a name="p4883529131919"></a><a name="p4883529131919"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p658810511214"><a name="p658810511214"></a><a name="p658810511214"></a>0px</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p13588195120219"><a name="p13588195120219"></a><a name="p13588195120219"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p5588105172111"><a name="p5588105172111"></a><a name="p5588105172111"></a>Image height.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-Example
-
-```
-@Entry
-@Component
-struct DrawImageExample {
-  private settings:RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private img:ImageBitmap = new ImageBitmap("common/images/example.jpg")
-
-  build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-      Canvas(this.context)
-        .width('100%')
-        .height('100%')
-        .backgroundColor('#ffff00')
-        .onReady(() =>{
-           this.context.drawImage( this.img,0,0,400,200)
-        })
-     }
-    .width('100%')
-    .height('100%')
-  }
-}
-```
-
-![](figures/en-us_image_0000001192595194.png)
+## Attributes
 
+  | Name | Type | Description | 
+| -------- | -------- | -------- |
+| width | number | Actual&nbsp;width&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;on&nbsp;the&nbsp;canvas,&nbsp;in&nbsp;pixels. | 
+| height | number | Actual&nbsp;height&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;on&nbsp;the&nbsp;canvas,&nbsp;in&nbsp;pixels. | 
+| data | &lt;Uint8ClampedArray&gt; | A&nbsp;one-dimensional&nbsp;array&nbsp;of&nbsp;color&nbsp;values.&nbsp;The&nbsp;values&nbsp;range&nbsp;from&nbsp;0&nbsp;to&nbsp;255. | 
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
index 43aa9147a1cad5c71649bac3f948aa1fc09675b6..5b749411fcb8551906e806d8b830c67c2d14865b 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
@@ -1,42 +1,17 @@
-# ImageData<a name="EN-US_TOPIC_0000001192755132"></a>
+# ImageData
 
->![](../../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.
 
-**CanvasImageData**  stores pixel data rendered on a canvas.
+> ![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.
 
-## Attributes<a name="section661391987"></a>
 
-<a name="table67211828124016"></a>
-<table><thead align="left"><tr id="row108577289405"><th class="cellrowborder" valign="top" width="22.872287228722872%" id="mcps1.1.4.1.1"><p id="p385742814403"><a name="p385742814403"></a><a name="p385742814403"></a>Attribute</p>
-</th>
-<th class="cellrowborder" valign="top" width="29.352935293529352%" id="mcps1.1.4.1.2"><p id="p19857192816408"><a name="p19857192816408"></a><a name="p19857192816408"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="47.774777477747776%" id="mcps1.1.4.1.3"><p id="p18573288402"><a name="p18573288402"></a><a name="p18573288402"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1085792824019"><td class="cellrowborder" valign="top" width="22.872287228722872%" headers="mcps1.1.4.1.1 "><p id="p1485792815404"><a name="p1485792815404"></a><a name="p1485792815404"></a>width</p>
-</td>
-<td class="cellrowborder" valign="top" width="29.352935293529352%" headers="mcps1.1.4.1.2 "><p id="p11857182804010"><a name="p11857182804010"></a><a name="p11857182804010"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.774777477747776%" headers="mcps1.1.4.1.3 "><p id="p1785711281405"><a name="p1785711281405"></a><a name="p1785711281405"></a>Actual width of the rectangle on the canvas, in pixels.</p>
-</td>
-</tr>
-<tr id="row3857132812406"><td class="cellrowborder" valign="top" width="22.872287228722872%" headers="mcps1.1.4.1.1 "><p id="p88572283404"><a name="p88572283404"></a><a name="p88572283404"></a>height</p>
-</td>
-<td class="cellrowborder" valign="top" width="29.352935293529352%" headers="mcps1.1.4.1.2 "><p id="p198571828114017"><a name="p198571828114017"></a><a name="p198571828114017"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.774777477747776%" headers="mcps1.1.4.1.3 "><p id="p3857192844012"><a name="p3857192844012"></a><a name="p3857192844012"></a>Actual height of the rectangle on the canvas, in pixels.</p>
-</td>
-</tr>
-<tr id="row178581628194020"><td class="cellrowborder" valign="top" width="22.872287228722872%" headers="mcps1.1.4.1.1 "><p id="p38582289408"><a name="p38582289408"></a><a name="p38582289408"></a>data</p>
-</td>
-<td class="cellrowborder" valign="top" width="29.352935293529352%" headers="mcps1.1.4.1.2 "><p id="p28581328104010"><a name="p28581328104010"></a><a name="p28581328104010"></a>&lt;Uint8ClampedArray&gt;</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.774777477747776%" headers="mcps1.1.4.1.3 "><p id="p085802844017"><a name="p085802844017"></a><a name="p085802844017"></a>A one-dimensional array of color values. The values range from 0 to 255.</p>
-</td>
-</tr>
-</tbody>
-</table>
+**ImageData** stores pixel data rendered on a canvas.
 
+
+## Attributes
+
+  | Name | Type | Description | 
+| -------- | -------- | -------- |
+| width | number | Actual&nbsp;width&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;on&nbsp;the&nbsp;canvas,&nbsp;in&nbsp;pixels. | 
+| height | number | Actual&nbsp;height&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;on&nbsp;the&nbsp;canvas,&nbsp;in&nbsp;pixels. | 
+| data | &lt;Uint8ClampedArray&gt; | A&nbsp;one-dimensional&nbsp;array&nbsp;of&nbsp;color&nbsp;values.&nbsp;The&nbsp;values&nbsp;range&nbsp;from&nbsp;0&nbsp;to&nbsp;255. | 
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
index b2a63e4de072dc9aebade58e2caeec761a522240..2a3247ecc08cf5597aedd5319b3602a61616bfe8 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
@@ -1,1343 +1,589 @@
-# Lottie<a name="EN-US_TOPIC_0000001193075114"></a>
+# Lottie
 
->![](../../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.
 
-Lottie is a third-party open-source library and depends on  **Canvas**  and  **RenderingContext**.
+> ![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.
 
-## Required Permissions<a name="section53281531154915"></a>
+
+## Required Permissions
 
 None
 
-## Modules to Import<a name="section1368314480509"></a>
 
+## Modules to Import
+
+  
 ```
-import lottie from 'lottie-web'
+import lottie from 'lottie-ohos-ets'
 ```
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->**'lottie-web'**  is subject to the actual released name.
-
-## lottie.loadAnimation<a name="section11378112123018"></a>
-
-loadAnimation\(
-
-path: string, container: object, render: string, loop: boolean, autoplay: boolean, name: string \): AnimationItem
-
-Loads an animation. Before calling this method, declare the  **Animator\('\_\_lottie\_ets'\)**  object and check that the canvas layout is complete. This method can be used together with a lifecycle callback of the  **Canvas**  component, for example,  **onAppear\(\)**  and  **onPageShow\(\)**.
-
--   Parameters
-
-    <a name="table73781129301"></a>
-    <table><thead align="left"><tr id="row037912124303"><th class="cellrowborder" valign="top" width="14.399999999999999%" id="mcps1.1.5.1.1"><p id="p437911214305"><a name="p437911214305"></a><a name="p437911214305"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.32%" id="mcps1.1.5.1.2"><p id="p153791912173019"><a name="p153791912173019"></a><a name="p153791912173019"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.059999999999999%" id="mcps1.1.5.1.3"><p id="p43791812163012"><a name="p43791812163012"></a><a name="p43791812163012"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.22%" id="mcps1.1.5.1.4"><p id="p3379111214309"><a name="p3379111214309"></a><a name="p3379111214309"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row63791612183018"><td class="cellrowborder" valign="top" width="14.399999999999999%" headers="mcps1.1.5.1.1 "><p id="p53799124302"><a name="p53799124302"></a><a name="p53799124302"></a>path</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.32%" headers="mcps1.1.5.1.2 "><p id="p1237918125301"><a name="p1237918125301"></a><a name="p1237918125301"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p0379111218307"><a name="p0379111218307"></a><a name="p0379111218307"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.22%" headers="mcps1.1.5.1.4 "><p id="p337918121301"><a name="p337918121301"></a><a name="p337918121301"></a>Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: <strong id="b15690184714366"><a name="b15690184714366"></a><a name="b15690184714366"></a>path: "common/lottie/data.json"</strong>.</p>
-    </td>
-    </tr>
-    <tr id="row18379161283015"><td class="cellrowborder" valign="top" width="14.399999999999999%" headers="mcps1.1.5.1.1 "><p id="p14379191283014"><a name="p14379191283014"></a><a name="p14379191283014"></a>container</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.32%" headers="mcps1.1.5.1.2 "><p id="p1337912121301"><a name="p1337912121301"></a><a name="p1337912121301"></a>object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p93793124301"><a name="p93793124301"></a><a name="p93793124301"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.22%" headers="mcps1.1.5.1.4 "><p id="p537981243018"><a name="p537981243018"></a><a name="p537981243018"></a>Canvas drawing context. A <strong id="b156372033163916"><a name="b156372033163916"></a><a name="b156372033163916"></a>CanvasRenderingContext2D</strong> object must be declared in advance.</p>
-    </td>
-    </tr>
-    <tr id="row4379512143018"><td class="cellrowborder" valign="top" width="14.399999999999999%" headers="mcps1.1.5.1.1 "><p id="p2037941263011"><a name="p2037941263011"></a><a name="p2037941263011"></a>render</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.32%" headers="mcps1.1.5.1.2 "><p id="p4379111219302"><a name="p4379111219302"></a><a name="p4379111219302"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p5379912103016"><a name="p5379912103016"></a><a name="p5379912103016"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.22%" headers="mcps1.1.5.1.4 "><p id="p10379121217306"><a name="p10379121217306"></a><a name="p10379121217306"></a>Rendering type. Only <strong id="b1629817513394"><a name="b1629817513394"></a><a name="b1629817513394"></a>canvas</strong> is supported.</p>
-    </td>
-    </tr>
-    <tr id="row7379612183019"><td class="cellrowborder" valign="top" width="14.399999999999999%" headers="mcps1.1.5.1.1 "><p id="p93801212153020"><a name="p93801212153020"></a><a name="p93801212153020"></a>loop</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.32%" headers="mcps1.1.5.1.2 "><p id="p10380151210308"><a name="p10380151210308"></a><a name="p10380151210308"></a>boolean | number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p3380171213306"><a name="p3380171213306"></a><a name="p3380171213306"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.22%" headers="mcps1.1.5.1.4 "><p id="p8380512133014"><a name="p8380512133014"></a><a name="p8380512133014"></a>If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is <strong id="b798125919462"><a name="b798125919462"></a><a name="b798125919462"></a>true</strong>. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays.</p>
-    </td>
-    </tr>
-    <tr id="row1938010121309"><td class="cellrowborder" valign="top" width="14.399999999999999%" headers="mcps1.1.5.1.1 "><p id="p14380212183012"><a name="p14380212183012"></a><a name="p14380212183012"></a>autoplay</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.32%" headers="mcps1.1.5.1.2 "><p id="p153801312153011"><a name="p153801312153011"></a><a name="p153801312153011"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p8380181243017"><a name="p8380181243017"></a><a name="p8380181243017"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.22%" headers="mcps1.1.5.1.4 "><p id="p13380111211309"><a name="p13380111211309"></a><a name="p13380111211309"></a>Whether to automatically play the animation. The default value is <strong id="b9800182119497"><a name="b9800182119497"></a><a name="b9800182119497"></a>true</strong>.</p>
-    </td>
-    </tr>
-    <tr id="row73802129303"><td class="cellrowborder" valign="top" width="14.399999999999999%" headers="mcps1.1.5.1.1 "><p id="p0380161293019"><a name="p0380161293019"></a><a name="p0380161293019"></a>name</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.32%" headers="mcps1.1.5.1.2 "><p id="p338001213018"><a name="p338001213018"></a><a name="p338001213018"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p1138020121306"><a name="p1138020121306"></a><a name="p1138020121306"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.22%" headers="mcps1.1.5.1.4 "><p id="p0380312103017"><a name="p0380312103017"></a><a name="p0380312103017"></a>Custom animation name. In later versions, the name can be used to reference and control the animation. The default value is null.</p>
-    </td>
-    </tr>
-    <tr id="row19382711102216"><td class="cellrowborder" valign="top" width="14.399999999999999%" headers="mcps1.1.5.1.1 "><p id="p638214113222"><a name="p638214113222"></a><a name="p638214113222"></a>initialSegment</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.32%" headers="mcps1.1.5.1.2 "><p id="p10382411162219"><a name="p10382411162219"></a><a name="p10382411162219"></a>[number, number]</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p13821211112210"><a name="p13821211112210"></a><a name="p13821211112210"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.22%" headers="mcps1.1.5.1.4 "><p id="p1416611137243"><a name="p1416611137243"></a><a name="p1416611137243"></a>Start frame and end frame of the animation, respectively.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## lottie.destroy<a name="section0927174125215"></a>
-
-destroy\(name: string\): void
-
-Destroys the animation. This method must be called when a page exits. This method can be used together with a lifecycle callback of the  **Canvas**  component, for example,  **onDisappear\(\)**  and  **onPageHide\(\)**.
-
--   Parameters
-
-    <a name="table116784429596"></a>
-    <table><thead align="left"><tr id="row167864213591"><th class="cellrowborder" valign="top" width="14.38%" id="mcps1.1.5.1.1"><p id="p8678134225914"><a name="p8678134225914"></a><a name="p8678134225914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.35%" id="mcps1.1.5.1.2"><p id="p567911425597"><a name="p567911425597"></a><a name="p567911425597"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.059999999999999%" id="mcps1.1.5.1.3"><p id="p1099718561418"><a name="p1099718561418"></a><a name="p1099718561418"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.21%" id="mcps1.1.5.1.4"><p id="p116798423594"><a name="p116798423594"></a><a name="p116798423594"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row46791042125917"><td class="cellrowborder" valign="top" width="14.38%" headers="mcps1.1.5.1.1 "><p id="p181017141103"><a name="p181017141103"></a><a name="p181017141103"></a>name</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.35%" headers="mcps1.1.5.1.2 "><p id="p1967994235916"><a name="p1967994235916"></a><a name="p1967994235916"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p299815561611"><a name="p299815561611"></a><a name="p299815561611"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.21%" headers="mcps1.1.5.1.4 "><p id="p697532875611"><a name="p697532875611"></a><a name="p697532875611"></a>Name of the animation to destroy, which is the same as the <strong id="b174515965919"><a name="b174515965919"></a><a name="b174515965919"></a>name</strong> in the <strong id="b88191218155911"><a name="b88191218155911"></a><a name="b88191218155911"></a>loadAnimation</strong> interface. By default, all animations are destroyed.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    import lottie from 'lottie-web'
-    
-    @Entry
-    @Component
-    struct Index {
-      private controller: CanvasRenderingContext2D = new CanvasRenderingContext2D()
-      private animateName: string = "animate"
-      private animatePath: string = "common/lottie/data.json"
-      private animateItem: any = null
-    
-      private onPageHide(): void {
-        console.log('onPageHide')
-        lottie.destroy()
-      }
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> In the **Terminal** window, run the **npm install'lottie-ohos-ets...** command to download Lottie.
+
+
+## lottie.loadAnimation
+
+loadAnimation(
+
+path: string, container: object, render: string, loop: boolean, autoplay: boolean, name: string ): AnimationItem
+
+Loads an animation. Before calling this method, declare the **Animator('__lottie_ets')** object and check that the canvas layout is complete. This method can be used together with a lifecycle callback of the **Canvas** component, for example, **onAppear()** and **onPageShow()**.
+
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | path | string | Yes | Path&nbsp;of&nbsp;the&nbsp;animation&nbsp;resource&nbsp;file&nbsp;in&nbsp;the&nbsp;HAP&nbsp;file.&nbsp;The&nbsp;resource&nbsp;file&nbsp;must&nbsp;be&nbsp;in&nbsp;JSON&nbsp;format.&nbsp;Example:&nbsp;**path:&nbsp;"common/lottie/data.json"**. | 
+  | container | object | Yes | Canvas&nbsp;drawing&nbsp;context.&nbsp;A&nbsp;**CanvasRenderingContext2D**&nbsp;object&nbsp;must&nbsp;be&nbsp;declared&nbsp;in&nbsp;advance. | 
+  | render | string | Yes | Rendering&nbsp;type.&nbsp;The&nbsp;value&nbsp;can&nbsp;only&nbsp;be&nbsp;**"canvas"**. | 
+  | loop | boolean&nbsp;\|&nbsp;number | No | If&nbsp;the&nbsp;value&nbsp;is&nbsp;of&nbsp;the&nbsp;Boolean&nbsp;type,&nbsp;this&nbsp;parameter&nbsp;indicates&nbsp;whether&nbsp;to&nbsp;repeat&nbsp;the&nbsp;animation&nbsp;cyclically&nbsp;after&nbsp;the&nbsp;animation&nbsp;ends;&nbsp;the&nbsp;default&nbsp;value&nbsp;is&nbsp;**true**.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;of&nbsp;the&nbsp;number&nbsp;type&nbsp;and&nbsp;is&nbsp;greater&nbsp;than&nbsp;or&nbsp;equal&nbsp;to&nbsp;1,&nbsp;this&nbsp;parameter&nbsp;indicates&nbsp;the&nbsp;number&nbsp;of&nbsp;times&nbsp;the&nbsp;animation&nbsp;plays. | 
+  | autoplay | boolean | No | Whether&nbsp;to&nbsp;automatically&nbsp;play&nbsp;the&nbsp;animation.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**true**. | 
+  | name | string | No | Custom&nbsp;animation&nbsp;name.&nbsp;In&nbsp;later&nbsp;versions,&nbsp;the&nbsp;name&nbsp;can&nbsp;be&nbsp;used&nbsp;to&nbsp;reference&nbsp;and&nbsp;control&nbsp;the&nbsp;animation.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;null. | 
+  | initialSegment | [number,&nbsp;number] | No | Start&nbsp;frame&nbsp;and&nbsp;end&nbsp;frame&nbsp;of&nbsp;the&nbsp;animation,&nbsp;respectively. | 
+
+
+## lottie.destroy
+
+destroy(name: string): void
+
+Destroys the animation. This method must be called when a page exits. This method can be used together with a lifecycle callback of the **Canvas** component, for example, **onDisappear()** and **onPageHide()**.
+
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | name | string | Yes | Name&nbsp;of&nbsp;the&nbsp;animation&nbsp;to&nbsp;destroy,&nbsp;which&nbsp;is&nbsp;the&nbsp;same&nbsp;as&nbsp;the&nbsp;**name**&nbsp;in&nbsp;the&nbsp;**loadAnimation**&nbsp;interface.&nbsp;By&nbsp;default,&nbsp;all&nbsp;animations&nbsp;are&nbsp;destroyed. | 
+
+- Example
     
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.controller)
-          .width('30%')
-          .height('20%')
-          .backgroundColor('#0D9FFB')
-          .onAppear(() => {
-            console.log('canvas onAppear');
-            this.animateItem = lottie.loadAnimation({
-              container: this.controller,
-              renderer: 'canvas',
-              loop: true,
-              autoplay: true,
-              name: this.animateName,
-              path: this.animatePath,
-            })
+  ```
+  import lottie from 'lottie-web'
+  
+  @Entry
+  @Component
+  struct Index {
+    private controller: CanvasRenderingContext2D = new CanvasRenderingContext2D()
+    private animateName: string = "animate"
+    private animatePath: string = "common/lottie/data.json"
+    private animateItem: any = null
+  
+    private onPageHide(): void {
+      console.log('onPageHide')
+      lottie.destroy()
+    }
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.controller)
+        .width('30%')
+        .height('20%')
+        .backgroundColor('#0D9FFB')
+        .onAppear(() => {
+          console.log('canvas onAppear');
+          this.animateItem = lottie.loadAnimation({
+            container: this.controller,
+            renderer: 'canvas',
+            loop: true,
+            autoplay: true,
+            name: this.animateName,
+            path: this.animatePath,
           })
-    
-          Animator('__lottie_ets') // declare Animator('__lottie_ets') when use lottie
-          Button('load animation')
-            .onClick(() => {
-            if (this.animateItem != null) {
-              this.animateItem.destroy()
-              this.animateItem = null
-            }
-            this.animateItem = lottie.loadAnimation({
-              container: this.controller,
-              renderer: 'canvas',
-              loop: true,
-              autoplay: true,
-              name: this.animateName,
-              path: this.animatePath,
-              initialSegment: [10, 50],
-            })
+        })
+  
+        Animator('__lottie_ets') // declare Animator('__lottie_ets') when use lottie
+        Button('load animation')
+          .onClick(() => {
+          if (this.animateItem != null) {
+            this.animateItem.destroy()
+            this.animateItem = null
+          }
+          this.animateItem = lottie.loadAnimation({
+            container: this.controller,
+            renderer: 'canvas',
+            loop: true,
+            autoplay: true,
+            name: this.animateName,
+            path: this.animatePath,
+            initialSegment: [10, 50],
+          })
+        })
+  
+        Button('destroy animation')
+          .onClick(() => {
+            lottie.destroy(this.animateName)
+            this.animateItem = null
           })
-    
-          Button('destroy animation')
-            .onClick(() => {
-              lottie.destroy(this.animateName)
-              this.animateItem = null
-            })
-        }
-        .width('100%')
-        .height('100%')
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/lottie-ark-2-0-canvas-ui-animate.gif)
+  ![en-us_image_0000001256978355](figures/en-us_image_0000001256978355.gif)
 
 
-## lottie.play<a name="section175031744244"></a>
+## lottie.play
 
-play\(name: string\): void
+play(name: string): void
 
 Plays a specified animation.
 
--   Parameters
-
-    <a name="table5503943240"></a>
-    <table><thead align="left"><tr id="row13503204142410"><th class="cellrowborder" valign="top" width="15.6%" id="mcps1.1.5.1.1"><p id="p1050316410247"><a name="p1050316410247"></a><a name="p1050316410247"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.13%" id="mcps1.1.5.1.2"><p id="p135036472418"><a name="p135036472418"></a><a name="p135036472418"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.059999999999999%" id="mcps1.1.5.1.3"><p id="p19503164162418"><a name="p19503164162418"></a><a name="p19503164162418"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.21%" id="mcps1.1.5.1.4"><p id="p15503447247"><a name="p15503447247"></a><a name="p15503447247"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row12503341246"><td class="cellrowborder" valign="top" width="15.6%" headers="mcps1.1.5.1.1 "><p id="p850394172420"><a name="p850394172420"></a><a name="p850394172420"></a>name</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.13%" headers="mcps1.1.5.1.2 "><p id="p250312411244"><a name="p250312411244"></a><a name="p250312411244"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p185038422415"><a name="p185038422415"></a><a name="p185038422415"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.21%" headers="mcps1.1.5.1.4 "><p id="p691717593432"><a name="p691717593432"></a><a name="p691717593432"></a>Name of the animation to play, which is the same as the <strong id="b173958442214"><a name="b173958442214"></a><a name="b173958442214"></a>name</strong> in the <strong id="b8396144324"><a name="b8396144324"></a><a name="b8396144324"></a>loadAnimation</strong> interface. By default, all animations are played.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    lottie.play(this.animateName)
-    ```
-
-
-## lottie.pause<a name="section13965204292811"></a>
-
-pause\(name: string\): void
-
-Pauses a specified animation. The next time  **lottie.play\(\)**  is called, the animation starts from the current frame.
-
--   Parameters
-
-    <a name="table1496584272818"></a>
-    <table><thead align="left"><tr id="row49651242132819"><th class="cellrowborder" valign="top" width="15.6%" id="mcps1.1.5.1.1"><p id="p199651742102814"><a name="p199651742102814"></a><a name="p199651742102814"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.13%" id="mcps1.1.5.1.2"><p id="p9965154222811"><a name="p9965154222811"></a><a name="p9965154222811"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.059999999999999%" id="mcps1.1.5.1.3"><p id="p79653429288"><a name="p79653429288"></a><a name="p79653429288"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.21%" id="mcps1.1.5.1.4"><p id="p1296584216288"><a name="p1296584216288"></a><a name="p1296584216288"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row10965154272820"><td class="cellrowborder" valign="top" width="15.6%" headers="mcps1.1.5.1.1 "><p id="p1296554216282"><a name="p1296554216282"></a><a name="p1296554216282"></a>name</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.13%" headers="mcps1.1.5.1.2 "><p id="p12965194262815"><a name="p12965194262815"></a><a name="p12965194262815"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p496574272810"><a name="p496574272810"></a><a name="p496574272810"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.21%" headers="mcps1.1.5.1.4 "><p id="p6965184232815"><a name="p6965184232815"></a><a name="p6965184232815"></a>Name of the animation to pause, which is the same as the <strong id="b119281827419"><a name="b119281827419"></a><a name="b119281827419"></a>name</strong> in the <strong id="b49291120411"><a name="b49291120411"></a><a name="b49291120411"></a>loadAnimation</strong> interface. By default, all animations are paused.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    lottie.pause(this.animateName)
-    ```
-
-
-## lottie.togglePause<a name="section1633164714304"></a>
-
-togglePause\(name: string\): void
-
-Pauses or plays a specified animation. This method is equivalent to the switching between  **lottie.play\(\)**  and  **lottie.pause\(\)**.
-
--   Parameters
-
-    <a name="table105891271516"></a>
-    <table><thead align="left"><tr id="row25886275110"><th class="cellrowborder" valign="top" width="15.740000000000002%" id="mcps1.1.5.1.1"><p id="p1058810277110"><a name="p1058810277110"></a><a name="p1058810277110"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.989999999999998%" id="mcps1.1.5.1.2"><p id="p15588727118"><a name="p15588727118"></a><a name="p15588727118"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.059999999999999%" id="mcps1.1.5.1.3"><p id="p1358822718111"><a name="p1358822718111"></a><a name="p1358822718111"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.21%" id="mcps1.1.5.1.4"><p id="p15588162711112"><a name="p15588162711112"></a><a name="p15588162711112"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row8589227316"><td class="cellrowborder" valign="top" width="15.740000000000002%" headers="mcps1.1.5.1.1 "><p id="p1658811271919"><a name="p1658811271919"></a><a name="p1658811271919"></a>name</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.989999999999998%" headers="mcps1.1.5.1.2 "><p id="p0589152713120"><a name="p0589152713120"></a><a name="p0589152713120"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p1258916272119"><a name="p1258916272119"></a><a name="p1258916272119"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.21%" headers="mcps1.1.5.1.4 "><p id="p8589172719115"><a name="p8589172719115"></a><a name="p8589172719115"></a>Name of the target animation, which is the same as the <strong id="b1728173317143"><a name="b1728173317143"></a><a name="b1728173317143"></a>name</strong> in the <strong id="b13728153371412"><a name="b13728153371412"></a><a name="b13728153371412"></a>loadAnimation</strong> interface. By default, all animations are paused.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    lottie.togglePause(this.animateName)
-    ```
-
-
-## lottie.stop<a name="section57246132289"></a>
-
-stop\(name: string\): void
-
-Stops the specified animation. The next time  **lottie.play\(\)**  is called, the animation starts from the first frame.
-
--   Parameters
-
-    <a name="table117241313112817"></a>
-    <table><thead align="left"><tr id="row5724131313284"><th class="cellrowborder" valign="top" width="15.72%" id="mcps1.1.5.1.1"><p id="p1172481332811"><a name="p1172481332811"></a><a name="p1172481332811"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.01%" id="mcps1.1.5.1.2"><p id="p17725131311282"><a name="p17725131311282"></a><a name="p17725131311282"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.059999999999999%" id="mcps1.1.5.1.3"><p id="p3725111317288"><a name="p3725111317288"></a><a name="p3725111317288"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.21%" id="mcps1.1.5.1.4"><p id="p1972501362814"><a name="p1972501362814"></a><a name="p1972501362814"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row37252013172813"><td class="cellrowborder" valign="top" width="15.72%" headers="mcps1.1.5.1.1 "><p id="p3725171372813"><a name="p3725171372813"></a><a name="p3725171372813"></a>name</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.01%" headers="mcps1.1.5.1.2 "><p id="p18725713102819"><a name="p18725713102819"></a><a name="p18725713102819"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p107251813202819"><a name="p107251813202819"></a><a name="p107251813202819"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.21%" headers="mcps1.1.5.1.4 "><p id="p187251313142814"><a name="p187251313142814"></a><a name="p187251313142814"></a>Name of the animation to stop, which is the same as the <strong id="b29356398186"><a name="b29356398186"></a><a name="b29356398186"></a>name</strong> in the <strong id="b14935133918181"><a name="b14935133918181"></a><a name="b14935133918181"></a>loadAnimation</strong> interface. By default, all animations are stopped.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    lottie.stop(this.animateName)
-    ```
-
-
-## lottie.setSpeed<a name="section755319433508"></a>
-
-setSpeed\(speed: number, name: string\): void
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | name | string | Yes | Name&nbsp;of&nbsp;the&nbsp;animation&nbsp;to&nbsp;play,&nbsp;which&nbsp;is&nbsp;the&nbsp;same&nbsp;as&nbsp;the&nbsp;**name**&nbsp;in&nbsp;the&nbsp;**loadAnimation**&nbsp;interface.&nbsp;By&nbsp;default,&nbsp;all&nbsp;animations&nbsp;are&nbsp;played. | 
+
+- Example
+    
+  ```
+  lottie.play(this.animateName)
+  ```
+
+
+## lottie.pause
+
+pause(name: string): void
+
+Pauses a specified animation. The next time **lottie.play()** is called, the animation starts from the current frame.
+
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | name | string | Yes | Name&nbsp;of&nbsp;the&nbsp;animation&nbsp;to&nbsp;pause,&nbsp;which&nbsp;is&nbsp;the&nbsp;same&nbsp;as&nbsp;the&nbsp;**name**&nbsp;in&nbsp;the&nbsp;**loadAnimation**&nbsp;interface.&nbsp;By&nbsp;default,&nbsp;all&nbsp;animations&nbsp;are&nbsp;paused. | 
+
+- Example
+    
+  ```
+  lottie.pause(this.animateName)
+  ```
+
+
+## lottie.togglePause
+
+togglePause(name: string): void
+
+Pauses or plays a specified animation. This method is equivalent to the switching between **lottie.play()** and **lottie.pause()**.
+
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | name | string | Yes | Name&nbsp;of&nbsp;the&nbsp;target&nbsp;animation,&nbsp;which&nbsp;is&nbsp;the&nbsp;same&nbsp;as&nbsp;the&nbsp;**name**&nbsp;in&nbsp;the&nbsp;**loadAnimation**&nbsp;interface.&nbsp;By&nbsp;default,&nbsp;all&nbsp;animations&nbsp;are&nbsp;paused. | 
+
+- Example
+    
+  ```
+  lottie.togglePause(this.animateName)
+  ```
+
+
+## lottie.stop
+
+stop(name: string): void
+
+Stops the specified animation. The next time **lottie.play()** is called, the animation starts from the first frame.
+
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | name | string | Yes | Name&nbsp;of&nbsp;the&nbsp;target&nbsp;animation,&nbsp;which&nbsp;is&nbsp;the&nbsp;same&nbsp;as&nbsp;the&nbsp;**name**&nbsp;in&nbsp;the&nbsp;**loadAnimation**&nbsp;interface.&nbsp;By&nbsp;default,&nbsp;all&nbsp;animations&nbsp;are&nbsp;paused. | 
+
+- Example
+    
+  ```
+  lottie.stop(this.animateName)
+  ```
+
+
+## lottie.setSpeed
+
+setSpeed(speed: number, name: string): void
 
 Sets the playback speed of the specified animation.
 
--   Parameters
-
-    <a name="table125531543115012"></a>
-    <table><thead align="left"><tr id="row16554134375018"><th class="cellrowborder" valign="top" width="15.72%" id="mcps1.1.5.1.1"><p id="p75541443105013"><a name="p75541443105013"></a><a name="p75541443105013"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.01%" id="mcps1.1.5.1.2"><p id="p35542043115011"><a name="p35542043115011"></a><a name="p35542043115011"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.059999999999999%" id="mcps1.1.5.1.3"><p id="p955424315014"><a name="p955424315014"></a><a name="p955424315014"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.21%" id="mcps1.1.5.1.4"><p id="p16554154313500"><a name="p16554154313500"></a><a name="p16554154313500"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1829610278529"><td class="cellrowborder" valign="top" width="15.72%" headers="mcps1.1.5.1.1 "><p id="p92962276526"><a name="p92962276526"></a><a name="p92962276526"></a>speed</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.01%" headers="mcps1.1.5.1.2 "><p id="p1296162710521"><a name="p1296162710521"></a><a name="p1296162710521"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p229652717521"><a name="p229652717521"></a><a name="p229652717521"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.21%" headers="mcps1.1.5.1.4 "><p id="p11296827185218"><a name="p11296827185218"></a><a name="p11296827185218"></a>Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is 1.0 or -1.0, the animation plays at the normal speed.</p>
-    </td>
-    </tr>
-    <tr id="row75542436507"><td class="cellrowborder" valign="top" width="15.72%" headers="mcps1.1.5.1.1 "><p id="p17554743175020"><a name="p17554743175020"></a><a name="p17554743175020"></a>name</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.01%" headers="mcps1.1.5.1.2 "><p id="p15554164315010"><a name="p15554164315010"></a><a name="p15554164315010"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p9554043145014"><a name="p9554043145014"></a><a name="p9554043145014"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.21%" headers="mcps1.1.5.1.4 "><p id="p35541343105013"><a name="p35541343105013"></a><a name="p35541343105013"></a>Name of the target animation, which is the same as the <strong id="b8206181023220"><a name="b8206181023220"></a><a name="b8206181023220"></a>name</strong> in the <strong id="b1420691015324"><a name="b1420691015324"></a><a name="b1420691015324"></a>loadAnimation</strong> interface. By default, all animations are stopped.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    lottie.setSpeed(5, this.animateName)
-    ```
-
-
-## lottie.setDirection<a name="section2055464318504"></a>
-
-setDirection\(direction: AnimationDirection, name: string\): void
-
-Sets the dierection in which the specified animation plays.
-
--   Parameters
-
-    <a name="table14554184312503"></a>
-    <table><thead align="left"><tr id="row1755494335015"><th class="cellrowborder" valign="top" width="15.939999999999998%" id="mcps1.1.5.1.1"><p id="p0554114315505"><a name="p0554114315505"></a><a name="p0554114315505"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.790000000000001%" id="mcps1.1.5.1.2"><p id="p75542438506"><a name="p75542438506"></a><a name="p75542438506"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.059999999999999%" id="mcps1.1.5.1.3"><p id="p1455534395018"><a name="p1455534395018"></a><a name="p1455534395018"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.21%" id="mcps1.1.5.1.4"><p id="p1555743205017"><a name="p1555743205017"></a><a name="p1555743205017"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row98709463554"><td class="cellrowborder" valign="top" width="15.939999999999998%" headers="mcps1.1.5.1.1 "><p id="p1987154675512"><a name="p1987154675512"></a><a name="p1987154675512"></a>direction</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.790000000000001%" headers="mcps1.1.5.1.2 "><p id="p7871174615559"><a name="p7871174615559"></a><a name="p7871174615559"></a>AnimationDirection</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p0871134619559"><a name="p0871134619559"></a><a name="p0871134619559"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.21%" headers="mcps1.1.5.1.4 "><p id="p13871114635517"><a name="p13871114635517"></a><a name="p13871114635517"></a>Direction in which the animation plays. <strong id="b876412283422"><a name="b876412283422"></a><a name="b876412283422"></a>1</strong>: forwards; <strong id="b156013013431"><a name="b156013013431"></a><a name="b156013013431"></a>-1</strong>: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with <strong id="b134809445548"><a name="b134809445548"></a><a name="b134809445548"></a>loop</strong> being set to <strong id="b1956755215411"><a name="b1956755215411"></a><a name="b1956755215411"></a>true</strong>, the animation plays backwards continuously. When the value of <strong id="b82794325582"><a name="b82794325582"></a><a name="b82794325582"></a>speed</strong> is less than 0, the animation also plays backwards.</p>
-    <p id="p155301550901"><a name="p155301550901"></a><a name="p155301550901"></a>AnimationDirection: 1 | -1</p>
-    </td>
-    </tr>
-    <tr id="row14555443135013"><td class="cellrowborder" valign="top" width="15.939999999999998%" headers="mcps1.1.5.1.1 "><p id="p105551843165012"><a name="p105551843165012"></a><a name="p105551843165012"></a>name</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.790000000000001%" headers="mcps1.1.5.1.2 "><p id="p12555343125010"><a name="p12555343125010"></a><a name="p12555343125010"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p1655517434505"><a name="p1655517434505"></a><a name="p1655517434505"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.21%" headers="mcps1.1.5.1.4 "><p id="p755554375013"><a name="p755554375013"></a><a name="p755554375013"></a>Name of the target animation, which is the same as the <strong id="b174926232597"><a name="b174926232597"></a><a name="b174926232597"></a>name</strong> in the <strong id="b15493182365912"><a name="b15493182365912"></a><a name="b15493182365912"></a>loadAnimation</strong> interface. By default, all animations are set.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    lottie.setDirection(-1, this.controlName)
-    ```
-
-
-## AnimationItem<a name="section038875381812"></a>
-
-Defines an  **AnimationItem**  object, which is returned by the  **loadAnimation**  interface and has attributes and interfaces. The attributes are described as follows:
-
-<a name="table63801556917"></a>
-<table><thead align="left"><tr id="row123801259914"><th class="cellrowborder" valign="top" width="33.300000000000004%" id="mcps1.1.4.1.1"><p id="p143801852920"><a name="p143801852920"></a><a name="p143801852920"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="33.36%" id="mcps1.1.4.1.2"><p id="p538011511920"><a name="p538011511920"></a><a name="p538011511920"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="33.339999999999996%" id="mcps1.1.4.1.3"><p id="p10380751296"><a name="p10380751296"></a><a name="p10380751296"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1638018512912"><td class="cellrowborder" valign="top" width="33.300000000000004%" headers="mcps1.1.4.1.1 "><p id="p4380255916"><a name="p4380255916"></a><a name="p4380255916"></a>name</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.36%" headers="mcps1.1.4.1.2 "><p id="p63801850913"><a name="p63801850913"></a><a name="p63801850913"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.339999999999996%" headers="mcps1.1.4.1.3 "><p id="p73801159911"><a name="p73801159911"></a><a name="p73801159911"></a>Animation name.</p>
-</td>
-</tr>
-<tr id="row93801051192"><td class="cellrowborder" valign="top" width="33.300000000000004%" headers="mcps1.1.4.1.1 "><p id="p11380258918"><a name="p11380258918"></a><a name="p11380258918"></a>isLoaded</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.36%" headers="mcps1.1.4.1.2 "><p id="p638019510914"><a name="p638019510914"></a><a name="p638019510914"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.339999999999996%" headers="mcps1.1.4.1.3 "><p id="p137806258243"><a name="p137806258243"></a><a name="p137806258243"></a>Whether the animation is loaded.</p>
-</td>
-</tr>
-<tr id="row838085692"><td class="cellrowborder" valign="top" width="33.300000000000004%" headers="mcps1.1.4.1.1 "><p id="p53802051393"><a name="p53802051393"></a><a name="p53802051393"></a>currentFrame</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.36%" headers="mcps1.1.4.1.2 "><p id="p2380351918"><a name="p2380351918"></a><a name="p2380351918"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.339999999999996%" headers="mcps1.1.4.1.3 "><p id="p8381115194"><a name="p8381115194"></a><a name="p8381115194"></a>Frame that is being played. The default precision is a floating-point number greater than or equal to 0.0. After <strong id="b580644753510"><a name="b580644753510"></a><a name="b580644753510"></a>setSubframe(false)</strong> is called, the value is a positive integer without decimal points.</p>
-</td>
-</tr>
-<tr id="row17381158910"><td class="cellrowborder" valign="top" width="33.300000000000004%" headers="mcps1.1.4.1.1 "><p id="p538125294"><a name="p538125294"></a><a name="p538125294"></a>currentRawFrame</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.36%" headers="mcps1.1.4.1.2 "><p id="p17443154532416"><a name="p17443154532416"></a><a name="p17443154532416"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.339999999999996%" headers="mcps1.1.4.1.3 "><p id="p184427456244"><a name="p184427456244"></a><a name="p184427456244"></a>Number of frames that are being played. The precision is a floating point number greater than or equal to 0.0.</p>
-</td>
-</tr>
-<tr id="row12381851197"><td class="cellrowborder" valign="top" width="33.300000000000004%" headers="mcps1.1.4.1.1 "><p id="p1938114510911"><a name="p1938114510911"></a><a name="p1938114510911"></a>firstFrame</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.36%" headers="mcps1.1.4.1.2 "><p id="p144428453243"><a name="p144428453243"></a><a name="p144428453243"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.339999999999996%" headers="mcps1.1.4.1.3 "><p id="p844116452248"><a name="p844116452248"></a><a name="p844116452248"></a>First frame of the animation segment that is being played.</p>
-</td>
-</tr>
-<tr id="row1338105290"><td class="cellrowborder" valign="top" width="33.300000000000004%" headers="mcps1.1.4.1.1 "><p id="p13381251295"><a name="p13381251295"></a><a name="p13381251295"></a>totalFrames</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.36%" headers="mcps1.1.4.1.2 "><p id="p144401945182410"><a name="p144401945182410"></a><a name="p144401945182410"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.339999999999996%" headers="mcps1.1.4.1.3 "><p id="p184406454244"><a name="p184406454244"></a><a name="p184406454244"></a>Total number of frames in the animation segment that is being played.</p>
-</td>
-</tr>
-<tr id="row173811751092"><td class="cellrowborder" valign="top" width="33.300000000000004%" headers="mcps1.1.4.1.1 "><p id="p138175791"><a name="p138175791"></a><a name="p138175791"></a>frameRate</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.36%" headers="mcps1.1.4.1.2 "><p id="p20439645142419"><a name="p20439645142419"></a><a name="p20439645142419"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.339999999999996%" headers="mcps1.1.4.1.3 "><p id="p1043984518243"><a name="p1043984518243"></a><a name="p1043984518243"></a>Frame rate (frame/s).</p>
-</td>
-</tr>
-<tr id="row14381125798"><td class="cellrowborder" valign="top" width="33.300000000000004%" headers="mcps1.1.4.1.1 "><p id="p838112515920"><a name="p838112515920"></a><a name="p838112515920"></a>frameMult</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.36%" headers="mcps1.1.4.1.2 "><p id="p843864512246"><a name="p843864512246"></a><a name="p843864512246"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.339999999999996%" headers="mcps1.1.4.1.3 "><p id="p6437194520246"><a name="p6437194520246"></a><a name="p6437194520246"></a>Frame rate (frame/ms).</p>
-</td>
-</tr>
-<tr id="row33821156911"><td class="cellrowborder" valign="top" width="33.300000000000004%" headers="mcps1.1.4.1.1 "><p id="p11382151194"><a name="p11382151194"></a><a name="p11382151194"></a>playSpeed</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.36%" headers="mcps1.1.4.1.2 "><p id="p164378452247"><a name="p164378452247"></a><a name="p164378452247"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.339999999999996%" headers="mcps1.1.4.1.3 "><p id="p122573611267"><a name="p122573611267"></a><a name="p122573611267"></a>Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is <strong id="b16484101794015"><a name="b16484101794015"></a><a name="b16484101794015"></a>1.0</strong> or <strong id="b385313191400"><a name="b385313191400"></a><a name="b385313191400"></a>-1.0</strong>, the animation plays at the normal speed.</p>
-</td>
-</tr>
-<tr id="row103821651294"><td class="cellrowborder" valign="top" width="33.300000000000004%" headers="mcps1.1.4.1.1 "><p id="p63821151916"><a name="p63821151916"></a><a name="p63821151916"></a>playDirection</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.36%" headers="mcps1.1.4.1.2 "><p id="p143514502418"><a name="p143514502418"></a><a name="p143514502418"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.339999999999996%" headers="mcps1.1.4.1.3 "><p id="p1243694514245"><a name="p1243694514245"></a><a name="p1243694514245"></a>Playback direction. The options are <strong id="b1183104424017"><a name="b1183104424017"></a><a name="b1183104424017"></a>1</strong> (forward) and <strong id="b14707104618408"><a name="b14707104618408"></a><a name="b14707104618408"></a>-1</strong> (backward).</p>
-</td>
-</tr>
-<tr id="row0382105693"><td class="cellrowborder" valign="top" width="33.300000000000004%" headers="mcps1.1.4.1.1 "><p id="p11382854912"><a name="p11382854912"></a><a name="p11382854912"></a>playCount</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.36%" headers="mcps1.1.4.1.2 "><p id="p14434145192417"><a name="p14434145192417"></a><a name="p14434145192417"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.339999999999996%" headers="mcps1.1.4.1.3 "><p id="p1143212452243"><a name="p1143212452243"></a><a name="p1143212452243"></a>Number of times the animation plays.</p>
-</td>
-</tr>
-<tr id="row81351851122618"><td class="cellrowborder" valign="top" width="33.300000000000004%" headers="mcps1.1.4.1.1 "><p id="p2135125116266"><a name="p2135125116266"></a><a name="p2135125116266"></a>isPaused</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.36%" headers="mcps1.1.4.1.2 "><p id="p1913515117269"><a name="p1913515117269"></a><a name="p1913515117269"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.339999999999996%" headers="mcps1.1.4.1.3 "><p id="p15135135115268"><a name="p15135135115268"></a><a name="p15135135115268"></a>Whether the current animation is paused. The value <strong id="b13323941427"><a name="b13323941427"></a><a name="b13323941427"></a>true</strong> means that the animation is paused.</p>
-</td>
-</tr>
-<tr id="row253805332616"><td class="cellrowborder" valign="top" width="33.300000000000004%" headers="mcps1.1.4.1.1 "><p id="p8539105316265"><a name="p8539105316265"></a><a name="p8539105316265"></a>autoplay</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.36%" headers="mcps1.1.4.1.2 "><p id="p853995392620"><a name="p853995392620"></a><a name="p853995392620"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.339999999999996%" headers="mcps1.1.4.1.3 "><p id="p8539135342613"><a name="p8539135342613"></a><a name="p8539135342613"></a>Whether to automatically play the animation upon completion of the loading. The value <strong id="b197714111433"><a name="b197714111433"></a><a name="b197714111433"></a>false</strong> means that the <strong id="b77791812164312"><a name="b77791812164312"></a><a name="b77791812164312"></a>play()</strong> interface needs to be called to start playing.</p>
-</td>
-</tr>
-<tr id="row1682234852615"><td class="cellrowborder" valign="top" width="33.300000000000004%" headers="mcps1.1.4.1.1 "><p id="p582316486262"><a name="p582316486262"></a><a name="p582316486262"></a>loop</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.36%" headers="mcps1.1.4.1.2 "><p id="p4823134817265"><a name="p4823134817265"></a><a name="p4823134817265"></a>boolean | number</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.339999999999996%" headers="mcps1.1.4.1.3 "><p id="p128231448112617"><a name="p128231448112617"></a><a name="p128231448112617"></a>If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays.</p>
-</td>
-</tr>
-<tr id="row575133462711"><td class="cellrowborder" valign="top" width="33.300000000000004%" headers="mcps1.1.4.1.1 "><p id="p47693442716"><a name="p47693442716"></a><a name="p47693442716"></a>renderer</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.36%" headers="mcps1.1.4.1.2 "><p id="p276143410278"><a name="p276143410278"></a><a name="p276143410278"></a>any</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.339999999999996%" headers="mcps1.1.4.1.3 "><p id="p1276163402710"><a name="p1276163402710"></a><a name="p1276163402710"></a>Animation rendering object, which depends on the rendering type.</p>
-</td>
-</tr>
-<tr id="row13154311279"><td class="cellrowborder" valign="top" width="33.300000000000004%" headers="mcps1.1.4.1.1 "><p id="p93158313272"><a name="p93158313272"></a><a name="p93158313272"></a>animationID</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.36%" headers="mcps1.1.4.1.2 "><p id="p13315193119273"><a name="p13315193119273"></a><a name="p13315193119273"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.339999999999996%" headers="mcps1.1.4.1.3 "><p id="p3315331192712"><a name="p3315331192712"></a><a name="p3315331192712"></a>Animation ID.</p>
-</td>
-</tr>
-<tr id="row12911435162711"><td class="cellrowborder" valign="top" width="33.300000000000004%" headers="mcps1.1.4.1.1 "><p id="p391116355277"><a name="p391116355277"></a><a name="p391116355277"></a>timeCompleted</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.36%" headers="mcps1.1.4.1.2 "><p id="p0911135172715"><a name="p0911135172715"></a><a name="p0911135172715"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.339999999999996%" headers="mcps1.1.4.1.3 "><p id="p891113353270"><a name="p891113353270"></a><a name="p891113353270"></a>Number of frames that are played for an animation sequence. The value is affected by the setting of <strong id="b1521114516250"><a name="b1521114516250"></a><a name="b1521114516250"></a>AnimationSegment</strong> and is the same as the value of <strong id="b15481448152510"><a name="b15481448152510"></a><a name="b15481448152510"></a>totalFrames</strong>.</p>
-</td>
-</tr>
-<tr id="row1717948162818"><td class="cellrowborder" valign="top" width="33.300000000000004%" headers="mcps1.1.4.1.1 "><p id="p1017916817281"><a name="p1017916817281"></a><a name="p1017916817281"></a>segmentPos</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.36%" headers="mcps1.1.4.1.2 "><p id="p7179183281"><a name="p7179183281"></a><a name="p7179183281"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.339999999999996%" headers="mcps1.1.4.1.3 "><p id="p1917917872818"><a name="p1917917872818"></a><a name="p1917917872818"></a>ID of the current animation segment. The value is a positive integer greater than or equal to 0.</p>
-</td>
-</tr>
-<tr id="row12961937162820"><td class="cellrowborder" valign="top" width="33.300000000000004%" headers="mcps1.1.4.1.1 "><p id="p59611037202813"><a name="p59611037202813"></a><a name="p59611037202813"></a>isSubframeEnabled</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.36%" headers="mcps1.1.4.1.2 "><p id="p4961437132815"><a name="p4961437132815"></a><a name="p4961437132815"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.339999999999996%" headers="mcps1.1.4.1.3 "><p id="p996111374284"><a name="p996111374284"></a><a name="p996111374284"></a>Whether the precision of <strong id="b112081635261"><a name="b112081635261"></a><a name="b112081635261"></a>currentFrame</strong> is a floating point number.</p>
-</td>
-</tr>
-<tr id="row84254162915"><td class="cellrowborder" valign="top" width="33.300000000000004%" headers="mcps1.1.4.1.1 "><p id="p15438415295"><a name="p15438415295"></a><a name="p15438415295"></a>segments</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.36%" headers="mcps1.1.4.1.2 "><p id="p134316411298"><a name="p134316411298"></a><a name="p134316411298"></a>AnimationSegment | AnimationSegment[]</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.339999999999996%" headers="mcps1.1.4.1.3 "><p id="p104312411298"><a name="p104312411298"></a><a name="p104312411298"></a>Current segment of the animation.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## AnimationItem.play<a name="section035751020599"></a>
-
-play\(name?: string\): void
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | speed | number | Yes | Playback&nbsp;speed.&nbsp;The&nbsp;value&nbsp;is&nbsp;a&nbsp;floating-point&nbsp;number.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;greater&nbsp;than&nbsp;0,&nbsp;the&nbsp;animation&nbsp;plays&nbsp;in&nbsp;forward&nbsp;direction.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;less&nbsp;than&nbsp;0,&nbsp;the&nbsp;animation&nbsp;plays&nbsp;in&nbsp;reversed&nbsp;direction.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;0,&nbsp;the&nbsp;animation&nbsp;is&nbsp;paused.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;1.0&nbsp;or&nbsp;-1.0,&nbsp;the&nbsp;animation&nbsp;plays&nbsp;at&nbsp;the&nbsp;normal&nbsp;speed. | 
+  | name | string | Yes | Name&nbsp;of&nbsp;the&nbsp;target&nbsp;animation,&nbsp;which&nbsp;is&nbsp;the&nbsp;same&nbsp;as&nbsp;the&nbsp;**name**&nbsp;in&nbsp;the&nbsp;**loadAnimation**&nbsp;interface.&nbsp;By&nbsp;default,&nbsp;all&nbsp;animations&nbsp;are&nbsp;stopped. | 
+
+- Example
+    
+  ```
+  lottie.setSpeed(5, this.animateName)
+  ```
+
+
+## lottie.setDirection
+
+setDirection(direction: AnimationDirection, name: string): void
+
+Sets the direction in which the specified animation plays.
+
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | direction | AnimationDirection | Yes | Direction&nbsp;in&nbsp;which&nbsp;the&nbsp;animation&nbsp;plays.&nbsp;**1**:&nbsp;forwards;&nbsp;**-1**:&nbsp;backwards.&nbsp;When&nbsp;set&nbsp;to&nbsp;play&nbsp;backwards,&nbsp;the&nbsp;animation&nbsp;plays&nbsp;from&nbsp;the&nbsp;current&nbsp;playback&nbsp;progress&nbsp;to&nbsp;the&nbsp;first&nbsp;frame.&nbsp;When&nbsp;this&nbsp;setting&nbsp;is&nbsp;combined&nbsp;with&nbsp;**loop**&nbsp;being&nbsp;set&nbsp;to&nbsp;**true**,&nbsp;the&nbsp;animation&nbsp;plays&nbsp;backwards&nbsp;continuously.&nbsp;When&nbsp;the&nbsp;value&nbsp;of&nbsp;**speed**&nbsp;is&nbsp;less&nbsp;than&nbsp;0,&nbsp;the&nbsp;animation&nbsp;also&nbsp;plays&nbsp;backwards.<br/>**AnimationDirection**:&nbsp;1&nbsp;\|&nbsp;-1. | 
+  | name | string | Yes | Name&nbsp;of&nbsp;the&nbsp;target&nbsp;animation,&nbsp;which&nbsp;is&nbsp;the&nbsp;same&nbsp;as&nbsp;the&nbsp;**name**&nbsp;in&nbsp;the&nbsp;**loadAnimation**&nbsp;interface.&nbsp;By&nbsp;default,&nbsp;all&nbsp;animations&nbsp;are&nbsp;set. | 
+
+- Example
+    
+  ```
+  lottie.setDirection(-1, this.animateName)
+  ```
+
+
+## AnimationItem
+
+Defines an **AnimationItem** object, which is returned by the **loadAnimation** interface and has attributes and interfaces. The attributes are described as follows:
+
+  | Name | Type | Description | 
+| -------- | -------- | -------- |
+| name | string | Animation&nbsp;name. | 
+| isLoaded | boolean | Whether&nbsp;the&nbsp;animation&nbsp;is&nbsp;loaded. | 
+| currentFrame | number | Frame&nbsp;that&nbsp;is&nbsp;being&nbsp;played.&nbsp;The&nbsp;default&nbsp;precision&nbsp;is&nbsp;a&nbsp;floating-point&nbsp;number&nbsp;greater&nbsp;than&nbsp;or&nbsp;equal&nbsp;to&nbsp;0.0.&nbsp;After&nbsp;**setSubframe(false)**&nbsp;is&nbsp;called,&nbsp;the&nbsp;value&nbsp;is&nbsp;a&nbsp;positive&nbsp;integer&nbsp;without&nbsp;decimal&nbsp;points. | 
+| currentRawFrame | number | Number&nbsp;of&nbsp;frames&nbsp;that&nbsp;are&nbsp;being&nbsp;played.&nbsp;The&nbsp;precision&nbsp;is&nbsp;a&nbsp;floating&nbsp;point&nbsp;number&nbsp;greater&nbsp;than&nbsp;or&nbsp;equal&nbsp;to&nbsp;0.0. | 
+| firstFrame | number | First&nbsp;frame&nbsp;of&nbsp;the&nbsp;animation&nbsp;segment&nbsp;that&nbsp;is&nbsp;being&nbsp;played. | 
+| totalFrames | number | Total&nbsp;number&nbsp;of&nbsp;frames&nbsp;in&nbsp;the&nbsp;animation&nbsp;segment&nbsp;that&nbsp;is&nbsp;being&nbsp;played. | 
+| frameRate | number | Frame&nbsp;rate&nbsp;(frame/s). | 
+| frameMult | number | Frame&nbsp;rate&nbsp;(frame/ms). | 
+| playSpeed | number | Playback&nbsp;speed.&nbsp;The&nbsp;value&nbsp;is&nbsp;a&nbsp;floating-point&nbsp;number.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;greater&nbsp;than&nbsp;0,&nbsp;the&nbsp;animation&nbsp;plays&nbsp;in&nbsp;forward&nbsp;direction.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;less&nbsp;than&nbsp;0,&nbsp;the&nbsp;animation&nbsp;plays&nbsp;in&nbsp;reversed&nbsp;direction.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;0,&nbsp;the&nbsp;animation&nbsp;is&nbsp;paused.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;**1.0**&nbsp;or&nbsp;**-1.0**,&nbsp;the&nbsp;animation&nbsp;plays&nbsp;at&nbsp;the&nbsp;normal&nbsp;speed. | 
+| playDirection | number | Playback&nbsp;direction.&nbsp;The&nbsp;options&nbsp;are&nbsp;**1**&nbsp;(forward)&nbsp;and&nbsp;**-1**&nbsp;(backward). | 
+| playCount | number | Number&nbsp;of&nbsp;times&nbsp;the&nbsp;animation&nbsp;plays. | 
+| isPaused | boolean | Whether&nbsp;the&nbsp;current&nbsp;animation&nbsp;is&nbsp;paused.&nbsp;The&nbsp;value&nbsp;**true**&nbsp;means&nbsp;that&nbsp;the&nbsp;animation&nbsp;is&nbsp;paused. | 
+| autoplay | boolean | Whether&nbsp;to&nbsp;automatically&nbsp;play&nbsp;the&nbsp;animation&nbsp;upon&nbsp;completion&nbsp;of&nbsp;the&nbsp;loading.&nbsp;The&nbsp;value&nbsp;**false**&nbsp;means&nbsp;that&nbsp;the&nbsp;**play()**&nbsp;interface&nbsp;needs&nbsp;to&nbsp;be&nbsp;called&nbsp;to&nbsp;start&nbsp;playing. | 
+| loop | boolean&nbsp;\|&nbsp;number | If&nbsp;the&nbsp;value&nbsp;is&nbsp;of&nbsp;the&nbsp;Boolean&nbsp;type,&nbsp;this&nbsp;parameter&nbsp;indicates&nbsp;whether&nbsp;to&nbsp;repeat&nbsp;the&nbsp;animation&nbsp;cyclically&nbsp;after&nbsp;the&nbsp;animation&nbsp;ends.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;of&nbsp;the&nbsp;number&nbsp;type&nbsp;and&nbsp;is&nbsp;greater&nbsp;than&nbsp;or&nbsp;equal&nbsp;to&nbsp;1,&nbsp;this&nbsp;parameter&nbsp;indicates&nbsp;the&nbsp;number&nbsp;of&nbsp;times&nbsp;the&nbsp;animation&nbsp;plays. | 
+| renderer | any | Animation&nbsp;rendering&nbsp;object,&nbsp;which&nbsp;depends&nbsp;on&nbsp;the&nbsp;rendering&nbsp;type. | 
+| animationID | string | Animation&nbsp;ID. | 
+| timeCompleted | number | Number&nbsp;of&nbsp;frames&nbsp;that&nbsp;are&nbsp;played&nbsp;for&nbsp;an&nbsp;animation&nbsp;sequence.&nbsp;The&nbsp;value&nbsp;is&nbsp;affected&nbsp;by&nbsp;the&nbsp;setting&nbsp;of&nbsp;**AnimationSegment**&nbsp;and&nbsp;is&nbsp;the&nbsp;same&nbsp;as&nbsp;the&nbsp;value&nbsp;of&nbsp;**totalFrames**. | 
+| segmentPos | number | ID&nbsp;of&nbsp;the&nbsp;current&nbsp;animation&nbsp;segment.&nbsp;The&nbsp;value&nbsp;is&nbsp;a&nbsp;positive&nbsp;integer&nbsp;greater&nbsp;than&nbsp;or&nbsp;equal&nbsp;to&nbsp;0. | 
+| isSubframeEnabled | boolean | Whether&nbsp;the&nbsp;precision&nbsp;of&nbsp;**currentFrame**&nbsp;is&nbsp;a&nbsp;floating&nbsp;point&nbsp;number. | 
+| segments | AnimationSegment&nbsp;\|&nbsp;AnimationSegment[] | Current&nbsp;segment&nbsp;of&nbsp;the&nbsp;animation. | 
+
+
+## AnimationItem.play
+
+play(name?: string): void
 
 Plays an animation.
 
--   Parameters
-
-    <a name="table74746571299"></a>
-    <table><thead align="left"><tr id="row1147455715915"><th class="cellrowborder" valign="top" width="15.740000000000002%" id="mcps1.1.5.1.1"><p id="p18474157992"><a name="p18474157992"></a><a name="p18474157992"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.989999999999998%" id="mcps1.1.5.1.2"><p id="p1447495716916"><a name="p1447495716916"></a><a name="p1447495716916"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.059999999999999%" id="mcps1.1.5.1.3"><p id="p447414571894"><a name="p447414571894"></a><a name="p447414571894"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.21%" id="mcps1.1.5.1.4"><p id="p12475175718918"><a name="p12475175718918"></a><a name="p12475175718918"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row64756571192"><td class="cellrowborder" valign="top" width="15.740000000000002%" headers="mcps1.1.5.1.1 "><p id="p204751057394"><a name="p204751057394"></a><a name="p204751057394"></a>name</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.989999999999998%" headers="mcps1.1.5.1.2 "><p id="p14475145713916"><a name="p14475145713916"></a><a name="p14475145713916"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p14475205717920"><a name="p14475205717920"></a><a name="p14475205717920"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.21%" headers="mcps1.1.5.1.4 "><p id="p447511571293"><a name="p447511571293"></a><a name="p447511571293"></a>Name of the target animation. By default, the value is null.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    this.anim.play()
-    ```
-
-
-## AnimationItem.destroy<a name="section1335522233318"></a>
-
-destroy\(name?: string\): void
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | name | string | No | Name&nbsp;of&nbsp;the&nbsp;target&nbsp;animation.&nbsp;By&nbsp;default,&nbsp;the&nbsp;value&nbsp;is&nbsp;null. | 
+
+- Example
+    
+  ```
+  this.animateItem.play()
+  ```
+
+
+## AnimationItem.destroy
+
+destroy(name?: string): void
 
 Destroys an animation.
 
--   Parameters
-
-    <a name="table842718111079"></a>
-    <table><thead align="left"><tr id="row15427201113713"><th class="cellrowborder" valign="top" width="15.740000000000002%" id="mcps1.1.5.1.1"><p id="p1542781118716"><a name="p1542781118716"></a><a name="p1542781118716"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.989999999999998%" id="mcps1.1.5.1.2"><p id="p1042719117714"><a name="p1042719117714"></a><a name="p1042719117714"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.059999999999999%" id="mcps1.1.5.1.3"><p id="p184282111273"><a name="p184282111273"></a><a name="p184282111273"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.21%" id="mcps1.1.5.1.4"><p id="p134282117713"><a name="p134282117713"></a><a name="p134282117713"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row84284112714"><td class="cellrowborder" valign="top" width="15.740000000000002%" headers="mcps1.1.5.1.1 "><p id="p64281118718"><a name="p64281118718"></a><a name="p64281118718"></a>name</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.989999999999998%" headers="mcps1.1.5.1.2 "><p id="p194280111879"><a name="p194280111879"></a><a name="p194280111879"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p84286118713"><a name="p84286118713"></a><a name="p84286118713"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.21%" headers="mcps1.1.5.1.4 "><p id="p54289111073"><a name="p54289111073"></a><a name="p54289111073"></a>Name of the target animation. By default, the value is null.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    this.anim.destroy()
-    ```
-
-
-## AnimationItem.pause<a name="section1535821016594"></a>
-
-pause\(name?: string\): void
-
-Pauses an animation. When the  **play**  interface is called next time, the animation is played from the current frame.
-
--   Parameters
-
-    <a name="table1427915931019"></a>
-    <table><thead align="left"><tr id="row1827979141011"><th class="cellrowborder" valign="top" width="15.740000000000002%" id="mcps1.1.5.1.1"><p id="p9279119171011"><a name="p9279119171011"></a><a name="p9279119171011"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.97%" id="mcps1.1.5.1.2"><p id="p172793911014"><a name="p172793911014"></a><a name="p172793911014"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.07%" id="mcps1.1.5.1.3"><p id="p162792919100"><a name="p162792919100"></a><a name="p162792919100"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.22%" id="mcps1.1.5.1.4"><p id="p1727949191018"><a name="p1727949191018"></a><a name="p1727949191018"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row32799911105"><td class="cellrowborder" valign="top" width="15.740000000000002%" headers="mcps1.1.5.1.1 "><p id="p728012931018"><a name="p728012931018"></a><a name="p728012931018"></a>name</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.97%" headers="mcps1.1.5.1.2 "><p id="p12809961018"><a name="p12809961018"></a><a name="p12809961018"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.07%" headers="mcps1.1.5.1.3 "><p id="p2028089191019"><a name="p2028089191019"></a><a name="p2028089191019"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.22%" headers="mcps1.1.5.1.4 "><p id="p202804921010"><a name="p202804921010"></a><a name="p202804921010"></a>Name of the target animation. By default, the value is null.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    this.anim.pause()
-    ```
-
-
-## AnimationItem.togglePause<a name="section16359210115914"></a>
-
-togglePause\(name?: string\): void
-
-Pauses or plays an animation. This method is equivalent to the switching between  **play**  and  **pause**.
-
--   Parameters
-
-    <a name="table201948111117"></a>
-    <table><thead align="left"><tr id="row019491111117"><th class="cellrowborder" valign="top" width="15.740000000000002%" id="mcps1.1.5.1.1"><p id="p101955181114"><a name="p101955181114"></a><a name="p101955181114"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.97%" id="mcps1.1.5.1.2"><p id="p1619513117110"><a name="p1619513117110"></a><a name="p1619513117110"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.07%" id="mcps1.1.5.1.3"><p id="p819511118114"><a name="p819511118114"></a><a name="p819511118114"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.22%" id="mcps1.1.5.1.4"><p id="p151952113112"><a name="p151952113112"></a><a name="p151952113112"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1019514111114"><td class="cellrowborder" valign="top" width="15.740000000000002%" headers="mcps1.1.5.1.1 "><p id="p1819513151118"><a name="p1819513151118"></a><a name="p1819513151118"></a>name</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.97%" headers="mcps1.1.5.1.2 "><p id="p8195417110"><a name="p8195417110"></a><a name="p8195417110"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.07%" headers="mcps1.1.5.1.3 "><p id="p61951213113"><a name="p61951213113"></a><a name="p61951213113"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.22%" headers="mcps1.1.5.1.4 "><p id="p71951113114"><a name="p71951113114"></a><a name="p71951113114"></a>Name of the target animation. By default, the value is null.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    this.anim.togglePause()
-    ```
-
-
-## AnimationItem.stop<a name="section163601107598"></a>
-
-stop\(name?: string\): void
-
-Stops an animation. When the  **play**  interface is called next time, the animation is played from the first frame.
-
--   Parameters
-
-    <a name="table264771201115"></a>
-    <table><thead align="left"><tr id="row7647412121116"><th class="cellrowborder" valign="top" width="15.740000000000002%" id="mcps1.1.5.1.1"><p id="p16647812141113"><a name="p16647812141113"></a><a name="p16647812141113"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.97%" id="mcps1.1.5.1.2"><p id="p46471712101113"><a name="p46471712101113"></a><a name="p46471712101113"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.07%" id="mcps1.1.5.1.3"><p id="p9647101291117"><a name="p9647101291117"></a><a name="p9647101291117"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.22%" id="mcps1.1.5.1.4"><p id="p20647111219117"><a name="p20647111219117"></a><a name="p20647111219117"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row18647171217114"><td class="cellrowborder" valign="top" width="15.740000000000002%" headers="mcps1.1.5.1.1 "><p id="p1164781261110"><a name="p1164781261110"></a><a name="p1164781261110"></a>name</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.97%" headers="mcps1.1.5.1.2 "><p id="p46471112141117"><a name="p46471112141117"></a><a name="p46471112141117"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.07%" headers="mcps1.1.5.1.3 "><p id="p17647012151115"><a name="p17647012151115"></a><a name="p17647012151115"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.22%" headers="mcps1.1.5.1.4 "><p id="p14647712151111"><a name="p14647712151111"></a><a name="p14647712151111"></a>Name of the target animation. By default, the value is null.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    this.anim.stop()
-    ```
-
-
-## AnimationItem.setSpeed<a name="section3824104013716"></a>
-
-setSpeed\(speed: number\): void
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | name | string | No | Name&nbsp;of&nbsp;the&nbsp;target&nbsp;animation.&nbsp;By&nbsp;default,&nbsp;the&nbsp;value&nbsp;is&nbsp;null. | 
+
+- Example
+    
+  ```
+  this.animateItem.destroy()
+  ```
+
+
+## AnimationItem.pause
+
+pause(name?: string): void
+
+Pauses an animation. When the **play** interface is called next time, the animation is played from the current frame.
+
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | name | string | No | Name&nbsp;of&nbsp;the&nbsp;target&nbsp;animation.&nbsp;By&nbsp;default,&nbsp;the&nbsp;value&nbsp;is&nbsp;null. | 
+
+- Example
+    
+  ```
+  this.animateItem.pause()
+  ```
+
+
+## AnimationItem.togglePause
+
+togglePause(name?: string): void
+
+Pauses or plays an animation. This method is equivalent to the switching between **play** and **pause**.
+
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | name | string | No | Name&nbsp;of&nbsp;the&nbsp;target&nbsp;animation.&nbsp;By&nbsp;default,&nbsp;the&nbsp;value&nbsp;is&nbsp;null. | 
+
+- Example
+    
+  ```
+  this.animateItem.togglePause()
+  ```
+
+
+## AnimationItem.stop
+
+stop(name?: string): void
+
+Stops an animation. When the **play** interface is called next time, the animation is played from the first frame.
+
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | name | string | No | Name&nbsp;of&nbsp;the&nbsp;target&nbsp;animation.&nbsp;By&nbsp;default,&nbsp;the&nbsp;value&nbsp;is&nbsp;null. | 
+
+- Example
+    
+  ```
+  this.animateItem.stop()
+  ```
+
+
+## AnimationItem.setSpeed
+
+setSpeed(speed: number): void
 
 Sets the playback speed of an animation.
 
--   Parameters
-
-    <a name="table38241640173714"></a>
-    <table><thead align="left"><tr id="row19825740183720"><th class="cellrowborder" valign="top" width="15.740000000000002%" id="mcps1.1.5.1.1"><p id="p6825134063710"><a name="p6825134063710"></a><a name="p6825134063710"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.989999999999998%" id="mcps1.1.5.1.2"><p id="p1582594012373"><a name="p1582594012373"></a><a name="p1582594012373"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.059999999999999%" id="mcps1.1.5.1.3"><p id="p17825164016371"><a name="p17825164016371"></a><a name="p17825164016371"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.21%" id="mcps1.1.5.1.4"><p id="p28256407379"><a name="p28256407379"></a><a name="p28256407379"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1882554013376"><td class="cellrowborder" valign="top" width="15.740000000000002%" headers="mcps1.1.5.1.1 "><p id="p482534073719"><a name="p482534073719"></a><a name="p482534073719"></a>speed</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.989999999999998%" headers="mcps1.1.5.1.2 "><p id="p882504017377"><a name="p882504017377"></a><a name="p882504017377"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p1182544013712"><a name="p1182544013712"></a><a name="p1182544013712"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.21%" headers="mcps1.1.5.1.4 "><p id="p782514014379"><a name="p782514014379"></a><a name="p782514014379"></a>Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is <strong id="b146041240163111"><a name="b146041240163111"></a><a name="b146041240163111"></a>1.0</strong> or <strong id="b327517434313"><a name="b327517434313"></a><a name="b327517434313"></a>-1.0</strong>, the animation plays at the normal speed.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    this.anim.setSpeed(5);
-    ```
-
-
-## AnimationItem.setDirection<a name="section1782514083712"></a>
-
-setDirection\(direction: AnimationDirection\): void
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | speed | number | Yes | Playback&nbsp;speed.&nbsp;The&nbsp;value&nbsp;is&nbsp;a&nbsp;floating-point&nbsp;number.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;greater&nbsp;than&nbsp;0,&nbsp;the&nbsp;animation&nbsp;plays&nbsp;in&nbsp;forward&nbsp;direction.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;less&nbsp;than&nbsp;0,&nbsp;the&nbsp;animation&nbsp;plays&nbsp;in&nbsp;reversed&nbsp;direction.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;0,&nbsp;the&nbsp;animation&nbsp;is&nbsp;paused.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;**1.0**&nbsp;or&nbsp;**-1.0**,&nbsp;the&nbsp;animation&nbsp;plays&nbsp;at&nbsp;the&nbsp;normal&nbsp;speed. | 
+
+- Example
+    
+  ```
+  this.animateItem.setSpeed(5);
+  ```
 
-Sets the playback direction of an animation.
 
--   Parameters
+## AnimationItem.setDirection
 
-    <a name="table282674013711"></a>
-    <table><thead align="left"><tr id="row118267404373"><th class="cellrowborder" valign="top" width="15.939999999999998%" id="mcps1.1.5.1.1"><p id="p68263405370"><a name="p68263405370"></a><a name="p68263405370"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.790000000000001%" id="mcps1.1.5.1.2"><p id="p382634013710"><a name="p382634013710"></a><a name="p382634013710"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.059999999999999%" id="mcps1.1.5.1.3"><p id="p2826240183716"><a name="p2826240183716"></a><a name="p2826240183716"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.21%" id="mcps1.1.5.1.4"><p id="p582694011379"><a name="p582694011379"></a><a name="p582694011379"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row9826164043717"><td class="cellrowborder" valign="top" width="15.939999999999998%" headers="mcps1.1.5.1.1 "><p id="p8826440143712"><a name="p8826440143712"></a><a name="p8826440143712"></a>direction</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.790000000000001%" headers="mcps1.1.5.1.2 "><p id="p4356532125820"><a name="p4356532125820"></a><a name="p4356532125820"></a>AnimationDirection</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p982644083717"><a name="p982644083717"></a><a name="p982644083717"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.21%" headers="mcps1.1.5.1.4 "><p id="p17826124023719"><a name="p17826124023719"></a><a name="p17826124023719"></a>Direction in which the animation plays. <strong id="b0135658324"><a name="b0135658324"></a><a name="b0135658324"></a>1</strong>: forwards; <strong id="b5136165153212"><a name="b5136165153212"></a><a name="b5136165153212"></a>-1</strong>: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with <strong id="b14137175153213"><a name="b14137175153213"></a><a name="b14137175153213"></a>loop</strong> being set to <strong id="b16137351321"><a name="b16137351321"></a><a name="b16137351321"></a>true</strong>, the animation plays backwards continuously. When the value of <strong id="b1213818523213"><a name="b1213818523213"></a><a name="b1213818523213"></a>speed</strong> is less than 0, the animation also plays backwards.</p>
-    <p id="p191079467212"><a name="p191079467212"></a><a name="p191079467212"></a>AnimationDirection: 1 | -1.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+setDirection(direction: AnimationDirection): void
 
+Sets the playback direction of an animation.
 
--   Example
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | direction | AnimationDirection | Yes | Direction&nbsp;in&nbsp;which&nbsp;the&nbsp;animation&nbsp;plays.&nbsp;**1**:&nbsp;forwards;&nbsp;**-1**:&nbsp;backwards.&nbsp;When&nbsp;set&nbsp;to&nbsp;play&nbsp;backwards,&nbsp;the&nbsp;animation&nbsp;plays&nbsp;from&nbsp;the&nbsp;current&nbsp;playback&nbsp;progress&nbsp;to&nbsp;the&nbsp;first&nbsp;frame.&nbsp;When&nbsp;this&nbsp;setting&nbsp;is&nbsp;combined&nbsp;with&nbsp;**loop**&nbsp;being&nbsp;set&nbsp;to&nbsp;**true**,&nbsp;the&nbsp;animation&nbsp;plays&nbsp;backwards&nbsp;continuously.&nbsp;When&nbsp;the&nbsp;value&nbsp;of&nbsp;**speed**&nbsp;is&nbsp;less&nbsp;than&nbsp;0,&nbsp;the&nbsp;animation&nbsp;also&nbsp;plays&nbsp;backwards.<br/>**AnimationDirection**:&nbsp;1&nbsp;\|&nbsp;-1. | 
 
-    ```
-    this.anim.setDirection(-1)
-    ```
+- Example
+    
+  ```
+  this.animateItem.setDirection(-1)
+  ```
 
 
-## AnimationItem.goToAndStop<a name="section45151420204219"></a>
+## AnimationItem.goToAndStop
 
-goToAndStop\(value: number, isFrame: boolean\): void
+goToAndStop(value: number, isFrame: boolean): void
 
 Sets the animation to stop at the specified frame or time.
 
--   Parameters
-
-    <a name="table1351517204426"></a>
-    <table><thead align="left"><tr id="row18515152044211"><th class="cellrowborder" valign="top" width="15.540000000000001%" id="mcps1.1.5.1.1"><p id="p1851542012423"><a name="p1851542012423"></a><a name="p1851542012423"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.170000000000002%" id="mcps1.1.5.1.2"><p id="p1351542019421"><a name="p1351542019421"></a><a name="p1351542019421"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.08%" id="mcps1.1.5.1.3"><p id="p1051516200429"><a name="p1051516200429"></a><a name="p1051516200429"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.21%" id="mcps1.1.5.1.4"><p id="p1951518203429"><a name="p1951518203429"></a><a name="p1951518203429"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row8515162024214"><td class="cellrowborder" valign="top" width="15.540000000000001%" headers="mcps1.1.5.1.1 "><p id="p851512016422"><a name="p851512016422"></a><a name="p851512016422"></a>value</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.5.1.2 "><p id="p1451532016426"><a name="p1451532016426"></a><a name="p1451532016426"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.08%" headers="mcps1.1.5.1.3 "><p id="p1551615209422"><a name="p1551615209422"></a><a name="p1551615209422"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.21%" headers="mcps1.1.5.1.4 "><p id="p10516152014423"><a name="p10516152014423"></a><a name="p10516152014423"></a>Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop.</p>
-    </td>
-    </tr>
-    <tr id="row1651682024214"><td class="cellrowborder" valign="top" width="15.540000000000001%" headers="mcps1.1.5.1.1 "><p id="p18516220114218"><a name="p18516220114218"></a><a name="p18516220114218"></a>isFrame</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.5.1.2 "><p id="p051662024216"><a name="p051662024216"></a><a name="p051662024216"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.08%" headers="mcps1.1.5.1.3 "><p id="p1351642034211"><a name="p1351642034211"></a><a name="p1351642034211"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.21%" headers="mcps1.1.5.1.4 "><p id="p0516182015426"><a name="p0516182015426"></a><a name="p0516182015426"></a>Whether to set the animation to stop at the specified frame. The value <strong id="b181266378358"><a name="b181266378358"></a><a name="b181266378358"></a>true</strong> means to set the animation to stop at the specified frame, and <strong id="b15947147173611"><a name="b15947147173611"></a><a name="b15947147173611"></a>false</strong> means to set the animation to stop at the specified time progress. The default value is <strong id="b17012483719"><a name="b17012483719"></a><a name="b17012483719"></a>false</strong>.</p>
-    </td>
-    </tr>
-    <tr id="row189417300253"><td class="cellrowborder" valign="top" width="15.540000000000001%" headers="mcps1.1.5.1.1 "><p id="p18942193082518"><a name="p18942193082518"></a><a name="p18942193082518"></a>name</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.5.1.2 "><p id="p1194253062510"><a name="p1194253062510"></a><a name="p1194253062510"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.08%" headers="mcps1.1.5.1.3 "><p id="p1294263017254"><a name="p1294263017254"></a><a name="p1294263017254"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.21%" headers="mcps1.1.5.1.4 "><p id="p494243012515"><a name="p494243012515"></a><a name="p494243012515"></a>Name of the target animation. By default, the value is null.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    // Set the animation to stop at the specified frame.
-    this.anim.goToAndStop(25, true)
-    // Set the animation to stop at the specified time progress.
-    this.anim.goToAndStop(300, false, this.animateName)
-    ```
-
-
-## AnimationItem.goToAndPlay<a name="section2998182654614"></a>
-
-goToAndPlay\(value: number, isFrame: boolean\): void
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | value | number | Yes | Frame&nbsp;ID&nbsp;(greater&nbsp;than&nbsp;or&nbsp;equal&nbsp;to&nbsp;0)&nbsp;or&nbsp;time&nbsp;progress&nbsp;(ms)&nbsp;at&nbsp;which&nbsp;the&nbsp;animation&nbsp;will&nbsp;stop. | 
+  | isFrame | boolean | No | Whether&nbsp;to&nbsp;set&nbsp;the&nbsp;animation&nbsp;to&nbsp;stop&nbsp;at&nbsp;the&nbsp;specified&nbsp;frame.&nbsp;The&nbsp;value&nbsp;**true**&nbsp;means&nbsp;to&nbsp;set&nbsp;the&nbsp;animation&nbsp;to&nbsp;stop&nbsp;at&nbsp;the&nbsp;specified&nbsp;frame,&nbsp;and&nbsp;**false**&nbsp;means&nbsp;to&nbsp;set&nbsp;the&nbsp;animation&nbsp;to&nbsp;stop&nbsp;at&nbsp;the&nbsp;specified&nbsp;time&nbsp;progress.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**false**. | 
+  | name | string | No | Name&nbsp;of&nbsp;the&nbsp;target&nbsp;animation.&nbsp;By&nbsp;default,&nbsp;the&nbsp;value&nbsp;is&nbsp;null. | 
+
+- Example
+    
+  ```
+  // Set the animation to stop at the specified frame.
+  this.animateItem.goToAndStop(25, true)
+  // Set the animation to stop at the specified time progress.
+  this.animateItem.goToAndStop(300, false, this.animateName)
+  ```
+
+
+## AnimationItem.goToAndPlay
+
+goToAndPlay(value: number, isFrame: boolean): void
 
 Sets the animation to start from the specified frame or time progress.
 
--   Parameters
-
-    <a name="table9999142654618"></a>
-    <table><thead align="left"><tr id="row199994261469"><th class="cellrowborder" valign="top" width="15.540000000000001%" id="mcps1.1.5.1.1"><p id="p1099952618463"><a name="p1099952618463"></a><a name="p1099952618463"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.19%" id="mcps1.1.5.1.2"><p id="p1799910264461"><a name="p1799910264461"></a><a name="p1799910264461"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.059999999999999%" id="mcps1.1.5.1.3"><p id="p109998262462"><a name="p109998262462"></a><a name="p109998262462"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.21%" id="mcps1.1.5.1.4"><p id="p129990264461"><a name="p129990264461"></a><a name="p129990264461"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row3999726104614"><td class="cellrowborder" valign="top" width="15.540000000000001%" headers="mcps1.1.5.1.1 "><p id="p1899914267467"><a name="p1899914267467"></a><a name="p1899914267467"></a>value</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.19%" headers="mcps1.1.5.1.2 "><p id="p109991026134615"><a name="p109991026134615"></a><a name="p109991026134615"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p159996266465"><a name="p159996266465"></a><a name="p159996266465"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.21%" headers="mcps1.1.5.1.4 "><p id="p3999526194616"><a name="p3999526194616"></a><a name="p3999526194616"></a>Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start.</p>
-    </td>
-    </tr>
-    <tr id="row199999264465"><td class="cellrowborder" valign="top" width="15.540000000000001%" headers="mcps1.1.5.1.1 "><p id="p29991226114610"><a name="p29991226114610"></a><a name="p29991226114610"></a>isFrame</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.19%" headers="mcps1.1.5.1.2 "><p id="p15042794615"><a name="p15042794615"></a><a name="p15042794615"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p1701127104617"><a name="p1701127104617"></a><a name="p1701127104617"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.21%" headers="mcps1.1.5.1.4 "><p id="p1302272462"><a name="p1302272462"></a><a name="p1302272462"></a>Whether to set the animation to start from the specified frame. The value <strong id="b67738283449"><a name="b67738283449"></a><a name="b67738283449"></a>true</strong> means to set the animation to start from the specified frame, and <strong id="b11773628174413"><a name="b11773628174413"></a><a name="b11773628174413"></a>false</strong> means to set the animation to start from the specified time progress. The default value is <strong id="b187742028164418"><a name="b187742028164418"></a><a name="b187742028164418"></a>false</strong>.</p>
-    </td>
-    </tr>
-    <tr id="row41884816258"><td class="cellrowborder" valign="top" width="15.540000000000001%" headers="mcps1.1.5.1.1 "><p id="p91891388253"><a name="p91891388253"></a><a name="p91891388253"></a>name</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.19%" headers="mcps1.1.5.1.2 "><p id="p131897862511"><a name="p131897862511"></a><a name="p131897862511"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p71891989255"><a name="p71891989255"></a><a name="p71891989255"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.21%" headers="mcps1.1.5.1.4 "><p id="p41890812517"><a name="p41890812517"></a><a name="p41890812517"></a>Name of the target animation. By default, the value is null.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    // Set the animation to start from the specified frame.
-    this.anim.goToAndPlay(25, true)
-    // Set the animation to start from the specified time progress.
-    this.anim.goToAndPlay(300, false, this.animateName)
-    ```
-
-
-## AnimationItem.playSegments<a name="section935124765113"></a>
-
-playSegments\(segments: AnimationSegment | AnimationSegment\[\], forceFlag: boolean\): void
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | value | number | Yes | Frame&nbsp;ID&nbsp;(greater&nbsp;than&nbsp;or&nbsp;equal&nbsp;to&nbsp;0)&nbsp;or&nbsp;time&nbsp;progress&nbsp;(ms)&nbsp;at&nbsp;which&nbsp;the&nbsp;animation&nbsp;will&nbsp;start. | 
+  | isFrame | boolean | Yes | Whether&nbsp;to&nbsp;set&nbsp;the&nbsp;animation&nbsp;to&nbsp;start&nbsp;from&nbsp;the&nbsp;specified&nbsp;frame.&nbsp;The&nbsp;value&nbsp;**true**&nbsp;means&nbsp;to&nbsp;set&nbsp;the&nbsp;animation&nbsp;to&nbsp;start&nbsp;from&nbsp;the&nbsp;specified&nbsp;frame,&nbsp;and&nbsp;**false**&nbsp;means&nbsp;to&nbsp;set&nbsp;the&nbsp;animation&nbsp;to&nbsp;start&nbsp;from&nbsp;the&nbsp;specified&nbsp;time&nbsp;progress.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**false**. | 
+  | name | string | No | Name&nbsp;of&nbsp;the&nbsp;target&nbsp;animation.&nbsp;By&nbsp;default,&nbsp;the&nbsp;value&nbsp;is&nbsp;null. | 
+
+- Example
+    
+  ```
+  // Set the animation to stop at the specified frame.
+  this.animateItem.goToAndPlay(25, true)
+  // Set the animation to stop at the specified time progress.
+  this.animateItem.goToAndPlay(300, false, this.animateName)
+  ```
+
+
+## AnimationItem.playSegments
+
+playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag: boolean): void
 
 Sets the animation to play only the specified segment.
 
--   Parameters
-
-    <a name="table11351447155118"></a>
-    <table><thead align="left"><tr id="row435847145117"><th class="cellrowborder" valign="top" width="10.6%" id="mcps1.1.5.1.1"><p id="p1351147105112"><a name="p1351147105112"></a><a name="p1351147105112"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.12%" id="mcps1.1.5.1.2"><p id="p1335747135114"><a name="p1335747135114"></a><a name="p1335747135114"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.05%" id="mcps1.1.5.1.3"><p id="p635144755111"><a name="p635144755111"></a><a name="p635144755111"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.23%" id="mcps1.1.5.1.4"><p id="p33534715114"><a name="p33534715114"></a><a name="p33534715114"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row183594714514"><td class="cellrowborder" valign="top" width="10.6%" headers="mcps1.1.5.1.1 "><p id="p9350478514"><a name="p9350478514"></a><a name="p9350478514"></a>segments</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.12%" headers="mcps1.1.5.1.2 "><p id="p8351474514"><a name="p8351474514"></a><a name="p8351474514"></a>AnimationSegment = [number, number] | AnimationSegment[]</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.05%" headers="mcps1.1.5.1.3 "><p id="p135134785111"><a name="p135134785111"></a><a name="p135134785111"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.23%" headers="mcps1.1.5.1.4 "><p id="p74901014133519"><a name="p74901014133519"></a><a name="p74901014133519"></a>Segment or segment list.</p>
-    <p id="p1836194717510"><a name="p1836194717510"></a><a name="p1836194717510"></a>If all segments in the segment list are played, only the last segment is played in the next cycle.</p>
-    </td>
-    </tr>
-    <tr id="row113634716514"><td class="cellrowborder" valign="top" width="10.6%" headers="mcps1.1.5.1.1 "><p id="p1036184775114"><a name="p1036184775114"></a><a name="p1036184775114"></a>forceFlag</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.12%" headers="mcps1.1.5.1.2 "><p id="p19362476514"><a name="p19362476514"></a><a name="p19362476514"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.05%" headers="mcps1.1.5.1.3 "><p id="p123618476516"><a name="p123618476516"></a><a name="p123618476516"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.23%" headers="mcps1.1.5.1.4 "><p id="p133644713510"><a name="p133644713510"></a><a name="p133644713510"></a>Whether the settings take effect immediately. The value <strong id="b63296404473"><a name="b63296404473"></a><a name="b63296404473"></a>true</strong> means the settings take effect immediately, and <strong id="b1767818234818"><a name="b1767818234818"></a><a name="b1767818234818"></a>false</strong> means the settings take effect until the current cycle of playback is completed.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    // Set the animation to play the specified segment.
-    this.anim.playSegments([10, 20], false)
-    // Set the animation to play the specified segment list.
-    this.anim.playSegments([[0, 5], [20, 30]], true)
-    ```
-
-
-## AnimationItem.resetSegments<a name="section198278408372"></a>
-
-resetSegments\(forceFlag: boolean\): void
-
-Resets the settings configured by the  **playSegments**  method to play all the frames.
-
--   Parameters
-
-    <a name="table5827114033715"></a>
-    <table><thead align="left"><tr id="row18277404377"><th class="cellrowborder" valign="top" width="15.540000000000001%" id="mcps1.1.5.1.1"><p id="p782794033719"><a name="p782794033719"></a><a name="p782794033719"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.19%" id="mcps1.1.5.1.2"><p id="p082774015373"><a name="p082774015373"></a><a name="p082774015373"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.040000000000001%" id="mcps1.1.5.1.3"><p id="p12827140153717"><a name="p12827140153717"></a><a name="p12827140153717"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.23%" id="mcps1.1.5.1.4"><p id="p1482714053713"><a name="p1482714053713"></a><a name="p1482714053713"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row15827124015377"><td class="cellrowborder" valign="top" width="15.540000000000001%" headers="mcps1.1.5.1.1 "><p id="p1082719409377"><a name="p1082719409377"></a><a name="p1082719409377"></a>forceFlag</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.19%" headers="mcps1.1.5.1.2 "><p id="p982734011376"><a name="p982734011376"></a><a name="p982734011376"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.040000000000001%" headers="mcps1.1.5.1.3 "><p id="p1782784014371"><a name="p1782784014371"></a><a name="p1782784014371"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.23%" headers="mcps1.1.5.1.4 "><p id="p1082774063718"><a name="p1082774063718"></a><a name="p1082774063718"></a>Whether the settings take effect immediately. The value <strong id="b469377105815"><a name="b469377105815"></a><a name="b469377105815"></a>true</strong> means the settings take effect immediately, and <strong id="b13694373586"><a name="b13694373586"></a><a name="b13694373586"></a>false</strong> means the settings take effect until the current cycle of playback is completed.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    this.anim.resetSegments(true)
-    ```
-
-
-## AnimationItem.resize<a name="section2672102714417"></a>
-
-resize\(\): void
-
-Refreshes the animation layout.
-
--   Example
-
-    ```
-    this.anim.resize()
-    ```
-
-
-## AnimationItem.setSubframe<a name="section151492219586"></a>
-
-setSubframe\(useSubFrame: boolean\): void
-
-Sets the precision of the  **currentFrame**  attribute to display floating-point numbers.
-
--   Parameters
-
-    <a name="table131492212583"></a>
-    <table><thead align="left"><tr id="row1715062155810"><th class="cellrowborder" valign="top" width="15.540000000000001%" id="mcps1.1.5.1.1"><p id="p315012145815"><a name="p315012145815"></a><a name="p315012145815"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.170000000000002%" id="mcps1.1.5.1.2"><p id="p1615014217584"><a name="p1615014217584"></a><a name="p1615014217584"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.059999999999999%" id="mcps1.1.5.1.3"><p id="p171501927581"><a name="p171501927581"></a><a name="p171501927581"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.23%" id="mcps1.1.5.1.4"><p id="p115072155819"><a name="p115072155819"></a><a name="p115072155819"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row151502255812"><td class="cellrowborder" valign="top" width="15.540000000000001%" headers="mcps1.1.5.1.1 "><p id="p171501219585"><a name="p171501219585"></a><a name="p171501219585"></a>useSubFrames</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.5.1.2 "><p id="p21509216581"><a name="p21509216581"></a><a name="p21509216581"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.1.5.1.3 "><p id="p121501620588"><a name="p121501620588"></a><a name="p121501620588"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.23%" headers="mcps1.1.5.1.4 "><p id="p476416819295"><a name="p476416819295"></a><a name="p476416819295"></a>Whether the <strong id="b75135316112"><a name="b75135316112"></a><a name="b75135316112"></a>currentFrame</strong> attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.</p>
-    <p id="p13275161884312"><a name="p13275161884312"></a><a name="p13275161884312"></a><strong id="b1774172511219"><a name="b1774172511219"></a><a name="b1774172511219"></a>true</strong>: The <strong id="b13889730023"><a name="b13889730023"></a><a name="b13889730023"></a>currentFrame</strong> attribute displays floating-point numbers.</p>
-    <p id="p2025101315457"><a name="p2025101315457"></a><a name="p2025101315457"></a><strong id="b197507536218"><a name="b197507536218"></a><a name="b197507536218"></a>false</strong>: The <strong id="b375115538210"><a name="b375115538210"></a><a name="b375115538210"></a>currentFrame</strong> attribute displays an integer and does not display floating-point numbers.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | segments | AnimationSegment&nbsp;=&nbsp;[number,&nbsp;number]&nbsp;\|&nbsp;AnimationSegment[] | Yes | Segment&nbsp;or&nbsp;segment&nbsp;list.<br/>If&nbsp;all&nbsp;segments&nbsp;in&nbsp;the&nbsp;segment&nbsp;list&nbsp;are&nbsp;played,&nbsp;only&nbsp;the&nbsp;last&nbsp;segment&nbsp;is&nbsp;played&nbsp;in&nbsp;the&nbsp;next&nbsp;cycle. | 
+  | forceFlag | boolean | Yes | Whether&nbsp;the&nbsp;settings&nbsp;take&nbsp;effect&nbsp;immediately.&nbsp;The&nbsp;value&nbsp;**true**&nbsp;means&nbsp;the&nbsp;settings&nbsp;take&nbsp;effect&nbsp;immediately,&nbsp;and&nbsp;**false**&nbsp;means&nbsp;the&nbsp;settings&nbsp;take&nbsp;effect&nbsp;until&nbsp;the&nbsp;current&nbsp;cycle&nbsp;of&nbsp;playback&nbsp;is&nbsp;completed. | 
 
+- Example
+    
+  ```
+  // Set the animation to play the specified segment.
+  this.animateItem.playSegments([10, 20], false)
+  // Set the animation to play the specified segment list.
+  this.animateItem.playSegments([[0, 5], [20, 30]], true)
+  ```
 
--   Example
 
-    ```
-    this.anim.setSubframe(false)
-    ```
+## AnimationItem.resetSegments
 
+resetSegments(forceFlag: boolean): void
 
-## AnimationItem.getDuration<a name="section1621121414110"></a>
+Resets the settings configured by the **playSegments** method to play all the frames.
 
-getDuration\(inFrames?: boolean\): void
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | forceFlag | boolean | Yes | Whether&nbsp;the&nbsp;settings&nbsp;take&nbsp;effect&nbsp;immediately.&nbsp;The&nbsp;value&nbsp;**true**&nbsp;means&nbsp;the&nbsp;settings&nbsp;take&nbsp;effect&nbsp;immediately,&nbsp;and&nbsp;**false**&nbsp;means&nbsp;the&nbsp;settings&nbsp;take&nbsp;effect&nbsp;until&nbsp;the&nbsp;current&nbsp;cycle&nbsp;of&nbsp;playback&nbsp;is&nbsp;completed. | 
+
+- Example
+    
+  ```
+  this.animateItem.resetSegments(true)
+  ```
 
-Obtains the duration \(irrelevant to the playback speed\) or number of frames for playing an animation sequence. The settings are related to the input parameter  **initialSegment**  of the  **Lottie.loadAnimation**  interface.
 
--   Parameters
+## AnimationItem.resize
+
+resize(): void
+
+Resizes the animation layout.
+
+- Example
+    
+  ```
+  this.animateItem.resize()
+  ```
 
-    <a name="table176213148111"></a>
-    <table><thead align="left"><tr id="row15623171412117"><th class="cellrowborder" valign="top" width="15.540000000000001%" id="mcps1.1.5.1.1"><p id="p106231141919"><a name="p106231141919"></a><a name="p106231141919"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.19%" id="mcps1.1.5.1.2"><p id="p76231614116"><a name="p76231614116"></a><a name="p76231614116"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.040000000000001%" id="mcps1.1.5.1.3"><p id="p362301416113"><a name="p362301416113"></a><a name="p362301416113"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.23%" id="mcps1.1.5.1.4"><p id="p196231914511"><a name="p196231914511"></a><a name="p196231914511"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row186237141813"><td class="cellrowborder" valign="top" width="15.540000000000001%" headers="mcps1.1.5.1.1 "><p id="p96237141410"><a name="p96237141410"></a><a name="p96237141410"></a>inFrames</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.19%" headers="mcps1.1.5.1.2 "><p id="p962311144120"><a name="p962311144120"></a><a name="p962311144120"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.040000000000001%" headers="mcps1.1.5.1.3 "><p id="p1462341416119"><a name="p1462341416119"></a><a name="p1462341416119"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.23%" headers="mcps1.1.5.1.4 "><p id="p46232142114"><a name="p46232142114"></a><a name="p46232142114"></a>Whether to obtain the duration or number of frames. <strong id="b10478181318517"><a name="b10478181318517"></a><a name="b10478181318517"></a>true</strong>: number of frames. <strong id="b19151151919515"><a name="b19151151919515"></a><a name="b19151151919515"></a>false</strong>: duration, in ms. The default value is <strong id="b32951629352"><a name="b32951629352"></a><a name="b32951629352"></a>false</strong>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
 
+## AnimationItem.setSubframe
 
--   Example
+setSubframe(useSubFrame: boolean): void
 
-    ```
-    this.anim.setSubframe(true)
-    ```
+Sets the precision of the **currentFrame** attribute to display floating-point numbers.
 
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | useSubFrames | boolean | Yes | Whether&nbsp;the&nbsp;**currentFrame**&nbsp;attribute&nbsp;displays&nbsp;floating-point&nbsp;numbers.&nbsp;By&nbsp;default,&nbsp;the&nbsp;attribute&nbsp;displays&nbsp;floating-point&nbsp;numbers.<br/>**true**:&nbsp;The&nbsp;**currentFrame**&nbsp;attribute&nbsp;displays&nbsp;floating-point&nbsp;numbers.<br/>**false**:&nbsp;The&nbsp;**currentFrame**&nbsp;attribute&nbsp;displays&nbsp;an&nbsp;integer&nbsp;and&nbsp;does&nbsp;not&nbsp;display&nbsp;floating-point&nbsp;numbers. | 
 
-## AnimationItem.addEventListener<a name="section2025011161294"></a>
+- Example
+    
+  ```
+  this.animateItem.setSubframe(false)
+  ```
+
+
+## AnimationItem.getDuration
+
+getDuration(inFrames?: boolean): void
+
+Obtains the duration (irrelevant to the playback speed) or number of frames for playing an animation sequence. The settings are related to the input parameter **initialSegment** of the **Lottie.loadAnimation** interface.
+
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | inFrames | boolean | No | Whether&nbsp;to&nbsp;obtain&nbsp;the&nbsp;duration&nbsp;or&nbsp;number&nbsp;of&nbsp;frames.&nbsp;**true**:&nbsp;number&nbsp;of&nbsp;frames.&nbsp;**false**:&nbsp;duration,&nbsp;in&nbsp;ms.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**false**. | 
+
+- Example
+    
+  ```
+  this.animateItem.getDuration(true)
+  ```
 
-addEventListener<T = any\>\(name: AnimationEventName, callback: AnimationEventCallback<T\>\): \(\) =\> void
+
+## AnimationItem.addEventListener
+
+addEventListener&lt;T = any&gt;(name: AnimationEventName, callback: AnimationEventCallback&lt;T&gt;): () =&gt; void
 
 Adds an event listener. After the event is complete, the specified callback function is triggered. This method returns the function object that can delete the event listener.
 
--   Parameters
-
-    <a name="table152501816397"></a>
-    <table><thead align="left"><tr id="row192511516491"><th class="cellrowborder" valign="top" width="15.540000000000001%" id="mcps1.1.5.1.1"><p id="p12512163916"><a name="p12512163916"></a><a name="p12512163916"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.03%" id="mcps1.1.5.1.2"><p id="p1525101614914"><a name="p1525101614914"></a><a name="p1525101614914"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="7.199999999999999%" id="mcps1.1.5.1.3"><p id="p72511116499"><a name="p72511116499"></a><a name="p72511116499"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.23%" id="mcps1.1.5.1.4"><p id="p192511166920"><a name="p192511166920"></a><a name="p192511166920"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row62511616498"><td class="cellrowborder" valign="top" width="15.540000000000001%" headers="mcps1.1.5.1.1 "><p id="p02514161193"><a name="p02514161193"></a><a name="p02514161193"></a>name</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.5.1.2 "><p id="p14251151611913"><a name="p14251151611913"></a><a name="p14251151611913"></a>AnimationEventName</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.199999999999999%" headers="mcps1.1.5.1.3 "><p id="p82517161296"><a name="p82517161296"></a><a name="p82517161296"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.23%" headers="mcps1.1.5.1.4 "><p id="p325112161493"><a name="p325112161493"></a><a name="p325112161493"></a>Animation event type. The available options are as follows:</p>
-    <p id="p925113164912"><a name="p925113164912"></a><a name="p925113164912"></a>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'</p>
-    </td>
-    </tr>
-    <tr id="row12251916992"><td class="cellrowborder" valign="top" width="15.540000000000001%" headers="mcps1.1.5.1.1 "><p id="p182517168919"><a name="p182517168919"></a><a name="p182517168919"></a>callback</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.5.1.2 "><p id="p1525114162912"><a name="p1525114162912"></a><a name="p1525114162912"></a>AnimationEventCallback&lt;T&gt;</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.199999999999999%" headers="mcps1.1.5.1.3 "><p id="p11251111610919"><a name="p11251111610919"></a><a name="p11251111610919"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.23%" headers="mcps1.1.5.1.4 "><p id="p625101619911"><a name="p625101619911"></a><a name="p625101619911"></a>Custom callback.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    private callbackItem: any = function() {
-        console.log("grunt loopComplete")
-    }
-    let delFunction = this.animateItem.addEventListener('loopComplete', this.callbackItem)
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | name | AnimationEventName | Yes | Animation&nbsp;event&nbsp;type.&nbsp;The&nbsp;available&nbsp;options&nbsp;are&nbsp;as&nbsp;follows:<br/>'enterFrame',&nbsp;'loopComplete',&nbsp;'complete',&nbsp;'segmentStart',&nbsp;'destroy',&nbsp;'config_ready',&nbsp;'data_ready',&nbsp;'DOMLoaded',&nbsp;'error',&nbsp;'data_failed',&nbsp;'loaded_images' | 
+  | callback | AnimationEventCallback&lt;T&gt; | Yes | Custom&nbsp;callback. | 
+
+- Example
     
-    // Delete the event listener.
-    delFunction()
-    ```
-
-
-## AnimationItem.removeEventListener<a name="section10518181695"></a>
-
-removeEventListener<T = any\>\(name: AnimationEventName, callback?: AnimationEventCallback<T\>\): void
-
-Deletes an event listener.
-
--   Parameters
-
-    <a name="table3614182916"></a>
-    <table><thead align="left"><tr id="row13601817910"><th class="cellrowborder" valign="top" width="15.540000000000001%" id="mcps1.1.5.1.1"><p id="p8611812912"><a name="p8611812912"></a><a name="p8611812912"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.03%" id="mcps1.1.5.1.2"><p id="p166918398"><a name="p166918398"></a><a name="p166918398"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="7.199999999999999%" id="mcps1.1.5.1.3"><p id="p065184911"><a name="p065184911"></a><a name="p065184911"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.23%" id="mcps1.1.5.1.4"><p id="p968181093"><a name="p968181093"></a><a name="p968181093"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row16618188917"><td class="cellrowborder" valign="top" width="15.540000000000001%" headers="mcps1.1.5.1.1 "><p id="p17618181195"><a name="p17618181195"></a><a name="p17618181195"></a>name</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.5.1.2 "><p id="p1261518390"><a name="p1261518390"></a><a name="p1261518390"></a>AnimationEventName</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.199999999999999%" headers="mcps1.1.5.1.3 "><p id="p06618997"><a name="p06618997"></a><a name="p06618997"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.23%" headers="mcps1.1.5.1.4 "><p id="p16612181999"><a name="p16612181999"></a><a name="p16612181999"></a>Animation event type. The available options are as follows:</p>
-    <p id="p187222374811"><a name="p187222374811"></a><a name="p187222374811"></a>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'</p>
-    </td>
-    </tr>
-    <tr id="row1877186912"><td class="cellrowborder" valign="top" width="15.540000000000001%" headers="mcps1.1.5.1.1 "><p id="p1471918291"><a name="p1471918291"></a><a name="p1471918291"></a>callback</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.5.1.2 "><p id="p9711189916"><a name="p9711189916"></a><a name="p9711189916"></a>AnimationEventCallback&lt;T&gt;</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.199999999999999%" headers="mcps1.1.5.1.3 "><p id="p9721820914"><a name="p9721820914"></a><a name="p9721820914"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.23%" headers="mcps1.1.5.1.4 "><p id="p177918695"><a name="p177918695"></a><a name="p177918695"></a>Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    this.animateItem.removeEventListener('loopComplete', this.callbackItem)
-    ```
-
-
-## AnimationItem.triggerEvent<a name="section15091813747"></a>
-
-triggerEvent<T = any\>\(name: AnimationEventName, args: T\): void
+  ```
+  private callbackItem: any = function() {
+      console.log("grunt loopComplete")
+  }
+  let delFunction = this.animateItem.addEventListener('loopComplete', this.animateName)
+  
+  // Delete the event listener.
+  delFunction()
+  ```
 
-Directly triggers all configured callbacks of a specified event.
 
--   Parameters
-
-    <a name="table1750916131410"></a>
-    <table><thead align="left"><tr id="row45091131344"><th class="cellrowborder" valign="top" width="15.540000000000001%" id="mcps1.1.5.1.1"><p id="p050912131942"><a name="p050912131942"></a><a name="p050912131942"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.03%" id="mcps1.1.5.1.2"><p id="p45091213344"><a name="p45091213344"></a><a name="p45091213344"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="7.199999999999999%" id="mcps1.1.5.1.3"><p id="p165093131046"><a name="p165093131046"></a><a name="p165093131046"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.23%" id="mcps1.1.5.1.4"><p id="p195096131648"><a name="p195096131648"></a><a name="p195096131648"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row195095131646"><td class="cellrowborder" valign="top" width="15.540000000000001%" headers="mcps1.1.5.1.1 "><p id="p15093131344"><a name="p15093131344"></a><a name="p15093131344"></a>name</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.5.1.2 "><p id="p16509213744"><a name="p16509213744"></a><a name="p16509213744"></a>AnimationEventName</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.199999999999999%" headers="mcps1.1.5.1.3 "><p id="p195097138419"><a name="p195097138419"></a><a name="p195097138419"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.23%" headers="mcps1.1.5.1.4 "><p id="p1197421614715"><a name="p1197421614715"></a><a name="p1197421614715"></a>Animation event type.</p>
-    <p id="p1851019131541"><a name="p1851019131541"></a><a name="p1851019131541"></a></p>
-    </td>
-    </tr>
-    <tr id="row916615517519"><td class="cellrowborder" valign="top" width="15.540000000000001%" headers="mcps1.1.5.1.1 "><p id="p141663558519"><a name="p141663558519"></a><a name="p141663558519"></a>args</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.5.1.2 "><p id="p1316620558514"><a name="p1316620558514"></a><a name="p1316620558514"></a>any</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.199999999999999%" headers="mcps1.1.5.1.3 "><p id="p21665551252"><a name="p21665551252"></a><a name="p21665551252"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.23%" headers="mcps1.1.5.1.4 "><p id="p216619557512"><a name="p216619557512"></a><a name="p216619557512"></a>Custom callback parameters.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    private triggerCallBack: any = function(item) {
-        console.log("trigger loopComplete, name:" + item.name)
-    }
+## AnimationItem.removeEventListener
+
+removeEventListener&lt;T = any&gt;(name: AnimationEventName, callback?: AnimationEventCallback&lt;T&gt;): void
+
+Removes an event listener.
+
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | name | AnimationEventName | Yes | Animation&nbsp;event&nbsp;type.&nbsp;The&nbsp;available&nbsp;options&nbsp;are&nbsp;as&nbsp;follows:<br/>'enterFrame',&nbsp;'loopComplete',&nbsp;'complete',&nbsp;'segmentStart',&nbsp;'destroy',&nbsp;'config_ready',&nbsp;'data_ready',&nbsp;'DOMLoaded',&nbsp;'error',&nbsp;'data_failed',&nbsp;'loaded_images' | 
+  | callback | AnimationEventCallback&lt;T&gt; | Yes | Custom&nbsp;callback.&nbsp;By&nbsp;default,&nbsp;the&nbsp;value&nbsp;is&nbsp;null,&nbsp;meaning&nbsp;that&nbsp;all&nbsp;callbacks&nbsp;of&nbsp;the&nbsp;event&nbsp;will&nbsp;be&nbsp;removed. | 
+
+- Example
     
-    this.animateItem.addEventListener('loopComplete', this.triggerCallBack)
-    this.animateItem.triggerEvent('loopComplete', this.animateItem)
-    this.animateItem.removeEventListener('loopComplete', this.triggerCallBack)
-    ```
+  ```
+  this.animateItem.removeEventListener('loopComplete', this.animateName)
+  ```
+
+
+## AnimationItem.triggerEvent
 
+triggerEvent&lt;T = any&gt;(name: AnimationEventName, args: T): void
 
+Directly triggers all configured callbacks of a specified event.
+
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | name | AnimationEventName | Yes | Animation&nbsp;event&nbsp;type. | 
+  | args | any | Yes | Custom&nbsp;callback&nbsp;parameters. | 
+
+- Example
+    
+  ```
+  private triggerCallBack: any = function(item) {
+      console.log("trigger loopComplete, name:" + item.name)
+  }
+  
+  this.animateItem.addEventListener('loopComplete', this.triggerCallBack)
+  this.animateItem.triggerEvent('loopComplete', this.animateItem)
+  this.animateItem.removeEventListener('loopComplete', this.triggerCallBack)
+  ```
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
index d86cfb307868e8b4d2f0bf4cd4aa29891df1f7bd..1bf9a31ed4887b3d54e583d42691079277531839 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
@@ -1,958 +1,453 @@
-# Path2D<a name="EN-US_TOPIC_0000001237355081"></a>
+# Path2D
 
->![](../../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.
 
-**Path2D**  allows you to describe a path through an existing path. This path can be drawn through the  **stroke**  API of  **Canvas**.
+> ![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.
 
-## addPath<a name="section1271914475715"></a>
 
-addPath\(path: Object\): void
+**Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**.
+
+
+## addPath
+
+addPath(path: Object): void
 
 Adds a path to this path.
 
--   Parameters
-
-    <a name="table1948454813819"></a>
-    <table><thead align="left"><tr id="row17484114816383"><th class="cellrowborder" valign="top" width="18.55185518551855%" id="mcps1.1.6.1.1"><p id="p1348494853817"><a name="p1348494853817"></a><a name="p1348494853817"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="21.922192219221923%" id="mcps1.1.6.1.2"><p id="p1148414873815"><a name="p1148414873815"></a><a name="p1148414873815"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.001000100010002%" id="mcps1.1.6.1.3"><p id="p1686893173019"><a name="p1686893173019"></a><a name="p1686893173019"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.26122612261226%" id="mcps1.1.6.1.4"><p id="p57637369302"><a name="p57637369302"></a><a name="p57637369302"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="37.263726372637265%" id="mcps1.1.6.1.5"><p id="p34841948133816"><a name="p34841948133816"></a><a name="p34841948133816"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1148424813816"><td class="cellrowborder" valign="top" width="18.55185518551855%" headers="mcps1.1.6.1.1 "><p id="p64848482383"><a name="p64848482383"></a><a name="p64848482383"></a>path</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.922192219221923%" headers="mcps1.1.6.1.2 "><p id="p9484194817384"><a name="p9484194817384"></a><a name="p9484194817384"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.001000100010002%" headers="mcps1.1.6.1.3 "><p id="p178699310307"><a name="p178699310307"></a><a name="p178699310307"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.26122612261226%" headers="mcps1.1.6.1.4 "><p id="p1776323612308"><a name="p1776323612308"></a><a name="p1776323612308"></a>null</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="37.263726372637265%" headers="mcps1.1.6.1.5 "><p id="p9484144883813"><a name="p9484144883813"></a><a name="p9484144883813"></a>Path to be added to this path.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct AddPath {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-      private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z")
-      private path2Db: Path2D = new Path2D()
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | path | Object | Yes | null | Path&nbsp;to&nbsp;be&nbsp;added&nbsp;to&nbsp;this&nbsp;path. | 
+
+- Example
     
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.path2Db.addPath(this.path2Da)
-              this.context.stroke(this.path2Db)
-            })
-        }
-        .width('100%')
-        .height('100%')
+  ```
+  @Entry
+  @Component
+  struct AddPath {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  
+    private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z")
+    private path2Db: Path2D = new Path2D()
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.path2Db.addPath(this.path2Da)
+            this.context.stroke(this.path2Db)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001192595216.png)
+  ![en-us_image_0000001211898520](figures/en-us_image_0000001211898520.png)
 
 
-## closePath<a name="section1968819330812"></a>
+## closePath
 
-closePath\(\): void
+closePath(): void
 
-Moves the current point of the path back to the start point of the path, and draws a straight line between the current point and the start point. If the shape is closed or has only one point, this method does not perform any action.
+Moves the current point of the path back to the start point of the path, and draws a straight line between the current point and the start point. If the shape has already been closed or has only one point, this method does nothing.
 
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct ClosePath {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private path2Db: Path2D = new Path2D()
+- Example
     
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.path2Db.moveTo(200, 100)
-              this.path2Db.lineTo(300, 100)
-              this.path2Db.lineTo(200, 200)
-              this.path2Db.closePath()
-              this.context.stroke(this.path2Db)
-            })
-        }
-        .width('100%')
-        .height('100%')
+  ```
+  @Entry
+  @Component
+  struct ClosePath {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private path2Db: Path2D = new Path2D()
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.path2Db.moveTo(200, 100)
+            this.path2Db.lineTo(300, 100)
+            this.path2Db.lineTo(200, 200)
+            this.path2Db.closePath()
+            this.context.stroke(this.path2Db)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/unnaming-(4).png)
+  ![en-us_image_0000001212218482](figures/en-us_image_0000001212218482.png)
 
 
-## moveTo<a name="section583345918819"></a>
+## moveTo
 
-moveTo\(x: number, y: number\): void
+moveTo(x: number, y: number): void
 
 Moves the current coordinate point of the path to the target point, without drawing a line during the movement.
 
--   Parameters
-
-    <a name="table78491916124512"></a>
-    <table><thead align="left"><tr id="row14850181613456"><th class="cellrowborder" valign="top" width="18.55185518551855%" id="mcps1.1.6.1.1"><p id="p11850191612454"><a name="p11850191612454"></a><a name="p11850191612454"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="15.74157415741574%" id="mcps1.1.6.1.2"><p id="p9850416144514"><a name="p9850416144514"></a><a name="p9850416144514"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.96149614961496%" id="mcps1.1.6.1.3"><p id="p883212733119"><a name="p883212733119"></a><a name="p883212733119"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.481348134813482%" id="mcps1.1.6.1.4"><p id="p0316101217310"><a name="p0316101217310"></a><a name="p0316101217310"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="37.263726372637265%" id="mcps1.1.6.1.5"><p id="p1850816154519"><a name="p1850816154519"></a><a name="p1850816154519"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6850181612455"><td class="cellrowborder" valign="top" width="18.55185518551855%" headers="mcps1.1.6.1.1 "><p id="p17850161612455"><a name="p17850161612455"></a><a name="p17850161612455"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.74157415741574%" headers="mcps1.1.6.1.2 "><p id="p118501716164516"><a name="p118501716164516"></a><a name="p118501716164516"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.96149614961496%" headers="mcps1.1.6.1.3 "><p id="p2083318743114"><a name="p2083318743114"></a><a name="p2083318743114"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.481348134813482%" headers="mcps1.1.6.1.4 "><p id="p031611121313"><a name="p031611121313"></a><a name="p031611121313"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="37.263726372637265%" headers="mcps1.1.6.1.5 "><p id="p3850181634517"><a name="p3850181634517"></a><a name="p3850181634517"></a>X-coordinate of the target point.</p>
-    </td>
-    </tr>
-    <tr id="row12850181618452"><td class="cellrowborder" valign="top" width="18.55185518551855%" headers="mcps1.1.6.1.1 "><p id="p1185081616453"><a name="p1185081616453"></a><a name="p1185081616453"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.74157415741574%" headers="mcps1.1.6.1.2 "><p id="p98506164455"><a name="p98506164455"></a><a name="p98506164455"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.96149614961496%" headers="mcps1.1.6.1.3 "><p id="p6833107113114"><a name="p6833107113114"></a><a name="p6833107113114"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.481348134813482%" headers="mcps1.1.6.1.4 "><p id="p63161312103113"><a name="p63161312103113"></a><a name="p63161312103113"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="37.263726372637265%" headers="mcps1.1.6.1.5 "><p id="p138501116104518"><a name="p138501116104518"></a><a name="p138501116104518"></a>Y-coordinate of the target point.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct MoveTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private path2Db: Path2D = new Path2D()
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;target&nbsp;point. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;target&nbsp;point. | 
+
+- Example
     
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.path2Db.moveTo(50, 100)
-              this.path2Db.lineTo(250, 100)
-              this.path2Db.lineTo(150, 200)
-              this.path2Db.closePath()
-              this.context.stroke(this.path2Db)
-            })
-        }
-        .width('100%')
-        .height('100%')
+  ```
+  @Entry
+  @Component
+  struct MoveTo {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private path2Db: Path2D = new Path2D()
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.path2Db.moveTo(50, 100)
+            this.path2Db.lineTo(250, 100)
+            this.path2Db.lineTo(150, 200)
+            this.path2Db.closePath()
+            this.context.stroke(this.path2Db)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001237475113.png)
+  ![en-us_image_0000001257138389](figures/en-us_image_0000001257138389.png)
 
 
-## lineTo<a name="section11118291297"></a>
+## lineTo
 
-lineTo\(x: number, y: number\): void
+lineTo(x: number, y: number): void
 
 Draws a straight line from the current point to the target point.
 
--   Parameters
-
-    <a name="table174093224819"></a>
-    <table><thead align="left"><tr id="row187401432134818"><th class="cellrowborder" valign="top" width="18.55185518551855%" id="mcps1.1.6.1.1"><p id="p374173224817"><a name="p374173224817"></a><a name="p374173224817"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.471647164716472%" id="mcps1.1.6.1.2"><p id="p2741183219482"><a name="p2741183219482"></a><a name="p2741183219482"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.771277127712771%" id="mcps1.1.6.1.3"><p id="p46781745173116"><a name="p46781745173116"></a><a name="p46781745173116"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.941494149414941%" id="mcps1.1.6.1.4"><p id="p15973165013111"><a name="p15973165013111"></a><a name="p15973165013111"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="37.263726372637265%" id="mcps1.1.6.1.5"><p id="p1774112327488"><a name="p1774112327488"></a><a name="p1774112327488"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1741143284810"><td class="cellrowborder" valign="top" width="18.55185518551855%" headers="mcps1.1.6.1.1 "><p id="p19741103254812"><a name="p19741103254812"></a><a name="p19741103254812"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.471647164716472%" headers="mcps1.1.6.1.2 "><p id="p57411832154812"><a name="p57411832154812"></a><a name="p57411832154812"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.771277127712771%" headers="mcps1.1.6.1.3 "><p id="p12678114510313"><a name="p12678114510313"></a><a name="p12678114510313"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.941494149414941%" headers="mcps1.1.6.1.4 "><p id="p997325033116"><a name="p997325033116"></a><a name="p997325033116"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="37.263726372637265%" headers="mcps1.1.6.1.5 "><p id="p1474119322489"><a name="p1474119322489"></a><a name="p1474119322489"></a>X-coordinate of the target point.</p>
-    </td>
-    </tr>
-    <tr id="row97411532144814"><td class="cellrowborder" valign="top" width="18.55185518551855%" headers="mcps1.1.6.1.1 "><p id="p14741193212488"><a name="p14741193212488"></a><a name="p14741193212488"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.471647164716472%" headers="mcps1.1.6.1.2 "><p id="p127411332174814"><a name="p127411332174814"></a><a name="p127411332174814"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.771277127712771%" headers="mcps1.1.6.1.3 "><p id="p667811458313"><a name="p667811458313"></a><a name="p667811458313"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.941494149414941%" headers="mcps1.1.6.1.4 "><p id="p597325073116"><a name="p597325073116"></a><a name="p597325073116"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="37.263726372637265%" headers="mcps1.1.6.1.5 "><p id="p137412326481"><a name="p137412326481"></a><a name="p137412326481"></a>Y-coordinate of the target point.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct LineTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private path2Db: Path2D = new Path2D()
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;target&nbsp;point. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;target&nbsp;point. | 
+
+- Example
     
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.path2Db.moveTo(100, 100)
-              this.path2Db.lineTo(100, 200)
-              this.path2Db.lineTo(200, 200)
-              this.path2Db.lineTo(200, 100)
-              this.path2Db.closePath()
-              this.context.stroke(this.path2Db)
-            })
-        }
-        .width('100%')
-        .height('100%')
+  ```
+  @Entry
+  @Component
+  struct LineTo {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private path2Db: Path2D = new Path2D()
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.path2Db.moveTo(100, 100)
+            this.path2Db.lineTo(100, 200)
+            this.path2Db.lineTo(200, 200)
+            this.path2Db.lineTo(200, 100)
+            this.path2Db.closePath()
+            this.context.stroke(this.path2Db)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/unnaming-(3).png)
+  ![en-us_image_0000001256858435](figures/en-us_image_0000001256858435.png)
 
 
-## bezierCurveTo<a name="section5704481695"></a>
+## bezierCurveTo
 
-bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number\): void
+bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void
 
 Draws a cubic bezier curve on the canvas.
 
--   Parameters
-
-    <a name="table5241185218495"></a>
-    <table><thead align="left"><tr id="row1224175215491"><th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.1"><p id="p192411529491"><a name="p192411529491"></a><a name="p192411529491"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="15.989999999999998%" id="mcps1.1.6.1.2"><p id="p4241052154910"><a name="p4241052154910"></a><a name="p4241052154910"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.23%" id="mcps1.1.6.1.3"><p id="p452542112326"><a name="p452542112326"></a><a name="p452542112326"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.76%" id="mcps1.1.6.1.4"><p id="p0586326143220"><a name="p0586326143220"></a><a name="p0586326143220"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p5241052114911"><a name="p5241052114911"></a><a name="p5241052114911"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row624113524497"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p6241135213493"><a name="p6241135213493"></a><a name="p6241135213493"></a>cp1x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.989999999999998%" headers="mcps1.1.6.1.2 "><p id="p22422529499"><a name="p22422529499"></a><a name="p22422529499"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.23%" headers="mcps1.1.6.1.3 "><p id="p1452592123212"><a name="p1452592123212"></a><a name="p1452592123212"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.76%" headers="mcps1.1.6.1.4 "><p id="p1058722611324"><a name="p1058722611324"></a><a name="p1058722611324"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p172421052114919"><a name="p172421052114919"></a><a name="p172421052114919"></a>X-coordinate of the first parameter of the bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row924225212492"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p4242115213499"><a name="p4242115213499"></a><a name="p4242115213499"></a>cp1y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.989999999999998%" headers="mcps1.1.6.1.2 "><p id="p7242195234910"><a name="p7242195234910"></a><a name="p7242195234910"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.23%" headers="mcps1.1.6.1.3 "><p id="p17525621143214"><a name="p17525621143214"></a><a name="p17525621143214"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.76%" headers="mcps1.1.6.1.4 "><p id="p14587426183211"><a name="p14587426183211"></a><a name="p14587426183211"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p524211522496"><a name="p524211522496"></a><a name="p524211522496"></a>Y-coordinate of the first parameter of the bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row1924210522498"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p624214522499"><a name="p624214522499"></a><a name="p624214522499"></a>cp2x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.989999999999998%" headers="mcps1.1.6.1.2 "><p id="p15242175214914"><a name="p15242175214914"></a><a name="p15242175214914"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.23%" headers="mcps1.1.6.1.3 "><p id="p185251621163216"><a name="p185251621163216"></a><a name="p185251621163216"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.76%" headers="mcps1.1.6.1.4 "><p id="p75871926133217"><a name="p75871926133217"></a><a name="p75871926133217"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p524275215490"><a name="p524275215490"></a><a name="p524275215490"></a>X-coordinate of the second parameter of the bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row1024285214912"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p3242175211491"><a name="p3242175211491"></a><a name="p3242175211491"></a>cp2y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.989999999999998%" headers="mcps1.1.6.1.2 "><p id="p624205215497"><a name="p624205215497"></a><a name="p624205215497"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.23%" headers="mcps1.1.6.1.3 "><p id="p9525182173216"><a name="p9525182173216"></a><a name="p9525182173216"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.76%" headers="mcps1.1.6.1.4 "><p id="p5587162653219"><a name="p5587162653219"></a><a name="p5587162653219"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p124214527499"><a name="p124214527499"></a><a name="p124214527499"></a>Y-coordinate of the second parameter of the bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row11242175210494"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p8242185217497"><a name="p8242185217497"></a><a name="p8242185217497"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.989999999999998%" headers="mcps1.1.6.1.2 "><p id="p11242125219493"><a name="p11242125219493"></a><a name="p11242125219493"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.23%" headers="mcps1.1.6.1.3 "><p id="p352542118324"><a name="p352542118324"></a><a name="p352542118324"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.76%" headers="mcps1.1.6.1.4 "><p id="p3587112653218"><a name="p3587112653218"></a><a name="p3587112653218"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p122428527495"><a name="p122428527495"></a><a name="p122428527495"></a>X-coordinate of the end point on the bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row02433524498"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p924345217491"><a name="p924345217491"></a><a name="p924345217491"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.989999999999998%" headers="mcps1.1.6.1.2 "><p id="p1243135224912"><a name="p1243135224912"></a><a name="p1243135224912"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.23%" headers="mcps1.1.6.1.3 "><p id="p14525132112322"><a name="p14525132112322"></a><a name="p14525132112322"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.76%" headers="mcps1.1.6.1.4 "><p id="p05873264327"><a name="p05873264327"></a><a name="p05873264327"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p3243135254915"><a name="p3243135254915"></a><a name="p3243135254915"></a>Y-coordinate of the end point on the bezier curve.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct BezierCurveTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private path2Db: Path2D = new Path2D()
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | cp1x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;first&nbsp;parameter&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve. | 
+  | cp1y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;first&nbsp;parameter&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve. | 
+  | cp2x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;second&nbsp;parameter&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve. | 
+  | cp2y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;second&nbsp;parameter&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve. | 
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;on&nbsp;the&nbsp;bezier&nbsp;curve. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;on&nbsp;the&nbsp;bezier&nbsp;curve. | 
+
+- Example
     
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.path2Db.moveTo(10, 10)
-              this.path2Db.bezierCurveTo(20, 100, 200, 100, 200, 20);this.context.stroke(this.path2Db)
-            })
-        }
-        .width('100%')
-        .height('100%')
+  ```
+  @Entry
+  @Component
+  struct BezierCurveTo {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private path2Db: Path2D = new Path2D()
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.path2Db.moveTo(10, 10)
+            this.path2Db.bezierCurveTo(20, 100, 200, 100, 200, 20);this.context.stroke(this.path2Db)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001192915158.png)
+  ![en-us_image_0000001257058445](figures/en-us_image_0000001257058445.png)
 
 
-## quadraticCurveTo<a name="section1031101112107"></a>
+## quadraticCurveTo
 
-quadraticCurveTo\(cpx: number, cpy: number, x: number ,y: number\): void
+quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
 
 Draws a quadratic curve on the canvas.
 
--   Parameters
-
-    <a name="table815416567500"></a>
-    <table><thead align="left"><tr id="row915445619508"><th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.1"><p id="p1815412561507"><a name="p1815412561507"></a><a name="p1815412561507"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.2"><p id="p3154195613509"><a name="p3154195613509"></a><a name="p3154195613509"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="7.21%" id="mcps1.1.6.1.3"><p id="p1692151183314"><a name="p1692151183314"></a><a name="p1692151183314"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="19.66%" id="mcps1.1.6.1.4"><p id="p22841853333"><a name="p22841853333"></a><a name="p22841853333"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p6154456135016"><a name="p6154456135016"></a><a name="p6154456135016"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row51543567505"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p111544569503"><a name="p111544569503"></a><a name="p111544569503"></a>cpx</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.2 "><p id="p1315419563508"><a name="p1315419563508"></a><a name="p1315419563508"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.21%" headers="mcps1.1.6.1.3 "><p id="p109319117331"><a name="p109319117331"></a><a name="p109319117331"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.66%" headers="mcps1.1.6.1.4 "><p id="p8284185163318"><a name="p8284185163318"></a><a name="p8284185163318"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p10154105675010"><a name="p10154105675010"></a><a name="p10154105675010"></a>X-coordinate of the bezier curve parameter.</p>
-    </td>
-    </tr>
-    <tr id="row4154175618504"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p1615410566508"><a name="p1615410566508"></a><a name="p1615410566508"></a>cpy</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.2 "><p id="p31540568507"><a name="p31540568507"></a><a name="p31540568507"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.21%" headers="mcps1.1.6.1.3 "><p id="p593111103311"><a name="p593111103311"></a><a name="p593111103311"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.66%" headers="mcps1.1.6.1.4 "><p id="p22841516333"><a name="p22841516333"></a><a name="p22841516333"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p8154165685013"><a name="p8154165685013"></a><a name="p8154165685013"></a>Y-coordinate of the bezier curve parameter.</p>
-    </td>
-    </tr>
-    <tr id="row11548564504"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p41551856175018"><a name="p41551856175018"></a><a name="p41551856175018"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.2 "><p id="p1515575685013"><a name="p1515575685013"></a><a name="p1515575685013"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.21%" headers="mcps1.1.6.1.3 "><p id="p109319117335"><a name="p109319117335"></a><a name="p109319117335"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.66%" headers="mcps1.1.6.1.4 "><p id="p328475123317"><a name="p328475123317"></a><a name="p328475123317"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p9155115610507"><a name="p9155115610507"></a><a name="p9155115610507"></a>X-coordinate of the end point on the bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row1115555665015"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p18155105685012"><a name="p18155105685012"></a><a name="p18155105685012"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.2 "><p id="p20155856135019"><a name="p20155856135019"></a><a name="p20155856135019"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.21%" headers="mcps1.1.6.1.3 "><p id="p99313110338"><a name="p99313110338"></a><a name="p99313110338"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.66%" headers="mcps1.1.6.1.4 "><p id="p1284125103320"><a name="p1284125103320"></a><a name="p1284125103320"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p5155156125013"><a name="p5155156125013"></a><a name="p5155156125013"></a>Y-coordinate of the end point on the bezier curve.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct QuadraticCurveTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private path2Db: Path2D = new Path2D()
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | cpx | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve&nbsp;parameter. | 
+  | cpy | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve&nbsp;parameter. | 
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;on&nbsp;the&nbsp;bezier&nbsp;curve. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;on&nbsp;the&nbsp;bezier&nbsp;curve. | 
+
+- Example
     
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.path2Db.moveTo(10, 10)
-              this.path2Db.quadraticCurveTo(100, 100, 200, 20)
-              this.context.stroke(this.path2Db)
-          })
-        }
-        .width('100%')
-        .height('100%')
+  ```
+  @Entry
+  @Component
+  struct QuadraticCurveTo {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private path2Db: Path2D = new Path2D()
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.path2Db.moveTo(10, 10)
+            this.path2Db.quadraticCurveTo(100, 100, 200, 20)
+            this.context.stroke(this.path2Db)
+        })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001237555151.png)
+  ![en-us_image_0000001212058512](figures/en-us_image_0000001212058512.png)
 
 
-## arc<a name="section17961639151011"></a>
+## arc
 
-arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: number\): void
+arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: number): void
 
 Draws an arc on the canvas.
 
--   Parameters
-
-    <a name="table1050139185219"></a>
-    <table><thead align="left"><tr id="row250129165211"><th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.1"><p id="p185016935213"><a name="p185016935213"></a><a name="p185016935213"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.48%" id="mcps1.1.6.1.2"><p id="p250111935212"><a name="p250111935212"></a><a name="p250111935212"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.05%" id="mcps1.1.6.1.3"><p id="p16774837173311"><a name="p16774837173311"></a><a name="p16774837173311"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.45%" id="mcps1.1.6.1.4"><p id="p17003422334"><a name="p17003422334"></a><a name="p17003422334"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p7501997528"><a name="p7501997528"></a><a name="p7501997528"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row850189195216"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p175011099524"><a name="p175011099524"></a><a name="p175011099524"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.48%" headers="mcps1.1.6.1.2 "><p id="p14501390521"><a name="p14501390521"></a><a name="p14501390521"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.05%" headers="mcps1.1.6.1.3 "><p id="p1977453710330"><a name="p1977453710330"></a><a name="p1977453710330"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.45%" headers="mcps1.1.6.1.4 "><p id="p27004428338"><a name="p27004428338"></a><a name="p27004428338"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p85027935216"><a name="p85027935216"></a><a name="p85027935216"></a>X-coordinate of the center point of the arc.</p>
-    </td>
-    </tr>
-    <tr id="row350216985214"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p55026925210"><a name="p55026925210"></a><a name="p55026925210"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.48%" headers="mcps1.1.6.1.2 "><p id="p75021291525"><a name="p75021291525"></a><a name="p75021291525"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.05%" headers="mcps1.1.6.1.3 "><p id="p6774173716338"><a name="p6774173716338"></a><a name="p6774173716338"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.45%" headers="mcps1.1.6.1.4 "><p id="p16700164216336"><a name="p16700164216336"></a><a name="p16700164216336"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p18502193521"><a name="p18502193521"></a><a name="p18502193521"></a>Y-coordinate of the center point of the arc.</p>
-    </td>
-    </tr>
-    <tr id="row2502169185215"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p150211925210"><a name="p150211925210"></a><a name="p150211925210"></a>radius</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.48%" headers="mcps1.1.6.1.2 "><p id="p550211913528"><a name="p550211913528"></a><a name="p550211913528"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.05%" headers="mcps1.1.6.1.3 "><p id="p3774133713319"><a name="p3774133713319"></a><a name="p3774133713319"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.45%" headers="mcps1.1.6.1.4 "><p id="p1870004220332"><a name="p1870004220332"></a><a name="p1870004220332"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p13502169135212"><a name="p13502169135212"></a><a name="p13502169135212"></a>Radius of the arc.</p>
-    </td>
-    </tr>
-    <tr id="row550212975211"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p1350212985217"><a name="p1350212985217"></a><a name="p1350212985217"></a>startAngle</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.48%" headers="mcps1.1.6.1.2 "><p id="p85029985211"><a name="p85029985211"></a><a name="p85029985211"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.05%" headers="mcps1.1.6.1.3 "><p id="p277473783315"><a name="p277473783315"></a><a name="p277473783315"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.45%" headers="mcps1.1.6.1.4 "><p id="p1670020427339"><a name="p1670020427339"></a><a name="p1670020427339"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p165021920526"><a name="p165021920526"></a><a name="p165021920526"></a>Start radian of the arc.</p>
-    </td>
-    </tr>
-    <tr id="row25022912524"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p105021912522"><a name="p105021912522"></a><a name="p105021912522"></a>endAngle</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.48%" headers="mcps1.1.6.1.2 "><p id="p150219925218"><a name="p150219925218"></a><a name="p150219925218"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.05%" headers="mcps1.1.6.1.3 "><p id="p4774537113317"><a name="p4774537113317"></a><a name="p4774537113317"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.45%" headers="mcps1.1.6.1.4 "><p id="p1570094216339"><a name="p1570094216339"></a><a name="p1570094216339"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p550213945213"><a name="p550213945213"></a><a name="p550213945213"></a>End radian of the arc.</p>
-    </td>
-    </tr>
-    <tr id="row250218913526"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p850216913520"><a name="p850216913520"></a><a name="p850216913520"></a>anticlockwise</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.48%" headers="mcps1.1.6.1.2 "><p id="p1850219914524"><a name="p1850219914524"></a><a name="p1850219914524"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.05%" headers="mcps1.1.6.1.3 "><p id="p1377411371333"><a name="p1377411371333"></a><a name="p1377411371333"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.45%" headers="mcps1.1.6.1.4 "><p id="p9700154210333"><a name="p9700154210333"></a><a name="p9700154210333"></a>false</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p105031691522"><a name="p105031691522"></a><a name="p105031691522"></a>Whether to draw the arc counterclockwise.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct Arc {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private path2Db: Path2D = new Path2D()
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;point&nbsp;of&nbsp;the&nbsp;arc. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;point&nbsp;of&nbsp;the&nbsp;arc. | 
+  | radius | number | Yes | 0 | Radius&nbsp;of&nbsp;the&nbsp;arc. | 
+  | startAngle | number | Yes | 0 | Start&nbsp;radian&nbsp;of&nbsp;the&nbsp;arc. | 
+  | endAngle | number | Yes | 0 | End&nbsp;radian&nbsp;of&nbsp;the&nbsp;arc. | 
+  | anticlockwise | boolean | No | false | Whether&nbsp;to&nbsp;draw&nbsp;the&nbsp;arc&nbsp;counterclockwise. | 
+
+- Example
     
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.path2Db.arc(100, 75, 50, 0, 6.28);this.context.stroke(this.path2Db)
-            })
-        }
-        .width('100%')
-        .height('100%')
+  ```
+  @Entry
+  @Component
+  struct Arc {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private path2Db: Path2D = new Path2D()
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.path2Db.arc(100, 75, 50, 0, 6.28);this.context.stroke(this.path2Db)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001192595214.png)
+  ![en-us_image_0000001212378446](figures/en-us_image_0000001212378446.png)
 
 
-## arcTo<a name="section172971709119"></a>
+## arcTo
 
-arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void
+arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
 
 Draws an arc based on the radius and points on the arc.
 
--   Parameters
-
-    <a name="table584265819528"></a>
-    <table><thead align="left"><tr id="row198421584521"><th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.1"><p id="p12842115815217"><a name="p12842115815217"></a><a name="p12842115815217"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.96%" id="mcps1.1.6.1.2"><p id="p38431558175217"><a name="p38431558175217"></a><a name="p38431558175217"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.96%" id="mcps1.1.6.1.3"><p id="p53815225340"><a name="p53815225340"></a><a name="p53815225340"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.5%" id="mcps1.1.6.1.4"><p id="p15724182563420"><a name="p15724182563420"></a><a name="p15724182563420"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="31.069999999999997%" id="mcps1.1.6.1.5"><p id="p8843195812520"><a name="p8843195812520"></a><a name="p8843195812520"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row148431358115213"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p384345875215"><a name="p384345875215"></a><a name="p384345875215"></a>x1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.2 "><p id="p984325805212"><a name="p984325805212"></a><a name="p984325805212"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.96%" headers="mcps1.1.6.1.3 "><p id="p1238622163419"><a name="p1238622163419"></a><a name="p1238622163419"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.5%" headers="mcps1.1.6.1.4 "><p id="p272482517343"><a name="p272482517343"></a><a name="p272482517343"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="31.069999999999997%" headers="mcps1.1.6.1.5 "><p id="p178438582527"><a name="p178438582527"></a><a name="p178438582527"></a>X-coordinate of the first point on the arc.</p>
-    </td>
-    </tr>
-    <tr id="row1984385813525"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p16843958185217"><a name="p16843958185217"></a><a name="p16843958185217"></a>y1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.2 "><p id="p168431058165216"><a name="p168431058165216"></a><a name="p168431058165216"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.96%" headers="mcps1.1.6.1.3 "><p id="p13862233412"><a name="p13862233412"></a><a name="p13862233412"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.5%" headers="mcps1.1.6.1.4 "><p id="p167241725143419"><a name="p167241725143419"></a><a name="p167241725143419"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="31.069999999999997%" headers="mcps1.1.6.1.5 "><p id="p12843205813522"><a name="p12843205813522"></a><a name="p12843205813522"></a>Y-coordinate of the first point on the arc.</p>
-    </td>
-    </tr>
-    <tr id="row88431558115211"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p88431058105211"><a name="p88431058105211"></a><a name="p88431058105211"></a>x2</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.2 "><p id="p1984315875217"><a name="p1984315875217"></a><a name="p1984315875217"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.96%" headers="mcps1.1.6.1.3 "><p id="p1538132215346"><a name="p1538132215346"></a><a name="p1538132215346"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.5%" headers="mcps1.1.6.1.4 "><p id="p2724172593420"><a name="p2724172593420"></a><a name="p2724172593420"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="31.069999999999997%" headers="mcps1.1.6.1.5 "><p id="p158431558185211"><a name="p158431558185211"></a><a name="p158431558185211"></a>X-coordinate of the second point on the arc.</p>
-    </td>
-    </tr>
-    <tr id="row198431858125217"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p1484420584525"><a name="p1484420584525"></a><a name="p1484420584525"></a>y2</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.2 "><p id="p084495885213"><a name="p084495885213"></a><a name="p084495885213"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.96%" headers="mcps1.1.6.1.3 "><p id="p1638182217349"><a name="p1638182217349"></a><a name="p1638182217349"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.5%" headers="mcps1.1.6.1.4 "><p id="p10724122553420"><a name="p10724122553420"></a><a name="p10724122553420"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="31.069999999999997%" headers="mcps1.1.6.1.5 "><p id="p1684418583522"><a name="p1684418583522"></a><a name="p1684418583522"></a>Y-coordinate of the second point on the arc.</p>
-    </td>
-    </tr>
-    <tr id="row11844358155211"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p8844155865219"><a name="p8844155865219"></a><a name="p8844155865219"></a>radius</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.2 "><p id="p1984410581525"><a name="p1984410581525"></a><a name="p1984410581525"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.96%" headers="mcps1.1.6.1.3 "><p id="p1238132211346"><a name="p1238132211346"></a><a name="p1238132211346"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.5%" headers="mcps1.1.6.1.4 "><p id="p872418257346"><a name="p872418257346"></a><a name="p872418257346"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="31.069999999999997%" headers="mcps1.1.6.1.5 "><p id="p17844155815220"><a name="p17844155815220"></a><a name="p17844155815220"></a>Radius of the arc.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct ArcTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private path2Db: Path2D = new Path2D()
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x1 | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;first&nbsp;point&nbsp;on&nbsp;the&nbsp;arc. | 
+  | y1 | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;first&nbsp;point&nbsp;on&nbsp;the&nbsp;arc. | 
+  | x2 | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;second&nbsp;point&nbsp;on&nbsp;the&nbsp;arc. | 
+  | y2 | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;second&nbsp;point&nbsp;on&nbsp;the&nbsp;arc. | 
+  | radius | number | Yes | 0 | Radius&nbsp;of&nbsp;the&nbsp;arc. | 
+
+- Example
     
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.path2Db.arcTo(150, 20, 150, 70, 50)
-              this.context.stroke(this.path2Db)
-            })
-        }
-        .width('100%')
-        .height('100%')
+  ```
+  @Entry
+  @Component
+  struct ArcTo {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private path2Db: Path2D = new Path2D()
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.path2Db.arcTo(150, 20, 150, 70, 50)
+            this.context.stroke(this.path2Db)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001192755172.png)
+  ![en-us_image_0000001212058510](figures/en-us_image_0000001212058510.png)
 
 
-## ellipse<a name="section1144192321119"></a>
+## ellipse
 
-ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: number\): void
+ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: number): void
 
 Draws an ellipse in the specified rectangular region.
 
--   Parameters
-
-    <a name="table51461805541"></a>
-    <table><thead align="left"><tr id="row181461109541"><th class="cellrowborder" valign="top" width="22.759999999999998%" id="mcps1.1.6.1.1"><p id="p014716035415"><a name="p014716035415"></a><a name="p014716035415"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.360000000000001%" id="mcps1.1.6.1.2"><p id="p171472055413"><a name="p171472055413"></a><a name="p171472055413"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.120000000000001%" id="mcps1.1.6.1.3"><p id="p19211176153517"><a name="p19211176153517"></a><a name="p19211176153517"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.83%" id="mcps1.1.6.1.4"><p id="p1331191912353"><a name="p1331191912353"></a><a name="p1331191912353"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="39.93%" id="mcps1.1.6.1.5"><p id="p1814718035418"><a name="p1814718035418"></a><a name="p1814718035418"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1114714015418"><td class="cellrowborder" valign="top" width="22.759999999999998%" headers="mcps1.1.6.1.1 "><p id="p81478015543"><a name="p81478015543"></a><a name="p81478015543"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.360000000000001%" headers="mcps1.1.6.1.2 "><p id="p71470013548"><a name="p71470013548"></a><a name="p71470013548"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.120000000000001%" headers="mcps1.1.6.1.3 "><p id="p1221110613512"><a name="p1221110613512"></a><a name="p1221110613512"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.83%" headers="mcps1.1.6.1.4 "><p id="p431419173513"><a name="p431419173513"></a><a name="p431419173513"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="39.93%" headers="mcps1.1.6.1.5 "><p id="p714720125410"><a name="p714720125410"></a><a name="p714720125410"></a>X-coordinate of the ellipse center.</p>
-    </td>
-    </tr>
-    <tr id="row1114710018548"><td class="cellrowborder" valign="top" width="22.759999999999998%" headers="mcps1.1.6.1.1 "><p id="p1214718010544"><a name="p1214718010544"></a><a name="p1214718010544"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.360000000000001%" headers="mcps1.1.6.1.2 "><p id="p314760175411"><a name="p314760175411"></a><a name="p314760175411"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.120000000000001%" headers="mcps1.1.6.1.3 "><p id="p1211865356"><a name="p1211865356"></a><a name="p1211865356"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.83%" headers="mcps1.1.6.1.4 "><p id="p113116194359"><a name="p113116194359"></a><a name="p113116194359"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="39.93%" headers="mcps1.1.6.1.5 "><p id="p014730105419"><a name="p014730105419"></a><a name="p014730105419"></a>Y-coordinate of the ellipse center.</p>
-    </td>
-    </tr>
-    <tr id="row2147709540"><td class="cellrowborder" valign="top" width="22.759999999999998%" headers="mcps1.1.6.1.1 "><p id="p201478045416"><a name="p201478045416"></a><a name="p201478045416"></a>radiusX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.360000000000001%" headers="mcps1.1.6.1.2 "><p id="p14147205540"><a name="p14147205540"></a><a name="p14147205540"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.120000000000001%" headers="mcps1.1.6.1.3 "><p id="p192121765354"><a name="p192121765354"></a><a name="p192121765354"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.83%" headers="mcps1.1.6.1.4 "><p id="p163191916356"><a name="p163191916356"></a><a name="p163191916356"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="39.93%" headers="mcps1.1.6.1.5 "><p id="p151475013547"><a name="p151475013547"></a><a name="p151475013547"></a>Ellipse radius on the x-axis.</p>
-    </td>
-    </tr>
-    <tr id="row61474012544"><td class="cellrowborder" valign="top" width="22.759999999999998%" headers="mcps1.1.6.1.1 "><p id="p51477018543"><a name="p51477018543"></a><a name="p51477018543"></a>radiusY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.360000000000001%" headers="mcps1.1.6.1.2 "><p id="p14148150205416"><a name="p14148150205416"></a><a name="p14148150205416"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.120000000000001%" headers="mcps1.1.6.1.3 "><p id="p19212765350"><a name="p19212765350"></a><a name="p19212765350"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.83%" headers="mcps1.1.6.1.4 "><p id="p7311619193518"><a name="p7311619193518"></a><a name="p7311619193518"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="39.93%" headers="mcps1.1.6.1.5 "><p id="p181481705544"><a name="p181481705544"></a><a name="p181481705544"></a>Ellipse radius on the y-axis.</p>
-    </td>
-    </tr>
-    <tr id="row201484005417"><td class="cellrowborder" valign="top" width="22.759999999999998%" headers="mcps1.1.6.1.1 "><p id="p161483075416"><a name="p161483075416"></a><a name="p161483075416"></a>rotation</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.360000000000001%" headers="mcps1.1.6.1.2 "><p id="p1148502548"><a name="p1148502548"></a><a name="p1148502548"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.120000000000001%" headers="mcps1.1.6.1.3 "><p id="p182128612356"><a name="p182128612356"></a><a name="p182128612356"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.83%" headers="mcps1.1.6.1.4 "><p id="p1331161943510"><a name="p1331161943510"></a><a name="p1331161943510"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="39.93%" headers="mcps1.1.6.1.5 "><p id="p514820005414"><a name="p514820005414"></a><a name="p514820005414"></a>Rotation angle of the ellipse, in radians.</p>
-    </td>
-    </tr>
-    <tr id="row181481704549"><td class="cellrowborder" valign="top" width="22.759999999999998%" headers="mcps1.1.6.1.1 "><p id="p1814850165416"><a name="p1814850165416"></a><a name="p1814850165416"></a>startAngle</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.360000000000001%" headers="mcps1.1.6.1.2 "><p id="p1914815025414"><a name="p1914815025414"></a><a name="p1914815025414"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.120000000000001%" headers="mcps1.1.6.1.3 "><p id="p1221211615358"><a name="p1221211615358"></a><a name="p1221211615358"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.83%" headers="mcps1.1.6.1.4 "><p id="p331219183512"><a name="p331219183512"></a><a name="p331219183512"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="39.93%" headers="mcps1.1.6.1.5 "><p id="p51481906547"><a name="p51481906547"></a><a name="p51481906547"></a>Angle of the start point for drawing the ellipse, in radians.</p>
-    </td>
-    </tr>
-    <tr id="row1148150125412"><td class="cellrowborder" valign="top" width="22.759999999999998%" headers="mcps1.1.6.1.1 "><p id="p131483019542"><a name="p131483019542"></a><a name="p131483019542"></a>endAngle</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.360000000000001%" headers="mcps1.1.6.1.2 "><p id="p14148190155418"><a name="p14148190155418"></a><a name="p14148190155418"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.120000000000001%" headers="mcps1.1.6.1.3 "><p id="p14212126173518"><a name="p14212126173518"></a><a name="p14212126173518"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.83%" headers="mcps1.1.6.1.4 "><p id="p83217194351"><a name="p83217194351"></a><a name="p83217194351"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="39.93%" headers="mcps1.1.6.1.5 "><p id="p1114812095411"><a name="p1114812095411"></a><a name="p1114812095411"></a>Angle of the end point for drawing the ellipse, in radians.</p>
-    </td>
-    </tr>
-    <tr id="row4148206542"><td class="cellrowborder" valign="top" width="22.759999999999998%" headers="mcps1.1.6.1.1 "><p id="p1114817035417"><a name="p1114817035417"></a><a name="p1114817035417"></a>anticlockwise</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.360000000000001%" headers="mcps1.1.6.1.2 "><p id="p3148130105411"><a name="p3148130105411"></a><a name="p3148130105411"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.120000000000001%" headers="mcps1.1.6.1.3 "><p id="p17212186193514"><a name="p17212186193514"></a><a name="p17212186193514"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.83%" headers="mcps1.1.6.1.4 "><p id="p1233919123511"><a name="p1233919123511"></a><a name="p1233919123511"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="39.93%" headers="mcps1.1.6.1.5 "><p id="p914910015410"><a name="p914910015410"></a><a name="p914910015410"></a>Whether to draw the ellipse in the counterclockwise direction. The value <strong id="b18230305015"><a name="b18230305015"></a><a name="b18230305015"></a>0</strong> means to draw the ellipse in the clockwise direction, and <strong id="b11243301405"><a name="b11243301405"></a><a name="b11243301405"></a>1</strong> means to draw the ellipse in the counterclockwise direction. This parameter is optional. The default value is <strong id="b15932059101415"><a name="b15932059101415"></a><a name="b15932059101415"></a>0</strong>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct CanvasExample {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private path2Db: Path2D = new Path2D()
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;ellipse&nbsp;center. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;ellipse&nbsp;center. | 
+  | radiusX | number | Yes | 0 | Ellipse&nbsp;radius&nbsp;on&nbsp;the&nbsp;x-axis. | 
+  | radiusY | number | Yes | 0 | Ellipse&nbsp;radius&nbsp;on&nbsp;the&nbsp;y-axis. | 
+  | rotation | number | Yes | 0 | Rotation&nbsp;angle&nbsp;of&nbsp;the&nbsp;ellipse,&nbsp;in&nbsp;radians. | 
+  | startAngle | number | Yes | 0 | Angle&nbsp;of&nbsp;the&nbsp;start&nbsp;point&nbsp;for&nbsp;drawing&nbsp;the&nbsp;ellipse,&nbsp;in&nbsp;radians. | 
+  | endAngle | number | Yes | 0 | Angle&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;for&nbsp;drawing&nbsp;the&nbsp;ellipse,&nbsp;in&nbsp;radians. | 
+  | anticlockwise | number | No | 0 | Whether&nbsp;to&nbsp;draw&nbsp;the&nbsp;ellipse&nbsp;in&nbsp;the&nbsp;counterclockwise&nbsp;direction.&nbsp;The&nbsp;value&nbsp;**0**&nbsp;means&nbsp;to&nbsp;draw&nbsp;the&nbsp;ellipse&nbsp;in&nbsp;the&nbsp;clockwise&nbsp;direction,&nbsp;and&nbsp;**1**&nbsp;means&nbsp;to&nbsp;draw&nbsp;the&nbsp;ellipse&nbsp;in&nbsp;the&nbsp;counterclockwise&nbsp;direction.&nbsp;This&nbsp;parameter&nbsp;is&nbsp;optional.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**0**. | 
+
+- Example
     
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.path2Db.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, true)
-              this.context.stroke(this.path2Db)
-            })
-        }
-        .width('100%')
-        .height('100%')
+  ```
+  @Entry
+  @Component
+  struct CanvasExample {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private path2Db: Path2D = new Path2D()
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.path2Db.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI)
+            this.context.stroke(this.path2Db)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001193075154.png)
+  ![en-us_image_0000001257138391](figures/en-us_image_0000001257138391.png)
 
 
-## rect<a name="section49087439119"></a>
+## rect
 
-rect\(x: number, y: number, width: number, height: number\): void
+rect(x: number, y: number, width: number, height: number): void
 
 Creates a rectangle.
 
--   Parameters
-
-    <a name="table92131548185610"></a>
-    <table><thead align="left"><tr id="row9238348185613"><th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.1"><p id="p723854810561"><a name="p723854810561"></a><a name="p723854810561"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.78%" id="mcps1.1.6.1.2"><p id="p2238144885615"><a name="p2238144885615"></a><a name="p2238144885615"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.750000000000002%" id="mcps1.1.6.1.3"><p id="p19964591352"><a name="p19964591352"></a><a name="p19964591352"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.45%" id="mcps1.1.6.1.4"><p id="p11572146367"><a name="p11572146367"></a><a name="p11572146367"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p223814486561"><a name="p223814486561"></a><a name="p223814486561"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row5238104813569"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p1423864816566"><a name="p1423864816566"></a><a name="p1423864816566"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.78%" headers="mcps1.1.6.1.2 "><p id="p3238194814560"><a name="p3238194814560"></a><a name="p3238194814560"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.750000000000002%" headers="mcps1.1.6.1.3 "><p id="p199961759123515"><a name="p199961759123515"></a><a name="p199961759123515"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.45%" headers="mcps1.1.6.1.4 "><p id="p35722411369"><a name="p35722411369"></a><a name="p35722411369"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p9238204818566"><a name="p9238204818566"></a><a name="p9238204818566"></a>X-coordinate of the upper left corner of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row1423884816562"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p132383488563"><a name="p132383488563"></a><a name="p132383488563"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.78%" headers="mcps1.1.6.1.2 "><p id="p02395487560"><a name="p02395487560"></a><a name="p02395487560"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.750000000000002%" headers="mcps1.1.6.1.3 "><p id="p1099725973514"><a name="p1099725973514"></a><a name="p1099725973514"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.45%" headers="mcps1.1.6.1.4 "><p id="p8572242364"><a name="p8572242364"></a><a name="p8572242364"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p523934819568"><a name="p523934819568"></a><a name="p523934819568"></a>Y-coordinate of the upper left corner of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row723954815563"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p182391481565"><a name="p182391481565"></a><a name="p182391481565"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.78%" headers="mcps1.1.6.1.2 "><p id="p142391648145610"><a name="p142391648145610"></a><a name="p142391648145610"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.750000000000002%" headers="mcps1.1.6.1.3 "><p id="p89971559153512"><a name="p89971559153512"></a><a name="p89971559153512"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.45%" headers="mcps1.1.6.1.4 "><p id="p65728483617"><a name="p65728483617"></a><a name="p65728483617"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p523919486569"><a name="p523919486569"></a><a name="p523919486569"></a>Width of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row1723924885618"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p1923934820561"><a name="p1923934820561"></a><a name="p1923934820561"></a>height</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.78%" headers="mcps1.1.6.1.2 "><p id="p13239448135615"><a name="p13239448135615"></a><a name="p13239448135615"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.750000000000002%" headers="mcps1.1.6.1.3 "><p id="p69971159193519"><a name="p69971159193519"></a><a name="p69971159193519"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.45%" headers="mcps1.1.6.1.4 "><p id="p115727413366"><a name="p115727413366"></a><a name="p115727413366"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p523924819568"><a name="p523924819568"></a><a name="p523924819568"></a>Height of the rectangle.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct CanvasExample {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private path2Db: Path2D = new Path2D()
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | width | number | Yes | 0 | Width&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | height | number | Yes | 0 | Height&nbsp;of&nbsp;the&nbsp;rectangle. | 
+
+- Example
     
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.path2Db.rect(20, 20, 100, 100);this.context.stroke(this.path2Db)
-            })
-        }
-        .width('100%')
-        .height('100%')
+  ```
+  @Entry
+  @Component
+  struct CanvasExample {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private path2Db: Path2D = new Path2D()
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.path2Db.rect(20, 20, 100, 100);this.context.stroke(this.path2Db)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
-
-    ![](figures/en-us_image_0000001192755174.png)
+  }
+  ```
 
+  ![en-us_image_0000001256978385](figures/en-us_image_0000001256978385.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas.md b/en/application-dev/reference/arkui-ts/ts-components-canvas.md
index c28d94e917737bd4625cb335bf388ae50bc7b5f9..c6dfbdb87c20e7b51fcc1b300e85f217ec6352bd 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas.md
@@ -1,19 +1,19 @@
-# Canvas Components<a name="EN-US_TOPIC_0000001192595180"></a>
+# Canvas Components
 
--   **[Canvas](ts-components-canvas-canvas.md)**  
 
--   **[CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)**  
 
--   **[OffscreenCanvasRenderingConxt2D](ts-offscreencanvasrenderingcontext2d.md)**  
+- **[Canvas](ts-components-canvas-canvas.md)**
 
--   **[Lottie](ts-components-canvas-lottie.md)**  
+- **[CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)**
 
--   **[Path2D](ts-components-canvas-path2d.md)**  
+- **[OffscreenCanvasRenderingConxt2D](ts-offscreencanvasrenderingcontext2d.md)**
 
--   **[CanvasGradient](ts-components-canvas-canvasgradient.md)**  
+- **[Lottie](ts-components-canvas-lottie.md)**
 
--   **[ImageBitmap](ts-components-canvas-imagebitmap.md)**  
+- **[Path2D](ts-components-canvas-path2d.md)**
 
--   **[ImageData](ts-components-canvas-imagedata.md)**  
+- **[CanvasGradient](ts-components-canvas-canvasgradient.md)**
 
+- **[ImageBitmap](ts-components-canvas-imagebitmap.md)**
 
+- **[ImageData](ts-components-canvas-imagedata.md)**
\ No newline at end of file
diff --git a/en/application-dev/reference/arkui-ts/ts-components-container.md b/en/application-dev/reference/arkui-ts/ts-components-container.md
index 3350d2b43e33b0334e4f45ae321cc1bce612d93e..8ec33a004054eafdace9fbfbd19e75c7f6734df7 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-container.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-container.md
@@ -1,51 +1,47 @@
-# Container Components<a name="EN-US_TOPIC_0000001192755116"></a>
+# Container Components
 
--   **[AlphabetIndexer](ts-container-alphabet-indexer.md)**  
 
--   **[Badge](ts-container-badge.md)**  
 
--   **[Column](ts-container-column.md)**  
+- **[AlphabetIndexer](ts-container-alphabet-indexer.md)**
 
--   **[ColumnSplit](ts-container-columnsplit.md)**  
+- **[Badge](ts-container-badge.md)**
 
--   **[Counter](ts-container-counter.md)**  
+- **[Column](ts-container-column.md)**
 
--   **[Flex](ts-container-flex.md)**  
+- **[ColumnSplit](ts-container-columnsplit.md)**
 
--   **[GridContainer](ts-container-gridcontainer.md)**  
+- **[Counter](ts-container-counter.md)**
 
--   **[Grid](ts-container-grid.md)**  
+- **[Flex](ts-container-flex.md)**
 
--   **[GridItem](ts-container-griditem.md)**  
+- **[GridContainer](ts-container-gridcontainer.md)**
 
--   **[List](ts-container-list.md)**  
+- **[Grid](ts-container-grid.md)**
 
--   **[ListItem](ts-container-listitem.md)**  
+- **[GridItem](ts-container-griditem.md)**
 
--   **[Navigator](ts-container-navigator.md)**  
+- **[List](ts-container-list.md)**
 
--   **[Navigation](ts-container-navigation.md)**  
+- **[ListItem](ts-container-listitem.md)**
 
--   **[Panel](ts-container-panel.md)**  
+- **[Navigator](ts-container-navigator.md)**
 
--   **[Row](ts-container-row.md)**  
+- **[Navigation](ts-basic-components-navigation.md)**
 
--   **[RowSplit](ts-container-rowsplit.md)**  
+- **[Panel](ts-container-panel.md)**
 
--   **[Scroll](ts-container-scroll.md)**  
+- **[Row](ts-container-row.md)**
 
--   **[ScrollBar](ts-container-scrollbar.md)**  
+- **[RowSplit](ts-container-rowsplit.md)**
 
--   **[Stack](ts-container-stack.md)**  
+- **[Scroll](ts-container-scroll.md)**
 
--   **[Swiper](ts-container-swiper.md)**  
+- **[ScrollBar](ts-basic-components-scrollbar.md)**
 
--   **[Tabs](ts-container-tabs.md)**  
+- **[Stack](ts-container-stack.md)**
 
--   **[TabContent](ts-container-tabcontent.md)**  
-
--   **[Stepper](ts-container-stepper.md)**  
-
--   **[StepperItem](ts-container-stepperitem.md)**  
+- **[Swiper](ts-container-swiper.md)**
 
+- **[Tabs](ts-container-tabs.md)**
 
+- **[TabContent](ts-container-tabcontent.md)**
\ No newline at end of file
diff --git a/en/application-dev/reference/arkui-ts/ts-components.md b/en/application-dev/reference/arkui-ts/ts-components.md
index 6dd3d6a512fa63959867b3c52e47aba7349f8f06..dc08067174dd0cadf9f8dcdb56142ca008fa6344 100644
--- a/en/application-dev/reference/arkui-ts/ts-components.md
+++ b/en/application-dev/reference/arkui-ts/ts-components.md
@@ -1,13 +1,15 @@
-# Components<a name="EN-US_TOPIC_0000001237475059"></a>
+# Components
 
--   **[Universal Components](ts-universal-components.md)**  
 
--   **[Basic Components](ts-basic-components.md)**  
 
--   **[Container Components](ts-components-container.md)**  
+- **[Universal Components](ts-universal-components.md)**
 
--   **[Drawing Components](ts-drawing-components.md)**  
+- **[Basic Components](ts-basic-components.md)**
 
--   **[Canvas Components](ts-components-canvas.md)**  
+- **[Container Components](ts-components-container.md)**
 
+- **[Media Components](ts-media-components.md)**
 
+- **[Drawing Components](ts-drawing-components.md)**
+
+- **[Canvas Components](ts-components-canvas.md)**
\ No newline at end of file
diff --git a/en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md b/en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
index 4009d2f45471877baaf05483dee27055009169a1..8af93f953f37ce9fc68331b0b068c8b238dae85f 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
@@ -1,244 +1,72 @@
-# AlphabetIndexer<a name="EN-US_TOPIC_0000001192915108"></a>
+# AlphabetIndexer
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<AlphabetIndexer\>**  component provides an alphabetic index bar.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Applicable Devices<a name="section151761552181217"></a>
 
-<a name="table857714145377"></a>
-<table><thead align="left"><tr id="row55778146373"><th class="cellrowborder" valign="top" width="25.223613595706617%" id="mcps1.1.5.1.1"><p id="p7577141417376"><a name="p7577141417376"></a><a name="p7577141417376"></a>Phone</p>
-</th>
-<th class="cellrowborder" valign="top" width="21.451997614788315%" id="mcps1.1.5.1.2"><p id="p487719816463"><a name="p487719816463"></a><a name="p487719816463"></a>Tablet</p>
-</th>
-<th class="cellrowborder" valign="top" width="26.25223613595707%" id="mcps1.1.5.1.3"><p id="p135771614203720"><a name="p135771614203720"></a><a name="p135771614203720"></a>Smart TV</p>
-</th>
-<th class="cellrowborder" valign="top" width="27.072152653548002%" id="mcps1.1.5.1.4"><p id="p25772014133712"><a name="p25772014133712"></a><a name="p25772014133712"></a>Wearable</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row8578151423715"><td class="cellrowborder" valign="top" width="25.223613595706617%" headers="mcps1.1.5.1.1 "><p id="p65782014203718"><a name="p65782014203718"></a><a name="p65782014203718"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="21.451997614788315%" headers="mcps1.1.5.1.2 "><p id="p148771182469"><a name="p148771182469"></a><a name="p148771182469"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="26.25223613595707%" headers="mcps1.1.5.1.3 "><p id="p45783141377"><a name="p45783141377"></a><a name="p45783141377"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.072152653548002%" headers="mcps1.1.5.1.4 "><p id="p11578161443718"><a name="p11578161443718"></a><a name="p11578161443718"></a>No</p>
-</td>
-</tr>
-</tbody>
-</table>
+The **&lt;AlphabetIndexer&gt;** component provides an alphabetic index bar.
 
-## Required Permissions<a name="section53281531154915"></a>
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section1437452132415"></a>
+
+## Child Components
 
 None
 
-## APIs<a name="section6883949112416"></a>
 
-AlphabetIndexer\(value: \{arrayValue : Array<string\>, selected : number\}\)
+## APIs
 
--   Parameters
+AlphabetIndexer(value: {arrayValue : Array&lt;string&gt;, selected : number})
 
-    <a name="table10719114169"></a>
-    <table><thead align="left"><tr id="row1571913410610"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p87202043618"><a name="p87202043618"></a><a name="p87202043618"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="17.75%" id="mcps1.1.6.1.2"><p id="p5720441466"><a name="p5720441466"></a><a name="p5720441466"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.75%" id="mcps1.1.6.1.3"><p id="p147201241662"><a name="p147201241662"></a><a name="p147201241662"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.18%" id="mcps1.1.6.1.4"><p id="p187201141967"><a name="p187201141967"></a><a name="p187201141967"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="42.21%" id="mcps1.1.6.1.5"><p id="p127201740612"><a name="p127201740612"></a><a name="p127201740612"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row12720249611"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p07201441569"><a name="p07201441569"></a><a name="p07201441569"></a>arrayValue</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.75%" headers="mcps1.1.6.1.2 "><p id="p872084169"><a name="p872084169"></a><a name="p872084169"></a>Array&lt;string&gt;</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.75%" headers="mcps1.1.6.1.3 "><p id="p16720134166"><a name="p16720134166"></a><a name="p16720134166"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.18%" headers="mcps1.1.6.1.4 "><p id="p12720746619"><a name="p12720746619"></a><a name="p12720746619"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p137201841366"><a name="p137201841366"></a><a name="p137201841366"></a>Array of strings to be displayed in the alphabetic index bar.</p>
-    </td>
-    </tr>
-    <tr id="row97201341367"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p2072011415617"><a name="p2072011415617"></a><a name="p2072011415617"></a>selected</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.75%" headers="mcps1.1.6.1.2 "><p id="p19720541461"><a name="p19720541461"></a><a name="p19720541461"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.75%" headers="mcps1.1.6.1.3 "><p id="p1272074565"><a name="p1272074565"></a><a name="p1272074565"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.18%" headers="mcps1.1.6.1.4 "><p id="p197206416614"><a name="p197206416614"></a><a name="p197206416614"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p175915249324"><a name="p175915249324"></a><a name="p175915249324"></a>ID of a selected item.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | arrayValue | Array&lt;string&gt; | Yes | - | Array&nbsp;of&nbsp;strings&nbsp;to&nbsp;be&nbsp;displayed&nbsp;in&nbsp;the&nbsp;alphabetic&nbsp;index&nbsp;bar. | 
+  | selected | number | Yes | - | ID&nbsp;of&nbsp;a&nbsp;selected&nbsp;item. | 
 
 
-## Attributes<a name="section3345133819557"></a>
+## Attributes
 
-<a name="table252174055416"></a>
-<table><thead align="left"><tr id="row353940135411"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="p175318403545"><a name="p175318403545"></a><a name="p175318403545"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="33.29332933293329%" id="mcps1.1.4.1.2"><p id="p453194014548"><a name="p453194014548"></a><a name="p453194014548"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="33.373337333733375%" id="mcps1.1.4.1.3"><p id="p19531240145412"><a name="p19531240145412"></a><a name="p19531240145412"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row125384035411"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p88251916135916"><a name="p88251916135916"></a><a name="p88251916135916"></a>selectedColor</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.29332933293329%" headers="mcps1.1.4.1.2 "><p id="p682413165594"><a name="p682413165594"></a><a name="p682413165594"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.373337333733375%" headers="mcps1.1.4.1.3 "><p id="p580541616595"><a name="p580541616595"></a><a name="p580541616595"></a>Font color of the selected text.</p>
-</td>
-</tr>
-<tr id="row1671818251594"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p137181025105918"><a name="p137181025105918"></a><a name="p137181025105918"></a>popupColor</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.29332933293329%" headers="mcps1.1.4.1.2 "><p id="p771872513599"><a name="p771872513599"></a><a name="p771872513599"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.373337333733375%" headers="mcps1.1.4.1.3 "><p id="p17181625195912"><a name="p17181625195912"></a><a name="p17181625195912"></a>Font color of the pop-up text.</p>
-</td>
-</tr>
-<tr id="row14513333208"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p11513633007"><a name="p11513633007"></a><a name="p11513633007"></a>selectedBackgroundColor</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.29332933293329%" headers="mcps1.1.4.1.2 "><p id="p25952011116"><a name="p25952011116"></a><a name="p25952011116"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.373337333733375%" headers="mcps1.1.4.1.3 "><p id="p85097152069"><a name="p85097152069"></a><a name="p85097152069"></a>Background color of the selected text.</p>
-</td>
-</tr>
-<tr id="row44901379019"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p1349110379020"><a name="p1349110379020"></a><a name="p1349110379020"></a>popupBackground</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.29332933293329%" headers="mcps1.1.4.1.2 "><p id="p349115372014"><a name="p349115372014"></a><a name="p349115372014"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.373337333733375%" headers="mcps1.1.4.1.3 "><p id="p13491937208"><a name="p13491937208"></a><a name="p13491937208"></a>Background color of the pop-up text.</p>
-</td>
-</tr>
-<tr id="row147815431002"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p0782431019"><a name="p0782431019"></a><a name="p0782431019"></a>usingPopup</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.29332933293329%" headers="mcps1.1.4.1.2 "><p id="p17786431508"><a name="p17786431508"></a><a name="p17786431508"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.373337333733375%" headers="mcps1.1.4.1.3 "><p id="p979174315010"><a name="p979174315010"></a><a name="p979174315010"></a>Whether to use pop-up text.</p>
-</td>
-</tr>
-<tr id="row13515625712"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p18515122516117"><a name="p18515122516117"></a><a name="p18515122516117"></a>selectedFont</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.29332933293329%" headers="mcps1.1.4.1.2 "><p id="p176795164384"><a name="p176795164384"></a><a name="p176795164384"></a>{</p>
-<p id="p1376855518379"><a name="p1376855518379"></a><a name="p1376855518379"></a>size?: number,</p>
-<p id="p6403113203818"><a name="p6403113203818"></a><a name="p6403113203818"></a>weight?: FontWeight,</p>
-<p id="p1723611203386"><a name="p1723611203386"></a><a name="p1723611203386"></a>family?: string,</p>
-<p id="p1297992210382"><a name="p1297992210382"></a><a name="p1297992210382"></a>style?: FontStyle</p>
-<p id="p195150250112"><a name="p195150250112"></a><a name="p195150250112"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.373337333733375%" headers="mcps1.1.4.1.3 "><p id="p145161525415"><a name="p145161525415"></a><a name="p145161525415"></a>Font style of the selected text.</p>
-</td>
-</tr>
-<tr id="row17659646916"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p116591464112"><a name="p116591464112"></a><a name="p116591464112"></a>popupFont</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.29332933293329%" headers="mcps1.1.4.1.2 "><p id="p144261144103819"><a name="p144261144103819"></a><a name="p144261144103819"></a>{</p>
-<p id="p127311850113819"><a name="p127311850113819"></a><a name="p127311850113819"></a>size?: number,</p>
-<p id="p838045363820"><a name="p838045363820"></a><a name="p838045363820"></a>weight?: FontWeight,</p>
-<p id="p12474195943811"><a name="p12474195943811"></a><a name="p12474195943811"></a>family?: string,</p>
-<p id="p2352812392"><a name="p2352812392"></a><a name="p2352812392"></a>style?: FontStyle</p>
-<p id="p1965944615113"><a name="p1965944615113"></a><a name="p1965944615113"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.373337333733375%" headers="mcps1.1.4.1.3 "><p id="p1265918467111"><a name="p1265918467111"></a><a name="p1265918467111"></a>Font style of the pop-up text.</p>
-</td>
-</tr>
-<tr id="row85891259798"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p15892593915"><a name="p15892593915"></a><a name="p15892593915"></a>font</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.29332933293329%" headers="mcps1.1.4.1.2 "><p id="p57062514106"><a name="p57062514106"></a><a name="p57062514106"></a>{</p>
-<p id="p870655181013"><a name="p870655181013"></a><a name="p870655181013"></a>size?: number,</p>
-<p id="p67061355103"><a name="p67061355103"></a><a name="p67061355103"></a>weight?: FontWeight,</p>
-<p id="p1370619516107"><a name="p1370619516107"></a><a name="p1370619516107"></a>family?: string,</p>
-<p id="p0706754104"><a name="p0706754104"></a><a name="p0706754104"></a>style?: FontStyle</p>
-<p id="p19706115151018"><a name="p19706115151018"></a><a name="p19706115151018"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.373337333733375%" headers="mcps1.1.4.1.3 "><p id="p65896597914"><a name="p65896597914"></a><a name="p65896597914"></a>Default font style of the alphabetic index bar.</p>
-</td>
-</tr>
-<tr id="row627018105212"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p14270710423"><a name="p14270710423"></a><a name="p14270710423"></a>itemSize</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.29332933293329%" headers="mcps1.1.4.1.2 "><p id="p12702010529"><a name="p12702010529"></a><a name="p12702010529"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.373337333733375%" headers="mcps1.1.4.1.3 "><p id="p32704106216"><a name="p32704106216"></a><a name="p32704106216"></a>Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set.</p>
-</td>
-</tr>
-<tr id="row19921412201510"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p19331211153"><a name="p19331211153"></a><a name="p19331211153"></a>alignStyle</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.29332933293329%" headers="mcps1.1.4.1.2 "><p id="p11931912131517"><a name="p11931912131517"></a><a name="p11931912131517"></a>IndexerAlign</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.373337333733375%" headers="mcps1.1.4.1.3 "><p id="p17931121156"><a name="p17931121156"></a><a name="p17931121156"></a>Alignment style of the alphabetic index bar. Left alignment and right alignment are supported. The alignment style affects the position of the pop-up window.</p>
-</td>
-</tr>
-</tbody>
-</table>
+  | Name | Type | Description | 
+| -------- | -------- | -------- |
+| selectedColor | Color | Font&nbsp;color&nbsp;of&nbsp;the&nbsp;selected&nbsp;text. | 
+| popupColor | Color | Font&nbsp;color&nbsp;of&nbsp;the&nbsp;pop-up&nbsp;text. | 
+| selectedBackgroundColor | Color | Background&nbsp;color&nbsp;of&nbsp;the&nbsp;selected&nbsp;text. | 
+| popupBackground | Color | Background&nbsp;color&nbsp;of&nbsp;the&nbsp;pop-up&nbsp;text. | 
+| usingPopup | boolean | Whether&nbsp;to&nbsp;use&nbsp;pop-up&nbsp;text. | 
+| selectedFont | {<br/>size?:&nbsp;number,<br/>weight?:&nbsp;FontWeight,<br/>family?:&nbsp;string,<br/>style?:&nbsp;FontStyle<br/>} | Font&nbsp;style&nbsp;of&nbsp;the&nbsp;selected&nbsp;text. | 
+| popupFont | {<br/>size?:&nbsp;number,<br/>weight?:&nbsp;FontWeight,<br/>family?:&nbsp;string,<br/>style?:&nbsp;FontStyle<br/>} | Font&nbsp;style&nbsp;of&nbsp;the&nbsp;pop-up&nbsp;text. | 
+| font | {<br/>size?:&nbsp;number,<br/>weight?:&nbsp;FontWeight,<br/>family?:&nbsp;string,<br/>style?:&nbsp;FontStyle<br/>} | Default&nbsp;font&nbsp;style&nbsp;of&nbsp;the&nbsp;alphabetic&nbsp;index&nbsp;bar. | 
+| itemSize | Length | Size&nbsp;of&nbsp;an&nbsp;item&nbsp;in&nbsp;the&nbsp;alphabetic&nbsp;index&nbsp;bar.&nbsp;The&nbsp;item&nbsp;is&nbsp;a&nbsp;square,&nbsp;and&nbsp;the&nbsp;side&nbsp;length&nbsp;needs&nbsp;to&nbsp;be&nbsp;set. | 
+| alignStyle | IndexerAlign | Alignment&nbsp;style&nbsp;of&nbsp;the&nbsp;alphabetic&nbsp;index&nbsp;bar.&nbsp;Left&nbsp;alignment&nbsp;and&nbsp;right&nbsp;alignment&nbsp;are&nbsp;supported.&nbsp;The&nbsp;alignment&nbsp;style&nbsp;affects&nbsp;the&nbsp;position&nbsp;of&nbsp;the&nbsp;pop-up&nbsp;window. | 
 
--   IndexerAlign enums
+- IndexerAlign enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Left | The&nbsp;pop-up&nbsp;window&nbsp;is&nbsp;displayed&nbsp;on&nbsp;the&nbsp;right&nbsp;of&nbsp;the&nbsp;alphabetic&nbsp;indexer&nbsp;bar. | 
+  | Right | The&nbsp;pop-up&nbsp;window&nbsp;is&nbsp;displayed&nbsp;on&nbsp;the&nbsp;left&nbsp;of&nbsp;the&nbsp;alphabetic&nbsp;indexer&nbsp;bar. | 
 
-    <a name="table596619517127"></a>
-    <table><thead align="left"><tr id="row396620514126"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p20966155121218"><a name="p20966155121218"></a><a name="p20966155121218"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p169661450121"><a name="p169661450121"></a><a name="p169661450121"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1596655131217"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p59668519127"><a name="p59668519127"></a><a name="p59668519127"></a>Left</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1096620514121"><a name="p1096620514121"></a><a name="p1096620514121"></a>The pop-up window is displayed on the right of the alphabetic indexer bar.</p>
-    </td>
-    </tr>
-    <tr id="row11966195101215"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p696618521215"><a name="p696618521215"></a><a name="p696618521215"></a>Right</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p99677591211"><a name="p99677591211"></a><a name="p99677591211"></a>The pop-up window is displayed on the left of the alphabetic indexer bar.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
 
+## Events
 
-## Events<a name="section12808326678"></a>
+  | Name | Description | 
+| -------- | -------- |
+| onSelected(index:&nbsp;number)&nbsp;=&gt;&nbsp;void | Callback&nbsp;invoked&nbsp;when&nbsp;an&nbsp;item&nbsp;in&nbsp;the&nbsp;alphabetic&nbsp;indexer&nbsp;bar&nbsp;is&nbsp;selected. | 
+| onRequestPopupData(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;Array&lt;string&gt;)<sup>8+</sup> | Invoked&nbsp;when&nbsp;a&nbsp;request&nbsp;for&nbsp;displaying&nbsp;content&nbsp;in&nbsp;the&nbsp;index&nbsp;prompt&nbsp;window&nbsp;is&nbsp;sent&nbsp;when&nbsp;an&nbsp;item&nbsp;in&nbsp;the&nbsp;alphabetic&nbsp;indexer&nbsp;bar&nbsp;is&nbsp;selected.<br/>The&nbsp;return&nbsp;value&nbsp;is&nbsp;a&nbsp;string&nbsp;array&nbsp;corresponding&nbsp;to&nbsp;the&nbsp;indexes.&nbsp;The&nbsp;string&nbsp;array&nbsp;is&nbsp;displayed&nbsp;vertically&nbsp;in&nbsp;the&nbsp;pop-up&nbsp;window.&nbsp;It&nbsp;can&nbsp;display&nbsp;up&nbsp;to&nbsp;five&nbsp;strings&nbsp;at&nbsp;a&nbsp;time&nbsp;and&nbsp;allows&nbsp;scrolling. | 
+| onPopupSelected(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | Invoked&nbsp;when&nbsp;an&nbsp;item&nbsp;in&nbsp;the&nbsp;index&nbsp;pop-up&nbsp;window&nbsp;is&nbsp;selected. | 
 
-<a name="table268mcpsimp"></a>
-<table><thead align="left"><tr id="row274mcpsimp"><th class="cellrowborder" valign="top" width="40.6%" id="mcps1.1.3.1.1"><p id="p276mcpsimp"><a name="p276mcpsimp"></a><a name="p276mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="59.4%" id="mcps1.1.3.1.2"><p id="p280mcpsimp"><a name="p280mcpsimp"></a><a name="p280mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row281mcpsimp"><td class="cellrowborder" valign="top" width="40.6%" headers="mcps1.1.3.1.1 "><p id="p283mcpsimp"><a name="p283mcpsimp"></a><a name="p283mcpsimp"></a>onSelected(index: number) =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" width="59.4%" headers="mcps1.1.3.1.2 "><p id="p287mcpsimp"><a name="p287mcpsimp"></a><a name="p287mcpsimp"></a>Invoked when an item in the alphabetic indexer bar is selected.</p>
-</td>
-</tr>
-<tr id="row6557140191017"><td class="cellrowborder" valign="top" width="40.6%" headers="mcps1.1.3.1.1 "><p id="p7557240111016"><a name="p7557240111016"></a><a name="p7557240111016"></a>onRequestPopupData(callback: (index: number) =&gt; Array&lt;string&gt;)<sup id="sup17217132713428"><a name="sup17217132713428"></a><a name="sup17217132713428"></a>8+</sup></p>
-</td>
-<td class="cellrowborder" valign="top" width="59.4%" headers="mcps1.1.3.1.2 "><p id="p20571454122014"><a name="p20571454122014"></a><a name="p20571454122014"></a>Invoked when a request for displaying content in the index prompt window is sent when an item in the alphabetic indexer bar is selected.</p>
-<p id="p16840741181813"><a name="p16840741181813"></a><a name="p16840741181813"></a>The return value is a string array corresponding to the indexes. The string array is displayed vertically in the pop-up window. It can display up to five strings at a time and allows scrolling.</p>
-</td>
-</tr>
-<tr id="row4394151501110"><td class="cellrowborder" valign="top" width="40.6%" headers="mcps1.1.3.1.1 "><p id="p0394415161111"><a name="p0394415161111"></a><a name="p0394415161111"></a>onPopupSelected(callback: (index: number) =&gt; void)<sup id="sup1585891816340"><a name="sup1585891816340"></a><a name="sup1585891816340"></a>8+</sup></p>
-</td>
-<td class="cellrowborder" valign="top" width="59.4%" headers="mcps1.1.3.1.2 "><p id="p23941815181117"><a name="p23941815181117"></a><a name="p23941815181117"></a>Invoked when an item in the index prompt window is selected.</p>
-</td>
-</tr>
-</tbody>
-</table>
 
-## Example<a name="section11665132318294"></a>
+## Example
 
+  
 ```
 @Entry
 @Component
-struct AlphabetIndexerComponent {
+struct AlphabetIndexerSample {
   private value: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
 
   build() {
@@ -260,5 +88,4 @@ struct AlphabetIndexerComponent {
 }
 ```
 
-![](figures/alphabetindexer.gif)
-
+![en-us_image_0000001212378392](figures/en-us_image_0000001212378392.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-container-badge.md b/en/application-dev/reference/arkui-ts/ts-container-badge.md
index ccb15c953951d277547b7db473e5e642e6cad89f..9ab237910aa3d2443e9df09a1f5a9d7703a8034e 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-badge.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-badge.md
@@ -1,233 +1,64 @@
-# Badge<a name="EN-US_TOPIC_0000001237715075"></a>
+# Badge
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Badge\>**  component presents event information on a component.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section53281531154915"></a>
 
-None
-
-## Child Components<a name="section1089034711356"></a>
+The **&lt;Badge&gt;** component presents event information on a component.
 
-This component supports only one child component.
 
-## APIs<a name="section17399164519412"></a>
+## Required Permissions
 
-Badge\(value: \{count: number, position?: BadgePosition, maxCount?: number, style?: BadgeStyle\}\)
+None
 
--   Parameters
 
-    <a name="table10719114169"></a>
-    <table><thead align="left"><tr id="row1571913410610"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p87202043618"><a name="p87202043618"></a><a name="p87202043618"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.95%" id="mcps1.1.6.1.2"><p id="p5720441466"><a name="p5720441466"></a><a name="p5720441466"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.55%" id="mcps1.1.6.1.3"><p id="p147201241662"><a name="p147201241662"></a><a name="p147201241662"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.18%" id="mcps1.1.6.1.4"><p id="p187201141967"><a name="p187201141967"></a><a name="p187201141967"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="42.21%" id="mcps1.1.6.1.5"><p id="p127201740612"><a name="p127201740612"></a><a name="p127201740612"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row12720249611"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p07201441569"><a name="p07201441569"></a><a name="p07201441569"></a>count</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.95%" headers="mcps1.1.6.1.2 "><p id="p872084169"><a name="p872084169"></a><a name="p872084169"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.55%" headers="mcps1.1.6.1.3 "><p id="p16720134166"><a name="p16720134166"></a><a name="p16720134166"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.18%" headers="mcps1.1.6.1.4 "><p id="p144311926155911"><a name="p144311926155911"></a><a name="p144311926155911"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p137201841366"><a name="p137201841366"></a><a name="p137201841366"></a>Number of prompt messages.</p>
-    </td>
-    </tr>
-    <tr id="row97201341367"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p2072011415617"><a name="p2072011415617"></a><a name="p2072011415617"></a>position</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.95%" headers="mcps1.1.6.1.2 "><p id="p19720541461"><a name="p19720541461"></a><a name="p19720541461"></a><a href="#li7315759142415">BadgePosition</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.55%" headers="mcps1.1.6.1.3 "><p id="p1272074565"><a name="p1272074565"></a><a name="p1272074565"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.18%" headers="mcps1.1.6.1.4 "><p id="p6923632174018"><a name="p6923632174018"></a><a name="p6923632174018"></a>RightTop</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p26168425613"><a name="p26168425613"></a><a name="p26168425613"></a>Position to display the badge relative to the parent component.</p>
-    </td>
-    </tr>
-    <tr id="row1991692015619"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p129169209564"><a name="p129169209564"></a><a name="p129169209564"></a>maxCount</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.95%" headers="mcps1.1.6.1.2 "><p id="p99161220135617"><a name="p99161220135617"></a><a name="p99161220135617"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.55%" headers="mcps1.1.6.1.3 "><p id="p519323619415"><a name="p519323619415"></a><a name="p519323619415"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.18%" headers="mcps1.1.6.1.4 "><p id="p7916120155613"><a name="p7916120155613"></a><a name="p7916120155613"></a>99</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p29161220105614"><a name="p29161220105614"></a><a name="p29161220105614"></a>Maximum number of prompt messages. When the maximum number is reached, only <strong id="b61694432719"><a name="b61694432719"></a><a name="b61694432719"></a>maxCount+</strong> is displayed.</p>
-    </td>
-    </tr>
-    <tr id="row010583375614"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p1910523311561"><a name="p1910523311561"></a><a name="p1910523311561"></a>style</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.95%" headers="mcps1.1.6.1.2 "><p id="p15105113317566"><a name="p15105113317566"></a><a name="p15105113317566"></a><a href="#li910545532420">BadgeStyle</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.55%" headers="mcps1.1.6.1.3 "><p id="p16876536044"><a name="p16876536044"></a><a name="p16876536044"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.18%" headers="mcps1.1.6.1.4 "><p id="p14105193325614"><a name="p14105193325614"></a><a name="p14105193325614"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p1610520333565"><a name="p1610520333565"></a><a name="p1610520333565"></a>Style of the <strong id="b1219957132310"><a name="b1219957132310"></a><a name="b1219957132310"></a>&lt;Badge&gt;</strong> component, including the text color, text size, badge color, and badge size.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+## Child Components
 
+This component supports only one child component.
 
-Badge\(value: \{value: string, position?: BadgePosition, style?: BadgeStyle\}\)
 
-Creates a  **<Badge\>**  component based on the string.
+## APIs
 
--   Parameters
+Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style?: BadgeStyle})
 
-    <a name="table16272859113719"></a>
-    <table><thead align="left"><tr id="row1827215916372"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p1627214597371"><a name="p1627214597371"></a><a name="p1627214597371"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="17.71%" id="mcps1.1.6.1.2"><p id="p32721159143711"><a name="p32721159143711"></a><a name="p32721159143711"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.79%" id="mcps1.1.6.1.3"><p id="p327245916378"><a name="p327245916378"></a><a name="p327245916378"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.18%" id="mcps1.1.6.1.4"><p id="p192721559103713"><a name="p192721559103713"></a><a name="p192721559103713"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="42.21%" id="mcps1.1.6.1.5"><p id="p132721059103714"><a name="p132721059103714"></a><a name="p132721059103714"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row627285973720"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p8272145933716"><a name="p8272145933716"></a><a name="p8272145933716"></a>value</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.71%" headers="mcps1.1.6.1.2 "><p id="p227225903712"><a name="p227225903712"></a><a name="p227225903712"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.79%" headers="mcps1.1.6.1.3 "><p id="p14272959153714"><a name="p14272959153714"></a><a name="p14272959153714"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.18%" headers="mcps1.1.6.1.4 "><p id="p227212593379"><a name="p227212593379"></a><a name="p227212593379"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p1627216590372"><a name="p1627216590372"></a><a name="p1627216590372"></a>String of the content to prompt.</p>
-    </td>
-    </tr>
-    <tr id="row2272459183716"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p7272115917378"><a name="p7272115917378"></a><a name="p7272115917378"></a>position</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.71%" headers="mcps1.1.6.1.2 "><p id="p1327212597375"><a name="p1327212597375"></a><a name="p1327212597375"></a><a href="#li7315759142415">BadgePosition</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.79%" headers="mcps1.1.6.1.3 "><p id="p227218594378"><a name="p227218594378"></a><a name="p227218594378"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.18%" headers="mcps1.1.6.1.4 "><p id="p1622693010409"><a name="p1622693010409"></a><a name="p1622693010409"></a>RightTop</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p132729596377"><a name="p132729596377"></a><a name="p132729596377"></a>Display position of the badge.</p>
-    </td>
-    </tr>
-    <tr id="row227385919378"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p427355918375"><a name="p427355918375"></a><a name="p427355918375"></a>style</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.71%" headers="mcps1.1.6.1.2 "><p id="p14721195722617"><a name="p14721195722617"></a><a name="p14721195722617"></a><a href="#li910545532420">BadgeStyle</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.79%" headers="mcps1.1.6.1.3 "><p id="p11273559103712"><a name="p11273559103712"></a><a name="p11273559103712"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.18%" headers="mcps1.1.6.1.4 "><p id="p1527355933714"><a name="p1527355933714"></a><a name="p1527355933714"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p3273105983711"><a name="p3273105983711"></a><a name="p3273105983711"></a>Style of the <strong id="b1533422916261"><a name="b1533422916261"></a><a name="b1533422916261"></a>&lt;Badge&gt;</strong> component, including the text color, text size, badge color, and badge size.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | count | number | Yes | - | Number&nbsp;of&nbsp;prompt&nbsp;messages. |
+  | position | BadgePosition | No | BadgePosition.RightTop | Position&nbsp;to&nbsp;display&nbsp;the&nbsp;badge&nbsp;relative&nbsp;to&nbsp;the&nbsp;parent&nbsp;component. |
+  | maxCount | number | No | 99 | Maximum&nbsp;number&nbsp;of&nbsp;prompt&nbsp;messages.&nbsp;When&nbsp;the&nbsp;maximum&nbsp;number&nbsp;is&nbsp;reached,&nbsp;only&nbsp;**maxCount+**&nbsp;is&nbsp;displayed. |
+  | style | BadgeStyle | No | - | Style&nbsp;of&nbsp;the&nbsp;**&lt;Badge&gt;**&nbsp;component,&nbsp;including&nbsp;the&nbsp;text&nbsp;color,&nbsp;text&nbsp;size,&nbsp;badge&nbsp;color,&nbsp;and&nbsp;badge&nbsp;size. |
 
+Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle})
 
--   <a name="li910545532420"></a>BadgeStyle object
+Creates a **&lt;Badge&gt;** component based on the string.
 
-    <a name="table13726195418229"></a>
-    <table><thead align="left"><tr id="row87261254182220"><th class="cellrowborder" valign="top" width="14.85%" id="mcps1.1.6.1.1"><p id="p4726165413222"><a name="p4726165413222"></a><a name="p4726165413222"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="19.73%" id="mcps1.1.6.1.2"><p id="p972617545229"><a name="p972617545229"></a><a name="p972617545229"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="6.569999999999999%" id="mcps1.1.6.1.3"><p id="p87262054142210"><a name="p87262054142210"></a><a name="p87262054142210"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.17%" id="mcps1.1.6.1.4"><p id="p187268547223"><a name="p187268547223"></a><a name="p187268547223"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="49.68%" id="mcps1.1.6.1.5"><p id="p157261454152211"><a name="p157261454152211"></a><a name="p157261454152211"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row11726125442212"><td class="cellrowborder" valign="top" width="14.85%" headers="mcps1.1.6.1.1 "><p id="p07260542222"><a name="p07260542222"></a><a name="p07260542222"></a>color</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.73%" headers="mcps1.1.6.1.2 "><p id="p1072665415220"><a name="p1072665415220"></a><a name="p1072665415220"></a>Color</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.569999999999999%" headers="mcps1.1.6.1.3 "><p id="p572695420229"><a name="p572695420229"></a><a name="p572695420229"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.17%" headers="mcps1.1.6.1.4 "><p id="p572610545224"><a name="p572610545224"></a><a name="p572610545224"></a>White</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="49.68%" headers="mcps1.1.6.1.5 "><p id="p1972620548227"><a name="p1972620548227"></a><a name="p1972620548227"></a>Text color.</p>
-    </td>
-    </tr>
-    <tr id="row172675411221"><td class="cellrowborder" valign="top" width="14.85%" headers="mcps1.1.6.1.1 "><p id="p272665462210"><a name="p272665462210"></a><a name="p272665462210"></a>fontSize</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.73%" headers="mcps1.1.6.1.2 "><p id="p472612541229"><a name="p472612541229"></a><a name="p472612541229"></a>number | string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.569999999999999%" headers="mcps1.1.6.1.3 "><p id="p1972614542223"><a name="p1972614542223"></a><a name="p1972614542223"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.17%" headers="mcps1.1.6.1.4 "><p id="p172655415226"><a name="p172655415226"></a><a name="p172655415226"></a>10</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="49.68%" headers="mcps1.1.6.1.5 "><p id="p27269548228"><a name="p27269548228"></a><a name="p27269548228"></a>Text size.</p>
-    </td>
-    </tr>
-    <tr id="row37261254192219"><td class="cellrowborder" valign="top" width="14.85%" headers="mcps1.1.6.1.1 "><p id="p272655416220"><a name="p272655416220"></a><a name="p272655416220"></a>badgeSize</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.73%" headers="mcps1.1.6.1.2 "><p id="p187270547228"><a name="p187270547228"></a><a name="p187270547228"></a>number | string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.569999999999999%" headers="mcps1.1.6.1.3 "><p id="p13727145413221"><a name="p13727145413221"></a><a name="p13727145413221"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.17%" headers="mcps1.1.6.1.4 "><p id="p872717545226"><a name="p872717545226"></a><a name="p872717545226"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="49.68%" headers="mcps1.1.6.1.5 "><p id="p1672745411224"><a name="p1672745411224"></a><a name="p1672745411224"></a>Size of the badge.</p>
-    </td>
-    </tr>
-    <tr id="row17274546224"><td class="cellrowborder" valign="top" width="14.85%" headers="mcps1.1.6.1.1 "><p id="p18727165452210"><a name="p18727165452210"></a><a name="p18727165452210"></a>badgeColor</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.73%" headers="mcps1.1.6.1.2 "><p id="p672775452217"><a name="p672775452217"></a><a name="p672775452217"></a>Color</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.569999999999999%" headers="mcps1.1.6.1.3 "><p id="p127275543221"><a name="p127275543221"></a><a name="p127275543221"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.17%" headers="mcps1.1.6.1.4 "><p id="p1272785417221"><a name="p1272785417221"></a><a name="p1272785417221"></a>Red</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="49.68%" headers="mcps1.1.6.1.5 "><p id="p13727185419222"><a name="p13727185419222"></a><a name="p13727185419222"></a>Color of the badge.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | value | string | Yes | - | String&nbsp;of&nbsp;the&nbsp;content&nbsp;to&nbsp;prompt. |
+  | position | BadgePosition | No | BadgePosition.RightTop | Display&nbsp;position&nbsp;of&nbsp;the&nbsp;badge. |
+  | style | BadgeStyle | No | - | Style&nbsp;of&nbsp;the&nbsp;**&lt;Badge&gt;**&nbsp;component,&nbsp;including&nbsp;the&nbsp;text&nbsp;color,&nbsp;text&nbsp;size,&nbsp;badge&nbsp;color,&nbsp;and&nbsp;badge&nbsp;size. |
 
+- BadgeStyle object
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | color | Color | No | Color.White | Text&nbsp;color. | 
+  | fontSize | number&nbsp;\|&nbsp;string | No | 10 | Text&nbsp;size. | 
+  | badgeSize | number&nbsp;\|&nbsp;string | Yes | - | Size&nbsp;of&nbsp;the&nbsp;badge. | 
+  | badgeColor | Color | No | Color.Red | Color&nbsp;of&nbsp;the&nbsp;badge. | 
 
--   <a name="li7315759142415"></a>BadgePosition enums
+- BadgePosition enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Right | The&nbsp;badge&nbsp;is&nbsp;vertically&nbsp;centered&nbsp;on&nbsp;the&nbsp;right&nbsp;of&nbsp;the&nbsp;parent&nbsp;component. | 
+  | RightTop | The&nbsp;badge&nbsp;is&nbsp;displayed&nbsp;in&nbsp;the&nbsp;upper&nbsp;right&nbsp;corner&nbsp;of&nbsp;the&nbsp;parent&nbsp;component. | 
+  | Left | The&nbsp;badge&nbsp;is&nbsp;vertically&nbsp;centered&nbsp;on&nbsp;the&nbsp;left&nbsp;of&nbsp;the&nbsp;parent&nbsp;component. | 
 
-    <a name="table1648081319234"></a>
-    <table><thead align="left"><tr id="row248131319233"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p10481131319231"><a name="p10481131319231"></a><a name="p10481131319231"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p11481191342319"><a name="p11481191342319"></a><a name="p11481191342319"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row44811513102315"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1348191316232"><a name="p1348191316232"></a><a name="p1348191316232"></a>Right</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p10481111332318"><a name="p10481111332318"></a><a name="p10481111332318"></a>The badge is vertically centered on the right of the parent component.</p>
-    </td>
-    </tr>
-    <tr id="row4481191382316"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p74811513172312"><a name="p74811513172312"></a><a name="p74811513172312"></a>RightTop</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p10481111362318"><a name="p10481111362318"></a><a name="p10481111362318"></a>The badge is displayed in the upper right corner of the parent component.</p>
-    </td>
-    </tr>
-    <tr id="row2481171372318"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p948141302319"><a name="p948141302319"></a><a name="p948141302319"></a>Left</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p44812137238"><a name="p44812137238"></a><a name="p44812137238"></a>The badge is vertically centered on the left of the parent component.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
 
+## Example
 
-## Example<a name="section187541341164211"></a>
 
 ```
 @Entry
@@ -273,5 +104,4 @@ struct BadgeExample {
 }
 ```
 
-![](figures/badge.gif)
-
+![en-us_image_0000001212218470](figures/en-us_image_0000001212218470.gif)
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 a1638e11f806aa2ee6291c034d6f96a3b10fac1a..e0e60472e1fe83911dc23e5a36d6ab444132a282 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-column.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-column.md
@@ -1,10 +1,11 @@
 # Column
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The **<Column\>** component lays out child components vertically.
+The **&lt;Column&gt;** component lays out child components vertically.
 
 
 ## Required Permissions
@@ -14,7 +15,7 @@ None
 
 ## Child Components
 
-Supported
+This component can contain child components.
 
 
 ## APIs
@@ -23,29 +24,29 @@ Column(value:{space?: Length})
 
 
 - Parameters
-  | Name| Type| Mandatory| Default Value| Description| 
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
   | -------- | -------- | -------- | -------- | -------- |
-  | space | Length | No| 0 | Space between two adjacent child components in the vertical layout.| 
+  | space | Length | No | 0 | Space&nbsp;between&nbsp;any&nbsp;two&nbsp;adjacent&nbsp;child&nbsp;components&nbsp;in&nbsp;the&nbsp;vertical&nbsp;layout. | 
 
 
 ## Attributes
 
-| Name| Type| Default Value| Description|
+| Name | Type | Default&nbsp;Value | Description |
 | -------- | -------- | -------- | -------- |
-| alignItems | HorizontalAlign | HorizontalAlign.Center | Alignment mode of the child components in the horizontal direction.|
-| justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | Alignment mode of the child components in the vertical direction.|
+| alignItems | HorizontalAlign | HorizontalAlign.Center | Alignment&nbsp;mode&nbsp;of&nbsp;child&nbsp;components&nbsp;in&nbsp;the&nbsp;horizontal&nbsp;direction. |
+| justifyContent<sup>8+</sup> | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | Alignment mode of child components in the vertical direction. |
 
 - HorizontalAlign enums
-  | Name| Description| 
+    | Name | Description | 
   | -------- | -------- |
-  | Start | Aligned with the start edge in the same direction as the language in use.| 
-  | Center | Center aligned. This is the default alignment mode.| 
-  | End | Aligned with the end edge in the same direction as the language in use.|
-
+  | Start | Aligned&nbsp;with&nbsp;the&nbsp;start&nbsp;edge&nbsp;in&nbsp;the&nbsp;same&nbsp;direction&nbsp;as&nbsp;the&nbsp;language&nbsp;in&nbsp;use. | 
+  | Center | Center&nbsp;alignment.&nbsp;This&nbsp;is&nbsp;the&nbsp;default&nbsp;alignment&nbsp;mode. | 
+  | End | Aligned&nbsp;with&nbsp;the&nbsp;end&nbsp;edge&nbsp;in&nbsp;the&nbsp;same&nbsp;direction&nbsp;as&nbsp;the&nbsp;language&nbsp;in&nbsp;use. | 
 
 
 ## Example
 
+
 ```
 @Entry
 @Component
@@ -75,7 +76,6 @@ struct ColumnExample {
           Column().width('30%').height(30).backgroundColor(0xAFEEEE)
           Column().width('30%').height(30).backgroundColor(0x00FFFF)
         }.height('15%').border({ width: 1 }).justifyContent(FlexAlign.Center)
-
         Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
         Column() {
           Column().width('30%').height(30).backgroundColor(0xAFEEEE)
@@ -86,4 +86,4 @@ struct ColumnExample {
 }
 ```
 
-![zh-cn_image_0000001219982721](figures/Column.png)
+![](figures/column.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-container-columnsplit.md b/en/application-dev/reference/arkui-ts/ts-container-columnsplit.md
index 362c327301ae8d94d92a47637bd08f841557e7ba..97e29299d78e965706d02225033a3c752e5b12e0 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-columnsplit.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-columnsplit.md
@@ -1,48 +1,41 @@
-# ColumnSplit<a name="EN-US_TOPIC_0000001237475057"></a>
+# ColumnSplit
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<ColumnSplit\>**  lays out child components vertically and inserts a horizontal divider between every two child components.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section53281531154915"></a>
+
+The **&lt;ColumnSplit&gt;** lays out child components vertically and inserts a horizontal divider between every two child components.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section5989144051714"></a>
+
+## Child Components
 
 This component can contain child components.
 
-## APIs<a name="section1643325819470"></a>
 
-ColumnSplit\(\)
+## APIs
 
-## Attributes<a name="section945991855410"></a>
+ColumnSplit()
 
-<a name="table252174055416"></a>
-<table><thead align="left"><tr id="row353940135411"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="p175318403545"><a name="p175318403545"></a><a name="p175318403545"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="33.29332933293329%" id="mcps1.1.4.1.2"><p id="p453194014548"><a name="p453194014548"></a><a name="p453194014548"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="33.373337333733375%" id="mcps1.1.4.1.3"><p id="p19531240145412"><a name="p19531240145412"></a><a name="p19531240145412"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row125384035411"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p1753134065413"><a name="p1753134065413"></a><a name="p1753134065413"></a>resizeable</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.29332933293329%" headers="mcps1.1.4.1.2 "><p id="p85364012541"><a name="p85364012541"></a><a name="p85364012541"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.373337333733375%" headers="mcps1.1.4.1.3 "><p id="p85314400547"><a name="p85314400547"></a><a name="p85314400547"></a>Whether the divider can be dragged. The default value is <strong id="b77317111362"><a name="b77317111362"></a><a name="b77317111362"></a>false</strong>.</p>
-</td>
-</tr>
-</tbody>
-</table>
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->Similar to  **<RowSplit\>**, the divider of  **<ColumnSplit\>**  can be dragged to a position that just fully holds a component.
+## Attributes
 
-## Example<a name="section1078035104913"></a>
+  | Name | Type | Description | 
+| -------- | -------- | -------- |
+| resizeable | boolean | Whether&nbsp;the&nbsp;divider&nbsp;can&nbsp;be&nbsp;dragged.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**false**. | 
 
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> Similar to **&lt;RowSplit&gt;**, the divider of **&lt;ColumnSplit&gt;** can be dragged to a position that just fully holds a component.
+
+
+## Example
+
+  
 ```
 @Entry
 @Component
@@ -64,5 +57,4 @@ struct ColumnSplitExample {
 }
 ```
 
-![](figures/columnsplit.gif)
-
+![en-us_image_0000001212378422](figures/en-us_image_0000001212378422.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-container-counter.md b/en/application-dev/reference/arkui-ts/ts-container-counter.md
index 5a4c49aa9a83320590730fe01d32949eb2eaa732..e9a959bdaf6ec41a969d743c55610a29bc608c34 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-counter.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-counter.md
@@ -1,47 +1,40 @@
-# Counter<a name="EN-US_TOPIC_0000001193075082"></a>
+# Counter
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Counter\>**  component provides an operation to increase or decrease the number.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section53281531154915"></a>
+
+The **&lt;Counter&gt;** component provides an operation to increase or decrease the number.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section5989144051714"></a>
+
+## Child Components
 
 This component can contain child components.
 
-## APIs<a name="section14196162892911"></a>
 
-Counter\(\)
+## APIs
+
+Counter()
 
-## Events<a name="section945991855410"></a>
+
+## Events
 
 Universal events and gestures are not supported. Only the events listed below are supported.
 
-<a name="table644016378401"></a>
-<table><thead align="left"><tr id="row544018378408"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p204408371408"><a name="p204408371408"></a><a name="p204408371408"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p64407376405"><a name="p64407376405"></a><a name="p64407376405"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row124407372409"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p18440143716402"><a name="p18440143716402"></a><a name="p18440143716402"></a>onInc(event: () =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p144407372407"><a name="p144407372407"></a><a name="p144407372407"></a>Event indicating that the number of monitored objects is increased.</p>
-</td>
-</tr>
-<tr id="row844013754010"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p244016375402"><a name="p244016375402"></a><a name="p244016375402"></a>onDec(event: () =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p1744012372402"><a name="p1744012372402"></a><a name="p1744012372402"></a>Event indicating that the number of monitored objects is decreased.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section1078035104913"></a>
+  | Name | Description | 
+| -------- | -------- |
+| onInc(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Event&nbsp;indicating&nbsp;that&nbsp;the&nbsp;number&nbsp;of&nbsp;monitored&nbsp;objects&nbsp;is&nbsp;increased. | 
+| onDec(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Event&nbsp;indicating&nbsp;that&nbsp;the&nbsp;number&nbsp;of&nbsp;monitored&nbsp;objects&nbsp;is&nbsp;decreased. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -65,5 +58,4 @@ struct CounterExample {
 }
 ```
 
-![](figures/counter.gif)
-
+![en-us_image_0000001212378424](figures/en-us_image_0000001212378424.gif)
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 e548366843bb3bc04feac69c5050642858b0bc1b..f0392afc2f55f47066b91fd89bbb90a23519fee2 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-flex.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-flex.md
@@ -1,202 +1,66 @@
-# Flex<a name="EN-US_TOPIC_0000001237475079"></a>
+# Flex
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Flex\>**  component allows for an elastic layout.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section11841179295"></a>
+
+The **&lt;Flex&gt;** component allows for an elastic layout.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section87974157296"></a>
+
+## Child Components
 
 This component can contain child components.
 
-## APIs<a name="section14196162892911"></a>
-
-Flex\(options?: \{ direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign \}\)
-
-Creates a standard  **<Flex\>**  component.
-
--   Parameters
-
-    <a name="table1392916196212"></a>
-    <table><thead align="left"><tr id="row19306191218"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p199307193217"><a name="p199307193217"></a><a name="p199307193217"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="15.959999999999999%" id="mcps1.1.6.1.2"><p id="p119302191128"><a name="p119302191128"></a><a name="p119302191128"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.04%" id="mcps1.1.6.1.3"><p id="p7930141911211"><a name="p7930141911211"></a><a name="p7930141911211"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.96%" id="mcps1.1.6.1.4"><p id="p1393020194219"><a name="p1393020194219"></a><a name="p1393020194219"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="39.93%" id="mcps1.1.6.1.5"><p id="p693061912210"><a name="p693061912210"></a><a name="p693061912210"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1093021911217"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p119307198218"><a name="p119307198218"></a><a name="p119307198218"></a>direction</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.959999999999999%" headers="mcps1.1.6.1.2 "><p id="p129301719828"><a name="p129301719828"></a><a name="p129301719828"></a><a href="#li1282804954411">FlexDirection</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.04%" headers="mcps1.1.6.1.3 "><p id="p893091913213"><a name="p893091913213"></a><a name="p893091913213"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.4 "><p id="p029607124312"><a name="p029607124312"></a><a name="p029607124312"></a>Row</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="39.93%" headers="mcps1.1.6.1.5 "><p id="p693016198212"><a name="p693016198212"></a><a name="p693016198212"></a>Direction in which child components are arranged in the <strong id="b57824685219"><a name="b57824685219"></a><a name="b57824685219"></a>&lt;Flex&gt;</strong> component, that is, the direction of the main axis.</p>
-    </td>
-    </tr>
-    <tr id="row1924045711917"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p72401857201915"><a name="p72401857201915"></a><a name="p72401857201915"></a>wrap</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.959999999999999%" headers="mcps1.1.6.1.2 "><p id="p14240957171918"><a name="p14240957171918"></a><a name="p14240957171918"></a><a href="#li8211359104415">FlexWrap</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.04%" headers="mcps1.1.6.1.3 "><p id="p62402572196"><a name="p62402572196"></a><a name="p62402572196"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.4 "><p id="p4240957101912"><a name="p4240957101912"></a><a name="p4240957101912"></a>NoWrap</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="39.93%" headers="mcps1.1.6.1.5 "><p id="p4240145781913"><a name="p4240145781913"></a><a name="p4240145781913"></a>Whether the <strong id="b254013538"><a name="b254013538"></a><a name="b254013538"></a>&lt;Flex&gt;</strong> component has a single line or multiple lines.</p>
-    </td>
-    </tr>
-    <tr id="row186691154417"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p1366161134412"><a name="p1366161134412"></a><a name="p1366161134412"></a>justifyContent</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.959999999999999%" headers="mcps1.1.6.1.2 "><p id="p126661174410"><a name="p126661174410"></a><a name="p126661174410"></a><a href="#li1540916112452">FlexAlign</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.04%" headers="mcps1.1.6.1.3 "><p id="p12671018444"><a name="p12671018444"></a><a name="p12671018444"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.4 "><p id="p106741164418"><a name="p106741164418"></a><a name="p106741164418"></a>Start</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="39.93%" headers="mcps1.1.6.1.5 "><p id="p186715174414"><a name="p186715174414"></a><a name="p186715174414"></a>Alignment mode of the child components in the <strong id="b516691085414"><a name="b516691085414"></a><a name="b516691085414"></a>&lt;Flex&gt;</strong> component along the main axis.</p>
-    </td>
-    </tr>
-    <tr id="row146013564415"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p12602145154413"><a name="p12602145154413"></a><a name="p12602145154413"></a>alignItems</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.959999999999999%" headers="mcps1.1.6.1.2 "><p id="p76024516446"><a name="p76024516446"></a><a name="p76024516446"></a><a href="ts-appendix-enums.md#section14211428171612">ItemAlign</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.04%" headers="mcps1.1.6.1.3 "><p id="p18602105114417"><a name="p18602105114417"></a><a name="p18602105114417"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.4 "><p id="p1760213594419"><a name="p1760213594419"></a><a name="p1760213594419"></a>Stretch</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="39.93%" headers="mcps1.1.6.1.5 "><p id="p131528112370"><a name="p131528112370"></a><a name="p131528112370"></a>Alignment mode of the child components in the <strong id="b185701352125416"><a name="b185701352125416"></a><a name="b185701352125416"></a>&lt;Flex&gt;</strong> component along the cross axis.</p>
-    </td>
-    </tr>
-    <tr id="row0512101004411"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p7512151013447"><a name="p7512151013447"></a><a name="p7512151013447"></a>alignContent</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.959999999999999%" headers="mcps1.1.6.1.2 "><p id="p125121810184411"><a name="p125121810184411"></a><a name="p125121810184411"></a><a href="#li1540916112452">FlexAlign</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.04%" headers="mcps1.1.6.1.3 "><p id="p165121010194414"><a name="p165121010194414"></a><a name="p165121010194414"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.4 "><p id="p185121310134412"><a name="p185121310134412"></a><a name="p185121310134412"></a>Start</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="39.93%" headers="mcps1.1.6.1.5 "><p id="p151219104444"><a name="p151219104444"></a><a name="p151219104444"></a>Alignment mode of the child components in a multi-line <strong id="b18263203718317"><a name="b18263203718317"></a><a name="b18263203718317"></a>&lt;Flex&gt;</strong> component along the cross axis. This parameter is valid only when <strong id="b1176602216556"><a name="b1176602216556"></a><a name="b1176602216556"></a>wrap</strong> is set to <strong id="b15251726135518"><a name="b15251726135518"></a><a name="b15251726135518"></a>Wrap</strong> or <strong id="b1147516323559"><a name="b1147516323559"></a><a name="b1147516323559"></a>WrapReverse</strong>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li1282804954411"></a>FlexDirection enums
-
-    <a name="table3452114216394"></a>
-    <table><thead align="left"><tr id="row245219426397"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p545244283914"><a name="p545244283914"></a><a name="p545244283914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p2452114203917"><a name="p2452114203917"></a><a name="p2452114203917"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6452144218390"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p34529427398"><a name="p34529427398"></a><a name="p34529427398"></a>Row</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245211421393"><a name="p1245211421393"></a><a name="p1245211421393"></a>The child components are arranged in the same direction as the main axis runs along the rows.</p>
-    </td>
-    </tr>
-    <tr id="row12452184217398"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p54523425398"><a name="p54523425398"></a><a name="p54523425398"></a>RowReverse</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p745215426391"><a name="p745215426391"></a><a name="p745215426391"></a>The child components are arranged opposite to the <strong id="b207941318124617"><a name="b207941318124617"></a><a name="b207941318124617"></a>Row</strong> direction.</p>
-    </td>
-    </tr>
-    <tr id="row9452134213392"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p510719111403"><a name="p510719111403"></a><a name="p510719111403"></a>Column</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p154533425394"><a name="p154533425394"></a><a name="p154533425394"></a>The child components are arranged in the same direction as the main axis runs down the columns.</p>
-    </td>
-    </tr>
-    <tr id="row1345313424399"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1766215124010"><a name="p1766215124010"></a><a name="p1766215124010"></a>ColumnReverse</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245319426394"><a name="p1245319426394"></a><a name="p1245319426394"></a>The child components are arranged opposite to the <strong id="b9521933125411"><a name="b9521933125411"></a><a name="b9521933125411"></a>Column</strong> direction.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   <a name="li8211359104415"></a>FlexWrap enums
-
-    <a name="table0702724614"></a>
-    <table><thead align="left"><tr id="row1702182467"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p1670213215619"><a name="p1670213215619"></a><a name="p1670213215619"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p16702721668"><a name="p16702721668"></a><a name="p16702721668"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1870292668"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p11702622618"><a name="p11702622618"></a><a name="p11702622618"></a>NoWrap</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p870222861"><a name="p870222861"></a><a name="p870222861"></a>The child components in the <strong id="b1459093217319"><a name="b1459093217319"></a><a name="b1459093217319"></a>&lt;Flex&gt;</strong> component are arranged in a single line, and they may overflow.</p>
-    </td>
-    </tr>
-    <tr id="row67021021269"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p870232968"><a name="p870232968"></a><a name="p870232968"></a>Wrap</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1470218216616"><a name="p1470218216616"></a><a name="p1470218216616"></a>The child components in the <strong id="b13156747413"><a name="b13156747413"></a><a name="b13156747413"></a>&lt;Flex&gt;</strong> component are arranged in multiple lines, and they may overflow.</p>
-    </td>
-    </tr>
-    <tr id="row2702621867"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p3702321463"><a name="p3702321463"></a><a name="p3702321463"></a>WrapReverse</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p870213213620"><a name="p870213213620"></a><a name="p870213213620"></a>The child components in the <strong id="b1829466757"><a name="b1829466757"></a><a name="b1829466757"></a>&lt;Flex&gt;</strong> component are reversely arranged in multiple lines, and they may overflow.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   <a name="li1540916112452"></a>FlexAlign enums
-
-    <a name="table1688854511115"></a>
-    <table><thead align="left"><tr id="row488814456115"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p15888245171113"><a name="p15888245171113"></a><a name="p15888245171113"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p68881545171110"><a name="p68881545171110"></a><a name="p68881545171110"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row3888164515112"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p18888114513115"><a name="p18888114513115"></a><a name="p18888114513115"></a>Start</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p788818451116"><a name="p788818451116"></a><a name="p788818451116"></a>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.</p>
-    </td>
-    </tr>
-    <tr id="row1488834517117"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p0888164551119"><a name="p0888164551119"></a><a name="p0888164551119"></a>Center</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p5888945161112"><a name="p5888945161112"></a><a name="p5888945161112"></a>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.</p>
-    </td>
-    </tr>
-    <tr id="row6888545131114"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p988813459116"><a name="p988813459116"></a><a name="p988813459116"></a>End</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p7888945151114"><a name="p7888945151114"></a><a name="p7888945151114"></a>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.</p>
-    </td>
-    </tr>
-    <tr id="row1888104591116"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p2088819453111"><a name="p2088819453111"></a><a name="p2088819453111"></a>SpaceBetween</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p16888845151118"><a name="p16888845151118"></a><a name="p16888845151118"></a>The child components are evenly distributed along the main axis. 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.</p>
-    </td>
-    </tr>
-    <tr id="row1271965421219"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p77209547128"><a name="p77209547128"></a><a name="p77209547128"></a>SpaceAround</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p643212229589"><a name="p643212229589"></a><a name="p643212229589"></a>The child components are evenly distributed along the main axis, with a half-size space on either end. 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.</p>
-    </td>
-    </tr>
-    <tr id="row18985013132"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1789816012137"><a name="p1789816012137"></a><a name="p1789816012137"></a>SpaceEvenly</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1889818012134"><a name="p1889818012134"></a><a name="p1889818012134"></a>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.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section14441203783118"></a>
+
+## APIs
+
+Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
+
+Creates a standard **&lt;Flex&gt;** component.
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | direction | FlexDirection | No | FlexDirection.Row | Direction&nbsp;in&nbsp;which&nbsp;child&nbsp;components&nbsp;are&nbsp;arranged&nbsp;in&nbsp;the&nbsp;**&lt;Flex&gt;**&nbsp;component,&nbsp;that&nbsp;is,&nbsp;the&nbsp;direction&nbsp;of&nbsp;the&nbsp;main&nbsp;axis. |
+  | wrap | FlexWrap | No | FlexWrap.NoWrap | Whether&nbsp;the&nbsp;**&lt;Flex&gt;**&nbsp;component&nbsp;has&nbsp;a&nbsp;single&nbsp;line&nbsp;or&nbsp;multiple&nbsp;lines. |
+  | justifyContent | FlexAlign | No | FlexAlign.Start | Alignment&nbsp;mode&nbsp;of&nbsp;the&nbsp;child&nbsp;components&nbsp;in&nbsp;the&nbsp;**&lt;Flex&gt;**&nbsp;component&nbsp;along&nbsp;the&nbsp;main&nbsp;axis. |
+  | alignItems | [ItemAlign](ts-appendix-enums.md#itemalign-enums) | No | ItemAlign.Stretch | Alignment&nbsp;mode&nbsp;of&nbsp;the&nbsp;child&nbsp;components&nbsp;in&nbsp;the&nbsp;**&lt;Flex&gt;**&nbsp;component&nbsp;along&nbsp;the&nbsp;cross&nbsp;axis. |
+  | alignContent | FlexAlign | No | FlexAlign.Start | Alignment&nbsp;mode&nbsp;of&nbsp;the&nbsp;child&nbsp;components&nbsp;in&nbsp;a&nbsp;multi-line&nbsp;**&lt;Flex&gt;**&nbsp;component&nbsp;along&nbsp;the&nbsp;cross&nbsp;axis.&nbsp;This&nbsp;parameter&nbsp;is&nbsp;valid&nbsp;only&nbsp;when&nbsp;**wrap**&nbsp;is&nbsp;set&nbsp;to&nbsp;**Wrap**&nbsp;or&nbsp;**WrapReverse**. |
+
+- FlexDirection enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Row | The&nbsp;child&nbsp;components&nbsp;are&nbsp;arranged&nbsp;in&nbsp;the&nbsp;same&nbsp;direction&nbsp;as&nbsp;the&nbsp;main&nbsp;axis&nbsp;runs&nbsp;along&nbsp;the&nbsp;rows. | 
+  | RowReverse | The&nbsp;child&nbsp;components&nbsp;are&nbsp;arranged&nbsp;opposite&nbsp;to&nbsp;the&nbsp;**Row**&nbsp;direction. | 
+  | Column | The&nbsp;child&nbsp;components&nbsp;are&nbsp;arranged&nbsp;in&nbsp;the&nbsp;same&nbsp;direction&nbsp;as&nbsp;the&nbsp;main&nbsp;axis&nbsp;runs&nbsp;down&nbsp;the&nbsp;columns. | 
+  | ColumnReverse | The&nbsp;child&nbsp;components&nbsp;are&nbsp;arranged&nbsp;opposite&nbsp;to&nbsp;the&nbsp;**Column**&nbsp;direction. | 
+
+- FlexWrap enums
+    | Name | Description | 
+  | -------- | -------- |
+  | NoWrap | The&nbsp;child&nbsp;components&nbsp;in&nbsp;the&nbsp;**&lt;Flex&gt;**&nbsp;component&nbsp;are&nbsp;arranged&nbsp;in&nbsp;a&nbsp;single&nbsp;line,&nbsp;and&nbsp;they&nbsp;may&nbsp;overflow. | 
+  | Wrap | The&nbsp;child&nbsp;components&nbsp;in&nbsp;the&nbsp;**&lt;Flex&gt;**&nbsp;component&nbsp;are&nbsp;arranged&nbsp;in&nbsp;multiple&nbsp;lines,&nbsp;and&nbsp;they&nbsp;may&nbsp;overflow. | 
+  | WrapReverse | The&nbsp;child&nbsp;components&nbsp;in&nbsp;the&nbsp;**&lt;Flex&gt;**&nbsp;component&nbsp;are&nbsp;reversely&nbsp;arranged&nbsp;in&nbsp;multiple&nbsp;lines,&nbsp;and&nbsp;they&nbsp;may&nbsp;overflow. | 
+
+- FlexAlign enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Start | The&nbsp;child&nbsp;components&nbsp;are&nbsp;aligned&nbsp;with&nbsp;the&nbsp;start&nbsp;edge&nbsp;of&nbsp;the&nbsp;main&nbsp;axis.&nbsp;The&nbsp;first&nbsp;component&nbsp;is&nbsp;aligned&nbsp;with&nbsp;the&nbsp;main-start,&nbsp;and&nbsp;subsequent&nbsp;components&nbsp;are&nbsp;aligned&nbsp;with&nbsp;the&nbsp;previous&nbsp;one. | 
+  | Center | The&nbsp;child&nbsp;components&nbsp;are&nbsp;aligned&nbsp;in&nbsp;the&nbsp;center&nbsp;of&nbsp;the&nbsp;main&nbsp;axis.&nbsp;The&nbsp;space&nbsp;between&nbsp;the&nbsp;first&nbsp;component&nbsp;and&nbsp;the&nbsp;main-start&nbsp;is&nbsp;the&nbsp;same&nbsp;as&nbsp;that&nbsp;between&nbsp;the&nbsp;last&nbsp;component&nbsp;and&nbsp;the&nbsp;main-end. | 
+  | End | The&nbsp;child&nbsp;components&nbsp;are&nbsp;aligned&nbsp;with&nbsp;the&nbsp;end&nbsp;edge&nbsp;of&nbsp;the&nbsp;main&nbsp;axis.&nbsp;The&nbsp;last&nbsp;component&nbsp;is&nbsp;aligned&nbsp;with&nbsp;the&nbsp;main-end,&nbsp;and&nbsp;other&nbsp;components&nbsp;are&nbsp;aligned&nbsp;with&nbsp;the&nbsp;next&nbsp;one. | 
+  | SpaceBetween | The&nbsp;child&nbsp;components&nbsp;are&nbsp;evenly&nbsp;distributed&nbsp;along&nbsp;the&nbsp;main&nbsp;axis.&nbsp;The&nbsp;first&nbsp;component&nbsp;is&nbsp;aligned&nbsp;with&nbsp;the&nbsp;main-start,&nbsp;the&nbsp;last&nbsp;component&nbsp;is&nbsp;aligned&nbsp;with&nbsp;the&nbsp;main-end,&nbsp;and&nbsp;the&nbsp;remaining&nbsp;components&nbsp;are&nbsp;distributed&nbsp;so&nbsp;that&nbsp;the&nbsp;space&nbsp;between&nbsp;any&nbsp;two&nbsp;adjacent&nbsp;components&nbsp;is&nbsp;the&nbsp;same. | 
+  | SpaceAround | The&nbsp;child&nbsp;components&nbsp;are&nbsp;evenly&nbsp;distributed&nbsp;along&nbsp;the&nbsp;main&nbsp;axis,&nbsp;with&nbsp;a&nbsp;half-size&nbsp;space&nbsp;on&nbsp;either&nbsp;end.&nbsp;The&nbsp;space&nbsp;between&nbsp;any&nbsp;two&nbsp;adjacent&nbsp;components&nbsp;is&nbsp;the&nbsp;same.&nbsp;The&nbsp;space&nbsp;between&nbsp;the&nbsp;first&nbsp;component&nbsp;and&nbsp;main-start,&nbsp;and&nbsp;that&nbsp;between&nbsp;the&nbsp;last&nbsp;component&nbsp;and&nbsp;cross-main&nbsp;are&nbsp;both&nbsp;half&nbsp;the&nbsp;size&nbsp;of&nbsp;the&nbsp;space&nbsp;between&nbsp;two&nbsp;adjacent&nbsp;components. | 
+  | SpaceEvenly | The&nbsp;child&nbsp;components&nbsp;are&nbsp;equally&nbsp;distributed&nbsp;along&nbsp;the&nbsp;main&nbsp;axis.&nbsp;The&nbsp;space&nbsp;between&nbsp;the&nbsp;first&nbsp;component&nbsp;and&nbsp;main-start,&nbsp;the&nbsp;space&nbsp;between&nbsp;the&nbsp;last&nbsp;component&nbsp;and&nbsp;main-end,&nbsp;and&nbsp;the&nbsp;space&nbsp;between&nbsp;two&nbsp;adjacent&nbsp;components&nbsp;are&nbsp;the&nbsp;same. | 
+
+
+## Example
+
 
 ```
 // Example 01
@@ -259,7 +123,8 @@ struct FlexExample1 {
 }
 ```
 
-![](figures/flex01.gif)
+![en-us_image_0000001256978365](figures/en-us_image_0000001256978365.gif)
+
 
 ```
 // Example 02
@@ -305,7 +170,8 @@ struct FlexExample2 {
 }
 ```
 
-![](figures/flex02.png)
+![en-us_image_0000001211898500](figures/en-us_image_0000001211898500.png)
+
 
 ```
 // Example 03
@@ -354,7 +220,8 @@ struct FlexExample3 {
 }
 ```
 
-![](figures/flex03.gif)
+![en-us_image_0000001212218462](figures/en-us_image_0000001212218462.gif)
+
 
 ```
 // Example 04
@@ -403,9 +270,10 @@ struct FlexExample4 {
 }
 ```
 
-![](figures/flex04.jpg)
+![en-us_image_0000001257138371](figures/en-us_image_0000001257138371.jpg)
+
+![en-us_image_0000001212378426](figures/en-us_image_0000001212378426.gif)
 
-![](figures/flex04-2.gif)
 
 ```
 // Example 05
@@ -454,5 +322,4 @@ struct FlexExample5 {
 }
 ```
 
-![](figures/flex05.gif)
-
+![en-us_image_0000001256858413](figures/en-us_image_0000001256858413.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-container-grid.md b/en/application-dev/reference/arkui-ts/ts-container-grid.md
index 6d142f9eec1c3bb7a631f05611e7f82806129f3a..9dcde4d28f857984dcea9bc7a37d22948df9ab87 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-grid.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-grid.md
@@ -1,92 +1,60 @@
-# Grid<a name="EN-US_TOPIC_0000001237355067"></a>
+# Grid
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Grid\>**  component is a two-dimensional layout. The component is divided into rows and columns, to form cells. You can specify the cell where an item is located and combine different grids to form various layouts.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section62209458329"></a>
+
+The **&lt;Grid&gt;** component is a two-dimensional layout. The component is divided into rows and columns, to form cells. You can specify the cell where an item is located and combine different grids to form various layouts.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section18342185015322"></a>
-
-This component contains the child component  [<GridItem\>](ts-container-griditem.md).
-
-## APIs<a name="section3362154133312"></a>
-
-Grid\(\)
-
-## Attributes<a name="section4907201336"></a>
-
-<a name="table1689mcpsimp"></a>
-<table><thead align="left"><tr id="row1696mcpsimp"><th class="cellrowborder" valign="top" width="19.09%" id="mcps1.1.5.1.1"><p id="p1698mcpsimp"><a name="p1698mcpsimp"></a><a name="p1698mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="11.600000000000001%" id="mcps1.1.5.1.2"><p id="p1700mcpsimp"><a name="p1700mcpsimp"></a><a name="p1700mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="11.92%" id="mcps1.1.5.1.3"><p id="p1702mcpsimp"><a name="p1702mcpsimp"></a><a name="p1702mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="57.38999999999999%" id="mcps1.1.5.1.4"><p id="p1704mcpsimp"><a name="p1704mcpsimp"></a><a name="p1704mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1705mcpsimp"><td class="cellrowborder" valign="top" width="19.09%" headers="mcps1.1.5.1.1 "><p id="p1707mcpsimp"><a name="p1707mcpsimp"></a><a name="p1707mcpsimp"></a>columnsTemplate</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.600000000000001%" headers="mcps1.1.5.1.2 "><p id="p1709mcpsimp"><a name="p1709mcpsimp"></a><a name="p1709mcpsimp"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.92%" headers="mcps1.1.5.1.3 "><p id="p1711mcpsimp"><a name="p1711mcpsimp"></a><a name="p1711mcpsimp"></a>'1fr'</p>
-</td>
-<td class="cellrowborder" valign="top" width="57.38999999999999%" headers="mcps1.1.5.1.4 "><p id="p1713mcpsimp"><a name="p1713mcpsimp"></a><a name="p1713mcpsimp"></a>Number of columns in the current grid layout. If this parameter is not set, one column is used by default. For example, '1fr 1fr 2fr' divides the component into three columns, with four equal parts. The first column occupies one part, the second column occupies one part, and the third column occupies two parts.</p>
-</td>
-</tr>
-<tr id="row1714mcpsimp"><td class="cellrowborder" valign="top" width="19.09%" headers="mcps1.1.5.1.1 "><p id="p1716mcpsimp"><a name="p1716mcpsimp"></a><a name="p1716mcpsimp"></a>rowsTemplate</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.600000000000001%" headers="mcps1.1.5.1.2 "><p id="p1718mcpsimp"><a name="p1718mcpsimp"></a><a name="p1718mcpsimp"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.92%" headers="mcps1.1.5.1.3 "><p id="p1720mcpsimp"><a name="p1720mcpsimp"></a><a name="p1720mcpsimp"></a>'1fr'</p>
-</td>
-<td class="cellrowborder" valign="top" width="57.38999999999999%" headers="mcps1.1.5.1.4 "><p id="p1722mcpsimp"><a name="p1722mcpsimp"></a><a name="p1722mcpsimp"></a>Number of rows in the current grid layout. If this parameter is not set, one row is used by default. For example, '1fr 1fr 2fr' divides the component into three rows. The width allowed by the parent component is divided into four equal parts. The first row occupies one part, the second row occupies one part, and the third row occupies two parts.</p>
-</td>
-</tr>
-<tr id="row1723mcpsimp"><td class="cellrowborder" valign="top" width="19.09%" headers="mcps1.1.5.1.1 "><p id="p1725mcpsimp"><a name="p1725mcpsimp"></a><a name="p1725mcpsimp"></a>columnsGap</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.600000000000001%" headers="mcps1.1.5.1.2 "><p id="p1727mcpsimp"><a name="p1727mcpsimp"></a><a name="p1727mcpsimp"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.92%" headers="mcps1.1.5.1.3 "><p id="p1729mcpsimp"><a name="p1729mcpsimp"></a><a name="p1729mcpsimp"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="57.38999999999999%" headers="mcps1.1.5.1.4 "><p id="p1731mcpsimp"><a name="p1731mcpsimp"></a><a name="p1731mcpsimp"></a>Spacing between columns.</p>
-</td>
-</tr>
-<tr id="row1732mcpsimp"><td class="cellrowborder" valign="top" width="19.09%" headers="mcps1.1.5.1.1 "><p id="p1734mcpsimp"><a name="p1734mcpsimp"></a><a name="p1734mcpsimp"></a>rowsGap</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.600000000000001%" headers="mcps1.1.5.1.2 "><p id="p1736mcpsimp"><a name="p1736mcpsimp"></a><a name="p1736mcpsimp"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.92%" headers="mcps1.1.5.1.3 "><p id="p1738mcpsimp"><a name="p1738mcpsimp"></a><a name="p1738mcpsimp"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="57.38999999999999%" headers="mcps1.1.5.1.4 "><p id="p1740mcpsimp"><a name="p1740mcpsimp"></a><a name="p1740mcpsimp"></a>Spacing between rows.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Events<a name="section1822319492372"></a>
-
-<a name="table1422484983716"></a>
-<table><thead align="left"><tr id="row122247497373"><th class="cellrowborder" valign="top" width="39.77%" id="mcps1.1.3.1.1"><p id="p1224949123712"><a name="p1224949123712"></a><a name="p1224949123712"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="60.23%" id="mcps1.1.3.1.2"><p id="p1022424983717"><a name="p1022424983717"></a><a name="p1022424983717"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row19224134910371"><td class="cellrowborder" valign="top" width="39.77%" headers="mcps1.1.3.1.1 "><p id="p622474918373"><a name="p622474918373"></a><a name="p622474918373"></a>onScrollIndex(first: number) =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" width="60.23%" headers="mcps1.1.3.1.2 "><p id="p18224144918373"><a name="p18224144918373"></a><a name="p18224144918373"></a>Triggered when the start item of the grid changes.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section183419570330"></a>
+
+## Child Components
+
+This component contains the child component [<GridItem>](ts-container-griditem.md).
+
+
+## APIs
+
+Grid()
+
+
+## Attributes
+
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| columnsTemplate | string | '1fr' | Number&nbsp;of&nbsp;columns&nbsp;in&nbsp;the&nbsp;current&nbsp;grid&nbsp;layout.&nbsp;If&nbsp;this&nbsp;parameter&nbsp;is&nbsp;not&nbsp;set,&nbsp;one&nbsp;column&nbsp;is&nbsp;used&nbsp;by&nbsp;default.&nbsp;For&nbsp;example,&nbsp;'1fr&nbsp;1fr&nbsp;2fr'&nbsp;divides&nbsp;the&nbsp;component&nbsp;into&nbsp;three&nbsp;columns,&nbsp;with&nbsp;four&nbsp;equal&nbsp;parts.&nbsp;The&nbsp;first&nbsp;column&nbsp;occupies&nbsp;one&nbsp;part,&nbsp;the&nbsp;second&nbsp;column&nbsp;occupies&nbsp;one&nbsp;part,&nbsp;and&nbsp;the&nbsp;third&nbsp;column&nbsp;occupies&nbsp;two&nbsp;parts. |
+| rowsTemplate | string | '1fr' | Number&nbsp;of&nbsp;rows&nbsp;in&nbsp;the&nbsp;current&nbsp;grid&nbsp;layout.&nbsp;If&nbsp;this&nbsp;parameter&nbsp;is&nbsp;not&nbsp;set,&nbsp;one&nbsp;row&nbsp;is&nbsp;used&nbsp;by&nbsp;default.&nbsp;For&nbsp;example,&nbsp;'1fr&nbsp;1fr&nbsp;2fr'&nbsp;divides&nbsp;the&nbsp;component&nbsp;into&nbsp;three&nbsp;rows.&nbsp;The&nbsp;width&nbsp;allowed&nbsp;by&nbsp;the&nbsp;parent&nbsp;component&nbsp;is&nbsp;divided&nbsp;into&nbsp;four&nbsp;equal&nbsp;parts.&nbsp;The&nbsp;first&nbsp;row&nbsp;occupies&nbsp;one&nbsp;part,&nbsp;the&nbsp;second&nbsp;row&nbsp;occupies&nbsp;one&nbsp;part,&nbsp;and&nbsp;the&nbsp;third&nbsp;row&nbsp;occupies&nbsp;two&nbsp;parts. |
+| columnsGap | Length | 0 | Spacing&nbsp;between&nbsp;columns. |
+| rowsGap | Length | 0 | Spacing&nbsp;between&nbsp;rows. |
+| editMode<sup>8+</sup> | boolean | false | Whether&nbsp;to&nbsp;enter&nbsp;editing&nbsp;mode.&nbsp;In&nbsp;editing&nbsp;mode,&nbsp;you&nbsp;can&nbsp;drag&nbsp;the&nbsp;**&lt;[GridItem](ts-container-griditem.md)&gt;**&nbsp;in&nbsp;the&nbsp;**&lt;Gird&gt;**&nbsp;component. |
+| layoutDirection<sup>8+</sup> | [LayoutDirection](ts-appendix-enums.md#layoutdirection-enums) | LayoutDirection.Row | Main axis direction of the layout. The options are as follows:- **LayoutDirection.Row**: Horizontal layout, where the child components are arranged in the same direction as the main axis runs along the rows.- **LayoutDirection.Column**: Vertical layout, where the child components are arranged in the same direction as the main axis runs down the columns. |
+| maxCount<sup>8+</sup> | number | 1 | Maximum&nbsp;number&nbsp;of&nbsp;rows&nbsp;that&nbsp;can&nbsp;be&nbsp;displayed. |
+| minCount<sup>8+</sup> | number | 1 | Minimum&nbsp;number&nbsp;of&nbsp;rows&nbsp;that&nbsp;can&nbsp;be&nbsp;displayed. |
+| cellLength<sup>8+</sup> | number | 0 | Fixed&nbsp;height&nbsp;per&nbsp;row. |
+| multiSelectable<sup>8+</sup> | boolean | false | Whether&nbsp;to&nbsp;enable&nbsp;mouse&nbsp;frame&nbsp;selection.<br/>-&nbsp;**false**:&nbsp;The&nbsp;mouse&nbsp;frame&nbsp;selection&nbsp;is&nbsp;disabled.<br/>-&nbsp;**true**:&nbsp;The&nbsp;mouse&nbsp;frame&nbsp;selection&nbsp;is&nbsp;disabled. |
+| edgeEffection<sup>8+</sup> | EdgeEffect | EdgeEffect.Spring | Edge effect. For details, see **EdgeEffect**. |
+
+- EdgeEffect enums
+
+  | Name   | Description                                                  |
+  | ------ | ------------------------------------------------------------ |
+  | Spring | Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded. |
+  | None   | No effect after the scrollbar is moved to the edge.          |
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onScrollIndex(first:&nbsp;number)&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;start&nbsp;item&nbsp;of&nbsp;the&nbsp;grid&nbsp;changes. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -147,5 +115,5 @@ struct GridExample {
 }
 ```
 
-![](figures/grid-3.gif)
+![en-us_image_0000001212218434](figures/en-us_image_0000001212218434.gif)
 
diff --git a/en/application-dev/reference/arkui-ts/ts-container-gridcontainer.md b/en/application-dev/reference/arkui-ts/ts-container-gridcontainer.md
index 034b5719ead7182bf945a2640366583a458e4755..5db6c9fc044571a2e9bd6ac1cb013111d0bd11cb 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-gridcontainer.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-gridcontainer.md
@@ -1,131 +1,57 @@
-# GridContainer<a name="EN-US_TOPIC_0000001192755112"></a>
+# GridContainer
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<GridContainer\>**  component lays out components vertically. It is used only in the grid layout.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section53281531154915"></a>
+
+The **&lt;GridContainer&gt;** component lays out components vertically. It is used only in the grid layout.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section5989144051714"></a>
+
+## Child Components
 
 This component can contain child components.
 
-## APIs<a name="section1643325819470"></a>
-
-GridContainer\(options?: \{ columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length\}\)
-
--   Parameter
-
-    <a name="table69661135912"></a>
-    <table><thead align="left"><tr id="row149668318915"><th class="cellrowborder" valign="top" width="13.71%" id="mcps1.1.6.1.1"><p id="p7966738914"><a name="p7966738914"></a><a name="p7966738914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.62%" id="mcps1.1.6.1.2"><p id="p296713699"><a name="p296713699"></a><a name="p296713699"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="8.469999999999999%" id="mcps1.1.6.1.3"><p id="p196718315911"><a name="p196718315911"></a><a name="p196718315911"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="23.380000000000003%" id="mcps1.1.6.1.4"><p id="p215210313820"><a name="p215210313820"></a><a name="p215210313820"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="40.82%" id="mcps1.1.6.1.5"><p id="p9967231197"><a name="p9967231197"></a><a name="p9967231197"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row99671533914"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p79671633910"><a name="p79671633910"></a><a name="p79671633910"></a>columns</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p11967433914"><a name="p11967433914"></a><a name="p11967433914"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p19671336916"><a name="p19671336916"></a><a name="p19671336916"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.380000000000003%" headers="mcps1.1.6.1.4 "><p id="p164621417916"><a name="p164621417916"></a><a name="p164621417916"></a>'auto'</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.82%" headers="mcps1.1.6.1.5 "><p id="p69671631796"><a name="p69671631796"></a><a name="p69671631796"></a>Total number of columns in the current layout.</p>
-    </td>
-    </tr>
-    <tr id="row18967831393"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p39671131590"><a name="p39671131590"></a><a name="p39671131590"></a>sizeType</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p126051952172518"><a name="p126051952172518"></a><a name="p126051952172518"></a><a href="#li126518511237">SizeType</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p149671932919"><a name="p149671932919"></a><a name="p149671932919"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.380000000000003%" headers="mcps1.1.6.1.4 "><p id="p576418295321"><a name="p576418295321"></a><a name="p576418295321"></a>Auto</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.82%" headers="mcps1.1.6.1.5 "><p id="p19675312911"><a name="p19675312911"></a><a name="p19675312911"></a>Device size type.</p>
-    </td>
-    </tr>
-    <tr id="row115021152652"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p150318521156"><a name="p150318521156"></a><a name="p150318521156"></a>gutter</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p135031752159"><a name="p135031752159"></a><a name="p135031752159"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p850315521454"><a name="p850315521454"></a><a name="p850315521454"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.380000000000003%" headers="mcps1.1.6.1.4 "><p id="p476414293326"><a name="p476414293326"></a><a name="p476414293326"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.82%" headers="mcps1.1.6.1.5 "><p id="p450325216517"><a name="p450325216517"></a><a name="p450325216517"></a>Gutter of the grid layout.</p>
-    </td>
-    </tr>
-    <tr id="row09618565518"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p209617561156"><a name="p209617561156"></a><a name="p209617561156"></a>margin</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p29695617520"><a name="p29695617520"></a><a name="p29695617520"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p29685615512"><a name="p29685615512"></a><a name="p29685615512"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.380000000000003%" headers="mcps1.1.6.1.4 "><p id="p16764192913326"><a name="p16764192913326"></a><a name="p16764192913326"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.82%" headers="mcps1.1.6.1.5 "><p id="p396175611518"><a name="p396175611518"></a><a name="p396175611518"></a>Margin of the grid layout.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li126518511237"></a>SizeType enums
-
-    <a name="table3452114216394"></a>
-    <table><thead align="left"><tr id="row245219426397"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p545244283914"><a name="p545244283914"></a><a name="p545244283914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p2452114203917"><a name="p2452114203917"></a><a name="p2452114203917"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6452144218390"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p34529427398"><a name="p34529427398"></a><a name="p34529427398"></a>XS</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245211421393"><a name="p1245211421393"></a><a name="p1245211421393"></a>Device of the minimum size.</p>
-    </td>
-    </tr>
-    <tr id="row12452184217398"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p54523425398"><a name="p54523425398"></a><a name="p54523425398"></a>SM</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p745215426391"><a name="p745215426391"></a><a name="p745215426391"></a>Small-sized device.</p>
-    </td>
-    </tr>
-    <tr id="row9452134213392"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p510719111403"><a name="p510719111403"></a><a name="p510719111403"></a>MD</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p154533425394"><a name="p154533425394"></a><a name="p154533425394"></a>Medium-sized device.</p>
-    </td>
-    </tr>
-    <tr id="row1345313424399"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1766215124010"><a name="p1766215124010"></a><a name="p1766215124010"></a>LG</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245319426394"><a name="p1245319426394"></a><a name="p1245319426394"></a>Large-sized device.</p>
-    </td>
-    </tr>
-    <tr id="row17691110192119"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p36991082112"><a name="p36991082112"></a><a name="p36991082112"></a>Auto</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p569111062118"><a name="p569111062118"></a><a name="p569111062118"></a>Auto. The size type is selected based on the device type.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section1131219513263"></a>
-
-Universal attributes and  [attributes](ts-container-column.md#section358284262918)  of the  **<Column\>**  component are supported.
-
-## Events<a name="section6359753182615"></a>
+
+## APIs
+
+GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})
+
+- Parameter
+    | Name | Type | Mandatory | Default&nbsp;Value | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | columns | number&nbsp;\|&nbsp;'auto' | No | 'auto' | Total&nbsp;number&nbsp;of&nbsp;columns&nbsp;in&nbsp;the&nbsp;current&nbsp;layout. |
+  | sizeType | SizeType | No | SizeType.Auto | Device&nbsp;size&nbsp;type. |
+  | gutter | Length | No | - | Gutter&nbsp;of&nbsp;the&nbsp;grid&nbsp;layout. |
+  | margin | Length | No | - | Margin&nbsp;of&nbsp;the&nbsp;grid&nbsp;layout. |
+
+- SizeType enums
+    | Name | Description | 
+  | -------- | -------- |
+  | XS | Device&nbsp;of&nbsp;the&nbsp;minimum&nbsp;size. | 
+  | SM | Small-sized&nbsp;device. | 
+  | MD | Medium-sized&nbsp;device. | 
+  | LG | Large-sized&nbsp;device. | 
+  | Auto | Auto.&nbsp;The&nbsp;size&nbsp;type&nbsp;is&nbsp;selected&nbsp;based&nbsp;on&nbsp;the&nbsp;device&nbsp;type. | 
+
+
+## Attributes
+
+Universal attributes and [attributes](ts-container-column.md#attributes) of the **&lt;Column&gt;** component are supported.
+
+
+## Events
 
 Universal events are supported.
 
-## Example<a name="section1078035104913"></a>
+
+## Example
+
 
 ```
 @Entry
@@ -196,5 +122,4 @@ struct GridContainerExample {
 }
 ```
 
-![](figures/grid.gif)
-
+![en-us_image_0000001256858425](figures/en-us_image_0000001256858425.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-container-griditem.md b/en/application-dev/reference/arkui-ts/ts-container-griditem.md
index a839e1cb6b9b0be44c627a26b873745b20d3c9b2..e035bee25bf7b1f93205c1efa4d5b5c6c9f3364f 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-griditem.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-griditem.md
@@ -1,85 +1,50 @@
-# GridItem<a name="EN-US_TOPIC_0000001237715083"></a>
+# GridItem
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<GridItem\>**  component provides a single item in a grid.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section14336424193517"></a>
+
+The **&lt;GridItem&gt;** component provides a single item in a grid.
+
+
+## Required Permissions
 
 None
 
-## Child Component<a name="section12191193463511"></a>
+
+## Child Component
 
 This component can contain child components.
 
-## APIs<a name="section158081656113510"></a>
-
-GridItem\(\)
-
-## Attributes<a name="section4907201336"></a>
-
-<a name="table1689mcpsimp"></a>
-<table><thead align="left"><tr id="row1696mcpsimp"><th class="cellrowborder" valign="top" width="19.09%" id="mcps1.1.5.1.1"><p id="p1698mcpsimp"><a name="p1698mcpsimp"></a><a name="p1698mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="11.600000000000001%" id="mcps1.1.5.1.2"><p id="p1700mcpsimp"><a name="p1700mcpsimp"></a><a name="p1700mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="7.920000000000001%" id="mcps1.1.5.1.3"><p id="p1702mcpsimp"><a name="p1702mcpsimp"></a><a name="p1702mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="61.39%" id="mcps1.1.5.1.4"><p id="p1704mcpsimp"><a name="p1704mcpsimp"></a><a name="p1704mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1705mcpsimp"><td class="cellrowborder" valign="top" width="19.09%" headers="mcps1.1.5.1.1 "><p id="p1707mcpsimp"><a name="p1707mcpsimp"></a><a name="p1707mcpsimp"></a>rowStart</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.600000000000001%" headers="mcps1.1.5.1.2 "><p id="p1709mcpsimp"><a name="p1709mcpsimp"></a><a name="p1709mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="7.920000000000001%" headers="mcps1.1.5.1.3 "><p id="p1711mcpsimp"><a name="p1711mcpsimp"></a><a name="p1711mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="61.39%" headers="mcps1.1.5.1.4 "><p id="p1713mcpsimp"><a name="p1713mcpsimp"></a><a name="p1713mcpsimp"></a>Start row number of the component.</p>
-</td>
-</tr>
-<tr id="row1714mcpsimp"><td class="cellrowborder" valign="top" width="19.09%" headers="mcps1.1.5.1.1 "><p id="p1716mcpsimp"><a name="p1716mcpsimp"></a><a name="p1716mcpsimp"></a>rowEnd</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.600000000000001%" headers="mcps1.1.5.1.2 "><p id="p1718mcpsimp"><a name="p1718mcpsimp"></a><a name="p1718mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="7.920000000000001%" headers="mcps1.1.5.1.3 "><p id="p1720mcpsimp"><a name="p1720mcpsimp"></a><a name="p1720mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="61.39%" headers="mcps1.1.5.1.4 "><p id="p1722mcpsimp"><a name="p1722mcpsimp"></a><a name="p1722mcpsimp"></a>End row number of the component.</p>
-</td>
-</tr>
-<tr id="row1723mcpsimp"><td class="cellrowborder" valign="top" width="19.09%" headers="mcps1.1.5.1.1 "><p id="p1725mcpsimp"><a name="p1725mcpsimp"></a><a name="p1725mcpsimp"></a>columnStart</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.600000000000001%" headers="mcps1.1.5.1.2 "><p id="p1727mcpsimp"><a name="p1727mcpsimp"></a><a name="p1727mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="7.920000000000001%" headers="mcps1.1.5.1.3 "><p id="p1729mcpsimp"><a name="p1729mcpsimp"></a><a name="p1729mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="61.39%" headers="mcps1.1.5.1.4 "><p id="p1731mcpsimp"><a name="p1731mcpsimp"></a><a name="p1731mcpsimp"></a>Start column number of the component.</p>
-</td>
-</tr>
-<tr id="row1732mcpsimp"><td class="cellrowborder" valign="top" width="19.09%" headers="mcps1.1.5.1.1 "><p id="p1734mcpsimp"><a name="p1734mcpsimp"></a><a name="p1734mcpsimp"></a>columnEnd</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.600000000000001%" headers="mcps1.1.5.1.2 "><p id="p1736mcpsimp"><a name="p1736mcpsimp"></a><a name="p1736mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="7.920000000000001%" headers="mcps1.1.5.1.3 "><p id="p1738mcpsimp"><a name="p1738mcpsimp"></a><a name="p1738mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="61.39%" headers="mcps1.1.5.1.4 "><p id="p1740mcpsimp"><a name="p1740mcpsimp"></a><a name="p1740mcpsimp"></a>End column number of the component.</p>
-</td>
-</tr>
-<tr id="row186131448193510"><td class="cellrowborder" valign="top" width="19.09%" headers="mcps1.1.5.1.1 "><p id="p206131748153520"><a name="p206131748153520"></a><a name="p206131748153520"></a>forceRebuild</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.600000000000001%" headers="mcps1.1.5.1.2 "><p id="p1661314883516"><a name="p1661314883516"></a><a name="p1661314883516"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="7.920000000000001%" headers="mcps1.1.5.1.3 "><p id="p1161314833520"><a name="p1161314833520"></a><a name="p1161314833520"></a>false</p>
-</td>
-<td class="cellrowborder" valign="top" width="61.39%" headers="mcps1.1.5.1.4 "><p id="p1961317489352"><a name="p1961317489352"></a><a name="p1961317489352"></a>Whether to re-create this node when the component is being built.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section8900105010439"></a>
 
+## APIs
+
+GridItem()
+
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| rowStart | number | - | Start&nbsp;row&nbsp;number&nbsp;of&nbsp;the&nbsp;component. | 
+| rowEnd | number | - | End&nbsp;row&nbsp;number&nbsp;of&nbsp;the&nbsp;component. | 
+| columnStart | number | - | Start&nbsp;column&nbsp;number&nbsp;of&nbsp;the&nbsp;component. | 
+| columnEnd | number | - | End&nbsp;column&nbsp;number&nbsp;of&nbsp;the&nbsp;component. | 
+| forceRebuild | boolean | false | Whether&nbsp;to&nbsp;re-create&nbsp;this&nbsp;node&nbsp;when&nbsp;the&nbsp;component&nbsp;is&nbsp;being&nbsp;built. | 
+| selectable<sup>8+</sup> | boolean | true | Whether&nbsp;the&nbsp;current&nbsp;**&lt;GridItem&gt;**&nbsp;is&nbsp;selectable&nbsp;by&nbsp;the&nbsp;mouse.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;This&nbsp;attribute&nbsp;takes&nbsp;effect&nbsp;only&nbsp;when&nbsp;mouse&nbsp;frame&nbsp;selection&nbsp;is&nbsp;enabled&nbsp;for&nbsp;the&nbsp;parent&nbsp;**&lt;Grid&gt;**&nbsp;container. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onSelect(callback:&nbsp;(isSelected:&nbsp;boolean)&nbsp;=&gt;&nbsp;any)<sup>8+</sup> | Triggered&nbsp;when&nbsp;the&nbsp;selected&nbsp;state&nbsp;of&nbsp;the&nbsp;**&lt;GridItem&gt;**&nbsp;changes.<br/>**isSelected**:&nbsp;Returns&nbsp;**true**&nbsp;if&nbsp;the&nbsp;**&lt;GridItem&gt;**&nbsp;is&nbsp;selected&nbsp;by&nbsp;the&nbsp;mouse;&nbsp;returns&nbsp;**false**&nbsp;otherwise. | 
+
+
+## Example
+
+  
 ```
 @Entry
 @Component
@@ -117,5 +82,4 @@ struct GridItemExample {
 }
 ```
 
-![](figures/griditem.gif)
-
+![en-us_image_0000001256858433](figures/en-us_image_0000001256858433.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-container-list.md b/en/application-dev/reference/arkui-ts/ts-container-list.md
index fffebb7e5072c2bbce95200fb5091f265b874e80..afd97f25485b0924c910d6c8387cd564e436a0b3 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-list.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-list.md
@@ -1,262 +1,78 @@
-# List<a name="EN-US_TOPIC_0000001237555113"></a>
+# List
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<List\>**  component provides a list container that presents a series of list items arranged in a column with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section0178213104516"></a>
 
-None
+The **&lt;List&gt;** component provides a list container that presents a series of list items arranged in a column with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text.
+
 
-## Child Components<a name="section872315253456"></a>
+## Required Permissions
 
-This component contains the child component  [<ListItem\>](ts-container-listitem.md).
+None
 
-## APIs<a name="section297911264713"></a>
 
-List\(value:\{space?: number, initialIndex?: number\}\)
+## Child Components
 
--   Parameters
+This component contains the child component [<ListItem>](../reference/arkui-ts/ts-container-listitem.md).
 
-    <a name="table1392916196212"></a>
-    <table><thead align="left"><tr id="row19306191218"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p199307193217"><a name="p199307193217"></a><a name="p199307193217"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="15.959999999999999%" id="mcps1.1.6.1.2"><p id="p119302191128"><a name="p119302191128"></a><a name="p119302191128"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.04%" id="mcps1.1.6.1.3"><p id="p7930141911211"><a name="p7930141911211"></a><a name="p7930141911211"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.88%" id="mcps1.1.6.1.4"><p id="p1393020194219"><a name="p1393020194219"></a><a name="p1393020194219"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="40.01%" id="mcps1.1.6.1.5"><p id="p693061912210"><a name="p693061912210"></a><a name="p693061912210"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1093021911217"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p119307198218"><a name="p119307198218"></a><a name="p119307198218"></a>space</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.959999999999999%" headers="mcps1.1.6.1.2 "><p id="p129301719828"><a name="p129301719828"></a><a name="p129301719828"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.04%" headers="mcps1.1.6.1.3 "><p id="p893091913213"><a name="p893091913213"></a><a name="p893091913213"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.88%" headers="mcps1.1.6.1.4 "><p id="p029607124312"><a name="p029607124312"></a><a name="p029607124312"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.01%" headers="mcps1.1.6.1.5 "><p id="p693016198212"><a name="p693016198212"></a><a name="p693016198212"></a>Spacing between list items.</p>
-    </td>
-    </tr>
-    <tr id="row1924045711917"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p72401857201915"><a name="p72401857201915"></a><a name="p72401857201915"></a>initialIndex</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.959999999999999%" headers="mcps1.1.6.1.2 "><p id="p14240957171918"><a name="p14240957171918"></a><a name="p14240957171918"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.04%" headers="mcps1.1.6.1.3 "><p id="p62402572196"><a name="p62402572196"></a><a name="p62402572196"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.88%" headers="mcps1.1.6.1.4 "><p id="p4240957101912"><a name="p4240957101912"></a><a name="p4240957101912"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.01%" headers="mcps1.1.6.1.5 "><p id="p4240145781913"><a name="p4240145781913"></a><a name="p4240145781913"></a>Item displayed at the beginning of the component when the current list is loaded for the first time, that is, the first item to be displayed. If the configured sequence number is greater than the sequence number of the last item, the setting does not take effect.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
 
+## APIs
 
-## Attributes<a name="section10148192384712"></a>
+List(value:{space?: number, initialIndex?: number})
 
-<a name="table1474mcpsimp"></a>
-<table><thead align="left"><tr id="row1481mcpsimp"><th class="cellrowborder" valign="top" width="14.08%" id="mcps1.1.5.1.1"><p id="p1483mcpsimp"><a name="p1483mcpsimp"></a><a name="p1483mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="25.46%" id="mcps1.1.5.1.2"><p id="p1485mcpsimp"><a name="p1485mcpsimp"></a><a name="p1485mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="15.790000000000001%" id="mcps1.1.5.1.3"><p id="p1487mcpsimp"><a name="p1487mcpsimp"></a><a name="p1487mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="44.67%" id="mcps1.1.5.1.4"><p id="p1489mcpsimp"><a name="p1489mcpsimp"></a><a name="p1489mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1490mcpsimp"><td class="cellrowborder" valign="top" width="14.08%" headers="mcps1.1.5.1.1 "><p id="p1492mcpsimp"><a name="p1492mcpsimp"></a><a name="p1492mcpsimp"></a>listDirection</p>
-</td>
-<td class="cellrowborder" valign="top" width="25.46%" headers="mcps1.1.5.1.2 "><p id="p1494mcpsimp"><a name="p1494mcpsimp"></a><a name="p1494mcpsimp"></a><a href="ts-appendix-enums.md#section1397918486200">Axis</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="15.790000000000001%" headers="mcps1.1.5.1.3 "><p id="p1496mcpsimp"><a name="p1496mcpsimp"></a><a name="p1496mcpsimp"></a>Vertical</p>
-</td>
-<td class="cellrowborder" valign="top" width="44.67%" headers="mcps1.1.5.1.4 "><p id="p17471191815396"><a name="p17471191815396"></a><a name="p17471191815396"></a>Direction in which the list items are arranged. For details, see <a href="#li7849892417">Axis enums</a>.</p>
-</td>
-</tr>
-<tr id="row1501mcpsimp"><td class="cellrowborder" valign="top" width="14.08%" headers="mcps1.1.5.1.1 "><p id="p1503mcpsimp"><a name="p1503mcpsimp"></a><a name="p1503mcpsimp"></a>divider</p>
-</td>
-<td class="cellrowborder" valign="top" width="25.46%" headers="mcps1.1.5.1.2 "><p id="p12218118141515"><a name="p12218118141515"></a><a name="p12218118141515"></a>{</p>
-<p id="p255942119159"><a name="p255942119159"></a><a name="p255942119159"></a>strokeWidth: Length,</p>
-<p id="p43412027131515"><a name="p43412027131515"></a><a name="p43412027131515"></a>color?:Color,</p>
-<p id="p815211349155"><a name="p815211349155"></a><a name="p815211349155"></a>startMargin?: Length,</p>
-<p id="p148515412150"><a name="p148515412150"></a><a name="p148515412150"></a>endMargin?: Length</p>
-<p id="p1184352016391"><a name="p1184352016391"></a><a name="p1184352016391"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.790000000000001%" headers="mcps1.1.5.1.3 "><p id="p1507mcpsimp"><a name="p1507mcpsimp"></a><a name="p1507mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="44.67%" headers="mcps1.1.5.1.4 "><p id="p1509mcpsimp"><a name="p1509mcpsimp"></a><a name="p1509mcpsimp"></a>Style of the divider for the list items. By default, there is no divider.</p>
-<p id="p6920226101412"><a name="p6920226101412"></a><a name="p6920226101412"></a><strong id="b1383233713406"><a name="b1383233713406"></a><a name="b1383233713406"></a>strokeWidth</strong>: stroke width of the divider.</p>
-<p id="p131957614154"><a name="p131957614154"></a><a name="p131957614154"></a><strong id="b793185424014"><a name="b793185424014"></a><a name="b793185424014"></a>color</strong>: color of the divider.</p>
-<p id="p119577207152"><a name="p119577207152"></a><a name="p119577207152"></a><strong id="b1884840114117"><a name="b1884840114117"></a><a name="b1884840114117"></a>startMargin</strong>: distance between the divider and the start of the list.</p>
-<p id="p1923017271175"><a name="p1923017271175"></a><a name="p1923017271175"></a><strong id="b1116613794113"><a name="b1116613794113"></a><a name="b1116613794113"></a>endMargin</strong>: distance between the divider and the end of the list.</p>
-</td>
-</tr>
-<tr id="row1513mcpsimp"><td class="cellrowborder" valign="top" width="14.08%" headers="mcps1.1.5.1.1 "><p id="p1515mcpsimp"><a name="p1515mcpsimp"></a><a name="p1515mcpsimp"></a>editMode</p>
-</td>
-<td class="cellrowborder" valign="top" width="25.46%" headers="mcps1.1.5.1.2 "><p id="p1517mcpsimp"><a name="p1517mcpsimp"></a><a name="p1517mcpsimp"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.790000000000001%" headers="mcps1.1.5.1.3 "><p id="p20134833915"><a name="p20134833915"></a><a name="p20134833915"></a>false</p>
-</td>
-<td class="cellrowborder" valign="top" width="44.67%" headers="mcps1.1.5.1.4 "><p id="p1521mcpsimp"><a name="p1521mcpsimp"></a><a name="p1521mcpsimp"></a>Whether the <strong id="b1748852594110"><a name="b1748852594110"></a><a name="b1748852594110"></a>&lt;List&gt;</strong> component is in editable mode.</p>
-</td>
-</tr>
-<tr id="row331042411123"><td class="cellrowborder" valign="top" width="14.08%" headers="mcps1.1.5.1.1 "><p id="p1275832125813"><a name="p1275832125813"></a><a name="p1275832125813"></a>edgeEffect</p>
-</td>
-<td class="cellrowborder" valign="top" width="25.46%" headers="mcps1.1.5.1.2 "><p id="p5311324191218"><a name="p5311324191218"></a><a name="p5311324191218"></a><a href="#li13407161352416">EdgeEffect</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="15.790000000000001%" headers="mcps1.1.5.1.3 "><p id="p13275232125815"><a name="p13275232125815"></a><a name="p13275232125815"></a>Spring</p>
-</td>
-<td class="cellrowborder" valign="top" width="44.67%" headers="mcps1.1.5.1.4 "><p id="p1827516324585"><a name="p1827516324585"></a><a name="p1827516324585"></a>Sliding effect. For details, see <a href="#li13407161352416">EdgeEffect enums</a>.</p>
-</td>
-</tr>
-<tr id="row18775128141213"><td class="cellrowborder" valign="top" width="14.08%" headers="mcps1.1.5.1.1 "><p id="p8775122831218"><a name="p8775122831218"></a><a name="p8775122831218"></a>chainAnimation</p>
-</td>
-<td class="cellrowborder" valign="top" width="25.46%" headers="mcps1.1.5.1.2 "><p id="p67751028161210"><a name="p67751028161210"></a><a name="p67751028161210"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.790000000000001%" headers="mcps1.1.5.1.3 "><p id="p888305574219"><a name="p888305574219"></a><a name="p888305574219"></a>false</p>
-</td>
-<td class="cellrowborder" valign="top" width="44.67%" headers="mcps1.1.5.1.4 "><p id="p78841255154210"><a name="p78841255154210"></a><a name="p78841255154210"></a>Whether to display chained animations on this list when it slides or its top and bottom are dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.</p>
-<a name="ul1490293714519"></a><a name="ul1490293714519"></a><ul id="ul1490293714519"><li><strong id="b6318183104217"><a name="b6318183104217"></a><a name="b6318183104217"></a>false</strong>: No chained animations are displayed.</li><li><strong id="b139221053421"><a name="b139221053421"></a><a name="b139221053421"></a>true</strong>: Chained animations are displayed.</li></ul>
-</td>
-</tr>
-</tbody>
-</table>
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | space | number | No | 0 | Spacing&nbsp;between&nbsp;list&nbsp;items. | 
+  | initialIndex | number | No | 0 | Item&nbsp;displayed&nbsp;at&nbsp;the&nbsp;beginning&nbsp;of&nbsp;the&nbsp;component&nbsp;when&nbsp;the&nbsp;current&nbsp;list&nbsp;is&nbsp;loaded&nbsp;for&nbsp;the&nbsp;first&nbsp;time,&nbsp;that&nbsp;is,&nbsp;the&nbsp;first&nbsp;item&nbsp;to&nbsp;be&nbsp;displayed.&nbsp;If&nbsp;the&nbsp;configured&nbsp;sequence&nbsp;number&nbsp;is&nbsp;greater&nbsp;than&nbsp;the&nbsp;sequence&nbsp;number&nbsp;of&nbsp;the&nbsp;last&nbsp;item,&nbsp;the&nbsp;setting&nbsp;does&nbsp;not&nbsp;take&nbsp;effect. | 
 
--   <a name="li13407161352416"></a>EdgeEffect enums
 
-    <a name="table13368194184518"></a>
-    <table><thead align="left"><tr id="row163686417455"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p153688444519"><a name="p153688444519"></a><a name="p153688444519"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p136815414459"><a name="p136815414459"></a><a name="p136815414459"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row536834164511"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p3368164134520"><a name="p3368164134520"></a><a name="p3368164134520"></a>Spring</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p33688411457"><a name="p33688411457"></a><a name="p33688411457"></a>Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded.</p>
-    </td>
-    </tr>
-    <tr id="row8368154174512"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p63689444519"><a name="p63689444519"></a><a name="p63689444519"></a>None</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1927035264510"><a name="p1927035264510"></a><a name="p1927035264510"></a>No effect after the scroll bar is moved to the edge.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+## Attributes
 
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| listDirection | [Axis](ts-appendix-enums.md#axis-enums) | Vertical | Direction&nbsp;in&nbsp;which&nbsp;the&nbsp;list&nbsp;items&nbsp;are&nbsp;arranged.&nbsp;For&nbsp;details,&nbsp;see&nbsp;**Axis**&nbsp;enums. |
+| divider | {<br/>strokeWidth:&nbsp;Length,<br/>color?:Color,<br/>startMargin?:&nbsp;Length,<br/>endMargin?:&nbsp;Length<br/>} | - | Style&nbsp;of&nbsp;the&nbsp;divider&nbsp;for&nbsp;the&nbsp;list&nbsp;items.&nbsp;By&nbsp;default,&nbsp;there&nbsp;is&nbsp;no&nbsp;divider.<br/>**strokeWidth**:&nbsp;stroke&nbsp;width&nbsp;of&nbsp;the&nbsp;divider.<br/>**color**:&nbsp;color&nbsp;of&nbsp;the&nbsp;divider.<br/>**startMargin**:&nbsp;distance&nbsp;between&nbsp;the&nbsp;divider&nbsp;and&nbsp;the&nbsp;start&nbsp;of&nbsp;the&nbsp;list.<br/>**endMargin**:&nbsp;distance&nbsp;between&nbsp;the&nbsp;divider&nbsp;and&nbsp;the&nbsp;end&nbsp;of&nbsp;the&nbsp;list. |
+| editMode | boolean | false | Whether&nbsp;the&nbsp;**&lt;List&gt;**&nbsp;component&nbsp;is&nbsp;in&nbsp;editable&nbsp;mode. |
+| edgeEffect | EdgeEffect | EdgeEffect.Spring | Sliding&nbsp;effect.&nbsp;For&nbsp;details,&nbsp;see&nbsp;EdgeEffect&nbsp;enums. |
+| chainAnimation | boolean | false | Whether&nbsp;to&nbsp;display&nbsp;chained&nbsp;animations&nbsp;on&nbsp;this&nbsp;list&nbsp;when&nbsp;it&nbsp;slides&nbsp;or&nbsp;its&nbsp;top&nbsp;and&nbsp;bottom&nbsp;are&nbsp;dragged.&nbsp;The&nbsp;list&nbsp;items&nbsp;are&nbsp;separated&nbsp;with&nbsp;even&nbsp;space,&nbsp;and&nbsp;one&nbsp;item&nbsp;animation&nbsp;starts&nbsp;after&nbsp;the&nbsp;previous&nbsp;animation&nbsp;during&nbsp;basic&nbsp;sliding&nbsp;interactions.&nbsp;The&nbsp;chained&nbsp;animation&nbsp;effect&nbsp;is&nbsp;similar&nbsp;with&nbsp;spring&nbsp;physics.<br/>-&nbsp;**false**:&nbsp;No&nbsp;chained&nbsp;animations&nbsp;are&nbsp;displayed.<br/>-&nbsp;**true**:&nbsp;Chained&nbsp;animations&nbsp;are&nbsp;displayed. |
+| multiSelectable<sup>8+</sup> | boolean | false | Whether&nbsp;to&nbsp;enable&nbsp;mouse&nbsp;frame&nbsp;selection.<br/>-&nbsp;**false**:&nbsp;The&nbsp;mouse&nbsp;frame&nbsp;selection&nbsp;is&nbsp;disabled.<br/>-&nbsp;**true**:&nbsp;The&nbsp;mouse&nbsp;frame&nbsp;selection&nbsp;is&nbsp;disabled. |
+| restoreId<sup>8+</sup> | number | - | Migration&nbsp;ID&nbsp;of&nbsp;the&nbsp;component.&nbsp;During&nbsp;application&nbsp;migration,&nbsp;the&nbsp;status&nbsp;of&nbsp;the&nbsp;component&nbsp;is&nbsp;migrated&nbsp;to&nbsp;the&nbsp;component&nbsp;with&nbsp;the&nbsp;same&nbsp;migration&nbsp;ID&nbsp;on&nbsp;the&nbsp;peer&nbsp;end.<br/>For&nbsp;a&nbsp;**&lt;List&gt;**&nbsp;component,&nbsp;the&nbsp;status&nbsp;includes&nbsp;the&nbsp;item&nbsp;serial&nbsp;number&nbsp;displayed&nbsp;at&nbsp;the&nbsp;start&nbsp;position. |
 
-## Events<a name="section5672149135016"></a>
+- EdgeEffect enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Spring | Similar&nbsp;to&nbsp;the&nbsp;physical&nbsp;dynamic&nbsp;effect&nbsp;of&nbsp;a&nbsp;spring.&nbsp;After&nbsp;scrolling&nbsp;to&nbsp;the&nbsp;edge,&nbsp;you&nbsp;can&nbsp;continue&nbsp;to&nbsp;scroll&nbsp;for&nbsp;a&nbsp;distance&nbsp;based&nbsp;on&nbsp;the&nbsp;initial&nbsp;speed&nbsp;or&nbsp;by&nbsp;touching&nbsp;the&nbsp;knob&nbsp;of&nbsp;the&nbsp;scrollbar.&nbsp;After&nbsp;you&nbsp;release&nbsp;your&nbsp;hand,&nbsp;the&nbsp;knob&nbsp;is&nbsp;rebounded. | 
+  | None | No&nbsp;effect&nbsp;after&nbsp;the&nbsp;scroll&nbsp;bar&nbsp;is&nbsp;moved&nbsp;to&nbsp;the&nbsp;edge. | 
 
-<a name="table268mcpsimp"></a>
-<table><thead align="left"><tr id="row274mcpsimp"><th class="cellrowborder" valign="top" width="52.07000000000001%" id="mcps1.1.3.1.1"><p id="p276mcpsimp"><a name="p276mcpsimp"></a><a name="p276mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="47.93%" id="mcps1.1.3.1.2"><p id="p280mcpsimp"><a name="p280mcpsimp"></a><a name="p280mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row281mcpsimp"><td class="cellrowborder" valign="top" width="52.07000000000001%" headers="mcps1.1.3.1.1 "><p id="p283mcpsimp"><a name="p283mcpsimp"></a><a name="p283mcpsimp"></a>onItemDelete(index: number) =&gt; boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.93%" headers="mcps1.1.3.1.2 "><p id="p19272193554015"><a name="p19272193554015"></a><a name="p19272193554015"></a>Triggered when a list item is deleted.</p>
-</td>
-</tr>
-<tr id="row14368347144014"><td class="cellrowborder" valign="top" width="52.07000000000001%" headers="mcps1.1.3.1.1 "><p id="p44468559402"><a name="p44468559402"></a><a name="p44468559402"></a>onScrollIndex(firstIndex: number, lastIndex: number) =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.93%" headers="mcps1.1.3.1.2 "><p id="p6369104717402"><a name="p6369104717402"></a><a name="p6369104717402"></a>Triggered when the start position and end position of the current list are changed.</p>
-</td>
-</tr>
-<tr id="row141733308324"><td class="cellrowborder" valign="top" width="52.07000000000001%" headers="mcps1.1.3.1.1 "><p id="p1217353043218"><a name="p1217353043218"></a><a name="p1217353043218"></a>onItemDragEnter(callback: (event: <a href="#li2640114814351">ItemDragInfo</a>) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.93%" headers="mcps1.1.3.1.2 "><p id="p23399260547"><a name="p23399260547"></a><a name="p23399260547"></a>Triggered when the list item that is bound to the drag event enters a valid drop target.</p>
-<a name="ul1833918269542"></a><a name="ul1833918269542"></a><ul id="ul1833918269542"><li><strong id="b560301120593"><a name="b560301120593"></a><a name="b560301120593"></a>itemIndex</strong>: original index of the list item that is being dragged.</li><li><strong id="b199637243011"><a name="b199637243011"></a><a name="b199637243011"></a>insertIndex</strong>: index of the list item after it is dragged and inserted into the list.</li></ul>
-<div class="note" id="note1389615018342"><a name="note1389615018342"></a><a name="note1389615018342"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p1589619033415"><a name="p1589619033415"></a><a name="p1589619033415"></a>This event is valid only when the <strong id="b350094618013"><a name="b350094618013"></a><a name="b350094618013"></a>onDrop</strong> event is listened to.</p>
-</div></div>
-</td>
-</tr>
-<tr id="row2057824563212"><td class="cellrowborder" valign="top" width="52.07000000000001%" headers="mcps1.1.3.1.1 "><p id="p1167987103713"><a name="p1167987103713"></a><a name="p1167987103713"></a>onItemDragMove(callback: (event: <a href="#li2640114814351">ItemDragInfo</a>, itemIndex: number, insertIndex: number) =&gt; void)</p>
-<p id="p186798733715"><a name="p186798733715"></a><a name="p186798733715"></a></p>
-</td>
-<td class="cellrowborder" valign="top" width="47.93%" headers="mcps1.1.3.1.2 "><p id="p1157864513220"><a name="p1157864513220"></a><a name="p1157864513220"></a>Triggered when the list item that is bound to the drag event enters a valid drop target.</p>
-<a name="ul836918413451"></a><a name="ul836918413451"></a><ul id="ul836918413451"><li><strong id="b8247135719415"><a name="b8247135719415"></a><a name="b8247135719415"></a>itemIndex</strong>: original index of the list item that is being dragged.</li><li><strong id="b5579858449"><a name="b5579858449"></a><a name="b5579858449"></a>insertIndex</strong>: index of the list item after it is dragged and inserted into the list.</li></ul>
-<div class="note" id="note590016344379"><a name="note590016344379"></a><a name="note590016344379"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p1542313448378"><a name="p1542313448378"></a><a name="p1542313448378"></a>This event is valid only when the <strong id="b109221227518"><a name="b109221227518"></a><a name="b109221227518"></a>onDrop</strong> event is listened to.</p>
-</div></div>
-</td>
-</tr>
-<tr id="row974815613383"><td class="cellrowborder" valign="top" width="52.07000000000001%" headers="mcps1.1.3.1.1 "><p id="p19672727173815"><a name="p19672727173815"></a><a name="p19672727173815"></a>onItemDragLeave(callback: (event: <a href="#li2640114814351">ItemDragInfo</a>, itemIndex: number) =&gt; void)</p>
-<p id="p10672202753811"><a name="p10672202753811"></a><a name="p10672202753811"></a></p>
-</td>
-<td class="cellrowborder" valign="top" width="47.93%" headers="mcps1.1.3.1.2 "><p id="p656844733810"><a name="p656844733810"></a><a name="p656844733810"></a>Triggered when the list item that is bound to the drag event leaves a valid drop target.</p>
-<a name="ul99161456478"></a><a name="ul99161456478"></a><ul id="ul99161456478"><li><strong id="b182438421552"><a name="b182438421552"></a><a name="b182438421552"></a>itemIndex</strong>: original index of the list item that is being dragged.</li></ul>
-<div class="note" id="note243419019390"><a name="note243419019390"></a><a name="note243419019390"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p104341033917"><a name="p104341033917"></a><a name="p104341033917"></a>This event is valid only when the <strong id="b1019610147619"><a name="b1019610147619"></a><a name="b1019610147619"></a>onDrop</strong> event is listened to.</p>
-</div></div>
-</td>
-</tr>
-<tr id="row1720491343810"><td class="cellrowborder" valign="top" width="52.07000000000001%" headers="mcps1.1.3.1.1 "><p id="p9577114710395"><a name="p9577114710395"></a><a name="p9577114710395"></a>onItemDragStart(callback: (event: <a href="#li2640114814351">ItemDragInfo</a>, itemIndex: number)  =&gt; <a href="../../toctopics/en-us_topic_0000001237475069.md#section2538145016250">CustomBuilder</a>)</p>
-<p id="p4577104710392"><a name="p4577104710392"></a><a name="p4577104710392"></a></p>
-</td>
-<td class="cellrowborder" valign="top" width="47.93%" headers="mcps1.1.3.1.2 "><p id="p182042136385"><a name="p182042136385"></a><a name="p182042136385"></a>Triggered when the list item that is bound to the drag event is dragged for the first time.</p>
-<a name="ul1881145784611"></a><a name="ul1881145784611"></a><ul id="ul1881145784611"><li><strong id="b82390280516"><a name="b82390280516"></a><a name="b82390280516"></a>itemIndex</strong>: original index of the list item that is being dragged.</li><li>Return value: floating UI layout of the list item that is being dragged.</li></ul>
-<div class="note" id="note1037918101408"><a name="note1037918101408"></a><a name="note1037918101408"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p9379310194011"><a name="p9379310194011"></a><a name="p9379310194011"></a>This event is valid only when the <strong id="b177064346511"><a name="b177064346511"></a><a name="b177064346511"></a>onDrop</strong> event is listened to.</p>
-</div></div>
-</td>
-</tr>
-<tr id="row4718518103817"><td class="cellrowborder" valign="top" width="52.07000000000001%" headers="mcps1.1.3.1.1 "><p id="p136755015412"><a name="p136755015412"></a><a name="p136755015412"></a>onItemDrop(callback: (event: <a href="#li2640114814351">ItemDragInfo</a>, itemIndex: number, insertIndex: number, isSuccess: boolean) =&gt; void)</p>
-<p id="p1667517004111"><a name="p1667517004111"></a><a name="p1667517004111"></a></p>
-</td>
-<td class="cellrowborder" valign="top" width="47.93%" headers="mcps1.1.3.1.2 "><p id="p652618815718"><a name="p652618815718"></a><a name="p652618815718"></a>Triggered when the list item that is bound to the drag event is dropped on a valid drop target.</p>
-<a name="ul37763355718"></a><a name="ul37763355718"></a><ul id="ul37763355718"><li><strong id="b0833843159"><a name="b0833843159"></a><a name="b0833843159"></a>itemIndex</strong>: original index of the list item that is being dragged.</li><li><strong id="b4895105717514"><a name="b4895105717514"></a><a name="b4895105717514"></a>insertIndex</strong>: index of the list item after it is dragged and inserted into the list.</li><li><strong id="b94071747612"><a name="b94071747612"></a><a name="b94071747612"></a>isSuccess</strong>: whether the insertion is successful after the list item is dropped.</li></ul>
-<div class="note" id="note1965019172424"><a name="note1965019172424"></a><a name="note1965019172424"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p1965081715421"><a name="p1965081715421"></a><a name="p1965081715421"></a>This event is valid only when the <strong id="b1264511141175"><a name="b1264511141175"></a><a name="b1264511141175"></a>onDrop</strong> event is listened to.</p>
-</div></div>
-</td>
-</tr>
-</tbody>
-</table>
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->To enable the editable mode for a list, the following conditions must be met:
->-   **editMode**  is set to  **true**.
->-   The list is bound to the  **onItemDelete**  event and the event returns  **true**  during event callback.
->-   The  **editable**  attribute of  **ListItem**  is set to  **true**.
->To enable for a list item, the following conditions must be met:
->-   **editMode**  is set to  **true**.
->-   The list item is bound to the  **onItemDragStart**  event and the event returns a floating UI during event callback.
+## Events
 
--   <a name="li2640114814351"></a>ItemDragInfo attributes
+  | Name | Description | 
+| -------- | -------- |
+| onItemDelete(index:&nbsp;number)&nbsp;=&gt;&nbsp;boolean | Triggered&nbsp;when&nbsp;a&nbsp;list&nbsp;item&nbsp;is&nbsp;deleted. | 
+| onScrollIndex(firstIndex:&nbsp;number,&nbsp;lastIndex:&nbsp;number)&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;start&nbsp;position&nbsp;and&nbsp;end&nbsp;position&nbsp;of&nbsp;the&nbsp;current&nbsp;list&nbsp;are&nbsp;changed. | 
 
-    <a name="table157652053174913"></a>
-    <table><thead align="left"><tr id="row18765165318494"><th class="cellrowborder" valign="top" width="20.09%" id="mcps1.1.4.1.1"><p id="p18765145315496"><a name="p18765145315496"></a><a name="p18765145315496"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.22%" id="mcps1.1.4.1.2"><p id="p37651453144919"><a name="p37651453144919"></a><a name="p37651453144919"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="59.69%" id="mcps1.1.4.1.3"><p id="p376585317492"><a name="p376585317492"></a><a name="p376585317492"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1476685312494"><td class="cellrowborder" valign="top" width="20.09%" headers="mcps1.1.4.1.1 "><p id="p3766753204913"><a name="p3766753204913"></a><a name="p3766753204913"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.22%" headers="mcps1.1.4.1.2 "><p id="p1576614537496"><a name="p1576614537496"></a><a name="p1576614537496"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="59.69%" headers="mcps1.1.4.1.3 "><p id="p976617538499"><a name="p976617538499"></a><a name="p976617538499"></a>X-coordinate of the item that is being dragged.</p>
-    </td>
-    </tr>
-    <tr id="row776635311495"><td class="cellrowborder" valign="top" width="20.09%" headers="mcps1.1.4.1.1 "><p id="p4766145315497"><a name="p4766145315497"></a><a name="p4766145315497"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.22%" headers="mcps1.1.4.1.2 "><p id="p11766153104919"><a name="p11766153104919"></a><a name="p11766153104919"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="59.69%" headers="mcps1.1.4.1.3 "><p id="p16766195315494"><a name="p16766195315494"></a><a name="p16766195315494"></a>Y-coordinate of the item that is being dragged.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> To enable the editable mode for a list, the following conditions must be met:
+> 
+> - **editMode** is set to **true**.
+> 
+> - The list is bound to the **onItemDelete** event and the event returns **true** during event callback.
+> 
+> - The **editable** attribute of **ListItem** is set to **true**.
+> 
+> To enable dragging for a list item, the following conditions must be met:
+> 
+> - **editMode** is set to **true**.
+> 
+> - The list item is bound to the **onDragStart** event and the event returns a floating UI during event callback.
 
 
-## Example<a name="section02653368513"></a>
+## Example
+
 
 ```
 @Entry
@@ -277,7 +93,7 @@ struct ListExample {
             }.editable(true)
           }, item => item)
         }
-        .listDirection(Axis.Vertical) //Arrangement direction
+        .listDirection(Axis.Vertical) // Arrangement direction
         .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // Divider line
         .edgeEffect(EdgeEffect.None) // No effect when sliding to the edge
         .chainAnimation(false) // Chained animations are disabled.
@@ -304,123 +120,4 @@ struct ListExample {
 }
 ```
 
-![](figures/list.gif)
-
-```
-@Entry
-@Component
-struct DragListExample {
-  @State number1: string[] = ['0', '1', '2']
-  @State number2: string[] = ['one', 'two', 'three']
-  @State text: string = ''
-  @State bool1: boolean = false
-  @State bool2: boolean = false
-
-  @Builder pixelMapBuilder() {
-    Text('-1')
-      .width('100%').height(100).fontSize(16)
-      .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
-  }
-
-  build() {
-    Column() {
-      List() {
-        ForEach(this.number1, (item) => {
-          ListItem() {
-            Text('' + item)
-              .width('100%').height(100).fontSize(16)
-              .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xF666FF)
-          }
-        }, item => item)
-      }
-      .editMode(true)
-      .width('90%').divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 })
-      .onItemDelete((index: number) => {
-        console.info(this.Number1[index] + 'Delete')
-        this.Number1.splice(index, 1)
-        console.info(JSON.stringify(this.Number1))
-        return true
-      })
-      .onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
-        this.bool1 = true
-        this.text = this.number1[itemIndex]
-        console.log("List1 onItemDragStart, itemIndex:" + itemIndex + ",  ItemDragInfo:"+`${JSON.stringify(event)}`)
-        return this.pixelMapBuilder
-      })
-      .onItemDragEnter((event: ItemDragInfo) => {
-        console.log("List1 onItemDragEnter")
-      })
-      .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => {
-        console.log("List1 onItemDragMove, itemIndex:" + itemIndex + ", insertIndex:" + insertIndex)
-      })
-      .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => {
-        console.log("List1 onItemDragLeave, itemIndex:" + itemIndex)
-      })
-      .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
-        if (isSuccess) {
-          if (this.bool2) {
-            this.number2.splice(itemIndex, 1)
-            this.number1.splice(insertIndex, 0, this.text)
-            this.bool1 = false
-            this.bool2 = false
-          } else if (this.bool1) {
-            this.number1.splice(itemIndex, 1)
-            this.number1.splice(insertIndex, 0, this.text)
-            this.bool1 = false
-            this.bool2 = false
-          }
-        }
-        console.log("List1 onItemDrop, itemIndex:" + itemIndex + ", insertIndex:" + insertIndex + ", isSuccess:" + isSuccess)
-      })
-      Divider().strokeWidth(5).color(0x2788D9).lineCap(LineCapStyle.Round).margin(20)
-      List() {
-        ForEach(this.Number2, (item) => {
-          ListItem() {
-            Text('' + item)
-              .width('100%').height(100).fontSize(16)
-              .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFF888)
-          }
-        }, item => item)
-      }
-      .edgeEffect(EdgeEffect.None)
-      .width('90%')
-      .editMode(true)
-      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 })
-      .onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
-        this.bool2 = true
-        this.text = this.number2[itemIndex]
-        console.log("List2 onItemDragStart, itemIndex:" + itemIndex)
-        return this.pixelMapBuilder
-      })
-      .onItemDragEnter((event: ItemDragInfo) => {
-        console.log("List2 onItemDragEnter")
-      })
-      .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => {
-        console.log("List2 onItemDragMove, itemIndex:" + itemIndex + ", insertIndex:" + insertIndex)
-      })
-      .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => {
-        console.log("List2 onItemDragLeave, itemIndex:" + itemIndex)
-      })
-      .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
-        if (isSuccess) {
-          if (this.bool1) {
-            this.number1.splice(itemIndex, 1)
-            this.number2.splice(insertIndex, 0, this.text)
-            this.bool1 = false
-            this.bool2 = false
-          } else if (this.bool2) {
-            this.number2.splice(itemIndex, 1)
-            this.number2.splice(insertIndex, 0, this.text)
-            this.bool1 = false
-            this.bool2 = false
-          }
-        }
-        console.log("List2 onItemDrop, itemIndex:" + itemIndex + ", insertIndex:" + insertIndex + ", isSuccess:" + isSuccess)
-      })
-    }.width('100%').height('100%').backgroundColor(0xE600000).padding({ top: 25 })
-  }
-}
-```
-
-![](figures/gif-4.gif)
-
+![en-us_image_0000001256978357](figures/en-us_image_0000001256978357.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-container-listitem.md b/en/application-dev/reference/arkui-ts/ts-container-listitem.md
index e96b60c18f19ce2fb07cde2b64d1790fcb350c1b..0d25e6da92d97adc98d06916695f585d668673d2 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-listitem.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-listitem.md
@@ -1,80 +1,52 @@
-# ListItem<a name="EN-US_TOPIC_0000001192595148"></a>
+# ListItem
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<ListItem\>**  component displays specific items in the list. Its width occupies the  **<List\>**  component by default and must be used together with  **<List\>**.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section19446161017538"></a>
+
+The **&lt;ListItem&gt;** component displays specific items in the list. Its width occupies the **&lt;List&gt;** component by default and must be used together with **&lt;List&gt;**.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section3767111810531"></a>
+
+## Child Components
 
 This component can contain a single child component.
 
-## APIs<a name="section36922294535"></a>
-
-ListItem\(\)
-
-## Attributes<a name="section83861522436"></a>
-
-<a name="table1474mcpsimp"></a>
-<table><thead align="left"><tr id="row1481mcpsimp"><th class="cellrowborder" valign="top" width="13%" id="mcps1.1.5.1.1"><p id="p1483mcpsimp"><a name="p1483mcpsimp"></a><a name="p1483mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="14.32%" id="mcps1.1.5.1.2"><p id="p1485mcpsimp"><a name="p1485mcpsimp"></a><a name="p1485mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="13.270000000000001%" id="mcps1.1.5.1.3"><p id="p1487mcpsimp"><a name="p1487mcpsimp"></a><a name="p1487mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="59.41%" id="mcps1.1.5.1.4"><p id="p1489mcpsimp"><a name="p1489mcpsimp"></a><a name="p1489mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1490mcpsimp"><td class="cellrowborder" valign="top" width="13%" headers="mcps1.1.5.1.1 "><p id="p1492mcpsimp"><a name="p1492mcpsimp"></a><a name="p1492mcpsimp"></a>sticky</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.32%" headers="mcps1.1.5.1.2 "><p id="p1494mcpsimp"><a name="p1494mcpsimp"></a><a name="p1494mcpsimp"></a><a href="#li66453411182">Sticky</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="13.270000000000001%" headers="mcps1.1.5.1.3 "><p id="p1496mcpsimp"><a name="p1496mcpsimp"></a><a name="p1496mcpsimp"></a>None</p>
-</td>
-<td class="cellrowborder" valign="top" width="59.41%" headers="mcps1.1.5.1.4 "><p id="p1644391915392"><a name="p1644391915392"></a><a name="p1644391915392"></a>Sticky effect of the list item. For details, see <a href="#table3452114216394">Sticky enums</a>.</p>
-</td>
-</tr>
-<tr id="row1501mcpsimp"><td class="cellrowborder" valign="top" width="13%" headers="mcps1.1.5.1.1 "><p id="p16779164274313"><a name="p16779164274313"></a><a name="p16779164274313"></a>editable</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.32%" headers="mcps1.1.5.1.2 "><p id="p1219317506433"><a name="p1219317506433"></a><a name="p1219317506433"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.270000000000001%" headers="mcps1.1.5.1.3 "><p id="p1507mcpsimp"><a name="p1507mcpsimp"></a><a name="p1507mcpsimp"></a>false</p>
-</td>
-<td class="cellrowborder" valign="top" width="59.41%" headers="mcps1.1.5.1.4 "><p id="p1299917596433"><a name="p1299917596433"></a><a name="p1299917596433"></a>Whether the list item is editable. A list item can be deleted in editing mode.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li66453411182"></a>Sticky enums
-
-    <a name="table3452114216394"></a>
-    <table><thead align="left"><tr id="row245219426397"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p545244283914"><a name="p545244283914"></a><a name="p545244283914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p2452114203917"><a name="p2452114203917"></a><a name="p2452114203917"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6452144218390"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p34529427398"><a name="p34529427398"></a><a name="p34529427398"></a>None</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245211421393"><a name="p1245211421393"></a><a name="p1245211421393"></a>No sticky.</p>
-    </td>
-    </tr>
-    <tr id="row12452184217398"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p54523425398"><a name="p54523425398"></a><a name="p54523425398"></a>Normal</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p745215426391"><a name="p745215426391"></a><a name="p745215426391"></a>The list item is sticky and disappears when you slide it.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section559995265311"></a>
+
+## APIs
+
+ListItem()
+
+
+## Attributes
+
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| sticky | Sticky | Sticky.None | Sticky&nbsp;effect&nbsp;of&nbsp;the&nbsp;list&nbsp;item.&nbsp;For&nbsp;details,&nbsp;see Sticky enums. |
+| editable | boolean | false | Whether&nbsp;the&nbsp;list&nbsp;item&nbsp;is&nbsp;editable.&nbsp;A&nbsp;list&nbsp;item&nbsp;can&nbsp;be&nbsp;deleted&nbsp;in&nbsp;editing&nbsp;mode. |
+| selectable<sup>8+</sup> | boolean | true | Whether&nbsp;the&nbsp;current&nbsp;**&lt;ListItem&gt;**&nbsp;is&nbsp;selectable&nbsp;by&nbsp;the&nbsp;mouse.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;This&nbsp;attribute&nbsp;takes&nbsp;effect&nbsp;only&nbsp;when&nbsp;mouse&nbsp;frame&nbsp;selection&nbsp;is&nbsp;enabled&nbsp;for&nbsp;the&nbsp;parent&nbsp;**&lt;List&gt;**&nbsp;container. |
+
+- Sticky enums
+    | Name | Description | 
+  | -------- | -------- |
+  | None | No&nbsp;sticky. | 
+  | Normal | The&nbsp;list&nbsp;item&nbsp;is&nbsp;sticky. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onSelect(callback:&nbsp;(isSelected:&nbsp;boolean)&nbsp;=&gt;&nbsp;any)<sup>8+</sup> | Triggered&nbsp;when&nbsp;the&nbsp;selected&nbsp;state&nbsp;of&nbsp;the&nbsp;**&lt;ListItem&gt;**&nbsp;changes.<br/>**isSelected**:&nbsp;Returns&nbsp;**true**&nbsp;if&nbsp;the&nbsp;**&lt;ListItem&gt;**&nbsp;is&nbsp;selected&nbsp;by&nbsp;the&nbsp;mouse;&nbsp;returns&nbsp;**false**&nbsp;otherwise. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -115,5 +87,4 @@ struct ListItemExample {
 }
 ```
 
-![](figures/listitem.gif)
-
+![en-us_image_0000001257138339](figures/en-us_image_0000001257138339.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-container-navigation.md b/en/application-dev/reference/arkui-ts/ts-container-navigation.md
deleted file mode 100644
index d0b68b8fbfae41d3c239ea93237214a192b4ae1a..0000000000000000000000000000000000000000
--- a/en/application-dev/reference/arkui-ts/ts-container-navigation.md
+++ /dev/null
@@ -1,418 +0,0 @@
-# Navigation<a name="EN-US_TOPIC_0000001193075106"></a>
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-The  **<Navigation\>**  component typically functions as the root container of a page and displays the page title, toolbar, and menu through attribute settings.
-
-## Required Permissions<a name="section988262631714"></a>
-
-None
-
-## Child Components<a name="section5989144051714"></a>
-
-This component can contain child components.
-
-## APIs<a name="section97451749121712"></a>
-
-Navigation\(\)
-
-Creates a component that can automatically display the navigation bar, title, and toolbar based on the attribute settings.
-
-## Attributes<a name="section1966485019544"></a>
-
-<a name="table167541053105516"></a>
-<table><thead align="left"><tr id="row1875513532552"><th class="cellrowborder" valign="top" width="17.27%" id="mcps1.1.5.1.1"><p id="p107551553135517"><a name="p107551553135517"></a><a name="p107551553135517"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="31.8%" id="mcps1.1.5.1.2"><p id="p13755205312554"><a name="p13755205312554"></a><a name="p13755205312554"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="19.23%" id="mcps1.1.5.1.3"><p id="p11755145375513"><a name="p11755145375513"></a><a name="p11755145375513"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="31.7%" id="mcps1.1.5.1.4"><p id="p15755053145517"><a name="p15755053145517"></a><a name="p15755053145517"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row187551753195515"><td class="cellrowborder" valign="top" width="17.27%" headers="mcps1.1.5.1.1 "><p id="p275595385515"><a name="p275595385515"></a><a name="p275595385515"></a>title</p>
-</td>
-<td class="cellrowborder" valign="top" width="31.8%" headers="mcps1.1.5.1.2 "><p id="p10755125312559"><a name="p10755125312559"></a><a name="p10755125312559"></a>string | <a href="../../toctopics/en-us_topic_0000001237475069.md#section2538145016250">CustomBuilder</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="19.23%" headers="mcps1.1.5.1.3 "><p id="p1675555325512"><a name="p1675555325512"></a><a name="p1675555325512"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="31.7%" headers="mcps1.1.5.1.4 "><p id="p1675513539556"><a name="p1675513539556"></a><a name="p1675513539556"></a>No title</p>
-</td>
-</tr>
-<tr id="row7755153175517"><td class="cellrowborder" valign="top" width="17.27%" headers="mcps1.1.5.1.1 "><p id="p1275545312556"><a name="p1275545312556"></a><a name="p1275545312556"></a>subtitle</p>
-</td>
-<td class="cellrowborder" valign="top" width="31.8%" headers="mcps1.1.5.1.2 "><p id="p11755453135512"><a name="p11755453135512"></a><a name="p11755453135512"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.23%" headers="mcps1.1.5.1.3 "><p id="p167558531551"><a name="p167558531551"></a><a name="p167558531551"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="31.7%" headers="mcps1.1.5.1.4 "><p id="p979915394296"><a name="p979915394296"></a><a name="p979915394296"></a>Subtitle of the page.</p>
-</td>
-</tr>
-<tr id="row2755205305512"><td class="cellrowborder" valign="top" width="17.27%" headers="mcps1.1.5.1.1 "><p id="p19755553115520"><a name="p19755553115520"></a><a name="p19755553115520"></a>menus</p>
-</td>
-<td class="cellrowborder" valign="top" width="31.8%" headers="mcps1.1.5.1.2 "><p id="p55216364615"><a name="p55216364615"></a><a name="p55216364615"></a>Array&lt;<a href="#table192660141468">NavigationMenuItem</a>&gt; | <a href="../../toctopics/en-us_topic_0000001237475069.md#section2538145016250">CustomBuilder</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="19.23%" headers="mcps1.1.5.1.3 "><p id="p19755053165514"><a name="p19755053165514"></a><a name="p19755053165514"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="31.7%" headers="mcps1.1.5.1.4 "><p id="p78692471290"><a name="p78692471290"></a><a name="p78692471290"></a>Menu in the upper right corner of the page.</p>
-<p id="p10771517652"><a name="p10771517652"></a><a name="p10771517652"></a></p>
-</td>
-</tr>
-<tr id="row127554532551"><td class="cellrowborder" valign="top" width="17.27%" headers="mcps1.1.5.1.1 "><p id="p1875519534552"><a name="p1875519534552"></a><a name="p1875519534552"></a>titleMode</p>
-</td>
-<td class="cellrowborder" valign="top" width="31.8%" headers="mcps1.1.5.1.2 "><p id="p141172011910"><a name="p141172011910"></a><a name="p141172011910"></a><a href="#li3339655172412">NavigationTitleMode</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="19.23%" headers="mcps1.1.5.1.3 "><p id="p1578819117304"><a name="p1578819117304"></a><a name="p1578819117304"></a>NavigationTitleMode.Free</p>
-</td>
-<td class="cellrowborder" valign="top" width="31.7%" headers="mcps1.1.5.1.4 "><p id="p12615195782913"><a name="p12615195782913"></a><a name="p12615195782913"></a>Display mode of the page title bar.</p>
-</td>
-</tr>
-<tr id="row853226151019"><td class="cellrowborder" valign="top" width="17.27%" headers="mcps1.1.5.1.1 "><p id="p454162611102"><a name="p454162611102"></a><a name="p454162611102"></a>toolBar</p>
-</td>
-<td class="cellrowborder" valign="top" width="31.8%" headers="mcps1.1.5.1.2 "><p id="p514515128225"><a name="p514515128225"></a><a name="p514515128225"></a>{</p>
-<p id="p3517755171011"><a name="p3517755171011"></a><a name="p3517755171011"></a>items:[</p>
-<p id="p176924331545"><a name="p176924331545"></a><a name="p176924331545"></a><a href="#table192660141468">Object</a></p>
-<p id="p1722618388516"><a name="p1722618388516"></a><a name="p1722618388516"></a>] }</p>
-<p id="p1251712556108"><a name="p1251712556108"></a><a name="p1251712556108"></a>| <a href="../../toctopics/en-us_topic_0000001237475069.md#section2538145016250">CustomBuilder</a></p>
-<p id="p751775510106"><a name="p751775510106"></a><a name="p751775510106"></a></p>
-</td>
-<td class="cellrowborder" valign="top" width="19.23%" headers="mcps1.1.5.1.3 "><p id="p195472615100"><a name="p195472615100"></a><a name="p195472615100"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="31.7%" headers="mcps1.1.5.1.4 "><p id="p177791949116"><a name="p177791949116"></a><a name="p177791949116"></a>Content of the toolbar.</p>
-<p id="p1977944111113"><a name="p1977944111113"></a><a name="p1977944111113"></a><strong id="b14491343193810"><a name="b14491343193810"></a><a name="b14491343193810"></a>items</strong>: all items on the toolbar.</p>
-</td>
-</tr>
-<tr id="row1497643520101"><td class="cellrowborder" valign="top" width="17.27%" headers="mcps1.1.5.1.1 "><p id="p597712351109"><a name="p597712351109"></a><a name="p597712351109"></a>hideToolBar</p>
-</td>
-<td class="cellrowborder" valign="top" width="31.8%" headers="mcps1.1.5.1.2 "><p id="p1819931915116"><a name="p1819931915116"></a><a name="p1819931915116"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.23%" headers="mcps1.1.5.1.3 "><p id="p187092451117"><a name="p187092451117"></a><a name="p187092451117"></a>false</p>
-</td>
-<td class="cellrowborder" valign="top" width="31.7%" headers="mcps1.1.5.1.4 "><p id="p204442303113"><a name="p204442303113"></a><a name="p204442303113"></a>Whether the toolbar is shown or hidden.</p>
-<p id="p15520203201119"><a name="p15520203201119"></a><a name="p15520203201119"></a><strong id="b33411150193820"><a name="b33411150193820"></a><a name="b33411150193820"></a>true</strong>: The toolbar is hidden.</p>
-<p id="p76711233181115"><a name="p76711233181115"></a><a name="p76711233181115"></a><strong id="b1760125743814"><a name="b1760125743814"></a><a name="b1760125743814"></a>false</strong>: The toolbar is shown.</p>
-</td>
-</tr>
-<tr id="row736419418298"><td class="cellrowborder" valign="top" width="17.27%" headers="mcps1.1.5.1.1 "><p id="p183531311193014"><a name="p183531311193014"></a><a name="p183531311193014"></a>hideTitleBar</p>
-</td>
-<td class="cellrowborder" valign="top" width="31.8%" headers="mcps1.1.5.1.2 "><p id="p236524142913"><a name="p236524142913"></a><a name="p236524142913"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.23%" headers="mcps1.1.5.1.3 "><p id="p19365545293"><a name="p19365545293"></a><a name="p19365545293"></a>false</p>
-</td>
-<td class="cellrowborder" valign="top" width="31.7%" headers="mcps1.1.5.1.4 "><p id="p636554132919"><a name="p636554132919"></a><a name="p636554132919"></a>Whether the title bar is hidden.</p>
-</td>
-</tr>
-<tr id="row798716815299"><td class="cellrowborder" valign="top" width="17.27%" headers="mcps1.1.5.1.1 "><p id="p2987484294"><a name="p2987484294"></a><a name="p2987484294"></a>hideBackButton</p>
-</td>
-<td class="cellrowborder" valign="top" width="31.8%" headers="mcps1.1.5.1.2 "><p id="p4987188162915"><a name="p4987188162915"></a><a name="p4987188162915"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.23%" headers="mcps1.1.5.1.3 "><p id="p3987108152910"><a name="p3987108152910"></a><a name="p3987108152910"></a>false</p>
-</td>
-<td class="cellrowborder" valign="top" width="31.7%" headers="mcps1.1.5.1.4 "><p id="p109871786297"><a name="p109871786297"></a><a name="p109871786297"></a>Whether the back key is hidden.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   NavigationMenuItem parameters
-
-    <a name="table192660141468"></a>
-    <table><thead align="left"><tr id="row1226617144463"><th class="cellrowborder" valign="top" width="14.542963397925234%" id="mcps1.1.6.1.1"><p id="p4266121418464"><a name="p4266121418464"></a><a name="p4266121418464"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="19.69074182814641%" id="mcps1.1.6.1.2"><p id="p748632215472"><a name="p748632215472"></a><a name="p748632215472"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="6.605989430416913%" id="mcps1.1.6.1.3"><p id="p15266914124618"><a name="p15266914124618"></a><a name="p15266914124618"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.080250538265807%" id="mcps1.1.6.1.4"><p id="p11266181415465"><a name="p11266181415465"></a><a name="p11266181415465"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="49.08005480524565%" id="mcps1.1.6.1.5"><p id="p3266414154614"><a name="p3266414154614"></a><a name="p3266414154614"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1526651444613"><td class="cellrowborder" valign="top" width="14.542963397925234%" headers="mcps1.1.6.1.1 "><p id="p6267131413461"><a name="p6267131413461"></a><a name="p6267131413461"></a>value</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.69074182814641%" headers="mcps1.1.6.1.2 "><p id="p2026710142461"><a name="p2026710142461"></a><a name="p2026710142461"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.605989430416913%" headers="mcps1.1.6.1.3 "><p id="p226781424617"><a name="p226781424617"></a><a name="p226781424617"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.080250538265807%" headers="mcps1.1.6.1.4 "><p id="p1526751474616"><a name="p1526751474616"></a><a name="p1526751474616"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="49.08005480524565%" headers="mcps1.1.6.1.5 "><p id="p0193124010182"><a name="p0193124010182"></a><a name="p0193124010182"></a>Text of a single option on the menu bar.</p>
-    </td>
-    </tr>
-    <tr id="row20655108171816"><td class="cellrowborder" valign="top" width="14.542963397925234%" headers="mcps1.1.6.1.1 "><p id="p1655198201811"><a name="p1655198201811"></a><a name="p1655198201811"></a>icon</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.69074182814641%" headers="mcps1.1.6.1.2 "><p id="p1265520861818"><a name="p1265520861818"></a><a name="p1265520861818"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.605989430416913%" headers="mcps1.1.6.1.3 "><p id="p17655198181818"><a name="p17655198181818"></a><a name="p17655198181818"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.080250538265807%" headers="mcps1.1.6.1.4 "><p id="p1765512841819"><a name="p1765512841819"></a><a name="p1765512841819"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="49.08005480524565%" headers="mcps1.1.6.1.5 "><p id="p565588141812"><a name="p565588141812"></a><a name="p565588141812"></a>Icon path of a single option on the menu bar.</p>
-    </td>
-    </tr>
-    <tr id="row2478191217187"><td class="cellrowborder" valign="top" width="14.542963397925234%" headers="mcps1.1.6.1.1 "><p id="p144781212161813"><a name="p144781212161813"></a><a name="p144781212161813"></a>action</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.69074182814641%" headers="mcps1.1.6.1.2 "><p id="p11457934175214"><a name="p11457934175214"></a><a name="p11457934175214"></a>() =&gt; void</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.605989430416913%" headers="mcps1.1.6.1.3 "><p id="p13478151218189"><a name="p13478151218189"></a><a name="p13478151218189"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.080250538265807%" headers="mcps1.1.6.1.4 "><p id="p24781312161812"><a name="p24781312161812"></a><a name="p24781312161812"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="49.08005480524565%" headers="mcps1.1.6.1.5 "><p id="p547861271816"><a name="p547861271816"></a><a name="p547861271816"></a>Callback invoked when the option is selected.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Object attributes
-
-    <a name="table1287613175314"></a>
-    <table><thead align="left"><tr id="row48766319535"><th class="cellrowborder" valign="top" width="14.542963397925234%" id="mcps1.1.6.1.1"><p id="p6876103155315"><a name="p6876103155315"></a><a name="p6876103155315"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="19.69074182814641%" id="mcps1.1.6.1.2"><p id="p12876103165315"><a name="p12876103165315"></a><a name="p12876103165315"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="6.605989430416913%" id="mcps1.1.6.1.3"><p id="p1387683145315"><a name="p1387683145315"></a><a name="p1387683145315"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.080250538265807%" id="mcps1.1.6.1.4"><p id="p118761331115312"><a name="p118761331115312"></a><a name="p118761331115312"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="49.08005480524565%" id="mcps1.1.6.1.5"><p id="p587623114533"><a name="p587623114533"></a><a name="p587623114533"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row28763317534"><td class="cellrowborder" valign="top" width="14.542963397925234%" headers="mcps1.1.6.1.1 "><p id="p387603115537"><a name="p387603115537"></a><a name="p387603115537"></a>value</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.69074182814641%" headers="mcps1.1.6.1.2 "><p id="p587673114538"><a name="p587673114538"></a><a name="p587673114538"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.605989430416913%" headers="mcps1.1.6.1.3 "><p id="p11876173113534"><a name="p11876173113534"></a><a name="p11876173113534"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.080250538265807%" headers="mcps1.1.6.1.4 "><p id="p6876531115316"><a name="p6876531115316"></a><a name="p6876531115316"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="49.08005480524565%" headers="mcps1.1.6.1.5 "><p id="p18876131125313"><a name="p18876131125313"></a><a name="p18876131125313"></a>Text of a single option on the toolbar.</p>
-    </td>
-    </tr>
-    <tr id="row10876163165320"><td class="cellrowborder" valign="top" width="14.542963397925234%" headers="mcps1.1.6.1.1 "><p id="p387616313534"><a name="p387616313534"></a><a name="p387616313534"></a>icon</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.69074182814641%" headers="mcps1.1.6.1.2 "><p id="p1787643115537"><a name="p1787643115537"></a><a name="p1787643115537"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.605989430416913%" headers="mcps1.1.6.1.3 "><p id="p1887615317531"><a name="p1887615317531"></a><a name="p1887615317531"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.080250538265807%" headers="mcps1.1.6.1.4 "><p id="p7876183111533"><a name="p7876183111533"></a><a name="p7876183111533"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="49.08005480524565%" headers="mcps1.1.6.1.5 "><p id="p18876203155315"><a name="p18876203155315"></a><a name="p18876203155315"></a>Icon path of a single option on the toolbar.</p>
-    </td>
-    </tr>
-    <tr id="row1187619317533"><td class="cellrowborder" valign="top" width="14.542963397925234%" headers="mcps1.1.6.1.1 "><p id="p8877103120539"><a name="p8877103120539"></a><a name="p8877103120539"></a>action</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.69074182814641%" headers="mcps1.1.6.1.2 "><p id="p1877153135316"><a name="p1877153135316"></a><a name="p1877153135316"></a>() =&gt; void</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.605989430416913%" headers="mcps1.1.6.1.3 "><p id="p1287793116537"><a name="p1287793116537"></a><a name="p1287793116537"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.080250538265807%" headers="mcps1.1.6.1.4 "><p id="p19877193185311"><a name="p19877193185311"></a><a name="p19877193185311"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="49.08005480524565%" headers="mcps1.1.6.1.5 "><p id="p19877143113537"><a name="p19877143113537"></a><a name="p19877143113537"></a>Callback invoked when the option is selected.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li3339655172412"></a>NavigationTitleMode enums
-
-    <a name="table12742135111110"></a>
-    <table><thead align="left"><tr id="row7742135111114"><th class="cellrowborder" valign="top" width="11.52%" id="mcps1.1.3.1.1"><p id="p1174215118116"><a name="p1174215118116"></a><a name="p1174215118116"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="88.48%" id="mcps1.1.3.1.2"><p id="p16742651818"><a name="p16742651818"></a><a name="p16742651818"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row9742175115114"><td class="cellrowborder" valign="top" width="11.52%" headers="mcps1.1.3.1.1 "><p id="p16742651016"><a name="p16742651016"></a><a name="p16742651016"></a>Free</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="88.48%" headers="mcps1.1.3.1.2 "><p id="p174318510119"><a name="p174318510119"></a><a name="p174318510119"></a>When the content is a scrollable component, the title shrinks as the content scrolls up (the subtitle fades out with its size remaining unchanged) and restores to the original one as the content scrolls down.</p>
-    </td>
-    </tr>
-    <tr id="row874313511511"><td class="cellrowborder" valign="top" width="11.52%" headers="mcps1.1.3.1.1 "><p id="p19734185914"><a name="p19734185914"></a><a name="p19734185914"></a>Mini</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="88.48%" headers="mcps1.1.3.1.2 "><p id="p1074313515120"><a name="p1074313515120"></a><a name="p1074313515120"></a>The mode is fixed at subtitle mode (icon + main title and subtitle).</p>
-    </td>
-    </tr>
-    <tr id="row37438519110"><td class="cellrowborder" valign="top" width="11.52%" headers="mcps1.1.3.1.1 "><p id="p67431513112"><a name="p67431513112"></a><a name="p67431513112"></a>Full</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="88.48%" headers="mcps1.1.3.1.2 "><p id="p1774312514120"><a name="p1774312514120"></a><a name="p1774312514120"></a>The mode is fixed at main title mode (main title and subtitle).</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-    >![](../../public_sys-resources/icon-note.gif) **NOTE:** 
-    >Currently, only the scrollable component  **<List\>**  is supported.
-
-
-## Events<a name="section992435316359"></a>
-
-<a name="table119951413133615"></a>
-<table><thead align="left"><tr id="row139951813163619"><th class="cellrowborder" valign="top" width="49.94%" id="mcps1.1.3.1.1"><p id="p399515132360"><a name="p399515132360"></a><a name="p399515132360"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="50.06%" id="mcps1.1.3.1.2"><p id="p1199531313369"><a name="p1199531313369"></a><a name="p1199531313369"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row799671373618"><td class="cellrowborder" valign="top" width="49.94%" headers="mcps1.1.3.1.1 "><p id="p1199619138367"><a name="p1199619138367"></a><a name="p1199619138367"></a>onTitleModeChanged(callback: (titleMode: NavigationTitleMode) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" width="50.06%" headers="mcps1.1.3.1.2 "><p id="p12996171318367"><a name="p12996171318367"></a><a name="p12996171318367"></a>Triggered when <strong id="b16876934928"><a name="b16876934928"></a><a name="b16876934928"></a>titleMode</strong> is set to <strong id="b1146213217215"><a name="b1146213217215"></a><a name="b1146213217215"></a>NavigationTitleMode.Free</strong> and the title bar mode changes as content scrolls.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section4459736105512"></a>
-
-```
-/ Example 01
-@Entry
-@Component
-struct NavigationExample {
-  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
-  @State hideBar: boolean = true
-
-  @Builder NavigationTitle() {
-    Column() {
-      Text('title')
-        .width(80)
-        .height(60)
-        .fontColor(Color.Blue)
-        .fontSize(30)
-    }
-    .onClick(() => {
-      console.log("title")
-    })
-  }
-
-  @Builder NavigationMenus() {
-    Row() {
-      Image('images/add.png')
-        .width(25)
-        .height(25)
-      Image('comment/more.png')
-        .width(25)
-        .height(25)
-        .margin({ left: 30 })
-    }.width(100)
-  }
-
-  build() {
-    Column() {
-      Navigation() {
-        Search({ value: '', placeholder: "" }).width('85%').margin(26)
-        List({ space: 5, initialIndex: 0 }) {
-          ForEach(this.arr, (item) => {
-            ListItem() {
-              Text('' + item)
-                .width('90%')
-                .height(80)
-                .backgroundColor('#3366CC')
-                .borderRadius(15)
-                .fontSize(16)
-                .textAlign(TextAlign.Center)
-            }.editable(true)
-          }, item => item)
-        }
-        .listDirection(Axis.Vertical)
-        .height(300)
-        .margin({ top: 10, left: 18 })
-        .width('100%')
-
-        Button(this.hideBar ? "tool bar" : "hide bar")
-          .onClick(() => {
-            this.hideBar = !this.hideBar
-          })
-          .margin({ left: 135, top: 60 })
-      }
-      .title(this.NavigationTitle)
-      .subTitle('subtitle')
-      .menus(this.NavigationMenus)
-      .titleMode(NavigationTitleMode.Free)
-      .hideTitleBar(false)
-      .hideBackButton(false)
-      .onTitleModeChanged((titleModel: NavigationTitleMode) => {
-        console.log('titleMode')
-      })
-      .toolBar({ items: [
-        { value: 'app', icon: 'images/grid.svg', action: () => {
-          console.log("app")
-        } },
-        { value: 'add', icon: 'images/add.svg', action: () => {
-          console.log("add")
-        } },
-        { value: 'collect', icon: 'images/collect.svg', action: () => {
-          console.log("collect")
-        } }] })
-      .hideToolBar(this.hideBar)
-    }
-  }
-}
-```
-
-![](figures/66666.gif)
-
-```
-// Example 02
-@Entry
-@Component
-struct ToolbarBuilderExample {
-  @State currentIndex: number = 0
-  @State Build: Array<Object> = [
-    {
-      icon: $r('app.media.ic_public_add'),
-      icon_after: $r('app.media.ic_public_addcolor'),
-      text: 'add',
-      num: 0
-    },
-    {
-      icon: $r('app.media.ic_public_app'),
-      icon_after: $r('app.media.ic_public_appcolor'),
-      text: 'app',
-      num: 1
-    },
-    {
-      icon: $r('app.media.ic_public_collect'),
-      icon_after: $r('app.media.ic_public_collectcolor'),
-      text: 'collect',
-      num: 2
-    }
-  ]
-
-  @Builder NavigationToolbar() {
-    Row() {
-      ForEach(this.Build, item => {
-        Column() {
-          Image(this.currentIndex == item.num ? item.icon_after : item.icon)
-            .width(25)
-            .height(25)
-          Text(item.text)
-            .fontColor(this.currentIndex == item.num ? "#ff7500" : "#000000")
-        }
-        .onClick(() => {
-          this.currentIndex = item.num
-        })
-        .margin({ left: 70 })
-      })
-    }
-  }
-
-  build() {
-    Column() {
-      Navigation() {
-        Flex() {
-        }
-      }
-      .toolBar(this.NavigationToolbar)
-    }
-  }
-}
-```
-
-![](figures/duande.gif)
-
diff --git a/en/application-dev/reference/arkui-ts/ts-container-navigator.md b/en/application-dev/reference/arkui-ts/ts-container-navigator.md
index a07cec59e74a380fa348d3236dd7954bf97c7c3b..ef7f0b331086ed9506fa083ae76ba32e5c5c89b5 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-navigator.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-navigator.md
@@ -1,128 +1,54 @@
-# Navigator<a name="EN-US_TOPIC_0000001192915106"></a>
+# Navigator
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Navigator\>**  component provides redirection.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section1933872716571"></a>
+
+The **&lt;Navigator&gt;** component provides redirection.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section1146935319579"></a>
+
+## Child Components
 
 This component can contain child components.
 
-## APIs<a name="section5861121019581"></a>
 
-Navigator\(value?: \{target: string, type?: NavigationType\}\)
+## APIs
+
+Navigator(value?: {target: string, type?: NavigationType})
 
 Creates a navigator.
 
--   Parameters
-
-    <a name="table10281697251"></a>
-    <table><thead align="left"><tr id="row102818913255"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p6281197258"><a name="p6281197258"></a><a name="p6281197258"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18%" id="mcps1.1.6.1.2"><p id="p132815942510"><a name="p132815942510"></a><a name="p132815942510"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="8.25%" id="mcps1.1.6.1.3"><p id="p162839172514"><a name="p162839172514"></a><a name="p162839172514"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="21.42%" id="mcps1.1.6.1.4"><p id="p182859162519"><a name="p182859162519"></a><a name="p182859162519"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="36.22%" id="mcps1.1.6.1.5"><p id="p172879102514"><a name="p172879102514"></a><a name="p172879102514"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row9282912251"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p112829172510"><a name="p112829172510"></a><a name="p112829172510"></a>target</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18%" headers="mcps1.1.6.1.2 "><p id="p628397252"><a name="p628397252"></a><a name="p628397252"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.25%" headers="mcps1.1.6.1.3 "><p id="p1429694254"><a name="p1429694254"></a><a name="p1429694254"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.42%" headers="mcps1.1.6.1.4 "><p id="p182914942513"><a name="p182914942513"></a><a name="p182914942513"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p12296913258"><a name="p12296913258"></a><a name="p12296913258"></a>Path of the target page to be redirected to.</p>
-    </td>
-    </tr>
-    <tr id="row18291497259"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p529119162516"><a name="p529119162516"></a><a name="p529119162516"></a>type</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18%" headers="mcps1.1.6.1.2 "><p id="p0299910251"><a name="p0299910251"></a><a name="p0299910251"></a><a href="#table3452114216394">NavigationType</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.25%" headers="mcps1.1.6.1.3 "><p id="p32918962514"><a name="p32918962514"></a><a name="p32918962514"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.42%" headers="mcps1.1.6.1.4 "><p id="p102969112514"><a name="p102969112514"></a><a name="p102969112514"></a>Push</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p132979132520"><a name="p132979132520"></a><a name="p132979132520"></a>Navigation type.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   NavigationType enums
-
-    <a name="table3452114216394"></a>
-    <table><thead align="left"><tr id="row245219426397"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p545244283914"><a name="p545244283914"></a><a name="p545244283914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p2452114203917"><a name="p2452114203917"></a><a name="p2452114203917"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6452144218390"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p34529427398"><a name="p34529427398"></a><a name="p34529427398"></a>Push</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245211421393"><a name="p1245211421393"></a><a name="p1245211421393"></a>Navigates to a specified page in the application.</p>
-    </td>
-    </tr>
-    <tr id="row12452184217398"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p54523425398"><a name="p54523425398"></a><a name="p54523425398"></a>Replace</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p745215426391"><a name="p745215426391"></a><a name="p745215426391"></a>Replaces the current page with another one in the application and destroys the current page.</p>
-    </td>
-    </tr>
-    <tr id="row9452134213392"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p510719111403"><a name="p510719111403"></a><a name="p510719111403"></a>Back</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p154533425394"><a name="p154533425394"></a><a name="p154533425394"></a>Returns to the previous page or a specified page.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section187781816826"></a>
-
-<a name="table1979mcpsimp"></a>
-<table><thead align="left"><tr id="row1986mcpsimp"><th class="cellrowborder" valign="top" width="11.871187118711871%" id="mcps1.1.5.1.1"><p id="p1988mcpsimp"><a name="p1988mcpsimp"></a><a name="p1988mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="16.291629162916294%" id="mcps1.1.5.1.2"><p id="p1990mcpsimp"><a name="p1990mcpsimp"></a><a name="p1990mcpsimp"></a>Parameters</p>
-</th>
-<th class="cellrowborder" valign="top" width="12.73127312731273%" id="mcps1.1.5.1.3"><p id="p1992mcpsimp"><a name="p1992mcpsimp"></a><a name="p1992mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="59.10591059105911%" id="mcps1.1.5.1.4"><p id="p1994mcpsimp"><a name="p1994mcpsimp"></a><a name="p1994mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row2013mcpsimp"><td class="cellrowborder" valign="top" width="11.871187118711871%" headers="mcps1.1.5.1.1 "><p id="p2015mcpsimp"><a name="p2015mcpsimp"></a><a name="p2015mcpsimp"></a>active</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.291629162916294%" headers="mcps1.1.5.1.2 "><p id="p2017mcpsimp"><a name="p2017mcpsimp"></a><a name="p2017mcpsimp"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.73127312731273%" headers="mcps1.1.5.1.3 "><p id="p2019mcpsimp"><a name="p2019mcpsimp"></a><a name="p2019mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="59.10591059105911%" headers="mcps1.1.5.1.4 "><p id="p2021mcpsimp"><a name="p2021mcpsimp"></a><a name="p2021mcpsimp"></a>Whether the <strong id="b273713177519"><a name="b273713177519"></a><a name="b273713177519"></a>&lt;Navigator&gt;</strong> component is activated. If the component is activated, the corresponding navigation takes effect.</p>
-</td>
-</tr>
-<tr id="row572015119533"><td class="cellrowborder" valign="top" width="11.871187118711871%" headers="mcps1.1.5.1.1 "><p id="p18721161185314"><a name="p18721161185314"></a><a name="p18721161185314"></a>params</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.291629162916294%" headers="mcps1.1.5.1.2 "><p id="p107210118536"><a name="p107210118536"></a><a name="p107210118536"></a>Object</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.73127312731273%" headers="mcps1.1.5.1.3 "><p id="p187211917531"><a name="p187211917531"></a><a name="p187211917531"></a>undefined</p>
-</td>
-<td class="cellrowborder" valign="top" width="59.10591059105911%" headers="mcps1.1.5.1.4 "><p id="p47216118539"><a name="p47216118539"></a><a name="p47216118539"></a>Data that needs to be passed to the target page during redirection. You can use <strong id="b1860712605214"><a name="b1860712605214"></a><a name="b1860712605214"></a>router.getParams()</strong> to obtain the data on the target page.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section186436131831"></a>
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | target | string | Yes | - | Path&nbsp;of&nbsp;the&nbsp;target&nbsp;page&nbsp;to&nbsp;be&nbsp;redirected&nbsp;to. | 
+  | type | NavigationType | No | NavigationType.Push | Navigation&nbsp;type. | 
+
+- NavigationType enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Push | Navigates&nbsp;to&nbsp;a&nbsp;specified&nbsp;page&nbsp;in&nbsp;the&nbsp;application. | 
+  | Replace | Replaces&nbsp;the&nbsp;current&nbsp;page&nbsp;with&nbsp;another&nbsp;one&nbsp;in&nbsp;the&nbsp;application&nbsp;and&nbsp;destroys&nbsp;the&nbsp;current&nbsp;page. | 
+  | Back | Returns&nbsp;to&nbsp;the&nbsp;previous&nbsp;page&nbsp;or&nbsp;a&nbsp;specified&nbsp;page. | 
 
+
+## Attributes
+
+  | Name | Parameters | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| active | boolean | - | Whether&nbsp;the&nbsp;**&lt;Navigator&gt;**&nbsp;component&nbsp;is&nbsp;activated.&nbsp;If&nbsp;the&nbsp;component&nbsp;is&nbsp;activated,&nbsp;the&nbsp;corresponding&nbsp;navigation&nbsp;takes&nbsp;effect. | 
+| params | Object | undefined | Data&nbsp;that&nbsp;needs&nbsp;to&nbsp;be&nbsp;passed&nbsp;to&nbsp;the&nbsp;target&nbsp;page&nbsp;during&nbsp;redirection.&nbsp;You&nbsp;can&nbsp;use&nbsp;**router.getParams()**&nbsp;to&nbsp;obtain&nbsp;the&nbsp;data&nbsp;on&nbsp;the&nbsp;target&nbsp;page. | 
+
+
+## Example
+
+  
 ```
 // Navigator Page
 @Entry
@@ -148,6 +74,7 @@ struct NavigatorExample {
 }
 ```
 
+  
 ```
 // Detail Page
 import router from '@system.router'
@@ -171,6 +98,7 @@ struct DetailExample {
 
 ```
 
+  
 ```
 // Back Page
 @Entry
@@ -186,5 +114,4 @@ struct BackExample {
 }
 ```
 
-![](figures/navigator.gif)
-
+![en-us_image_0000001212058486](figures/en-us_image_0000001212058486.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-container-panel.md b/en/application-dev/reference/arkui-ts/ts-container-panel.md
index 5c32f0a4cbfb18288990478253d37b58bc0a088a..85416243d108e02d4e90fa7503eaa5acb70b463b 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-panel.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-panel.md
@@ -1,196 +1,68 @@
-# Panel<a name="EN-US_TOPIC_0000001192755104"></a>
+# Panel
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Panel\>**  component is a slidable panel that presents lightweight content with flexible sizes. It is a pop-up component.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section36946188511"></a>
+
+The **&lt;Panel&gt;** component is a slidable panel that presents lightweight content with flexible sizes. It is a pop-up component.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section897517591357"></a>
+
+## Child Components
 
 This component can contain child components.
 
-## APIs<a name="section14655428254"></a>
-
-Panel\(value:\{show:boolean\}\)
-
--   Parameter
-
-    <a name="table10719114169"></a>
-    <table><thead align="left"><tr id="row1571913410610"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p87202043618"><a name="p87202043618"></a><a name="p87202043618"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.580000000000002%" id="mcps1.1.6.1.2"><p id="p5720441466"><a name="p5720441466"></a><a name="p5720441466"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.67%" id="mcps1.1.6.1.3"><p id="p147201241662"><a name="p147201241662"></a><a name="p147201241662"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="21.42%" id="mcps1.1.6.1.4"><p id="p187201141967"><a name="p187201141967"></a><a name="p187201141967"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="36.22%" id="mcps1.1.6.1.5"><p id="p127201740612"><a name="p127201740612"></a><a name="p127201740612"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row12720249611"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p07201441569"><a name="p07201441569"></a><a name="p07201441569"></a>show</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.580000000000002%" headers="mcps1.1.6.1.2 "><p id="p1528013403185"><a name="p1528013403185"></a><a name="p1528013403185"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.67%" headers="mcps1.1.6.1.3 "><p id="p16720134166"><a name="p16720134166"></a><a name="p16720134166"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.42%" headers="mcps1.1.6.1.4 "><p id="p2357916185414"><a name="p2357916185414"></a><a name="p2357916185414"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p137201841366"><a name="p137201841366"></a><a name="p137201841366"></a>Whether the panel is shown or hidden.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section1398913481251"></a>
-
-<a name="table2515mcpsimp"></a>
-<table><thead align="left"><tr id="row2522mcpsimp"><th class="cellrowborder" valign="top" width="18.81188118811881%" id="mcps1.1.5.1.1"><p id="p2524mcpsimp"><a name="p2524mcpsimp"></a><a name="p2524mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="18.81188118811881%" id="mcps1.1.5.1.2"><p id="p2526mcpsimp"><a name="p2526mcpsimp"></a><a name="p2526mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="14.85148514851485%" id="mcps1.1.5.1.3"><p id="p2528mcpsimp"><a name="p2528mcpsimp"></a><a name="p2528mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="47.52475247524753%" id="mcps1.1.5.1.4"><p id="p2530mcpsimp"><a name="p2530mcpsimp"></a><a name="p2530mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row2531mcpsimp"><td class="cellrowborder" valign="top" width="18.81188118811881%" headers="mcps1.1.5.1.1 "><p id="p2533mcpsimp"><a name="p2533mcpsimp"></a><a name="p2533mcpsimp"></a>type</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.81188118811881%" headers="mcps1.1.5.1.2 "><p id="p2535mcpsimp"><a name="p2535mcpsimp"></a><a name="p2535mcpsimp"></a><a href="#li188691730162810">PanelType</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="14.85148514851485%" headers="mcps1.1.5.1.3 "><p id="p2537mcpsimp"><a name="p2537mcpsimp"></a><a name="p2537mcpsimp"></a>Foldable</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.52475247524753%" headers="mcps1.1.5.1.4 "><p id="p2539mcpsimp"><a name="p2539mcpsimp"></a><a name="p2539mcpsimp"></a>Type of the panel.</p>
-</td>
-</tr>
-<tr id="row2540mcpsimp"><td class="cellrowborder" valign="top" width="18.81188118811881%" headers="mcps1.1.5.1.1 "><p id="p2542mcpsimp"><a name="p2542mcpsimp"></a><a name="p2542mcpsimp"></a>mode</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.81188118811881%" headers="mcps1.1.5.1.2 "><p id="p2544mcpsimp"><a name="p2544mcpsimp"></a><a name="p2544mcpsimp"></a><a href="#li1476011321286">PanelMode</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="14.85148514851485%" headers="mcps1.1.5.1.3 "><p id="p2546mcpsimp"><a name="p2546mcpsimp"></a><a name="p2546mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.52475247524753%" headers="mcps1.1.5.1.4 "><p id="p2548mcpsimp"><a name="p2548mcpsimp"></a><a name="p2548mcpsimp"></a>Initial status of the panel.</p>
-</td>
-</tr>
-<tr id="row2549mcpsimp"><td class="cellrowborder" valign="top" width="18.81188118811881%" headers="mcps1.1.5.1.1 "><p id="p2551mcpsimp"><a name="p2551mcpsimp"></a><a name="p2551mcpsimp"></a>dragBar</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.81188118811881%" headers="mcps1.1.5.1.2 "><p id="p2553mcpsimp"><a name="p2553mcpsimp"></a><a name="p2553mcpsimp"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.85148514851485%" headers="mcps1.1.5.1.3 "><p id="p2555mcpsimp"><a name="p2555mcpsimp"></a><a name="p2555mcpsimp"></a>true</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.52475247524753%" headers="mcps1.1.5.1.4 "><p id="p2557mcpsimp"><a name="p2557mcpsimp"></a><a name="p2557mcpsimp"></a>Whether to enable a drag bar. The value <strong id="b175914863823932"><a name="b175914863823932"></a><a name="b175914863823932"></a>true</strong> means that the drag bar will be displayed, and <strong id="b6558009423932"><a name="b6558009423932"></a><a name="b6558009423932"></a>false</strong> means the opposite.</p>
-</td>
-</tr>
-<tr id="row2558mcpsimp"><td class="cellrowborder" valign="top" width="18.81188118811881%" headers="mcps1.1.5.1.1 "><p id="p2560mcpsimp"><a name="p2560mcpsimp"></a><a name="p2560mcpsimp"></a>fullHeight</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.81188118811881%" headers="mcps1.1.5.1.2 "><p id="p2562mcpsimp"><a name="p2562mcpsimp"></a><a name="p2562mcpsimp"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.85148514851485%" headers="mcps1.1.5.1.3 "><p id="p2564mcpsimp"><a name="p2564mcpsimp"></a><a name="p2564mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.52475247524753%" headers="mcps1.1.5.1.4 "><p id="p2566mcpsimp"><a name="p2566mcpsimp"></a><a name="p2566mcpsimp"></a>Panel height in the <strong id="b214616923110"><a name="b214616923110"></a><a name="b214616923110"></a>PanelMode.Full</strong> mode.</p>
-</td>
-</tr>
-<tr id="row2567mcpsimp"><td class="cellrowborder" valign="top" width="18.81188118811881%" headers="mcps1.1.5.1.1 "><p id="p2569mcpsimp"><a name="p2569mcpsimp"></a><a name="p2569mcpsimp"></a>halfHeight</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.81188118811881%" headers="mcps1.1.5.1.2 "><p id="p2571mcpsimp"><a name="p2571mcpsimp"></a><a name="p2571mcpsimp"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.85148514851485%" headers="mcps1.1.5.1.3 "><p id="p2573mcpsimp"><a name="p2573mcpsimp"></a><a name="p2573mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.52475247524753%" headers="mcps1.1.5.1.4 "><p id="p2575mcpsimp"><a name="p2575mcpsimp"></a><a name="p2575mcpsimp"></a>Panel height in the <strong id="b134761647023932"><a name="b134761647023932"></a><a name="b134761647023932"></a>PanelMode.Half</strong> mode. The default value is half of the screen height.</p>
-</td>
-</tr>
-<tr id="row2576mcpsimp"><td class="cellrowborder" valign="top" width="18.81188118811881%" headers="mcps1.1.5.1.1 "><p id="p2578mcpsimp"><a name="p2578mcpsimp"></a><a name="p2578mcpsimp"></a>miniHeight</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.81188118811881%" headers="mcps1.1.5.1.2 "><p id="p2580mcpsimp"><a name="p2580mcpsimp"></a><a name="p2580mcpsimp"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.85148514851485%" headers="mcps1.1.5.1.3 "><p id="p2582mcpsimp"><a name="p2582mcpsimp"></a><a name="p2582mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.52475247524753%" headers="mcps1.1.5.1.4 "><p id="p2584mcpsimp"><a name="p2584mcpsimp"></a><a name="p2584mcpsimp"></a>Panel height in the <strong id="b1772605453110"><a name="b1772605453110"></a><a name="b1772605453110"></a>PanelMode.Mini</strong> mode.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li188691730162810"></a>PanelType enums
-
-    <a name="table3452114216394"></a>
-    <table><thead align="left"><tr id="row245219426397"><th class="cellrowborder" valign="top" width="22.919999999999998%" id="mcps1.1.3.1.1"><p id="p545244283914"><a name="p545244283914"></a><a name="p545244283914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="77.08%" id="mcps1.1.3.1.2"><p id="p2452114203917"><a name="p2452114203917"></a><a name="p2452114203917"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6452144218390"><td class="cellrowborder" valign="top" width="22.919999999999998%" headers="mcps1.1.3.1.1 "><p id="p34529427398"><a name="p34529427398"></a><a name="p34529427398"></a>Minibar</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="77.08%" headers="mcps1.1.3.1.2 "><p id="p1245211421393"><a name="p1245211421393"></a><a name="p1245211421393"></a>A minibar panel displays content in the minibar area or a large (fullscreen-like) area.</p>
-    </td>
-    </tr>
-    <tr id="row12452184217398"><td class="cellrowborder" valign="top" width="22.919999999999998%" headers="mcps1.1.3.1.1 "><p id="p54523425398"><a name="p54523425398"></a><a name="p54523425398"></a>Foldable</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="77.08%" headers="mcps1.1.3.1.2 "><p id="p745215426391"><a name="p745215426391"></a><a name="p745215426391"></a>A foldable panel displays permanent content in a large (fullscreen-like), medium-sized (halfscreen-like), or small area.</p>
-    </td>
-    </tr>
-    <tr id="row9452134213392"><td class="cellrowborder" valign="top" width="22.919999999999998%" headers="mcps1.1.3.1.1 "><p id="p510719111403"><a name="p510719111403"></a><a name="p510719111403"></a>Temporary</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="77.08%" headers="mcps1.1.3.1.2 "><p id="p154533425394"><a name="p154533425394"></a><a name="p154533425394"></a>A temporary panel displays content in a large (fullscreen-like) or medium-sized (halfscreen-like) area.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   <a name="li1476011321286"></a>PanelMode enums
-
-    <a name="table69681541193718"></a>
-    <table><thead align="left"><tr id="row10968541133712"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p119681141133713"><a name="p119681141133713"></a><a name="p119681141133713"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p796884115375"><a name="p796884115375"></a><a name="p796884115375"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row18968184183719"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p196834112378"><a name="p196834112378"></a><a name="p196834112378"></a>Mini</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1196854193717"><a name="p1196854193717"></a><a name="p1196854193717"></a>Displays a <strong id="b689235153219"><a name="b689235153219"></a><a name="b689235153219"></a>minibar</strong> or <strong id="b689295113214"><a name="b689295113214"></a><a name="b689295113214"></a>foldable</strong> panel in its minimum size. This attribute does not take effect for <strong id="b8893115113323"><a name="b8893115113323"></a><a name="b8893115113323"></a>temporary</strong> panels.</p>
-    </td>
-    </tr>
-    <tr id="row15968204153711"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p29681841163712"><a name="p29681841163712"></a><a name="p29681841163712"></a>Half</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p79681841193711"><a name="p79681841193711"></a><a name="p79681841193711"></a>Displays a <strong id="b296919595326"><a name="b296919595326"></a><a name="b296919595326"></a>foldable</strong> or <strong id="b10969559193213"><a name="b10969559193213"></a><a name="b10969559193213"></a>temporary</strong> panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for <strong id="b11969195919328"><a name="b11969195919328"></a><a name="b11969195919328"></a>minibar</strong> panels.</p>
-    </td>
-    </tr>
-    <tr id="row149682414374"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1196914173710"><a name="p1196914173710"></a><a name="p1196914173710"></a>Full</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1496974111379"><a name="p1496974111379"></a><a name="p1496974111379"></a>Displays a panel in a large (fullscreen-like) area.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Events<a name="section142174333711"></a>
-
-<a name="table2605mcpsimp"></a>
-<table><thead align="left"><tr id="row2611mcpsimp"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p2615mcpsimp"><a name="p2615mcpsimp"></a><a name="p2615mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p2617mcpsimp"><a name="p2617mcpsimp"></a><a name="p2617mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row2618mcpsimp"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p2620mcpsimp"><a name="p2620mcpsimp"></a><a name="p2620mcpsimp"></a>onChange(callback: (width: number, height: number, mode: PanelMode) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p2624mcpsimp"><a name="p2624mcpsimp"></a><a name="p2624mcpsimp"></a>Triggered when the status of the panel changes. The returned height value is the height of the content area. When the value of <strong id="b1464175023311"><a name="b1464175023311"></a><a name="b1464175023311"></a>dragbar</strong> is <strong id="b10868652163316"><a name="b10868652163316"></a><a name="b10868652163316"></a>true</strong>, the height of the panel is the dragbar height plus the height of the content area.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section758722018820"></a>
+
+## APIs
+
+Panel(value:{show:boolean})
+
+- Parameter
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | show | boolean | Yes | - | Whether&nbsp;the&nbsp;panel&nbsp;is&nbsp;shown&nbsp;or&nbsp;hidden. | 
+
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| type | PanelType | PanelType.Foldable | Type&nbsp;of&nbsp;the&nbsp;panel. | 
+| mode | PanelMode | - | Initial&nbsp;status&nbsp;of&nbsp;the&nbsp;panel. | 
+| dragBar | boolean | true | Whether&nbsp;to&nbsp;enable&nbsp;a&nbsp;drag&nbsp;bar.&nbsp;The&nbsp;value&nbsp;**true**&nbsp;means&nbsp;that&nbsp;the&nbsp;drag&nbsp;bar&nbsp;will&nbsp;be&nbsp;displayed,&nbsp;and&nbsp;**false**&nbsp;means&nbsp;the&nbsp;opposite. | 
+| fullHeight | Length | - | Panel&nbsp;height&nbsp;in&nbsp;the&nbsp;**PanelMode.Full**&nbsp;mode. | 
+| halfHeight | Length | - | Panel&nbsp;height&nbsp;in&nbsp;the&nbsp;**PanelMode.Half**&nbsp;mode.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;half&nbsp;of&nbsp;the&nbsp;screen&nbsp;height. | 
+| miniHeight | Length | - | Panel&nbsp;height&nbsp;in&nbsp;the&nbsp;**PanelMode.Mini**&nbsp;mode. | 
+
+- PanelType enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Minibar | A&nbsp;minibar&nbsp;panel&nbsp;displays&nbsp;content&nbsp;in&nbsp;the&nbsp;minibar&nbsp;area&nbsp;or&nbsp;a&nbsp;large&nbsp;(fullscreen-like)&nbsp;area. | 
+  | Foldable | A&nbsp;foldable&nbsp;panel&nbsp;displays&nbsp;permanent&nbsp;content&nbsp;in&nbsp;a&nbsp;large&nbsp;(fullscreen-like),&nbsp;medium-sized&nbsp;(halfscreen-like),&nbsp;or&nbsp;small&nbsp;area. | 
+  | Temporary | A&nbsp;temporary&nbsp;panel&nbsp;displays&nbsp;content&nbsp;in&nbsp;a&nbsp;large&nbsp;(fullscreen-like)&nbsp;or&nbsp;medium-sized&nbsp;(halfscreen-like)&nbsp;area. | 
+
+- PanelMode enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Mini | Displays&nbsp;a&nbsp;**minibar**&nbsp;or&nbsp;**foldable**&nbsp;panel&nbsp;in&nbsp;its&nbsp;minimum&nbsp;size.&nbsp;This&nbsp;attribute&nbsp;does&nbsp;not&nbsp;take&nbsp;effect&nbsp;for&nbsp;**temporary**&nbsp;panels. | 
+  | Half | Displays&nbsp;a&nbsp;**foldable**&nbsp;or&nbsp;**temporary**&nbsp;panel&nbsp;in&nbsp;a&nbsp;medium-sized&nbsp;(halfscreen-like)&nbsp;area.&nbsp;This&nbsp;attribute&nbsp;does&nbsp;not&nbsp;take&nbsp;effect&nbsp;for&nbsp;**minibar**&nbsp;panels. | 
+  | Full | Displays&nbsp;a&nbsp;panel&nbsp;in&nbsp;a&nbsp;large&nbsp;(fullscreen-like)&nbsp;area. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onChange(callback:&nbsp;(width:&nbsp;number,&nbsp;height:&nbsp;number,&nbsp;mode:&nbsp;PanelMode)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;status&nbsp;of&nbsp;the&nbsp;panel&nbsp;changes.&nbsp;The&nbsp;returned&nbsp;height&nbsp;value&nbsp;is&nbsp;the&nbsp;height&nbsp;of&nbsp;the&nbsp;content&nbsp;area.&nbsp;When&nbsp;the&nbsp;value&nbsp;of&nbsp;**dragbar**&nbsp;is&nbsp;**true**,&nbsp;the&nbsp;height&nbsp;of&nbsp;the&nbsp;panel&nbsp;is&nbsp;the&nbsp;dragbar&nbsp;height&nbsp;plus&nbsp;the&nbsp;height&nbsp;of&nbsp;the&nbsp;content&nbsp;area. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -224,5 +96,4 @@ struct PanelExample {
 }
 ```
 
-![](figures/panel.gif)
-
+![en-us_image_0000001256978381](figures/en-us_image_0000001256978381.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md b/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md
index cae73207d988b6e6d6f6b82ca5b4cdadc5b0679a..1b034f866a8a95b0a193c8b93d65ee226060d588 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md
@@ -1,48 +1,41 @@
-# RowSplit<a name="EN-US_TOPIC_0000001193075100"></a>
+# RowSplit
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<RowSplit\>**  lays out child components horizontally and inserts a vertical divider between every two child components.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section53281531154915"></a>
+
+The **&lt;RowSplit&gt;** lays out child components horizontally and inserts a vertical divider between every two child components.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section5989144051714"></a>
+
+## Child Components
 
 This component can contain child components.
 
-## APIs<a name="section1643325819470"></a>
 
-RowSplit\(\)
+## APIs
 
-## Attributes<a name="section945991855410"></a>
+RowSplit()
 
-<a name="table252174055416"></a>
-<table><thead align="left"><tr id="row353940135411"><th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.1.4.1.1"><p id="p175318403545"><a name="p175318403545"></a><a name="p175318403545"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="29.532953295329534%" id="mcps1.1.4.1.2"><p id="p453194014548"><a name="p453194014548"></a><a name="p453194014548"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="37.13371337133714%" id="mcps1.1.4.1.3"><p id="p19531240145412"><a name="p19531240145412"></a><a name="p19531240145412"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row125384035411"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p1753134065413"><a name="p1753134065413"></a><a name="p1753134065413"></a>resizeable</p>
-</td>
-<td class="cellrowborder" valign="top" width="29.532953295329534%" headers="mcps1.1.4.1.2 "><p id="p85364012541"><a name="p85364012541"></a><a name="p85364012541"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.13371337133714%" headers="mcps1.1.4.1.3 "><p id="p85314400547"><a name="p85314400547"></a><a name="p85314400547"></a>Whether the divider can be dragged. The default value is <strong id="b224464612187"><a name="b224464612187"></a><a name="b224464612187"></a>false</strong>.</p>
-</td>
-</tr>
-</tbody>
-</table>
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->Similar to  **<RowSplit\>**, the divider of  **<RowSplit\>**  can be dragged to a position that just fully holds a component.
+## Attributes
 
-## Example<a name="section1078035104913"></a>
+  | Name | Type | Description | 
+| -------- | -------- | -------- |
+| resizeable | boolean | Whether&nbsp;the&nbsp;divider&nbsp;can&nbsp;be&nbsp;dragged.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**false**. | 
 
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> Similar to **&lt;RowSplit&gt;**, the divider of **&lt;RowSplit&gt;** can be dragged to a position that just fully holds a component.
+
+
+## Example
+
+  
 ```
 @Entry
 @Component
@@ -64,5 +57,4 @@ struct RowSplitExample {
 }
 ```
 
-![](figures/rowsplit.gif)
-
+![en-us_image_0000001212058482](figures/en-us_image_0000001212058482.gif)
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 a52e655865b7dd978c866348be8e77073d6b792f..47880bae2416862adf0e39aa872d53106bdbc75a 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-scroll.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-scroll.md
@@ -1,341 +1,143 @@
-# Scroll<a name="EN-US_TOPIC_0000001192595158"></a>
+# Scroll
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Scroll\>**  component scrolls the content when the layout size of a component exceeds the viewport of its parent component.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section1073795814133"></a>
+
+The **&lt;Scroll&gt;** component scrolls the content when the layout size of a component exceeds the viewport of its parent component.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section152511941148"></a>
+
+## Child Components
 
 This component supports only one child component.
 
-## APIs<a name="section13412231148"></a>
-
-Scroll\(scroller?: Scroller\)
-
-## Attributes<a name="section186841370012"></a>
-
-<a name="table0461840719"></a>
-<table><thead align="left"><tr id="row10461406119"><th class="cellrowborder" valign="top" width="18.81188118811881%" id="mcps1.1.5.1.1"><p id="p114614406120"><a name="p114614406120"></a><a name="p114614406120"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="18.801880188018803%" id="mcps1.1.5.1.2"><p id="p1461740412"><a name="p1461740412"></a><a name="p1461740412"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="14.861486148614864%" id="mcps1.1.5.1.3"><p id="p1146194011113"><a name="p1146194011113"></a><a name="p1146194011113"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="47.52475247524753%" id="mcps1.1.5.1.4"><p id="p1463401818"><a name="p1463401818"></a><a name="p1463401818"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row74616401011"><td class="cellrowborder" valign="top" width="18.81188118811881%" headers="mcps1.1.5.1.1 "><p id="p44619407119"><a name="p44619407119"></a><a name="p44619407119"></a>scrollable</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.801880188018803%" headers="mcps1.1.5.1.2 "><p id="p114684017118"><a name="p114684017118"></a><a name="p114684017118"></a><a href="#li1464044171913">ScrollDirection</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="14.861486148614864%" headers="mcps1.1.5.1.3 "><p id="p134610401415"><a name="p134610401415"></a><a name="p134610401415"></a>Vertical</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.52475247524753%" headers="mcps1.1.5.1.4 "><p id="p74616407117"><a name="p74616407117"></a><a name="p74616407117"></a>Scroll method.</p>
-</td>
-</tr>
-<tr id="row10854143717118"><td class="cellrowborder" valign="top" width="18.81188118811881%" headers="mcps1.1.5.1.1 "><p id="p1685403713116"><a name="p1685403713116"></a><a name="p1685403713116"></a>scrollBar</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.801880188018803%" headers="mcps1.1.5.1.2 "><p id="p087765315"><a name="p087765315"></a><a name="p087765315"></a><a href="ts-appendix-enums.md#section122549529179">BarState</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="14.861486148614864%" headers="mcps1.1.5.1.3 "><p id="p173471491823"><a name="p173471491823"></a><a name="p173471491823"></a>Auto</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.52475247524753%" headers="mcps1.1.5.1.4 "><p id="p114261215315"><a name="p114261215315"></a><a name="p114261215315"></a>Scroll bar status.</p>
-</td>
-</tr>
-<tr id="row11414540317"><td class="cellrowborder" valign="top" width="18.81188118811881%" headers="mcps1.1.5.1.1 "><p id="p19414194019118"><a name="p19414194019118"></a><a name="p19414194019118"></a>scrollBarColor</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.801880188018803%" headers="mcps1.1.5.1.2 "><p id="p841454012118"><a name="p841454012118"></a><a name="p841454012118"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.861486148614864%" headers="mcps1.1.5.1.3 "><p id="p194142401415"><a name="p194142401415"></a><a name="p194142401415"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.52475247524753%" headers="mcps1.1.5.1.4 "><p id="p7414340714"><a name="p7414340714"></a><a name="p7414340714"></a>Color of the scroll bar.</p>
-</td>
-</tr>
-<tr id="row044484216112"><td class="cellrowborder" valign="top" width="18.81188118811881%" headers="mcps1.1.5.1.1 "><p id="p1944417421711"><a name="p1944417421711"></a><a name="p1944417421711"></a>scrollBarWidth</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.801880188018803%" headers="mcps1.1.5.1.2 "><p id="p1386661639"><a name="p1386661639"></a><a name="p1386661639"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.861486148614864%" headers="mcps1.1.5.1.3 "><p id="p4444542713"><a name="p4444542713"></a><a name="p4444542713"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.52475247524753%" headers="mcps1.1.5.1.4 "><p id="p11444642012"><a name="p11444642012"></a><a name="p11444642012"></a>Width of the scrollbar.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li1464044171913"></a>ScrollDirection
-
-    <a name="table13104911929"></a>
-    <table><thead align="left"><tr id="row11104011320"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p11104171129"><a name="p11104171129"></a><a name="p11104171129"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p610415110213"><a name="p610415110213"></a><a name="p610415110213"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row151040115210"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p19104815217"><a name="p19104815217"></a><a name="p19104815217"></a>Horizontal</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p7104121622"><a name="p7104121622"></a><a name="p7104121622"></a>Only horizontal scrolling is supported.</p>
-    </td>
-    </tr>
-    <tr id="row810411118218"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p151041411125"><a name="p151041411125"></a><a name="p151041411125"></a>Vertical</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1104711524"><a name="p1104711524"></a><a name="p1104711524"></a>Only vertical scrolling is supported.</p>
-    </td>
-    </tr>
-    <tr id="row91041314217"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p510441020"><a name="p510441020"></a><a name="p510441020"></a>None</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p5104813220"><a name="p5104813220"></a><a name="p5104813220"></a>Scrolling is disabled.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Scroller<a name="section123902548458"></a>
-
-Controller of the scrollable container component. You can bind this component to the container component and use it to control the scrolling of the container component. Currently, this component can be bound to the  **<List\>**  and  **<Scroll\>**  components.
-
-### Creating an Object<a name="section1241383014362"></a>
+
+## APIs
+
+Scroll(scroller?: Scroller)
+
+
+## Attributes
+
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| scrollable | ScrollDirection | ScrollDirection.Vertical | Scroll&nbsp;method. |
+| scrollBar | [BarState](ts-appendix-enums.md#barstate-enums) | Auto | Scroll&nbsp;bar&nbsp;status. |
+| scrollBarColor | Color | - | Color&nbsp;of&nbsp;the&nbsp;scroll&nbsp;bar. |
+| scrollBarWidth | Length | - | Width&nbsp;of&nbsp;the&nbsp;scrollbar. |
+
+- ScrollDirection
+    | Name | Description | 
+  | -------- | -------- |
+  | Horizontal | Only&nbsp;horizontal&nbsp;scrolling&nbsp;is&nbsp;supported. | 
+  | Vertical | Only&nbsp;vertical&nbsp;scrolling&nbsp;is&nbsp;supported. | 
+  | None | Scrolling&nbsp;is&nbsp;disabled. | 
+
+
+## Scroller
+
+Controller of the scrollable container component. You can bind this component to the container component and use it to control the scrolling of the container component. Currently, this component can be bound to the **&lt;List&gt;** and **&lt;Scroll&gt;** components.
+
+
+### Objects to Import
+
 
 ```
 scroller: Scroller = new Scroller()
 ```
 
-### scroller.scrollTo<a name="section15413203010365"></a>
 
-scrollTo\(value: \{ xOffset: number | string, yOffset: number | string, animation?: \{ duration: number, curve: Curve \} \}\): void
+### scroller.scrollTo
+
+scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?: { duration: number, curve: Curve } }): void
+
 
 Scrolls to the specified position.
 
--   Parameters
-
-    <a name="table1413230103617"></a>
-    <table><thead align="left"><tr id="row20414203010366"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p04141430183615"><a name="p04141430183615"></a><a name="p04141430183615"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="21.43%" id="mcps1.1.6.1.2"><p id="p241473011360"><a name="p241473011360"></a><a name="p241473011360"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="7.08%" id="mcps1.1.6.1.3"><p id="p941493017363"><a name="p941493017363"></a><a name="p941493017363"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.170000000000002%" id="mcps1.1.6.1.4"><p id="p4414173019365"><a name="p4414173019365"></a><a name="p4414173019365"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="42.21%" id="mcps1.1.6.1.5"><p id="p1941493016367"><a name="p1941493016367"></a><a name="p1941493016367"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row841473010365"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p18414143015360"><a name="p18414143015360"></a><a name="p18414143015360"></a>xOffset</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.43%" headers="mcps1.1.6.1.2 "><p id="p18414830193611"><a name="p18414830193611"></a><a name="p18414830193611"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.08%" headers="mcps1.1.6.1.3 "><p id="p14414130153613"><a name="p14414130153613"></a><a name="p14414130153613"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p154141030173610"><a name="p154141030173610"></a><a name="p154141030173610"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p114143301368"><a name="p114143301368"></a><a name="p114143301368"></a>Horizontal scrolling offset.</p>
-    </td>
-    </tr>
-    <tr id="row44142306366"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p16414133023611"><a name="p16414133023611"></a><a name="p16414133023611"></a>yOffset</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.43%" headers="mcps1.1.6.1.2 "><p id="p12414330123614"><a name="p12414330123614"></a><a name="p12414330123614"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.08%" headers="mcps1.1.6.1.3 "><p id="p1041423043614"><a name="p1041423043614"></a><a name="p1041423043614"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p10414103083617"><a name="p10414103083617"></a><a name="p10414103083617"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p154141930133619"><a name="p154141930133619"></a><a name="p154141930133619"></a>Vertical scrolling offset.</p>
-    </td>
-    </tr>
-    <tr id="row0414163019369"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p141433010365"><a name="p141433010365"></a><a name="p141433010365"></a>animation</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.43%" headers="mcps1.1.6.1.2 "><p id="p17415430163612"><a name="p17415430163612"></a><a name="p17415430163612"></a>{</p>
-    <p id="p441593053612"><a name="p441593053612"></a><a name="p441593053612"></a>duration: number,</p>
-    <p id="p17415113093611"><a name="p17415113093611"></a><a name="p17415113093611"></a>curve: <a href="ts-animatorproperty.md#li16621545614">Curve</a> | CubicBezier | SpringCurve</p>
-    <p id="p15415123010367"><a name="p15415123010367"></a><a name="p15415123010367"></a>}</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.08%" headers="mcps1.1.6.1.3 "><p id="p1441573073612"><a name="p1441573073612"></a><a name="p1441573073612"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p144151730173619"><a name="p144151730173619"></a><a name="p144151730173619"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p341519302361"><a name="p341519302361"></a><a name="p341519302361"></a>Animation configuration, which includes the following:</p>
-    <a name="ul154152304364"></a><a name="ul154152304364"></a><ul id="ul154152304364"><li><strong id="b10320330393"><a name="b10320330393"></a><a name="b10320330393"></a>duration</strong>: scrolling duration.</li><li><strong id="b641674418913"><a name="b641674418913"></a><a name="b641674418913"></a>curve</strong>: scrolling curve.</li></ul>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-### scroller.scrollEdge<a name="section1441583018367"></a>
-
-scrollEdge\(value: Edge\): void
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | xOffset | Length | Yes | - | Horizontal&nbsp;scrolling&nbsp;offset. | 
+  | yOffset | Length | Yes | - | Vertical&nbsp;scrolling&nbsp;offset. | 
+  | animation | {<br/>duration:&nbsp;number,<br/>curve:&nbsp;Curve&nbsp;\|<br/>CubicBezier&nbsp;\|<br/>SpringCurve<br/>} | No |  | Animation&nbsp;configuration,&nbsp;which&nbsp;includes&nbsp;the&nbsp;following:<br/>-&nbsp;**duration**:&nbsp;scrolling&nbsp;duration.<br/>-&nbsp;**curve**:&nbsp;scrolling&nbsp;curve. | 
+
+
+### scroller.scrollEdge
+
+scrollEdge(value: Edge): void
+
 
 Scrolls to the edge of the container.
 
--   Parameters
-
-    <a name="table5415133010363"></a>
-    <table><thead align="left"><tr id="row164151300364"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p64159300368"><a name="p64159300368"></a><a name="p64159300368"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.01%" id="mcps1.1.6.1.2"><p id="p18415183053613"><a name="p18415183053613"></a><a name="p18415183053613"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.499999999999998%" id="mcps1.1.6.1.3"><p id="p18415183019366"><a name="p18415183019366"></a><a name="p18415183019366"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.170000000000002%" id="mcps1.1.6.1.4"><p id="p1841533073620"><a name="p1841533073620"></a><a name="p1841533073620"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="42.21%" id="mcps1.1.6.1.5"><p id="p541513019368"><a name="p541513019368"></a><a name="p541513019368"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row641543093614"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p641512305364"><a name="p641512305364"></a><a name="p641512305364"></a>value</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p1041573053612"><a name="p1041573053612"></a><a name="p1041573053612"></a>Edge</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p124152307361"><a name="p124152307361"></a><a name="p124152307361"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p5416130133613"><a name="p5416130133613"></a><a name="p5416130133613"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p1241673011362"><a name="p1241673011362"></a><a name="p1241673011362"></a>Edge position to scroll to.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-### scroller.scrollPage<a name="section2416163018368"></a>
-
-scrollPage\(value: \{ next: boolean \}\): void
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | value | Edge | Yes | - | Edge&nbsp;position&nbsp;to&nbsp;scroll&nbsp;to. | 
+
+
+### scroller.scrollPage
+
+scrollPage(value: { next: boolean, direction?: Axis }): void
 
 Scrolls to the next or previous page.
 
--   Parameters
-
-    <a name="table7416530183618"></a>
-    <table><thead align="left"><tr id="row1741603013364"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p4416163013369"><a name="p4416163013369"></a><a name="p4416163013369"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.01%" id="mcps1.1.6.1.2"><p id="p16416193083619"><a name="p16416193083619"></a><a name="p16416193083619"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.499999999999998%" id="mcps1.1.6.1.3"><p id="p641633043614"><a name="p641633043614"></a><a name="p641633043614"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.170000000000002%" id="mcps1.1.6.1.4"><p id="p841683033618"><a name="p841683033618"></a><a name="p841683033618"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="42.21%" id="mcps1.1.6.1.5"><p id="p341616304366"><a name="p341616304366"></a><a name="p341616304366"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row441614306360"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p11416103023620"><a name="p11416103023620"></a><a name="p11416103023620"></a>next</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p16416830173615"><a name="p16416830173615"></a><a name="p16416830173615"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p7416123010364"><a name="p7416123010364"></a><a name="p7416123010364"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p17416193043615"><a name="p17416193043615"></a><a name="p17416193043615"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p1941613011362"><a name="p1941613011362"></a><a name="p1941613011362"></a>Whether to turn to the next page. The value <strong id="b13842341565"><a name="b13842341565"></a><a name="b13842341565"></a>true</strong> means to turn to the next page, and the value <strong id="b17843945613"><a name="b17843945613"></a><a name="b17843945613"></a>false</strong> means to turn to the previous page.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-### scroller.currentOffset<a name="section041711305362"></a>
-
-scroller.currentOffset\(\): Object
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | next | boolean | Yes | - | Whether&nbsp;to&nbsp;turn&nbsp;to&nbsp;the&nbsp;next&nbsp;page.&nbsp;The&nbsp;value&nbsp;**true**&nbsp;means&nbsp;to&nbsp;scroll&nbsp;to&nbsp;the&nbsp;next&nbsp;page,&nbsp;and&nbsp;the&nbsp;value&nbsp;**false**&nbsp;means&nbsp;to&nbsp;scroll&nbsp;to&nbsp;the&nbsp;previous&nbsp;page. |
+
+
+### scroller.currentOffset
+
+scroller.currentOffset(): Object
+
 
 Obtains the scrolling offset.
 
--   Return values
 
-    <a name="table14417163018362"></a>
-    <table><thead align="left"><tr id="row6417330153614"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p1841743053617"><a name="p1841743053617"></a><a name="p1841743053617"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p1041753016364"><a name="p1041753016364"></a><a name="p1041753016364"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row34171130163610"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1841712301363"><a name="p1841712301363"></a><a name="p1841712301363"></a>{</p>
-    <p id="p194171230153610"><a name="p194171230153610"></a><a name="p194171230153610"></a>xOffset: number,</p>
-    <p id="p10417133018363"><a name="p10417133018363"></a><a name="p10417133018363"></a>yOffset: number</p>
-    <p id="p9417173016361"><a name="p9417173016361"></a><a name="p9417173016361"></a>}</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p341717302367"><a name="p341717302367"></a><a name="p341717302367"></a><strong id="b635116556121"><a name="b635116556121"></a><a name="b635116556121"></a>xOffset</strong>: horizontal scrolling offset.</p>
-    <p id="p19417163043618"><a name="p19417163043618"></a><a name="p19417163043618"></a><strong id="b97929165134"><a name="b97929165134"></a><a name="b97929165134"></a>yOffset</strong>: vertical scrolling offset.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+- Return values
+    | Type | Description | 
+  | -------- | -------- |
+  | {<br/>xOffset:&nbsp;number,<br/>yOffset:&nbsp;number<br/>} | **xOffset**:&nbsp;horizontal&nbsp;scrolling&nbsp;offset.<br/>**yOffset**:&nbsp;vertical&nbsp;scrolling&nbsp;offset. | 
+
 
+### scroller.scrollToIndex
 
-### scroller.scrollToIndex<a name="section10417103010368"></a>
+scroller.scrollToIndex(value: number): void
 
-scroller.scrollToIndex\(value: number\): void
 
 Scrolls to the specified index.
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->Only the  **<List\>**  component is supported.
-
--   Parameters
-
-    <a name="table4417430173610"></a>
-    <table><thead align="left"><tr id="row114187306362"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p1241863013366"><a name="p1241863013366"></a><a name="p1241863013366"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.01%" id="mcps1.1.6.1.2"><p id="p141843023613"><a name="p141843023613"></a><a name="p141843023613"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.499999999999998%" id="mcps1.1.6.1.3"><p id="p84181230183615"><a name="p84181230183615"></a><a name="p84181230183615"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.170000000000002%" id="mcps1.1.6.1.4"><p id="p24181030103616"><a name="p24181030103616"></a><a name="p24181030103616"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="42.21%" id="mcps1.1.6.1.5"><p id="p204181830113611"><a name="p204181830113611"></a><a name="p204181830113611"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row16418183093611"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p341833013365"><a name="p341833013365"></a><a name="p341833013365"></a>value</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p104181530143612"><a name="p104181530143612"></a><a name="p104181530143612"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p1441863014365"><a name="p1441863014365"></a><a name="p1441863014365"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p2041873010365"><a name="p2041873010365"></a><a name="p2041873010365"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p6418193017364"><a name="p6418193017364"></a><a name="p6418193017364"></a>Index of the item to be scrolled to in the list.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Events<a name="section142174333711"></a>
-
-<a name="table2605mcpsimp"></a>
-<table><thead align="left"><tr id="row2611mcpsimp"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p2615mcpsimp"><a name="p2615mcpsimp"></a><a name="p2615mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p2617mcpsimp"><a name="p2617mcpsimp"></a><a name="p2617mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row2618mcpsimp"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p2620mcpsimp"><a name="p2620mcpsimp"></a><a name="p2620mcpsimp"></a>onScroll(xOffset: number, yOffset: number) =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p2624mcpsimp"><a name="p2624mcpsimp"></a><a name="p2624mcpsimp"></a>Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs.</p>
-</td>
-</tr>
-<tr id="row114319381836"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p9434386312"><a name="p9434386312"></a><a name="p9434386312"></a>onScrollEdge(side: Edge) =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p174311388317"><a name="p174311388317"></a><a name="p174311388317"></a>Invoked when an event of scrolling to the edge occurs.</p>
-</td>
-</tr>
-<tr id="row9211043639"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p20211243636"><a name="p20211243636"></a><a name="p20211243636"></a>onScrollEnd() =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p1221112432312"><a name="p1221112432312"></a><a name="p1221112432312"></a>Invoked when scrolling stops.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section11271205310156"></a>
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> Only the **&lt;List&gt;** component is supported.
+
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | value | number | Yes | - | Index&nbsp;of&nbsp;the&nbsp;item&nbsp;to&nbsp;be&nbsp;scrolled&nbsp;to&nbsp;in&nbsp;the&nbsp;list. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onScroll(xOffset:&nbsp;number,&nbsp;yOffset:&nbsp;number)&nbsp;=&gt;&nbsp;void | Invoked&nbsp;to&nbsp;return&nbsp;the&nbsp;horizontal&nbsp;and&nbsp;vertical&nbsp;offsets&nbsp;during&nbsp;scrolling&nbsp;when&nbsp;the&nbsp;specified&nbsp;scroll&nbsp;event&nbsp;occurs. | 
+| onScrollEdge(side:&nbsp;Edge)&nbsp;=&gt;&nbsp;void | Callback&nbsp;for&nbsp;the&nbsp;event&nbsp;of&nbsp;scrolling&nbsp;to&nbsp;the&nbsp;edge. | 
+| onScrollEnd()&nbsp;=&gt;&nbsp;void | Invoked&nbsp;when&nbsp;scrolling&nbsp;stops. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -388,5 +190,4 @@ struct ScrollExample {
 }
 ```
 
-![](figures/scroll.gif)
-
+![en-us_image_0000001256978363](figures/en-us_image_0000001256978363.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-container-scrollbar.md b/en/application-dev/reference/arkui-ts/ts-container-scrollbar.md
deleted file mode 100644
index 26e9012f59b576416934c0693286ba8f302285c2..0000000000000000000000000000000000000000
--- a/en/application-dev/reference/arkui-ts/ts-container-scrollbar.md
+++ /dev/null
@@ -1,168 +0,0 @@
-# ScrollBar<a name="EN-US_TOPIC_0000001237715099"></a>
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-The  **<ScrollBar\>**  is used together with the scrollable components, such as  **<List\>**,  **<Grid\>**, and  **<Scroll\>**.
-
-## Required Permissions<a name="section9776134617382"></a>
-
-None
-
-## Child Components<a name="section6691716153919"></a>
-
-This component can contain a single child component.
-
-## APIs<a name="section5475917144111"></a>
-
-ScrollBar\(value: ScrollBarOption\)
-
--   ScrollBarOption parameters
-
-    <a name="table73451359132513"></a>
-    <table><thead align="left"><tr id="row1634505910257"><th class="cellrowborder" valign="top" width="19.37%" id="mcps1.1.6.1.1"><p id="p23451592254"><a name="p23451592254"></a><a name="p23451592254"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.630000000000003%" id="mcps1.1.6.1.2"><p id="p734515911252"><a name="p734515911252"></a><a name="p734515911252"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.3"><p id="p163451159192516"><a name="p163451159192516"></a><a name="p163451159192516"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.4"><p id="p173451059122512"><a name="p173451059122512"></a><a name="p173451059122512"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.5"><p id="p5345115916257"><a name="p5345115916257"></a><a name="p5345115916257"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row8345659182519"><td class="cellrowborder" valign="top" width="19.37%" headers="mcps1.1.6.1.1 "><p id="p234525962510"><a name="p234525962510"></a><a name="p234525962510"></a>scroller</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.630000000000003%" headers="mcps1.1.6.1.2 "><p id="p17345195982518"><a name="p17345195982518"></a><a name="p17345195982518"></a><a href="ts-container-scroll.md#section123902548458">Scroller</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p12345459132516"><a name="p12345459132516"></a><a name="p12345459132516"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p1034535962512"><a name="p1034535962512"></a><a name="p1034535962512"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p16346159142520"><a name="p16346159142520"></a><a name="p16346159142520"></a>Scrollable component controller, which can be bound to scrollable components.</p>
-    </td>
-    </tr>
-    <tr id="row63461259122513"><td class="cellrowborder" valign="top" width="19.37%" headers="mcps1.1.6.1.1 "><p id="p143464598252"><a name="p143464598252"></a><a name="p143464598252"></a>direction</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.630000000000003%" headers="mcps1.1.6.1.2 "><p id="p1134675913258"><a name="p1134675913258"></a><a name="p1134675913258"></a><a href="#li3339655172412">ScrollBarDirection</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p1434612597250"><a name="p1434612597250"></a><a name="p1434612597250"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p63467599258"><a name="p63467599258"></a><a name="p63467599258"></a>ScrollBarDirection.Vertical</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p1634635992511"><a name="p1634635992511"></a><a name="p1634635992511"></a>Scrollbar direction in which scrollable components scroll.</p>
-    </td>
-    </tr>
-    <tr id="row1634619594257"><td class="cellrowborder" valign="top" width="19.37%" headers="mcps1.1.6.1.1 "><p id="p1734617591250"><a name="p1734617591250"></a><a name="p1734617591250"></a>state</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.630000000000003%" headers="mcps1.1.6.1.2 "><p id="p1334665915258"><a name="p1334665915258"></a><a name="p1334665915258"></a><a href="#li719411322578">BarState</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p43460595258"><a name="p43460595258"></a><a name="p43460595258"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p1434645912256"><a name="p1434645912256"></a><a name="p1434645912256"></a>BarState.Auto</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p17346135918258"><a name="p17346135918258"></a><a name="p17346135918258"></a>Scroll bar status.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-    >![](../../public_sys-resources/icon-note.gif) **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 **<\ScrollBar>** component can be bound to only one scrollable component, and vice versa.
-
--   <a name="li3339655172412"></a>ScrollBarDirection enums
-
-    <a name="table569213415287"></a>
-    <table><thead align="left"><tr id="row1269204182810"><th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.1"><p id="p669210414285"><a name="p669210414285"></a><a name="p669210414285"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.2"><p id="p1869264172811"><a name="p1869264172811"></a><a name="p1869264172811"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row126921241112810"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p669219411285"><a name="p669219411285"></a><a name="p669219411285"></a>Vertical</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p11692104112817"><a name="p11692104112817"></a><a name="p11692104112817"></a>Vertical scrollbar.</p>
-    </td>
-    </tr>
-    <tr id="row469284113289"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p06921941162810"><a name="p06921941162810"></a><a name="p06921941162810"></a>Horizontal</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p15692174115282"><a name="p15692174115282"></a><a name="p15692174115282"></a>Horizontal scrollbar.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li719411322578"></a>BarState enums
-
-    <a name="table101946325573"></a>
-    <table><thead align="left"><tr id="row819473218570"><th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.1"><p id="p7194332105717"><a name="p7194332105717"></a><a name="p7194332105717"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.2"><p id="p1819493219573"><a name="p1819493219573"></a><a name="p1819493219573"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1719410328579"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p51942327574"><a name="p51942327574"></a><a name="p51942327574"></a>On</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p1619411326571"><a name="p1619411326571"></a><a name="p1619411326571"></a>Always displayed.</p>
-    </td>
-    </tr>
-    <tr id="row819416324577"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p12195143275714"><a name="p12195143275714"></a><a name="p12195143275714"></a>Off</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p10195133213579"><a name="p10195133213579"></a><a name="p10195133213579"></a>Hidden.</p>
-    </td>
-    </tr>
-    <tr id="row19251320581"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p1292101315815"><a name="p1292101315815"></a><a name="p1292101315815"></a>Auto</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p1692101325817"><a name="p1692101325817"></a><a name="p1692101325817"></a>Displayed on demand (displayed when the user touches the screen and hidden after inactivity of 2s).</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section12159163318014"></a>
-
-```
-@Entry
-@Component
-struct ScrollBarExample {
-  private scroller: Scroller = new Scroller()
-  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
-
-  build() {
-    Column() {
-      Stack({ alignContent: Alignment.End }) {
-        Scroll(this.scroller) {
-          Flex({ direction: FlexDirection.Column }) {
-            ForEach(this.arr, (item) => {
-              Row() {
-                Text(item.toString())
-                  .width('90%')
-                  .height(100)
-                  .backgroundColor('#3366CC')
-                  .borderRadius(15)
-                  .fontSize(16)
-                  .textAlign(TextAlign.Center)
-                  .margin({ top: 5 })
-              }
-            }, item => item)
-          }.margin({ left: 52 })
-        }
-        .scrollBar(BarState.Off)
-        .scrollable(ScrollDirection.Vertical)
-        ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) {
-          Text()
-            .width(30)
-            .height(100)
-            .borderRadius(10)
-            .backgroundColor('#C0C0C0')
-        }.width(30).backgroundColor('#ededed')
-      }
-    }
-  }
-}
-```
-
-![](figures/f.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-container-stack.md b/en/application-dev/reference/arkui-ts/ts-container-stack.md
index acf2675f900b3ab96106a651887c60e30722ebdd..efb1e0276661c1861d2de6d3e9c561d073991b96 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-stack.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-stack.md
@@ -1,53 +1,35 @@
-# Stack<a name="EN-US_TOPIC_0000001237555083"></a>
+# Stack
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Stack\>**  component provides a stack container where child components are successively stacked and the latter one overwrites the previous one.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section1073795814133"></a>
+
+The **&lt;Stack&gt;** component provides a stack container where child components are successively stacked and the latter one overwrites the previous one.
+
+
+## Required Permissions
 
 None
 
-## Child Component<a name="section152511941148"></a>
-
-The  **<Stack\>**  component can contain child components.
-
-## APIs<a name="section13412231148"></a>
-
-Stack\(value:\{alignContent?: Alignment\}\)
-
--   Parameters
-
-    <a name="table4921710102813"></a>
-    <table><thead align="left"><tr id="row16921106280"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p189271012814"><a name="p189271012814"></a><a name="p189271012814"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.580000000000002%" id="mcps1.1.6.1.2"><p id="p10925103287"><a name="p10925103287"></a><a name="p10925103287"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.67%" id="mcps1.1.6.1.3"><p id="p1592141092815"><a name="p1592141092815"></a><a name="p1592141092815"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="21.42%" id="mcps1.1.6.1.4"><p id="p392141012813"><a name="p392141012813"></a><a name="p392141012813"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="36.22%" id="mcps1.1.6.1.5"><p id="p1092710192810"><a name="p1092710192810"></a><a name="p1092710192810"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row119261002816"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p39218100280"><a name="p39218100280"></a><a name="p39218100280"></a>alignContent</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.580000000000002%" headers="mcps1.1.6.1.2 "><p id="p692141011284"><a name="p692141011284"></a><a name="p692141011284"></a><a href="ts-appendix-enums.md#section1145418513159">Alignment</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.67%" headers="mcps1.1.6.1.3 "><p id="p392141018289"><a name="p392141018289"></a><a name="p392141018289"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.42%" headers="mcps1.1.6.1.4 "><p id="p092141092820"><a name="p092141092820"></a><a name="p092141092820"></a>Center</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p11923108283"><a name="p11923108283"></a><a name="p11923108283"></a>Alignment of child components in the container.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section11271205310156"></a>
+
+## Child Component
+
+The **&lt;Stack&gt;** component can contain child components.
+
+
+## APIs
+
+Stack(value:{alignContent?: Alignment})
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | alignContent | [Alignment](ts-appendix-enums.md#alignment-enums) | No | Center | Alignment&nbsp;of&nbsp;child&nbsp;components&nbsp;in&nbsp;the&nbsp;container. |
+
+
+## Example
+
 
 ```
 @Entry
@@ -62,5 +44,4 @@ struct StackExample {
 }
 ```
 
-![](figures/stack.jpg)
-
+![en-us_image_0000001212378400](figures/en-us_image_0000001212378400.jpg)
diff --git a/en/application-dev/reference/arkui-ts/ts-container-stepper.md b/en/application-dev/reference/arkui-ts/ts-container-stepper.md
deleted file mode 100644
index 8c0d32d48378e4af273a92ceb6ae5440ebb85a18..0000000000000000000000000000000000000000
--- a/en/application-dev/reference/arkui-ts/ts-container-stepper.md
+++ /dev/null
@@ -1,184 +0,0 @@
-# Stepper<a name="EN-US_TOPIC_0000001237475075"></a>
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-The **<Stepper\>** component provides a step navigator.
-
-## Applicable Devices<a name="section322851519172"></a>
-
-<a name="table857714145377"></a>
-<table><thead align="left"><tr id="row55778146373"><th class="cellrowborder" valign="top" width="23.66106080206986%" id="mcps1.1.5.1.1"><p id="p7577141417376"><a name="p7577141417376"></a><a name="p7577141417376"></a>Phone</p>
-</th>
-<th class="cellrowborder" valign="top" width="26.3130659767141%" id="mcps1.1.5.1.2"><p id="p487719816463"><a name="p487719816463"></a><a name="p487719816463"></a>Tablet</p>
-</th>
-<th class="cellrowborder" valign="top" width="24.63130659767141%" id="mcps1.1.5.1.3"><p id="p135771614203720"><a name="p135771614203720"></a><a name="p135771614203720"></a>Smart TV</p>
-</th>
-<th class="cellrowborder" valign="top" width="25.39456662354463%" id="mcps1.1.5.1.4"><p id="p25772014133712"><a name="p25772014133712"></a><a name="p25772014133712"></a>Wearable</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row8578151423715"><td class="cellrowborder" valign="top" width="23.66106080206986%" headers="mcps1.1.5.1.1 "><p id="p65782014203718"><a name="p65782014203718"></a><a name="p65782014203718"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="26.3130659767141%" headers="mcps1.1.5.1.2 "><p id="p148771182469"><a name="p148771182469"></a><a name="p148771182469"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.63130659767141%" headers="mcps1.1.5.1.3 "><p id="p45783141377"><a name="p45783141377"></a><a name="p45783141377"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="25.39456662354463%" headers="mcps1.1.5.1.4 "><p id="p11578161443718"><a name="p11578161443718"></a><a name="p11578161443718"></a>No</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Required Permissions<a name="section988262631714"></a>
-
-None
-
-## Child Components<a name="section5989144051714"></a>
-
-Only the child component  [StepperItem](ts-container-stepperitem.md)  is supported.
-
-## APIs<a name="section121394874010"></a>
-
-Stepper\(value?: \{ index?: number \}\)
-
--   Parameters
-
-    <a name="table193606194544"></a>
-    <table><thead align="left"><tr id="row536071910541"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p436112199544"><a name="p436112199544"></a><a name="p436112199544"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="19.3%" id="mcps1.1.6.1.2"><p id="p19361319115410"><a name="p19361319115410"></a><a name="p19361319115410"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.77%" id="mcps1.1.6.1.3"><p id="p9361201975417"><a name="p9361201975417"></a><a name="p9361201975417"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.6%" id="mcps1.1.6.1.4"><p id="p43611199542"><a name="p43611199542"></a><a name="p43611199542"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="36.22%" id="mcps1.1.6.1.5"><p id="p1136141975419"><a name="p1136141975419"></a><a name="p1136141975419"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1860154012417"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p108611240343"><a name="p108611240343"></a><a name="p108611240343"></a>index</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.3%" headers="mcps1.1.6.1.2 "><p id="p17861154015414"><a name="p17861154015414"></a><a name="p17861154015414"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.77%" headers="mcps1.1.6.1.3 "><p id="p986119408419"><a name="p986119408419"></a><a name="p986119408419"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.6%" headers="mcps1.1.6.1.4 "><p id="p1186174019416"><a name="p1186174019416"></a><a name="p1186174019416"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p1817710477247"><a name="p1817710477247"></a><a name="p1817710477247"></a>Index of the <strong id="b419913377265"><a name="b419913377265"></a><a name="b419913377265"></a>&lt;StepperItem&gt;</strong> child component that is currently displayed.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section1328124354614"></a>
-
-None
-
-## Events<a name="section39758242515"></a>
-
-<a name="table8357154384818"></a>
-<table><thead align="left"><tr id="row193571443174812"><th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.1"><p id="p1421714614914"><a name="p1421714614914"></a><a name="p1421714614914"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.2"><p id="p2021510618499"><a name="p2021510618499"></a><a name="p2021510618499"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row183583433482"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p27916611253"><a name="p27916611253"></a><a name="p27916611253"></a>onFinish(callback: () =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p279466258"><a name="p279466258"></a><a name="p279466258"></a>Triggered when the **nextLabel** of the last stepper item in the stepper is clicked.</p>
-</td>
-</tr>
-<tr id="row19673142511492"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p9791660257"><a name="p9791660257"></a><a name="p9791660257"></a>onSkip(callback: () =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p197946102518"><a name="p197946102518"></a><a name="p197946102518"></a>Triggered when the current stepper item is **ItemState.Skip** and the **nextLabel** is clicked.</p>
-</td>
-</tr>
-<tr id="row10943194817521"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p147915662519"><a name="p147915662519"></a><a name="p147915662519"></a>onChange(callback: (prevIndex?: number, index?: number) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p3795613254"><a name="p3795613254"></a><a name="p3795613254"></a>Triggered when the text button on the left or right is clicked to switch between steps.</p>
-<a name="ul695894120615"></a><a name="ul695894120615"></a><ul id="ul695894120615"><li>**prevIndex**: index of the step page before the switching. </li><li>**index**: index of the step page after the switching, that is, index of the previous or next page.</li></ul>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section1512314422316"></a>
-
-```
-@Entry
-@Component
-struct StepperExample {
-  @State currentIndex: number = 0
-  @State firstState: ItemState = ItemState.Normal
-  @State secondState: ItemState = ItemState.Normal
-
-  build() {
-    Stepper({
-      index: this.currentIndex
-    }) {
-      StepperItem() {
-        Text('Page One')
-          .fontSize(35)
-          .fontColor(Color.Blue)
-          .width(200)
-          .lineHeight(50)
-          .margin({top:250})
-      }
-      .nextLabel('')
-      .position({x: '35%', y: 0})
-      StepperItem() {
-        Text('Page Two')
-          .fontSize(35)
-          .fontColor(Color.Blue)
-          .width(200)
-          .lineHeight(50)
-          .margin({top:250})
-          .onClick(()=>{
-            this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip
-          })
-      }
-      .nextLabel('Next')
-      .prevLabel('Previous')
-      .status(this.firstState)
-      .position({x: '35%', y: 0})
-      StepperItem() {
-        Text('Page Three')
-          .fontSize(35)
-          .fontColor(Color.Blue)
-          .width(200)
-          .lineHeight(50)
-          .margin({top:250})
-          .onClick(()=>{
-            this.secondState = this.secondState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting
-          })
-      }
-      .position({x: '35%', y: 0})
-      .status(this.secondState)
-      StepperItem() {
-        Text('Page four')
-          .fontSize(35)
-          .fontColor(Color.Blue)
-          .width(200)
-          .lineHeight(50)
-          .margin({top:250})
-      }
-      .position({x: '35%', y: 0})
-      .nextLabel('Finish')
-    }
-    .onFinish(() => {
-      console.log('onFinish')
-    })
-    .onSkip(() => {
-      console.log('onSkip')
-    })
-    .onChange((prevIndex: number, index: number) => {
-      this.currentIndex = index
-    })
-    .align(Alignment.Center)
-  }
-}
-```
-
-![](figures/en-us_image_0000001239788885.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-container-stepperitem.md b/en/application-dev/reference/arkui-ts/ts-container-stepperitem.md
deleted file mode 100644
index e1c5f2bf87486c461a1273c0f045dfde4a3b2785..0000000000000000000000000000000000000000
--- a/en/application-dev/reference/arkui-ts/ts-container-stepperitem.md
+++ /dev/null
@@ -1,123 +0,0 @@
-# StepperItem<a name="EN-US_TOPIC_0000001192755138"></a>
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-The **<StepperItem\>** component provides an element for the **<Stepper\>** component.
-
-## Applicable Devices<a name="section322851519172"></a>
-
-<a name="table857714145377"></a>
-<table><thead align="left"><tr id="row55778146373"><th class="cellrowborder" valign="top" width="23.66106080206986%" id="mcps1.1.5.1.1"><p id="p7577141417376"><a name="p7577141417376"></a><a name="p7577141417376"></a>Phone</p>
-</th>
-<th class="cellrowborder" valign="top" width="26.3130659767141%" id="mcps1.1.5.1.2"><p id="p487719816463"><a name="p487719816463"></a><a name="p487719816463"></a>Tablet</p>
-</th>
-<th class="cellrowborder" valign="top" width="24.63130659767141%" id="mcps1.1.5.1.3"><p id="p135771614203720"><a name="p135771614203720"></a><a name="p135771614203720"></a>Smart TV</p>
-</th>
-<th class="cellrowborder" valign="top" width="25.39456662354463%" id="mcps1.1.5.1.4"><p id="p25772014133712"><a name="p25772014133712"></a><a name="p25772014133712"></a>Wearable</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row8578151423715"><td class="cellrowborder" valign="top" width="23.66106080206986%" headers="mcps1.1.5.1.1 "><p id="p65782014203718"><a name="p65782014203718"></a><a name="p65782014203718"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="26.3130659767141%" headers="mcps1.1.5.1.2 "><p id="p148771182469"><a name="p148771182469"></a><a name="p148771182469"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.63130659767141%" headers="mcps1.1.5.1.3 "><p id="p45783141377"><a name="p45783141377"></a><a name="p45783141377"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="25.39456662354463%" headers="mcps1.1.5.1.4 "><p id="p11578161443718"><a name="p11578161443718"></a><a name="p11578161443718"></a>No</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Required Permissions<a name="section53281531154915"></a>
-
-None
-
-## Child Components<a name="section5989144051714"></a>
-
-This component supports only one child component.
-
-## APIs<a name="section97451749121712"></a>
-
-StepperItem\(\)
-
-## Attributes<a name="section17430171102911"></a>
-
-<a name="table144301017298"></a>
-<table><thead align="left"><tr id="row5430101192912"><th class="cellrowborder" valign="top" width="17.851785178517854%" id="mcps1.1.5.1.1"><p id="p2430111297"><a name="p2430111297"></a><a name="p2430111297"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="10.501050105010503%" id="mcps1.1.5.1.2"><p id="p043019119291"><a name="p043019119291"></a><a name="p043019119291"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="21.192119211921195%" id="mcps1.1.5.1.3"><p id="p643017119296"><a name="p643017119296"></a><a name="p643017119296"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="50.455045504550455%" id="mcps1.1.5.1.4"><p id="p18430161132917"><a name="p18430161132917"></a><a name="p18430161132917"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1543013119293"><td class="cellrowborder" valign="top" width="17.851785178517854%" headers="mcps1.1.5.1.1 "><p id="p7430191152915"><a name="p7430191152915"></a><a name="p7430191152915"></a>prevLabel</p>
-</td>
-<td class="cellrowborder" valign="top" width="10.501050105010503%" headers="mcps1.1.5.1.2 "><p id="p114302013292"><a name="p114302013292"></a><a name="p114302013292"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="21.192119211921195%" headers="mcps1.1.5.1.3 "><p id="p1643012152918"><a name="p1643012152918"></a><a name="p1643012152918"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="50.455045504550455%" headers="mcps1.1.5.1.4 "><p id="p134301219293"><a name="p134301219293"></a><a name="p134301219293"></a>When the stepper contains more than one page, the default value for all pages except the first page is **Back**.</p>
-</td>
-</tr>
-<tr id="row144301119292"><td class="cellrowborder" valign="top" width="17.851785178517854%" headers="mcps1.1.5.1.1 "><p id="p443051132914"><a name="p443051132914"></a><a name="p443051132914"></a>nextLabel</p>
-</td>
-<td class="cellrowborder" valign="top" width="10.501050105010503%" headers="mcps1.1.5.1.2 "><p id="p143010116295"><a name="p143010116295"></a><a name="p143010116295"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="21.192119211921195%" headers="mcps1.1.5.1.3 "><p id="p64301512295"><a name="p64301512295"></a><a name="p64301512295"></a>-</p>
-</td>
-If the <td class="cellrowborder" valign="top" width="50.455045504550455%" headers="mcps1.1.5.1.4 "><p id="p143012117294"><a name="p143012117294"></a><a name="p143012117294"></a>When the stepper contains more than one page, the default value for the last page is **Start**, and the default value for other pages is **Next**.</p>
-</td>
-</tr>
-<tr id="row3430019294"><td class="cellrowborder" valign="top" width="17.851785178517854%" headers="mcps1.1.5.1.1 "><p id="p184306118294"><a name="p184306118294"></a><a name="p184306118294"></a>status</p>
-</td>
-<td class="cellrowborder" valign="top" width="10.501050105010503%" headers="mcps1.1.5.1.2 "><p id="p94309117299"><a name="p94309117299"></a><a name="p94309117299"></a><a href="#li1343015152912">ItemState</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="21.192119211921195%" headers="mcps1.1.5.1.3 "><p id="p154301913298"><a name="p154301913298"></a><a name="p154301913298"></a>ItemState.Normal</p>
-</td>
-<td class="cellrowborder" valign="top" width="50.455045504550455%" headers="mcps1.1.5.1.4 "><p id="p04300152911"><a name="p04300152911"></a><a name="p04300152911"></a>Status of the stepper item.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li1343015152912"></a>ItemState enums
-
-    <a name="table1843110115292"></a>
-    <table><thead align="left"><tr id="row8431181122913"><th class="cellrowborder" valign="top" width="28.360000000000003%" id="mcps1.1.3.1.1"><p id="p443111116295"><a name="p443111116295"></a><a name="p443111116295"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="71.64%" id="mcps1.1.3.1.2"><p id="p20431318294"><a name="p20431318294"></a><a name="p20431318294"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row64311018291"><td class="cellrowborder" valign="top" width="28.360000000000003%" headers="mcps1.1.3.1.1 "><p id="p1243113117294"><a name="p1243113117294"></a><a name="p1243113117294"></a>Normal</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="71.64%" headers="mcps1.1.3.1.2 "><p id="p194315115292"><a name="p194315115292"></a><a name="p194315115292"></a>Normal state, in which the text button on the right is displayed properly and can be clicked to go to the next stepper item.</p>
-    </td>
-    </tr>
-    <tr id="row10431012290"><td class="cellrowborder" valign="top" width="28.360000000000003%" headers="mcps1.1.3.1.1 "><p id="p843191172910"><a name="p843191172910"></a><a name="p843191172910"></a>Disabled</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="71.64%" headers="mcps1.1.3.1.2 "><p id="p194315115292"><a name="p194315115292"></a><a name="p194315115292"></a>Disabled state, in which the text button on the right is dimmed and cannot be clicked to go to the next stepper item.</p>
-    </td>
-    </tr>
-    <tr id="row84318116296"><td class="cellrowborder" valign="top" width="28.360000000000003%" headers="mcps1.1.3.1.1 "><p id="p443110172913"><a name="p443110172913"></a><a name="p443110172913"></a>Waiting</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="71.64%" headers="mcps1.1.3.1.2 "><p id="p1943117142918"><a name="p1943117142918"></a><a name="p1943117142918"></a>Waiting state, in which a waiting progress bar instead of the text button on the right is displayed. The progress bar cannot be clicked to go to the next stepper item.</p>
-    </td>
-    </tr>
-    <tr id="row243101102916"><td class="cellrowborder" valign="top" width="28.360000000000003%" headers="mcps1.1.3.1.1 "><p id="p17431319294"><a name="p17431319294"></a><a name="p17431319294"></a>Skip</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="71.64%" headers="mcps1.1.3.1.2 "><p id="p843112111298"><a name="p843112111298"></a><a name="p843112111298"></a>Skipped state, in which the current step item is skipped and the next step item is performed.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section1131255321814"></a>
-
-See [Stepper](ts-container-stepper.md).
diff --git a/en/application-dev/reference/arkui-ts/ts-container-swiper.md b/en/application-dev/reference/arkui-ts/ts-container-swiper.md
index fea72e9b71f19f6ccf857016ecbe98d5a9c2a9d7..34617b654d5347fa1ec45380191a7723d141e752 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-swiper.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-swiper.md
@@ -1,200 +1,69 @@
-# Swiper<a name="EN-US_TOPIC_0000001237555087"></a>
+# Swiper
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Swiper\>**  component provides a container that allows users to switch among child components by swiping operations.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section988262631714"></a>
+
+The **&lt;Swiper&gt;** component provides a container that allows users to switch among child components by swiping operations.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section5989144051714"></a>
+
+## Child Components
 
 This component can contain child components.
 
-## APIs<a name="section97451749121712"></a>
-
-Swiper\(value:\{controller?: SwiperController\}\)
-
--   Parameters
-
-    <a name="table4435141419293"></a>
-    <table><thead align="left"><tr id="row11435161419299"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p4436181415299"><a name="p4436181415299"></a><a name="p4436181415299"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="21.18%" id="mcps1.1.6.1.2"><p id="p7436714142919"><a name="p7436714142919"></a><a name="p7436714142919"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.64%" id="mcps1.1.6.1.3"><p id="p114361814162918"><a name="p114361814162918"></a><a name="p114361814162918"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.850000000000001%" id="mcps1.1.6.1.4"><p id="p3436214132910"><a name="p3436214132910"></a><a name="p3436214132910"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="36.22%" id="mcps1.1.6.1.5"><p id="p9436191410294"><a name="p9436191410294"></a><a name="p9436191410294"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row174369146296"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p443661416299"><a name="p443661416299"></a><a name="p443661416299"></a>controller</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.18%" headers="mcps1.1.6.1.2 "><p id="p15436014132918"><a name="p15436014132918"></a><a name="p15436014132918"></a><a href="#section1690616710381">SwiperController</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.64%" headers="mcps1.1.6.1.3 "><p id="p5436314202914"><a name="p5436314202914"></a><a name="p5436314202914"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.850000000000001%" headers="mcps1.1.6.1.4 "><p id="p543613144290"><a name="p543613144290"></a><a name="p543613144290"></a>null</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p1843614141293"><a name="p1843614141293"></a><a name="p1843614141293"></a>Controller bound to the component to control the page switching.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section1738516911810"></a>
-
-<a name="table1854mcpsimp"></a>
-<table><thead align="left"><tr id="row1861mcpsimp"><th class="cellrowborder" valign="top" width="17.8%" id="mcps1.1.5.1.1"><p id="p1863mcpsimp"><a name="p1863mcpsimp"></a><a name="p1863mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="21.42%" id="mcps1.1.5.1.2"><p id="p1865mcpsimp"><a name="p1865mcpsimp"></a><a name="p1865mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="9.879999999999999%" id="mcps1.1.5.1.3"><p id="p1867mcpsimp"><a name="p1867mcpsimp"></a><a name="p1867mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="50.9%" id="mcps1.1.5.1.4"><p id="p1869mcpsimp"><a name="p1869mcpsimp"></a><a name="p1869mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1870mcpsimp"><td class="cellrowborder" valign="top" width="17.8%" headers="mcps1.1.5.1.1 "><p id="p1872mcpsimp"><a name="p1872mcpsimp"></a><a name="p1872mcpsimp"></a>index</p>
-</td>
-<td class="cellrowborder" valign="top" width="21.42%" headers="mcps1.1.5.1.2 "><p id="p1874mcpsimp"><a name="p1874mcpsimp"></a><a name="p1874mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.879999999999999%" headers="mcps1.1.5.1.3 "><p id="p1876mcpsimp"><a name="p1876mcpsimp"></a><a name="p1876mcpsimp"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="50.9%" headers="mcps1.1.5.1.4 "><p id="p1878mcpsimp"><a name="p1878mcpsimp"></a><a name="p1878mcpsimp"></a>Index of the child component currently displayed in the container.</p>
-</td>
-</tr>
-<tr id="row1879mcpsimp"><td class="cellrowborder" valign="top" width="17.8%" headers="mcps1.1.5.1.1 "><p id="p1881mcpsimp"><a name="p1881mcpsimp"></a><a name="p1881mcpsimp"></a>autoPlay</p>
-</td>
-<td class="cellrowborder" valign="top" width="21.42%" headers="mcps1.1.5.1.2 "><p id="p1883mcpsimp"><a name="p1883mcpsimp"></a><a name="p1883mcpsimp"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.879999999999999%" headers="mcps1.1.5.1.3 "><p id="p1885mcpsimp"><a name="p1885mcpsimp"></a><a name="p1885mcpsimp"></a>false</p>
-</td>
-<td class="cellrowborder" valign="top" width="50.9%" headers="mcps1.1.5.1.4 "><p id="p1887mcpsimp"><a name="p1887mcpsimp"></a><a name="p1887mcpsimp"></a>Whether to enable automatic playback for child component switching. If this attribute is <strong id="b6689142301013"><a name="b6689142301013"></a><a name="b6689142301013"></a>true</strong>, the indicator dots do not take effect.</p>
-</td>
-</tr>
-<tr id="row1888mcpsimp"><td class="cellrowborder" valign="top" width="17.8%" headers="mcps1.1.5.1.1 "><p id="p1890mcpsimp"><a name="p1890mcpsimp"></a><a name="p1890mcpsimp"></a>interval</p>
-</td>
-<td class="cellrowborder" valign="top" width="21.42%" headers="mcps1.1.5.1.2 "><p id="p1892mcpsimp"><a name="p1892mcpsimp"></a><a name="p1892mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.879999999999999%" headers="mcps1.1.5.1.3 "><p id="p1894mcpsimp"><a name="p1894mcpsimp"></a><a name="p1894mcpsimp"></a>3000</p>
-</td>
-<td class="cellrowborder" valign="top" width="50.9%" headers="mcps1.1.5.1.4 "><p id="p1896mcpsimp"><a name="p1896mcpsimp"></a><a name="p1896mcpsimp"></a>Interval for automatic playback, in ms.</p>
-</td>
-</tr>
-<tr id="row1897mcpsimp"><td class="cellrowborder" valign="top" width="17.8%" headers="mcps1.1.5.1.1 "><p id="p1899mcpsimp"><a name="p1899mcpsimp"></a><a name="p1899mcpsimp"></a>indicator</p>
-</td>
-<td class="cellrowborder" valign="top" width="21.42%" headers="mcps1.1.5.1.2 "><p id="p1901mcpsimp"><a name="p1901mcpsimp"></a><a name="p1901mcpsimp"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.879999999999999%" headers="mcps1.1.5.1.3 "><p id="p1903mcpsimp"><a name="p1903mcpsimp"></a><a name="p1903mcpsimp"></a>true</p>
-</td>
-<td class="cellrowborder" valign="top" width="50.9%" headers="mcps1.1.5.1.4 "><p id="p1905mcpsimp"><a name="p1905mcpsimp"></a><a name="p1905mcpsimp"></a>Whether to enable the navigation dots.</p>
-</td>
-</tr>
-<tr id="row1906mcpsimp"><td class="cellrowborder" valign="top" width="17.8%" headers="mcps1.1.5.1.1 "><p id="p1908mcpsimp"><a name="p1908mcpsimp"></a><a name="p1908mcpsimp"></a>loop</p>
-</td>
-<td class="cellrowborder" valign="top" width="21.42%" headers="mcps1.1.5.1.2 "><p id="p1910mcpsimp"><a name="p1910mcpsimp"></a><a name="p1910mcpsimp"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.879999999999999%" headers="mcps1.1.5.1.3 "><p id="p1912mcpsimp"><a name="p1912mcpsimp"></a><a name="p1912mcpsimp"></a>true</p>
-</td>
-<td class="cellrowborder" valign="top" width="50.9%" headers="mcps1.1.5.1.4 "><p id="p1914mcpsimp"><a name="p1914mcpsimp"></a><a name="p1914mcpsimp"></a>Whether to enable loop playback.</p>
-</td>
-</tr>
-<tr id="row1915mcpsimp"><td class="cellrowborder" valign="top" width="17.8%" headers="mcps1.1.5.1.1 "><p id="p1917mcpsimp"><a name="p1917mcpsimp"></a><a name="p1917mcpsimp"></a>duration</p>
-</td>
-<td class="cellrowborder" valign="top" width="21.42%" headers="mcps1.1.5.1.2 "><p id="p1919mcpsimp"><a name="p1919mcpsimp"></a><a name="p1919mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.879999999999999%" headers="mcps1.1.5.1.3 "><p id="p1921mcpsimp"><a name="p1921mcpsimp"></a><a name="p1921mcpsimp"></a>400</p>
-</td>
-<td class="cellrowborder" valign="top" width="50.9%" headers="mcps1.1.5.1.4 "><p id="p1923mcpsimp"><a name="p1923mcpsimp"></a><a name="p1923mcpsimp"></a>Duration of the animation for switching child components, in ms.</p>
-</td>
-</tr>
-<tr id="row1924mcpsimp"><td class="cellrowborder" valign="top" width="17.8%" headers="mcps1.1.5.1.1 "><p id="p1926mcpsimp"><a name="p1926mcpsimp"></a><a name="p1926mcpsimp"></a>vertical</p>
-</td>
-<td class="cellrowborder" valign="top" width="21.42%" headers="mcps1.1.5.1.2 "><p id="p1928mcpsimp"><a name="p1928mcpsimp"></a><a name="p1928mcpsimp"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.879999999999999%" headers="mcps1.1.5.1.3 "><p id="p1930mcpsimp"><a name="p1930mcpsimp"></a><a name="p1930mcpsimp"></a>false</p>
-</td>
-<td class="cellrowborder" valign="top" width="50.9%" headers="mcps1.1.5.1.4 "><p id="p1932mcpsimp"><a name="p1932mcpsimp"></a><a name="p1932mcpsimp"></a>Whether vertical swiping is used.</p>
-</td>
-</tr>
-<tr id="row14115155203919"><td class="cellrowborder" valign="top" width="17.8%" headers="mcps1.1.5.1.1 "><p id="p201151554390"><a name="p201151554390"></a><a name="p201151554390"></a>itemSpace</p>
-</td>
-<td class="cellrowborder" valign="top" width="21.42%" headers="mcps1.1.5.1.2 "><p id="p496921564018"><a name="p496921564018"></a><a name="p496921564018"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.879999999999999%" headers="mcps1.1.5.1.3 "><p id="p51152057396"><a name="p51152057396"></a><a name="p51152057396"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="50.9%" headers="mcps1.1.5.1.4 "><p id="p311565183912"><a name="p311565183912"></a><a name="p311565183912"></a>Space between child components.</p>
-</td>
-</tr>
-<tr id="row11729145111242"><td class="cellrowborder" valign="top" width="17.8%" headers="mcps1.1.5.1.1 "><p id="p3385105013241"><a name="p3385105013241"></a><a name="p3385105013241"></a>cachedCount<sup id="sup133053694910"><a name="sup133053694910"></a><a name="sup133053694910"></a>8+</sup></p>
-</td>
-<td class="cellrowborder" valign="top" width="21.42%" headers="mcps1.1.5.1.2 "><p id="p8385550182413"><a name="p8385550182413"></a><a name="p8385550182413"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.879999999999999%" headers="mcps1.1.5.1.3 "><p id="p193851950152410"><a name="p193851950152410"></a><a name="p193851950152410"></a>1</p>
-</td>
-<td class="cellrowborder" valign="top" width="50.9%" headers="mcps1.1.5.1.4 "><p id="p438514506244"><a name="p438514506244"></a><a name="p438514506244"></a>Number of child components to be cached.</p>
-</td>
-</tr>
-<tr id="row1672211307014"><td class="cellrowborder" valign="top" width="17.8%" headers="mcps1.1.5.1.1 "><p id="p1872373020010"><a name="p1872373020010"></a><a name="p1872373020010"></a>disableSwipe<sup id="sup25031942182615"><a name="sup25031942182615"></a><a name="sup25031942182615"></a>8+</sup></p>
-</td>
-<td class="cellrowborder" valign="top" width="21.42%" headers="mcps1.1.5.1.2 "><p id="p472317301805"><a name="p472317301805"></a><a name="p472317301805"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.879999999999999%" headers="mcps1.1.5.1.3 "><p id="p57248301909"><a name="p57248301909"></a><a name="p57248301909"></a>false</p>
-</td>
-<td class="cellrowborder" valign="top" width="50.9%" headers="mcps1.1.5.1.4 "><p id="p2724173010017"><a name="p2724173010017"></a><a name="p2724173010017"></a>Whether to disable the swipe feature.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-### SwiperController<a name="section1690616710381"></a>
-
-Controller of the  **<Swiper\>**  component. You can bind this object to the  **<Swiper\>**  component and use it to control page switching.
-
-<a name="table1891034201817"></a>
-<table><thead align="left"><tr id="row158903416183"><th class="cellrowborder" valign="top" width="26.99%" id="mcps1.1.3.1.1"><p id="p178953411181"><a name="p178953411181"></a><a name="p178953411181"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="73.00999999999999%" id="mcps1.1.3.1.2"><p id="p989133421817"><a name="p989133421817"></a><a name="p989133421817"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row790163451817"><td class="cellrowborder" valign="top" width="26.99%" headers="mcps1.1.3.1.1 "><p id="p190173416184"><a name="p190173416184"></a><a name="p190173416184"></a>showNext():void;</p>
-</td>
-<td class="cellrowborder" valign="top" width="73.00999999999999%" headers="mcps1.1.3.1.2 "><p id="p10660111011194"><a name="p10660111011194"></a><a name="p10660111011194"></a>Turns to the next page.</p>
-</td>
-</tr>
-<tr id="row1894121571918"><td class="cellrowborder" valign="top" width="26.99%" headers="mcps1.1.3.1.1 "><p id="p16941121517191"><a name="p16941121517191"></a><a name="p16941121517191"></a>showPrevious():void;</p>
-</td>
-<td class="cellrowborder" valign="top" width="73.00999999999999%" headers="mcps1.1.3.1.2 "><p id="p29423156194"><a name="p29423156194"></a><a name="p29423156194"></a>Turns to the previous page.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Events<a name="section6741113101919"></a>
-
-<a name="table1934mcpsimp"></a>
-<table><thead align="left"><tr id="row1940mcpsimp"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p276mcpsimp"><a name="p276mcpsimp"></a><a name="p276mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p1946mcpsimp"><a name="p1946mcpsimp"></a><a name="p1946mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1947mcpsimp"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p1949mcpsimp"><a name="p1949mcpsimp"></a><a name="p1949mcpsimp"></a>onChange( index: number) =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p1953mcpsimp"><a name="p1953mcpsimp"></a><a name="p1953mcpsimp"></a>Triggered when the index of the currently displayed component changes.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section1131255321814"></a>
+
+## APIs
+
+Swiper(value:{controller?: SwiperController})
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | controller | [SwiperController](#swipercontroller) | No | null | Controller&nbsp;bound&nbsp;to&nbsp;the&nbsp;component&nbsp;to&nbsp;control&nbsp;the&nbsp;page&nbsp;switching. | 
+
+
+## Attributes
+
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| index | number | 0 | Index&nbsp;of&nbsp;the&nbsp;child&nbsp;component&nbsp;currently&nbsp;displayed&nbsp;in&nbsp;the&nbsp;container. |
+| autoPlay | boolean | false | Whether&nbsp;to&nbsp;enable&nbsp;automatic&nbsp;playback&nbsp;for&nbsp;child&nbsp;component&nbsp;switching.&nbsp;If&nbsp;this&nbsp;attribute&nbsp;is&nbsp;**true**,&nbsp;the&nbsp;indicator&nbsp;dots&nbsp;do&nbsp;not&nbsp;take&nbsp;effect. |
+| interval | number | 3000 | Interval&nbsp;for&nbsp;automatic&nbsp;playback,&nbsp;in&nbsp;ms. |
+| indicator | boolean | true | Whether&nbsp;to&nbsp;enable&nbsp;the&nbsp;navigation&nbsp;dots. |
+| loop | boolean | true | Whether&nbsp;to&nbsp;enable&nbsp;loop&nbsp;playback. |
+| duration | number | 400 | Duration&nbsp;of&nbsp;the&nbsp;animation&nbsp;for&nbsp;switching&nbsp;child&nbsp;components,&nbsp;in&nbsp;ms. |
+| vertical | boolean | false | Whether&nbsp;vertical&nbsp;swiping&nbsp;is&nbsp;used. |
+| itemSpace | Length | 0 | Space&nbsp;between&nbsp;child&nbsp;components. |
+| cachedCount<sup>8+</sup> | number | 1 | Number&nbsp;of&nbsp;child&nbsp;components&nbsp;to&nbsp;be&nbsp;cached. |
+| disableSwipe<sup>8+</sup> | boolean | false | Whether&nbsp;to&nbsp;disable&nbsp;the&nbsp;swipe&nbsp;feature. |
+| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md)&nbsp;\|&nbsp;Curves | Curve.Ease | Animation&nbsp;curve.&nbsp;The&nbsp;ease-in/ease-out&nbsp;curve&nbsp;is&nbsp;used&nbsp;by&nbsp;default.&nbsp;For&nbsp;details&nbsp;about&nbsp;common&nbsp;curves,&nbsp;see&nbsp;[Curve&nbsp;enums](ts-animatorproperty.md).&nbsp;You&nbsp;can&nbsp;also&nbsp;create&nbsp;custom&nbsp;curves&nbsp;([interpolation&nbsp;curve&nbsp;objects](ts-interpolation-calculation.md))&nbsp;by&nbsp;using&nbsp;the&nbsp;API&nbsp;provided&nbsp;by&nbsp;the&nbsp;interpolation&nbsp;calculation&nbsp;module. |
+
+
+### SwiperController
+
+Controller of the **&lt;Swiper&gt;** component. You can bind this object to the **&lt;Swiper&gt;** component and use it to control page switching.
+
+  | Name | Description | 
+| -------- | -------- |
+| showNext():void | Turns&nbsp;to&nbsp;the&nbsp;next&nbsp;page. | 
+| showPrevious():void | Turns&nbsp;to&nbsp;the&nbsp;previous&nbsp;page. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onChange(&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;index&nbsp;of&nbsp;the&nbsp;currently&nbsp;displayed&nbsp;component&nbsp;changes. | 
+
+
+## Example
+
 
 ```
 class MyDataSource implements IDataSource {
@@ -251,6 +120,7 @@ struct SwiperExample {
       .duration(1000)
       .vertical(false) // Horizontal swiping is enabled by default.
       .itemSpace(0)
+      .curve(Curve.Linear) // Animation curve
       .onChange((index: number) => {
         console.info(index.toString())
       })
@@ -270,5 +140,4 @@ struct SwiperExample {
 }
 ```
 
-![](figures/swiper.gif)
-
+![en-us_image_0000001211898474](figures/en-us_image_0000001211898474.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md b/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md
index 0d18789c72139ba1d65d2ffe2a7aab970d188168..7f3af8d922d2bceb26d41a338364bf81bc263516 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md
@@ -1,61 +1,44 @@
-# TabContent<a name="EN-US_TOPIC_0000001237355051"></a>
+# TabContent
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<TabContent\>**  component is used only in the  **<Tabs\>**  component. It corresponds to the content view of a switched tab page.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section988262631714"></a>
+
+The **&lt;TabContent&gt;** component is used only in the **&lt;Tabs&gt;** component. It corresponds to the content view of a switched tab page.
+
+
+## Required Permissions
 
 None
 
-## Child Component<a name="section5989144051714"></a>
+
+## Child Component
 
 This component supports only one child component.
 
-## APIs<a name="section97451749121712"></a>
 
-TabContent\(\)
+## APIs
 
-## Attributes<a name="section1738516911810"></a>
+TabContent()
+
+
+## Attributes
 
 Touch target configuration is not supported.
 
-<a name="table1854mcpsimp"></a>
-<table><thead align="left"><tr id="row1861mcpsimp"><th class="cellrowborder" valign="top" width="8.84%" id="mcps1.1.5.1.1"><p id="p1863mcpsimp"><a name="p1863mcpsimp"></a><a name="p1863mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="24.82%" id="mcps1.1.5.1.2"><p id="p1865mcpsimp"><a name="p1865mcpsimp"></a><a name="p1865mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="11.88%" id="mcps1.1.5.1.3"><p id="p1867mcpsimp"><a name="p1867mcpsimp"></a><a name="p1867mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="54.459999999999994%" id="mcps1.1.5.1.4"><p id="p1869mcpsimp"><a name="p1869mcpsimp"></a><a name="p1869mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1870mcpsimp"><td class="cellrowborder" valign="top" width="8.84%" headers="mcps1.1.5.1.1 "><p id="p10682mcpsimp"><a name="p10682mcpsimp"></a><a name="p10682mcpsimp"></a>tabBar</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.82%" headers="mcps1.1.5.1.2 "><p id="p183331827143515"><a name="p183331827143515"></a><a name="p183331827143515"></a>string | {</p>
-<p id="p6774182313515"><a name="p6774182313515"></a><a name="p6774182313515"></a>icon?: string,</p>
-<p id="p7318830153513"><a name="p7318830153513"></a><a name="p7318830153513"></a>text?: string</p>
-<p id="p19256175413408"><a name="p19256175413408"></a><a name="p19256175413408"></a>}</p>
-<p id="p10684mcpsimp"><a name="p10684mcpsimp"></a><a name="p10684mcpsimp"></a>| <a href="../../toctopics/en-us_topic_0000001237475069.md#section2538145016250">CustomBuilder</a><sup id="sup0854523143811"><a name="sup0854523143811"></a><a name="sup0854523143811"></a>8+</sup></p>
-</td>
-<td class="cellrowborder" valign="top" width="11.88%" headers="mcps1.1.5.1.3 "><p id="p10686mcpsimp"><a name="p10686mcpsimp"></a><a name="p10686mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="54.459999999999994%" headers="mcps1.1.5.1.4 "><p id="p10688mcpsimp"><a name="p10688mcpsimp"></a><a name="p10688mcpsimp"></a>Content displayed on the tab bar.</p>
-<p id="p2832182695713"><a name="p2832182695713"></a><a name="p2832182695713"></a>CustomBuilder: builder, which can be passed to components (applicable to API 8 or later versions).</p>
-<div class="note" id="note66251557181812"><a name="note66251557181812"></a><a name="note66251557181812"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p6625125761813"><a name="p6625125761813"></a><a name="p6625125761813"></a>If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image.</p>
-</div></div>
-</td>
-</tr>
-</tbody>
-</table>
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->-   The  **<TabContent\>**  component does not support setting of the common width attribute. By default, its width is the same as that of the parent  **<Tabs\>**  component.
->-   The  **<TabContent\>**  component does not support setting of the common height attribute. Its height is determined by the height of the parent  **<Tabs\>**  component and the  **<TabBar\>**  component.
-
-## Example<a name="section1131255321814"></a>
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| tabBar | string&nbsp;\|&nbsp;{<br/>icon?:&nbsp;string,<br/>text?:&nbsp;string<br/>}<br/>\|[CustomBuilder](../../ui/ts-types.md) | - | Content&nbsp;displayed&nbsp;on&nbsp;the&nbsp;tab&nbsp;bar.<br/>**CustomBuilder**:&nbsp;builder,&nbsp;to&nbsp;which&nbsp;components&nbsp;can&nbsp;be&nbsp;passed&nbsp;(applicable&nbsp;to&nbsp;API&nbsp;version&nbsp;8&nbsp;and&nbsp;later&nbsp;versions).<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;If&nbsp;an&nbsp;icon&nbsp;uses&nbsp;an&nbsp;SVG&nbsp;image,&nbsp;the&nbsp;width&nbsp;and&nbsp;height&nbsp;attributes&nbsp;of&nbsp;the&nbsp;SVG&nbsp;image&nbsp;must&nbsp;be&nbsp;deleted.&nbsp;Otherwise,&nbsp;the&nbsp;icon&nbsp;size&nbsp;will&nbsp;be&nbsp;determined&nbsp;by&nbsp;the&nbsp;width&nbsp;and&nbsp;height&nbsp;attributes&nbsp;of&nbsp;the&nbsp;SVG&nbsp;image. |
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> - The **&lt;TabContent&gt;** component does not support setting of the common width attribute. By default, its width is the same as that of the parent **&lt;Tabs&gt;** component.
+> 
+> - The **&lt;TabContent&gt;** component does not support setting of the common height attribute. Its height is determined by the height of the parent **&lt;Tabs&gt;** component and the **&lt;TabBar&gt;** component.
+
+
+## Example
+
 
 ```
 @Entry
@@ -65,57 +48,15 @@ struct TabContentExample  {
   @State selectedFontColor: string = 'rgba(10, 30, 255, 1)'
   @State currentIndex: number = 0
   private controller: TabsController = new TabsController()
-  @Builder Tab1Builder() {
-    Column() {
-      Image(this.currentIndex === 0 ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png')
-        .width(24)
-        .height(24)
-        .opacity(this.currentIndex === 0 ? 1 : 0.4)
-        .objectFit(ImageFit.Contain)
-      Text("Tab1")
-        .fontColor(this.currentIndex === 0 ? this.selectedFontColor : this.fontColor)
-        .fontSize(10)
-        .margin({top: 2})
-    }
-  }
-
-  @Builder Tab2Builder() {
-    Column() {
-      Image(this.currentIndex === 1 ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png')
-        .width(24)
-        .height(24)
-        .opacity(this.currentIndex === 1 ? 1 : 0.4)
-        .objectFit(ImageFit.Contain)
-      Text("Tab2")
-        .fontColor(this.currentIndex === 1 ? this.selectedFontColor : this.fontColor)
-        .fontSize(10)
-        .margin({top: 2})
-    }
-  }
-
-  @Builder Tab3Builder() {
-    Column() {
-      Image(this.currentIndex === 3 ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png')
-        .width(24)
-        .height(24)
-        .opacity(this.currentIndex === 3 ? 1 : 0.4)
-        .objectFit(ImageFit.Contain)
-      Text("Tab3")
-        .fontColor(this.currentIndex === 3 ? this.selectedFontColor : this.fontColor)
-        .fontSize(10)
-        .margin({top: 2})
-    }
-  }
-
-  @Builder Tab4Builder() {
+  @Builder TabBuilder(index: number) {
     Column() {
-      Image(this.currentIndex === 4 ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png')
-        .width(24)
-        .height(24)
-        .opacity(this.currentIndex === 4 ? 1 : 0.4)
+      Image(this.currentIndex === index ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png')
+        .width(10)
+        .height(10)
+        .opacity(this.currentIndex === index ? 1 : 0.4)
         .objectFit(ImageFit.Contain)
-      Text("Tab4")
-        .fontColor(this.currentIndex === 4 ? this.selectedFontColor : this.fontColor)
+      Text(`Tab${(index > 2 ? (index - 1) : index) + 1}`)
+        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
         .fontSize(10)
         .margin({top: 2})
     }
@@ -134,36 +75,36 @@ struct TabContentExample  {
 
   build() {
     Column() {
-      Tabs({ barPosition: BarPosition.End, index: 0, controller: this.controller }) {
+      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
         TabContent() {
           Flex({justifyContent: FlexAlign.Center})) {
             Text('Tab1').fontSize(32)
           }
-        }.tabBar(this.Tab1Builder)
+        }.tabBar(this.TabBuilder(0))
 
         TabContent() {
           Flex({justifyContent: FlexAlign.Center})) {
             Text('Tab2').fontSize(32)
           }
-        }.tabBar(this.Tab2Builder)
+        }.tabBar(this.TabBuilder(1))
 
         TabContent() {
           Flex({justifyContent: FlexAlign.Center})) {
             Text('Add').fontSize(32)
           }
-        }.tabBar(this.AddBuilder)
+        }.tabBar(this.AddBuilder())
 
         TabContent() {
           Flex({justifyContent: FlexAlign.Center})) {
             Text('Tab3').fontSize(32)
           }
-        }.tabBar(this.Tab3Builder)
+        }.tabBar(this.TabBuilder(3))
 
         TabContent() {
           Flex({justifyContent: FlexAlign.Center})) {
             Text('Tab4').fontSize(32)
           }
-        }.tabBar(this.Tab4Builder)
+        }.tabBar(this.TabBuilder(4))
       }
       .vertical(false)
       .barWidth(300).barHeight(56)
@@ -176,4 +117,4 @@ struct TabContentExample  {
 }
 ```
 
-![](figures/en-us_image_0000001193075122.gif)
+![en-us_image_0000001256978331](figures/en-us_image_0000001256978331.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-container-tabs.md b/en/application-dev/reference/arkui-ts/ts-container-tabs.md
index e6c394df300683312e582d6d63acf20d9263ace6..8e0fca0e9fa3da2b40a4c2f3eb6199fde96765fc 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-tabs.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-tabs.md
@@ -1,252 +1,79 @@
-# Tabs<a name="EN-US_TOPIC_0000001237475055"></a>
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-The  **<Tabs\>**  component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a content view.
-
-## Applicable Devices<a name="section322851519172"></a>
-
-<a name="table857714145377"></a>
-<table><thead align="left"><tr id="row55778146373"><th class="cellrowborder" valign="top" width="23.66106080206986%" id="mcps1.1.5.1.1"><p id="p7577141417376"><a name="p7577141417376"></a><a name="p7577141417376"></a>Phone</p>
-</th>
-<th class="cellrowborder" valign="top" width="26.3130659767141%" id="mcps1.1.5.1.2"><p id="p487719816463"><a name="p487719816463"></a><a name="p487719816463"></a>Tablet</p>
-</th>
-<th class="cellrowborder" valign="top" width="24.63130659767141%" id="mcps1.1.5.1.3"><p id="p135771614203720"><a name="p135771614203720"></a><a name="p135771614203720"></a>Smart TV</p>
-</th>
-<th class="cellrowborder" valign="top" width="25.39456662354463%" id="mcps1.1.5.1.4"><p id="p25772014133712"><a name="p25772014133712"></a><a name="p25772014133712"></a>Wearable</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row8578151423715"><td class="cellrowborder" valign="top" width="23.66106080206986%" headers="mcps1.1.5.1.1 "><p id="p65782014203718"><a name="p65782014203718"></a><a name="p65782014203718"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="26.3130659767141%" headers="mcps1.1.5.1.2 "><p id="p148771182469"><a name="p148771182469"></a><a name="p148771182469"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.63130659767141%" headers="mcps1.1.5.1.3 "><p id="p45783141377"><a name="p45783141377"></a><a name="p45783141377"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="25.39456662354463%" headers="mcps1.1.5.1.4 "><p id="p11578161443718"><a name="p11578161443718"></a><a name="p11578161443718"></a>No</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Required Permissions<a name="section988262631714"></a>
+# Tabs
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+The **&lt;Tabs&gt;** component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a content view.
+
+
+## Required Permissions
 
 None
 
-## Child Component<a name="section5989144051714"></a>
-
-The  **<Tabs\>**  component can contain  [TabContent](ts-container-tabcontent.md)  child components.
-
-## APIs<a name="section97451749121712"></a>
-
-Tabs\(value: \{barPosition?: BarPosition, index?: number, controller?:  [TabsController](#section104288910399)\}\)
-
--   Parameters
-
-    <a name="table193606194544"></a>
-    <table><thead align="left"><tr id="row536071910541"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p436112199544"><a name="p436112199544"></a><a name="p436112199544"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="19.3%" id="mcps1.1.6.1.2"><p id="p19361319115410"><a name="p19361319115410"></a><a name="p19361319115410"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.77%" id="mcps1.1.6.1.3"><p id="p9361201975417"><a name="p9361201975417"></a><a name="p9361201975417"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.6%" id="mcps1.1.6.1.4"><p id="p43611199542"><a name="p43611199542"></a><a name="p43611199542"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="36.22%" id="mcps1.1.6.1.5"><p id="p1136141975419"><a name="p1136141975419"></a><a name="p1136141975419"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row10361101915545"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p1361119155417"><a name="p1361119155417"></a><a name="p1361119155417"></a>barPosition</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.3%" headers="mcps1.1.6.1.2 "><p id="p8361181913548"><a name="p8361181913548"></a><a name="p8361181913548"></a><a href="#li15340346135115">BarPosition</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.77%" headers="mcps1.1.6.1.3 "><p id="p153611119195411"><a name="p153611119195411"></a><a name="p153611119195411"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.6%" headers="mcps1.1.6.1.4 "><p id="p1436114193546"><a name="p1436114193546"></a><a name="p1436114193546"></a>Start</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p328155017218"><a name="p328155017218"></a><a name="p328155017218"></a>Tab bar position for creating the <strong id="b1280611567272"><a name="b1280611567272"></a><a name="b1280611567272"></a>&lt;Tabs&gt;</strong> container component.</p>
-    </td>
-    </tr>
-    <tr id="row1860154012417"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p108611240343"><a name="p108611240343"></a><a name="p108611240343"></a>index</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.3%" headers="mcps1.1.6.1.2 "><p id="p17861154015414"><a name="p17861154015414"></a><a name="p17861154015414"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.77%" headers="mcps1.1.6.1.3 "><p id="p986119408419"><a name="p986119408419"></a><a name="p986119408419"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.6%" headers="mcps1.1.6.1.4 "><p id="p1186174019416"><a name="p1186174019416"></a><a name="p1186174019416"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p986110401845"><a name="p986110401845"></a><a name="p986110401845"></a>Initial tab index.</p>
-    </td>
-    </tr>
-    <tr id="row1559133357"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p19591536520"><a name="p19591536520"></a><a name="p19591536520"></a>controller</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.3%" headers="mcps1.1.6.1.2 "><p id="p659116317510"><a name="p659116317510"></a><a name="p659116317510"></a><a href="#section104288910399">TabsController</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.77%" headers="mcps1.1.6.1.3 "><p id="p165912037510"><a name="p165912037510"></a><a name="p165912037510"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.6%" headers="mcps1.1.6.1.4 ">&nbsp;&nbsp;</td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p959117310513"><a name="p959117310513"></a><a name="p959117310513"></a>Tab controller.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li15340346135115"></a>BarPosition enums
-
-    <a name="table2319185192616"></a>
-    <table><thead align="left"><tr id="row2032019513262"><th class="cellrowborder" valign="top" width="28.360000000000003%" id="mcps1.1.3.1.1"><p id="p7320551132614"><a name="p7320551132614"></a><a name="p7320551132614"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="71.64%" id="mcps1.1.3.1.2"><p id="p9320951152619"><a name="p9320951152619"></a><a name="p9320951152619"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row73201351192611"><td class="cellrowborder" valign="top" width="28.360000000000003%" headers="mcps1.1.3.1.1 "><p id="p10400151015275"><a name="p10400151015275"></a><a name="p10400151015275"></a>Start</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="71.64%" headers="mcps1.1.3.1.2 "><p id="p12320165115268"><a name="p12320165115268"></a><a name="p12320165115268"></a>If the <strong id="b6532191803016"><a name="b6532191803016"></a><a name="b6532191803016"></a>vertical</strong> attribute is set to <strong id="b12123183933016"><a name="b12123183933016"></a><a name="b12123183933016"></a>true</strong>, the tab is on the left of the container. If the <strong id="b1761113743118"><a name="b1761113743118"></a><a name="b1761113743118"></a>vertical</strong> attribute is set to <strong id="b1676784511319"><a name="b1676784511319"></a><a name="b1676784511319"></a>false</strong>, the tab is on the top of the container.</p>
-    </td>
-    </tr>
-    <tr id="row58043114275"><td class="cellrowborder" valign="top" width="28.360000000000003%" headers="mcps1.1.3.1.1 "><p id="p98043182720"><a name="p98043182720"></a><a name="p98043182720"></a>End</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="71.64%" headers="mcps1.1.3.1.2 "><p id="p1098012362918"><a name="p1098012362918"></a><a name="p1098012362918"></a>If the <strong id="b53711613163214"><a name="b53711613163214"></a><a name="b53711613163214"></a>vertical</strong> attribute is set to <strong id="b14371191323213"><a name="b14371191323213"></a><a name="b14371191323213"></a>true</strong>, the tab is on the right of the container. If the <strong id="b123721013153213"><a name="b123721013153213"></a><a name="b123721013153213"></a>vertical</strong> attribute is set to <strong id="b1937218138329"><a name="b1937218138329"></a><a name="b1937218138329"></a>false</strong>, the tab is at the bottom of the container.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-### TabsController<a name="section104288910399"></a>
+
+## Child Component
+
+The **&lt;Tabs&gt;** component can contain [TabContent](ts-container-tabcontent.md) child components.
+
+
+## APIs
+
+Tabs(value: {barPosition?: BarPosition, index?: number, controller?: [TabsController](#tabscontroller)})
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | barPosition | BarPosition | No | BarPosition.Start | Tab&nbsp;bar&nbsp;position&nbsp;for&nbsp;creating&nbsp;the&nbsp;**&lt;Tabs&gt;**&nbsp;container&nbsp;component. | 
+  | index | number | No | 0 | Initial&nbsp;tab&nbsp;index. | 
+  | controller | [TabsController](#tabscontroller) | No | - | Tab&nbsp;controller. | 
+
+- BarPosition enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Start | If&nbsp;the&nbsp;**vertical**&nbsp;attribute&nbsp;is&nbsp;set&nbsp;to&nbsp;**true**,&nbsp;the&nbsp;tab&nbsp;is&nbsp;on&nbsp;the&nbsp;left&nbsp;of&nbsp;the&nbsp;container.&nbsp;If&nbsp;the&nbsp;**vertical**&nbsp;attribute&nbsp;is&nbsp;set&nbsp;to&nbsp;**false**,&nbsp;the&nbsp;tab&nbsp;is&nbsp;on&nbsp;the&nbsp;top&nbsp;of&nbsp;the&nbsp;container. | 
+  | End | If&nbsp;the&nbsp;**vertical**&nbsp;attribute&nbsp;is&nbsp;set&nbsp;to&nbsp;**true**,&nbsp;the&nbsp;tab&nbsp;is&nbsp;on&nbsp;the&nbsp;right&nbsp;of&nbsp;the&nbsp;container.&nbsp;If&nbsp;the&nbsp;**vertical**&nbsp;attribute&nbsp;is&nbsp;set&nbsp;to&nbsp;**false**,&nbsp;the&nbsp;tab&nbsp;is&nbsp;at&nbsp;the&nbsp;bottom&nbsp;of&nbsp;the&nbsp;container. | 
+
+
+### TabsController
 
 Defines a tab controller, which is used to control switching of tabs.
 
-<a name="table18201749144213"></a>
-<table><thead align="left"><tr id="row122017496424"><th class="cellrowborder" valign="top" width="26.99%" id="mcps1.1.3.1.1"><p id="p132014497426"><a name="p132014497426"></a><a name="p132014497426"></a>API</p>
-</th>
-<th class="cellrowborder" valign="top" width="73.00999999999999%" id="mcps1.1.3.1.2"><p id="p1520111494422"><a name="p1520111494422"></a><a name="p1520111494422"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row142019496423"><td class="cellrowborder" valign="top" width="26.99%" headers="mcps1.1.3.1.1 "><p id="p19183105594516"><a name="p19183105594516"></a><a name="p19183105594516"></a>changeIndex(value: number): void</p>
-</td>
-<td class="cellrowborder" valign="top" width="73.00999999999999%" headers="mcps1.1.3.1.2 "><p id="p122511258467"><a name="p122511258467"></a><a name="p122511258467"></a>Changes the index of a tab. The value starts from <strong id="b1530485513414"><a name="b1530485513414"></a><a name="b1530485513414"></a>0</strong>.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Attributes<a name="section1738516911810"></a>
+  | API | Description | 
+| -------- | -------- |
+| changeIndex(value:&nbsp;number):&nbsp;void | Changes&nbsp;the&nbsp;index&nbsp;of&nbsp;a&nbsp;tab.&nbsp;The&nbsp;value&nbsp;starts&nbsp;from&nbsp;**0**. | 
+
+
+## Attributes
 
 Touch target configuration is not supported.
 
-<a name="table1854mcpsimp"></a>
-<table><thead align="left"><tr id="row1861mcpsimp"><th class="cellrowborder" valign="top" width="17.82%" id="mcps1.1.5.1.1"><p id="p1863mcpsimp"><a name="p1863mcpsimp"></a><a name="p1863mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="15.840000000000002%" id="mcps1.1.5.1.2"><p id="p1865mcpsimp"><a name="p1865mcpsimp"></a><a name="p1865mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="19.75%" id="mcps1.1.5.1.3"><p id="p1867mcpsimp"><a name="p1867mcpsimp"></a><a name="p1867mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="46.589999999999996%" id="mcps1.1.5.1.4"><p id="p1869mcpsimp"><a name="p1869mcpsimp"></a><a name="p1869mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1879mcpsimp"><td class="cellrowborder" valign="top" width="17.82%" headers="mcps1.1.5.1.1 "><p id="p10537mcpsimp"><a name="p10537mcpsimp"></a><a name="p10537mcpsimp"></a>vertical</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.840000000000002%" headers="mcps1.1.5.1.2 "><p id="p10539mcpsimp"><a name="p10539mcpsimp"></a><a name="p10539mcpsimp"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.5.1.3 "><p id="p10541mcpsimp"><a name="p10541mcpsimp"></a><a name="p10541mcpsimp"></a>false</p>
-</td>
-<td class="cellrowborder" valign="top" width="46.589999999999996%" headers="mcps1.1.5.1.4 "><p id="p17139154113369"><a name="p17139154113369"></a><a name="p17139154113369"></a>Whether a tab is a vertical tab.</p>
-</td>
-</tr>
-<tr id="row1888mcpsimp"><td class="cellrowborder" valign="top" width="17.82%" headers="mcps1.1.5.1.1 "><p id="p10544mcpsimp"><a name="p10544mcpsimp"></a><a name="p10544mcpsimp"></a>scrollable</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.840000000000002%" headers="mcps1.1.5.1.2 "><p id="p10546mcpsimp"><a name="p10546mcpsimp"></a><a name="p10546mcpsimp"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.5.1.3 "><p id="p10548mcpsimp"><a name="p10548mcpsimp"></a><a name="p10548mcpsimp"></a>true</p>
-</td>
-<td class="cellrowborder" valign="top" width="46.589999999999996%" headers="mcps1.1.5.1.4 "><p id="p29371214364"><a name="p29371214364"></a><a name="p29371214364"></a>Whether page switching can be performed by swiping left or right. </p>
-</td>
-</tr>
-<tr id="row1897mcpsimp"><td class="cellrowborder" valign="top" width="17.82%" headers="mcps1.1.5.1.1 "><p id="p10551mcpsimp"><a name="p10551mcpsimp"></a><a name="p10551mcpsimp"></a>barMode</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.840000000000002%" headers="mcps1.1.5.1.2 "><p id="p10553mcpsimp"><a name="p10553mcpsimp"></a><a name="p10553mcpsimp"></a><a href="#li386615395316">BarMode</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.5.1.3 "><p id="p10555mcpsimp"><a name="p10555mcpsimp"></a><a name="p10555mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="46.589999999999996%" headers="mcps1.1.5.1.4 "><p id="p1905mcpsimp"><a name="p1905mcpsimp"></a><a name="p1905mcpsimp"></a>Tab bar layout mode.</p>
-</td>
-</tr>
-<tr id="row1906mcpsimp"><td class="cellrowborder" valign="top" width="17.82%" headers="mcps1.1.5.1.1 "><p id="p10558mcpsimp"><a name="p10558mcpsimp"></a><a name="p10558mcpsimp"></a>barWidth</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.840000000000002%" headers="mcps1.1.5.1.2 "><p id="p10560mcpsimp"><a name="p10560mcpsimp"></a><a name="p10560mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.5.1.3 "><p id="p10562mcpsimp"><a name="p10562mcpsimp"></a><a name="p10562mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="46.589999999999996%" headers="mcps1.1.5.1.4 "><p id="p1914mcpsimp"><a name="p1914mcpsimp"></a><a name="p1914mcpsimp"></a>Width of the tab bar. If this parameter is not set, the default value in the system theme is used.</p>
-</td>
-</tr>
-<tr id="row1915mcpsimp"><td class="cellrowborder" valign="top" width="17.82%" headers="mcps1.1.5.1.1 "><p id="p10565mcpsimp"><a name="p10565mcpsimp"></a><a name="p10565mcpsimp"></a>barHeight</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.840000000000002%" headers="mcps1.1.5.1.2 "><p id="p10567mcpsimp"><a name="p10567mcpsimp"></a><a name="p10567mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.5.1.3 "><p id="p10569mcpsimp"><a name="p10569mcpsimp"></a><a name="p10569mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="46.589999999999996%" headers="mcps1.1.5.1.4 "><p id="p1923mcpsimp"><a name="p1923mcpsimp"></a><a name="p1923mcpsimp"></a>Height of the tab bar. If this parameter is not set, the default value in the system theme is used.</p>
-</td>
-</tr>
-<tr id="row195881158686"><td class="cellrowborder" valign="top" width="17.82%" headers="mcps1.1.5.1.1 "><p id="p195883581813"><a name="p195883581813"></a><a name="p195883581813"></a>animationDuration</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.840000000000002%" headers="mcps1.1.5.1.2 "><p id="p258815586820"><a name="p258815586820"></a><a name="p258815586820"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.5.1.3 "><p id="p185891858089"><a name="p185891858089"></a><a name="p185891858089"></a>200</p>
-</td>
-<td class="cellrowborder" valign="top" width="46.589999999999996%" headers="mcps1.1.5.1.4 "><p id="p195891558888"><a name="p195891558888"></a><a name="p195891558888"></a>Animation duration of the tab content.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li386615395316"></a>BarMode enums
-
-    <a name="table12144170154116"></a>
-    <table><thead align="left"><tr id="row1314430184118"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p1614414014416"><a name="p1614414014416"></a><a name="p1614414014416"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p1314415074113"><a name="p1314415074113"></a><a name="p1314415074113"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row61441505417"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p191443034117"><a name="p191443034117"></a><a name="p191443034117"></a>Scrollable</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p121447017412"><a name="p121447017412"></a><a name="p121447017412"></a>The actual layout width of the tab bar is used. If the actual width exceeds the total length, the tab bar is scrollable.</p>
-    </td>
-    </tr>
-    <tr id="row20144801418"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p17145110194110"><a name="p17145110194110"></a><a name="p17145110194110"></a>Fixed</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p171454015415"><a name="p171454015415"></a><a name="p171454015415"></a>The widths of all tab bars are evenly allocated.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Events<a name="section6741113101919"></a>
-
-<a name="table1934mcpsimp"></a>
-<table><thead align="left"><tr id="row1940mcpsimp"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p1944mcpsimp"><a name="p1944mcpsimp"></a><a name="p1944mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p1946mcpsimp"><a name="p1946mcpsimp"></a><a name="p1946mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1947mcpsimp"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p1949mcpsimp"><a name="p1949mcpsimp"></a><a name="p1949mcpsimp"></a>onChange(callback: (index: number) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p10594mcpsimp"><a name="p10594mcpsimp"></a><a name="p10594mcpsimp"></a>Event triggered when a tab is switched.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section1131255321814"></a>
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| vertical | boolean | false | Whether&nbsp;a&nbsp;tab&nbsp;is&nbsp;a&nbsp;vertical&nbsp;tab. | 
+| scrollable | boolean | true | Whether&nbsp;page&nbsp;switching&nbsp;can&nbsp;be&nbsp;performed&nbsp;by&nbsp;swiping&nbsp;left&nbsp;or&nbsp;right. | 
+| barMode | BarMode | - | Tab&nbsp;bar&nbsp;layout&nbsp;mode. | 
+| barWidth | number | - | Width&nbsp;of&nbsp;the&nbsp;tab&nbsp;bar.&nbsp;If&nbsp;this&nbsp;parameter&nbsp;is&nbsp;not&nbsp;set,&nbsp;the&nbsp;default&nbsp;value&nbsp;in&nbsp;the&nbsp;system&nbsp;theme&nbsp;is&nbsp;used. | 
+| barHeight | number | - | Height&nbsp;of&nbsp;the&nbsp;tab&nbsp;bar.&nbsp;If&nbsp;this&nbsp;parameter&nbsp;is&nbsp;not&nbsp;set,&nbsp;the&nbsp;default&nbsp;value&nbsp;in&nbsp;the&nbsp;system&nbsp;theme&nbsp;is&nbsp;used. | 
+| animationDuration | number | 200 | Animation&nbsp;duration&nbsp;of&nbsp;the&nbsp;tab&nbsp;content. | 
+
+- BarMode enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Scrollable | The&nbsp;actual&nbsp;layout&nbsp;width&nbsp;of&nbsp;the&nbsp;tab&nbsp;bar&nbsp;is&nbsp;used.&nbsp;If&nbsp;the&nbsp;actual&nbsp;width&nbsp;exceeds&nbsp;the&nbsp;total&nbsp;length,&nbsp;the&nbsp;tab&nbsp;bar&nbsp;is&nbsp;scrollable. | 
+  | Fixed | The&nbsp;widths&nbsp;of&nbsp;all&nbsp;tab&nbsp;bars&nbsp;are&nbsp;evenly&nbsp;allocated. | 
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onChange(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;void) | Event&nbsp;triggered&nbsp;when&nbsp;a&nbsp;tab&nbsp;is&nbsp;switched. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -256,7 +83,7 @@ struct TabsExample {
 
   build() {
     Column() {
-      Tabs({ barPosition: BarPosition.Start, index: 1, controller: this.controller }) {
+      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
         TabContent() {
           Column().width('100%').height('100%').backgroundColor(Color.Pink)
         }.tabBar('pink')
@@ -284,5 +111,4 @@ struct TabsExample {
 }
 ```
 
-![](figures/tabs.gif)
-
+![en-us_image_0000001212218430](figures/en-us_image_0000001212218430.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
index 787ebf3396fa7e90eb19ae277d9cbe2649cd0c35..f27d8720103662925dab1c720d4d9da249bb611e 100644
--- a/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
+++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
@@ -1,134 +1,50 @@
-# Circle<a name="EN-US_TOPIC_0000001192755110"></a>
+# Circle
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Circle\>**  component is used to draw a circle.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section53281531154915"></a>
+
+The **&lt;Circle&gt;** component is used to draw a circle.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section5327181920402"></a>
+
+## Child Components
 
 None
 
-## APIs<a name="section43062331406"></a>
-
-Circle\(options?: \{width: Length, height: Length\}\)
-
--   Parameters
-
-    <a name="table193606194544"></a>
-    <table><thead align="left"><tr id="row536071910541"><th class="cellrowborder" valign="top" width="15.47%" id="mcps1.1.6.1.1"><p id="p436112199544"><a name="p436112199544"></a><a name="p436112199544"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="17.22%" id="mcps1.1.6.1.2"><p id="p19361319115410"><a name="p19361319115410"></a><a name="p19361319115410"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.479999999999999%" id="mcps1.1.6.1.3"><p id="p9361201975417"><a name="p9361201975417"></a><a name="p9361201975417"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.61%" id="mcps1.1.6.1.4"><p id="p43611199542"><a name="p43611199542"></a><a name="p43611199542"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="36.22%" id="mcps1.1.6.1.5"><p id="p1136141975419"><a name="p1136141975419"></a><a name="p1136141975419"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row10361101915545"><td class="cellrowborder" valign="top" width="15.47%" headers="mcps1.1.6.1.1 "><p id="p1361119155417"><a name="p1361119155417"></a><a name="p1361119155417"></a>options</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.22%" headers="mcps1.1.6.1.2 "><p id="p8361181913548"><a name="p8361181913548"></a><a name="p8361181913548"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.479999999999999%" headers="mcps1.1.6.1.3 "><p id="p153611119195411"><a name="p153611119195411"></a><a name="p153611119195411"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.61%" headers="mcps1.1.6.1.4 "><p id="p1436114193546"><a name="p1436114193546"></a><a name="p1436114193546"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p328155017218"><a name="p328155017218"></a><a name="p328155017218"></a>For details, see the <a href="#li9482134124512">options parameters</a>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li9482134124512"></a>options parameters
-
-    <a name="table204985415456"></a>
-    <table><thead align="left"><tr id="row134981041154516"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p94971541104510"><a name="p94971541104510"></a><a name="p94971541104510"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.01%" id="mcps1.1.6.1.2"><p id="p15498154184513"><a name="p15498154184513"></a><a name="p15498154184513"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.499999999999998%" id="mcps1.1.6.1.3"><p id="p2498184124516"><a name="p2498184124516"></a><a name="p2498184124516"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.170000000000002%" id="mcps1.1.6.1.4"><p id="p94981741194517"><a name="p94981741194517"></a><a name="p94981741194517"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="42.21%" id="mcps1.1.6.1.5"><p id="p1849834115451"><a name="p1849834115451"></a><a name="p1849834115451"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row44980419459"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p164981441164512"><a name="p164981441164512"></a><a name="p164981441164512"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p44987411458"><a name="p44987411458"></a><a name="p44987411458"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p4498104124511"><a name="p4498104124511"></a><a name="p4498104124511"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p16498841204515"><a name="p16498841204515"></a><a name="p16498841204515"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p104980410453"><a name="p104980410453"></a><a name="p104980410453"></a>Width.</p>
-    </td>
-    </tr>
-    <tr id="row1049813410458"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p7498541204517"><a name="p7498541204517"></a><a name="p7498541204517"></a>height</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p54981441184518"><a name="p54981441184518"></a><a name="p54981441184518"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p149844116454"><a name="p149844116454"></a><a name="p149844116454"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p194981041134510"><a name="p194981041134510"></a><a name="p194981041134510"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p3498104174515"><a name="p3498104174515"></a><a name="p3498104174515"></a>Height.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section10878194810416"></a>
-
-<a name="table1050144353310"></a>
-<table><thead align="left"><tr id="row10886430331"><th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.1"><p id="p988164373314"><a name="p988164373314"></a><a name="p988164373314"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.2"><p id="p19882437336"><a name="p19882437336"></a><a name="p19882437336"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.3"><p id="p158894320331"><a name="p158894320331"></a><a name="p158894320331"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="15.98%" id="mcps1.1.6.1.4"><p id="p1887436331"><a name="p1887436331"></a><a name="p1887436331"></a>Mandatory</p>
-</th>
-<th class="cellrowborder" valign="top" width="24.02%" id="mcps1.1.6.1.5"><p id="p08834313311"><a name="p08834313311"></a><a name="p08834313311"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row178884318332"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p14885432338"><a name="p14885432338"></a><a name="p14885432338"></a>width</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p28874363314"><a name="p28874363314"></a><a name="p28874363314"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p288104315332"><a name="p288104315332"></a><a name="p288104315332"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.98%" headers="mcps1.1.6.1.4 "><p id="p68874317332"><a name="p68874317332"></a><a name="p68874317332"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.02%" headers="mcps1.1.6.1.5 "><p id="p38834313313"><a name="p38834313313"></a><a name="p38834313313"></a>Width of the rectangle where the circle is located.</p>
-</td>
-</tr>
-<tr id="row78814314333"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p118884319333"><a name="p118884319333"></a><a name="p118884319333"></a>height</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p13881943113312"><a name="p13881943113312"></a><a name="p13881943113312"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p1388143143312"><a name="p1388143143312"></a><a name="p1388143143312"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.98%" headers="mcps1.1.6.1.4 "><p id="p68819432337"><a name="p68819432337"></a><a name="p68819432337"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.02%" headers="mcps1.1.6.1.5 "><p id="p888343193312"><a name="p888343193312"></a><a name="p888343193312"></a>Height of the rectangle where the circle is located.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section4459736105512"></a>
 
+## APIs
+
+Circle(options?: {width: Length, height: Length})
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | options | Object | No | - | For&nbsp;details,&nbsp;see&nbsp;the&nbsp;**options**&nbsp;parameters. | 
+
+- options parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | width | Length | Yes | - | Width. | 
+  | height | Length | Yes | - | Height. | 
+
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Mandatory | Description | 
+| -------- | -------- | -------- | -------- | -------- |
+| width | Length | 0 | No | Width&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;circle&nbsp;is&nbsp;located. | 
+| height | Length | 0 | No | Height&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;circle&nbsp;is&nbsp;located. | 
+
+
+## Example
+
+  
 ```
 @Entry
 @Component
@@ -144,5 +60,4 @@ struct CircleExample {
 }
 ```
 
-![](figures/circle.png)
-
+![en-us_image_0000001256978353](figures/en-us_image_0000001256978353.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
index d36939e06bb7df2bdaf1de30e5f56dad58854707..8c12c8fc6b178006a44b252cc03e5f32ad2af4ce 100644
--- a/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
+++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
@@ -1,134 +1,50 @@
-# Ellipse<a name="EN-US_TOPIC_0000001193075096"></a>
+# Ellipse
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Ellipse\>**  component is used to draw an ellipse.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section53281531154915"></a>
+
+The **&lt;Ellipse&gt;** component is used to draw an ellipse.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section121862320423"></a>
+
+## Child Components
 
 None
 
-## APIs<a name="section1870194144317"></a>
-
-ellipse\(options?: \{width: Lenght, height: Length\}\)
-
--   Parameters
-
-    <a name="table193606194544"></a>
-    <table><thead align="left"><tr id="row536071910541"><th class="cellrowborder" valign="top" width="15.47%" id="mcps1.1.6.1.1"><p id="p436112199544"><a name="p436112199544"></a><a name="p436112199544"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="17.22%" id="mcps1.1.6.1.2"><p id="p19361319115410"><a name="p19361319115410"></a><a name="p19361319115410"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.49%" id="mcps1.1.6.1.3"><p id="p9361201975417"><a name="p9361201975417"></a><a name="p9361201975417"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.6%" id="mcps1.1.6.1.4"><p id="p43611199542"><a name="p43611199542"></a><a name="p43611199542"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="36.22%" id="mcps1.1.6.1.5"><p id="p1136141975419"><a name="p1136141975419"></a><a name="p1136141975419"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row10361101915545"><td class="cellrowborder" valign="top" width="15.47%" headers="mcps1.1.6.1.1 "><p id="p1361119155417"><a name="p1361119155417"></a><a name="p1361119155417"></a>options</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.22%" headers="mcps1.1.6.1.2 "><p id="p8361181913548"><a name="p8361181913548"></a><a name="p8361181913548"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.49%" headers="mcps1.1.6.1.3 "><p id="p153611119195411"><a name="p153611119195411"></a><a name="p153611119195411"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.6%" headers="mcps1.1.6.1.4 "><p id="p1436114193546"><a name="p1436114193546"></a><a name="p1436114193546"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p328155017218"><a name="p328155017218"></a><a name="p328155017218"></a>For details, see the <a href="#li155660864616">options parameters</a>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li155660864616"></a>options parameters
-
-    <a name="table14581481462"></a>
-    <table><thead align="left"><tr id="row858019813463"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p195806814619"><a name="p195806814619"></a><a name="p195806814619"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.01%" id="mcps1.1.6.1.2"><p id="p85805884615"><a name="p85805884615"></a><a name="p85805884615"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.499999999999998%" id="mcps1.1.6.1.3"><p id="p12580384465"><a name="p12580384465"></a><a name="p12580384465"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.170000000000002%" id="mcps1.1.6.1.4"><p id="p758019818465"><a name="p758019818465"></a><a name="p758019818465"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="42.21%" id="mcps1.1.6.1.5"><p id="p17580138174617"><a name="p17580138174617"></a><a name="p17580138174617"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row55808810465"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p15801681465"><a name="p15801681465"></a><a name="p15801681465"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p6580583466"><a name="p6580583466"></a><a name="p6580583466"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p1658017854614"><a name="p1658017854614"></a><a name="p1658017854614"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p1758016813461"><a name="p1758016813461"></a><a name="p1758016813461"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p958078184617"><a name="p958078184617"></a><a name="p958078184617"></a>Width.</p>
-    </td>
-    </tr>
-    <tr id="row1958178174619"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p11581208194613"><a name="p11581208194613"></a><a name="p11581208194613"></a>height</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p45811884612"><a name="p45811884612"></a><a name="p45811884612"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p15581188104613"><a name="p15581188104613"></a><a name="p15581188104613"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p18581198134615"><a name="p18581198134615"></a><a name="p18581198134615"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p115810824615"><a name="p115810824615"></a><a name="p115810824615"></a>Height.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section177298713218"></a>
-
-<a name="table7575164093416"></a>
-<table><thead align="left"><tr id="row56061840133420"><th class="cellrowborder" valign="top" width="19.999999999999996%" id="mcps1.1.6.1.1"><p id="p16606940103416"><a name="p16606940103416"></a><a name="p16606940103416"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="19.999999999999996%" id="mcps1.1.6.1.2"><p id="p1760794013418"><a name="p1760794013418"></a><a name="p1760794013418"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="19.999999999999996%" id="mcps1.1.6.1.3"><p id="p156079409343"><a name="p156079409343"></a><a name="p156079409343"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="16.799999999999997%" id="mcps1.1.6.1.4"><p id="p760716403344"><a name="p760716403344"></a><a name="p760716403344"></a>Mandatory</p>
-</th>
-<th class="cellrowborder" valign="top" width="23.199999999999996%" id="mcps1.1.6.1.5"><p id="p166074401343"><a name="p166074401343"></a><a name="p166074401343"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1360714053412"><td class="cellrowborder" valign="top" width="19.999999999999996%" headers="mcps1.1.6.1.1 "><p id="p20607104019345"><a name="p20607104019345"></a><a name="p20607104019345"></a>width</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.999999999999996%" headers="mcps1.1.6.1.2 "><p id="p1860764010342"><a name="p1860764010342"></a><a name="p1860764010342"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.999999999999996%" headers="mcps1.1.6.1.3 "><p id="p260744012348"><a name="p260744012348"></a><a name="p260744012348"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.799999999999997%" headers="mcps1.1.6.1.4 "><p id="p16075402342"><a name="p16075402342"></a><a name="p16075402342"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.199999999999996%" headers="mcps1.1.6.1.5 "><p id="p26071640153415"><a name="p26071640153415"></a><a name="p26071640153415"></a>Width of the rectangle where the ellipse is located.</p>
-</td>
-</tr>
-<tr id="row16607194014341"><td class="cellrowborder" valign="top" width="19.999999999999996%" headers="mcps1.1.6.1.1 "><p id="p160714012344"><a name="p160714012344"></a><a name="p160714012344"></a>height</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.999999999999996%" headers="mcps1.1.6.1.2 "><p id="p14607140153410"><a name="p14607140153410"></a><a name="p14607140153410"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.999999999999996%" headers="mcps1.1.6.1.3 "><p id="p7607124033412"><a name="p7607124033412"></a><a name="p7607124033412"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.799999999999997%" headers="mcps1.1.6.1.4 "><p id="p8607144003418"><a name="p8607144003418"></a><a name="p8607144003418"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.199999999999996%" headers="mcps1.1.6.1.5 "><p id="p17607144013418"><a name="p17607144013418"></a><a name="p17607144013418"></a>Height of the rectangle where the ellipse is located.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section4459736105512"></a>
 
+## APIs
+
+ellipse(options?: {width: Length, height: Length})
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | options | Object | No | - | For&nbsp;details,&nbsp;see&nbsp;the&nbsp;**options**&nbsp;parameters. | 
+
+- options parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | width | Length | Yes | - | Width. | 
+  | height | Length | Yes | - | Height. | 
+
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Mandatory | Description | 
+| -------- | -------- | -------- | -------- | -------- |
+| width | Length | 0 | No | Width&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;ellipse&nbsp;is&nbsp;located. | 
+| height | Length | 0 | No | Height&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;ellipse&nbsp;is&nbsp;located. | 
+
+
+## Example
+
+  
 ```
 @Entry
 @Component
@@ -144,5 +60,4 @@ struct EllipseExample {
 }
 ```
 
-![](figures/ellipse.png)
-
+![en-us_image_0000001212058488](figures/en-us_image_0000001212058488.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md
index 00cb05366364d11d4205c94a97f2892c02b73f79..0221bc3737911512a51cd62cd018394ccbb87400 100644
--- a/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md
+++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md
@@ -1,156 +1,52 @@
-# Line<a name="EN-US_TOPIC_0000001192755100"></a>
+# Line
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Line\>**  component is used to draw a straight line.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section53281531154915"></a>
+
+The **&lt;Line&gt;** component is used to draw a straight line.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section143301522164414"></a>
+
+## Child Components
 
 None
 
-## APIs<a name="section29061037114413"></a>
-
-Line\(options?: \{width: Lenght, height: Length\}\)
-
--   Parameters
-
-    <a name="table193606194544"></a>
-    <table><thead align="left"><tr id="row536071910541"><th class="cellrowborder" valign="top" width="15.47%" id="mcps1.1.6.1.1"><p id="p436112199544"><a name="p436112199544"></a><a name="p436112199544"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="17.22%" id="mcps1.1.6.1.2"><p id="p19361319115410"><a name="p19361319115410"></a><a name="p19361319115410"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.49%" id="mcps1.1.6.1.3"><p id="p9361201975417"><a name="p9361201975417"></a><a name="p9361201975417"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.6%" id="mcps1.1.6.1.4"><p id="p43611199542"><a name="p43611199542"></a><a name="p43611199542"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="36.22%" id="mcps1.1.6.1.5"><p id="p1136141975419"><a name="p1136141975419"></a><a name="p1136141975419"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row10361101915545"><td class="cellrowborder" valign="top" width="15.47%" headers="mcps1.1.6.1.1 "><p id="p1361119155417"><a name="p1361119155417"></a><a name="p1361119155417"></a>options</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.22%" headers="mcps1.1.6.1.2 "><p id="p8361181913548"><a name="p8361181913548"></a><a name="p8361181913548"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.49%" headers="mcps1.1.6.1.3 "><p id="p153611119195411"><a name="p153611119195411"></a><a name="p153611119195411"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.6%" headers="mcps1.1.6.1.4 "><p id="p1436114193546"><a name="p1436114193546"></a><a name="p1436114193546"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p328155017218"><a name="p328155017218"></a><a name="p328155017218"></a>For details, see the <a href="#li53637266464">options parameters</a>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li53637266464"></a>options parameters
-
-    <a name="table53773266467"></a>
-    <table><thead align="left"><tr id="row837713265461"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p537772654616"><a name="p537772654616"></a><a name="p537772654616"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.01%" id="mcps1.1.6.1.2"><p id="p63771426114619"><a name="p63771426114619"></a><a name="p63771426114619"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.499999999999998%" id="mcps1.1.6.1.3"><p id="p337732611465"><a name="p337732611465"></a><a name="p337732611465"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.170000000000002%" id="mcps1.1.6.1.4"><p id="p19377102620461"><a name="p19377102620461"></a><a name="p19377102620461"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="42.21%" id="mcps1.1.6.1.5"><p id="p13774260461"><a name="p13774260461"></a><a name="p13774260461"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row13377102614467"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p93778262466"><a name="p93778262466"></a><a name="p93778262466"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p737782610464"><a name="p737782610464"></a><a name="p737782610464"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p1437711260463"><a name="p1437711260463"></a><a name="p1437711260463"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p9377126204613"><a name="p9377126204613"></a><a name="p9377126204613"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p193771226144618"><a name="p193771226144618"></a><a name="p193771226144618"></a>Width.</p>
-    </td>
-    </tr>
-    <tr id="row1137742644614"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p1037782617464"><a name="p1037782617464"></a><a name="p1037782617464"></a>height</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p1937772619463"><a name="p1937772619463"></a><a name="p1937772619463"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p20377182612461"><a name="p20377182612461"></a><a name="p20377182612461"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p037732615462"><a name="p037732615462"></a><a name="p037732615462"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p183779268462"><a name="p183779268462"></a><a name="p183779268462"></a>Height.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section201863073117"></a>
-
-<a name="table12491429173510"></a>
-<table><thead align="left"><tr id="row4537162973512"><th class="cellrowborder" valign="top" width="19.999999999999996%" id="mcps1.1.6.1.1"><p id="p195371329183515"><a name="p195371329183515"></a><a name="p195371329183515"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="19.999999999999996%" id="mcps1.1.6.1.2"><p id="p19537202911357"><a name="p19537202911357"></a><a name="p19537202911357"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="19.999999999999996%" id="mcps1.1.6.1.3"><p id="p11537102913354"><a name="p11537102913354"></a><a name="p11537102913354"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="12.649999999999997%" id="mcps1.1.6.1.4"><p id="p1353712294351"><a name="p1353712294351"></a><a name="p1353712294351"></a>Mandatory</p>
-</th>
-<th class="cellrowborder" valign="top" width="27.349999999999998%" id="mcps1.1.6.1.5"><p id="p16537102919354"><a name="p16537102919354"></a><a name="p16537102919354"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row8537329113512"><td class="cellrowborder" valign="top" width="19.999999999999996%" headers="mcps1.1.6.1.1 "><p id="p753782920354"><a name="p753782920354"></a><a name="p753782920354"></a>width</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.999999999999996%" headers="mcps1.1.6.1.2 "><p id="p65371729193515"><a name="p65371729193515"></a><a name="p65371729193515"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.999999999999996%" headers="mcps1.1.6.1.3 "><p id="p15537102917353"><a name="p15537102917353"></a><a name="p15537102917353"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.649999999999997%" headers="mcps1.1.6.1.4 "><p id="p553752914352"><a name="p553752914352"></a><a name="p553752914352"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.349999999999998%" headers="mcps1.1.6.1.5 "><p id="p1953792963515"><a name="p1953792963515"></a><a name="p1953792963515"></a>Width of the rectangle where the straight line is located.</p>
-</td>
-</tr>
-<tr id="row85376293351"><td class="cellrowborder" valign="top" width="19.999999999999996%" headers="mcps1.1.6.1.1 "><p id="p18537102910350"><a name="p18537102910350"></a><a name="p18537102910350"></a>height</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.999999999999996%" headers="mcps1.1.6.1.2 "><p id="p853742913353"><a name="p853742913353"></a><a name="p853742913353"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.999999999999996%" headers="mcps1.1.6.1.3 "><p id="p15537529193517"><a name="p15537529193517"></a><a name="p15537529193517"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.649999999999997%" headers="mcps1.1.6.1.4 "><p id="p10537202913510"><a name="p10537202913510"></a><a name="p10537202913510"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.349999999999998%" headers="mcps1.1.6.1.5 "><p id="p125372029193512"><a name="p125372029193512"></a><a name="p125372029193512"></a>Height of the rectangle where the straight line is located.</p>
-</td>
-</tr>
-<tr id="row853792918354"><td class="cellrowborder" valign="top" width="19.999999999999996%" headers="mcps1.1.6.1.1 "><p id="p1537172918353"><a name="p1537172918353"></a><a name="p1537172918353"></a>startPoint</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.999999999999996%" headers="mcps1.1.6.1.2 "><p id="p1537162910351"><a name="p1537162910351"></a><a name="p1537162910351"></a>Point</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.999999999999996%" headers="mcps1.1.6.1.3 "><p id="p185371929153520"><a name="p185371929153520"></a><a name="p185371929153520"></a>[0, 0]</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.649999999999997%" headers="mcps1.1.6.1.4 "><p id="p25371929113511"><a name="p25371929113511"></a><a name="p25371929113511"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.349999999999998%" headers="mcps1.1.6.1.5 "><p id="p7537142993511"><a name="p7537142993511"></a><a name="p7537142993511"></a>Coordinate (relative coordinate) of the start point of the straight line.</p>
-</td>
-</tr>
-<tr id="row135371293358"><td class="cellrowborder" valign="top" width="19.999999999999996%" headers="mcps1.1.6.1.1 "><p id="p175373291355"><a name="p175373291355"></a><a name="p175373291355"></a>endPoint</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.999999999999996%" headers="mcps1.1.6.1.2 "><p id="p1153742993518"><a name="p1153742993518"></a><a name="p1153742993518"></a>Point</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.999999999999996%" headers="mcps1.1.6.1.3 "><p id="p18537329163514"><a name="p18537329163514"></a><a name="p18537329163514"></a>[0, 0]</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.649999999999997%" headers="mcps1.1.6.1.4 "><p id="p13537829103519"><a name="p13537829103519"></a><a name="p13537829103519"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.349999999999998%" headers="mcps1.1.6.1.5 "><p id="p1853722923513"><a name="p1853722923513"></a><a name="p1853722923513"></a>Coordinate (relative coordinate) of the end point of the straight line.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section4459736105512"></a>
 
+## APIs
+
+Line(options?: {width: Length, height: Length})
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | options | Object | No | - | For&nbsp;details,&nbsp;see&nbsp;the&nbsp;**options**&nbsp;parameters. | 
+
+- options parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | width | Length | Yes | - | Width. | 
+  | height | Length | Yes | - | Height. | 
+
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Mandatory | Description | 
+| -------- | -------- | -------- | -------- | -------- |
+| width | Length | 0 | No | Width&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;straight&nbsp;line&nbsp;is&nbsp;located. | 
+| height | Length | 0 | No | Height&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;straight&nbsp;line&nbsp;is&nbsp;located. | 
+| startPoint | Point | [0,&nbsp;0] | Yes | Coordinate&nbsp;(relative&nbsp;coordinate)&nbsp;of&nbsp;the&nbsp;start&nbsp;point&nbsp;of&nbsp;the&nbsp;straight&nbsp;line. | 
+| endPoint | Point | [0,&nbsp;0] | Yes | Coordinate&nbsp;(relative&nbsp;coordinate)&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;of&nbsp;the&nbsp;straight&nbsp;line. | 
+
+
+## Example
+
+  
 ```
 @Entry
 @Component
@@ -164,5 +60,4 @@ struct LineExample {
 }
 ```
 
-![](figures/line.jpg)
-
+![en-us_image_0000001256858387](figures/en-us_image_0000001256858387.jpg)
diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md
index 3642fd8e7671af6638975d85536c7070cfc824d9..230877976324202f8f0d4c581506c8793d62e37a 100644
--- a/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md
+++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md
@@ -1,86 +1,62 @@
-# Path<a name="EN-US_TOPIC_0000001192755118"></a>
+# Path
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Path\>**  component is used to draw a path.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section53281531154915"></a>
+
+The **&lt;Path&gt;** component is used to draw a path.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section53306512504"></a>
+
+## Child Components
 
 None
 
-## Attributes<a name="section3525926155013"></a>
-
-<a name="table1743024643712"></a>
-<table><thead align="left"><tr id="row1447814618374"><th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.1"><p id="p10478124612378"><a name="p10478124612378"></a><a name="p10478124612378"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.2"><p id="p047814462379"><a name="p047814462379"></a><a name="p047814462379"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.3"><p id="p194781468378"><a name="p194781468378"></a><a name="p194781468378"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="15.559999999999999%" id="mcps1.1.6.1.4"><p id="p13478174613371"><a name="p13478174613371"></a><a name="p13478174613371"></a>Mandatory</p>
-</th>
-<th class="cellrowborder" valign="top" width="24.44%" id="mcps1.1.6.1.5"><p id="p1947834613713"><a name="p1947834613713"></a><a name="p1947834613713"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row647811465373"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p1747894614378"><a name="p1747894614378"></a><a name="p1747894614378"></a>width</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p747874613713"><a name="p747874613713"></a><a name="p747874613713"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p15478104611379"><a name="p15478104611379"></a><a name="p15478104611379"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.559999999999999%" headers="mcps1.1.6.1.4 "><p id="p18478146113711"><a name="p18478146113711"></a><a name="p18478146113711"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.44%" headers="mcps1.1.6.1.5 "><p id="p144781446193711"><a name="p144781446193711"></a><a name="p144781446193711"></a>Width of the rectangle where the path is located.</p>
-</td>
-</tr>
-<tr id="row134792468379"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p8479184618376"><a name="p8479184618376"></a><a name="p8479184618376"></a>height</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p1047914610372"><a name="p1047914610372"></a><a name="p1047914610372"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p1447944693719"><a name="p1447944693719"></a><a name="p1447944693719"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.559999999999999%" headers="mcps1.1.6.1.4 "><p id="p1479146163715"><a name="p1479146163715"></a><a name="p1479146163715"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.44%" headers="mcps1.1.6.1.5 "><p id="p18479046183713"><a name="p18479046183713"></a><a name="p18479046183713"></a>Height of the rectangle where the path is located.</p>
-</td>
-</tr>
-<tr id="row1479144643718"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p1647912463376"><a name="p1647912463376"></a><a name="p1647912463376"></a>commands</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p947918468377"><a name="p947918468377"></a><a name="p947918468377"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p1247904613715"><a name="p1247904613715"></a><a name="p1247904613715"></a>''</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.559999999999999%" headers="mcps1.1.6.1.4 "><p id="p174799464375"><a name="p174799464375"></a><a name="p174799464375"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.44%" headers="mcps1.1.6.1.5 "><p id="p1647914617378"><a name="p1647914617378"></a><a name="p1647914617378"></a>Command string for drawing the path.</p>
-</td>
-</tr>
-</tbody>
-</table>
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Mandatory | Description | 
+| -------- | -------- | -------- | -------- | -------- |
+| width | Length | 0 | No | Width&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;path&nbsp;is&nbsp;located. | 
+| height | Length | 0 | No | Height&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;path&nbsp;is&nbsp;located. | 
+| commands | string | '' | Yes | Command&nbsp;string&nbsp;for&nbsp;drawing&nbsp;the&nbsp;path. | 
+
 
 The supported commands are as follows:
 
--   M = moveto
--   L = lineto
--   H = horizontal lineto
--   V = vertical lineto
--   C = curveto
--   S = smooth curveto
--   Q = quadratic Belzier curve
--   T = smooth quadratic Belzier curveto
--   A = elliptical Arc
--   Z = closepath
 
-For example, the command  **M0 20 L50 50 L50 100 Z**  defines a path that starts from \(0, 20\), reaches \(50, 50\) and then \(50, 100\), and ends at \(0, 20\).
+- M = moveto
+
+- L = lineto
+
+- H = horizontal lineto
+
+- V = vertical lineto
 
-## Example<a name="section4459736105512"></a>
+- C = curveto
 
+- S = smooth curveto
+
+- Q = quadratic Bezier curve
+
+- T = smooth quadratic Bezier curveto
+
+- A = elliptical Arc
+
+- Z = closepath
+
+
+For example, the command **M0 20 L50 50 L50 100 Z** defines a path that starts from (0, 20), reaches (50, 50) and then (50, 100), and ends at (0, 20).
+
+
+## Example
+
+  
 ```
 @Entry
 @Component
@@ -112,5 +88,4 @@ struct PathExample {
 }
 ```
 
-![](figures/path.png)
-
+![en-us_image_0000001212058492](figures/en-us_image_0000001212058492.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
index c1eec93f59e1b14d8e61df5e377211b2327a778d..a3a4678f857822de576e7a7b51371d076636021a 100644
--- a/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
+++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
@@ -1,145 +1,51 @@
-# Polygon<a name="EN-US_TOPIC_0000001192755108"></a>
+# Polygon
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Polygon\>**  component is used to draw a polygon.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section53281531154915"></a>
+
+The **&lt;Polygon&gt;** component is used to draw a polygon.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section095923464810"></a>
+
+## Child Components
 
 None
 
-## APIs<a name="section19993104611483"></a>
-
-Polygon\(value:\{options?: \{width: Lenght, height: Length\}\}\)
-
--   Parameters
-
-    <a name="table193606194544"></a>
-    <table><thead align="left"><tr id="row536071910541"><th class="cellrowborder" valign="top" width="15.47%" id="mcps1.1.6.1.1"><p id="p436112199544"><a name="p436112199544"></a><a name="p436112199544"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="17.22%" id="mcps1.1.6.1.2"><p id="p19361319115410"><a name="p19361319115410"></a><a name="p19361319115410"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.49%" id="mcps1.1.6.1.3"><p id="p9361201975417"><a name="p9361201975417"></a><a name="p9361201975417"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.6%" id="mcps1.1.6.1.4"><p id="p43611199542"><a name="p43611199542"></a><a name="p43611199542"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="36.22%" id="mcps1.1.6.1.5"><p id="p1136141975419"><a name="p1136141975419"></a><a name="p1136141975419"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row10361101915545"><td class="cellrowborder" valign="top" width="15.47%" headers="mcps1.1.6.1.1 "><p id="p1361119155417"><a name="p1361119155417"></a><a name="p1361119155417"></a>options</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.22%" headers="mcps1.1.6.1.2 "><p id="p8361181913548"><a name="p8361181913548"></a><a name="p8361181913548"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.49%" headers="mcps1.1.6.1.3 "><p id="p153611119195411"><a name="p153611119195411"></a><a name="p153611119195411"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.6%" headers="mcps1.1.6.1.4 "><p id="p1436114193546"><a name="p1436114193546"></a><a name="p1436114193546"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p328155017218"><a name="p328155017218"></a><a name="p328155017218"></a>For details, see the <a href="#li28952213507">options parameters</a>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li28952213507"></a>options parameters
-
-    <a name="table491262125020"></a>
-    <table><thead align="left"><tr id="row129111425500"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p99112212504"><a name="p99112212504"></a><a name="p99112212504"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.01%" id="mcps1.1.6.1.2"><p id="p1491112135015"><a name="p1491112135015"></a><a name="p1491112135015"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.499999999999998%" id="mcps1.1.6.1.3"><p id="p491152175017"><a name="p491152175017"></a><a name="p491152175017"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.170000000000002%" id="mcps1.1.6.1.4"><p id="p169118217502"><a name="p169118217502"></a><a name="p169118217502"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="42.21%" id="mcps1.1.6.1.5"><p id="p49117211504"><a name="p49117211504"></a><a name="p49117211504"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row191112165012"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p99115255014"><a name="p99115255014"></a><a name="p99115255014"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p169114218509"><a name="p169114218509"></a><a name="p169114218509"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p11911152135018"><a name="p11911152135018"></a><a name="p11911152135018"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p891110255019"><a name="p891110255019"></a><a name="p891110255019"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p1391113214504"><a name="p1391113214504"></a><a name="p1391113214504"></a>Width.</p>
-    </td>
-    </tr>
-    <tr id="row179124219504"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p691117214500"><a name="p691117214500"></a><a name="p691117214500"></a>height</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p391111265011"><a name="p391111265011"></a><a name="p391111265011"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p17911182135014"><a name="p17911182135014"></a><a name="p17911182135014"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p109114295014"><a name="p109114295014"></a><a name="p109114295014"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p1891232165015"><a name="p1891232165015"></a><a name="p1891232165015"></a>Height.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section2072419166493"></a>
-
-<a name="table108951213183716"></a>
-<table><thead align="left"><tr id="row14933131313373"><th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.1"><p id="p209331313163716"><a name="p209331313163716"></a><a name="p209331313163716"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="15.02%" id="mcps1.1.6.1.2"><p id="p3933113133719"><a name="p3933113133719"></a><a name="p3933113133719"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="11.39%" id="mcps1.1.6.1.3"><p id="p59331113113710"><a name="p59331113113710"></a><a name="p59331113113710"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="12.709999999999999%" id="mcps1.1.6.1.4"><p id="p1793351316378"><a name="p1793351316378"></a><a name="p1793351316378"></a>Mandatory</p>
-</th>
-<th class="cellrowborder" valign="top" width="40.88%" id="mcps1.1.6.1.5"><p id="p293311323720"><a name="p293311323720"></a><a name="p293311323720"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row2093341312372"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p9933313103716"><a name="p9933313103716"></a><a name="p9933313103716"></a>width</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.02%" headers="mcps1.1.6.1.2 "><p id="p393381311371"><a name="p393381311371"></a><a name="p393381311371"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.39%" headers="mcps1.1.6.1.3 "><p id="p3933171313373"><a name="p3933171313373"></a><a name="p3933171313373"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.709999999999999%" headers="mcps1.1.6.1.4 "><p id="p1393311138378"><a name="p1393311138378"></a><a name="p1393311138378"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="40.88%" headers="mcps1.1.6.1.5 "><p id="p1693311133379"><a name="p1693311133379"></a><a name="p1693311133379"></a>Width of the rectangle where the polygon is located.</p>
-</td>
-</tr>
-<tr id="row593341313711"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p3933181319375"><a name="p3933181319375"></a><a name="p3933181319375"></a>height</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.02%" headers="mcps1.1.6.1.2 "><p id="p89335131376"><a name="p89335131376"></a><a name="p89335131376"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.39%" headers="mcps1.1.6.1.3 "><p id="p293321319376"><a name="p293321319376"></a><a name="p293321319376"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.709999999999999%" headers="mcps1.1.6.1.4 "><p id="p1493361313374"><a name="p1493361313374"></a><a name="p1493361313374"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="40.88%" headers="mcps1.1.6.1.5 "><p id="p1933161363710"><a name="p1933161363710"></a><a name="p1933161363710"></a>Height of the rectangle where the polygon is located.</p>
-</td>
-</tr>
-<tr id="row6933151313374"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p193371323713"><a name="p193371323713"></a><a name="p193371323713"></a>points</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.02%" headers="mcps1.1.6.1.2 "><p id="p109331113103719"><a name="p109331113103719"></a><a name="p109331113103719"></a>Array&lt;Point&gt;</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.39%" headers="mcps1.1.6.1.3 "><p id="p99331613193715"><a name="p99331613193715"></a><a name="p99331613193715"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.709999999999999%" headers="mcps1.1.6.1.4 "><p id="p6933171316376"><a name="p6933171316376"></a><a name="p6933171316376"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="40.88%" headers="mcps1.1.6.1.5 "><p id="p10933161311378"><a name="p10933161311378"></a><a name="p10933161311378"></a>Vertex coordinates of the polygon.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section4459736105512"></a>
 
+## APIs
+
+Polygon(value:{options?: {width: Length, height: Length}})
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | options | Object | No | - | For&nbsp;details,&nbsp;see&nbsp;the&nbsp;**options**&nbsp;parameters. | 
+
+- options parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | width | Length | Yes | - | Width. | 
+  | height | Length | Yes | - | Height. | 
+
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Mandatory | Description | 
+| -------- | -------- | -------- | -------- | -------- |
+| width | Length | 0 | No | Width&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;polygon&nbsp;is&nbsp;located. | 
+| height | Length | 0 | No | Height&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;polygon&nbsp;is&nbsp;located. | 
+| points | Array&lt;Point&gt; | - | Yes | Vertex&nbsp;coordinates&nbsp;of&nbsp;the&nbsp;polygon. | 
+
+
+## Example
+
+  
 ```
 @Entry
 @Component
@@ -159,5 +65,4 @@ struct PolygonExample {
 }
 ```
 
-![](figures/polygon.gif)
-
+![en-us_image_0000001212218458](figures/en-us_image_0000001212218458.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
index d09da452bc117cb8041936f6c0d43278566a8155..ddffe533def58acca13e346c0a7be8a594c1141e 100644
--- a/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
+++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
@@ -1,145 +1,51 @@
-# Polyline<a name="EN-US_TOPIC_0000001192595150"></a>
+# Polyline
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Polyline\>**  component is used to draw a polyline.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section53281531154915"></a>
+
+The **&lt;Polyline&gt;** component is used to draw a polyline.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section29916914716"></a>
+
+## Child Components
 
 None
 
-## APIs<a name="section19864224475"></a>
-
-Polyline\(options?: \{width: Lenght, height: Length\}\)
-
--   Parameters
-
-    <a name="table193606194544"></a>
-    <table><thead align="left"><tr id="row536071910541"><th class="cellrowborder" valign="top" width="15.47%" id="mcps1.1.6.1.1"><p id="p436112199544"><a name="p436112199544"></a><a name="p436112199544"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="17.22%" id="mcps1.1.6.1.2"><p id="p19361319115410"><a name="p19361319115410"></a><a name="p19361319115410"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.49%" id="mcps1.1.6.1.3"><p id="p9361201975417"><a name="p9361201975417"></a><a name="p9361201975417"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.6%" id="mcps1.1.6.1.4"><p id="p43611199542"><a name="p43611199542"></a><a name="p43611199542"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="36.22%" id="mcps1.1.6.1.5"><p id="p1136141975419"><a name="p1136141975419"></a><a name="p1136141975419"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row10361101915545"><td class="cellrowborder" valign="top" width="15.47%" headers="mcps1.1.6.1.1 "><p id="p1361119155417"><a name="p1361119155417"></a><a name="p1361119155417"></a>options</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.22%" headers="mcps1.1.6.1.2 "><p id="p8361181913548"><a name="p8361181913548"></a><a name="p8361181913548"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.49%" headers="mcps1.1.6.1.3 "><p id="p153611119195411"><a name="p153611119195411"></a><a name="p153611119195411"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.6%" headers="mcps1.1.6.1.4 "><p id="p1436114193546"><a name="p1436114193546"></a><a name="p1436114193546"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p328155017218"><a name="p328155017218"></a><a name="p328155017218"></a>For details, see the <a href="#li67915428493">options parameters</a>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li67915428493"></a>options parameters
-
-    <a name="table180964214919"></a>
-    <table><thead align="left"><tr id="row980984284918"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p5808194218498"><a name="p5808194218498"></a><a name="p5808194218498"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.01%" id="mcps1.1.6.1.2"><p id="p138088424493"><a name="p138088424493"></a><a name="p138088424493"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.499999999999998%" id="mcps1.1.6.1.3"><p id="p1180915420491"><a name="p1180915420491"></a><a name="p1180915420491"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.170000000000002%" id="mcps1.1.6.1.4"><p id="p168091242154910"><a name="p168091242154910"></a><a name="p168091242154910"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="42.21%" id="mcps1.1.6.1.5"><p id="p15809442194914"><a name="p15809442194914"></a><a name="p15809442194914"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row148095424499"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p48092042184915"><a name="p48092042184915"></a><a name="p48092042184915"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p10809342174912"><a name="p10809342174912"></a><a name="p10809342174912"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p4809154211492"><a name="p4809154211492"></a><a name="p4809154211492"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p198093423492"><a name="p198093423492"></a><a name="p198093423492"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p1980919423499"><a name="p1980919423499"></a><a name="p1980919423499"></a>Width.</p>
-    </td>
-    </tr>
-    <tr id="row880916420497"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p8809942124916"><a name="p8809942124916"></a><a name="p8809942124916"></a>height</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p id="p1280934254916"><a name="p1280934254916"></a><a name="p1280934254916"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p id="p980934214497"><a name="p980934214497"></a><a name="p980934214497"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p118091642154910"><a name="p118091642154910"></a><a name="p118091642154910"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p1180916424498"><a name="p1180916424498"></a><a name="p1180916424498"></a>Height.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section1181110508478"></a>
-
-<a name="table17670173353614"></a>
-<table><thead align="left"><tr id="row870911333365"><th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.1"><p id="p17709933163616"><a name="p17709933163616"></a><a name="p17709933163616"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.2"><p id="p9709193383620"><a name="p9709193383620"></a><a name="p9709193383620"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.3"><p id="p19709143373619"><a name="p19709143373619"></a><a name="p19709143373619"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="16.12%" id="mcps1.1.6.1.4"><p id="p20709183316369"><a name="p20709183316369"></a><a name="p20709183316369"></a>Mandatory</p>
-</th>
-<th class="cellrowborder" valign="top" width="23.880000000000003%" id="mcps1.1.6.1.5"><p id="p1470911339367"><a name="p1470911339367"></a><a name="p1470911339367"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1770915332362"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p77091833143615"><a name="p77091833143615"></a><a name="p77091833143615"></a>width</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p17091933163610"><a name="p17091933163610"></a><a name="p17091933163610"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p177091433113610"><a name="p177091433113610"></a><a name="p177091433113610"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.12%" headers="mcps1.1.6.1.4 "><p id="p187091533133612"><a name="p187091533133612"></a><a name="p187091533133612"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.880000000000003%" headers="mcps1.1.6.1.5 "><p id="p77091033113617"><a name="p77091033113617"></a><a name="p77091033113617"></a>Width of the rectangle where the polyline is located.</p>
-</td>
-</tr>
-<tr id="row67091033133615"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p370993363620"><a name="p370993363620"></a><a name="p370993363620"></a>height</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p270943303619"><a name="p270943303619"></a><a name="p270943303619"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p6709113393613"><a name="p6709113393613"></a><a name="p6709113393613"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.12%" headers="mcps1.1.6.1.4 "><p id="p2070913318368"><a name="p2070913318368"></a><a name="p2070913318368"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.880000000000003%" headers="mcps1.1.6.1.5 "><p id="p1070920331362"><a name="p1070920331362"></a><a name="p1070920331362"></a>Height of the rectangle where the polyline is located.</p>
-</td>
-</tr>
-<tr id="row17091333143615"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p14709433173611"><a name="p14709433173611"></a><a name="p14709433173611"></a>points</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p57091933123612"><a name="p57091933123612"></a><a name="p57091933123612"></a>Array&lt;Point&gt;</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p370903363612"><a name="p370903363612"></a><a name="p370903363612"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.12%" headers="mcps1.1.6.1.4 "><p id="p670916335367"><a name="p670916335367"></a><a name="p670916335367"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.880000000000003%" headers="mcps1.1.6.1.5 "><p id="p8710133317366"><a name="p8710133317366"></a><a name="p8710133317366"></a>List of coordinates that the polyline passes through.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section4459736105512"></a>
 
+## APIs
+
+Polyline(options?: {width: Length, height: Length})
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | options | Object | No | - | For&nbsp;details,&nbsp;see&nbsp;the&nbsp;**options**&nbsp;parameters. | 
+
+- options parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | width | Length | Yes | - | Width. | 
+  | height | Length | Yes | - | Height. | 
+
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Mandatory | Description | 
+| -------- | -------- | -------- | -------- | -------- |
+| width | Length | 0 | No | Width&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;polyline&nbsp;is&nbsp;located. | 
+| height | Length | 0 | No | Height&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;polyline&nbsp;is&nbsp;located. | 
+| points | Array&lt;Point&gt; | - | Yes | List&nbsp;of&nbsp;coordinates&nbsp;that&nbsp;the&nbsp;polyline&nbsp;passes&nbsp;through. | 
+
+
+## Example
+
+  
 ```
 @Entry
 @Component
@@ -157,5 +63,4 @@ struct PolylineExample {
 }
 ```
 
-![](figures/polyline.gif)
-
+![en-us_image_0000001212218432](figures/en-us_image_0000001212218432.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
index 7a85738af04b856668d48b98baf6be2443378e92..561cd243b2ef3c64c5eda583de312cdd3e9954c5 100644
--- a/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
+++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
@@ -1,200 +1,56 @@
-# Rect<a name="EN-US_TOPIC_0000001192755114"></a>
+# Rect
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The  **<Rect\>**  component is used to draw a rectangle.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section53281531154915"></a>
+
+The **&lt;Rect&gt;** component is used to draw a rectangle.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section172855459342"></a>
+
+## Child Components
 
 None
 
-## APIs<a name="section6391804354"></a>
-
-Rect\(value:\{options?: \{width: Length,height: Length,radius?: Length | Array<Length\>\} | \{width: Length,height: Length,radiusWidth?: Length,radiusHeight?: Length\}\}\)
-
--   Parameters
-
-    <a name="table193606194544"></a>
-    <table><thead align="left"><tr id="row536071910541"><th class="cellrowborder" valign="top" width="15.47%" id="mcps1.1.6.1.1"><p id="p436112199544"><a name="p436112199544"></a><a name="p436112199544"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="17.22%" id="mcps1.1.6.1.2"><p id="p19361319115410"><a name="p19361319115410"></a><a name="p19361319115410"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.49%" id="mcps1.1.6.1.3"><p id="p9361201975417"><a name="p9361201975417"></a><a name="p9361201975417"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.6%" id="mcps1.1.6.1.4"><p id="p43611199542"><a name="p43611199542"></a><a name="p43611199542"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="36.22%" id="mcps1.1.6.1.5"><p id="p1136141975419"><a name="p1136141975419"></a><a name="p1136141975419"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row10361101915545"><td class="cellrowborder" valign="top" width="15.47%" headers="mcps1.1.6.1.1 "><p id="p1361119155417"><a name="p1361119155417"></a><a name="p1361119155417"></a>options</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.22%" headers="mcps1.1.6.1.2 "><p id="p8361181913548"><a name="p8361181913548"></a><a name="p8361181913548"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.49%" headers="mcps1.1.6.1.3 "><p id="p153611119195411"><a name="p153611119195411"></a><a name="p153611119195411"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.6%" headers="mcps1.1.6.1.4 "><p id="p1436114193546"><a name="p1436114193546"></a><a name="p1436114193546"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p328155017218"><a name="p328155017218"></a><a name="p328155017218"></a>For details, see the <a href="#li1258118431037">options parameters</a>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li1258118431037"></a>options parameters
-
-    <a name="table15611143934"></a>
-    <table><thead align="left"><tr id="row260916434313"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p16609194315313"><a name="p16609194315313"></a><a name="p16609194315313"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="19.36%" id="mcps1.1.6.1.2"><p id="p860916431334"><a name="p860916431334"></a><a name="p860916431334"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.15%" id="mcps1.1.6.1.3"><p id="p1860954313315"><a name="p1860954313315"></a><a name="p1860954313315"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.170000000000002%" id="mcps1.1.6.1.4"><p id="p560974313312"><a name="p560974313312"></a><a name="p560974313312"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="42.21%" id="mcps1.1.6.1.5"><p id="p13609643633"><a name="p13609643633"></a><a name="p13609643633"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row560915431434"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p116094431838"><a name="p116094431838"></a><a name="p116094431838"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.36%" headers="mcps1.1.6.1.2 "><p id="p460911431137"><a name="p460911431137"></a><a name="p460911431137"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.15%" headers="mcps1.1.6.1.3 "><p id="p96091143731"><a name="p96091143731"></a><a name="p96091143731"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p196092043732"><a name="p196092043732"></a><a name="p196092043732"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p106091431532"><a name="p106091431532"></a><a name="p106091431532"></a>Width.</p>
-    </td>
-    </tr>
-    <tr id="row5610443631"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p11610443534"><a name="p11610443534"></a><a name="p11610443534"></a>height</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.36%" headers="mcps1.1.6.1.2 "><p id="p1661014431231"><a name="p1661014431231"></a><a name="p1661014431231"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.15%" headers="mcps1.1.6.1.3 "><p id="p661094310316"><a name="p661094310316"></a><a name="p661094310316"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p19610124320316"><a name="p19610124320316"></a><a name="p19610124320316"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p1761013430316"><a name="p1761013430316"></a><a name="p1761013430316"></a>Height.</p>
-    </td>
-    </tr>
-    <tr id="row176101943938"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p176101843939"><a name="p176101843939"></a><a name="p176101843939"></a>radius</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.36%" headers="mcps1.1.6.1.2 "><p id="p1561084310318"><a name="p1561084310318"></a><a name="p1561084310318"></a>Length | Array&lt;Length&gt;</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.15%" headers="mcps1.1.6.1.3 "><p id="p86105431833"><a name="p86105431833"></a><a name="p86105431833"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p1061012431935"><a name="p1061012431935"></a><a name="p1061012431935"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p261044311313"><a name="p261044311313"></a><a name="p261044311313"></a>Radius of a rounded corner. You can set the radius of four rounded corners.</p>
-    </td>
-    </tr>
-    <tr id="row1161017431139"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p26108435317"><a name="p26108435317"></a><a name="p26108435317"></a>radiusWidth</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.36%" headers="mcps1.1.6.1.2 "><p id="p06102430310"><a name="p06102430310"></a><a name="p06102430310"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.15%" headers="mcps1.1.6.1.3 "><p id="p196106437315"><a name="p196106437315"></a><a name="p196106437315"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p1561020431336"><a name="p1561020431336"></a><a name="p1561020431336"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p15610134313316"><a name="p15610134313316"></a><a name="p15610134313316"></a>Width of the rounded corner.</p>
-    </td>
-    </tr>
-    <tr id="row126113436319"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p186101143439"><a name="p186101143439"></a><a name="p186101143439"></a>radiusHeight</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.36%" headers="mcps1.1.6.1.2 "><p id="p106101431736"><a name="p106101431736"></a><a name="p106101431736"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.15%" headers="mcps1.1.6.1.3 "><p id="p1761114317313"><a name="p1761114317313"></a><a name="p1761114317313"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p id="p1861115431133"><a name="p1861115431133"></a><a name="p1861115431133"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p id="p18611194310311"><a name="p18611194310311"></a><a name="p18611194310311"></a>Height of the rounded corner.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section208511436173518"></a>
-
-<a name="table1467195373113"></a>
-<table><thead align="left"><tr id="row474513536315"><th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.1"><p id="p2745185313112"><a name="p2745185313112"></a><a name="p2745185313112"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="22.009999999999998%" id="mcps1.1.6.1.2"><p id="p4745135303114"><a name="p4745135303114"></a><a name="p4745135303114"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="17.990000000000002%" id="mcps1.1.6.1.3"><p id="p13745553103118"><a name="p13745553103118"></a><a name="p13745553103118"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.4"><p id="p147451053173119"><a name="p147451053173119"></a><a name="p147451053173119"></a>Mandatory</p>
-</th>
-<th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.5"><p id="p19745165314312"><a name="p19745165314312"></a><a name="p19745165314312"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row074515531314"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p57451853193115"><a name="p57451853193115"></a><a name="p57451853193115"></a>width</p>
-</td>
-<td class="cellrowborder" valign="top" width="22.009999999999998%" headers="mcps1.1.6.1.2 "><p id="p197451553133113"><a name="p197451553133113"></a><a name="p197451553133113"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.990000000000002%" headers="mcps1.1.6.1.3 "><p id="p574575393113"><a name="p574575393113"></a><a name="p574575393113"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p874545343110"><a name="p874545343110"></a><a name="p874545343110"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p07451953183116"><a name="p07451953183116"></a><a name="p07451953183116"></a>Width.</p>
-</td>
-</tr>
-<tr id="row874518538313"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p474535311316"><a name="p474535311316"></a><a name="p474535311316"></a>height</p>
-</td>
-<td class="cellrowborder" valign="top" width="22.009999999999998%" headers="mcps1.1.6.1.2 "><p id="p2745185310316"><a name="p2745185310316"></a><a name="p2745185310316"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.990000000000002%" headers="mcps1.1.6.1.3 "><p id="p1974512538318"><a name="p1974512538318"></a><a name="p1974512538318"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p1674595373113"><a name="p1674595373113"></a><a name="p1674595373113"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p10745753183117"><a name="p10745753183117"></a><a name="p10745753183117"></a>Height.</p>
-</td>
-</tr>
-<tr id="row57451453143117"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p17745115312313"><a name="p17745115312313"></a><a name="p17745115312313"></a>radiusWidth</p>
-</td>
-<td class="cellrowborder" valign="top" width="22.009999999999998%" headers="mcps1.1.6.1.2 "><p id="p4745165319317"><a name="p4745165319317"></a><a name="p4745165319317"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.990000000000002%" headers="mcps1.1.6.1.3 "><p id="p14745165312316"><a name="p14745165312316"></a><a name="p14745165312316"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p874585313119"><a name="p874585313119"></a><a name="p874585313119"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p137451353153117"><a name="p137451353153117"></a><a name="p137451353153117"></a>Width of a rounded corner. The width and height are the same when only the width is set.</p>
-</td>
-</tr>
-<tr id="row1274555312314"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p9745135316315"><a name="p9745135316315"></a><a name="p9745135316315"></a>radiusHeight</p>
-</td>
-<td class="cellrowborder" valign="top" width="22.009999999999998%" headers="mcps1.1.6.1.2 "><p id="p1874515373114"><a name="p1874515373114"></a><a name="p1874515373114"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.990000000000002%" headers="mcps1.1.6.1.3 "><p id="p12745125320319"><a name="p12745125320319"></a><a name="p12745125320319"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p1174675303113"><a name="p1174675303113"></a><a name="p1174675303113"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p107461553183116"><a name="p107461553183116"></a><a name="p107461553183116"></a>Height of the rounded corner. The width and height are the same only when the height is set.</p>
-</td>
-</tr>
-<tr id="row127461253193113"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p174635313119"><a name="p174635313119"></a><a name="p174635313119"></a>radius</p>
-</td>
-<td class="cellrowborder" valign="top" width="22.009999999999998%" headers="mcps1.1.6.1.2 "><p id="p374675363112"><a name="p374675363112"></a><a name="p374675363112"></a>Length | Array&lt;Length&gt;</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.990000000000002%" headers="mcps1.1.6.1.3 "><p id="p574645353116"><a name="p574645353116"></a><a name="p574645353116"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p177461538317"><a name="p177461538317"></a><a name="p177461538317"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p1574685310314"><a name="p1574685310314"></a><a name="p1574685310314"></a>Size of the rounded corner.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section4459736105512"></a>
 
+## APIs
+
+Rect(value:{options?: {width: Length,height: Length,radius?: Length | Array&lt;Length&gt;} | {width: Length,height: Length,radiusWidth?: Length,radiusHeight?: Length}})
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | options | Object | No | - | For&nbsp;details,&nbsp;see&nbsp;the&nbsp;**options**&nbsp;parameters. | 
+
+- options parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | width | Length | Yes | - | Width. | 
+  | height | Length | Yes | - | Height. | 
+  | radius | Length&nbsp;\|&nbsp;Array&lt;Length&gt; | No | 0 | Radius&nbsp;of&nbsp;a&nbsp;rounded&nbsp;corner.&nbsp;You&nbsp;can&nbsp;set&nbsp;the&nbsp;radius&nbsp;of&nbsp;four&nbsp;rounded&nbsp;corners. | 
+  | radiusWidth | Length | No | 0 | Width&nbsp;of&nbsp;the&nbsp;rounded&nbsp;corner. | 
+  | radiusHeight | Length | No | 0 | Height&nbsp;of&nbsp;the&nbsp;rounded&nbsp;corner. | 
+
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Mandatory | Description | 
+| -------- | -------- | -------- | -------- | -------- |
+| width | Length | 0 | No | Width. | 
+| height | Length | 0 | No | Height. | 
+| radiusWidth | Length | 0 | No | Width&nbsp;of&nbsp;a&nbsp;rounded&nbsp;corner.&nbsp;The&nbsp;width&nbsp;and&nbsp;height&nbsp;are&nbsp;the&nbsp;same&nbsp;when&nbsp;only&nbsp;the&nbsp;width&nbsp;is&nbsp;set. | 
+| radiusHeight | Length | 0 | No | Height&nbsp;of&nbsp;the&nbsp;rounded&nbsp;corner.&nbsp;The&nbsp;width&nbsp;and&nbsp;height&nbsp;are&nbsp;the&nbsp;same&nbsp;only&nbsp;when&nbsp;the&nbsp;height&nbsp;is&nbsp;set. | 
+| radius | Length&nbsp;\|&nbsp;Array&lt;Length&gt; | 0 | No | Size&nbsp;of&nbsp;the&nbsp;rounded&nbsp;corner. | 
+
+
+## Example
+
+  
 ```
 @Entry
 @Component
@@ -217,5 +73,4 @@ struct RectExample {
 }
 ```
 
-![](figures/rect.png)
-
+![en-us_image_0000001212218454](figures/en-us_image_0000001212218454.png)
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 18ac993b3063e380357782c72ffceb34d41eceff..41a23559e400e413604e052acfa9497c5bfec812 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,230 +1,66 @@
-# Shape<a name="EN-US_TOPIC_0000001237555097"></a>
+# Shape
 
->![](../../public_sys-resources/icon-note.gif) **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.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-1. The drawing components use  **<Shape\>**  as the parent component to implement the effect similar to SVG.
 
-2. The  **<Shape\>**  component is used independently to draw a specific shape.
+The **&lt;Shape&gt;** component is the parent component of the drawing components. The attributes described in this topic are universal attributes supported by all the drawing components.
 
-## Required Permissions<a name="section53281531154915"></a>
+
+1. The drawing components use **&lt;Shape&gt;** as the parent component to implement the effect similar to SVG.
+
+
+2. The **&lt;Shape&gt;** component is used independently to draw a specific shape.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section5989144051714"></a>
 
-The  **<Shape\>**  component can contain child components.
+## Child Components
 
-## APIs<a name="section5143192918416"></a>
+The **&lt;Shape&gt;** component can contain child components.
 
-Shape\(value:\{target?: PixelMap\}\)
 
--   Parameters
+## APIs
 
-    <a name="table193606194544"></a>
-    <table><thead align="left"><tr id="row536071910541"><th class="cellrowborder" valign="top" width="15.47%" id="mcps1.1.6.1.1"><p id="p436112199544"><a name="p436112199544"></a><a name="p436112199544"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="17.22%" id="mcps1.1.6.1.2"><p id="p19361319115410"><a name="p19361319115410"></a><a name="p19361319115410"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.49%" id="mcps1.1.6.1.3"><p id="p9361201975417"><a name="p9361201975417"></a><a name="p9361201975417"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.6%" id="mcps1.1.6.1.4"><p id="p43611199542"><a name="p43611199542"></a><a name="p43611199542"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="36.22%" id="mcps1.1.6.1.5"><p id="p1136141975419"><a name="p1136141975419"></a><a name="p1136141975419"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row10361101915545"><td class="cellrowborder" valign="top" width="15.47%" headers="mcps1.1.6.1.1 "><p id="p1361119155417"><a name="p1361119155417"></a><a name="p1361119155417"></a>target</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.22%" headers="mcps1.1.6.1.2 "><p id="p8361181913548"><a name="p8361181913548"></a><a name="p8361181913548"></a>PixelMap</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.49%" headers="mcps1.1.6.1.3 "><p id="p153611119195411"><a name="p153611119195411"></a><a name="p153611119195411"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.6%" headers="mcps1.1.6.1.4 "><p id="p1436114193546"><a name="p1436114193546"></a><a name="p1436114193546"></a>null</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p328155017218"><a name="p328155017218"></a><a name="p328155017218"></a>Shape to draw. You can draw a shape in the specified <strong id="b6851058183320"><a name="b6851058183320"></a><a name="b6851058183320"></a>PixelMap</strong> object. If no object is specified, the shape is drawn in the current drawing target.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+Shape(value:{target?: PixelMap})
 
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | target | PixelMap | No | null | Shape&nbsp;to&nbsp;draw.&nbsp;You&nbsp;can&nbsp;draw&nbsp;a&nbsp;shape&nbsp;in&nbsp;the&nbsp;specified&nbsp;**PixelMap**&nbsp;object.&nbsp;If&nbsp;no&nbsp;object&nbsp;is&nbsp;specified,&nbsp;the&nbsp;shape&nbsp;is&nbsp;drawn&nbsp;in&nbsp;the&nbsp;current&nbsp;drawing&nbsp;target. | 
 
-## Attributes<a name="section922483920810"></a>
 
-<a name="table63801556917"></a>
-<table><thead align="left"><tr id="row123801259914"><th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.1"><p id="p143801852920"><a name="p143801852920"></a><a name="p143801852920"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.2"><p id="p538011511920"><a name="p538011511920"></a><a name="p538011511920"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.3"><p id="p138015518918"><a name="p138015518918"></a><a name="p138015518918"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.4"><p id="p1138018518911"><a name="p1138018518911"></a><a name="p1138018518911"></a>Mandatory</p>
-</th>
-<th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.5"><p id="p10380751296"><a name="p10380751296"></a><a name="p10380751296"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1638018512912"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p4380255916"><a name="p4380255916"></a><a name="p4380255916"></a>viewPort</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p111521037174418"><a name="p111521037174418"></a><a name="p111521037174418"></a>{</p>
-<p id="p896417384445"><a name="p896417384445"></a><a name="p896417384445"></a>x: Length,</p>
-<p id="p473118409447"><a name="p473118409447"></a><a name="p473118409447"></a>y: Length,</p>
-<p id="p105591743144417"><a name="p105591743144417"></a><a name="p105591743144417"></a>width: Length,</p>
-<p id="p5565104619447"><a name="p5565104619447"></a><a name="p5565104619447"></a>height: Length</p>
-<p id="p63801850913"><a name="p63801850913"></a><a name="p63801850913"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p238011519919"><a name="p238011519919"></a><a name="p238011519919"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p143801051392"><a name="p143801051392"></a><a name="p143801051392"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p73801159911"><a name="p73801159911"></a><a name="p73801159911"></a>View port of the shape.</p>
-</td>
-</tr>
-<tr id="row93801051192"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p11380258918"><a name="p11380258918"></a><a name="p11380258918"></a>fill</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p638019510914"><a name="p638019510914"></a><a name="p638019510914"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p238015517910"><a name="p238015517910"></a><a name="p238015517910"></a>Black</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p1380758914"><a name="p1380758914"></a><a name="p1380758914"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p1638014517919"><a name="p1638014517919"></a><a name="p1638014517919"></a>Fill color.</p>
-</td>
-</tr>
-<tr id="row838085692"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p53802051393"><a name="p53802051393"></a><a name="p53802051393"></a>stroke</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p2380351918"><a name="p2380351918"></a><a name="p2380351918"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p938114512919"><a name="p938114512919"></a><a name="p938114512919"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p13816516916"><a name="p13816516916"></a><a name="p13816516916"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p8381115194"><a name="p8381115194"></a><a name="p8381115194"></a>Stroke color.</p>
-</td>
-</tr>
-<tr id="row17381158910"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p538125294"><a name="p538125294"></a><a name="p538125294"></a>strokeDashArray</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p7381195594"><a name="p7381195594"></a><a name="p7381195594"></a>Array&lt;Length&gt;</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p19381125790"><a name="p19381125790"></a><a name="p19381125790"></a>[]</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p2381115892"><a name="p2381115892"></a><a name="p2381115892"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p83811851592"><a name="p83811851592"></a><a name="p83811851592"></a>Stroke dash.</p>
-</td>
-</tr>
-<tr id="row12381851197"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p1938114510911"><a name="p1938114510911"></a><a name="p1938114510911"></a>strokeDashOffset</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p6381653920"><a name="p6381653920"></a><a name="p6381653920"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p2381151893"><a name="p2381151893"></a><a name="p2381151893"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p93819515912"><a name="p93819515912"></a><a name="p93819515912"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p5381651191"><a name="p5381651191"></a><a name="p5381651191"></a>Offset of the start point for drawing the stroke.</p>
-</td>
-</tr>
-<tr id="row1338105290"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p13381251295"><a name="p13381251295"></a><a name="p13381251295"></a>strokeLineCap</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p19381851495"><a name="p19381851495"></a><a name="p19381851495"></a><a href="ts-appendix-enums.md#section549694781614">LineCapStyle</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p103811855916"><a name="p103811855916"></a><a name="p103811855916"></a>Butt</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p33811151597"><a name="p33811151597"></a><a name="p33811151597"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p538112518918"><a name="p538112518918"></a><a name="p538112518918"></a>Cap style of the stroke.</p>
-</td>
-</tr>
-<tr id="row173811751092"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p138175791"><a name="p138175791"></a><a name="p138175791"></a>strokeLineJoin</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p19381105390"><a name="p19381105390"></a><a name="p19381105390"></a><a href="#li0434521283">LineJoinStyle</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p153811351792"><a name="p153811351792"></a><a name="p153811351792"></a>Miter</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p9381150915"><a name="p9381150915"></a><a name="p9381150915"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p143811755916"><a name="p143811755916"></a><a name="p143811755916"></a>Join style of the stroke.</p>
-</td>
-</tr>
-<tr id="row14381125798"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p838112515920"><a name="p838112515920"></a><a name="p838112515920"></a>strokeMiterLimit</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p03816516912"><a name="p03816516912"></a><a name="p03816516912"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p33811451898"><a name="p33811451898"></a><a name="p33811451898"></a>4</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p138275092"><a name="p138275092"></a><a name="p138275092"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p93821959918"><a name="p93821959918"></a><a name="p93821959918"></a>Limit value when the sharp angle is drawn as a miter.</p>
-</td>
-</tr>
-<tr id="row33821156911"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p11382151194"><a name="p11382151194"></a><a name="p11382151194"></a>strokeOpacity</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p4382951910"><a name="p4382951910"></a><a name="p4382951910"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p14382051919"><a name="p14382051919"></a><a name="p14382051919"></a>1</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p15382105196"><a name="p15382105196"></a><a name="p15382105196"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p538214519913"><a name="p538214519913"></a><a name="p538214519913"></a>Stroke opacity.</p>
-</td>
-</tr>
-<tr id="row103821651294"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p63821151916"><a name="p63821151916"></a><a name="p63821151916"></a>strokeWidth</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p5382851599"><a name="p5382851599"></a><a name="p5382851599"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p138225393"><a name="p138225393"></a><a name="p138225393"></a>1</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p93821451199"><a name="p93821451199"></a><a name="p93821451199"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p1738215510917"><a name="p1738215510917"></a><a name="p1738215510917"></a>Stroke width.</p>
-</td>
-</tr>
-<tr id="row0382105693"><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p id="p11382854912"><a name="p11382854912"></a><a name="p11382854912"></a>antiAlias</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p id="p1538225494"><a name="p1538225494"></a><a name="p1538225494"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p id="p193825513911"><a name="p193825513911"></a><a name="p193825513911"></a>true</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.4 "><p id="p9382757911"><a name="p9382757911"></a><a name="p9382757911"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.5 "><p id="p638215590"><a name="p638215590"></a><a name="p638215590"></a>Whether anti-aliasing is enabled.</p>
-</td>
-</tr>
-</tbody>
-</table>
+## Attributes
 
--   <a name="li0434521283"></a>LineJoinStyle enums
+  | Name | Type | Default&nbsp;Value | Mandatory | Description | 
+| -------- | -------- | -------- | -------- | -------- |
+| viewPort | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length,<br/>width:&nbsp;Length,<br/>height:&nbsp;Length<br/>} | - | Yes | View&nbsp;port&nbsp;of&nbsp;the&nbsp;shape. | 
+| fill | Color | Black | No | Fill&nbsp;color. | 
+| stroke | Color | - | No | Stroke&nbsp;color. | 
+| strokeDashArray | Array&lt;Length&gt; | [] | No | Stroke&nbsp;dash. | 
+| strokeDashOffset | Length | 0 | No | Offset&nbsp;of&nbsp;the&nbsp;start&nbsp;point&nbsp;for&nbsp;drawing&nbsp;the&nbsp;stroke. | 
+| strokeLineCap | LineCapStyle | LineCapStyle.Butt | No | Cap&nbsp;style&nbsp;of&nbsp;the&nbsp;stroke. | 
+| strokeLineJoin | LineJoinStyle | LineJoinStyle.Miter | No | Join&nbsp;style&nbsp;of&nbsp;the&nbsp;stroke. | 
+| strokeMiterLimit | number | 4 | No | Limit&nbsp;value&nbsp;when&nbsp;the&nbsp;sharp&nbsp;angle&nbsp;is&nbsp;drawn&nbsp;as&nbsp;a&nbsp;miter. | 
+| strokeOpacity | number | 1 | No | Stroke&nbsp;opacity. | 
+| strokeWidth | Length | 1 | No | Stroke&nbsp;width. | 
+| antiAlias | boolean | true | No | Whether&nbsp;anti-aliasing&nbsp;is&nbsp;enabled. | 
 
-    <a name="table12144170154116"></a>
-    <table><thead align="left"><tr id="row1314430184118"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p1614414014416"><a name="p1614414014416"></a><a name="p1614414014416"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p1314415074113"><a name="p1314415074113"></a><a name="p1314415074113"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row61441505417"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p191443034117"><a name="p191443034117"></a><a name="p191443034117"></a>Bevel</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1173613315118"><a name="p1173613315118"></a><a name="p1173613315118"></a>Bevel is used to connect paths.</p>
-    </td>
-    </tr>
-    <tr id="row20144801418"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p17145110194110"><a name="p17145110194110"></a><a name="p17145110194110"></a>Miter</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p171454015415"><a name="p171454015415"></a><a name="p171454015415"></a>Miter is used to connect paths.</p>
-    </td>
-    </tr>
-    <tr id="row914570194112"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p714511012418"><a name="p714511012418"></a><a name="p714511012418"></a>Round</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p101451704415"><a name="p101451704415"></a><a name="p101451704415"></a>Round is used to connect paths.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+- LineJoinStyle enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Bevel | Bevel&nbsp;is&nbsp;used&nbsp;to&nbsp;connect&nbsp;paths. | 
+  | Miter | Miter&nbsp;is&nbsp;used&nbsp;to&nbsp;connect&nbsp;paths. | 
+  | Round | Round&nbsp;is&nbsp;used&nbsp;to&nbsp;connect&nbsp;paths. | 
 
 
-## Example<a name="section4459736105512"></a>
+## Example
 
+  
 ```
 @Entry
 @Component
@@ -287,5 +123,4 @@ struct ShapeExample {
 }
 ```
 
-![](figures/2-01.png)
-
+![en-us_image_0000001257058393](figures/en-us_image_0000001257058393.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components.md b/en/application-dev/reference/arkui-ts/ts-drawing-components.md
index 1f1eeac321fc01c4e0024b115b97584fc6dc1c39..853d7b3d98da24c39b5b057c1d254856d7df8352 100644
--- a/en/application-dev/reference/arkui-ts/ts-drawing-components.md
+++ b/en/application-dev/reference/arkui-ts/ts-drawing-components.md
@@ -1,19 +1,19 @@
-# Drawing Components<a name="EN-US_TOPIC_0000001192915088"></a>
+# Drawing Components
 
--   **[Circle](ts-drawing-components-circle.md)**  
 
--   **[Ellipse](ts-drawing-components-ellipse.md)**  
 
--   **[Line](ts-drawing-components-line.md)**  
+- **[Circle](ts-drawing-components-circle.md)**
 
--   **[Polyline](ts-drawing-components-polyline.md)**  
+- **[Ellipse](ts-drawing-components-ellipse.md)**
 
--   **[Polygon](ts-drawing-components-polygon.md)**  
+- **[Line](ts-drawing-components-line.md)**
 
--   **[Path](ts-drawing-components-path.md)**  
+- **[Polyline](ts-drawing-components-polyline.md)**
 
--   **[Rect](ts-drawing-components-rect.md)**  
+- **[Polygon](ts-drawing-components-polygon.md)**
 
--   **[Shape](ts-drawing-components-shape.md)**  
+- **[Path](ts-drawing-components-path.md)**
 
+- **[Rect](ts-drawing-components-rect.md)**
 
+- **[Shape](ts-drawing-components-shape.md)**
\ No newline at end of file
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 af5ab03d553bae49373b8c023c8d25855ff31da8..aa9f4e4009164f24843748c3eaa7fbdbb0721d86 100644
--- a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md
+++ b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md
@@ -1,116 +1,35 @@
-# Explicit Animation<a name="EN-US_TOPIC_0000001237355059"></a>
+# Explicit Animation
 
->![](../../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.
 
-<a name="table1895110111017"></a>
-<table><thead align="left"><tr id="row18957091013"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p78958041010"><a name="p78958041010"></a><a name="p78958041010"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p280mcpsimp"><a name="p280mcpsimp"></a><a name="p280mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1895900101"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p1189510011101"><a name="p1189510011101"></a><a name="p1189510011101"></a>animateTo(value: <a href="#section16458591411">AnimationOption</a>, event: ()=&gt; void) : void</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p2089520101014"><a name="p2089520101014"></a><a name="p2089520101014"></a>Provides a transition animation when the status changes due to the closure code.</p>
-<p id="p8778777144"><a name="p8778777144"></a><a name="p8778777144"></a><strong id="b03301943164511"><a name="b03301943164511"></a><a name="b03301943164511"></a>event</strong> specifies the closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function.</p>
-</td>
-</tr>
-</tbody>
-</table>
+> ![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.
 
-## AnimationOption Object<a name="section16458591411"></a>
+  | Name | Description | 
+| -------- | -------- |
+| animateTo(value:&nbsp;[AnimationOption](#animationoption-object),&nbsp;event:&nbsp;()=&gt;&nbsp;void)&nbsp;:&nbsp;void | Provides&nbsp;a&nbsp;transition&nbsp;animation&nbsp;when&nbsp;the&nbsp;status&nbsp;changes&nbsp;due&nbsp;to&nbsp;the&nbsp;closure&nbsp;code.<br/>**event**&nbsp;specifies&nbsp;the&nbsp;closure&nbsp;function&nbsp;that&nbsp;displays&nbsp;the&nbsp;dynamic&nbsp;effect.&nbsp;The&nbsp;system&nbsp;automatically&nbsp;inserts&nbsp;the&nbsp;transition&nbsp;animation&nbsp;if&nbsp;the&nbsp;status&nbsp;changes&nbsp;in&nbsp;the&nbsp;closure&nbsp;function. | 
 
--   Attributes
 
-    <a name="table2041216018129"></a>
-    <table><thead align="left"><tr id="row94129081216"><th class="cellrowborder" valign="top" width="17.681768176817684%" id="mcps1.1.5.1.1"><p id="p9412502127"><a name="p9412502127"></a><a name="p9412502127"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.01200120012001%" id="mcps1.1.5.1.2"><p id="p1141240201211"><a name="p1141240201211"></a><a name="p1141240201211"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.54205420542054%" id="mcps1.1.5.1.3"><p id="p8412180191210"><a name="p8412180191210"></a><a name="p8412180191210"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="41.76417641764177%" id="mcps1.1.5.1.4"><p id="p194133021216"><a name="p194133021216"></a><a name="p194133021216"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row16413130171215"><td class="cellrowborder" valign="top" width="17.681768176817684%" headers="mcps1.1.5.1.1 "><p id="p1041317001217"><a name="p1041317001217"></a><a name="p1041317001217"></a>duration</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.01200120012001%" headers="mcps1.1.5.1.2 "><p id="p1441316014121"><a name="p1441316014121"></a><a name="p1441316014121"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.54205420542054%" headers="mcps1.1.5.1.3 "><p id="p104136081218"><a name="p104136081218"></a><a name="p104136081218"></a>1000</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="41.76417641764177%" headers="mcps1.1.5.1.4 "><p id="p1641313051217"><a name="p1641313051217"></a><a name="p1641313051217"></a>Animation duration, in ms.</p>
-    </td>
-    </tr>
-    <tr id="row16413503127"><td class="cellrowborder" valign="top" width="17.681768176817684%" headers="mcps1.1.5.1.1 "><p id="p441370101211"><a name="p441370101211"></a><a name="p441370101211"></a>tempo</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.01200120012001%" headers="mcps1.1.5.1.2 "><p id="p13413140161214"><a name="p13413140161214"></a><a name="p13413140161214"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.54205420542054%" headers="mcps1.1.5.1.3 "><p id="p441380181215"><a name="p441380181215"></a><a name="p441380181215"></a>1.0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="41.76417641764177%" headers="mcps1.1.5.1.4 "><p id="p1541370191217"><a name="p1541370191217"></a><a name="p1541370191217"></a>Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value <strong id="b1410124904712"><a name="b1410124904712"></a><a name="b1410124904712"></a>0</strong> means that there is no animation.</p>
-    </td>
-    </tr>
-    <tr id="row741318019128"><td class="cellrowborder" valign="top" width="17.681768176817684%" headers="mcps1.1.5.1.1 "><p id="p134139081216"><a name="p134139081216"></a><a name="p134139081216"></a>curve</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.01200120012001%" headers="mcps1.1.5.1.2 "><p id="p1541319019126"><a name="p1541319019126"></a><a name="p1541319019126"></a>Curve | Curves</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.54205420542054%" headers="mcps1.1.5.1.3 "><p id="p4413150131213"><a name="p4413150131213"></a><a name="p4413150131213"></a>Linear</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="41.76417641764177%" headers="mcps1.1.5.1.4 "><p id="p16413009121"><a name="p16413009121"></a><a name="p16413009121"></a>Animation curve.</p>
-    </td>
-    </tr>
-    <tr id="row9413150101218"><td class="cellrowborder" valign="top" width="17.681768176817684%" headers="mcps1.1.5.1.1 "><p id="p24132041219"><a name="p24132041219"></a><a name="p24132041219"></a>delay</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.01200120012001%" headers="mcps1.1.5.1.2 "><p id="p15413507125"><a name="p15413507125"></a><a name="p15413507125"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.54205420542054%" headers="mcps1.1.5.1.3 "><p id="p1741360101213"><a name="p1741360101213"></a><a name="p1741360101213"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="41.76417641764177%" headers="mcps1.1.5.1.4 "><p id="p1641317041213"><a name="p1641317041213"></a><a name="p1641317041213"></a>Delay of animation playback, in ms. By default, the playback is not delayed.</p>
-    </td>
-    </tr>
-    <tr id="row1941313011121"><td class="cellrowborder" valign="top" width="17.681768176817684%" headers="mcps1.1.5.1.1 "><p id="p1741313071217"><a name="p1741313071217"></a><a name="p1741313071217"></a>iterations</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.01200120012001%" headers="mcps1.1.5.1.2 "><p id="p4413800123"><a name="p4413800123"></a><a name="p4413800123"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.54205420542054%" headers="mcps1.1.5.1.3 "><p id="p18413140101220"><a name="p18413140101220"></a><a name="p18413140101220"></a>1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="41.76417641764177%" headers="mcps1.1.5.1.4 "><p id="p041316011124"><a name="p041316011124"></a><a name="p041316011124"></a>Number of times that the animation is played. By default, the animation is played once. The value <strong id="b10559131454819"><a name="b10559131454819"></a><a name="b10559131454819"></a>-1</strong> indicates that the animation is played for an unlimited number of times.</p>
-    </td>
-    </tr>
-    <tr id="row84132010126"><td class="cellrowborder" valign="top" width="17.681768176817684%" headers="mcps1.1.5.1.1 "><p id="p14132016128"><a name="p14132016128"></a><a name="p14132016128"></a>playMode</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.01200120012001%" headers="mcps1.1.5.1.2 "><p id="p1741315011215"><a name="p1741315011215"></a><a name="p1741315011215"></a>PlayMode</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.54205420542054%" headers="mcps1.1.5.1.3 "><p id="p841310051211"><a name="p841310051211"></a><a name="p841310051211"></a>Normal</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="41.76417641764177%" headers="mcps1.1.5.1.4 "><p id="p124147011212"><a name="p124147011212"></a><a name="p124147011212"></a>Animation playback mode. By default, the animation is played from the beginning after the playback is complete.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+## AnimationOption Object
 
+- Attributes
+    | Name | Type | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- |
+  | duration | number | 1000 | Animation&nbsp;duration,&nbsp;in&nbsp;ms. | 
+  | tempo | number | 1.0 | Animation&nbsp;playback&nbsp;speed.&nbsp;A&nbsp;larger&nbsp;value&nbsp;indicates&nbsp;faster&nbsp;animation&nbsp;playback,&nbsp;and&nbsp;a&nbsp;smaller&nbsp;value&nbsp;indicates&nbsp;slower&nbsp;animation&nbsp;playback.&nbsp;The&nbsp;value&nbsp;**0**&nbsp;means&nbsp;that&nbsp;there&nbsp;is&nbsp;no&nbsp;animation. | 
+  | curve | Curve&nbsp;\|&nbsp;Curves | Linear | Animation&nbsp;curve. | 
+  | delay | number | 0 | Delay&nbsp;of&nbsp;animation&nbsp;playback,&nbsp;in&nbsp;ms.&nbsp;By&nbsp;default,&nbsp;the&nbsp;playback&nbsp;is&nbsp;not&nbsp;delayed. | 
+  | iterations | number | 1 | Number&nbsp;of&nbsp;times&nbsp;that&nbsp;the&nbsp;animation&nbsp;is&nbsp;played.&nbsp;By&nbsp;default,&nbsp;the&nbsp;animation&nbsp;is&nbsp;played&nbsp;once.&nbsp;The&nbsp;value&nbsp;**-1**&nbsp;indicates&nbsp;that&nbsp;the&nbsp;animation&nbsp;is&nbsp;played&nbsp;for&nbsp;an&nbsp;unlimited&nbsp;number&nbsp;of&nbsp;times. | 
+  | playMode | PlayMode | Normal | Animation&nbsp;playback&nbsp;mode.&nbsp;By&nbsp;default,&nbsp;the&nbsp;animation&nbsp;is&nbsp;played&nbsp;from&nbsp;the&nbsp;beginning&nbsp;after&nbsp;the&nbsp;playback&nbsp;is&nbsp;complete. | 
 
--   APIs
 
-    <a name="table268mcpsimp"></a>
-    <table><thead align="left"><tr id="row274mcpsimp"><th class="cellrowborder" valign="top" width="40.6%" id="mcps1.1.3.1.1"><p id="p276mcpsimp"><a name="p276mcpsimp"></a><a name="p276mcpsimp"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="59.4%" id="mcps1.1.3.1.2"><p id="p19746145373519"><a name="p19746145373519"></a><a name="p19746145373519"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row281mcpsimp"><td class="cellrowborder" valign="top" width="40.6%" headers="mcps1.1.3.1.1 "><p id="p283mcpsimp"><a name="p283mcpsimp"></a><a name="p283mcpsimp"></a>onFinish() =&gt; void</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="59.4%" headers="mcps1.1.3.1.2 "><p id="p287mcpsimp"><a name="p287mcpsimp"></a><a name="p287mcpsimp"></a>Callback invoked when the animation playback is complete.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+- APIs
+    | Name | Description | 
+  | -------- | -------- |
+  | onFinish()&nbsp;=&gt;&nbsp;void | Callback&nbsp;invoked&nbsp;when&nbsp;the&nbsp;animation&nbsp;playback&nbsp;is&nbsp;complete. | 
 
 
-## Example<a name="section1768142514453"></a>
+## Example
+
 
 ```
 @Entry
@@ -165,5 +84,4 @@ struct AnimateToExample {
 }
 ```
 
-![](figures/animateto.gif)
-
+![en-us_image_0000001256978345](figures/en-us_image_0000001256978345.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-gesture-processing.md b/en/application-dev/reference/arkui-ts/ts-gesture-processing.md
index cd8880a63e51c155ee5a9f4b3945fa843d127cd1..e40e024a5d750d9992a1ef7ba60f0d307b6c7d89 100644
--- a/en/application-dev/reference/arkui-ts/ts-gesture-processing.md
+++ b/en/application-dev/reference/arkui-ts/ts-gesture-processing.md
@@ -1,9 +1,9 @@
-# Gesture Processing<a name="EN-US_TOPIC_0000001192595144"></a>
+# Gesture Processing
 
--   **[Gesture Binding Methods](ts-gesture-settings.md)**  
 
--   **[Basic Gestures](ts-basic-gestures.md)**  
 
--   **[Combined Gestures](ts-combined-gestures.md)**  
+- **[Combined Gestures](ts-combined-gestures.md)**
 
+- **[Gesture Binding Methods](ts-gesture-settings.md)**
 
+- **[Basic Gestures](ts-basic-gestures.md)**
\ No newline at end of file
diff --git a/en/application-dev/reference/arkui-ts/ts-gesture-settings.md b/en/application-dev/reference/arkui-ts/ts-gesture-settings.md
index 40503a4845c5fbbf44d9017ae8d58489e1a7c90f..c467540f76faf3cd350a8dbbd7c96c086b72f1e4 100644
--- a/en/application-dev/reference/arkui-ts/ts-gesture-settings.md
+++ b/en/application-dev/reference/arkui-ts/ts-gesture-settings.md
@@ -1,190 +1,64 @@
-# Gesture Binding Methods<a name="EN-US_TOPIC_0000001237555115"></a>
+# Gesture Binding Methods
 
->![](../../public_sys-resources/icon-note.gif) **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<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## Binding Gesture Recognition<a name="section42396384106"></a>
-
-You can use the following attributes to bind gesture recognition to a component. When a gesture is recognized, the event callback is invoked to notify the component.
-
-<a name="table944614112104"></a>
-<table><thead align="left"><tr id="row204461811161015"><th class="cellrowborder" valign="top" width="18.108189181081894%" id="mcps1.1.5.1.1"><p id="p1644631116106"><a name="p1644631116106"></a><a name="p1644631116106"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="20.73792620737926%" id="mcps1.1.5.1.2"><p id="p1544681113104"><a name="p1544681113104"></a><a name="p1544681113104"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="22.617738226177384%" id="mcps1.1.5.1.3"><p id="p54461011181010"><a name="p54461011181010"></a><a name="p54461011181010"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="38.53614638536146%" id="mcps1.1.5.1.4"><p id="p164461211111011"><a name="p164461211111011"></a><a name="p164461211111011"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row17446171141018"><td class="cellrowborder" valign="top" width="18.108189181081894%" headers="mcps1.1.5.1.1 "><p id="p1344631141011"><a name="p1344631141011"></a><a name="p1344631141011"></a>gesture</p>
-</td>
-<td class="cellrowborder" valign="top" width="20.73792620737926%" headers="mcps1.1.5.1.2 "><p id="p1957911339347"><a name="p1957911339347"></a><a name="p1957911339347"></a>gesture: <a href="#li13550165717410">GestureType</a>,</p>
-<p id="p54461311191019"><a name="p54461311191019"></a><a name="p54461311191019"></a>mask?: <a href="#li05419551143">GestureMask</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="22.617738226177384%" headers="mcps1.1.5.1.3 "><p id="p1845118520402"><a name="p1845118520402"></a><a name="p1845118520402"></a>gesture: -,</p>
-<p id="p8347175974014"><a name="p8347175974014"></a><a name="p8347175974014"></a>mask: GestureMask.Normal</p>
-</td>
-<td class="cellrowborder" valign="top" width="38.53614638536146%" headers="mcps1.1.5.1.4 "><p id="p5568132704814"><a name="p5568132704814"></a><a name="p5568132704814"></a>Gesture to recognize.</p>
-<p id="p104469114109"><a name="p104469114109"></a><a name="p104469114109"></a><strong id="b29691964247"><a name="b29691964247"></a><a name="b29691964247"></a>gesture</strong> specifies the type of the gesture to bind, and <strong id="b12623173132414"><a name="b12623173132414"></a><a name="b12623173132414"></a>mask</strong> specifies the event response setting.</p>
-</td>
-</tr>
-<tr id="row2061211295910"><td class="cellrowborder" valign="top" width="18.108189181081894%" headers="mcps1.1.5.1.1 "><p id="p66131425594"><a name="p66131425594"></a><a name="p66131425594"></a>priorityGesture</p>
-</td>
-<td class="cellrowborder" valign="top" width="20.73792620737926%" headers="mcps1.1.5.1.2 "><p id="p26211539358"><a name="p26211539358"></a><a name="p26211539358"></a>gesture: <a href="#li13550165717410">GestureType</a>,</p>
-<p id="p206215394516"><a name="p206215394516"></a><a name="p206215394516"></a>mask?: <a href="#li05419551143">GestureMask</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="22.617738226177384%" headers="mcps1.1.5.1.3 "><p id="p18613202165915"><a name="p18613202165915"></a><a name="p18613202165915"></a>gesture: -,</p>
-<p id="p17988104110418"><a name="p17988104110418"></a><a name="p17988104110418"></a>mask: GestureMask.Normal</p>
-</td>
-<td class="cellrowborder" valign="top" width="38.53614638536146%" headers="mcps1.1.5.1.4 "><p id="p96137210592"><a name="p96137210592"></a><a name="p96137210592"></a>Gesture to preferentially recognize.</p>
-<p id="p1019519536483"><a name="p1019519536483"></a><a name="p1019519536483"></a><strong id="b12945130172510"><a name="b12945130172510"></a><a name="b12945130172510"></a>gesture</strong> specifies the type of the gesture to bind, and <strong id="b19464062514"><a name="b19464062514"></a><a name="b19464062514"></a>mask</strong> specifies the event response setting.</p>
-<div class="note" id="note18517313410"><a name="note18517313410"></a><a name="note18517313410"></a><span class="notetitle"> NOTE: </span><div class="notebody"><a name="ul109190774114"></a><a name="ul109190774114"></a><ul id="ul109190774114"><li>By default, the child component takes precedence over the parent component in gesture recognition. When <strong id="b398919252137"><a name="b398919252137"></a><a name="b398919252137"></a>priorityGesture</strong> is configured for the parent component, the parent component takes precedence over the child component in gesture recognition.</li></ul>
-</div></div>
-</td>
-</tr>
-<tr id="row158353605910"><td class="cellrowborder" valign="top" width="18.108189181081894%" headers="mcps1.1.5.1.1 "><p id="p68362655916"><a name="p68362655916"></a><a name="p68362655916"></a>parallelGesture</p>
-</td>
-<td class="cellrowborder" valign="top" width="20.73792620737926%" headers="mcps1.1.5.1.2 "><p id="p11190743358"><a name="p11190743358"></a><a name="p11190743358"></a>gesture: <a href="#li13550165717410">GestureType</a>,</p>
-<p id="p11904431950"><a name="p11904431950"></a><a name="p11904431950"></a>mask?: <a href="#li05419551143">GestureMask</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="22.617738226177384%" headers="mcps1.1.5.1.3 "><p id="p117241409423"><a name="p117241409423"></a><a name="p117241409423"></a>gesture: -,</p>
-<p id="p197248054214"><a name="p197248054214"></a><a name="p197248054214"></a>mask: GestureMask.Normal</p>
-</td>
-<td class="cellrowborder" valign="top" width="38.53614638536146%" headers="mcps1.1.5.1.4 "><p id="p11836196155911"><a name="p11836196155911"></a><a name="p11836196155911"></a>Gesture that can be triggered together with the child component gesture.</p>
-<p id="p201145816486"><a name="p201145816486"></a><a name="p201145816486"></a><strong id="b59522001251"><a name="b59522001251"></a><a name="b59522001251"></a>gesture</strong> specifies the type of the gesture to bind, and <strong id="b149527013255"><a name="b149527013255"></a><a name="b149527013255"></a>mask</strong> specifies the event response setting.</p>
-<div class="note" id="note1488211815428"><a name="note1488211815428"></a><a name="note1488211815428"></a><span class="notetitle"> NOTE: </span><div class="notebody"><a name="ul13442131918420"></a><a name="ul13442131918420"></a><ul id="ul13442131918420"><li>The gesture event is not a bubbling event. When <strong id="b1828153091416"><a name="b1828153091416"></a><a name="b1828153091416"></a>parallelGesture</strong> is set for the parent component, gesture events that are the same for the parent component and child components can be triggered, thereby implementing a bubbling effect.</li></ul>
-</div></div>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li05419551143"></a>GestureMask enums
-
-    <a name="table3452114216394"></a>
-    <table><thead align="left"><tr id="row245219426397"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p545244283914"><a name="p545244283914"></a><a name="p545244283914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p2452114203917"><a name="p2452114203917"></a><a name="p2452114203917"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6452144218390"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p34529427398"><a name="p34529427398"></a><a name="p34529427398"></a>Normal</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p175862510368"><a name="p175862510368"></a><a name="p175862510368"></a>The gestures of child components are not masked and are recognized based on the default gesture recognition sequence.</p>
-    </td>
-    </tr>
-    <tr id="row12452184217398"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p54523425398"><a name="p54523425398"></a><a name="p54523425398"></a>IgnoreInternal</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p745215426391"><a name="p745215426391"></a><a name="p745215426391"></a>The gestures of child components are masked. Only the gestures of the current component are recognized.</p>
-    <div class="note" id="note498994724413"><a name="note498994724413"></a><a name="note498994724413"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p7133719163415"><a name="p7133719163415"></a><a name="p7133719163415"></a>However, the built-in gestures of the child components are not masked. For example, when the child component is a <strong id="b15749201120175"><a name="b15749201120175"></a><a name="b15749201120175"></a>&lt;List&gt;</strong> component, the built-in sliding gestures can still be triggered.</p>
-    </div></div>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   <a name="li13550165717410"></a>Gesture types
-
-    <a name="table5827185910217"></a>
-    <table><thead align="left"><tr id="row128271591226"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p8828115918216"><a name="p8828115918216"></a><a name="p8828115918216"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p17828959023"><a name="p17828959023"></a><a name="p17828959023"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row88284591024"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p118281599217"><a name="p118281599217"></a><a name="p118281599217"></a>TapGesture</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1182818591217"><a name="p1182818591217"></a><a name="p1182818591217"></a>Tap gesture, which can be a single-tap or multi-tap gesture.</p>
-    </td>
-    </tr>
-    <tr id="row682819591217"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p8828959826"><a name="p8828959826"></a><a name="p8828959826"></a>LongPressGesture</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1182895915212"><a name="p1182895915212"></a><a name="p1182895915212"></a>Long press gesture.</p>
-    </td>
-    </tr>
-    <tr id="row9452134213392"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p510719111403"><a name="p510719111403"></a><a name="p510719111403"></a>PanGesture</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p154533425394"><a name="p154533425394"></a><a name="p154533425394"></a>Pan gesture.</p>
-    </td>
-    </tr>
-    <tr id="row1345313424399"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1766215124010"><a name="p1766215124010"></a><a name="p1766215124010"></a>PinchGesture</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245319426394"><a name="p1245319426394"></a><a name="p1245319426394"></a>Pinch gesture.</p>
-    </td>
-    </tr>
-    <tr id="row98471941249"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p984715411248"><a name="p984715411248"></a><a name="p984715411248"></a>RotationGesture</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p20847741744"><a name="p20847741744"></a><a name="p20847741744"></a>Rotation gesture.</p>
-    </td>
-    </tr>
-    <tr id="row7930351148"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p89306517410"><a name="p89306517410"></a><a name="p89306517410"></a>GestureGroup</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p17930251442"><a name="p17930251442"></a><a name="p17930251442"></a>A group of gestures. Continuous recognition, parallel recognition, and exclusive recognition are supported.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Gesture Response Event<a name="section13681164710593"></a>
-
-The component uses the  **gesture**  method to bind the gesture object and uses the events provided in this object to respond to the gesture operation. For example, the  **onAction**  event of the  **TapGesture**  object can be used to respond to a click event. For details about the event definition, see the section of each gesture object.
-
--   TapGesture events
-
-    <a name="table135406579437"></a>
-    <table><thead align="left"><tr id="row1154015719436"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p85411457184316"><a name="p85411457184316"></a><a name="p85411457184316"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p5541457194319"><a name="p5541457194319"></a><a name="p5541457194319"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row4541257114319"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p5541357194313"><a name="p5541357194313"></a><a name="p5541357194313"></a>onAction((event?: <a href="#li209321550192419">GestureEvent</a>) =&gt; void)</p>
-    </td>
-    <td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p11541155710434"><a name="p11541155710434"></a><a name="p11541155710434"></a>Callback invoked when a tap gesture is recognized.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   <a name="li209321550192419"></a>GestureEvent attributes
-
-    <a name="table290mcpsimp"></a>
-    <table><thead align="left"><tr id="row296mcpsimp"><th class="cellrowborder" valign="top" width="20.09%" id="mcps1.1.4.1.1"><p id="p298mcpsimp"><a name="p298mcpsimp"></a><a name="p298mcpsimp"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.41%" id="mcps1.1.4.1.2"><p id="p300mcpsimp"><a name="p300mcpsimp"></a><a name="p300mcpsimp"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.5%" id="mcps1.1.4.1.3"><p id="p302mcpsimp"><a name="p302mcpsimp"></a><a name="p302mcpsimp"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1194611133620"><td class="cellrowborder" valign="top" width="20.09%" headers="mcps1.1.4.1.1 "><p id="p1619501111361"><a name="p1619501111361"></a><a name="p1619501111361"></a>timestamp</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.41%" headers="mcps1.1.4.1.2 "><p id="p5195161119368"><a name="p5195161119368"></a><a name="p5195161119368"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.5%" headers="mcps1.1.4.1.3 "><p id="p171951211103611"><a name="p171951211103611"></a><a name="p171951211103611"></a>Timestamp of the event.</p>
-    </td>
-    </tr>
-    <tr id="row172883835616"><td class="cellrowborder" valign="top" width="20.09%" headers="mcps1.1.4.1.1 "><p id="p142883855619"><a name="p142883855619"></a><a name="p142883855619"></a>target<sup id="sup64431218143812"><a name="sup64431218143812"></a><a name="sup64431218143812"></a>8+</sup></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.41%" headers="mcps1.1.4.1.2 "><p id="p1729193845612"><a name="p1729193845612"></a><a name="p1729193845612"></a><a href="ts-universal-events-click.md#li552912253714">EventTarget</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.5%" headers="mcps1.1.4.1.3 "><p id="p122913385561"><a name="p122913385561"></a><a name="p122913385561"></a>Object that triggers the gesture event.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section5447171181015"></a>
+
+## Binding Gesture Recognition
+
+
+Use the following attributes to bind gesture recognition to a component. When a gesture is recognized, the event callback is invoked to notify the component.
+
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| gesture | gesture:&nbsp;GestureType,<br/>mask?:&nbsp;GestureMask | gesture:&nbsp;-,<br/>mask:&nbsp;GestureMask.Normal | Gesture&nbsp;to&nbsp;recognize.<br/>**gesture**&nbsp;specifies&nbsp;the&nbsp;type&nbsp;of&nbsp;the&nbsp;gesture&nbsp;to&nbsp;bind,&nbsp;and&nbsp;**mask**&nbsp;specifies&nbsp;the&nbsp;event&nbsp;response&nbsp;setting. | 
+| priorityGesture | gesture:&nbsp;GestureType,<br/>mask?:&nbsp;GestureMask | gesture:&nbsp;-,<br/>mask:&nbsp;GestureMask.Normal | Gesture&nbsp;to&nbsp;preferentially&nbsp;recognize.<br/>**gesture**&nbsp;specifies&nbsp;the&nbsp;type&nbsp;of&nbsp;the&nbsp;gesture&nbsp;to&nbsp;bind,&nbsp;and&nbsp;**mask**&nbsp;specifies&nbsp;the&nbsp;event&nbsp;response&nbsp;setting.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;-&nbsp;By&nbsp;default,&nbsp;the&nbsp;child&nbsp;component&nbsp;takes&nbsp;precedence&nbsp;over&nbsp;the&nbsp;parent&nbsp;component&nbsp;in&nbsp;gesture&nbsp;recognition.&nbsp;When&nbsp;**priorityGesture**&nbsp;is&nbsp;configured&nbsp;for&nbsp;the&nbsp;parent&nbsp;component,&nbsp;the&nbsp;parent&nbsp;component&nbsp;takes&nbsp;precedence&nbsp;over&nbsp;the&nbsp;child&nbsp;component&nbsp;in&nbsp;gesture&nbsp;recognition. | 
+| parallelGesture | gesture:&nbsp;GestureType,<br/>mask?:&nbsp;GestureMask | gesture:&nbsp;-,<br/>mask:&nbsp;GestureMask.Normal | Gesture&nbsp;that&nbsp;can&nbsp;be&nbsp;triggered&nbsp;together&nbsp;with&nbsp;the&nbsp;child&nbsp;component&nbsp;gesture.<br/>**gesture**&nbsp;specifies&nbsp;the&nbsp;type&nbsp;of&nbsp;the&nbsp;gesture&nbsp;to&nbsp;bind,&nbsp;and&nbsp;**mask**&nbsp;specifies&nbsp;the&nbsp;event&nbsp;response&nbsp;setting.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;-&nbsp;The&nbsp;gesture&nbsp;event&nbsp;is&nbsp;not&nbsp;a&nbsp;bubbling&nbsp;event.&nbsp;When&nbsp;**parallelGesture**&nbsp;is&nbsp;set&nbsp;for&nbsp;the&nbsp;parent&nbsp;component,&nbsp;gesture&nbsp;events&nbsp;that&nbsp;are&nbsp;the&nbsp;same&nbsp;for&nbsp;the&nbsp;parent&nbsp;component&nbsp;and&nbsp;child&nbsp;components&nbsp;can&nbsp;be&nbsp;triggered,&nbsp;thereby&nbsp;implementing&nbsp;a&nbsp;bubbling&nbsp;effect. | 
+
+
+- GestureMask enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Normal | The&nbsp;gestures&nbsp;of&nbsp;child&nbsp;components&nbsp;are&nbsp;not&nbsp;masked&nbsp;and&nbsp;are&nbsp;recognized&nbsp;based&nbsp;on&nbsp;the&nbsp;default&nbsp;gesture&nbsp;recognition&nbsp;sequence. | 
+  | IgnoreInternal | The&nbsp;gestures&nbsp;of&nbsp;child&nbsp;components&nbsp;are&nbsp;masked.&nbsp;Only&nbsp;the&nbsp;gestures&nbsp;of&nbsp;the&nbsp;current&nbsp;component&nbsp;are&nbsp;recognized.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;However,&nbsp;the&nbsp;built-in&nbsp;gestures&nbsp;of&nbsp;the&nbsp;child&nbsp;components&nbsp;are&nbsp;not&nbsp;masked.&nbsp;For&nbsp;example,&nbsp;when&nbsp;the&nbsp;child&nbsp;component&nbsp;is&nbsp;a&nbsp;**&lt;List&gt;**&nbsp;component,&nbsp;the&nbsp;built-in&nbsp;sliding&nbsp;gestures&nbsp;can&nbsp;still&nbsp;be&nbsp;triggered. | 
+
+
+- Gesture types
+    | Name | Description | 
+  | -------- | -------- |
+  | TapGesture | Tap&nbsp;gesture,&nbsp;which&nbsp;can&nbsp;be&nbsp;a&nbsp;single-tap&nbsp;or&nbsp;multi-tap&nbsp;gesture. | 
+  | LongPressGesture | Long&nbsp;press&nbsp;gesture. | 
+  | PanGesture | Pan&nbsp;gesture. | 
+  | PinchGesture | Pinch&nbsp;gesture. | 
+  | RotationGesture | Rotation&nbsp;gesture. | 
+  | GestureGroup | A&nbsp;group&nbsp;of&nbsp;gestures.&nbsp;Continuous&nbsp;recognition,&nbsp;parallel&nbsp;recognition,&nbsp;and&nbsp;exclusive&nbsp;recognition&nbsp;are&nbsp;supported. | 
+
+
+## Gesture Response Event
+
+The component uses the **gesture** method to bind the gesture object and uses the events provided in this object to respond to the gesture operation. For example, the **onAction** event of the **TapGesture** object can be used to respond to a click event. For details about the event definition, see the section of each gesture object.
+
+- TapGesture events
+    | Name | Description | 
+  | -------- | -------- |
+  | onAction((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;tap&nbsp;gesture&nbsp;is&nbsp;recognized. | 
+
+- GestureEvent attributes
+    | Name | Type | Description | 
+  | -------- | -------- | -------- |
+  | timestamp | number | Timestamp&nbsp;of&nbsp;the&nbsp;event. | 
+  | target<sup>8+</sup> | EventTarget | Object&nbsp;that&nbsp;triggers&nbsp;the&nbsp;gesture&nbsp;event. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -206,9 +80,9 @@ struct GestureSettingsExample {
       .priorityGesture(
       TapGesture()
         .onAction((event: GestureEvent) => {
-this.value = 'priorityGesture onAction' + '\ncomponent globalPos: ('
-          + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + '）\nwidth:'
-          + event.target.area.width + '\nheight：' + event.target.area.height
+          this.value = 'priorityGesture onAction' + '\ncomponent globalPos:('
+          + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\nwidth:'
+          + event.target.area.width + '\nheight:' + event.target.area.height
         }), GestureMask.IgnoreInternal
       )
     }.padding(60)
@@ -216,5 +90,4 @@ this.value = 'priorityGesture onAction' + '\ncomponent globalPos: ('
 }
 ```
 
-![](figures/en-us_image_0000001237475107.gif)
-
+![en-us_image_0000001256858411](figures/en-us_image_0000001256858411.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-global-ui-methods.md b/en/application-dev/reference/arkui-ts/ts-global-ui-methods.md
index 7bcfd801bfc0c25f3298744af98ea48c9b8f08cb..a05ce685b9ef70da6dec82b0f3a5300a4bcd9e65 100644
--- a/en/application-dev/reference/arkui-ts/ts-global-ui-methods.md
+++ b/en/application-dev/reference/arkui-ts/ts-global-ui-methods.md
@@ -1,13 +1,9 @@
-# Global UI Methods<a name="EN-US_TOPIC_0000001237475047"></a>
+# Global UI Methods
 
--   **[Alert Dialog Box](ts-methods-alert-dialog-box.md)**  
 
--   **[Custom Dialog box](ts-methods-custom-dialog-box.md)**  
 
--   **[Image Cache](ts-methods-image-cache.md)**  
-
--   **[Media Query](ts-methods-media-query.md)**  
-
--   **[List Selection Dialog Box](ts-methods-custom-actionsheet.md)**  
+- **[Image Cache](ts-methods-image-cache.md)**
 
+- **[Media Query](ts-methods-media-query.md)**
 
+- **[Pop-up Window](ts-methods-popup-window.md)**
\ No newline at end of file
diff --git a/en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md b/en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md
index c4e369acb641c891c4440217e55aedfd6909f0c7..11443bfc54db26d3fafef85fb3713b7a9457f36d 100644
--- a/en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md
+++ b/en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md
@@ -1,237 +1,101 @@
-# Interpolation Calculation<a name="EN-US_TOPIC_0000001237475061"></a>
+# Interpolation Calculation
 
->![](../../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.
 
-## Modules to Import<a name="section377963175114"></a>
+> ![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.
 
+
+## Modules to Import
+
+  
 ```
 import curves from '@ohos.curves'
 ```
 
-## Required Permissions<a name="section1455919446525"></a>
+
+## Required Permissions
 
 None
 
-## curves.init<a name="section10551016104218"></a>
 
-init\(curve?: Curve\): Object
+## curves.init
+
+init(curve?: Curve): Object
+
 
 Implements initialization for the interpolation curve, which is used to create an interpolation curve object based on the input parameter.
 
--   Parameters
-
-    <a name="table69661135912"></a>
-    <table><thead align="left"><tr id="row149668318915"><th class="cellrowborder" valign="top" width="13.71%" id="mcps1.1.6.1.1"><p id="p7966738914"><a name="p7966738914"></a><a name="p7966738914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.62%" id="mcps1.1.6.1.2"><p id="p296713699"><a name="p296713699"></a><a name="p296713699"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="8.469999999999999%" id="mcps1.1.6.1.3"><p id="p196718315911"><a name="p196718315911"></a><a name="p196718315911"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="p02881223125210"><a name="p02881223125210"></a><a name="p02881223125210"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="56.68%" id="mcps1.1.6.1.5"><p id="p9967231197"><a name="p9967231197"></a><a name="p9967231197"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row18967831393"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p39671131590"><a name="p39671131590"></a><a name="p39671131590"></a>curve</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p126051952172518"><a name="p126051952172518"></a><a name="p126051952172518"></a>Curve</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p149671932919"><a name="p149671932919"></a><a name="p149671932919"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p528813237529"><a name="p528813237529"></a><a name="p528813237529"></a>Linear</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.68%" headers="mcps1.1.6.1.5 "><p id="p168155166474"><a name="p168155166474"></a><a name="p168155166474"></a>Curve object.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Return values
-
-    Curve object.
-
-
-## curves.steps<a name="section14558238104310"></a>
-
-steps\(count: number, end: boolean\): Object
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | curve | Curve | No | Linear | Curve&nbsp;object. | 
+
+- Return values
+  Curve object.
+
+
+## curves.steps
+
+steps(count: number, end: boolean): Object
+
 
 Constructs a step curve object.
 
--   Parameters
-
-    <a name="table0249629144818"></a>
-    <table><thead align="left"><tr id="row124982915486"><th class="cellrowborder" valign="top" width="13.71%" id="mcps1.1.6.1.1"><p id="p13249132917480"><a name="p13249132917480"></a><a name="p13249132917480"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.62%" id="mcps1.1.6.1.2"><p id="p12496298488"><a name="p12496298488"></a><a name="p12496298488"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="8.469999999999999%" id="mcps1.1.6.1.3"><p id="p1024912919485"><a name="p1024912919485"></a><a name="p1024912919485"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="p879793714527"><a name="p879793714527"></a><a name="p879793714527"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="56.68%" id="mcps1.1.6.1.5"><p id="p7249192994817"><a name="p7249192994817"></a><a name="p7249192994817"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row324915297485"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p824982974812"><a name="p824982974812"></a><a name="p824982974812"></a>count</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p1224913295481"><a name="p1224913295481"></a><a name="p1224913295481"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p02491629134812"><a name="p02491629134812"></a><a name="p02491629134812"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p1279713715219"><a name="p1279713715219"></a><a name="p1279713715219"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.68%" headers="mcps1.1.6.1.5 "><p id="p13249172974815"><a name="p13249172974815"></a><a name="p13249172974815"></a>Number of steps. Must be a positive integer.</p>
-    </td>
-    </tr>
-    <tr id="row7878205385210"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p7878155319522"><a name="p7878155319522"></a><a name="p7878155319522"></a>end</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p11878105317525"><a name="p11878105317525"></a><a name="p11878105317525"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p3878053125214"><a name="p3878053125214"></a><a name="p3878053125214"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p1587819539520"><a name="p1587819539520"></a><a name="p1587819539520"></a>true</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.68%" headers="mcps1.1.6.1.5 "><p id="p4878115313527"><a name="p4878115313527"></a><a name="p4878115313527"></a>Step change at the start or end point of each interval. Defaults to <strong id="b1812913918461"><a name="b1812913918461"></a><a name="b1812913918461"></a>true</strong>, indicating that the step change occurs at the end point.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Return values
-
-    Curve object.
-
-
-## curves.cubicBezier<a name="section548233515442"></a>
-
-cubicBezier\(x1: number, y1: number, x2: number, y2: number\): Object
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | count | number | Yes | - | Number&nbsp;of&nbsp;steps.&nbsp;Must&nbsp;be&nbsp;a&nbsp;positive&nbsp;integer. | 
+  | end | boolean | No | true | Step&nbsp;change&nbsp;at&nbsp;the&nbsp;start&nbsp;or&nbsp;end&nbsp;point&nbsp;of&nbsp;each&nbsp;interval.&nbsp;Defaults&nbsp;to&nbsp;**true**,&nbsp;indicating&nbsp;that&nbsp;the&nbsp;step&nbsp;change&nbsp;occurs&nbsp;at&nbsp;the&nbsp;end&nbsp;point. | 
+
+- Return values
+  Curve object.
+
+
+## curves.cubicBezier
+
+cubicBezier(x1: number, y1: number, x2: number, y2: number): Object
+
 
 Constructs a third-order Bezier curve object. The curve value must be between 0 and 1.
 
--   Parameters
-
-    <a name="table3158136144813"></a>
-    <table><thead align="left"><tr id="row151581136164820"><th class="cellrowborder" valign="top" width="14.82%" id="mcps1.1.5.1.1"><p id="p141580364487"><a name="p141580364487"></a><a name="p141580364487"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.729999999999999%" id="mcps1.1.5.1.2"><p id="p6158103613485"><a name="p6158103613485"></a><a name="p6158103613485"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.16%" id="mcps1.1.5.1.3"><p id="p115843684817"><a name="p115843684817"></a><a name="p115843684817"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.29%" id="mcps1.1.5.1.4"><p id="p41581736184811"><a name="p41581736184811"></a><a name="p41581736184811"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row71591236104812"><td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.1 "><p id="p16159536184811"><a name="p16159536184811"></a><a name="p16159536184811"></a>x1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.729999999999999%" headers="mcps1.1.5.1.2 "><p id="p8159113684815"><a name="p8159113684815"></a><a name="p8159113684815"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.16%" headers="mcps1.1.5.1.3 "><p id="p17159133634811"><a name="p17159133634811"></a><a name="p17159133634811"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.29%" headers="mcps1.1.5.1.4 "><p id="p15159163664814"><a name="p15159163664814"></a><a name="p15159163664814"></a>Horizontal coordinate of the first point on the Bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row74932085115"><td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.1 "><p id="p949316065114"><a name="p949316065114"></a><a name="p949316065114"></a>y1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.729999999999999%" headers="mcps1.1.5.1.2 "><p id="p149313011517"><a name="p149313011517"></a><a name="p149313011517"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.16%" headers="mcps1.1.5.1.3 "><p id="p84938011513"><a name="p84938011513"></a><a name="p84938011513"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.29%" headers="mcps1.1.5.1.4 "><p id="p124932020510"><a name="p124932020510"></a><a name="p124932020510"></a>Vertical coordinate of the first point on the Bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row94250210517"><td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.1 "><p id="p8425623518"><a name="p8425623518"></a><a name="p8425623518"></a>x2</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.729999999999999%" headers="mcps1.1.5.1.2 "><p id="p34251829512"><a name="p34251829512"></a><a name="p34251829512"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.16%" headers="mcps1.1.5.1.3 "><p id="p0425726516"><a name="p0425726516"></a><a name="p0425726516"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.29%" headers="mcps1.1.5.1.4 "><p id="p34261218514"><a name="p34261218514"></a><a name="p34261218514"></a>Horizontal coordinate of the second point on the Bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row023810485115"><td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.1 "><p id="p1523810412512"><a name="p1523810412512"></a><a name="p1523810412512"></a>y2</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.729999999999999%" headers="mcps1.1.5.1.2 "><p id="p923824105112"><a name="p923824105112"></a><a name="p923824105112"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.16%" headers="mcps1.1.5.1.3 "><p id="p1723810475114"><a name="p1723810475114"></a><a name="p1723810475114"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.29%" headers="mcps1.1.5.1.4 "><p id="p123984195113"><a name="p123984195113"></a><a name="p123984195113"></a>Vertical coordinate of the second point on the Bezier curve.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Return values
-
-    Curve object.
-
-
-## curves.spring<a name="section185801926114514"></a>
-
-spring\(velocity: number, mass: number, stiffness: number, damping: number\): Object
+
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | x1 | number | Yes | Horizontal&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;first&nbsp;point&nbsp;on&nbsp;the&nbsp;Bezier&nbsp;curve. | 
+  | y1 | number | Yes | Vertical&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;first&nbsp;point&nbsp;on&nbsp;the&nbsp;Bezier&nbsp;curve. | 
+  | x2 | number | Yes | Horizontal&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;second&nbsp;point&nbsp;on&nbsp;the&nbsp;Bezier&nbsp;curve. | 
+  | y2 | number | Yes | Vertical&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;second&nbsp;point&nbsp;on&nbsp;the&nbsp;Bezier&nbsp;curve. | 
+
+- Return values
+  Curve object.
+
+
+## curves.spring
+
+spring(velocity: number, mass: number, stiffness: number, damping: number): Object
+
 
 Constructs a spring curve object.
 
--   Parameters
-
-    <a name="table131871943104820"></a>
-    <table><thead align="left"><tr id="row181871743184818"><th class="cellrowborder" valign="top" width="14.82%" id="mcps1.1.5.1.1"><p id="p1218734312483"><a name="p1218734312483"></a><a name="p1218734312483"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.729999999999999%" id="mcps1.1.5.1.2"><p id="p418784319488"><a name="p418784319488"></a><a name="p418784319488"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.16%" id="mcps1.1.5.1.3"><p id="p11871343184815"><a name="p11871343184815"></a><a name="p11871343184815"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.29%" id="mcps1.1.5.1.4"><p id="p318719438480"><a name="p318719438480"></a><a name="p318719438480"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row191871543204816"><td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.1 "><p id="p181872434485"><a name="p181872434485"></a><a name="p181872434485"></a>velocity</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.729999999999999%" headers="mcps1.1.5.1.2 "><p id="p10187154315489"><a name="p10187154315489"></a><a name="p10187154315489"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.16%" headers="mcps1.1.5.1.3 "><p id="p12187114324819"><a name="p12187114324819"></a><a name="p12187114324819"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.29%" headers="mcps1.1.5.1.4 "><p id="p618794317482"><a name="p618794317482"></a><a name="p618794317482"></a>Initial velocity.</p>
-    </td>
-    </tr>
-    <tr id="row1618041604916"><td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.1 "><p id="p418071614913"><a name="p418071614913"></a><a name="p418071614913"></a>mass</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.729999999999999%" headers="mcps1.1.5.1.2 "><p id="p4180916174920"><a name="p4180916174920"></a><a name="p4180916174920"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.16%" headers="mcps1.1.5.1.3 "><p id="p12180161674916"><a name="p12180161674916"></a><a name="p12180161674916"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.29%" headers="mcps1.1.5.1.4 "><p id="p1718091618492"><a name="p1718091618492"></a><a name="p1718091618492"></a>Mass.</p>
-    </td>
-    </tr>
-    <tr id="row10880111194912"><td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.1 "><p id="p1088021114913"><a name="p1088021114913"></a><a name="p1088021114913"></a>stiffness</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.729999999999999%" headers="mcps1.1.5.1.2 "><p id="p1388011104913"><a name="p1388011104913"></a><a name="p1388011104913"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.16%" headers="mcps1.1.5.1.3 "><p id="p15880101154919"><a name="p15880101154919"></a><a name="p15880101154919"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.29%" headers="mcps1.1.5.1.4 "><p id="p288031184919"><a name="p288031184919"></a><a name="p288031184919"></a>Stiffness.</p>
-    </td>
-    </tr>
-    <tr id="row1773111135015"><td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.1 "><p id="p373121105014"><a name="p373121105014"></a><a name="p373121105014"></a>damping</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.729999999999999%" headers="mcps1.1.5.1.2 "><p id="p177311185012"><a name="p177311185012"></a><a name="p177311185012"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.16%" headers="mcps1.1.5.1.3 "><p id="p27381105013"><a name="p27381105013"></a><a name="p27381105013"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.29%" headers="mcps1.1.5.1.4 "><p id="p47414115501"><a name="p47414115501"></a><a name="p47414115501"></a>Damping.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Return values
-
-    Curve object.
-
-
-## Example<a name="section75051320581"></a>
 
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | velocity | number | Yes | Initial&nbsp;velocity. | 
+  | mass | number | Yes | Mass. | 
+  | stiffness | number | Yes | Stiffness. | 
+  | damping | number | Yes | Damping. | 
+
+- Return values
+  Curve object.
+
+
+## Example
+
+  
 ```
 import Curves from '@ohos.curves'
 let curve1 = Curves.init() // Create a default linear interpolation curve.
@@ -240,36 +104,25 @@ let curve3 = Curves.spring(100, 1, 228, 30) // Create a spring interpolation cur
 let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // Create a third-order Bezier curve.
 ```
 
-Curve objects can be created only by the preceding APIs.
 
-<a name="table268mcpsimp"></a>
-<table><thead align="left"><tr id="row274mcpsimp"><th class="cellrowborder" valign="top" width="39.26%" id="mcps1.1.3.1.1"><p id="p276mcpsimp"><a name="p276mcpsimp"></a><a name="p276mcpsimp"></a>API</p>
-</th>
-<th class="cellrowborder" valign="top" width="60.74%" id="mcps1.1.3.1.2"><p id="p280mcpsimp"><a name="p280mcpsimp"></a><a name="p280mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row281mcpsimp"><td class="cellrowborder" valign="top" width="39.26%" headers="mcps1.1.3.1.1 "><p id="p825816201103"><a name="p825816201103"></a><a name="p825816201103"></a>interpolate(time: number): number</p>
-</td>
-<td class="cellrowborder" valign="top" width="60.74%" headers="mcps1.1.3.1.2 "><p id="p163641244113119"><a name="p163641244113119"></a><a name="p163641244113119"></a>Calculation function of the interpolation curve. Passing a normalized time parameter to this function returns the current interpolation.</p>
-<p id="p71285919117"><a name="p71285919117"></a><a name="p71285919117"></a><strong id="b1644135712493"><a name="b1644135712493"></a><a name="b1644135712493"></a>time</strong>: indicates the current normalized time. The value ranges from 0 to 1.</p>
-<p id="p154022291218"><a name="p154022291218"></a><a name="p154022291218"></a>The curve interpolation corresponding to the normalized time point is returned.</p>
-</td>
-</tr>
-</tbody>
-</table>
+  Curve objects can be created only by the preceding APIs.
+  | API | Description | 
+| -------- | -------- |
+| interpolate(time:&nbsp;number):&nbsp;number | Calculation&nbsp;function&nbsp;of&nbsp;the&nbsp;interpolation&nbsp;curve.&nbsp;Passing&nbsp;a&nbsp;normalized&nbsp;time&nbsp;parameter&nbsp;to&nbsp;this&nbsp;function&nbsp;returns&nbsp;the&nbsp;current&nbsp;interpolation.<br/>**time**:&nbsp;indicates&nbsp;the&nbsp;current&nbsp;normalized&nbsp;time.&nbsp;The&nbsp;value&nbsp;ranges&nbsp;from&nbsp;0&nbsp;to&nbsp;1.<br/>The&nbsp;curve&nbsp;interpolation&nbsp;corresponding&nbsp;to&nbsp;the&nbsp;normalized&nbsp;time&nbsp;point&nbsp;is&nbsp;returned. | 
 
--   Example
 
-    ```
-    import Curves from '@ohos.curves'
-    let curve = Curves.init(Curve.EaseIn) // Create an interpolation curve which is slow and then fast by default.
-    let value: number = curve.interpolate(0.5) // Calculate the interpolation for half of the time.
-    ```
+- Example
+    
+  ```
+  import Curves from '@ohos.curves'
+  let curve = Curves.init(Curve.EaseIn) // Create an interpolation curve which is slow and then fast by default.
+  let value: number = curve.interpolate(0.5) // Calculate the interpolation for half of the time.
+  ```
 
 
-## Example<a name="section839432815193"></a>
+## Example
 
+  
 ```
 import Curves from '@ohos.curves'
 @Entry
@@ -295,5 +148,4 @@ struct ImageComponent {
 }
 ```
 
-![](figures/5.gif)
-
+![en-us_image_0000001212058456](figures/en-us_image_0000001212058456.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-matrix-transformation.md b/en/application-dev/reference/arkui-ts/ts-matrix-transformation.md
index 77a42705ada3f14e5643a702156db3fb87afa7a2..0b441459e0459dc0a6f9466a1f3d16a1531f766c 100644
--- a/en/application-dev/reference/arkui-ts/ts-matrix-transformation.md
+++ b/en/application-dev/reference/arkui-ts/ts-matrix-transformation.md
@@ -1,860 +1,377 @@
-# Matrix Transformation<a name="EN-US_TOPIC_0000001192915104"></a>
+# Matrix Transformation
 
->![](../../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.
 
-## Modules to Import<a name="section1727172013219"></a>
+> ![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.
+
+
+## Modules to Import
+
 
 ```
 import matrix4 from '@ohos.matrix4'
 ```
 
-## Required Permissions<a name="section7743183014286"></a>
+
+## Required Permissions
 
 None
 
-## matrix4.init<a name="section12864856072"></a>
 
-init\(array: Array<number\>\): Object
+## matrix4.init
+
+init(array: Array&lt;number&gt;): Object
+
 
 Matrix constructor, which is used to create a 4x4 matrix by using the input parameter. Column-major order is used.
 
--   Parameters
-
-    <a name="table69661135912"></a>
-    <table><thead align="left"><tr id="row149668318915"><th class="cellrowborder" valign="top" width="13.71%" id="mcps1.1.6.1.1"><p id="p7966738914"><a name="p7966738914"></a><a name="p7966738914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.62%" id="mcps1.1.6.1.2"><p id="p296713699"><a name="p296713699"></a><a name="p296713699"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="8.469999999999999%" id="mcps1.1.6.1.3"><p id="p196718315911"><a name="p196718315911"></a><a name="p196718315911"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.790000000000003%" id="mcps1.1.6.1.4"><p id="p13769183172911"><a name="p13769183172911"></a><a name="p13769183172911"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="45.410000000000004%" id="mcps1.1.6.1.5"><p id="p9967231197"><a name="p9967231197"></a><a name="p9967231197"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row18967831393"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p39671131590"><a name="p39671131590"></a><a name="p39671131590"></a>array</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p16545165318258"><a name="p16545165318258"></a><a name="p16545165318258"></a>Array&lt;number&gt;</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p149671932919"><a name="p149671932919"></a><a name="p149671932919"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.790000000000003%" headers="mcps1.1.6.1.4 "><p id="p383310463295"><a name="p383310463295"></a><a name="p383310463295"></a>[1, 0, 0, 0,</p>
-    <p id="p9833154662917"><a name="p9833154662917"></a><a name="p9833154662917"></a>0, 1, 0, 0,</p>
-    <p id="p1083304672916"><a name="p1083304672916"></a><a name="p1083304672916"></a>0, 0, 1, 0,</p>
-    <p id="p17833104652910"><a name="p17833104652910"></a><a name="p17833104652910"></a>0, 0, 0, 1]</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="45.410000000000004%" headers="mcps1.1.6.1.5 "><p id="p147631917301"><a name="p147631917301"></a><a name="p147631917301"></a>A number array whose length is 16 (4 x 4). For details, see the <a href="#li1515172020468">parameter description</a>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Return values
-
-    <a name="table16391145317913"></a>
-    <table><thead align="left"><tr id="row2391145319910"><th class="cellrowborder" valign="top" width="17.380000000000003%" id="mcps1.1.3.1.1"><p id="p13911353991"><a name="p13911353991"></a><a name="p13911353991"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="82.62%" id="mcps1.1.3.1.2"><p id="p193911531395"><a name="p193911531395"></a><a name="p193911531395"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1339114531391"><td class="cellrowborder" valign="top" width="17.380000000000003%" headers="mcps1.1.3.1.1 "><p id="p156879250282"><a name="p156879250282"></a><a name="p156879250282"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="82.62%" headers="mcps1.1.3.1.2 "><p id="p1312703682719"><a name="p1312703682719"></a><a name="p1312703682719"></a>4x4 matrix object created based on the input parameter.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li1515172020468"></a>Parameter description
-
-    <a name="table139791826174616"></a>
-    <table><thead align="left"><tr id="row1497992664617"><th class="cellrowborder" valign="top" width="25%" id="mcps1.1.5.1.1"><p id="p897912619464"><a name="p897912619464"></a><a name="p897912619464"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="25%" id="mcps1.1.5.1.2"><p id="p897911263465"><a name="p897911263465"></a><a name="p897911263465"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="25%" id="mcps1.1.5.1.3"><p id="p3979626174610"><a name="p3979626174610"></a><a name="p3979626174610"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="25%" id="mcps1.1.5.1.4"><p id="p1697982614463"><a name="p1697982614463"></a><a name="p1697982614463"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row179797267464"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="p119798262465"><a name="p119798262465"></a><a name="p119798262465"></a>m00</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="p297952664613"><a name="p297952664613"></a><a name="p297952664613"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="p18979142616461"><a name="p18979142616461"></a><a name="p18979142616461"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="p49797262468"><a name="p49797262468"></a><a name="p49797262468"></a>Scaling value of the x-axis. Defaults to <strong id="b93654318517"><a name="b93654318517"></a><a name="b93654318517"></a>1</strong> for the unit matrix.</p>
-    </td>
-    </tr>
-    <tr id="row19979202654615"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="p49791726184619"><a name="p49791726184619"></a><a name="p49791726184619"></a>m01</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="p4979102614612"><a name="p4979102614612"></a><a name="p4979102614612"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="p997962612465"><a name="p997962612465"></a><a name="p997962612465"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="p1697952610466"><a name="p1697952610466"></a><a name="p1697952610466"></a>The second value, which is affected by the rotation of the x, y, and z axes.</p>
-    </td>
-    </tr>
-    <tr id="row397942644610"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="p698019263468"><a name="p698019263468"></a><a name="p698019263468"></a>m02</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="p3980182694614"><a name="p3980182694614"></a><a name="p3980182694614"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="p17980172644611"><a name="p17980172644611"></a><a name="p17980172644611"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="p99801626184614"><a name="p99801626184614"></a><a name="p99801626184614"></a>The third value, which is affected by the rotation of the x, y, and z axes.</p>
-    </td>
-    </tr>
-    <tr id="row109801726104619"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="p79801926124614"><a name="p79801926124614"></a><a name="p79801926124614"></a>m03</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="p199801126114617"><a name="p199801126114617"></a><a name="p199801126114617"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="p3980426154611"><a name="p3980426154611"></a><a name="p3980426154611"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="p498012617462"><a name="p498012617462"></a><a name="p498012617462"></a>Meaningless.</p>
-    </td>
-    </tr>
-    <tr id="row1298092610468"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="p8980426154620"><a name="p8980426154620"></a><a name="p8980426154620"></a>m10</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="p209802026144616"><a name="p209802026144616"></a><a name="p209802026144616"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="p5980162664618"><a name="p5980162664618"></a><a name="p5980162664618"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="p898016260460"><a name="p898016260460"></a><a name="p898016260460"></a>The fifth value, which is affected by the rotation of the x, y, and z axes.</p>
-    </td>
-    </tr>
-    <tr id="row169803263461"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="p298072618469"><a name="p298072618469"></a><a name="p298072618469"></a>m11</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="p2980526194611"><a name="p2980526194611"></a><a name="p2980526194611"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="p1898052617462"><a name="p1898052617462"></a><a name="p1898052617462"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="p19805264466"><a name="p19805264466"></a><a name="p19805264466"></a>Scaling value of the y-axis. Defaults to <strong id="b1770217365817"><a name="b1770217365817"></a><a name="b1770217365817"></a>1</strong> for the unit matrix.</p>
-    </td>
-    </tr>
-    <tr id="row298017266467"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="p498018266469"><a name="p498018266469"></a><a name="p498018266469"></a>m12</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="p798017261468"><a name="p798017261468"></a><a name="p798017261468"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="p1698022614614"><a name="p1698022614614"></a><a name="p1698022614614"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="p17980112611466"><a name="p17980112611466"></a><a name="p17980112611466"></a>The seventh value, which is affected by the rotation of the x, y, and z axes.</p>
-    </td>
-    </tr>
-    <tr id="row898017266468"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="p39803262467"><a name="p39803262467"></a><a name="p39803262467"></a>m13</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="p13980926154616"><a name="p13980926154616"></a><a name="p13980926154616"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="p169800262468"><a name="p169800262468"></a><a name="p169800262468"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="p498072684618"><a name="p498072684618"></a><a name="p498072684618"></a>Meaningless.</p>
-    </td>
-    </tr>
-    <tr id="row119801726124612"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="p109801726174615"><a name="p109801726174615"></a><a name="p109801726174615"></a>m20</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="p7980326104618"><a name="p7980326104618"></a><a name="p7980326104618"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="p12981826134613"><a name="p12981826134613"></a><a name="p12981826134613"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="p119811126184615"><a name="p119811126184615"></a><a name="p119811126184615"></a>The ninth value, which is affected by the rotation of the x, y, and z axes.</p>
-    </td>
-    </tr>
-    <tr id="row798162617469"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="p1598112617461"><a name="p1598112617461"></a><a name="p1598112617461"></a>m21</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="p598112269469"><a name="p598112269469"></a><a name="p598112269469"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="p598182684611"><a name="p598182684611"></a><a name="p598182684611"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="p6981826194617"><a name="p6981826194617"></a><a name="p6981826194617"></a>The tenth value, which is affected by the rotation of the x, y, and z axes.</p>
-    </td>
-    </tr>
-    <tr id="row898192674616"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="p2981526154618"><a name="p2981526154618"></a><a name="p2981526154618"></a>m22</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="p179811826134618"><a name="p179811826134618"></a><a name="p179811826134618"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="p13981132624613"><a name="p13981132624613"></a><a name="p13981132624613"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="p39815261466"><a name="p39815261466"></a><a name="p39815261466"></a>Scaling value of the z-axis. Defaults to <strong id="b206621337598"><a name="b206621337598"></a><a name="b206621337598"></a>1</strong> for the unit matrix.</p>
-    </td>
-    </tr>
-    <tr id="row3981202613463"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="p69811268467"><a name="p69811268467"></a><a name="p69811268467"></a>m23</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="p1898112684618"><a name="p1898112684618"></a><a name="p1898112684618"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="p99811226114615"><a name="p99811226114615"></a><a name="p99811226114615"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="p139819261460"><a name="p139819261460"></a><a name="p139819261460"></a>Meaningless.</p>
-    </td>
-    </tr>
-    <tr id="row12981162616465"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="p09816268462"><a name="p09816268462"></a><a name="p09816268462"></a>m30</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="p13981526154614"><a name="p13981526154614"></a><a name="p13981526154614"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="p6981626174612"><a name="p6981626174612"></a><a name="p6981626174612"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="p098118264469"><a name="p098118264469"></a><a name="p098118264469"></a>Translation value of the x-axis, in px. Defaults to <strong id="b89486118016"><a name="b89486118016"></a><a name="b89486118016"></a>0</strong> for the unit matrix.</p>
-    </td>
-    </tr>
-    <tr id="row2098132618460"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="p298112694616"><a name="p298112694616"></a><a name="p298112694616"></a>m31</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="p169811326194614"><a name="p169811326194614"></a><a name="p169811326194614"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="p09811426124615"><a name="p09811426124615"></a><a name="p09811426124615"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="p159811926144619"><a name="p159811926144619"></a><a name="p159811926144619"></a>Translation value of the y-axis, in px. Defaults to <strong id="b115301652604"><a name="b115301652604"></a><a name="b115301652604"></a>0</strong> for the unit matrix.</p>
-    </td>
-    </tr>
-    <tr id="row209811526154613"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="p139814263468"><a name="p139814263468"></a><a name="p139814263468"></a>m32</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="p19981126134615"><a name="p19981126134615"></a><a name="p19981126134615"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="p898213261465"><a name="p898213261465"></a><a name="p898213261465"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="p0982142664610"><a name="p0982142664610"></a><a name="p0982142664610"></a>Translation value of the z-axis, in px. Defaults to <strong id="b3329124620018"><a name="b3329124620018"></a><a name="b3329124620018"></a>0</strong> for the unit matrix.</p>
-    </td>
-    </tr>
-    <tr id="row159823263463"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.1 "><p id="p159821926144620"><a name="p159821926144620"></a><a name="p159821926144620"></a>m33</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.2 "><p id="p7982326184616"><a name="p7982326184616"></a><a name="p7982326184616"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.3 "><p id="p29821263465"><a name="p29821263465"></a><a name="p29821263465"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.5.1.4 "><p id="p3982152615462"><a name="p3982152615462"></a><a name="p3982152615462"></a>Valid in homogeneous coordinates, presenting the perspective projection effect.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    import Matrix4 from '@ohos.matrix4'
-    // Create a 4x4 matrix.
-    let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0,
-                              0.0, 1.0, 0.0, 0.0,
-                              0.0, 0.0, 1.0, 0.0,
-                              0.0, 0.0, 0.0, 1.0])
-    ```
-
-
-## matrix4.identity<a name="section042975416311"></a>
-
-identity\(\): Object
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | array | Array&lt;number&gt; | Yes | [1,&nbsp;0,&nbsp;0,&nbsp;0,<br/>0,&nbsp;1,&nbsp;0,&nbsp;0,<br/>0,&nbsp;0,&nbsp;1,&nbsp;0,<br/>0,&nbsp;0,&nbsp;0,&nbsp;1] | A&nbsp;number&nbsp;array&nbsp;whose&nbsp;length&nbsp;is&nbsp;16&nbsp;(4&nbsp;x&nbsp;4).&nbsp;For&nbsp;details,&nbsp;see&nbsp;the&nbsp;parameter description. |
+
+- Return values
+    | Type | Description | 
+  | -------- | -------- |
+  | Object | 4x4&nbsp;matrix&nbsp;object&nbsp;created&nbsp;based&nbsp;on&nbsp;the&nbsp;input&nbsp;parameter. | 
+
+- Parameter description
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | m00 | number | Yes | Scaling&nbsp;value&nbsp;of&nbsp;the&nbsp;x-axis.&nbsp;Defaults&nbsp;to&nbsp;**1**&nbsp;for&nbsp;the&nbsp;unit&nbsp;matrix. | 
+  | m01 | number | Yes | The&nbsp;second&nbsp;value,&nbsp;which&nbsp;is&nbsp;affected&nbsp;by&nbsp;the&nbsp;rotation&nbsp;of&nbsp;the&nbsp;x,&nbsp;y,&nbsp;and&nbsp;z&nbsp;axes. | 
+  | m02 | number | Yes | The&nbsp;third&nbsp;value,&nbsp;which&nbsp;is&nbsp;affected&nbsp;by&nbsp;the&nbsp;rotation&nbsp;of&nbsp;the&nbsp;x,&nbsp;y,&nbsp;and&nbsp;z&nbsp;axes. | 
+  | m03 | number | Yes | Meaningless. | 
+  | m10 | number | Yes | The&nbsp;fifth&nbsp;value,&nbsp;which&nbsp;is&nbsp;affected&nbsp;by&nbsp;the&nbsp;rotation&nbsp;of&nbsp;the&nbsp;x,&nbsp;y,&nbsp;and&nbsp;z&nbsp;axes. | 
+  | m11 | number | Yes | Scaling&nbsp;value&nbsp;of&nbsp;the&nbsp;y-axis.&nbsp;Defaults&nbsp;to&nbsp;**1**&nbsp;for&nbsp;the&nbsp;unit&nbsp;matrix. | 
+  | m12 | number | Yes | The&nbsp;seventh&nbsp;value,&nbsp;which&nbsp;is&nbsp;affected&nbsp;by&nbsp;the&nbsp;rotation&nbsp;of&nbsp;the&nbsp;x,&nbsp;y,&nbsp;and&nbsp;z&nbsp;axes. | 
+  | m13 | number | Yes | Meaningless. | 
+  | m20 | number | Yes | The&nbsp;ninth&nbsp;value,&nbsp;which&nbsp;is&nbsp;affected&nbsp;by&nbsp;the&nbsp;rotation&nbsp;of&nbsp;the&nbsp;x,&nbsp;y,&nbsp;and&nbsp;z&nbsp;axes. | 
+  | m21 | number | Yes | The&nbsp;tenth&nbsp;value,&nbsp;which&nbsp;is&nbsp;affected&nbsp;by&nbsp;the&nbsp;rotation&nbsp;of&nbsp;the&nbsp;x,&nbsp;y,&nbsp;and&nbsp;z&nbsp;axes. | 
+  | m22 | number | Yes | Scaling&nbsp;value&nbsp;of&nbsp;the&nbsp;z-axis.&nbsp;Defaults&nbsp;to&nbsp;**1**&nbsp;for&nbsp;the&nbsp;unit&nbsp;matrix. | 
+  | m23 | number | Yes | Meaningless. | 
+  | m30 | number | Yes | Translation&nbsp;value&nbsp;of&nbsp;the&nbsp;x-axis,&nbsp;in&nbsp;px.&nbsp;Defaults&nbsp;to&nbsp;**0**&nbsp;for&nbsp;the&nbsp;unit&nbsp;matrix. | 
+  | m31 | number | Yes | Translation&nbsp;value&nbsp;of&nbsp;the&nbsp;y-axis,&nbsp;in&nbsp;px.&nbsp;Defaults&nbsp;to&nbsp;**0**&nbsp;for&nbsp;the&nbsp;unit&nbsp;matrix. | 
+  | m32 | number | Yes | Translation&nbsp;value&nbsp;of&nbsp;the&nbsp;z-axis,&nbsp;in&nbsp;px.&nbsp;Defaults&nbsp;to&nbsp;**0**&nbsp;for&nbsp;the&nbsp;unit&nbsp;matrix. | 
+  | m33 | number | Yes | Valid&nbsp;in&nbsp;homogeneous&nbsp;coordinates,&nbsp;presenting&nbsp;the&nbsp;perspective&nbsp;projection&nbsp;effect. | 
+
+- Example
+  
+  ```
+  import Matrix4 from '@ohos.matrix4'
+  // Create a 4x4 matrix.
+  let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0,
+                            0.0, 1.0, 0.0, 0.0,
+                            0.0, 0.0, 1.0, 0.0,
+                            0.0, 0.0, 0.0, 1.0])
+  ```
+
+
+## matrix4.identity
+
+identity(): Object
+
 
 Matrix initialization function. Can return a unit matrix object.
 
--   Return values
 
-    <a name="table27644593325"></a>
-    <table><thead align="left"><tr id="row07648597326"><th class="cellrowborder" valign="top" width="17.380000000000003%" id="mcps1.1.3.1.1"><p id="p176455903217"><a name="p176455903217"></a><a name="p176455903217"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="82.62%" id="mcps1.1.3.1.2"><p id="p57641059173211"><a name="p57641059173211"></a><a name="p57641059173211"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1576485919323"><td class="cellrowborder" valign="top" width="17.380000000000003%" headers="mcps1.1.3.1.1 "><p id="p147648599321"><a name="p147648599321"></a><a name="p147648599321"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="82.62%" headers="mcps1.1.3.1.2 "><p id="p167641359113220"><a name="p167641359113220"></a><a name="p167641359113220"></a>Unit matrix object.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+- Return values
+    | Type | Description | 
+  | -------- | -------- |
+  | Object | Unit&nbsp;matrix&nbsp;object. | 
 
--   Example
+- Example
+  
+  ```
+  // The effect of matrix 1 is the same as that of matrix 2.
+  import Matrix4 from '@ohos.matrix4'
+  let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0,
+                            0.0, 1.0, 0.0, 0.0,
+                            0.0, 0.0, 1.0, 0.0,
+                            0.0, 0.0, 0.0, 1.0])
+  let matrix2 = Matrix4.identity()
+  ```
 
-    ```
-    // The effect of matrix 1 is the same as that of matrix 2.
-    import Matrix4 from '@ohos.matrix4'
-    let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0,
-                              0.0, 1.0, 0.0, 0.0,
-                              0.0, 0.0, 1.0, 0.0,
-                              0.0, 0.0, 0.0, 1.0])
-    let matrix2 = Matrix4.identity()
-    ```
 
+## matrix4.copy
 
-## matrix4.copy<a name="section9959103514339"></a>
+copy(): Object
 
-copy\(\): Object
 
 Matrix copy function, which is used to copy the current matrix object.
 
--   Return values
-
-    <a name="table88791649133410"></a>
-    <table><thead align="left"><tr id="row187917499345"><th class="cellrowborder" valign="top" width="17.380000000000003%" id="mcps1.1.3.1.1"><p id="p487934917342"><a name="p487934917342"></a><a name="p487934917342"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="82.62%" id="mcps1.1.3.1.2"><p id="p687910492340"><a name="p687910492340"></a><a name="p687910492340"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1887911497343"><td class="cellrowborder" valign="top" width="17.380000000000003%" headers="mcps1.1.3.1.1 "><p id="p3879649203414"><a name="p3879649203414"></a><a name="p3879649203414"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="82.62%" headers="mcps1.1.3.1.2 "><p id="p1187994953419"><a name="p1187994953419"></a><a name="p1187994953419"></a>Copy object of the current matrix.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    import Matrix4 from '@ohos.matrix4'
-    @Entry
-    @Component
-    struct Test {
-      private matrix1 = Matrix4.identity().translate({x:100})
-      private matrix2 = this.matrix1.copy().scale({x:2})
-      build() {
-        Column() {
-          Image($r("app.media.bg1"))
-            .width("40%")
-            .height(100)
-            .transform(this.matrix1)
-          Image($r("app.media.bg2"))
-            .width("40%")
-            .height(100)
-            .margin({top:50})
-            .transform(this.matrix2)
-        }
+
+- Return values
+    | Type | Description | 
+  | -------- | -------- |
+  | Object | Copy&nbsp;object&nbsp;of&nbsp;the&nbsp;current&nbsp;matrix. | 
+
+- Example
+  
+  ```
+  import Matrix4 from '@ohos.matrix4'
+  @Entry
+  @Component
+  struct Test {
+    private matrix1 = Matrix4.identity().translate({x:100})
+    private matrix2 = this.matrix1.copy().scale({x:2})
+    build() {
+      Column() {
+        Image($r("app.media.bg1"))
+          .width("40%")
+          .height(100)
+          .transform(this.matrix1)
+        Image($r("app.media.bg2"))
+          .width("40%")
+          .height(100)
+          .margin({top:50})
+          .transform(this.matrix2)
       }
     }
-    ```
+  }
+  ```
 
-    ![](figures/s1.png)
+  ![en-us_image_0000001256858419](figures/en-us_image_0000001256858419.png)
 
 
-## Matrix4<a name="section118153513365"></a>
+## Matrix4
 
-### combine<a name="section267686121415"></a>
 
-combine\(matrix: Matrix4\): Object
+### combine
+
+combine(matrix: Matrix4): Object
+
 
 Matrix overlay function, which is used to overlay the effects of two matrices to generate a new matrix object.
 
--   Parameters
-
-    <a name="table13750122713715"></a>
-    <table><thead align="left"><tr id="row9750192717371"><th class="cellrowborder" valign="top" width="13.71%" id="mcps1.1.6.1.1"><p id="p6750327173719"><a name="p6750327173719"></a><a name="p6750327173719"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.62%" id="mcps1.1.6.1.2"><p id="p14750127123720"><a name="p14750127123720"></a><a name="p14750127123720"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="8.469999999999999%" id="mcps1.1.6.1.3"><p id="p17750102710376"><a name="p17750102710376"></a><a name="p17750102710376"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="p1075052733715"><a name="p1075052733715"></a><a name="p1075052733715"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="56.68%" id="mcps1.1.6.1.5"><p id="p1175013272378"><a name="p1175013272378"></a><a name="p1175013272378"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row18750162743718"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p5750152723711"><a name="p5750152723711"></a><a name="p5750152723711"></a>matrix</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p180718374375"><a name="p180718374375"></a><a name="p180718374375"></a>Matrix4</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p375016274378"><a name="p375016274378"></a><a name="p375016274378"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p195305491376"><a name="p195305491376"></a><a name="p195305491376"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.68%" headers="mcps1.1.6.1.5 "><p id="p136451955183714"><a name="p136451955183714"></a><a name="p136451955183714"></a>Matrix object to be overlaid.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Return values
-
-    <a name="table1832155273615"></a>
-    <table><thead align="left"><tr id="row173211852183617"><th class="cellrowborder" valign="top" width="17.380000000000003%" id="mcps1.1.3.1.1"><p id="p3321352113612"><a name="p3321352113612"></a><a name="p3321352113612"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="82.62%" id="mcps1.1.3.1.2"><p id="p0321152113618"><a name="p0321152113618"></a><a name="p0321152113618"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row9321125211361"><td class="cellrowborder" valign="top" width="17.380000000000003%" headers="mcps1.1.3.1.1 "><p id="p532275210362"><a name="p532275210362"></a><a name="p532275210362"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="82.62%" headers="mcps1.1.3.1.2 "><p id="p143221352173614"><a name="p143221352173614"></a><a name="p143221352173614"></a>Object after matrix overlay.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    import Matrix4 from '@ohos.matrix4'
-    @Entry
-    @Component
-    struct Test {
-      private matrix1 = Matrix4.identity().translate({x:200}).copy()
-      private matrix2 = Matrix4.identity().scale({x:2}).copy()
-      build() {
-        Column() {
-         // Translate the x-axis by 100 pixels and then scale it up or down by 2x.
-          Image($r("app.media.bg1")).transform(this.matrix1.combine(this.matrix2)) 
-            .width("40%")
-            .height(100)
-            .margin({top:50})
-        }
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | matrix | Matrix4 | Yes | - | Matrix&nbsp;object&nbsp;to&nbsp;be&nbsp;overlaid. | 
+
+- Return values
+    | Type | Description | 
+  | -------- | -------- |
+  | Object | Object&nbsp;after&nbsp;matrix&nbsp;overlay. | 
+
+- Example
+  
+  ```
+  import Matrix4 from '@ohos.matrix4'
+  @Entry
+  @Component
+  struct Test {
+    private matrix1 = Matrix4.identity().translate({x:200}).copy()
+    private matrix2 = Matrix4.identity().scale({x:2}).copy()
+    build() {
+      Column() {
+       // Translate the x-axis by 100 pixels and then scale it up or down by 2x.
+        Image($r("app.media.bg1")).transform(this.matrix1.combine(this.matrix2)) 
+          .width("40%")
+          .height(100)
+          .margin({top:50})
       }
     }
-    ```
+  }
+  ```
 
-    ![](figures/q1.png)
+  ![en-us_image_0000001212378428](figures/en-us_image_0000001212378428.png)
 
 
-### invert<a name="section592117351618"></a>
+### invert
+
+invert(): Object
 
-invert\(\): Object
 
 Matrix inverse function. Can return an inverse matrix of the current matrix object, that is, get an opposite effect.
 
--   Return values
 
-    <a name="table13802173504114"></a>
-    <table><thead align="left"><tr id="row380283513415"><th class="cellrowborder" valign="top" width="17.380000000000003%" id="mcps1.1.3.1.1"><p id="p5802935154113"><a name="p5802935154113"></a><a name="p5802935154113"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="82.62%" id="mcps1.1.3.1.2"><p id="p48021535184110"><a name="p48021535184110"></a><a name="p48021535184110"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row7802935184116"><td class="cellrowborder" valign="top" width="17.380000000000003%" headers="mcps1.1.3.1.1 "><p id="p1803035164116"><a name="p1803035164116"></a><a name="p1803035164116"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="82.62%" headers="mcps1.1.3.1.2 "><p id="p7803135144115"><a name="p7803135144115"></a><a name="p7803135144115"></a>Inverse matrix object of the current matrix.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+- Return values
+    | Type | Description | 
+  | -------- | -------- |
+  | Object | Inverse&nbsp;matrix&nbsp;object&nbsp;of&nbsp;the&nbsp;current&nbsp;matrix. | 
 
--   Example
+- Example
+  
+  ```
+  import Matrix4 from '@ohos.matrix4'
+  // The effect of matrix 1 (width scaled up by 2x) is opposite to that of matrix 2 (width scaled down by 2x).
+  let matrix1 = Matrix4.identity().scale({x:2})
+  let matrix2 = matrix1.invert()
+  ```
 
-    ```
-    import Matrix4 from '@ohos.matrix4'
-    // The effect of matrix 1 (width scaled up by 2x) is opposite to that of matrix 2 (width scaled down by 2x).
-    let matrix1 = Matrix4.identity().scale({x:2})
-    let matrix2 = matrix1.invert()
-    ```
 
+### translate
 
-### translate<a name="section39828585169"></a>
+translate({x?: number, y?: number, z?: number}): Object
 
-translate\(\{x?: number, y?: number, z?: number\}\): Object
 
 Matrix translation function, which is used to add the translation effect to the x, y, and z axes of the current matrix.
 
--   Parameters
-
-    <a name="table194487472448"></a>
-    <table><thead align="left"><tr id="row1449747114411"><th class="cellrowborder" valign="top" width="13.71%" id="mcps1.1.6.1.1"><p id="p54494474449"><a name="p54494474449"></a><a name="p54494474449"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.62%" id="mcps1.1.6.1.2"><p id="p444964774420"><a name="p444964774420"></a><a name="p444964774420"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="8.469999999999999%" id="mcps1.1.6.1.3"><p id="p194491447144410"><a name="p194491447144410"></a><a name="p194491447144410"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="p64491247114418"><a name="p64491247114418"></a><a name="p64491247114418"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="56.68%" id="mcps1.1.6.1.5"><p id="p114491547194413"><a name="p114491547194413"></a><a name="p114491547194413"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1744917476446"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p164492047154417"><a name="p164492047154417"></a><a name="p164492047154417"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p10449154716449"><a name="p10449154716449"></a><a name="p10449154716449"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p444944764413"><a name="p444944764413"></a><a name="p444944764413"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p344914744419"><a name="p344914744419"></a><a name="p344914744419"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.68%" headers="mcps1.1.6.1.5 "><p id="p24499475446"><a name="p24499475446"></a><a name="p24499475446"></a>Translation distance of the x-axis, in px.</p>
-    </td>
-    </tr>
-    <tr id="row63031117164514"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p12304191764512"><a name="p12304191764512"></a><a name="p12304191764512"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p15304181764514"><a name="p15304181764514"></a><a name="p15304181764514"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p1730441764510"><a name="p1730441764510"></a><a name="p1730441764510"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p930491744519"><a name="p930491744519"></a><a name="p930491744519"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.68%" headers="mcps1.1.6.1.5 "><p id="p12304141774514"><a name="p12304141774514"></a><a name="p12304141774514"></a>Translation distance of the y-axis, in px.</p>
-    </td>
-    </tr>
-    <tr id="row8853111914511"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p118531119124511"><a name="p118531119124511"></a><a name="p118531119124511"></a>z</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p28531619174520"><a name="p28531619174520"></a><a name="p28531619174520"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p6853161924511"><a name="p6853161924511"></a><a name="p6853161924511"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p2853191915459"><a name="p2853191915459"></a><a name="p2853191915459"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.68%" headers="mcps1.1.6.1.5 "><p id="p1349911391455"><a name="p1349911391455"></a><a name="p1349911391455"></a>Translation distance of the z-axis, in px.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Return values
-
-    <a name="table185184314312"></a>
-    <table><thead align="left"><tr id="row65174334316"><th class="cellrowborder" valign="top" width="17.380000000000003%" id="mcps1.1.3.1.1"><p id="p11511543194313"><a name="p11511543194313"></a><a name="p11511543194313"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="82.62%" id="mcps1.1.3.1.2"><p id="p1351104364311"><a name="p1351104364311"></a><a name="p1351104364311"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row145184374318"><td class="cellrowborder" valign="top" width="17.380000000000003%" headers="mcps1.1.3.1.1 "><p id="p8514432438"><a name="p8514432438"></a><a name="p8514432438"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="82.62%" headers="mcps1.1.3.1.2 "><p id="p492055613433"><a name="p492055613433"></a><a name="p492055613433"></a>Matrix object after the translation effect is added.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    import Matrix4 from '@ohos.matrix4'
-    @Entry
-    @Component
-    struct Test {
-      private matrix1 = Matrix4.identity().translate({x:100, y:200, z:30})
-      build() {
-        Column() {
-          Image($r("app.media.bg1")).transform(this.matrix1)
-            .width("40%")
-            .height(100)
-        }
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | No | 0 | Translation&nbsp;distance&nbsp;of&nbsp;the&nbsp;x-axis,&nbsp;in&nbsp;px. | 
+  | y | number | No | 0 | Translation&nbsp;distance&nbsp;of&nbsp;the&nbsp;y-axis,&nbsp;in&nbsp;px. | 
+  | z | number | No | 0 | Translation&nbsp;distance&nbsp;of&nbsp;the&nbsp;z-axis,&nbsp;in&nbsp;px. | 
+
+
+- Return values
+    | Type | Description | 
+  | -------- | -------- |
+  | Object | Matrix&nbsp;object&nbsp;after&nbsp;the&nbsp;translation&nbsp;effect&nbsp;is&nbsp;added. | 
+
+- Example
+  
+  ```
+  import Matrix4 from '@ohos.matrix4'
+  @Entry
+  @Component
+  struct Test {
+    private matrix1 = Matrix4.identity().translate({x:100, y:200, z:30})
+    build() {
+      Column() {
+        Image($r("app.media.bg1")).transform(this.matrix1)
+          .width("40%")
+          .height(100)
       }
     }
-    ```
+  }
+  ```
+
+  ![en-us_image_0000001212058494](figures/en-us_image_0000001212058494.png)
 
-    ![](figures/s3.png)
 
+### scale
 
-### scale<a name="section835405115174"></a>
+scale({x?: number, y?: number, z?: number, centerX?: number, centerY?: number}): Object
 
-scale\(\{x?: number, y?: number, z?: number, centerX?: number, centerY?: number\}\): Object
 
 Matrix scaling function, which is used to add the scaling effect to the x, y, and z axes of the current matrix.
 
--   Parameters
-
-    <a name="table15488262465"></a>
-    <table><thead align="left"><tr id="row348811644616"><th class="cellrowborder" valign="top" width="13.71%" id="mcps1.1.6.1.1"><p id="p2048936144620"><a name="p2048936144620"></a><a name="p2048936144620"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.62%" id="mcps1.1.6.1.2"><p id="p1248966204618"><a name="p1248966204618"></a><a name="p1248966204618"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="8.469999999999999%" id="mcps1.1.6.1.3"><p id="p3489196104616"><a name="p3489196104616"></a><a name="p3489196104616"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="7.51%" id="mcps1.1.6.1.4"><p id="p11489665469"><a name="p11489665469"></a><a name="p11489665469"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="56.69%" id="mcps1.1.6.1.5"><p id="p248910664617"><a name="p248910664617"></a><a name="p248910664617"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row104898613466"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p9489106184612"><a name="p9489106184612"></a><a name="p9489106184612"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p448912612461"><a name="p448912612461"></a><a name="p448912612461"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p124895614618"><a name="p124895614618"></a><a name="p124895614618"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.51%" headers="mcps1.1.6.1.4 "><p id="p10489176134615"><a name="p10489176134615"></a><a name="p10489176134615"></a>1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.69%" headers="mcps1.1.6.1.5 "><p id="p0489156104615"><a name="p0489156104615"></a><a name="p0489156104615"></a>Scaling multiple of the x-axis.</p>
-    </td>
-    </tr>
-    <tr id="row2489146124619"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p14489136144616"><a name="p14489136144616"></a><a name="p14489136144616"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p648917674613"><a name="p648917674613"></a><a name="p648917674613"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p54890615465"><a name="p54890615465"></a><a name="p54890615465"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.51%" headers="mcps1.1.6.1.4 "><p id="p34891614465"><a name="p34891614465"></a><a name="p34891614465"></a>1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.69%" headers="mcps1.1.6.1.5 "><p id="p12489126134617"><a name="p12489126134617"></a><a name="p12489126134617"></a>Scaling multiple of the y-axis.</p>
-    </td>
-    </tr>
-    <tr id="row124892644616"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p124892644616"><a name="p124892644616"></a><a name="p124892644616"></a>z</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p19489366464"><a name="p19489366464"></a><a name="p19489366464"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p14490465467"><a name="p14490465467"></a><a name="p14490465467"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.51%" headers="mcps1.1.6.1.4 "><p id="p17490568465"><a name="p17490568465"></a><a name="p17490568465"></a>1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.69%" headers="mcps1.1.6.1.5 "><p id="p349056124615"><a name="p349056124615"></a><a name="p349056124615"></a>Scaling multiple of the z-axis.</p>
-    </td>
-    </tr>
-    <tr id="row038811247469"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p538813241466"><a name="p538813241466"></a><a name="p538813241466"></a>centerX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p17388152474612"><a name="p17388152474612"></a><a name="p17388152474612"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p63311440114612"><a name="p63311440114612"></a><a name="p63311440114612"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.51%" headers="mcps1.1.6.1.4 "><p id="p93881824114611"><a name="p93881824114611"></a><a name="p93881824114611"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.69%" headers="mcps1.1.6.1.5 "><p id="p53881824104613"><a name="p53881824104613"></a><a name="p53881824104613"></a>X coordinate of the center point.</p>
-    </td>
-    </tr>
-    <tr id="row925832812460"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p8258162816462"><a name="p8258162816462"></a><a name="p8258162816462"></a>centerY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p1825872874610"><a name="p1825872874610"></a><a name="p1825872874610"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p49141140124611"><a name="p49141140124611"></a><a name="p49141140124611"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.51%" headers="mcps1.1.6.1.4 "><p id="p16258142854612"><a name="p16258142854612"></a><a name="p16258142854612"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.69%" headers="mcps1.1.6.1.5 "><p id="p34851752124617"><a name="p34851752124617"></a><a name="p34851752124617"></a>Y coordinate of the center point.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Return values
-
-    <a name="table1640673712434"></a>
-    <table><thead align="left"><tr id="row8406837144314"><th class="cellrowborder" valign="top" width="17.380000000000003%" id="mcps1.1.3.1.1"><p id="p8406113794312"><a name="p8406113794312"></a><a name="p8406113794312"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="82.62%" id="mcps1.1.3.1.2"><p id="p15406193718438"><a name="p15406193718438"></a><a name="p15406193718438"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row134061037134318"><td class="cellrowborder" valign="top" width="17.380000000000003%" headers="mcps1.1.3.1.1 "><p id="p14406153713435"><a name="p14406153713435"></a><a name="p14406153713435"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="82.62%" headers="mcps1.1.3.1.2 "><p id="p278017184414"><a name="p278017184414"></a><a name="p278017184414"></a>Matrix object after the scaling effect is added.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    import Matrix4 from '@ohos.matrix4'
-    @Entry
-    @Component
-    struct Test {
-      private matrix1 = Matrix4.identity().scale({x:2, y:3, z:4, centerX:50, centerY:50})
-      build() {
-        Column() { 
-          Image($r("app.media.bg1")).transform(this.matrix1)
-            .width("40%")
-            .height(100)
-        }
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | No | 1 | Scaling&nbsp;multiple&nbsp;of&nbsp;the&nbsp;x-axis. | 
+  | y | number | No | 1 | Scaling&nbsp;multiple&nbsp;of&nbsp;the&nbsp;y-axis. | 
+  | z | number | No | 1 | Scaling&nbsp;multiple&nbsp;of&nbsp;the&nbsp;z-axis. | 
+  | centerX | number | No | 0 | X&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;point. | 
+  | centerY | number | No | 0 | Y&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;point. | 
+
+
+- Return values
+    | Type | Description | 
+  | -------- | -------- |
+  | Object | Matrix&nbsp;object&nbsp;after&nbsp;the&nbsp;scaling&nbsp;effect&nbsp;is&nbsp;added. | 
+
+- Example
+  
+  ```
+  import Matrix4 from '@ohos.matrix4'
+  @Entry
+  @Component
+  struct Test {
+    private matrix1 = Matrix4.identity().scale({x:2, y:3, z:4, centerX:50, centerY:50})
+    build() {
+      Column() { 
+        Image($r("app.media.bg1")).transform(this.matrix1)
+          .width("40%")
+          .height(100)
       }
     }
-    ```
+  }
+  ```
+
+  ![en-us_image_0000001256978367](figures/en-us_image_0000001256978367.png)
 
-    ![](figures/s4-(1).png)
 
+### rotate
 
-### rotate<a name="section524516309189"></a>
+rotate({x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length}): Object
 
-rotate\(\{x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length\}\): Object
 
 Matrix rotation function, which is used to add the rotation effect to the x, y, and z axes of the current matrix.
 
--   Parameters
-
-    <a name="table36157136470"></a>
-    <table><thead align="left"><tr id="row126152139472"><th class="cellrowborder" valign="top" width="13.71%" id="mcps1.1.6.1.1"><p id="p4615141354713"><a name="p4615141354713"></a><a name="p4615141354713"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.62%" id="mcps1.1.6.1.2"><p id="p14615513174710"><a name="p14615513174710"></a><a name="p14615513174710"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="8.469999999999999%" id="mcps1.1.6.1.3"><p id="p5616121314473"><a name="p5616121314473"></a><a name="p5616121314473"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="p13616201310475"><a name="p13616201310475"></a><a name="p13616201310475"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="56.68%" id="mcps1.1.6.1.5"><p id="p1261631311479"><a name="p1261631311479"></a><a name="p1261631311479"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row861661313473"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p1861661310471"><a name="p1861661310471"></a><a name="p1861661310471"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p16161313104718"><a name="p16161313104718"></a><a name="p16161313104718"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p1361621334717"><a name="p1361621334717"></a><a name="p1361621334717"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p161611134473"><a name="p161611134473"></a><a name="p161611134473"></a>1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.68%" headers="mcps1.1.6.1.5 "><p id="p1661601311476"><a name="p1661601311476"></a><a name="p1661601311476"></a>X coordinate of the rotation axis vector.</p>
-    </td>
-    </tr>
-    <tr id="row861681317477"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p16616201314710"><a name="p16616201314710"></a><a name="p16616201314710"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p7616113124715"><a name="p7616113124715"></a><a name="p7616113124715"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p1561681344719"><a name="p1561681344719"></a><a name="p1561681344719"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p1461691314713"><a name="p1461691314713"></a><a name="p1461691314713"></a>1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.68%" headers="mcps1.1.6.1.5 "><p id="p18616181313474"><a name="p18616181313474"></a><a name="p18616181313474"></a>Y coordinate of the rotation axis vector.</p>
-    </td>
-    </tr>
-    <tr id="row17616201394719"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p16616141310476"><a name="p16616141310476"></a><a name="p16616141310476"></a>z</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p13616111344714"><a name="p13616111344714"></a><a name="p13616111344714"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p06172134472"><a name="p06172134472"></a><a name="p06172134472"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p16617131344717"><a name="p16617131344717"></a><a name="p16617131344717"></a>1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.68%" headers="mcps1.1.6.1.5 "><p id="p96171613154711"><a name="p96171613154711"></a><a name="p96171613154711"></a>Z coordinate of the rotation axis vector.</p>
-    </td>
-    </tr>
-    <tr id="row15336171718476"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p133367172470"><a name="p133367172470"></a><a name="p133367172470"></a>angle</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p11336151712472"><a name="p11336151712472"></a><a name="p11336151712472"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p73365175476"><a name="p73365175476"></a><a name="p73365175476"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p12336171716478"><a name="p12336171716478"></a><a name="p12336171716478"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.68%" headers="mcps1.1.6.1.5 "><p id="p123361917184716"><a name="p123361917184716"></a><a name="p123361917184716"></a>Rotation angle.</p>
-    </td>
-    </tr>
-    <tr id="row1661711364710"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p2061718133471"><a name="p2061718133471"></a><a name="p2061718133471"></a>centerX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p166171013194713"><a name="p166171013194713"></a><a name="p166171013194713"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p5617191318471"><a name="p5617191318471"></a><a name="p5617191318471"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p4617111314470"><a name="p4617111314470"></a><a name="p4617111314470"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.68%" headers="mcps1.1.6.1.5 "><p id="p66171813164717"><a name="p66171813164717"></a><a name="p66171813164717"></a>X coordinate of the center point.</p>
-    </td>
-    </tr>
-    <tr id="row461714130476"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p8617131312470"><a name="p8617131312470"></a><a name="p8617131312470"></a>centerY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p661761374713"><a name="p661761374713"></a><a name="p661761374713"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p1361719133473"><a name="p1361719133473"></a><a name="p1361719133473"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p116173132476"><a name="p116173132476"></a><a name="p116173132476"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.68%" headers="mcps1.1.6.1.5 "><p id="p15617313164712"><a name="p15617313164712"></a><a name="p15617313164712"></a>Y coordinate of the center point.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Return values
-
-    <a name="table105212343434"></a>
-    <table><thead align="left"><tr id="row165393415435"><th class="cellrowborder" valign="top" width="17.380000000000003%" id="mcps1.1.3.1.1"><p id="p45383415436"><a name="p45383415436"></a><a name="p45383415436"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="82.62%" id="mcps1.1.3.1.2"><p id="p953153484317"><a name="p953153484317"></a><a name="p953153484317"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1053634174317"><td class="cellrowborder" valign="top" width="17.380000000000003%" headers="mcps1.1.3.1.1 "><p id="p115311346433"><a name="p115311346433"></a><a name="p115311346433"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="82.62%" headers="mcps1.1.3.1.2 "><p id="p6680414184414"><a name="p6680414184414"></a><a name="p6680414184414"></a>Matrix object after the rotation effect is added.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    import Matrix4 from '@ohos.matrix4'
-    @Entry
-    @Component
-    struct Test {
-      private matrix1 = Matrix4.identity().rotate({x:1, y:1, z:2, angle:30})
-      build() {
-        Column() {
-          Image($r("app.media.bg1")).transform(this.matrix1)
-            .width("40%")
-            .height(100)
-        }.width("100%").margin({top:50})
-      }
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | No | 1 | X&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;rotation&nbsp;axis&nbsp;vector. | 
+  | y | number | No | 1 | Y&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;rotation&nbsp;axis&nbsp;vector. | 
+  | z | number | No | 1 | Z&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;rotation&nbsp;axis&nbsp;vector. | 
+  | angle | number | No | 0 | Rotation&nbsp;angle. | 
+  | centerX | number | No | 0 | X&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;point. | 
+  | centerY | number | No | 0 | Y&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;point. | 
+
+
+- Return values
+    | Type | Description | 
+  | -------- | -------- |
+  | Object | Matrix&nbsp;object&nbsp;after&nbsp;the&nbsp;rotation&nbsp;effect&nbsp;is&nbsp;added. | 
+
+- Example
+  
+  ```
+  import Matrix4 from '@ohos.matrix4'
+  @Entry
+  @Component
+  struct Test {
+    private matrix1 = Matrix4.identity().rotate({x:1, y:1, z:2, angle:30})
+    build() {
+      Column() {
+        Image($r("app.media.bg1")).transform(this.matrix1)
+          .width("40%")
+          .height(100)
+      }.width("100%").margin({top:50})
     }
-    ```
+  }
+  ```
 
-    ![](figures/1.png)
+  ![en-us_image_0000001211898504](figures/en-us_image_0000001211898504.png)
 
 
-### transformPoint<a name="section174811817131913"></a>
+### transformPoint
 
-transformPoint\(point: Point\): Point
+transformPoint(point: Point): Point
 
-Matrix point transformation function, which is used to apply the current transformation effect to a coordinate point.
 
--   Parameters
-
-    <a name="table119403115448"></a>
-    <table><thead align="left"><tr id="row2194113144418"><th class="cellrowborder" valign="top" width="13.71%" id="mcps1.1.6.1.1"><p id="p16194153124416"><a name="p16194153124416"></a><a name="p16194153124416"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.62%" id="mcps1.1.6.1.2"><p id="p13194133194414"><a name="p13194133194414"></a><a name="p13194133194414"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="8.469999999999999%" id="mcps1.1.6.1.3"><p id="p1519453194417"><a name="p1519453194417"></a><a name="p1519453194417"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="p1819415319442"><a name="p1819415319442"></a><a name="p1819415319442"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="56.68%" id="mcps1.1.6.1.5"><p id="p519423174416"><a name="p519423174416"></a><a name="p519423174416"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row51941131104416"><td class="cellrowborder" valign="top" width="13.71%" headers="mcps1.1.6.1.1 "><p id="p5194113134411"><a name="p5194113134411"></a><a name="p5194113134411"></a>point</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.1.6.1.2 "><p id="p4194531194418"><a name="p4194531194418"></a><a name="p4194531194418"></a>Point</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.469999999999999%" headers="mcps1.1.6.1.3 "><p id="p31941319445"><a name="p31941319445"></a><a name="p31941319445"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p819443119442"><a name="p819443119442"></a><a name="p819443119442"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.68%" headers="mcps1.1.6.1.5 "><p id="p18195193117449"><a name="p18195193117449"></a><a name="p18195193117449"></a>Point to be transformed.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Return values
-
-    <a name="table7708628154313"></a>
-    <table><thead align="left"><tr id="row19708202811434"><th class="cellrowborder" valign="top" width="17.380000000000003%" id="mcps1.1.3.1.1"><p id="p37081528184313"><a name="p37081528184313"></a><a name="p37081528184313"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="82.62%" id="mcps1.1.3.1.2"><p id="p570992819433"><a name="p570992819433"></a><a name="p570992819433"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row18709132813439"><td class="cellrowborder" valign="top" width="17.380000000000003%" headers="mcps1.1.3.1.1 "><p id="p670932804310"><a name="p670932804310"></a><a name="p670932804310"></a>Point</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="82.62%" headers="mcps1.1.3.1.2 "><p id="p1370992874318"><a name="p1370992874318"></a><a name="p1370992874318"></a>Point object after matrix transformation</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    import Matrix4 from '@ohos.matrix4'
-    import prompt from '@system.prompt'
-    
-    @Entry
-    @Component
-    struct Test {
-      private matrix1 = Matrix4.identity().transformPoint([100, 10])
-      build() {
-        Column() {
-         Button("get Point")
-          .onClick(() => {
-           prompt.showToast({message:JSON.stringify(this.matrix1),duration:2000})
-          }).backgroundColor(0x2788D9)
-        }.width("100%").padding(50)
-      }
-    }
-    ```
+Matrix point transformation function, which is used to apply the current transformation effect to a coordinate point.
 
-    ![](figures/222.gif)
 
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | point | Point | Yes | - | Point&nbsp;to&nbsp;be&nbsp;transformed. | 
+
+
+- Return values
+    | Type | Description | 
+  | -------- | -------- |
+  | Point | Point&nbsp;object&nbsp;after&nbsp;matrix&nbsp;transformation | 
+
+- Example
+  
+  ```
+  import Matrix4 from '@ohos.matrix4'
+  import prompt from '@system.prompt'
+  
+  @Entry
+  @Component
+  struct Test {
+    private matrix1 = Matrix4.identity().transformPoint([100, 10])
+    build() {
+      Column() {
+       Button("get Point")
+        .onClick(() => {
+         prompt.showToast({message:JSON.stringify(this.matrix1),duration:2000})
+        }).backgroundColor(0x2788D9)
+      }.width("100%").padding(50)
+    }
+  }
+  ```
 
+  ![en-us_image_0000001212218464](figures/en-us_image_0000001212218464.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-media-components-video.md b/en/application-dev/reference/arkui-ts/ts-media-components-video.md
new file mode 100644
index 0000000000000000000000000000000000000000..c00ac70de9b3ff1dfd321b41c92655826224b8de
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-media-components-video.md
@@ -0,0 +1,174 @@
+# Video
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+The **&lt;Video&gt;** component provides a video player.
+
+
+## Child Components
+
+The **&lt;Video&gt;** component does not support any child component.
+
+
+## APIs
+
+Video(value: VideoOption)
+
+- VideoOption attributes
+    | Name | Type | Mandatory | Default&nbsp;Value | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | src | string | No | - | Path&nbsp;of&nbsp;the&nbsp;video&nbsp;source. |
+  | currentProgressRate | number&nbsp;\|&nbsp;PlaybackSpeed<sup>8+</sup> | No | 1.0&nbsp;\|&nbsp;PlaybackSpeed.Speed_Forward_1_00_X | Video&nbsp;playback&nbsp;speed.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;The&nbsp;value&nbsp;of&nbsp;the&nbsp;number&nbsp;type&nbsp;can&nbsp;only&nbsp;be&nbsp;**0.75**,&nbsp;**1.0**,&nbsp;**1.25**,&nbsp;**1.75**,&nbsp;or&nbsp;**2.0**.<br/>>&nbsp;<br/>>&nbsp; |
+  | previewUri | string&nbsp;\|&nbsp;PixelMap<sup>8+</sup>&nbsp;\|[Resource](../../ui/ts-types.md) | No | - | Path&nbsp;of&nbsp;the&nbsp;preview&nbsp;image. |
+  | controller | [VideoController](#videocontroller) | No | - | Controller. |
+
+
+- PlaybackSpeed<sup>8+</sup>
+    | Name | Description | 
+  | -------- | -------- |
+  | Speed_Forward_0_75_X | 0.75x&nbsp;playback&nbsp;speed. | 
+  | Speed_Forward_1_00_X | 1x&nbsp;playback&nbsp;speed. | 
+  | Speed_Forward_1_25_X | 1.25x&nbsp;playback&nbsp;speed. | 
+  | Speed_Forward_1_75_X | 1.75x&nbsp;playback&nbsp;speed. | 
+  | Speed_Forward_2_00_X | 2x&nbsp;playback&nbsp;speed. | 
+
+
+## Attributes
+
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| muted | boolean | false | Whether&nbsp;the&nbsp;video&nbsp;is&nbsp;muted. |
+| autoPlay | boolean | false | Whether&nbsp;the&nbsp;video&nbsp;is&nbsp;automatically&nbsp;played. |
+| controls | boolean | true | Whether&nbsp;the&nbsp;video&nbsp;playback&nbsp;control&nbsp;bar&nbsp;is&nbsp;displayed. |
+| objectFit | [ImageFit](ts-basic-components-image.md) | Cover | Video&nbsp;display&nbsp;mode. |
+| loop | boolean | false | Whether&nbsp;a&nbsp;single&nbsp;video&nbsp;is&nbsp;played&nbsp;cyclically. |
+
+
+## Events
+
+  | Name | Description | 
+| -------- | -------- |
+| onStart()&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;video&nbsp;is&nbsp;played. | 
+| onPause()&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;video&nbsp;playback&nbsp;is&nbsp;paused. | 
+| onFinish()&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;video&nbsp;playback&nbsp;is&nbsp;finished. | 
+| onError()&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;video&nbsp;playback&nbsp;fails. |
+| onPrepared(event?:&nbsp;{&nbsp;duration:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;video&nbsp;preparation&nbsp;is&nbsp;complete.&nbsp;The&nbsp;video&nbsp;duration&nbsp;(in&nbsp;seconds)&nbsp;is&nbsp;obtained&nbsp;from&nbsp;**duration**. | 
+| onSeeking(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void | Triggered&nbsp;to&nbsp;report&nbsp;the&nbsp;time&nbsp;(in&nbsp;seconds)&nbsp;when&nbsp;the&nbsp;progress&nbsp;bar&nbsp;is&nbsp;being&nbsp;dragged. | 
+| onSeeked(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void | Triggered&nbsp;to&nbsp;report&nbsp;the&nbsp;playback&nbsp;time&nbsp;(in&nbsp;seconds)&nbsp;when&nbsp;the&nbsp;user&nbsp;finishes&nbsp;dragging&nbsp;the&nbsp;progress&nbsp;bar. | 
+| onUpdate(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void | Triggered&nbsp;once&nbsp;per&nbsp;250&nbsp;ms&nbsp;when&nbsp;the&nbsp;playback&nbsp;progress&nbsp;changes.&nbsp;The&nbsp;unit&nbsp;of&nbsp;the&nbsp;current&nbsp;playback&nbsp;time&nbsp;is&nbsp;second. | 
+
+
+### VideoController
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> A **VideoController** object can control one or more videos.
+
+  | Name | Description | 
+| -------- | -------- |
+| start()&nbsp;:&nbsp;void | Starts&nbsp;playback. | 
+| pause()&nbsp;:&nbsp;void | Pauses&nbsp;playback. | 
+| stop()&nbsp;:&nbsp;void | Stops&nbsp;playback. | 
+| setCurrentTime(value:&nbsp;number) | Sets&nbsp;the&nbsp;video&nbsp;playback&nbsp;position. | 
+| setCurrentTime(value:&nbsp;number,&nbsp;seekMode:&nbsp;SeekMode)<sup>8+</sup> | Sets&nbsp;the&nbsp;video&nbsp;playback&nbsp;position&nbsp;with&nbsp;the&nbsp;specified&nbsp;seek&nbsp;mode. |
+
+- SeekMode<sup>8+</sup>
+    | Name | Description | 
+  | -------- | -------- |
+  | PreviousKeyframe | Seeks&nbsp;to&nbsp;the&nbsp;nearest&nbsp;previous&nbsp;keyframe. | 
+  | NextKeyframe | Seeks&nbsp;to&nbsp;the&nbsp;nearest&nbsp;next&nbsp;keyframe. | 
+  | ClosestKeyframe | Seeks&nbsp;to&nbsp;the&nbsp;nearest&nbsp;keyframe. | 
+  | Accurate | Seeks&nbsp;to&nbsp;a&nbsp;specific&nbsp;frame,&nbsp;regardless&nbsp;of&nbsp;whether&nbsp;the&nbsp;frame&nbsp;is&nbsp;a&nbsp;keyframe. | 
+
+
+## Example
+
+
+```
+@Entry
+@Component
+struct VideoCreateComponent {
+  @State srcs: string = "/resources/video/video1.mp4";
+  @State previewUris: string = "/resources/image/media.JPG";
+  @State currentProgressRates: number = 1;
+  @State autoPlays: boolean = false;
+  @State controlsss: boolean = true;
+  myVideoController: VideoController = new VideoController();
+  @State startStaus: boolean = true;
+  build() {
+    Column() {
+      Video({
+        src: this.srcs,
+        previewUri: this.previewUris, 
+        currentProgressRate: this.currentProgressRates,
+        controller: this.myVideoController
+      }).width(700).height(500)
+        .autoPlay(this.autoPlays)
+        .controls(this.controlsss)
+        .onStart(() => {
+                  console.error('onStart');
+                })
+        .onPause(() => {
+                  console.error('onPause');
+                })
+        .onFinish(() => {
+                  console.error('onFinish');
+                })
+        .onError(() => {
+                  console.error('onFinish');
+                })
+        .onPrepared((e) => {
+                    console.error('onPrepared is ' + e.duration);
+                })
+        .onSeeking((e) => {
+                    console.error('onSeeking is ' + e.time);
+                })
+        .onSeeked((e) => {
+                    console.error('onSeekedis ' + e.time);
+                })
+        .onUpdate((e) => {
+                    console.error('onUpdateis ' + e.time);
+                })
+      Row() {
+        Button("src").onClick(() => {
+          if (this.srcs == "/resources/video/video1.mp4") {
+            this.srcs = "/resources/video/video2.mp4";
+          } else {
+            this.srcs = "/resources/video/video1.mp4";
+          }
+        });
+        Button("previewUri").onClick(() => {
+          if (this.previewUris == "/resources/image/media.JPG") {
+            this.previewUris = "/resources/image/sinlin.png";
+          } else {
+            this.previewUris = "/resources/image/media.JPG";
+          }
+        });
+        Button("controlsss").onClick(() => {
+          this.controlsss = !this.controlsss;
+        });
+      }
+
+      Row() {
+        Button("start").onClick(() => {
+          this.myVideoController.start();
+        });
+        Button("pause").onClick(() => {
+          this.myVideoController.pause();
+        });
+        Button("stop").onClick(() => {
+          this.myVideoController.stop();
+        });
+      }
+
+      Row() {
+        Button("setCurrentTime").onClick(() => {
+          this.myVideoController.setCurrentTime(9, SeekMode.Accurate);
+        });
+      }
+    }
+  }
+}
+```
diff --git a/en/application-dev/reference/arkui-ts/ts-media-components.md b/en/application-dev/reference/arkui-ts/ts-media-components.md
new file mode 100644
index 0000000000000000000000000000000000000000..51006bbc82a83d001c68a55c5246f8642479027d
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-media-components.md
@@ -0,0 +1,5 @@
+# Media Components
+
+
+
+- **[Video](ts-media-components-video.md)**
\ No newline at end of file
diff --git a/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md b/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
index cce4ea2419a5062a6139d714c5e7c74e8f606bf0..8140b6010e17a2c3e5a271bfbb45778933b3fed2 100644
--- a/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
+++ b/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
@@ -1,190 +1,48 @@
-# List Selection Dialog Box<a name="EN-US_TOPIC_0000001192755136"></a>
+# Action Sheet
 
->![](../../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.
 
-List pop-up window.
+> ![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.
 
-## Required Permissions<a name="section137491348987"></a>
+
+An action sheet is a dialog box that displays actions a user can take.
+
+
+## Required Permissions
 
 None
 
-## ActionSheet.show<a name="section91411857161619"></a>
-
-show\(options: \{  [paramObject1](#table816913216616)\}\)
-
-Defines and shows the list popup window.
-
--   paramObject1 parameters
-
-    <a name="table816913216616"></a>
-    <table><thead align="left"><tr id="row016972667"><th class="cellrowborder" valign="top" width="12.31%" id="mcps1.1.6.1.1"><p id="p101691221267"><a name="p101691221267"></a><a name="p101691221267"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="32.61%" id="mcps1.1.6.1.2"><p id="p616916211613"><a name="p616916211613"></a><a name="p616916211613"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="7.1499999999999995%" id="mcps1.1.6.1.3"><p id="p21691725613"><a name="p21691725613"></a><a name="p21691725613"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.54%" id="mcps1.1.6.1.4"><p id="p4169221969"><a name="p4169221969"></a><a name="p4169221969"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="27.389999999999997%" id="mcps1.1.6.1.5"><p id="p616922465"><a name="p616922465"></a><a name="p616922465"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row617013216610"><td class="cellrowborder" valign="top" width="12.31%" headers="mcps1.1.6.1.1 "><p id="p11170822063"><a name="p11170822063"></a><a name="p11170822063"></a>title</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="32.61%" headers="mcps1.1.6.1.2 "><p id="p1483117481135"><a name="p1483117481135"></a><a name="p1483117481135"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.1499999999999995%" headers="mcps1.1.6.1.3 "><p id="p19393124211313"><a name="p19393124211313"></a><a name="p19393124211313"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.54%" headers="mcps1.1.6.1.4 "><p id="p51702216617"><a name="p51702216617"></a><a name="p51702216617"></a>None</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="27.389999999999997%" headers="mcps1.1.6.1.5 "><p id="p479412426512"><a name="p479412426512"></a><a name="p479412426512"></a>Title of the dialog box.</p>
-    </td>
-    </tr>
-    <tr id="row4170723612"><td class="cellrowborder" valign="top" width="12.31%" headers="mcps1.1.6.1.1 "><p id="p171709214610"><a name="p171709214610"></a><a name="p171709214610"></a>message</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="32.61%" headers="mcps1.1.6.1.2 "><p id="p1517018210613"><a name="p1517018210613"></a><a name="p1517018210613"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.1499999999999995%" headers="mcps1.1.6.1.3 "><p id="p141701022068"><a name="p141701022068"></a><a name="p141701022068"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.54%" headers="mcps1.1.6.1.4 "><p id="p20170429614"><a name="p20170429614"></a><a name="p20170429614"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="27.389999999999997%" headers="mcps1.1.6.1.5 "><p id="p17931042651"><a name="p17931042651"></a><a name="p17931042651"></a>Content of the dialog box.</p>
-    </td>
-    </tr>
-    <tr id="row7170625613"><td class="cellrowborder" valign="top" width="12.31%" headers="mcps1.1.6.1.1 "><p id="p11170627619"><a name="p11170627619"></a><a name="p11170627619"></a>autoCancel</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="32.61%" headers="mcps1.1.6.1.2 "><p id="p71701121661"><a name="p71701121661"></a><a name="p71701121661"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.1499999999999995%" headers="mcps1.1.6.1.3 "><p id="p8170192564"><a name="p8170192564"></a><a name="p8170192564"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.54%" headers="mcps1.1.6.1.4 "><p id="p3714415149"><a name="p3714415149"></a><a name="p3714415149"></a>true</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="27.389999999999997%" headers="mcps1.1.6.1.5 "><p id="p2792194217516"><a name="p2792194217516"></a><a name="p2792194217516"></a>Whether to close the dialog box when the overlay is clicked.</p>
-    </td>
-    </tr>
-    <tr id="row4619154917209"><td class="cellrowborder" valign="top" width="12.31%" headers="mcps1.1.6.1.1 "><p id="p15281132516419"><a name="p15281132516419"></a><a name="p15281132516419"></a>confirm</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="32.61%" headers="mcps1.1.6.1.2 "><p id="p46868785117"><a name="p46868785117"></a><a name="p46868785117"></a>{</p>
-    <p id="p568627135117"><a name="p568627135117"></a><a name="p568627135117"></a>value: string,</p>
-    <p id="p1767616508415"><a name="p1767616508415"></a><a name="p1767616508415"></a>action: () =&gt; void</p>
-    <p id="p36866718517"><a name="p36866718517"></a><a name="p36866718517"></a>}</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.1499999999999995%" headers="mcps1.1.6.1.3 "><p id="p1161910499207"><a name="p1161910499207"></a><a name="p1161910499207"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.54%" headers="mcps1.1.6.1.4 "><p id="p65590225511"><a name="p65590225511"></a><a name="p65590225511"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="27.389999999999997%" headers="mcps1.1.6.1.5 "><p id="p1479224217510"><a name="p1479224217510"></a><a name="p1479224217510"></a>Text content of the confirm button and callback upon button clicking.</p>
-    <p id="p1167213156577"><a name="p1167213156577"></a><a name="p1167213156577"></a><strong id="b14905141312349"><a name="b14905141312349"></a><a name="b14905141312349"></a>value</strong>: button text.</p>
-    <p id="p9727125155715"><a name="p9727125155715"></a><a name="p9727125155715"></a><strong id="b11601850183717"><a name="b11601850183717"></a><a name="b11601850183717"></a>action</strong>: callback upon button clicking.</p>
-    </td>
-    </tr>
-    <tr id="row1212812822210"><td class="cellrowborder" valign="top" width="12.31%" headers="mcps1.1.6.1.1 "><p id="p11128181222"><a name="p11128181222"></a><a name="p11128181222"></a>cancel</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="32.61%" headers="mcps1.1.6.1.2 "><p id="p38813406419"><a name="p38813406419"></a><a name="p38813406419"></a>() =&gt; void</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.1499999999999995%" headers="mcps1.1.6.1.3 "><p id="p312819882214"><a name="p312819882214"></a><a name="p312819882214"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.54%" headers="mcps1.1.6.1.4 "><p id="p1128158112211"><a name="p1128158112211"></a><a name="p1128158112211"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="27.389999999999997%" headers="mcps1.1.6.1.5 "><p id="p678919421452"><a name="p678919421452"></a><a name="p678919421452"></a>Callback invoked when the dialog box is closed after the overlay is clicked.</p>
-    </td>
-    </tr>
-    <tr id="row1842942319416"><td class="cellrowborder" valign="top" width="12.31%" headers="mcps1.1.6.1.1 "><p id="p11429192314412"><a name="p11429192314412"></a><a name="p11429192314412"></a>alignment</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="32.61%" headers="mcps1.1.6.1.2 "><p id="p1542910231744"><a name="p1542910231744"></a><a name="p1542910231744"></a><a href="ts-methods-custom-dialog-box.md#li46304184186">DialogAlignment</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.1499999999999995%" headers="mcps1.1.6.1.3 "><p id="p842914239415"><a name="p842914239415"></a><a name="p842914239415"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.54%" headers="mcps1.1.6.1.4 "><p id="p842916234416"><a name="p842916234416"></a><a name="p842916234416"></a>DialogAlignment.Default</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="27.389999999999997%" headers="mcps1.1.6.1.5 "><p id="p1342922318415"><a name="p1342922318415"></a><a name="p1342922318415"></a>Alignment mode of the dialog box in the vertical direction.</p>
-    </td>
-    </tr>
-    <tr id="row164541242866"><td class="cellrowborder" valign="top" width="12.31%" headers="mcps1.1.6.1.1 "><p id="p745414424612"><a name="p745414424612"></a><a name="p745414424612"></a>offset</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="32.61%" headers="mcps1.1.6.1.2 "><p id="p334103919529"><a name="p334103919529"></a><a name="p334103919529"></a>{</p>
-    <p id="p1491213305918"><a name="p1491213305918"></a><a name="p1491213305918"></a>dx: Length,</p>
-    <p id="p534123918528"><a name="p534123918528"></a><a name="p534123918528"></a>dy: Length</p>
-    <p id="p1934183925219"><a name="p1934183925219"></a><a name="p1934183925219"></a>}</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.1499999999999995%" headers="mcps1.1.6.1.3 "><p id="p64540421767"><a name="p64540421767"></a><a name="p64540421767"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.54%" headers="mcps1.1.6.1.4 "><p id="p19422212014"><a name="p19422212014"></a><a name="p19422212014"></a>{</p>
-    <p id="p2251182219015"><a name="p2251182219015"></a><a name="p2251182219015"></a>dx: 0,</p>
-    <p id="p117634271408"><a name="p117634271408"></a><a name="p117634271408"></a>dy: 0</p>
-    <p id="p8454124215613"><a name="p8454124215613"></a><a name="p8454124215613"></a>}</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="27.389999999999997%" headers="mcps1.1.6.1.5 "><p id="p44541142362"><a name="p44541142362"></a><a name="p44541142362"></a>Offset of the dialog box relative to the alignment position.</p>
-    </td>
-    </tr>
-    <tr id="row07688549148"><td class="cellrowborder" valign="top" width="12.31%" headers="mcps1.1.6.1.1 "><p id="p8768125419148"><a name="p8768125419148"></a><a name="p8768125419148"></a>sheets</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="32.61%" headers="mcps1.1.6.1.2 "><p id="p1761716152522"><a name="p1761716152522"></a><a name="p1761716152522"></a>Array&lt;<a href="#table896716596134">SheetInfo</a>&gt;</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.1499999999999995%" headers="mcps1.1.6.1.3 "><p id="p1176845471411"><a name="p1176845471411"></a><a name="p1176845471411"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.54%" headers="mcps1.1.6.1.4 "><p id="p16768954111413"><a name="p16768954111413"></a><a name="p16768954111413"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="27.389999999999997%" headers="mcps1.1.6.1.5 "><p id="p16768954151416"><a name="p16768954151416"></a><a name="p16768954151416"></a>Options in the dialog box. Each option supports the image, text, and callback.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   SheetInfo parameters
-
-    <a name="table5608164215511"></a>
-    <table><thead align="left"><tr id="row137221742754"><th class="cellrowborder" valign="top" width="13.848615138486153%" id="mcps1.1.6.1.1"><p id="p117224429519"><a name="p117224429519"></a><a name="p117224429519"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="21.85781421857814%" id="mcps1.1.6.1.2"><p id="p972216421255"><a name="p972216421255"></a><a name="p972216421255"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.858614138586143%" id="mcps1.1.6.1.3"><p id="p1472218421751"><a name="p1472218421751"></a><a name="p1472218421751"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.958904109589042%" id="mcps1.1.6.1.4"><p id="p97229421454"><a name="p97229421454"></a><a name="p97229421454"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="39.47605239476052%" id="mcps1.1.6.1.5"><p id="p1372214217516"><a name="p1372214217516"></a><a name="p1372214217516"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row9722114218514"><td class="cellrowborder" valign="top" width="13.848615138486153%" headers="mcps1.1.6.1.1 "><p id="p072210425511"><a name="p072210425511"></a><a name="p072210425511"></a>title</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.85781421857814%" headers="mcps1.1.6.1.2 "><p id="p187227421515"><a name="p187227421515"></a><a name="p187227421515"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.858614138586143%" headers="mcps1.1.6.1.3 "><p id="p47220421052"><a name="p47220421052"></a><a name="p47220421052"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.958904109589042%" headers="mcps1.1.6.1.4 "><p id="p15722142354"><a name="p15722142354"></a><a name="p15722142354"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="39.47605239476052%" headers="mcps1.1.6.1.5 "><p id="p15722154216519"><a name="p15722154216519"></a><a name="p15722154216519"></a>Sheet text.</p>
-    </td>
-    </tr>
-    <tr id="row1172213429512"><td class="cellrowborder" valign="top" width="13.848615138486153%" headers="mcps1.1.6.1.1 "><p id="p137232042851"><a name="p137232042851"></a><a name="p137232042851"></a>icon</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.85781421857814%" headers="mcps1.1.6.1.2 "><p id="p147231042359"><a name="p147231042359"></a><a name="p147231042359"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.858614138586143%" headers="mcps1.1.6.1.3 "><p id="p2723642952"><a name="p2723642952"></a><a name="p2723642952"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.958904109589042%" headers="mcps1.1.6.1.4 "><p id="p177238421751"><a name="p177238421751"></a><a name="p177238421751"></a>None</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="39.47605239476052%" headers="mcps1.1.6.1.5 "><p id="p572344219515"><a name="p572344219515"></a><a name="p572344219515"></a>Sheet icon.</p>
-    </td>
-    </tr>
-    <tr id="row147236422512"><td class="cellrowborder" valign="top" width="13.848615138486153%" headers="mcps1.1.6.1.1 "><p id="p157237421257"><a name="p157237421257"></a><a name="p157237421257"></a>action</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.85781421857814%" headers="mcps1.1.6.1.2 "><p id="p1572434220515"><a name="p1572434220515"></a><a name="p1572434220515"></a>()=&gt;void</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.858614138586143%" headers="mcps1.1.6.1.3 "><p id="p5724542650"><a name="p5724542650"></a><a name="p5724542650"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.958904109589042%" headers="mcps1.1.6.1.4 "><p id="p27247421352"><a name="p27247421352"></a><a name="p27247421352"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="39.47605239476052%" headers="mcps1.1.6.1.5 "><p id="p1172424220513"><a name="p1172424220513"></a><a name="p1172424220513"></a>Callback when the sheet is selected.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section080615383813"></a>
+
+## ActionSheet.show
+
+show(options: { paramObject1})
+
+Defines and shows the action sheet.
+
+- paramObject1 parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | title | string&nbsp;\|[Resource](../../ui/ts-types.md#resource) | No | None | Title&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box. |
+  | message | string&nbsp;\|[Resource](../../ui/ts-types.md#resource) |  |  | Content&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box. |
+  | autoCancel | boolean | No | true | Whether&nbsp;to&nbsp;close&nbsp;the&nbsp;dialog&nbsp;box&nbsp;when&nbsp;the&nbsp;overlay&nbsp;is&nbsp;clicked. |
+  | confirm | {<br/>value:&nbsp;string&nbsp;\|[Resource](../../ui/ts-types.md#resource),<br>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | number | string | Text&nbsp;content&nbsp;of&nbsp;the&nbsp;confirm&nbsp;button&nbsp;and&nbsp;callback&nbsp;upon&nbsp;button&nbsp;clicking.<br/>**value**:&nbsp;button&nbsp;text.<br/>**action**:&nbsp;callback&nbsp;upon&nbsp;button&nbsp;clicking. |
+  | cancel | ()&nbsp;=&gt;&nbsp;void | No | - | Callback&nbsp;invoked&nbsp;when&nbsp;the&nbsp;dialog&nbsp;box&nbsp;is&nbsp;closed&nbsp;after&nbsp;the&nbsp;overlay&nbsp;is&nbsp;clicked. |
+  | alignment | DialogAlignment | No | DialogAlignment.Default | Alignment&nbsp;mode&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box&nbsp;in&nbsp;the&nbsp;vertical&nbsp;direction. |
+  | offset | {<br/>dx:&nbsp;Length\|[Resource](../../ui/ts-types.md#resource)<br/>dy:&nbsp;Length\|[Resource](../../ui/ts-types.md#resource)<br/>} | No | - | Offset&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box&nbsp;relative&nbsp;to&nbsp;the&nbsp;alignment&nbsp;position. |
+  | sheets | Array&lt;SheetInfo&gt; | Yes | - | Options&nbsp;in&nbsp;the&nbsp;dialog&nbsp;box.&nbsp;Each&nbsp;option&nbsp;supports&nbsp;the&nbsp;image,&nbsp;text,&nbsp;and&nbsp;callback. |
+
+- SheetInfo parameters
+    | | | | | |
+  | -------- | -------- | -------- | -------- | -------- |
+  | Name | Type | Mandatory | Default&nbsp;Value | Description |
+  | title | string | Yes | - | Sheet&nbsp;text. |
+  | icon | string | No | None | Sheet&nbsp;icon. |
+  | action | ()=&gt;void | Yes | - | Callback&nbsp;when&nbsp;the&nbsp;sheet&nbsp;is&nbsp;selected. |
+
+
+## Example
+
+
 
 ```
 @Entry
@@ -231,5 +89,6 @@ struct ActionSheetExapmle {
 }
 ```
 
-![](figures/en-us_image_0000001201475612.gif)
+
+![en-us_image_0000001212058508](figures/en-us_image_0000001212058508.gif)
 
diff --git a/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md b/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
index b5ce18d87c65bd9e182c7e127cfce6b653778d9a..fd9f05f595923840ffb8cdc47b398e795919bb65 100644
--- a/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
+++ b/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
@@ -1,283 +1,47 @@
-# Alert Dialog Box<a name="EN-US_TOPIC_0000001237555093"></a>
+# Alert Dialog Box
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-You can set the text content and response callback for an alert dialog box.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
 
-## Attributes<a name="section04482591607"></a>
+You can set the text content and response callback for an alert dialog box.
 
-<a name="table1140mcpsimp"></a>
-<table><thead align="left"><tr id="row1147mcpsimp"><th class="cellrowborder" valign="top" width="16.59%" id="mcps1.1.5.1.1"><p id="p1149mcpsimp"><a name="p1149mcpsimp"></a><a name="p1149mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="30.15%" id="mcps1.1.5.1.2"><p id="p1151mcpsimp"><a name="p1151mcpsimp"></a><a name="p1151mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="17.89%" id="mcps1.1.5.1.3"><p id="p1153mcpsimp"><a name="p1153mcpsimp"></a><a name="p1153mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="35.370000000000005%" id="mcps1.1.5.1.4"><p id="p1155mcpsimp"><a name="p1155mcpsimp"></a><a name="p1155mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1156mcpsimp"><td class="cellrowborder" valign="top" width="16.59%" headers="mcps1.1.5.1.1 "><p id="p1158mcpsimp"><a name="p1158mcpsimp"></a><a name="p1158mcpsimp"></a>show</p>
-</td>
-<td class="cellrowborder" valign="top" width="30.15%" headers="mcps1.1.5.1.2 "><p id="p8684433112810"><a name="p8684433112810"></a><a name="p8684433112810"></a>options: { <a href="#li132561452141616">paramObject1</a>| <a href="#li45381332179">paramObject2</a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.89%" headers="mcps1.1.5.1.3 "><p id="p1162mcpsimp"><a name="p1162mcpsimp"></a><a name="p1162mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="35.370000000000005%" headers="mcps1.1.5.1.4 "><p id="p1164mcpsimp"><a name="p1164mcpsimp"></a><a name="p1164mcpsimp"></a>Defines and displays the <strong id="b1333743135220"><a name="b1333743135220"></a><a name="b1333743135220"></a>&lt;AlertDialog&gt;</strong> component.</p>
-</td>
-</tr>
-</tbody>
-</table>
 
--   <a name="li132561452141616"></a>paramObject1 parameters
+## Attributes
 
-    <a name="table816913216616"></a>
-    <table><thead align="left"><tr id="row016972667"><th class="cellrowborder" valign="top" width="16.96%" id="mcps1.1.6.1.1"><p id="p101691221267"><a name="p101691221267"></a><a name="p101691221267"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="30.18%" id="mcps1.1.6.1.2"><p id="p616916211613"><a name="p616916211613"></a><a name="p616916211613"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.14%" id="mcps1.1.6.1.3"><p id="p21691725613"><a name="p21691725613"></a><a name="p21691725613"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="15.329999999999998%" id="mcps1.1.6.1.4"><p id="p4169221969"><a name="p4169221969"></a><a name="p4169221969"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="27.389999999999997%" id="mcps1.1.6.1.5"><p id="p616922465"><a name="p616922465"></a><a name="p616922465"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row617013216610"><td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.1 "><p id="p11170822063"><a name="p11170822063"></a><a name="p11170822063"></a>title</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.18%" headers="mcps1.1.6.1.2 "><p id="p1483117481135"><a name="p1483117481135"></a><a name="p1483117481135"></a>string | Resource</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.14%" headers="mcps1.1.6.1.3 "><p id="p19393124211313"><a name="p19393124211313"></a><a name="p19393124211313"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.329999999999998%" headers="mcps1.1.6.1.4 "><p id="p51702216617"><a name="p51702216617"></a><a name="p51702216617"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="27.389999999999997%" headers="mcps1.1.6.1.5 "><p id="p479412426512"><a name="p479412426512"></a><a name="p479412426512"></a>Title of a dialog box.</p>
-    </td>
-    </tr>
-    <tr id="row4170723612"><td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.1 "><p id="p171709214610"><a name="p171709214610"></a><a name="p171709214610"></a>message</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.18%" headers="mcps1.1.6.1.2 "><p id="p1517018210613"><a name="p1517018210613"></a><a name="p1517018210613"></a>string | Resource</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.14%" headers="mcps1.1.6.1.3 "><p id="p141701022068"><a name="p141701022068"></a><a name="p141701022068"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.329999999999998%" headers="mcps1.1.6.1.4 "><p id="p20170429614"><a name="p20170429614"></a><a name="p20170429614"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="27.389999999999997%" headers="mcps1.1.6.1.5 "><p id="p17931042651"><a name="p17931042651"></a><a name="p17931042651"></a>Content of the dialog box.</p>
-    </td>
-    </tr>
-    <tr id="row7170625613"><td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.1 "><p id="p11170627619"><a name="p11170627619"></a><a name="p11170627619"></a>autoCancel</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.18%" headers="mcps1.1.6.1.2 "><p id="p71701121661"><a name="p71701121661"></a><a name="p71701121661"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.14%" headers="mcps1.1.6.1.3 "><p id="p8170192564"><a name="p8170192564"></a><a name="p8170192564"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.329999999999998%" headers="mcps1.1.6.1.4 "><p id="p3714415149"><a name="p3714415149"></a><a name="p3714415149"></a>true</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="27.389999999999997%" headers="mcps1.1.6.1.5 "><p id="p2792194217516"><a name="p2792194217516"></a><a name="p2792194217516"></a>Whether to close the dialog box when the overlay is clicked.</p>
-    </td>
-    </tr>
-    <tr id="row4619154917209"><td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.1 "><p id="p15281132516419"><a name="p15281132516419"></a><a name="p15281132516419"></a>confirm</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.18%" headers="mcps1.1.6.1.2 "><p id="p1867614501417"><a name="p1867614501417"></a><a name="p1867614501417"></a>{</p>
-    <p id="p8676115020415"><a name="p8676115020415"></a><a name="p8676115020415"></a>value: string | Resource,</p>
-    <p id="p1743134451513"><a name="p1743134451513"></a><a name="p1743134451513"></a>fontColor?: Color | number | string | Resource,</p>
-    <p id="p18233112112177"><a name="p18233112112177"></a><a name="p18233112112177"></a>backgroundColor?: Color | number | string | Resource,</p>
-    <p id="p1767616508415"><a name="p1767616508415"></a><a name="p1767616508415"></a>action: () =&gt; void</p>
-    <p id="p0676250345"><a name="p0676250345"></a><a name="p0676250345"></a>}</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.14%" headers="mcps1.1.6.1.3 "><p id="p1161910499207"><a name="p1161910499207"></a><a name="p1161910499207"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.329999999999998%" headers="mcps1.1.6.1.4 "><p id="p65590225511"><a name="p65590225511"></a><a name="p65590225511"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="27.389999999999997%" headers="mcps1.1.6.1.5 "><p id="p1479224217510"><a name="p1479224217510"></a><a name="p1479224217510"></a>Text content, text color, background color, and click callback of the confirm button.</p>
-    </td>
-    </tr>
-    <tr id="row1212812822210"><td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.1 "><p id="p11128181222"><a name="p11128181222"></a><a name="p11128181222"></a>cancel</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.18%" headers="mcps1.1.6.1.2 "><p id="p38813406419"><a name="p38813406419"></a><a name="p38813406419"></a>() =&gt; void</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.14%" headers="mcps1.1.6.1.3 "><p id="p312819882214"><a name="p312819882214"></a><a name="p312819882214"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.329999999999998%" headers="mcps1.1.6.1.4 "><p id="p1128158112211"><a name="p1128158112211"></a><a name="p1128158112211"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="27.389999999999997%" headers="mcps1.1.6.1.5 "><p id="p678919421452"><a name="p678919421452"></a><a name="p678919421452"></a>Callback invoked when the dialog box is closed after the overlay is clicked.</p>
-    </td>
-    </tr>
-    <tr id="row1842942319416"><td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.1 "><p id="p11429192314412"><a name="p11429192314412"></a><a name="p11429192314412"></a>alignment</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.18%" headers="mcps1.1.6.1.2 "><p id="p1542910231744"><a name="p1542910231744"></a><a name="p1542910231744"></a><a href="ts-methods-custom-dialog-box.md#li46304184186">DialogAlignment</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.14%" headers="mcps1.1.6.1.3 "><p id="p842914239415"><a name="p842914239415"></a><a name="p842914239415"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.329999999999998%" headers="mcps1.1.6.1.4 "><p id="p842916234416"><a name="p842916234416"></a><a name="p842916234416"></a><a href="ts-methods-custom-dialog-box.md#li46304184186">DialogAlignment</a>.Default</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="27.389999999999997%" headers="mcps1.1.6.1.5 "><p id="p1342922318415"><a name="p1342922318415"></a><a name="p1342922318415"></a>Alignment mode of the dialog box in the vertical direction.</p>
-    </td>
-    </tr>
-    <tr id="row164541242866"><td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.1 "><p id="p745414424612"><a name="p745414424612"></a><a name="p745414424612"></a>offset</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.18%" headers="mcps1.1.6.1.2 "><p id="p15886722116"><a name="p15886722116"></a><a name="p15886722116"></a>{</p>
-    <p id="p450717617111"><a name="p450717617111"></a><a name="p450717617111"></a>dx: Length | Resource,</p>
-    <p id="p383151220115"><a name="p383151220115"></a><a name="p383151220115"></a>dy: Length  | Resource</p>
-    <p id="p41289862216"><a name="p41289862216"></a><a name="p41289862216"></a>}</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.14%" headers="mcps1.1.6.1.3 "><p id="p64540421767"><a name="p64540421767"></a><a name="p64540421767"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.329999999999998%" headers="mcps1.1.6.1.4 "><p id="p8454124215613"><a name="p8454124215613"></a><a name="p8454124215613"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="27.389999999999997%" headers="mcps1.1.6.1.5 "><p id="p44541142362"><a name="p44541142362"></a><a name="p44541142362"></a>Offset of the dialog box relative to the alignment position.</p>
-    </td>
-    </tr>
-    <tr id="row07688549148"><td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.1 "><p id="p8768125419148"><a name="p8768125419148"></a><a name="p8768125419148"></a>gridCount</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.18%" headers="mcps1.1.6.1.2 "><p id="p1976845416140"><a name="p1976845416140"></a><a name="p1976845416140"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.14%" headers="mcps1.1.6.1.3 "><p id="p1176845471411"><a name="p1176845471411"></a><a name="p1176845471411"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.329999999999998%" headers="mcps1.1.6.1.4 "><p id="p16768954111413"><a name="p16768954111413"></a><a name="p16768954111413"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="27.389999999999997%" headers="mcps1.1.6.1.5 "><p id="p16768954151416"><a name="p16768954151416"></a><a name="p16768954151416"></a>Number of grid columns occupied by the width of the dialog box.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| show | options:&nbsp;{&nbsp;paramObject1\|&nbsp;paramObject2} | - | Defines&nbsp;and&nbsp;displays&nbsp;the&nbsp;**&lt;AlertDialog&gt;**&nbsp;component. | 
 
+- paramObject1 parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | title | string&nbsp;\|[Resource](../../ui/ts-types.md#resource) |  |  | Title&nbsp;of&nbsp;a&nbsp;dialog&nbsp;box. |
+  | message | string&nbsp;\|[Resource](../../ui/ts-types.md#resource) |  |  | Content&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box. |
+  | autoCancel | boolean | No | true | Whether&nbsp;to&nbsp;close&nbsp;the&nbsp;dialog&nbsp;box&nbsp;when&nbsp;the&nbsp;overlay&nbsp;is&nbsp;clicked. |
+  | confirm | {<br/>value:&nbsp;string&nbsp;\|[Resource](../../ui/ts-types.md#resource),<br>fontColor?: Color\|number \|string \|[Resource](../../ui/ts-types.md#resource),<br/>backgroundColor?:Color  \|number\|string\|[Resource](../../ui/ts-types.md#resource),<br>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} <br/> |  |  | Text content, text color, background color, and click callback of the confirm button. |
+  | cancel | ()&nbsp;=&gt;&nbsp;void | No | - | Callback&nbsp;invoked&nbsp;when&nbsp;the&nbsp;dialog&nbsp;box&nbsp;is&nbsp;closed&nbsp;after&nbsp;the&nbsp;overlay&nbsp;is&nbsp;clicked. |
+  | alignment | DialogAlignment | No | DialogAlignment.Default | Alignment&nbsp;mode&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box&nbsp;in&nbsp;the&nbsp;vertical&nbsp;direction. |
+  | offset | {<br/>dx:&nbsp;Length&nbsp;\|[Resource](../../ui/ts-types.md#resource),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|[Resource](../../ui/ts-types.md#resource)<br/>} |  |  | Offset&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box&nbsp;relative&nbsp;to&nbsp;the&nbsp;alignment&nbsp;position. |
+  | gridCount | number | No | - | Number&nbsp;of&nbsp;grid&nbsp;columns&nbsp;occupied&nbsp;by&nbsp;the&nbsp;width&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box. |
 
--   <a name="li45381332179"></a>paramObject2 parameters
+- paramObject2 parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | title | string&nbsp;\|[Resource](../../ui/ts-types.md#resource) | No | - | Title&nbsp;of&nbsp;a&nbsp;dialog&nbsp;box. |
+  | message | string&nbsp;\|[Resource](../../ui/ts-types.md#resource) | Yes | - | Content&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box. |
+  | autoCancel | boolean | No | true | Whether&nbsp;to&nbsp;close&nbsp;the&nbsp;dialog&nbsp;box&nbsp;when&nbsp;the&nbsp;overlay&nbsp;is&nbsp;clicked. |
+  | primaryButton | {<br/>value:&nbsp;string&nbsp;\|[Resource](../../ui/ts-types.md#resource),<br>fontColor?: Color\|number \|string \|[Resource](../../ui/ts-types.md#resource),<br/>backgroundColor?:Color  \|number\|string\|[Resource](../../ui/ts-types.md#resource),<br>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} <br/> |  |  | Text&nbsp;content,&nbsp;text&nbsp;color,&nbsp;background&nbsp;color,&nbsp;and&nbsp;click&nbsp;callback&nbsp;of&nbsp;the&nbsp;primary&nbsp;button. |
+  | secondaryButton | {<br/>value:&nbsp;string&nbsp;\|[Resource](../../ui/ts-types.md#resource),<br>fontColor?: Color\|number \|string \|[Resource](../../ui/ts-types.md#resource),<br/>backgroundColor?:Color  \|number\|string\|[Resource](../../ui/ts-types.md#resource),<br>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} <br/> |  |  | Text&nbsp;content,&nbsp;text&nbsp;color,&nbsp;background&nbsp;color,&nbsp;and&nbsp;click&nbsp;callback&nbsp;of&nbsp;the&nbsp;secondary&nbsp;button. |
+  | cancel | ()&nbsp;=&gt;&nbsp;void | No | - | Callback&nbsp;invoked&nbsp;when&nbsp;the&nbsp;dialog&nbsp;box&nbsp;is&nbsp;closed&nbsp;after&nbsp;the&nbsp;overlay&nbsp;is&nbsp;clicked. |
+  | alignment | DialogAlignment | No | DialogAlignment.Default | Alignment&nbsp;mode&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box&nbsp;in&nbsp;the&nbsp;vertical&nbsp;direction. |
+  | offset | {<br/>dx:&nbsp;Length&nbsp;\|[Resource](../../ui/ts-types.md#resource),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|[Resource](../../ui/ts-types.md#resource)<br/>} |  |  | Offset&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box&nbsp;relative&nbsp;to&nbsp;the&nbsp;alignment&nbsp;position. |
+  | gridCount | number | No | - | Number&nbsp;of&nbsp;grid&nbsp;columns&nbsp;occupied&nbsp;by&nbsp;the&nbsp;width&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box. |
 
-    <a name="table1413716501059"></a>
-    <table><thead align="left"><tr id="row3137105018516"><th class="cellrowborder" valign="top" width="16.76%" id="mcps1.1.6.1.1"><p id="p313711500510"><a name="p313711500510"></a><a name="p313711500510"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="37.53%" id="mcps1.1.6.1.2"><p id="p8137145019516"><a name="p8137145019516"></a><a name="p8137145019516"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="8.25%" id="mcps1.1.6.1.3"><p id="p101371850657"><a name="p101371850657"></a><a name="p101371850657"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.32%" id="mcps1.1.6.1.4"><p id="p2137150952"><a name="p2137150952"></a><a name="p2137150952"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="21.14%" id="mcps1.1.6.1.5"><p id="p51371250658"><a name="p51371250658"></a><a name="p51371250658"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row201373501056"><td class="cellrowborder" valign="top" width="16.76%" headers="mcps1.1.6.1.1 "><p id="p51381150057"><a name="p51381150057"></a><a name="p51381150057"></a>title</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="37.53%" headers="mcps1.1.6.1.2 "><p id="p1713819501354"><a name="p1713819501354"></a><a name="p1713819501354"></a>string | Resource</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.25%" headers="mcps1.1.6.1.3 "><p id="p121381350056"><a name="p121381350056"></a><a name="p121381350056"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.32%" headers="mcps1.1.6.1.4 "><p id="p1113812501857"><a name="p1113812501857"></a><a name="p1113812501857"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.14%" headers="mcps1.1.6.1.5 "><p id="p8138650853"><a name="p8138650853"></a><a name="p8138650853"></a>Title of a dialog box.</p>
-    </td>
-    </tr>
-    <tr id="row1713814502520"><td class="cellrowborder" valign="top" width="16.76%" headers="mcps1.1.6.1.1 "><p id="p191384508512"><a name="p191384508512"></a><a name="p191384508512"></a>message</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="37.53%" headers="mcps1.1.6.1.2 "><p id="p1413811502052"><a name="p1413811502052"></a><a name="p1413811502052"></a>string | Resource</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.25%" headers="mcps1.1.6.1.3 "><p id="p3138155016516"><a name="p3138155016516"></a><a name="p3138155016516"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.32%" headers="mcps1.1.6.1.4 "><p id="p1913895010510"><a name="p1913895010510"></a><a name="p1913895010510"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.14%" headers="mcps1.1.6.1.5 "><p id="p1713816501555"><a name="p1713816501555"></a><a name="p1713816501555"></a>Content of the dialog box.</p>
-    </td>
-    </tr>
-    <tr id="row31384507513"><td class="cellrowborder" valign="top" width="16.76%" headers="mcps1.1.6.1.1 "><p id="p31384501513"><a name="p31384501513"></a><a name="p31384501513"></a>autoCancel</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="37.53%" headers="mcps1.1.6.1.2 "><p id="p131387501352"><a name="p131387501352"></a><a name="p131387501352"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.25%" headers="mcps1.1.6.1.3 "><p id="p91387501455"><a name="p91387501455"></a><a name="p91387501455"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.32%" headers="mcps1.1.6.1.4 "><p id="p11285115693215"><a name="p11285115693215"></a><a name="p11285115693215"></a>true</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.14%" headers="mcps1.1.6.1.5 "><p id="p151389505513"><a name="p151389505513"></a><a name="p151389505513"></a>Whether to close the dialog box when the overlay is clicked.</p>
-    </td>
-    </tr>
-    <tr id="row11138125012513"><td class="cellrowborder" valign="top" width="16.76%" headers="mcps1.1.6.1.1 "><p id="p1713855013519"><a name="p1713855013519"></a><a name="p1713855013519"></a>primaryButton</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="37.53%" headers="mcps1.1.6.1.2 "><p id="p111386501559"><a name="p111386501559"></a><a name="p111386501559"></a>{</p>
-    <p id="p1313895016513"><a name="p1313895016513"></a><a name="p1313895016513"></a>value: string | Resource,</p>
-    <p id="p1195891562018"><a name="p1195891562018"></a><a name="p1195891562018"></a>fontColor?: Color | number | string | Resource,</p>
-    <p id="p169591154206"><a name="p169591154206"></a><a name="p169591154206"></a>backgroundColor?: Color | number | string | Resource,</p>
-    <p id="p813875017511"><a name="p813875017511"></a><a name="p813875017511"></a>action: () =&gt; void;</p>
-    <p id="p5138950457"><a name="p5138950457"></a><a name="p5138950457"></a>}</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.25%" headers="mcps1.1.6.1.3 "><p id="p713818501351"><a name="p713818501351"></a><a name="p713818501351"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.32%" headers="mcps1.1.6.1.4 "><p id="p121388500514"><a name="p121388500514"></a><a name="p121388500514"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.14%" headers="mcps1.1.6.1.5 "><p id="p6138165018511"><a name="p6138165018511"></a><a name="p6138165018511"></a>Text content, text color, background color, and click callback of the primary button.</p>
-    </td>
-    </tr>
-    <tr id="row1813817501255"><td class="cellrowborder" valign="top" width="16.76%" headers="mcps1.1.6.1.1 "><p id="p1813818501759"><a name="p1813818501759"></a><a name="p1813818501759"></a>secondaryButton</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="37.53%" headers="mcps1.1.6.1.2 "><p id="p1813825016510"><a name="p1813825016510"></a><a name="p1813825016510"></a></p>
-    <p id="p1326717114213"><a name="p1326717114213"></a><a name="p1326717114213"></a>{</p>
-    <p id="p172671316214"><a name="p172671316214"></a><a name="p172671316214"></a>value: string | Resource,</p>
-    <p id="p1426720111211"><a name="p1426720111211"></a><a name="p1426720111211"></a>fontColor?: Color | number | string | Resource,</p>
-    <p id="p1526751152118"><a name="p1526751152118"></a><a name="p1526751152118"></a>backgroundColor?: Color | number | string | Resource,</p>
-    <p id="p1426751112112"><a name="p1426751112112"></a><a name="p1426751112112"></a>action: () =&gt; void;</p>
-    <p id="p1526712132115"><a name="p1526712132115"></a><a name="p1526712132115"></a>}</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.25%" headers="mcps1.1.6.1.3 "><p id="p161381350458"><a name="p161381350458"></a><a name="p161381350458"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.32%" headers="mcps1.1.6.1.4 "><p id="p613810501858"><a name="p613810501858"></a><a name="p613810501858"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.14%" headers="mcps1.1.6.1.5 "><p id="p1581685133016"><a name="p1581685133016"></a><a name="p1581685133016"></a>Text content, text color, background color, and click callback of the secondary button.</p>
-    </td>
-    </tr>
-    <tr id="row10728118864"><td class="cellrowborder" valign="top" width="16.76%" headers="mcps1.1.6.1.1 "><p id="p177412291610"><a name="p177412291610"></a><a name="p177412291610"></a>cancel</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="37.53%" headers="mcps1.1.6.1.2 "><p id="p142893345617"><a name="p142893345617"></a><a name="p142893345617"></a>() =&gt; void</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.25%" headers="mcps1.1.6.1.3 "><p id="p172819183620"><a name="p172819183620"></a><a name="p172819183620"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.32%" headers="mcps1.1.6.1.4 "><p id="p972871816610"><a name="p972871816610"></a><a name="p972871816610"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.14%" headers="mcps1.1.6.1.5 "><p id="p10319101012301"><a name="p10319101012301"></a><a name="p10319101012301"></a>Callback invoked when the dialog box is closed after the overlay is clicked.</p>
-    </td>
-    </tr>
-    <tr id="row6796114516715"><td class="cellrowborder" valign="top" width="16.76%" headers="mcps1.1.6.1.1 "><p id="p1579711451677"><a name="p1579711451677"></a><a name="p1579711451677"></a>alignment</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="37.53%" headers="mcps1.1.6.1.2 "><p id="p1179718455715"><a name="p1179718455715"></a><a name="p1179718455715"></a><a href="ts-methods-custom-dialog-box.md#li46304184186">DialogAlignment</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.25%" headers="mcps1.1.6.1.3 "><p id="p207971445474"><a name="p207971445474"></a><a name="p207971445474"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.32%" headers="mcps1.1.6.1.4 "><p id="p1279715451072"><a name="p1279715451072"></a><a name="p1279715451072"></a><a href="ts-methods-custom-dialog-box.md#li46304184186">DialogAlignment</a>.Default</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.14%" headers="mcps1.1.6.1.5 "><p id="p1379716450716"><a name="p1379716450716"></a><a name="p1379716450716"></a>Alignment mode of the dialog box in the vertical direction.</p>
-    </td>
-    </tr>
-    <tr id="row14479315916"><td class="cellrowborder" valign="top" width="16.76%" headers="mcps1.1.6.1.1 "><p id="p9471431998"><a name="p9471431998"></a><a name="p9471431998"></a>offset</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="37.53%" headers="mcps1.1.6.1.2 "><p id="p1207111213915"><a name="p1207111213915"></a><a name="p1207111213915"></a>{</p>
-    <p id="p162079129914"><a name="p162079129914"></a><a name="p162079129914"></a>dx: Length | Resource,</p>
-    <p id="p220712121799"><a name="p220712121799"></a><a name="p220712121799"></a>dy: Length  | Resource</p>
-    <p id="p132071612996"><a name="p132071612996"></a><a name="p132071612996"></a>}</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.25%" headers="mcps1.1.6.1.3 "><p id="p4471331396"><a name="p4471331396"></a><a name="p4471331396"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.32%" headers="mcps1.1.6.1.4 "><p id="p1471231591"><a name="p1471231591"></a><a name="p1471231591"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.14%" headers="mcps1.1.6.1.5 "><p id="p24818311919"><a name="p24818311919"></a><a name="p24818311919"></a>Offset of the dialog box relative to the alignment position.</p>
-    </td>
-    </tr>
-    <tr id="row15396103710486"><td class="cellrowborder" valign="top" width="16.76%" headers="mcps1.1.6.1.1 "><p id="p11396133724819"><a name="p11396133724819"></a><a name="p11396133724819"></a>gridCount</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="37.53%" headers="mcps1.1.6.1.2 "><p id="p1939614372489"><a name="p1939614372489"></a><a name="p1939614372489"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.25%" headers="mcps1.1.6.1.3 "><p id="p11396113784811"><a name="p11396113784811"></a><a name="p11396113784811"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.32%" headers="mcps1.1.6.1.4 "><p id="p83968379480"><a name="p83968379480"></a><a name="p83968379480"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.14%" headers="mcps1.1.6.1.5 "><p id="p2396203734812"><a name="p2396203734812"></a><a name="p2396203734812"></a>Number of grid columns occupied by the width of the dialog box.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
 
+## Example
 
-## Example<a name="section1110113275912"></a>
 
 ```
 @Entry
@@ -333,5 +97,4 @@ struct AlertDialogExample {
 }
 ```
 
-![](figures/alertdialog.gif)
-
+![en-us_image_0000001256978387](figures/en-us_image_0000001256978387.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md b/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
index 67e355e76b1b4e501a3c197ef270026f78ee4203..85d09336c4b500251fc8226a99e1ae7e1bc4f391 100644
--- a/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
+++ b/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
@@ -1,151 +1,71 @@
-# Custom Dialog box<a name="EN-US_TOPIC_0000001237355055"></a>
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-The  **CustomDialogController**  class is used to display a custom dialog box.
-
-## APIs<a name="section14945157165212"></a>
-
-CustomDialogController\(value:\{builder: CustomDialog, cancel?: \(\) =\> void, autoCancel?: boolean\}\)
-
--   Parameters
-
-    <a name="table816913216616"></a>
-    <table><thead align="left"><tr id="row016972667"><th class="cellrowborder" valign="top" width="13.16%" id="mcps1.1.6.1.1"><p id="p101691221267"><a name="p101691221267"></a><a name="p101691221267"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.75%" id="mcps1.1.6.1.2"><p id="p616916211613"><a name="p616916211613"></a><a name="p616916211613"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="5.680000000000001%" id="mcps1.1.6.1.3"><p id="p21691725613"><a name="p21691725613"></a><a name="p21691725613"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="24.14%" id="mcps1.1.6.1.4"><p id="p4169221969"><a name="p4169221969"></a><a name="p4169221969"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="36.27%" id="mcps1.1.6.1.5"><p id="p616922465"><a name="p616922465"></a><a name="p616922465"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row617013216610"><td class="cellrowborder" valign="top" width="13.16%" headers="mcps1.1.6.1.1 "><p id="p11170822063"><a name="p11170822063"></a><a name="p11170822063"></a>builder</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.75%" headers="mcps1.1.6.1.2 "><p id="p151701826617"><a name="p151701826617"></a><a name="p151701826617"></a><a href="217.md">CustomDialog</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="5.680000000000001%" headers="mcps1.1.6.1.3 "><p id="p151705218616"><a name="p151705218616"></a><a name="p151705218616"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="24.14%" headers="mcps1.1.6.1.4 "><p id="p51702216617"><a name="p51702216617"></a><a name="p51702216617"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.27%" headers="mcps1.1.6.1.5 "><p id="p1017062765"><a name="p1017062765"></a><a name="p1017062765"></a>Constructor of the custom dialog box content.</p>
-    </td>
-    </tr>
-    <tr id="row4170723612"><td class="cellrowborder" valign="top" width="13.16%" headers="mcps1.1.6.1.1 "><p id="p171709214610"><a name="p171709214610"></a><a name="p171709214610"></a>cancel</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.75%" headers="mcps1.1.6.1.2 "><p id="p1517018210613"><a name="p1517018210613"></a><a name="p1517018210613"></a>() =&gt; void</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="5.680000000000001%" headers="mcps1.1.6.1.3 "><p id="p141701022068"><a name="p141701022068"></a><a name="p141701022068"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="24.14%" headers="mcps1.1.6.1.4 "><p id="p20170429614"><a name="p20170429614"></a><a name="p20170429614"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.27%" headers="mcps1.1.6.1.5 "><p id="p0170321361"><a name="p0170321361"></a><a name="p0170321361"></a>Callback invoked when the dialog box is closed after the overlay exits.</p>
-    </td>
-    </tr>
-    <tr id="row7170625613"><td class="cellrowborder" valign="top" width="13.16%" headers="mcps1.1.6.1.1 "><p id="p11170627619"><a name="p11170627619"></a><a name="p11170627619"></a>autoCancel</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.75%" headers="mcps1.1.6.1.2 "><p id="p71701121661"><a name="p71701121661"></a><a name="p71701121661"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="5.680000000000001%" headers="mcps1.1.6.1.3 "><p id="p8170192564"><a name="p8170192564"></a><a name="p8170192564"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="24.14%" headers="mcps1.1.6.1.4 "><p id="p161701822061"><a name="p161701822061"></a><a name="p161701822061"></a>true</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.27%" headers="mcps1.1.6.1.5 "><p id="p111700219615"><a name="p111700219615"></a><a name="p111700219615"></a>Whether to allow users to click the overlay to exit.</p>
-    </td>
-    </tr>
-    <tr id="row4619154917209"><td class="cellrowborder" valign="top" width="13.16%" headers="mcps1.1.6.1.1 "><p id="p26193491206"><a name="p26193491206"></a><a name="p26193491206"></a>alignment</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.75%" headers="mcps1.1.6.1.2 "><p id="p1461914912207"><a name="p1461914912207"></a><a name="p1461914912207"></a><a href="#li46304184186">DialogAlignment</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="5.680000000000001%" headers="mcps1.1.6.1.3 "><p id="p1161910499207"><a name="p1161910499207"></a><a name="p1161910499207"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="24.14%" headers="mcps1.1.6.1.4 "><p id="p1695856057"><a name="p1695856057"></a><a name="p1695856057"></a><a href="#li46304184186">DialogAlignment</a>.Default</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.27%" headers="mcps1.1.6.1.5 "><p id="p5620144910200"><a name="p5620144910200"></a><a name="p5620144910200"></a>Alignment mode of the dialog box in the vertical direction.</p>
-    </td>
-    </tr>
-    <tr id="row1212812822210"><td class="cellrowborder" valign="top" width="13.16%" headers="mcps1.1.6.1.1 "><p id="p11128181222"><a name="p11128181222"></a><a name="p11128181222"></a>offset</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.75%" headers="mcps1.1.6.1.2 "><p id="p15886722116"><a name="p15886722116"></a><a name="p15886722116"></a>{</p>
-    <p id="p450717617111"><a name="p450717617111"></a><a name="p450717617111"></a>dx: Length | Resource,</p>
-    <p id="p383151220115"><a name="p383151220115"></a><a name="p383151220115"></a>dy: Length  | Resource</p>
-    <p id="p41289862216"><a name="p41289862216"></a><a name="p41289862216"></a>}</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="5.680000000000001%" headers="mcps1.1.6.1.3 "><p id="p312819882214"><a name="p312819882214"></a><a name="p312819882214"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="24.14%" headers="mcps1.1.6.1.4 "><p id="p1128158112211"><a name="p1128158112211"></a><a name="p1128158112211"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.27%" headers="mcps1.1.6.1.5 "><p id="p161281684222"><a name="p161281684222"></a><a name="p161281684222"></a>Offset of the dialog box relative to the alignment position.</p>
-    </td>
-    </tr>
-    <tr id="row16766162117114"><td class="cellrowborder" valign="top" width="13.16%" headers="mcps1.1.6.1.1 "><p id="p117671621201112"><a name="p117671621201112"></a><a name="p117671621201112"></a>customStyle</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.75%" headers="mcps1.1.6.1.2 "><p id="p15767021161117"><a name="p15767021161117"></a><a name="p15767021161117"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="5.680000000000001%" headers="mcps1.1.6.1.3 "><p id="p18767202113110"><a name="p18767202113110"></a><a name="p18767202113110"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="24.14%" headers="mcps1.1.6.1.4 "><p id="p1376710215114"><a name="p1376710215114"></a><a name="p1376710215114"></a>false</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.27%" headers="mcps1.1.6.1.5 "><p id="p7767821131117"><a name="p7767821131117"></a><a name="p7767821131117"></a>Whether the style of the dialog box is customized.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li46304184186"></a>DialogAlignment enums
-
-    <a name="table1964810186187"></a>
-    <table><thead align="left"><tr id="row66471818181813"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p2064711183189"><a name="p2064711183189"></a><a name="p2064711183189"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p1764718186187"><a name="p1764718186187"></a><a name="p1764718186187"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row9647161818185"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p14647181821813"><a name="p14647181821813"></a><a name="p14647181821813"></a>Top</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p10647131817182"><a name="p10647131817182"></a><a name="p10647131817182"></a>Aligns vertically to the top.</p>
-    </td>
-    </tr>
-    <tr id="row164731891816"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p116472181182"><a name="p116472181182"></a><a name="p116472181182"></a>Center</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1464710180184"><a name="p1464710180184"></a><a name="p1464710180184"></a>Aligns vertically to the middle.</p>
-    </td>
-    </tr>
-    <tr id="row76479180187"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p2647131841811"><a name="p2647131841811"></a><a name="p2647131841811"></a>Bottom</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p7647141812185"><a name="p7647141812185"></a><a name="p7647141812185"></a>Aligns vertically to the bottom.</p>
-    </td>
-    </tr>
-    <tr id="row86481518121817"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1464714189186"><a name="p1464714189186"></a><a name="p1464714189186"></a>Default</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p10647191811189"><a name="p10647191811189"></a><a name="p10647191811189"></a>Default alignment.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-### CustomDialogController<a name="section8664549161612"></a>
-
-Creates an object.
+# Custom Dialog Box
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+The **CustomDialogController** class is used to display a custom dialog box.
+
+
+## APIs
+
+CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, autoCancel?: boolean})
+
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | builder | [CustomDialog](../../ui/ ts-component-based-customdialog.md) | Yes | - | Constructor&nbsp;of&nbsp;the&nbsp;custom&nbsp;dialog&nbsp;box&nbsp;content. |
+  | cancel | ()&nbsp;=&gt;&nbsp;void | No | - | Callback&nbsp;invoked&nbsp;when&nbsp;the&nbsp;dialog&nbsp;box&nbsp;is&nbsp;closed&nbsp;after&nbsp;the&nbsp;overlay&nbsp;exits. |
+  | autoCancel | boolean | No | true | Whether&nbsp;to&nbsp;allow&nbsp;users&nbsp;to&nbsp;click&nbsp;the&nbsp;overlay&nbsp;to&nbsp;exit. |
+  | alignment | DialogAlignment | No | DialogAlignment.Default | Alignment&nbsp;mode&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box&nbsp;in&nbsp;the&nbsp;vertical&nbsp;direction. |
+  | offset | {<br/>dx:&nbsp;Length&nbsp;\|[Resource](../../ui/ts-types.md#resource),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|[Resource](../../ui/ts-types.md#resource)<br/>} |  |  | Offset&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box&nbsp;relative&nbsp;to&nbsp;the&nbsp;alignment&nbsp;position. |
+  | customStyle | boolean | No | false | Whether&nbsp;the&nbsp;style&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box&nbsp;is&nbsp;customized. |
+
+- DialogAlignment enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Top | Aligns&nbsp;vertically&nbsp;to&nbsp;the&nbsp;top. | 
+  | Center | Aligns&nbsp;vertically&nbsp;to&nbsp;the&nbsp;middle. | 
+  | Bottom | Aligns&nbsp;vertically&nbsp;to&nbsp;the&nbsp;bottom. | 
+  | Default | Default&nbsp;alignment. | 
+  | TopStart<sup>8+</sup> | Top&nbsp;left&nbsp;alignment. | 
+  | TopEnd<sup>8+</sup> | Top&nbsp;right&nbsp;alignment. | 
+  | CenterStart<sup>8+</sup> | Center&nbsp;left&nbsp;alignment. | 
+  | CenterEnd<sup>8+</sup> | Center&nbsp;right&nbsp;alignment. | 
+  | BottomStart<sup>8+</sup> | Bottom&nbsp;left&nbsp;alignment. | 
+  | BottomEnd<sup>8+</sup> | Bottom&nbsp;right&nbsp;alignment. | 
+
+
+### CustomDialogController
+
+
+### Objects to Import
+
 
 ```
 dialogController : CustomDialogController = new CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean})
 ```
 
-open\(\)
+
+### dialogController.open
+
+open(): void
+
 
 Opens the content of the custom dialog box. If the content has been displayed, this API does not take effect.
 
-close\(\)
+
+### dialogController.close
+
+close(): void
 
 Closes the custom dialog box. If the dialog box is closed, the setting does not take effect.
 
-## Example<a name="section1033712576815"></a>
+
+## Example
+
 
 ```
 @CustomDialog
@@ -205,5 +125,4 @@ struct CustomDialogUser {
 }
 ```
 
-![](figures/customdialog.gif)
-
+![en-us_image_0000001212058470](figures/en-us_image_0000001212058470.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-methods-image-cache.md b/en/application-dev/reference/arkui-ts/ts-methods-image-cache.md
index 3075ad66711d30b7768ee95bf8d1357f6e45dbb4..a76ad367d5750f57dc08dfeefec29d0b70b22423 100644
--- a/en/application-dev/reference/arkui-ts/ts-methods-image-cache.md
+++ b/en/application-dev/reference/arkui-ts/ts-methods-image-cache.md
@@ -1,161 +1,104 @@
-# Image Cache<a name="EN-US_TOPIC_0000001192915092"></a>
+# Image Cache
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Modules to Import<a name="section5628811168"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
+
+## Modules to Import
+
+  
 ```
 import app from '@system.app'
 ```
 
-## Required Permissions<a name="section137491348987"></a>
+
+## Required Permissions
 
 None
 
-## app.setImageCacheCount<a name="section11154121091314"></a>
-
-setImageCacheCount\(value: number\): void
-
-Sets the maximum number of decoded images that can be cached in the memory to speed up the loading of images from the same sources. If the input parameter is not set, the default value  **0**  is used, indicating that images are not cached. The built-in Least Recently Used \(LRU\) policy is used for caching. After new images are loaded, if the upper limit of the cache is exceeded, the images that have not been updated for the longest time will be replaced. You are advised to set the input parameter based on the application memory requirements. If the number of images is too large, the memory usage may be too high.
-
--   Parameters
-
-    <a name="table69661135912"></a>
-    <table><thead align="left"><tr id="row149668318915"><th class="cellrowborder" valign="top" width="14.82%" id="mcps1.1.5.1.1"><p id="p7966738914"><a name="p7966738914"></a><a name="p7966738914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.729999999999999%" id="mcps1.1.5.1.2"><p id="p296713699"><a name="p296713699"></a><a name="p296713699"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.16%" id="mcps1.1.5.1.3"><p id="p196718315911"><a name="p196718315911"></a><a name="p196718315911"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.29%" id="mcps1.1.5.1.4"><p id="p9967231197"><a name="p9967231197"></a><a name="p9967231197"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row18967831393"><td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.1 "><p id="p39671131590"><a name="p39671131590"></a><a name="p39671131590"></a>value</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.729999999999999%" headers="mcps1.1.5.1.2 "><p id="p126051952172518"><a name="p126051952172518"></a><a name="p126051952172518"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.16%" headers="mcps1.1.5.1.3 "><p id="p149671932919"><a name="p149671932919"></a><a name="p149671932919"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.29%" headers="mcps1.1.5.1.4 "><p id="p19675312911"><a name="p19675312911"></a><a name="p19675312911"></a>Number of decoded images that are cached in the memory.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    // app.ets
-    import app from '@system.app';
-    export default {
-        onCreate() { 
-            app.setImageCacheCount(100)    // Set the maximum number of decoded images that can be cached in the memory to 100.
-            console.info('Application onCreate')
-        },
-        onDestroy() {
-            console.info('Application onDestroy')
-        },
-    }
-    ```
-
-
-## app.setImageRawDataCacheSize<a name="section14955104018114"></a>
-
-setImageRawDataCacheSize\(value: number\): void
-
-Sets the maximum size \(in bytes\) of the image data cached in the memory before decoding to speed up the loading of images from the same sources. If the input parameter is not set, the default value  **0**  is used, indicating that images are not cached. The LRU policy is used for caching. After new images are loaded, if the upper limit of the cache is exceeded, the images that have not been updated for the longest time will be replaced. You are advised to set the input parameter based on the application memory requirements. If the image cache is too large, the memory usage may be too high.
-
--   Parameters
-
-    <a name="table5694170152416"></a>
-    <table><thead align="left"><tr id="row86942002415"><th class="cellrowborder" valign="top" width="14.82%" id="mcps1.1.5.1.1"><p id="p1769418002417"><a name="p1769418002417"></a><a name="p1769418002417"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.729999999999999%" id="mcps1.1.5.1.2"><p id="p76944082418"><a name="p76944082418"></a><a name="p76944082418"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.16%" id="mcps1.1.5.1.3"><p id="p3694609246"><a name="p3694609246"></a><a name="p3694609246"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.29%" id="mcps1.1.5.1.4"><p id="p116940032414"><a name="p116940032414"></a><a name="p116940032414"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row7694150172412"><td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.1 "><p id="p146942062411"><a name="p146942062411"></a><a name="p146942062411"></a>value</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.729999999999999%" headers="mcps1.1.5.1.2 "><p id="p196947013244"><a name="p196947013244"></a><a name="p196947013244"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.16%" headers="mcps1.1.5.1.3 "><p id="p56956012242"><a name="p56956012242"></a><a name="p56956012242"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.29%" headers="mcps1.1.5.1.4 "><p id="p2069540182411"><a name="p2069540182411"></a><a name="p2069540182411"></a>Size of the image data cached before decoding, in bytes.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    // app.ets
-    import app from '@system.app';
-    
-    export default {
-        onCreate() {
-            app.setImageRawDataCacheSize(104,857,600) // Set the upper limit of the memory for caching image data before decoding to 100 MB.
-            console.info('Application onCreate')
-        },
-        onDestroy() {
-            console.info('Application onDestroy')
-        },
-    }
-    ```
-
-
-## app.setImageFileCacheSize<a name="section182498527405"></a>
-
-setImageFileCacheSize\(value: number\): void
-
-Sets the maximum size of the image file cache \(in bytes\) to speed up the loading of images from the same sources, especially online image sources and thumbnails. If the input parameter is not set, the default value 100 MB is used. The LRU policy is used for caching. After new images are loaded, if the upper limit of the cache is exceeded, the images that have not been updated for the longest time will be replaced. You are advised to set the input parameter based on the application memory requirements. If the image cache is too large, the disk usage may be too high.
-
--   Parameters
-
-    <a name="table1319132705612"></a>
-    <table><thead align="left"><tr id="row419152719562"><th class="cellrowborder" valign="top" width="14.82%" id="mcps1.1.5.1.1"><p id="p11194271563"><a name="p11194271563"></a><a name="p11194271563"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.729999999999999%" id="mcps1.1.5.1.2"><p id="p619122712565"><a name="p619122712565"></a><a name="p619122712565"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.16%" id="mcps1.1.5.1.3"><p id="p81919277561"><a name="p81919277561"></a><a name="p81919277561"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.29%" id="mcps1.1.5.1.4"><p id="p1619427175614"><a name="p1619427175614"></a><a name="p1619427175614"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row31912271562"><td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.1 "><p id="p121952717562"><a name="p121952717562"></a><a name="p121952717562"></a>value</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.729999999999999%" headers="mcps1.1.5.1.2 "><p id="p10191527125610"><a name="p10191527125610"></a><a name="p10191527125610"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.16%" headers="mcps1.1.5.1.3 "><p id="p101962718567"><a name="p101962718567"></a><a name="p101962718567"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.29%" headers="mcps1.1.5.1.4 "><p id="p18191527115615"><a name="p18191527115615"></a><a name="p18191527115615"></a>Size of the image file cache, in bytes.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    // app.ets
-    import app from '@system.app';
-    
-    export default {  
-        onCreate() {    
-            app.setImageFileCacheSize(209,715,200) // Set the upper limit of the image file cache to 200 MB.
-            console.info('Application onCreate')
-        },  
-        onDestroy() {
-            console.info('Application onDestroy')
-        },
-    }
-    ```
 
+## app.setImageCacheCount
 
+setImageCacheCount(value: number): void
+
+  Sets the maximum number of decoded images that can be cached in the memory to speed up the loading of images from the same sources. If the input parameter is not set, the default value **0** is used, indicating that images are not cached. The built-in Least Recently Used (LRU) policy is used for caching. After new images are loaded, if the upper limit of the cache is exceeded, the images that have not been updated for the longest time will be replaced. You are advised to set the input parameter based on the application memory requirements. If the number of images is too large, the memory usage may be too high.
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | value | number | Yes | Number&nbsp;of&nbsp;decoded&nbsp;images&nbsp;that&nbsp;are&nbsp;cached&nbsp;in&nbsp;the&nbsp;memory. | 
+
+- Example
+    
+  ```
+  // app.ets
+  import app from '@system.app';
+  
+  export default {
+      onCreate() { 
+          app.setImageCacheCount(100)    // Set the maximum number of decoded images that can be cached in the memory to 100.
+          console.info('Application onCreate')
+      },
+      onDestroy() {
+          console.info('Application onDestroy')
+      },
+  }
+  ```
+
+
+## app.setImageRawDataCacheSize
+
+setImageRawDataCacheSize(value: number): void
+
+Sets the maximum size (in bytes) of the image data cached in the memory before decoding to speed up the loading of images from the same sources. If the input parameter is not set, the default value **0** is used, indicating that images are not cached. The LRU policy is used for caching. After new images are loaded, if the upper limit of the cache is exceeded, the images that have not been updated for the longest time will be replaced. You are advised to set the input parameter based on the application memory requirements. If the image cache is too large, the memory usage may be too high.
+
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | value | number | Yes | Size&nbsp;of&nbsp;the&nbsp;image&nbsp;data&nbsp;cached&nbsp;before&nbsp;decoding,&nbsp;in&nbsp;bytes. | 
+
+- Example
+    
+  ```
+  // app.ets
+  import app from '@system.app';
+  
+  export default {
+      onCreate() {
+          app.setImageRawDataCacheSize(104,857,600) // Set the upper limit of the memory for caching image data before decoding to 100 MB.
+          console.info('Application onCreate')
+      },
+      onDestroy() {
+          console.info('Application onDestroy')
+      },
+  }
+  ```
+
+
+## app.setImageFileCacheSize
+
+setImageFileCacheSize(value: number): void
+
+Sets the maximum size of the image file cache (in bytes) to speed up the loading of images from the same sources, especially online image sources and thumbnails. If the input parameter is not set, the default value 100 MB is used. The LRU policy is used for caching. After new images are loaded, if the upper limit of the cache is exceeded, the images that have not been updated for the longest time will be replaced. You are advised to set the input parameter based on the application memory requirements. If the image cache is too large, the disk usage may be too high.
+
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | value | number | Yes | Size&nbsp;of&nbsp;the&nbsp;image&nbsp;file&nbsp;cache,&nbsp;in&nbsp;bytes. | 
+
+- Example
+    
+  ```
+  // app.ets
+  import app from '@system.app';
+  
+  export default {  
+      onCreate() {    
+          app.setImageFileCacheSize(209,715,200) // Set the upper limit of the image file cache to 200 MB.
+          console.info('Application onCreate')
+      },  
+      onDestroy() {
+          console.info('Application onDestroy')
+      },
+  }
+  ```
diff --git a/en/application-dev/reference/arkui-ts/ts-methods-media-query.md b/en/application-dev/reference/arkui-ts/ts-methods-media-query.md
index 8437e78f0b688355c630b49033b42ceee5d390e0..1f7e1e91bc03a267030aae252f9045e8841283ab 100644
--- a/en/application-dev/reference/arkui-ts/ts-methods-media-query.md
+++ b/en/application-dev/reference/arkui-ts/ts-methods-media-query.md
@@ -1,261 +1,115 @@
-# Media Query<a name="EN-US_TOPIC_0000001237555091"></a>
+# Media Query
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Modules to Import<a name="section377963175114"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Modules to Import
+
 
 ```
 import mediaquery from '@ohos.mediaquery'
 ```
 
-## Required Permissions<a name="section1455919446525"></a>
+
+## Required Permissions
 
 None
 
-## mediaquery.matchMediaSync<a name="section741924715916"></a>
 
-matchMediaSync\(condition: string\): MediaQueryListener
+## mediaquery.matchMediaSync
+
+matchMediaSync(condition: string): MediaQueryListener
 
 Sets the media query criteria and returns the corresponding listening handle.
 
--   Parameters
-
-    <a name="table69661135912"></a>
-    <table><thead align="left"><tr id="row149668318915"><th class="cellrowborder" valign="top" width="14.82%" id="mcps1.1.5.1.1"><p id="p7966738914"><a name="p7966738914"></a><a name="p7966738914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.729999999999999%" id="mcps1.1.5.1.2"><p id="p296713699"><a name="p296713699"></a><a name="p296713699"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.16%" id="mcps1.1.5.1.3"><p id="p196718315911"><a name="p196718315911"></a><a name="p196718315911"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.29%" id="mcps1.1.5.1.4"><p id="p9967231197"><a name="p9967231197"></a><a name="p9967231197"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row18967831393"><td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.1 "><p id="p39671131590"><a name="p39671131590"></a><a name="p39671131590"></a>condition</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.729999999999999%" headers="mcps1.1.5.1.2 "><p id="p126051952172518"><a name="p126051952172518"></a><a name="p126051952172518"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.16%" headers="mcps1.1.5.1.3 "><p id="p149671932919"><a name="p149671932919"></a><a name="p149671932919"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.29%" headers="mcps1.1.5.1.4 "><p id="p19675312911"><a name="p19675312911"></a><a name="p19675312911"></a>Matching condition of a media event. For details about the condition string format, see <a href="../../nottoctopics/en-us_topic_0000001173164741.md">Media Query</a>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Return values
-
-    <a name="table16391145317913"></a>
-    <table><thead align="left"><tr id="row2391145319910"><th class="cellrowborder" valign="top" width="38.64%" id="mcps1.1.3.1.1"><p id="p13911353991"><a name="p13911353991"></a><a name="p13911353991"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="61.36000000000001%" id="mcps1.1.3.1.2"><p id="p193911531395"><a name="p193911531395"></a><a name="p193911531395"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1339114531391"><td class="cellrowborder" valign="top" width="38.64%" headers="mcps1.1.3.1.1 "><p id="p73929531797"><a name="p73929531797"></a><a name="p73929531797"></a>MediaQueryListener</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="61.36000000000001%" headers="mcps1.1.3.1.2 "><p id="p1039217531898"><a name="p1039217531898"></a><a name="p1039217531898"></a>Listening handle to a media event, which is used to register or unregister the listening callback.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen to landscape events.
-    ```
-
-
-## MediaQueryListener<a name="section75051320581"></a>
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | condition | string | Yes | Matching&nbsp;condition&nbsp;of&nbsp;a&nbsp;media&nbsp;event. | 
+
+- Return values
+    | Type | Description | 
+  | -------- | -------- |
+  | MediaQueryListener | Listening&nbsp;handle&nbsp;to&nbsp;a&nbsp;media&nbsp;event,&nbsp;which&nbsp;is&nbsp;used&nbsp;to&nbsp;register&nbsp;or&nbsp;unregister&nbsp;the&nbsp;listening&nbsp;callback. | 
+
+- Example
+  
+  ```
+  listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen to landscape events.
+  ```
+
+
+## MediaQueryListener
 
 Media query handle, including the first query result when the handle is applied for.
 
-### Attributes<a name="section18895184419209"></a>
-
-<a name="table728861911417"></a>
-<table><thead align="left"><tr id="row62887198149"><th class="cellrowborder" valign="top" width="11.360000000000001%" id="mcps1.1.6.1.1"><p id="p928811911410"><a name="p928811911410"></a><a name="p928811911410"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="14.62%" id="mcps1.1.6.1.2"><p id="p8288191916149"><a name="p8288191916149"></a><a name="p8288191916149"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="9.73%" id="mcps1.1.6.1.3"><p id="p14288131911418"><a name="p14288131911418"></a><a name="p14288131911418"></a>Readable</p>
-</th>
-<th class="cellrowborder" valign="top" width="9.04%" id="mcps1.1.6.1.4"><p id="p1928861921411"><a name="p1928861921411"></a><a name="p1928861921411"></a>Writable</p>
-</th>
-<th class="cellrowborder" valign="top" width="55.25%" id="mcps1.1.6.1.5"><p id="p728815191149"><a name="p728815191149"></a><a name="p728815191149"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1685020236504"><td class="cellrowborder" valign="top" width="11.360000000000001%" headers="mcps1.1.6.1.1 "><p id="p178511423205014"><a name="p178511423205014"></a><a name="p178511423205014"></a>matches</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.62%" headers="mcps1.1.6.1.2 "><p id="p1485102317502"><a name="p1485102317502"></a><a name="p1485102317502"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.73%" headers="mcps1.1.6.1.3 "><p id="p8851182313502"><a name="p8851182313502"></a><a name="p8851182313502"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.04%" headers="mcps1.1.6.1.4 "><p id="p5851132320503"><a name="p5851132320503"></a><a name="p5851132320503"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="55.25%" headers="mcps1.1.6.1.5 "><p id="p138511223195014"><a name="p138511223195014"></a><a name="p138511223195014"></a>Whether the match condition is met.</p>
-</td>
-</tr>
-<tr id="row528891919142"><td class="cellrowborder" valign="top" width="11.360000000000001%" headers="mcps1.1.6.1.1 "><p id="p3288191991414"><a name="p3288191991414"></a><a name="p3288191991414"></a>media</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.62%" headers="mcps1.1.6.1.2 "><p id="p3288121901418"><a name="p3288121901418"></a><a name="p3288121901418"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.73%" headers="mcps1.1.6.1.3 "><p id="p182881319191414"><a name="p182881319191414"></a><a name="p182881319191414"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.04%" headers="mcps1.1.6.1.4 "><p id="p1928801914148"><a name="p1928801914148"></a><a name="p1928801914148"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="55.25%" headers="mcps1.1.6.1.5 "><p id="p1428811192144"><a name="p1428811192144"></a><a name="p1428811192144"></a>Matching condition of a media event.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-### on<a name="section7716132985"></a>
-
-on\(type: 'change', callback: Callback<MediaQueryResult\>\): void
+
+### Attributes
+
+  | Name | Type | Readable | Writable | Description | 
+| -------- | -------- | -------- | -------- | -------- |
+| matches | boolean | Yes | No | Whether&nbsp;the&nbsp;match&nbsp;condition&nbsp;is&nbsp;met. | 
+| media | string | Yes | No | Matching&nbsp;condition&nbsp;of&nbsp;a&nbsp;media&nbsp;event. | 
+
+
+### on
+
+on(type: 'change', callback: Callback&lt;MediaQueryResult&gt;): void
 
 Registers a callback with the corresponding query condition by using the handle. This callback is triggered when the media attributes change.
 
--   Parameters
-
-    <a name="table32286131687"></a>
-    <table><thead align="left"><tr id="row0228213582"><th class="cellrowborder" valign="top" width="14.82%" id="mcps1.1.5.1.1"><p id="p52285131883"><a name="p52285131883"></a><a name="p52285131883"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="34.29%" id="mcps1.1.5.1.2"><p id="p1422811131180"><a name="p1422811131180"></a><a name="p1422811131180"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.79%" id="mcps1.1.5.1.3"><p id="p8228151310812"><a name="p8228151310812"></a><a name="p8228151310812"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="40.1%" id="mcps1.1.5.1.4"><p id="p1022816131182"><a name="p1022816131182"></a><a name="p1022816131182"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row322812133816"><td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.1 "><p id="p1422881315812"><a name="p1422881315812"></a><a name="p1422881315812"></a>type</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="34.29%" headers="mcps1.1.5.1.2 "><p id="p922811131387"><a name="p922811131387"></a><a name="p922811131387"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.79%" headers="mcps1.1.5.1.3 "><p id="p112281713086"><a name="p112281713086"></a><a name="p112281713086"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.1%" headers="mcps1.1.5.1.4 "><p id="p7228151310816"><a name="p7228151310816"></a><a name="p7228151310816"></a>Must enter the string <strong id="b5423143114312"><a name="b5423143114312"></a><a name="b5423143114312"></a>change</strong>.</p>
-    </td>
-    </tr>
-    <tr id="row1022810134810"><td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.1 "><p id="p122281131387"><a name="p122281131387"></a><a name="p122281131387"></a>callback</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="34.29%" headers="mcps1.1.5.1.2 "><p id="p132291413386"><a name="p132291413386"></a><a name="p132291413386"></a>Callback&lt;MediaQueryResult&gt;</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.79%" headers="mcps1.1.5.1.3 "><p id="p9229121319814"><a name="p9229121319814"></a><a name="p9229121319814"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.1%" headers="mcps1.1.5.1.4 "><p id="p1822921310817"><a name="p1822921310817"></a><a name="p1822921310817"></a>Callback registered with media query.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    For details, see the  [off example](#li16426122219256).
-
-
-### off<a name="section1115119201599"></a>
-
-off\(type: 'change', callback?: Callback<MediaQueryResult\>\): void
-
-Unregisters a callback with the corresponding query condition by using the handle, so that no callback is triggered when the media attributes change.
-
--   Parameters
-
-    <a name="table14251722102517"></a>
-    <table><thead align="left"><tr id="row5425112210251"><th class="cellrowborder" valign="top" width="10.9%" id="mcps1.1.5.1.1"><p id="p14257225253"><a name="p14257225253"></a><a name="p14257225253"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="33.17%" id="mcps1.1.5.1.2"><p id="p13425132292510"><a name="p13425132292510"></a><a name="p13425132292510"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="8.15%" id="mcps1.1.5.1.3"><p id="p5425172217256"><a name="p5425172217256"></a><a name="p5425172217256"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="47.78%" id="mcps1.1.5.1.4"><p id="p1425192272517"><a name="p1425192272517"></a><a name="p1425192272517"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row14425122212512"><td class="cellrowborder" valign="top" width="10.9%" headers="mcps1.1.5.1.1 "><p id="p6425102242516"><a name="p6425102242516"></a><a name="p6425102242516"></a>type</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.17%" headers="mcps1.1.5.1.2 "><p id="p342512228259"><a name="p342512228259"></a><a name="p342512228259"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.15%" headers="mcps1.1.5.1.3 "><p id="p54261122192510"><a name="p54261122192510"></a><a name="p54261122192510"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="47.78%" headers="mcps1.1.5.1.4 "><p id="p5426922182516"><a name="p5426922182516"></a><a name="p5426922182516"></a>Must enter the string <strong id="b7194165223620"><a name="b7194165223620"></a><a name="b7194165223620"></a>change</strong>.</p>
-    </td>
-    </tr>
-    <tr id="row842672252515"><td class="cellrowborder" valign="top" width="10.9%" headers="mcps1.1.5.1.1 "><p id="p3426622102515"><a name="p3426622102515"></a><a name="p3426622102515"></a>callback</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.17%" headers="mcps1.1.5.1.2 "><p id="p1242652272513"><a name="p1242652272513"></a><a name="p1242652272513"></a>Callback&lt;MediaQueryResult&gt;</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.15%" headers="mcps1.1.5.1.3 "><p id="p94261122162514"><a name="p94261122162514"></a><a name="p94261122162514"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="47.78%" headers="mcps1.1.5.1.4 "><p id="p104261522192514"><a name="p104261522192514"></a><a name="p104261522192514"></a>Callback to be unregistered. If the default value is used, all callbacks of the handle are unregistered.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li16426122219256"></a>Example
-
-    ```
-    listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listens to landscape events.
-    onPortrait(mediaQueryResult) {
-        if (mediaQueryResult.matches) {
-            // do something here
-        } else {
-            // do something here
-        }
-    }
-    listener.on('change', onPortrait) // Register a callback.
-    listener.off('change', onPortrait) // Unregister a callback.
-    ```
-
-
-## MediaQueryResult<a name="section7256173818228"></a>
-
-### Attributes<a name="section126081122120"></a>
-
-<a name="table1187902722312"></a>
-<table><thead align="left"><tr id="row787972732314"><th class="cellrowborder" valign="top" width="11.360000000000001%" id="mcps1.1.6.1.1"><p id="p8879162762313"><a name="p8879162762313"></a><a name="p8879162762313"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="14.62%" id="mcps1.1.6.1.2"><p id="p1287992732315"><a name="p1287992732315"></a><a name="p1287992732315"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="9.73%" id="mcps1.1.6.1.3"><p id="p13879202742314"><a name="p13879202742314"></a><a name="p13879202742314"></a>Readable</p>
-</th>
-<th class="cellrowborder" valign="top" width="9.04%" id="mcps1.1.6.1.4"><p id="p3879112762317"><a name="p3879112762317"></a><a name="p3879112762317"></a>Writable</p>
-</th>
-<th class="cellrowborder" valign="top" width="55.25%" id="mcps1.1.6.1.5"><p id="p11879527112318"><a name="p11879527112318"></a><a name="p11879527112318"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row10879102720231"><td class="cellrowborder" valign="top" width="11.360000000000001%" headers="mcps1.1.6.1.1 "><p id="p158791927202314"><a name="p158791927202314"></a><a name="p158791927202314"></a>matches</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.62%" headers="mcps1.1.6.1.2 "><p id="p087932714238"><a name="p087932714238"></a><a name="p087932714238"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.73%" headers="mcps1.1.6.1.3 "><p id="p18879727172317"><a name="p18879727172317"></a><a name="p18879727172317"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.04%" headers="mcps1.1.6.1.4 "><p id="p987972717232"><a name="p987972717232"></a><a name="p987972717232"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="55.25%" headers="mcps1.1.6.1.5 "><p id="p19880162782314"><a name="p19880162782314"></a><a name="p19880162782314"></a>Whether the match condition is met.</p>
-</td>
-</tr>
-<tr id="row1488015273234"><td class="cellrowborder" valign="top" width="11.360000000000001%" headers="mcps1.1.6.1.1 "><p id="p10880172752314"><a name="p10880172752314"></a><a name="p10880172752314"></a>media</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.62%" headers="mcps1.1.6.1.2 "><p id="p1888052717236"><a name="p1888052717236"></a><a name="p1888052717236"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.73%" headers="mcps1.1.6.1.3 "><p id="p788072719231"><a name="p788072719231"></a><a name="p788072719231"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.04%" headers="mcps1.1.6.1.4 "><p id="p3880202762314"><a name="p3880202762314"></a><a name="p3880202762314"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="55.25%" headers="mcps1.1.6.1.5 "><p id="p1788015272236"><a name="p1788015272236"></a><a name="p1788015272236"></a>Matching condition of a media event.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-### Example<a name="section1120571611214"></a>
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | type | string | Yes | Must&nbsp;enter&nbsp;the&nbsp;string&nbsp;**change**. | 
+  | callback | Callback&lt;MediaQueryResult&gt; | Yes | Callback&nbsp;registered&nbsp;with&nbsp;media&nbsp;query. | 
+
+- Example
+  For details, see the [off example](#off).
+
+
+### off
+
+off(type: 'change', callback?: Callback&lt;MediaQueryResult&gt;): void
+
+  Unregisters a callback with the corresponding query condition by using the handle, so that no callback is triggered when the media attributes change.
+- Parameters
+    | Name | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | type | boolean | Yes | Must&nbsp;enter&nbsp;the&nbsp;string&nbsp;**change**. | 
+  | callback | Callback&lt;MediaQueryResult&gt; | No | Callback&nbsp;to&nbsp;be&nbsp;unregistered.&nbsp;If&nbsp;the&nbsp;default&nbsp;value&nbsp;is&nbsp;used,&nbsp;all&nbsp;callbacks&nbsp;of&nbsp;the&nbsp;handle&nbsp;are&nbsp;unregistered. | 
+
+- Example
+  
+  ```
+  listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listens to landscape events.
+  onPortrait(mediaQueryResult) {
+      if (mediaQueryResult.matches) {
+          // do something here
+      } else {
+          // do something here
+      }
+  }
+  listener.on('change', onPortrait) // Register a callback.
+  listener.off('change', onPortrait) // Unregister a callback.
+  ```
+
+
+## MediaQueryResult
+
+
+### Attributes
+
+  | Name | Type | Readable | Writable | Description | 
+| -------- | -------- | -------- | -------- | -------- |
+| matches | boolean | Yes | No | Whether&nbsp;the&nbsp;match&nbsp;condition&nbsp;is&nbsp;met. | 
+| media | string | Yes | No | Matching&nbsp;condition&nbsp;of&nbsp;a&nbsp;media&nbsp;event. | 
+
+
+### Example
+
 
 ```
 import mediaquery from '@ohos.mediaquery'
@@ -293,5 +147,4 @@ struct MediaQueryExample {
 }
 ```
 
-![](figures/mediaquery.gif)
-
+![en-us_image_0000001257138369](figures/en-us_image_0000001257138369.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-methods-popup-window.md b/en/application-dev/reference/arkui-ts/ts-methods-popup-window.md
new file mode 100644
index 0000000000000000000000000000000000000000..d73efbd8c8d9e8ab1a05d383a8dd2d810df0b486
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-methods-popup-window.md
@@ -0,0 +1,9 @@
+# Pop-up Window
+
+
+
+- **[Alert Dialog Box](ts-methods-alert-dialog-box.md)**
+
+- **[Action Sheet](ts-methods-action-sheet.md)**
+
+- **[Custom Dialog Box](ts-methods-custom-dialog-box.md)**
\ No newline at end of file
diff --git a/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md b/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md
index 56719de12b1bc36a1ebaf620d57898336dae0618..ec0b7d8d9bf3845532644f36ea0ef4af41632816 100644
--- a/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md
+++ b/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md
@@ -1,51 +1,23 @@
-# Motion Path Animation<a name="EN-US_TOPIC_0000001193075092"></a>
+# Motion Path Animation
+
+
+> ![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.
 
->![](../../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.
 
 The attributes described in this topic are used to set the motion path of the component in a translation animation.
 
-## Attributes<a name="section1944320255912"></a>
 
-<a name="table372mcpsimp"></a>
-<table><thead align="left"><tr id="row379mcpsimp"><th class="cellrowborder" valign="top" width="14.06%" id="mcps1.1.5.1.1"><p id="p381mcpsimp"><a name="p381mcpsimp"></a><a name="p381mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="33.61%" id="mcps1.1.5.1.2"><p id="p383mcpsimp"><a name="p383mcpsimp"></a><a name="p383mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="10.16%" id="mcps1.1.5.1.3"><p id="p385mcpsimp"><a name="p385mcpsimp"></a><a name="p385mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="42.17%" id="mcps1.1.5.1.4"><p id="p387mcpsimp"><a name="p387mcpsimp"></a><a name="p387mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row388mcpsimp"><td class="cellrowborder" valign="top" width="14.06%" headers="mcps1.1.5.1.1 "><p id="p390mcpsimp"><a name="p390mcpsimp"></a><a name="p390mcpsimp"></a>motionPath</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.61%" headers="mcps1.1.5.1.2 "><p id="p54191452102110"><a name="p54191452102110"></a><a name="p54191452102110"></a>{</p>
-<p id="p54155512115"><a name="p54155512115"></a><a name="p54155512115"></a>path: string,</p>
-<p id="p56745722113"><a name="p56745722113"></a><a name="p56745722113"></a>from?: number,</p>
-<p id="p16961559162118"><a name="p16961559162118"></a><a name="p16961559162118"></a>to?: number,</p>
-<p id="p3796549229"><a name="p3796549229"></a><a name="p3796549229"></a>rotatable?: boolean</p>
-<p id="p167364437214"><a name="p167364437214"></a><a name="p167364437214"></a>}</p>
-<div class="note" id="note11586162314318"><a name="note11586162314318"></a><a name="note11586162314318"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p18761128184314"><a name="p18761128184314"></a><a name="p18761128184314"></a>In a path, <strong id="b9143801828"><a name="b9143801828"></a><a name="b9143801828"></a>start</strong> and <strong id="b165901821023"><a name="b165901821023"></a><a name="b165901821023"></a>end</strong> can be used to replace the start point and end point. Example:</p>
-<p id="p18761628194312"><a name="p18761628194312"></a><a name="p18761628194312"></a>'Mstart.x start.y L50 50 Lend.x end.y Z'</p>
-</div></div>
-</td>
-<td class="cellrowborder" valign="top" width="10.16%" headers="mcps1.1.5.1.3 "><p id="p13559292229"><a name="p13559292229"></a><a name="p13559292229"></a>{</p>
-<p id="p211519113229"><a name="p211519113229"></a><a name="p211519113229"></a>"",</p>
-<p id="p14647151352215"><a name="p14647151352215"></a><a name="p14647151352215"></a>0.0,</p>
-<p id="p3601175613423"><a name="p3601175613423"></a><a name="p3601175613423"></a>1.0,</p>
-<p id="p11188815192218"><a name="p11188815192218"></a><a name="p11188815192218"></a>false</p>
-<p id="p394mcpsimp"><a name="p394mcpsimp"></a><a name="p394mcpsimp"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="42.17%" headers="mcps1.1.5.1.4 "><p id="p396mcpsimp"><a name="p396mcpsimp"></a><a name="p396mcpsimp"></a>Motion path of the component. The input parameters are described as follows:</p>
-<a name="ul1443318326611"></a><a name="ul1443318326611"></a><ul id="ul1443318326611"><li><strong id="b3296105661213"><a name="b3296105661213"></a><a name="b3296105661213"></a>path</strong>: motion path of the translation animation. The <strong id="b336094713123"><a name="b336094713123"></a><a name="b336094713123"></a>svg</strong> path string is used.</li><li><strong id="b10207259181210"><a name="b10207259181210"></a><a name="b10207259181210"></a>from</strong>: start point of the motion path. The default value is <strong id="b13975130201314"><a name="b13975130201314"></a><a name="b13975130201314"></a>0.0</strong>.</li><li><strong id="b579283151316"><a name="b579283151316"></a><a name="b579283151316"></a>to</strong>: end point of the motion path. The default value is <strong id="b135114617132"><a name="b135114617132"></a><a name="b135114617132"></a>1.0</strong>.</li><li><strong id="b88061611181311"><a name="b88061611181311"></a><a name="b88061611181311"></a>rotatable</strong>: whether to rotate along the path.</li></ul>
-</td>
-</tr>
-</tbody>
-</table>
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| motionPath | {<br/>path:&nbsp;string,<br/>from?:&nbsp;number,<br/>to?:&nbsp;number,<br/>rotatable?:&nbsp;boolean<br/>}<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;In&nbsp;a&nbsp;path,&nbsp;**start**&nbsp;and&nbsp;**end**&nbsp;can&nbsp;be&nbsp;used&nbsp;to&nbsp;replace&nbsp;the&nbsp;start&nbsp;point&nbsp;and&nbsp;end&nbsp;point.&nbsp;Example:<br/>>&nbsp;<br/>>&nbsp;'Mstart.x&nbsp;start.y&nbsp;L50&nbsp;50&nbsp;Lend.x&nbsp;end.y&nbsp;Z' | {<br/>"",<br/>0.0,<br/>1.0,<br/>false<br/>} | Motion&nbsp;path&nbsp;of&nbsp;the&nbsp;component.&nbsp;The&nbsp;input&nbsp;parameters&nbsp;are&nbsp;described&nbsp;as&nbsp;follows:<br/>-&nbsp;**path**:&nbsp;motion&nbsp;path&nbsp;of&nbsp;the&nbsp;translation&nbsp;animation.&nbsp;The&nbsp;**svg**&nbsp;path&nbsp;string&nbsp;is&nbsp;used.<br/>-&nbsp;**from**:&nbsp;start&nbsp;point&nbsp;of&nbsp;the&nbsp;motion&nbsp;path.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**0.0**.<br/>-&nbsp;**to**:&nbsp;end&nbsp;point&nbsp;of&nbsp;the&nbsp;motion&nbsp;path.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**1.0**.<br/>-&nbsp;**rotatable**:&nbsp;whether&nbsp;to&nbsp;rotate&nbsp;along&nbsp;the&nbsp;path. | 
 
-## Example<a name="section4278134412416"></a>
 
+## Example
+
+  
 ```
 @Entry
 @Component
@@ -68,5 +40,4 @@ struct MotionPathExample {
 }
 ```
 
-![](figures/motion.gif)
-
+![en-us_image_0000001212378420](figures/en-us_image_0000001212378420.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
index 440b12f304e589a160bb91e74c7856a124b5ccd1..1e133ff6887fc17339b79d54532053c582d5e5ec 100644
--- a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
@@ -1,260 +1,54 @@
-# OffscreenCanvasRenderingConxt2D<a name="EN-US_TOPIC_0000001192595178"></a>
-
->![](../../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.
-
-Use  **OffscreenCanvasRenderingContext2D**  to draw rectangles, images, and text offscreen onto a canvas. Drawing offscreen onto a canvas is a process where content to draw onto the canvas is first drawn in the buffer, and then converted into a picture, and finally the picture is drawn on the canvas. This process increases the drawing efficiency.
-
-## APIs<a name="section15647101282420"></a>
-
-OffscreenCanvasRenderingContext2D\(width: number, height: number, setting: RenderingContextSettings\)
-
--   Parameters
-
-    <a name="table193606194544"></a>
-    <table><thead align="left"><tr id="row536071910541"><th class="cellrowborder" valign="top" width="12.540000000000001%" id="mcps1.1.6.1.1"><p id="p436112199544"><a name="p436112199544"></a><a name="p436112199544"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.150000000000002%" id="mcps1.1.6.1.2"><p id="p19361319115410"><a name="p19361319115410"></a><a name="p19361319115410"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.49%" id="mcps1.1.6.1.3"><p id="p9361201975417"><a name="p9361201975417"></a><a name="p9361201975417"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.6%" id="mcps1.1.6.1.4"><p id="p43611199542"><a name="p43611199542"></a><a name="p43611199542"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="36.22%" id="mcps1.1.6.1.5"><p id="p1136141975419"><a name="p1136141975419"></a><a name="p1136141975419"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row373833719443"><td class="cellrowborder" valign="top" width="12.540000000000001%" headers="mcps1.1.6.1.1 "><p id="p6739113714414"><a name="p6739113714414"></a><a name="p6739113714414"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.150000000000002%" headers="mcps1.1.6.1.2 "><p id="p773933764415"><a name="p773933764415"></a><a name="p773933764415"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.49%" headers="mcps1.1.6.1.3 "><p id="p2073933724411"><a name="p2073933724411"></a><a name="p2073933724411"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.6%" headers="mcps1.1.6.1.4 "><p id="p473973724414"><a name="p473973724414"></a><a name="p473973724414"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p373903794414"><a name="p373903794414"></a><a name="p373903794414"></a>Width of the offscreen canvas.</p>
-    </td>
-    </tr>
-    <tr id="row3164103312448"><td class="cellrowborder" valign="top" width="12.540000000000001%" headers="mcps1.1.6.1.1 "><p id="p1116523312443"><a name="p1116523312443"></a><a name="p1116523312443"></a>height</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.150000000000002%" headers="mcps1.1.6.1.2 "><p id="p916573315443"><a name="p916573315443"></a><a name="p916573315443"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.49%" headers="mcps1.1.6.1.3 "><p id="p816518332441"><a name="p816518332441"></a><a name="p816518332441"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.6%" headers="mcps1.1.6.1.4 "><p id="p13166193314446"><a name="p13166193314446"></a><a name="p13166193314446"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p1316683314413"><a name="p1316683314413"></a><a name="p1316683314413"></a>Height of the offscreen canvas.</p>
-    </td>
-    </tr>
-    <tr id="row10361101915545"><td class="cellrowborder" valign="top" width="12.540000000000001%" headers="mcps1.1.6.1.1 "><p id="p1361119155417"><a name="p1361119155417"></a><a name="p1361119155417"></a>setting</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.150000000000002%" headers="mcps1.1.6.1.2 "><p id="p8361181913548"><a name="p8361181913548"></a><a name="p8361181913548"></a><a href="ts-canvasrenderingcontext2d.md#section189411348141711">RenderingContextSettings</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.49%" headers="mcps1.1.6.1.3 "><p id="p153611119195411"><a name="p153611119195411"></a><a name="p153611119195411"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.6%" headers="mcps1.1.6.1.4 "><p id="p1436114193546"><a name="p1436114193546"></a><a name="p1436114193546"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p328155017218"><a name="p328155017218"></a><a name="p328155017218"></a>For details, see APIs of <a href="ts-canvasrenderingcontext2d.md#section189411348141711">RenderingContextSettings</a>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section122871125229"></a>
-
-<a name="table5448mcpsimp"></a>
-<table><thead align="left"><tr id="row5456mcpsimp"><th class="cellrowborder" valign="top" width="13.951395139513952%" id="mcps1.1.5.1.1"><p id="p5458mcpsimp"><a name="p5458mcpsimp"></a><a name="p5458mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="26.732673267326728%" id="mcps1.1.5.1.2"><p id="p5460mcpsimp"><a name="p5460mcpsimp"></a><a name="p5460mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="9.68096809680968%" id="mcps1.1.5.1.3"><p id="p138236401285"><a name="p138236401285"></a><a name="p138236401285"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="49.63496349634964%" id="mcps1.1.5.1.4"><p id="p5466mcpsimp"><a name="p5466mcpsimp"></a><a name="p5466mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row5467mcpsimp"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p194373617255"><a name="p194373617255"></a><a name="p194373617255"></a><a href="ts-canvasrenderingcontext2d.md#section14391838151316">fillStyle</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.732673267326728%" headers="mcps1.1.5.1.2 "><p id="p5471mcpsimp"><a name="p5471mcpsimp"></a><a name="p5471mcpsimp"></a>&lt;color&gt; | <a href="ts-components-canvas-canvasgradient.md">CanvasGradient</a> | <a href="#section146853345417">CanvasPattern</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="9.68096809680968%" headers="mcps1.1.5.1.3 "><p id="p128231040182817"><a name="p128231040182817"></a><a name="p128231040182817"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p5477mcpsimp"><a name="p5477mcpsimp"></a><a name="p5477mcpsimp"></a>Style to fill an area.</p>
-<a name="ul139315155296"></a><a name="ul139315155296"></a><ul id="ul139315155296"><li>When the type is <strong id="b106882466137"><a name="b106882466137"></a><a name="b106882466137"></a>&lt;color&gt;</strong>, this parameter indicates the color of the filling area.</li><li>When the type is <strong id="b11267174921311"><a name="b11267174921311"></a><a name="b11267174921311"></a>CanvasGradient</strong>, this parameter indicates a gradient object, which is created using the <a href="#section14582213497">createLinearGradient</a> method.</li><li>When the type is <strong id="b141595917138"><a name="b141595917138"></a><a name="b141595917138"></a>CanvasPattern</strong>, use the <a href="#section660873113512">createPattern</a> method to create a pattern.</li></ul>
-</td>
-</tr>
-<tr id="row5478mcpsimp"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p5480mcpsimp"><a name="p5480mcpsimp"></a><a name="p5480mcpsimp"></a><a href="ts-canvasrenderingcontext2d.md#section104861220181415">lineWidth</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.732673267326728%" headers="mcps1.1.5.1.2 "><p id="p19243401305"><a name="p19243401305"></a><a name="p19243401305"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.68096809680968%" headers="mcps1.1.5.1.3 "><p id="p88231840142814"><a name="p88231840142814"></a><a name="p88231840142814"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p5488mcpsimp"><a name="p5488mcpsimp"></a><a name="p5488mcpsimp"></a>Line width.</p>
-</td>
-</tr>
-<tr id="row1930464616243"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p9305154611244"><a name="p9305154611244"></a><a name="p9305154611244"></a><a href="ts-canvasrenderingcontext2d.md#section1216741261620">strokeStyle</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.732673267326728%" headers="mcps1.1.5.1.2 "><p id="p143052463243"><a name="p143052463243"></a><a name="p143052463243"></a>&lt;color&gt; | <a href="ts-components-canvas-canvasgradient.md">CanvasGradient</a> | <a href="#section146853345417">CanvasPattern</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="9.68096809680968%" headers="mcps1.1.5.1.3 "><p id="p103051746202413"><a name="p103051746202413"></a><a name="p103051746202413"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p1431612011267"><a name="p1431612011267"></a><a name="p1431612011267"></a>Stroke style.</p>
-<a name="ul53168018260"></a><a name="ul53168018260"></a><ul id="ul53168018260"><li>When the type is <strong id="b1272718106144"><a name="b1272718106144"></a><a name="b1272718106144"></a>&lt;color&gt;</strong>, this parameter indicates the stroke color.</li><li>When the type is <strong id="b136731013111411"><a name="b136731013111411"></a><a name="b136731013111411"></a>CanvasGradient</strong>, this parameter indicates a gradient object, which is created using the <a href="#section14582213497">createLinearGradient</a> method.</li><li>When the type is <strong id="b16389122216144"><a name="b16389122216144"></a><a name="b16389122216144"></a>CanvasPattern</strong>, use the <a href="#section660873113512">createPattern</a> method to create a pattern.</li></ul>
-</td>
-</tr>
-<tr id="row1491315492523"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p6914104918527"><a name="p6914104918527"></a><a name="p6914104918527"></a><a href="ts-canvasrenderingcontext2d.md#section887817337173">lineCap</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.732673267326728%" headers="mcps1.1.5.1.2 "><p id="p12914449165217"><a name="p12914449165217"></a><a name="p12914449165217"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.68096809680968%" headers="mcps1.1.5.1.3 "><p id="p4914194995218"><a name="p4914194995218"></a><a name="p4914194995218"></a>'butt'</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p388031620530"><a name="p388031620530"></a><a name="p388031620530"></a>Style of the specified line endpoint. The options are as follows:</p>
-<a name="ul4880171605310"></a><a name="ul4880171605310"></a><ul id="ul4880171605310"><li><strong id="b1179624771415"><a name="b1179624771415"></a><a name="b1179624771415"></a>'butt'</strong>: The endpoints of the line are squared off.</li><li><strong id="b566834812143"><a name="b566834812143"></a><a name="b566834812143"></a>'round'</strong>: The endpoints of the line are rounded.</li><li><strong id="b526055861410"><a name="b526055861410"></a><a name="b526055861410"></a>'square'</strong>: The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.</li></ul>
-</td>
-</tr>
-<tr id="row3349241115414"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p034954105410"><a name="p034954105410"></a><a name="p034954105410"></a><a href="ts-canvasrenderingcontext2d.md#section77593271919">lineJoin</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.732673267326728%" headers="mcps1.1.5.1.2 "><p id="p1835013416547"><a name="p1835013416547"></a><a name="p1835013416547"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.68096809680968%" headers="mcps1.1.5.1.3 "><p id="p03501741145413"><a name="p03501741145413"></a><a name="p03501741145413"></a>'miter'</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p1529212156559"><a name="p1529212156559"></a><a name="p1529212156559"></a>Style of the intersection point between line segments. The options are as follows:</p>
-<a name="ul929219154551"></a><a name="ul929219154551"></a><ul id="ul929219154551"><li><strong id="b16173105121518"><a name="b16173105121518"></a><a name="b16173105121518"></a>'round'</strong>: The intersection is a sector, whose radius at the rounded corner is equal to the line width.</li><li><strong id="b337867141516"><a name="b337867141516"></a><a name="b337867141516"></a>'bevel'</strong>: The intersection is a triangle. The rectangular corner of each line is independent.</li><li><strong id="b2318128161512"><a name="b2318128161512"></a><a name="b2318128161512"></a>'miter'</strong>: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in <strong id="b23182891517"><a name="b23182891517"></a><a name="b23182891517"></a>miterLimit</strong>.</li></ul>
-</td>
-</tr>
-<tr id="row169726172599"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p10972217205918"><a name="p10972217205918"></a><a name="p10972217205918"></a><a href="ts-canvasrenderingcontext2d.md#section177441243427">miterLimit</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.732673267326728%" headers="mcps1.1.5.1.2 "><p id="p1997281785917"><a name="p1997281785917"></a><a name="p1997281785917"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.68096809680968%" headers="mcps1.1.5.1.3 "><p id="p997311725915"><a name="p997311725915"></a><a name="p997311725915"></a>10</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p1797319176594"><a name="p1797319176594"></a><a name="p1797319176594"></a>Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.</p>
-</td>
-</tr>
-<tr id="row17431738523"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p9437315210"><a name="p9437315210"></a><a name="p9437315210"></a><a href="ts-canvasrenderingcontext2d.md#section185699365434">font</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.732673267326728%" headers="mcps1.1.5.1.2 "><p id="p54315316521"><a name="p54315316521"></a><a name="p54315316521"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.68096809680968%" headers="mcps1.1.5.1.3 "><p id="p5122135214815"><a name="p5122135214815"></a><a name="p5122135214815"></a>'normal normal 14px sans-serif'</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p112514494494"><a name="p112514494494"></a><a name="p112514494494"></a>Font style.</p>
-<p id="p24315121810"><a name="p24315121810"></a><a name="p24315121810"></a>Syntax: ctx.font='font-size font-family'</p>
-<a name="ul9432122811"></a><a name="ul9432122811"></a><ul id="ul9432122811"><li>(Optional) <strong id="b11650111410151"><a name="b11650111410151"></a><a name="b11650111410151"></a>font-size</strong>: font size and row height. The unit can only be pixels.</li><li>(Optional) <strong id="b578872620155"><a name="b578872620155"></a><a name="b578872620155"></a>font-family</strong>: font family.</li></ul>
-<p id="p14804172734717"><a name="p14804172734717"></a><a name="p14804172734717"></a>Syntax: ctx.font='font-style font-weight font-size font-family'</p>
-<a name="ul128041227164715"></a><a name="ul128041227164715"></a><ul id="ul128041227164715"><li>(Optional) <strong id="b7948334181516"><a name="b7948334181516"></a><a name="b7948334181516"></a>font-style</strong>: specifies the font style. Available values are <strong id="b209491334101516"><a name="b209491334101516"></a><a name="b209491334101516"></a>'normal'</strong> and <strong id="b18950934121510"><a name="b18950934121510"></a><a name="b18950934121510"></a>'italic'</strong>.</li><li>(Optional) <strong id="b3794164641514"><a name="b3794164641514"></a><a name="b3794164641514"></a>font-weight</strong>: font weight. Available values are as follows: <strong id="b12795134611154"><a name="b12795134611154"></a><a name="b12795134611154"></a>'normal'</strong>, <strong id="b20795446161514"><a name="b20795446161514"></a><a name="b20795446161514"></a>'bold'</strong>, <strong id="b6796846141518"><a name="b6796846141518"></a><a name="b6796846141518"></a>'bolder'</strong>, <strong id="b137971246131516"><a name="b137971246131516"></a><a name="b137971246131516"></a>'lighter'</strong>, <strong id="b20797124619158"><a name="b20797124619158"></a><a name="b20797124619158"></a>100</strong>, <strong id="b1579814681515"><a name="b1579814681515"></a><a name="b1579814681515"></a>200</strong>, <strong id="b279904612157"><a name="b279904612157"></a><a name="b279904612157"></a>300</strong>, <strong id="b197997469158"><a name="b197997469158"></a><a name="b197997469158"></a>400</strong>, <strong id="b158001846191518"><a name="b158001846191518"></a><a name="b158001846191518"></a>500</strong>, <strong id="b1880012462156"><a name="b1880012462156"></a><a name="b1880012462156"></a>600</strong>, <strong id="b1380134691510"><a name="b1380134691510"></a><a name="b1380134691510"></a>700</strong>, <strong id="b9802114610157"><a name="b9802114610157"></a><a name="b9802114610157"></a>800</strong>, <strong id="b1180274681513"><a name="b1180274681513"></a><a name="b1180274681513"></a>900</strong></li><li>(Optional) <strong id="b15634165212153"><a name="b15634165212153"></a><a name="b15634165212153"></a>font-size</strong>: font size and row height. The unit can only be pixels.</li><li>(Optional) <strong id="b118781255141516"><a name="b118781255141516"></a><a name="b118781255141516"></a>font-family</strong>: font family. Available values are <strong id="b98791655191516"><a name="b98791655191516"></a><a name="b98791655191516"></a>'sans-serif'</strong>, <strong id="b11879155516155"><a name="b11879155516155"></a><a name="b11879155516155"></a>'serif'</strong>, and <strong id="b7880185521511"><a name="b7880185521511"></a><a name="b7880185521511"></a>'monospace'</strong>.</li></ul>
-</td>
-</tr>
-<tr id="row568518327518"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p10685203255117"><a name="p10685203255117"></a><a name="p10685203255117"></a><a href="ts-canvasrenderingcontext2d.md#section41621415164419">textAlign</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.732673267326728%" headers="mcps1.1.5.1.2 "><p id="p206851132195115"><a name="p206851132195115"></a><a name="p206851132195115"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.68096809680968%" headers="mcps1.1.5.1.3 "><p id="p768516327516"><a name="p768516327516"></a><a name="p768516327516"></a>'left'</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p1268512328512"><a name="p1268512328512"></a><a name="p1268512328512"></a>Text alignment mode. Available values are as follows:</p>
-<a name="ul47713282523"></a><a name="ul47713282523"></a><ul id="ul47713282523"><li><strong id="b1948595831513"><a name="b1948595831513"></a><a name="b1948595831513"></a>'left'</strong>: The text is left-aligned.</li><li><strong id="b2431359181519"><a name="b2431359181519"></a><a name="b2431359181519"></a>'right'</strong>: The text is right-aligned.</li><li><strong id="b126301312161"><a name="b126301312161"></a><a name="b126301312161"></a>'center'</strong>: The text is center-aligned.</li><li><strong id="b65461523168"><a name="b65461523168"></a><a name="b65461523168"></a>'start'</strong>: The text is aligned with the start bound.</li><li><strong id="b1321174161614"><a name="b1321174161614"></a><a name="b1321174161614"></a>'end'</strong>: The text is aligned with the end bound.</li></ul>
-<div class="note" id="note18771928165213"><a name="note18771928165213"></a><a name="note18771928165213"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p977142811526"><a name="p977142811526"></a><a name="p977142811526"></a>In the <strong id="b1989017411618"><a name="b1989017411618"></a><a name="b1989017411618"></a>ltr</strong> layout mode, the value <strong id="b14890114181614"><a name="b14890114181614"></a><a name="b14890114181614"></a>start</strong> equals <strong id="b1789110417164"><a name="b1789110417164"></a><a name="b1789110417164"></a>left</strong>. In the <strong id="b12891134151611"><a name="b12891134151611"></a><a name="b12891134151611"></a>rtl</strong> layout mode, the value <strong id="b98924471611"><a name="b98924471611"></a><a name="b98924471611"></a>start</strong> equals <strong id="b1893164181619"><a name="b1893164181619"></a><a name="b1893164181619"></a>right</strong>.</p>
-</div></div>
-</td>
-</tr>
-<tr id="row162312415315"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p1729812301537"><a name="p1729812301537"></a><a name="p1729812301537"></a><a href="ts-canvasrenderingcontext2d.md#section0497195924412">textBaseline</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.732673267326728%" headers="mcps1.1.5.1.2 "><p id="p56231324155312"><a name="p56231324155312"></a><a name="p56231324155312"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.68096809680968%" headers="mcps1.1.5.1.3 "><p id="p1862372445314"><a name="p1862372445314"></a><a name="p1862372445314"></a>'alphabetic'</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p1662319249536"><a name="p1662319249536"></a><a name="p1662319249536"></a>Horizontal alignment mode of text. Available values are as follows:</p>
-<a name="ul1944781165420"></a><a name="ul1944781165420"></a><ul id="ul1944781165420"><li><strong id="b121789918166"><a name="b121789918166"></a><a name="b121789918166"></a>'alphabetic'</strong>: The text baseline is the normal alphabetic baseline.</li><li><strong id="b844971031620"><a name="b844971031620"></a><a name="b844971031620"></a>'top'</strong>: The text baseline is on the top of the text bounding box.</li><li><strong id="b15473171121618"><a name="b15473171121618"></a><a name="b15473171121618"></a>'hanging'</strong>: The text baseline is a hanging baseline over the text.</li><li><strong id="b2019281213169"><a name="b2019281213169"></a><a name="b2019281213169"></a>'middle'</strong>: The text baseline is in the middle of the text bounding box.</li><li><strong id="b11714136168"><a name="b11714136168"></a><a name="b11714136168"></a>'ideographic'</strong>: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.</li><li><strong id="b10936171441614"><a name="b10936171441614"></a><a name="b10936171441614"></a>'bottom'</strong>: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.</li></ul>
-</td>
-</tr>
-<tr id="row1861912319472"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p6620153194714"><a name="p6620153194714"></a><a name="p6620153194714"></a><a href="ts-canvasrenderingcontext2d.md#section14962525174510">globalAlpha</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.732673267326728%" headers="mcps1.1.5.1.2 "><p id="p0620143114710"><a name="p0620143114710"></a><a name="p0620143114710"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.68096809680968%" headers="mcps1.1.5.1.3 "><p id="p16620536473"><a name="p16620536473"></a><a name="p16620536473"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p1062063174719"><a name="p1062063174719"></a><a name="p1062063174719"></a>Opacity. <strong id="b71587208167"><a name="b71587208167"></a><a name="b71587208167"></a>0.0</strong>: completely transparent; <strong id="b1915916201166"><a name="b1915916201166"></a><a name="b1915916201166"></a>1.0</strong>: completely opaque.</p>
-</td>
-</tr>
-<tr id="row674934291912"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p15749144231914"><a name="p15749144231914"></a><a name="p15749144231914"></a><a href="ts-canvasrenderingcontext2d.md#section10163191119469">lineDashOffset</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.732673267326728%" headers="mcps1.1.5.1.2 "><p id="p1749842121919"><a name="p1749842121919"></a><a name="p1749842121919"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.68096809680968%" headers="mcps1.1.5.1.3 "><p id="p11749144201914"><a name="p11749144201914"></a><a name="p11749144201914"></a>0.0</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p674954211197"><a name="p674954211197"></a><a name="p674954211197"></a>Offset of the dashed line. The precision is float.</p>
-</td>
-</tr>
-<tr id="row95411935182216"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p115417357226"><a name="p115417357226"></a><a name="p115417357226"></a><a href="ts-canvasrenderingcontext2d.md#section20658135394618">globalCompositeOperation</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.732673267326728%" headers="mcps1.1.5.1.2 "><p id="p25411035182217"><a name="p25411035182217"></a><a name="p25411035182217"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.68096809680968%" headers="mcps1.1.5.1.3 "><p id="p19541735112215"><a name="p19541735112215"></a><a name="p19541735112215"></a>'source-over'</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p254163517229"><a name="p254163517229"></a><a name="p254163517229"></a>Composition operation type. Available values are as follows: 'source-over', 'source-atop', 'source-in', 'source-out', 'destination-over', 'destination-atop', 'destination-in', 'destination-out', 'lighter', 'copy', and 'xor'.</p>
-</td>
-</tr>
-<tr id="row9663153633113"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p106641736183111"><a name="p106641736183111"></a><a name="p106641736183111"></a><a href="ts-canvasrenderingcontext2d.md#section962555815501">shadowBlur</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.732673267326728%" headers="mcps1.1.5.1.2 "><p id="p15664836133114"><a name="p15664836133114"></a><a name="p15664836133114"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.68096809680968%" headers="mcps1.1.5.1.3 "><p id="p46641736183114"><a name="p46641736183114"></a><a name="p46641736183114"></a>0.0</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p7664103673118"><a name="p7664103673118"></a><a name="p7664103673118"></a>Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.</p>
-</td>
-</tr>
-<tr id="row056212488333"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p1056264873311"><a name="p1056264873311"></a><a name="p1056264873311"></a><a href="ts-canvasrenderingcontext2d.md#section1380963318510">shadowColor</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.732673267326728%" headers="mcps1.1.5.1.2 "><p id="p1856213484334"><a name="p1856213484334"></a><a name="p1856213484334"></a>&lt;color&gt;</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.68096809680968%" headers="mcps1.1.5.1.3 "><p id="p25621848163318"><a name="p25621848163318"></a><a name="p25621848163318"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p1562748123320"><a name="p1562748123320"></a><a name="p1562748123320"></a>Shadow color.</p>
-</td>
-</tr>
-<tr id="row1288144353519"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p6881143153511"><a name="p6881143153511"></a><a name="p6881143153511"></a><a href="ts-canvasrenderingcontext2d.md#section83601599526">shadowOffsetX</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.732673267326728%" headers="mcps1.1.5.1.2 "><p id="p68814363510"><a name="p68814363510"></a><a name="p68814363510"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.68096809680968%" headers="mcps1.1.5.1.3 "><p id="p1488104393514"><a name="p1488104393514"></a><a name="p1488104393514"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p588164310356"><a name="p588164310356"></a><a name="p588164310356"></a>X-axis shadow offset relative to the original object.</p>
-</td>
-</tr>
-<tr id="row83031316183814"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p1641410177382"><a name="p1641410177382"></a><a name="p1641410177382"></a><a href="ts-canvasrenderingcontext2d.md#section10859152455314">shadowOffsetY</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.732673267326728%" headers="mcps1.1.5.1.2 "><p id="p83031616153813"><a name="p83031616153813"></a><a name="p83031616153813"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.68096809680968%" headers="mcps1.1.5.1.3 "><p id="p1330318161388"><a name="p1330318161388"></a><a name="p1330318161388"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p1830451623810"><a name="p1830451623810"></a><a name="p1830451623810"></a>Y-axis shadow offset relative to the original object.</p>
-</td>
-</tr>
-<tr id="row18343553194012"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p14343353164014"><a name="p14343353164014"></a><a name="p14343353164014"></a><a href="ts-canvasrenderingcontext2d.md#section132528555535">imageSmoothingEnabled</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="26.732673267326728%" headers="mcps1.1.5.1.2 "><p id="p1734319533401"><a name="p1734319533401"></a><a name="p1734319533401"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.68096809680968%" headers="mcps1.1.5.1.3 "><p id="p134315324012"><a name="p134315324012"></a><a name="p134315324012"></a>true</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p83431253164015"><a name="p83431253164015"></a><a name="p83431253164015"></a>Whether to adjust the image smoothness during image drawing. The value <strong id="b1110155614165"><a name="b1110155614165"></a><a name="b1110155614165"></a>true</strong> means to enable this feature, and <strong id="b1810356141611"><a name="b1810356141611"></a><a name="b1810356141611"></a>false</strong> means the opposite.</p>
-</td>
-</tr>
-<tr id="row6429324184315"><td class="cellrowborder" valign="top" width="13.951395139513952%" headers="mcps1.1.5.1.1 "><p id="p2429122414430"><a name="p2429122414430"></a><a name="p2429122414430"></a>imageSmoothingQuality</p>
-</td>
-<td class="cellrowborder" valign="top" width="26.732673267326728%" headers="mcps1.1.5.1.2 "><p id="p19429172413432"><a name="p19429172413432"></a><a name="p19429172413432"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.68096809680968%" headers="mcps1.1.5.1.3 "><p id="p1842912464313"><a name="p1842912464313"></a><a name="p1842912464313"></a>'low'</p>
-</td>
-<td class="cellrowborder" valign="top" width="49.63496349634964%" headers="mcps1.1.5.1.4 "><p id="p45511755196"><a name="p45511755196"></a><a name="p45511755196"></a>Image smoothness. The value can be <strong id="b6605957161618"><a name="b6605957161618"></a><a name="b6605957161618"></a>'low'</strong>, <strong id="b76068579161"><a name="b76068579161"></a><a name="b76068579161"></a>'medium'</strong>, or <strong id="b460614576165"><a name="b460614576165"></a><a name="b460614576165"></a>'high'</strong>.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->The value of the  **<color\>**  type can be in 'rgb\(255, 255, 255\)', 'rgba\(255, 255, 255, 1.0\)', or '\#FFFFFF' format.
-
-### fillStyle<a name="section14391838151316"></a>
+# OffscreenCanvasRenderingConxt2D
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **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.
+
+
+Use **OffscreenCanvasRenderingContext2D** to draw rectangles, images, and text offscreen onto a canvas. Drawing offscreen onto a canvas is a process where content to draw onto the canvas is first drawn in the buffer, and then converted into a picture, and finally the picture is drawn on the canvas. This process increases the drawing efficiency.
+
+
+## APIs
+
+OffscreenCanvasRenderingContext2D(width: number, height: number, setting: RenderingContextSettings)
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | width | number | Yes | - | Width&nbsp;of&nbsp;the&nbsp;offscreen&nbsp;canvas. |
+  | height | number | Yes | - | Height&nbsp;of&nbsp;the&nbsp;offscreen&nbsp;canvas. |
+  | setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | Yes | - | See&nbsp;RenderingContextSettings. |
+
+
+## Attributes
+
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| [fillStyle](#fillstyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | Style&nbsp;used&nbsp;to&nbsp;fill&nbsp;an&nbsp;area.<br/>-&nbsp;When&nbsp;the&nbsp;type&nbsp;is&nbsp;**&lt;color&gt;**,&nbsp;this&nbsp;attribute&nbsp;indicates&nbsp;the&nbsp;fill&nbsp;color.<br/>-&nbsp;When&nbsp;the&nbsp;type&nbsp;is&nbsp;**CanvasGradient**,&nbsp;this&nbsp;attribute&nbsp;indicates&nbsp;a&nbsp;gradient&nbsp;object,&nbsp;which&nbsp;is&nbsp;created&nbsp;using&nbsp;the&nbsp;[createLinearGradient](#createlineargradient)&nbsp;method.<br/>-&nbsp;When&nbsp;the&nbsp;type&nbsp;is&nbsp;**CanvasPattern**,&nbsp;this&nbsp;attribute&nbsp;indicates&nbsp;a&nbsp;pattern,&nbsp;which&nbsp;is&nbsp;created&nbsp;using&nbsp;the&nbsp;[createPattern](#createpattern)&nbsp;method. |
+| [lineWidth](#linewidth) | number | - | Line&nbsp;width. |
+| [strokeStyle](#strokestyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | Stroke&nbsp;style.<br/>-&nbsp;When&nbsp;the&nbsp;type&nbsp;is&nbsp;**&lt;color&gt;**,&nbsp;this&nbsp;attribute&nbsp;indicates&nbsp;the&nbsp;stroke&nbsp;color.<br/>-&nbsp;When&nbsp;the&nbsp;type&nbsp;is&nbsp;**CanvasGradient**,&nbsp;this&nbsp;attribute&nbsp;indicates&nbsp;a&nbsp;gradient&nbsp;object,&nbsp;which&nbsp;is&nbsp;created&nbsp;using&nbsp;the&nbsp;[createLinearGradient](#createlineargradient)&nbsp;method.<br/>-&nbsp;When&nbsp;the&nbsp;type&nbsp;is&nbsp;**CanvasPattern**,&nbsp;this&nbsp;attribute&nbsp;indicates&nbsp;a&nbsp;pattern,&nbsp;which&nbsp;is&nbsp;created&nbsp;using&nbsp;the&nbsp;[createPattern](#createpattern)&nbsp;method. |
+| [lineCap](#linecap) | string | 'butt' | Style&nbsp;of&nbsp;the&nbsp;line&nbsp;endpoints.&nbsp;The&nbsp;options&nbsp;are&nbsp;as&nbsp;follows:<br/>-&nbsp;**'butt'**:&nbsp;The&nbsp;endpoints&nbsp;of&nbsp;the&nbsp;line&nbsp;are&nbsp;squared&nbsp;off.<br/>-&nbsp;**'round'**:&nbsp;The&nbsp;endpoints&nbsp;of&nbsp;the&nbsp;line&nbsp;are&nbsp;rounded.<br/>-&nbsp;**'square'**:&nbsp;The&nbsp;endpoints&nbsp;of&nbsp;the&nbsp;line&nbsp;are&nbsp;squared&nbsp;off&nbsp;by&nbsp;adding&nbsp;a&nbsp;box&nbsp;with&nbsp;an&nbsp;equal&nbsp;width&nbsp;and&nbsp;half&nbsp;the&nbsp;height&nbsp;of&nbsp;the&nbsp;line's&nbsp;thickness. |
+| [lineJoin](#linejoin) | string | 'miter' | Style&nbsp;of&nbsp;the&nbsp;shape&nbsp;used&nbsp;to&nbsp;join&nbsp;line&nbsp;segments.&nbsp;The&nbsp;options&nbsp;are&nbsp;as&nbsp;follows:<br/>-&nbsp;**'round'**:&nbsp;The&nbsp;shape&nbsp;used&nbsp;to&nbsp;join&nbsp;line&nbsp;segments&nbsp;is&nbsp;a&nbsp;rounded&nbsp;corner&nbsp;with&nbsp;the&nbsp;radius&nbsp;equal&nbsp;to&nbsp;the&nbsp;line&nbsp;width.<br/>-&nbsp;**'bevel'**:&nbsp;The&nbsp;shape&nbsp;used&nbsp;to&nbsp;join&nbsp;line&nbsp;segments&nbsp;is&nbsp;a&nbsp;beveled&nbsp;corner.&nbsp;The&nbsp;rectangular&nbsp;corner&nbsp;of&nbsp;each&nbsp;line&nbsp;is&nbsp;independent.<br/>-&nbsp;**'miter'**:&nbsp;The&nbsp;shape&nbsp;used&nbsp;to&nbsp;join&nbsp;line&nbsp;segments&nbsp;is&nbsp;a&nbsp;mitered&nbsp;corner.&nbsp;The&nbsp;corner&nbsp;is&nbsp;formed&nbsp;by&nbsp;extending&nbsp;the&nbsp;outside&nbsp;edges&nbsp;of&nbsp;the&nbsp;lines&nbsp;until&nbsp;they&nbsp;meet.&nbsp;You&nbsp;can&nbsp;adjust&nbsp;the&nbsp;effect&nbsp;of&nbsp;this&nbsp;attribute&nbsp;using&nbsp;**miterLimit**. |
+| [miterLimit](#miterlimit) | number | 10 | Maximum&nbsp;miter&nbsp;length.&nbsp;The&nbsp;miter&nbsp;length&nbsp;is&nbsp;the&nbsp;distance&nbsp;between&nbsp;the&nbsp;inner&nbsp;corner&nbsp;and&nbsp;the&nbsp;outer&nbsp;corner&nbsp;where&nbsp;two&nbsp;lines&nbsp;meet. |
+| [font](#font) | string | 'normal&nbsp;normal&nbsp;14px&nbsp;sans-serif' | Font&nbsp;style.<br/>Syntax:&nbsp;ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;(Optional)&nbsp;**font-size**:&nbsp;font&nbsp;size&nbsp;and&nbsp;row&nbsp;height.&nbsp;The&nbsp;unit&nbsp;can&nbsp;only&nbsp;be&nbsp;px.<br/>-&nbsp;(Optional)&nbsp;**font-family**:&nbsp;font&nbsp;family.<br/>Syntax:&nbsp;ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;(Optional)&nbsp;**font-style**:&nbsp;specifies&nbsp;the&nbsp;font&nbsp;style.&nbsp;Available&nbsp;values&nbsp;are&nbsp;**'normal'**&nbsp;and&nbsp;**'italic'**.<br/>-&nbsp;(Optional)&nbsp;**font-weight**:&nbsp;font&nbsp;weight.&nbsp;Available&nbsp;values&nbsp;are&nbsp;as&nbsp;follows:&nbsp;**'normal'**,&nbsp;**'bold'**,&nbsp;**'bolder'**,&nbsp;**'lighter'**,&nbsp;**100**,&nbsp;**200**,&nbsp;**300**,&nbsp;**400**,&nbsp;**500**,&nbsp;**600**,&nbsp;**700**,&nbsp;**800**,&nbsp;**900**<br/>-&nbsp;(Optional)&nbsp;**font-size**:&nbsp;font&nbsp;size&nbsp;and&nbsp;row&nbsp;height.&nbsp;The&nbsp;unit&nbsp;can&nbsp;only&nbsp;be&nbsp;px.<br/>-&nbsp;(Optional)&nbsp;**font-family**:&nbsp;font&nbsp;family.&nbsp;Available&nbsp;values&nbsp;are&nbsp;**'sans-serif'**,&nbsp;**'serif'**,&nbsp;and&nbsp;**'monospace'**. |
+| [textAlign](#textalign) | string | 'left' | Text&nbsp;alignment&nbsp;mode.&nbsp;Available&nbsp;values&nbsp;are&nbsp;as&nbsp;follows:<br/>-&nbsp;**'left'**:&nbsp;The&nbsp;text&nbsp;is&nbsp;left-aligned.<br/>-&nbsp;**'right'**:&nbsp;The&nbsp;text&nbsp;is&nbsp;right-aligned.<br/>-&nbsp;**'center'**:&nbsp;The&nbsp;text&nbsp;is&nbsp;center-aligned.<br/>-&nbsp;**'start'**:&nbsp;The&nbsp;text&nbsp;is&nbsp;aligned&nbsp;with&nbsp;the&nbsp;start&nbsp;bound.<br/>-&nbsp;**'end'**:&nbsp;The&nbsp;text&nbsp;is&nbsp;aligned&nbsp;with&nbsp;the&nbsp;end&nbsp;bound.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;In&nbsp;the&nbsp;**ltr**&nbsp;layout&nbsp;mode,&nbsp;the&nbsp;value&nbsp;**start**&nbsp;equals&nbsp;**left**.&nbsp;In&nbsp;the&nbsp;**rtl**&nbsp;layout&nbsp;mode,&nbsp;the&nbsp;value&nbsp;**start**&nbsp;equals&nbsp;**right**. |
+| [textBaseline](#textbaseline) | string | 'alphabetic' | Horizontal&nbsp;alignment&nbsp;mode&nbsp;of&nbsp;text.&nbsp;Available&nbsp;values&nbsp;are&nbsp;as&nbsp;follows:<br/>-&nbsp;**'alphabetic'**:&nbsp;The&nbsp;text&nbsp;baseline&nbsp;is&nbsp;the&nbsp;normal&nbsp;alphabetic&nbsp;baseline.<br/>-&nbsp;**'top'**:&nbsp;The&nbsp;text&nbsp;baseline&nbsp;is&nbsp;on&nbsp;the&nbsp;top&nbsp;of&nbsp;the&nbsp;text&nbsp;bounding&nbsp;box.<br/>-&nbsp;**'hanging'**:&nbsp;The&nbsp;text&nbsp;baseline&nbsp;is&nbsp;a&nbsp;hanging&nbsp;baseline&nbsp;over&nbsp;the&nbsp;text.<br/>-&nbsp;**'middle'**:&nbsp;The&nbsp;text&nbsp;baseline&nbsp;is&nbsp;in&nbsp;the&nbsp;middle&nbsp;of&nbsp;the&nbsp;text&nbsp;bounding&nbsp;box.<br/>-&nbsp;**'ideographic'**:&nbsp;The&nbsp;text&nbsp;baseline&nbsp;is&nbsp;the&nbsp;ideographic&nbsp;baseline.&nbsp;If&nbsp;a&nbsp;character&nbsp;exceeds&nbsp;the&nbsp;alphabetic&nbsp;baseline,&nbsp;the&nbsp;ideographic&nbsp;baseline&nbsp;is&nbsp;located&nbsp;at&nbsp;the&nbsp;bottom&nbsp;of&nbsp;the&nbsp;excess&nbsp;character.<br/>-&nbsp;**'bottom'**:&nbsp;The&nbsp;text&nbsp;baseline&nbsp;is&nbsp;at&nbsp;the&nbsp;bottom&nbsp;of&nbsp;the&nbsp;text&nbsp;bounding&nbsp;box.&nbsp;Its&nbsp;difference&nbsp;from&nbsp;the&nbsp;ideographic&nbsp;baseline&nbsp;is&nbsp;that&nbsp;the&nbsp;ideographic&nbsp;baseline&nbsp;does&nbsp;not&nbsp;consider&nbsp;letters&nbsp;in&nbsp;the&nbsp;next&nbsp;line. |
+| [globalAlpha](#globalalpha) | number | - | Opacity.&nbsp;**0.0**:&nbsp;completely&nbsp;transparent;&nbsp;**1.0**:&nbsp;completely&nbsp;opaque. |
+| [lineDashOffset](#linedashoffset) | number | 0.0 | Offset&nbsp;of&nbsp;the&nbsp;dashed&nbsp;line.&nbsp;The&nbsp;precision&nbsp;is&nbsp;float. |
+| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | Composition&nbsp;operation&nbsp;type.&nbsp;Available&nbsp;values&nbsp;are&nbsp;as&nbsp;follows:&nbsp;**'source-over'**,&nbsp;**'source-atop'**,&nbsp;**'source-in'**,&nbsp;**'source-out'**,&nbsp;**'destination-over'**,&nbsp;**'destination-atop'**,&nbsp;**'destination-in'**,&nbsp;**'destination-out'**,&nbsp;**'lighter'**,&nbsp;**'copy'**,&nbsp;and&nbsp;**'xor'**. |
+| [shadowBlur](#shadowblur) | number | 0.0 | Blur&nbsp;level&nbsp;during&nbsp;shadow&nbsp;drawing.&nbsp;A&nbsp;larger&nbsp;value&nbsp;indicates&nbsp;a&nbsp;more&nbsp;blurred&nbsp;effect.&nbsp;The&nbsp;precision&nbsp;is&nbsp;float. |
+| [shadowColor](#shadowcolor) | &lt;color&gt; | - | Shadow&nbsp;color. |
+| [shadowOffsetX](#shadowoffsetx) | number | - | X-axis&nbsp;shadow&nbsp;offset&nbsp;relative&nbsp;to&nbsp;the&nbsp;original&nbsp;object. |
+| [shadowOffsetY](#shadowoffsety) | number | - | Y-axis&nbsp;shadow&nbsp;offset&nbsp;relative&nbsp;to&nbsp;the&nbsp;original&nbsp;object. |
+| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | Whether&nbsp;to&nbsp;adjust&nbsp;the&nbsp;image&nbsp;smoothness&nbsp;during&nbsp;image&nbsp;drawing.&nbsp;The&nbsp;value&nbsp;**true**&nbsp;means&nbsp;to&nbsp;enable&nbsp;this&nbsp;feature,&nbsp;and&nbsp;**false**&nbsp;means&nbsp;the&nbsp;opposite. |
+| imageSmoothingQuality | string | 'low' | Image&nbsp;smoothness.&nbsp;The&nbsp;value&nbsp;can&nbsp;be&nbsp;**'low'**,&nbsp;**'medium'**,&nbsp;or&nbsp;**'high'**. |
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> The value of the **&lt;color&gt;** type can be in 'rgb(255, 255, 255)', 'rgba(255, 255, 255, 1.0)', or '\#FFFFFF' format.
+
+
+### fillStyle
+
 
 ```
 @Entry
@@ -283,9 +77,11 @@ struct FillStyleExample {
 }
 ```
 
-![](figures/en-us_image_0000001237555173.png)
+![en-us_image_0000001211898510](figures/en-us_image_0000001211898510.png)
+
+
+### lineWidth
 
-### lineWidth<a name="section104861220181415"></a>
 
 ```
 @Entry
@@ -314,9 +110,11 @@ struct LineWidthExample {
 }
 ```
 
-![](figures/en-us_image_0000001192755194.png)
+![en-us_image_0000001257058439](figures/en-us_image_0000001257058439.png)
+
+
+### strokeStyle
 
-### strokeStyle<a name="section1216741261620"></a>
 
 ```
 @Entry
@@ -346,9 +144,12 @@ struct StrokeStyleExample {
 }
 ```
 
-![](figures/en-us_image_0000001237355135.png)
 
-### lineCap<a name="section887817337173"></a>
+![en-us_image_0000001257058429](figures/en-us_image_0000001257058429.png)
+
+
+### lineCap
+
 
 ```
 @Entry
@@ -381,9 +182,11 @@ struct LineCapExample {
 }
 ```
 
-![](figures/en-us_image_0000001192595232.png)
+![en-us_image_0000001256858427](figures/en-us_image_0000001256858427.png)
+
+
+### lineJoin
 
-### lineJoin<a name="section77593271919"></a>
 
 ```
 @Entry
@@ -417,9 +220,11 @@ struct LineJoinExample {
 }
 ```
 
-![](figures/en-us_image_0000001237715141.png)
+![en-us_image_0000001256858429](figures/en-us_image_0000001256858429.png)
+
+
+### miterLimit
 
-### miterLimit<a name="section177441243427"></a>
 
 ```
 @Entry
@@ -453,9 +258,11 @@ struct MiterLimit {
 }
 ```
 
-![](figures/en-us_image_0000001193075178.png)
+![en-us_image_0000001212218472](figures/en-us_image_0000001212218472.png)
+
+
+### font
 
-### font<a name="section185699365434"></a>
 
 ```
 @Entry
@@ -484,9 +291,11 @@ struct Font {
 }
 ```
 
-![](figures/en-us_image_0000001193075164.png)
+![en-us_image_0000001211898508](figures/en-us_image_0000001211898508.png)
+
+
+### textAlign
 
-### textAlign<a name="section41621415164419"></a>
 
 ```
 @Entry
@@ -530,9 +339,11 @@ struct CanvasExample {
 }
 ```
 
-![](figures/en-us_image_0000001192595234.png)
+![en-us_image_0000001257138377](figures/en-us_image_0000001257138377.png)
+
+
+### textBaseline
 
-### textBaseline<a name="section0497195924412"></a>
 
 ```
 @Entry
@@ -576,9 +387,11 @@ struct TextBaseline {
 }
 ```
 
-![](figures/en-us_image_0000001193075180.png)
+![en-us_image_0000001256978375](figures/en-us_image_0000001256978375.png)
+
+
+### globalAlpha
 
-### globalAlpha<a name="section14962525174510"></a>
 
 ```
 @Entry
@@ -610,9 +423,11 @@ struct GlobalAlpha {
 }
 ```
 
-![](figures/en-us_image_0000001237715165.png)
+![en-us_image_0000001211898506](figures/en-us_image_0000001211898506.png)
+
+
+### lineDashOffset
 
-### lineDashOffset<a name="section10163191119469"></a>
 
 ```
 @Entry
@@ -642,74 +457,25 @@ struct LineDashOffset {
 }
 ```
 
-![](figures/en-us_image_0000001237555181.png)
-
-### globalCompositeOperation<a name="section20658135394618"></a>
-
-<a name="table1171418182610"></a>
-<table><thead align="left"><tr id="row2168191820268"><th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.1"><p id="p1816811815262"><a name="p1816811815262"></a><a name="p1816811815262"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.2"><p id="p15168618142618"><a name="p15168618142618"></a><a name="p15168618142618"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row316821852620"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p1116811184264"><a name="p1116811184264"></a><a name="p1116811184264"></a>source-over</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p31681918182610"><a name="p31681918182610"></a><a name="p31681918182610"></a>Displays the new drawing above the existing drawing. This attribute is used by default.</p>
-</td>
-</tr>
-<tr id="row016881852610"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p12168131819266"><a name="p12168131819266"></a><a name="p12168131819266"></a>source-atop</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p316811184267"><a name="p316811184267"></a><a name="p316811184267"></a>Displays the new drawing on the top of the existing drawing.</p>
-</td>
-</tr>
-<tr id="row131681018112611"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p51681618132610"><a name="p51681618132610"></a><a name="p51681618132610"></a>source-in</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p101681318112617"><a name="p101681318112617"></a><a name="p101681318112617"></a>Displays the new drawing inside the existing drawing.</p>
-</td>
-</tr>
-<tr id="row4169191872617"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p316831842612"><a name="p316831842612"></a><a name="p316831842612"></a>source-out</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p1416961812613"><a name="p1416961812613"></a><a name="p1416961812613"></a>Displays the part of the new drawing that is outside of the existing drawing.</p>
-</td>
-</tr>
-<tr id="row116951812260"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p1169318112610"><a name="p1169318112610"></a><a name="p1169318112610"></a>destination-over</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p191691118182610"><a name="p191691118182610"></a><a name="p191691118182610"></a>Displays the existing drawing above the new drawing.</p>
-</td>
-</tr>
-<tr id="row21691318122615"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p91690186265"><a name="p91690186265"></a><a name="p91690186265"></a>destination-atop</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p111691918162610"><a name="p111691918162610"></a><a name="p111691918162610"></a>Displays the existing drawing above the new drawing.</p>
-</td>
-</tr>
-<tr id="row1817018186267"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p5169618122614"><a name="p5169618122614"></a><a name="p5169618122614"></a>destination-in</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p01691518162615"><a name="p01691518162615"></a><a name="p01691518162615"></a>Displays the existing drawing inside the new drawing.</p>
-</td>
-</tr>
-<tr id="row81701518132612"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p1917012187269"><a name="p1917012187269"></a><a name="p1917012187269"></a>destination-out</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p1817041842615"><a name="p1817041842615"></a><a name="p1817041842615"></a>Displays the part of the existing drawing that is outside of the new drawing.</p>
-</td>
-</tr>
-<tr id="row217031872611"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p141701518192616"><a name="p141701518192616"></a><a name="p141701518192616"></a>lighter</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p7170718112616"><a name="p7170718112616"></a><a name="p7170718112616"></a>Displays both the new drawing and the existing drawing.</p>
-</td>
-</tr>
-<tr id="row131701118112615"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p317081852616"><a name="p317081852616"></a><a name="p317081852616"></a>copy</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p1170718182615"><a name="p1170718182615"></a><a name="p1170718182615"></a>Displays the new drawing and neglects the existing drawing.</p>
-</td>
-</tr>
-<tr id="row10171161862615"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p6170191819269"><a name="p6170191819269"></a><a name="p6170191819269"></a>xor</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p71716181269"><a name="p71716181269"></a><a name="p71716181269"></a>Combines the new drawing and existing drawing using the XOR operation.</p>
-</td>
-</tr>
-</tbody>
-</table>
+![en-us_image_0000001212058506](figures/en-us_image_0000001212058506.png)
+
+
+### globalCompositeOperation
+
+  | Name | Description | 
+| -------- | -------- |
+| source-over | Displays&nbsp;the&nbsp;new&nbsp;drawing&nbsp;above&nbsp;the&nbsp;existing&nbsp;drawing.&nbsp;This&nbsp;attribute&nbsp;is&nbsp;used&nbsp;by&nbsp;default. | 
+| source-atop | Displays&nbsp;the&nbsp;new&nbsp;drawing&nbsp;on&nbsp;the&nbsp;top&nbsp;of&nbsp;the&nbsp;existing&nbsp;drawing. | 
+| source-in | Displays&nbsp;the&nbsp;new&nbsp;drawing&nbsp;inside&nbsp;the&nbsp;existing&nbsp;drawing. | 
+| source-out | Displays&nbsp;the&nbsp;part&nbsp;of&nbsp;the&nbsp;new&nbsp;drawing&nbsp;that&nbsp;is&nbsp;outside&nbsp;of&nbsp;the&nbsp;existing&nbsp;drawing. | 
+| destination-over | Displays&nbsp;the&nbsp;existing&nbsp;drawing&nbsp;above&nbsp;the&nbsp;new&nbsp;drawing. | 
+| destination-atop | Displays&nbsp;the&nbsp;existing&nbsp;drawing&nbsp;on&nbsp;the&nbsp;top&nbsp;of&nbsp;the&nbsp;new&nbsp;drawing. | 
+| destination-in | Displays&nbsp;the&nbsp;existing&nbsp;drawing&nbsp;inside&nbsp;the&nbsp;new&nbsp;drawing. | 
+| destination-out | Displays&nbsp;the&nbsp;part&nbsp;of&nbsp;the&nbsp;existing&nbsp;drawing&nbsp;that&nbsp;is&nbsp;outside&nbsp;of&nbsp;the&nbsp;new&nbsp;drawing. | 
+| lighter | Displays&nbsp;both&nbsp;the&nbsp;new&nbsp;drawing&nbsp;and&nbsp;the&nbsp;existing&nbsp;drawing. | 
+| copy | Displays&nbsp;the&nbsp;new&nbsp;drawing&nbsp;and&nbsp;neglects&nbsp;the&nbsp;existing&nbsp;drawing. | 
+| xor | Combines&nbsp;the&nbsp;new&nbsp;drawing&nbsp;and&nbsp;existing&nbsp;drawing&nbsp;using&nbsp;the&nbsp;XOR&nbsp;operation. | 
+
 
 ```
 @Entry
@@ -746,9 +512,11 @@ struct GlobalCompositeOperation {
 }
 ```
 
-![](figures/en-us_image_0000001237355137.png)
+![en-us_image_0000001212218474](figures/en-us_image_0000001212218474.png)
+
+
+### shadowBlur
 
-### shadowBlur<a name="section962555815501"></a>
 
 ```
 @Entry
@@ -779,9 +547,11 @@ struct ShadowBlur {
 }
 ```
 
-![](figures/en-us_image_0000001192755182.png)
+![en-us_image_0000001211898514](figures/en-us_image_0000001211898514.png)
+
+
+### shadowColor
 
-### shadowColor<a name="section1380963318510"></a>
 
 ```
 @Entry
@@ -813,9 +583,11 @@ struct ShadowColor {
 }
 ```
 
-![](figures/en-us_image_0000001237555155.png)
+![en-us_image_0000001212058502](figures/en-us_image_0000001212058502.png)
+
+
+### shadowOffsetX
 
-### shadowOffsetX<a name="section83601599526"></a>
 
 ```
 @Entry
@@ -847,9 +619,11 @@ struct ShadowOffsetX {
 }
 ```
 
-![](figures/en-us_image_0000001193075168.png)
+![en-us_image_0000001257138379](figures/en-us_image_0000001257138379.png)
+
+
+### shadowOffsetY
 
-### shadowOffsetY<a name="section10859152455314"></a>
 
 ```
 @Entry
@@ -881,9 +655,11 @@ struct ShadowOffsetY {
 }
 ```
 
-![](figures/en-us_image_0000001237475139.png)
+![en-us_image_0000001257058427](figures/en-us_image_0000001257058427.png)
+
+
+### imageSmoothingEnabled
 
-### imageSmoothingEnabled<a name="section132528555535"></a>
 
 ```
 @Entry
@@ -913,2991 +689,1472 @@ struct ImageSmoothingEnabled {
 }
 ```
 
-![](figures/en-us_image_0000001237355121.png)
+![en-us_image_0000001257138385](figures/en-us_image_0000001257138385.png)
+
 
-## Methods<a name="section176019704517"></a>
+## Methods
 
-### fillRect<a name="section6249718104518"></a>
 
-fillRect\(x: number, y: number, w: number, h: number\): void
+### fillRect
+
+fillRect(x: number, y: number, w: number, h: number): void
 
 Fills a rectangle on the canvas.
 
--   Parameters
-
-    <a name="table22700517475"></a>
-    <table><thead align="left"><tr id="row627105114475"><th class="cellrowborder" valign="top" width="23.67236723672367%" id="mcps1.1.6.1.1"><p id="p142716519477"><a name="p142716519477"></a><a name="p142716519477"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.742074207420742%" id="mcps1.1.6.1.2"><p id="p9271451154716"><a name="p9271451154716"></a><a name="p9271451154716"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.291429142914291%" id="mcps1.1.6.1.3"><p id="p20454148115111"><a name="p20454148115111"></a><a name="p20454148115111"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.781278127812781%" id="mcps1.1.6.1.4"><p id="p7500013516"><a name="p7500013516"></a><a name="p7500013516"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.512851285128516%" id="mcps1.1.6.1.5"><p id="p1627105124719"><a name="p1627105124719"></a><a name="p1627105124719"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row4271175119479"><td class="cellrowborder" valign="top" width="23.67236723672367%" headers="mcps1.1.6.1.1 "><p id="p1827185124716"><a name="p1827185124716"></a><a name="p1827185124716"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.742074207420742%" headers="mcps1.1.6.1.2 "><p id="p127175114710"><a name="p127175114710"></a><a name="p127175114710"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.291429142914291%" headers="mcps1.1.6.1.3 "><p id="p171691549105011"><a name="p171691549105011"></a><a name="p171691549105011"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.781278127812781%" headers="mcps1.1.6.1.4 "><p id="p12517019511"><a name="p12517019511"></a><a name="p12517019511"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.5 "><p id="p7271051204714"><a name="p7271051204714"></a><a name="p7271051204714"></a>X-coordinate of the upper left corner of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row142711551154714"><td class="cellrowborder" valign="top" width="23.67236723672367%" headers="mcps1.1.6.1.1 "><p id="p1327135134712"><a name="p1327135134712"></a><a name="p1327135134712"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.742074207420742%" headers="mcps1.1.6.1.2 "><p id="p4271751134716"><a name="p4271751134716"></a><a name="p4271751134716"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.291429142914291%" headers="mcps1.1.6.1.3 "><p id="p916915498503"><a name="p916915498503"></a><a name="p916915498503"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.781278127812781%" headers="mcps1.1.6.1.4 "><p id="p8510035119"><a name="p8510035119"></a><a name="p8510035119"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.5 "><p id="p17271185194717"><a name="p17271185194717"></a><a name="p17271185194717"></a>Y-coordinate of the upper left corner of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row132711451164714"><td class="cellrowborder" valign="top" width="23.67236723672367%" headers="mcps1.1.6.1.1 "><p id="p1827111517473"><a name="p1827111517473"></a><a name="p1827111517473"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.742074207420742%" headers="mcps1.1.6.1.2 "><p id="p42720512473"><a name="p42720512473"></a><a name="p42720512473"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.291429142914291%" headers="mcps1.1.6.1.3 "><p id="p816924920504"><a name="p816924920504"></a><a name="p816924920504"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.781278127812781%" headers="mcps1.1.6.1.4 "><p id="p1651901515"><a name="p1651901515"></a><a name="p1651901515"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.5 "><p id="p25861842185019"><a name="p25861842185019"></a><a name="p25861842185019"></a>Width of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row1272115184714"><td class="cellrowborder" valign="top" width="23.67236723672367%" headers="mcps1.1.6.1.1 "><p id="p2272155134718"><a name="p2272155134718"></a><a name="p2272155134718"></a>height</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.742074207420742%" headers="mcps1.1.6.1.2 "><p id="p42721551184719"><a name="p42721551184719"></a><a name="p42721551184719"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.291429142914291%" headers="mcps1.1.6.1.3 "><p id="p1616912492500"><a name="p1616912492500"></a><a name="p1616912492500"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.781278127812781%" headers="mcps1.1.6.1.4 "><p id="p185120145120"><a name="p185120145120"></a><a name="p185120145120"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.5 "><p id="p758612425506"><a name="p758612425506"></a><a name="p758612425506"></a>Height of the rectangle.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct FillRect {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.fillRect(0,30,100,100)
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-           })
-          }
-        .width('100%')
-        .height('100%')
-      }
-    }
-    ```
-
-    ![](figures/en-us_image_0000001237475123.png)
-
-
-### strokeRect<a name="section4486103344615"></a>
-
-strokeRect\(x: number, y: number, w: number, h: number\): void
-
-Draws a rectangle stroke on the canvas.
-
--   Parameters
-
-    <a name="table165775763110"></a>
-    <table><thead align="left"><tr id="row18567574310"><th class="cellrowborder" valign="top" width="20.45%" id="mcps1.1.6.1.1"><p id="p165618578317"><a name="p165618578317"></a><a name="p165618578317"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="23.97%" id="mcps1.1.6.1.2"><p id="p05655711314"><a name="p05655711314"></a><a name="p05655711314"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.72%" id="mcps1.1.6.1.3"><p id="p174981419115215"><a name="p174981419115215"></a><a name="p174981419115215"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.35%" id="mcps1.1.6.1.4"><p id="p6370101215216"><a name="p6370101215216"></a><a name="p6370101215216"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p1656457113110"><a name="p1656457113110"></a><a name="p1656457113110"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row756105716319"><td class="cellrowborder" valign="top" width="20.45%" headers="mcps1.1.6.1.1 "><p id="p185610575318"><a name="p185610575318"></a><a name="p185610575318"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.97%" headers="mcps1.1.6.1.2 "><p id="p135685763118"><a name="p135685763118"></a><a name="p135685763118"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.72%" headers="mcps1.1.6.1.3 "><p id="p349818194528"><a name="p349818194528"></a><a name="p349818194528"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.35%" headers="mcps1.1.6.1.4 "><p id="p237191215213"><a name="p237191215213"></a><a name="p237191215213"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p165610577318"><a name="p165610577318"></a><a name="p165610577318"></a>X-coordinate of the upper left corner of the rectangle stroke.</p>
-    </td>
-    </tr>
-    <tr id="row25795753111"><td class="cellrowborder" valign="top" width="20.45%" headers="mcps1.1.6.1.1 "><p id="p556195712315"><a name="p556195712315"></a><a name="p556195712315"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.97%" headers="mcps1.1.6.1.2 "><p id="p357155773110"><a name="p357155773110"></a><a name="p357155773110"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.72%" headers="mcps1.1.6.1.3 "><p id="p3498919165216"><a name="p3498919165216"></a><a name="p3498919165216"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.35%" headers="mcps1.1.6.1.4 "><p id="p037161285217"><a name="p037161285217"></a><a name="p037161285217"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p105785723112"><a name="p105785723112"></a><a name="p105785723112"></a>Y-coordinate of the upper left corner of the rectangle stroke.</p>
-    </td>
-    </tr>
-    <tr id="row195712570312"><td class="cellrowborder" valign="top" width="20.45%" headers="mcps1.1.6.1.1 "><p id="p205735793111"><a name="p205735793111"></a><a name="p205735793111"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.97%" headers="mcps1.1.6.1.2 "><p id="p45795713311"><a name="p45795713311"></a><a name="p45795713311"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.72%" headers="mcps1.1.6.1.3 "><p id="p2498201985216"><a name="p2498201985216"></a><a name="p2498201985216"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.35%" headers="mcps1.1.6.1.4 "><p id="p183712124529"><a name="p183712124529"></a><a name="p183712124529"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1357357193110"><a name="p1357357193110"></a><a name="p1357357193110"></a>Width of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row4571357203118"><td class="cellrowborder" valign="top" width="20.45%" headers="mcps1.1.6.1.1 "><p id="p65775713317"><a name="p65775713317"></a><a name="p65775713317"></a>height</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.97%" headers="mcps1.1.6.1.2 "><p id="p1557195713111"><a name="p1557195713111"></a><a name="p1557195713111"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.72%" headers="mcps1.1.6.1.3 "><p id="p0498141915523"><a name="p0498141915523"></a><a name="p0498141915523"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.35%" headers="mcps1.1.6.1.4 "><p id="p1371171210524"><a name="p1371171210524"></a><a name="p1371171210524"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p6571057123119"><a name="p6571057123119"></a><a name="p6571057123119"></a>Height of the rectangle.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct StrokeRect {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.strokeRect(30, 30, 200, 150)
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-          })
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | width | number | Yes | 0 | Width&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | height | number | Yes | 0 | Height&nbsp;of&nbsp;the&nbsp;rectangle. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct FillRect {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.fillRect(0,30,100,100)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+         })
         }
-        .width('100%')
-        .height('100%')
+      .width('100%')
+      .height('100%')
+    }
+  }
+  ```
+
+  ![en-us_image_0000001257138375](figures/en-us_image_0000001257138375.png)
+
+
+### strokeRect
+
+strokeRect(x: number, y: number, w: number, h: number): void
+
+Draws an outlined rectangle on the canvas.
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | width | number | Yes | 0 | Width&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | height | number | Yes | 0 | Height&nbsp;of&nbsp;the&nbsp;rectangle. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct StrokeRect {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.strokeRect(30, 30, 200, 150)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+        })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001192755180.png)
+  ![en-us_image_0000001212378436](figures/en-us_image_0000001212378436.png)
 
 
-### clearRect<a name="section1912011017475"></a>
+### clearRect
 
-clearRect\(x: number, y: number, w: number, h: number\): void
+clearRect(x: number, y: number, w: number, h: number): void
 
 Clears the content in a rectangle on the canvas.
 
--   Parameters
-
-    <a name="table1497325113371"></a>
-    <table><thead align="left"><tr id="row99691512370"><th class="cellrowborder" valign="top" width="17.54%" id="mcps1.1.6.1.1"><p id="p1596995153719"><a name="p1596995153719"></a><a name="p1596995153719"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.12%" id="mcps1.1.6.1.2"><p id="p99691451183714"><a name="p99691451183714"></a><a name="p99691451183714"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="15.229999999999999%" id="mcps1.1.6.1.3"><p id="p1642092585315"><a name="p1642092585315"></a><a name="p1642092585315"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.599999999999998%" id="mcps1.1.6.1.4"><p id="p17258191914538"><a name="p17258191914538"></a><a name="p17258191914538"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p1396985112376"><a name="p1396985112376"></a><a name="p1396985112376"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row4970951163719"><td class="cellrowborder" valign="top" width="17.54%" headers="mcps1.1.6.1.1 "><p id="p169692516373"><a name="p169692516373"></a><a name="p169692516373"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.12%" headers="mcps1.1.6.1.2 "><p id="p1297015119378"><a name="p1297015119378"></a><a name="p1297015119378"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.229999999999999%" headers="mcps1.1.6.1.3 "><p id="p54201925125311"><a name="p54201925125311"></a><a name="p54201925125311"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.599999999999998%" headers="mcps1.1.6.1.4 "><p id="p92582196539"><a name="p92582196539"></a><a name="p92582196539"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p179701351103712"><a name="p179701351103712"></a><a name="p179701351103712"></a>X-coordinate of the upper left corner of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row2970145103712"><td class="cellrowborder" valign="top" width="17.54%" headers="mcps1.1.6.1.1 "><p id="p4970951123718"><a name="p4970951123718"></a><a name="p4970951123718"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.12%" headers="mcps1.1.6.1.2 "><p id="p597085193715"><a name="p597085193715"></a><a name="p597085193715"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.229999999999999%" headers="mcps1.1.6.1.3 "><p id="p1142032510532"><a name="p1142032510532"></a><a name="p1142032510532"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.599999999999998%" headers="mcps1.1.6.1.4 "><p id="p2259111912539"><a name="p2259111912539"></a><a name="p2259111912539"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1297095193713"><a name="p1297095193713"></a><a name="p1297095193713"></a>Y-coordinate of the upper left corner of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row097345115375"><td class="cellrowborder" valign="top" width="17.54%" headers="mcps1.1.6.1.1 "><p id="p179721951193717"><a name="p179721951193717"></a><a name="p179721951193717"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.12%" headers="mcps1.1.6.1.2 "><p id="p1297365173713"><a name="p1297365173713"></a><a name="p1297365173713"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.229999999999999%" headers="mcps1.1.6.1.3 "><p id="p242017251531"><a name="p242017251531"></a><a name="p242017251531"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.599999999999998%" headers="mcps1.1.6.1.4 "><p id="p425981919537"><a name="p425981919537"></a><a name="p425981919537"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p129731351153719"><a name="p129731351153719"></a><a name="p129731351153719"></a>Width of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row12973125193714"><td class="cellrowborder" valign="top" width="17.54%" headers="mcps1.1.6.1.1 "><p id="p16973195173713"><a name="p16973195173713"></a><a name="p16973195173713"></a>height</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.12%" headers="mcps1.1.6.1.2 "><p id="p297365110376"><a name="p297365110376"></a><a name="p297365110376"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.229999999999999%" headers="mcps1.1.6.1.3 "><p id="p742092510534"><a name="p742092510534"></a><a name="p742092510534"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.599999999999998%" headers="mcps1.1.6.1.4 "><p id="p1325941914538"><a name="p1325941914538"></a><a name="p1325941914538"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p14973195116379"><a name="p14973195116379"></a><a name="p14973195116379"></a>Height of the rectangle.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct ClearRect {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.fillStyle = 'rgb(0,0,255)'
-              this.offContext.fillRect(0,0,500,500)
-              this.offContext.clearRect(20,20,150,100)
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-          })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | width | number | Yes | 0 | Width&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | height | number | Yes | 0 | Height&nbsp;of&nbsp;the&nbsp;rectangle. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct ClearRect {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.fillStyle = 'rgb(0,0,255)'
+            this.offContext.fillRect(0,0,500,500)
+            this.offContext.clearRect(20,20,150,100)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+        })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/11111-5.png)
+  ![en-us_image_0000001212058500](figures/en-us_image_0000001212058500.png)
 
 
-### fillText<a name="section1730050184811"></a>
+### fillText
 
-fillText\(text: string, x: number, y: number\): void
+fillText(text: string, x: number, y: number): void
 
 Draws filled text on the canvas.
 
--   Parameters
-
-    <a name="table103261612144511"></a>
-    <table><thead align="left"><tr id="row9325171204513"><th class="cellrowborder" valign="top" width="19.52%" id="mcps1.1.6.1.1"><p id="p1632411210454"><a name="p1632411210454"></a><a name="p1632411210454"></a>Parameters</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="23.03%" id="mcps1.1.6.1.2"><p id="p20325312114512"><a name="p20325312114512"></a><a name="p20325312114512"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.96%" id="mcps1.1.6.1.3"><p id="p8278153019541"><a name="p8278153019541"></a><a name="p8278153019541"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.98%" id="mcps1.1.6.1.4"><p id="p178651824115416"><a name="p178651824115416"></a><a name="p178651824115416"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p9325121294515"><a name="p9325121294515"></a><a name="p9325121294515"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1325201212455"><td class="cellrowborder" valign="top" width="19.52%" headers="mcps1.1.6.1.1 "><p id="p93251612194518"><a name="p93251612194518"></a><a name="p93251612194518"></a>text</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.03%" headers="mcps1.1.6.1.2 "><p id="p163251512164512"><a name="p163251512164512"></a><a name="p163251512164512"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.3 "><p id="p1227853015411"><a name="p1227853015411"></a><a name="p1227853015411"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.98%" headers="mcps1.1.6.1.4 "><p id="p4865182413542"><a name="p4865182413542"></a><a name="p4865182413542"></a>""</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p3325191210452"><a name="p3325191210452"></a><a name="p3325191210452"></a>Text to draw.</p>
-    </td>
-    </tr>
-    <tr id="row1332612125451"><td class="cellrowborder" valign="top" width="19.52%" headers="mcps1.1.6.1.1 "><p id="p1632515127457"><a name="p1632515127457"></a><a name="p1632515127457"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.03%" headers="mcps1.1.6.1.2 "><p id="p19325121212456"><a name="p19325121212456"></a><a name="p19325121212456"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.3 "><p id="p5278230135415"><a name="p5278230135415"></a><a name="p5278230135415"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.98%" headers="mcps1.1.6.1.4 "><p id="p1986562475418"><a name="p1986562475418"></a><a name="p1986562475418"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p16326101284514"><a name="p16326101284514"></a><a name="p16326101284514"></a>X-coordinate of the lower left corner of the text.</p>
-    </td>
-    </tr>
-    <tr id="row6326121224511"><td class="cellrowborder" valign="top" width="19.52%" headers="mcps1.1.6.1.1 "><p id="p1032613121457"><a name="p1032613121457"></a><a name="p1032613121457"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.03%" headers="mcps1.1.6.1.2 "><p id="p19326212164513"><a name="p19326212164513"></a><a name="p19326212164513"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.3 "><p id="p827863055414"><a name="p827863055414"></a><a name="p827863055414"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.98%" headers="mcps1.1.6.1.4 "><p id="p186510247545"><a name="p186510247545"></a><a name="p186510247545"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p732691284511"><a name="p732691284511"></a><a name="p732691284511"></a>Y-coordinate of the lower left corner of the text.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct FillText {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.font = '30px sans-serif'
-              this.offContext.fillText("Hello World!", 20, 100)
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-          })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | text | string | Yes | "" | Text&nbsp;to&nbsp;draw. | 
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;lower&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;text. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;lower&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;text. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct FillText {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.font = '30px sans-serif'
+            this.offContext.fillText("Hello World!", 20, 100)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+        })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001237555165.png)
+  ![en-us_image_0000001257058437](figures/en-us_image_0000001257058437.png)
 
 
-### strokeText<a name="section1777264110485"></a>
+### strokeText
 
-strokeText\(text: string, x: number, y: number\): void
+strokeText(text: string, x: number, y: number): void
 
 Draws a text stroke on the canvas.
 
--   Parameters
-
-    <a name="table189228539482"></a>
-    <table><thead align="left"><tr id="row11921155384816"><th class="cellrowborder" valign="top" width="19.75%" id="mcps1.1.6.1.1"><p id="p12920145313483"><a name="p12920145313483"></a><a name="p12920145313483"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="24.55%" id="mcps1.1.6.1.2"><p id="p89211953114816"><a name="p89211953114816"></a><a name="p89211953114816"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.41%" id="mcps1.1.6.1.3"><p id="p3411171520559"><a name="p3411171520559"></a><a name="p3411171520559"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.78%" id="mcps1.1.6.1.4"><p id="p15205122114556"><a name="p15205122114556"></a><a name="p15205122114556"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p9921165312483"><a name="p9921165312483"></a><a name="p9921165312483"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1192175324817"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p1392116531480"><a name="p1392116531480"></a><a name="p1392116531480"></a>text</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="24.55%" headers="mcps1.1.6.1.2 "><p id="p1792155364820"><a name="p1792155364820"></a><a name="p1792155364820"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.3 "><p id="p1941111517554"><a name="p1941111517554"></a><a name="p1941111517554"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.6.1.4 "><p id="p1205102155514"><a name="p1205102155514"></a><a name="p1205102155514"></a>""</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p69211553194811"><a name="p69211553194811"></a><a name="p69211553194811"></a>Text to draw.</p>
-    </td>
-    </tr>
-    <tr id="row199221653124812"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p11921175394815"><a name="p11921175394815"></a><a name="p11921175394815"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="24.55%" headers="mcps1.1.6.1.2 "><p id="p692295320489"><a name="p692295320489"></a><a name="p692295320489"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.3 "><p id="p24114152550"><a name="p24114152550"></a><a name="p24114152550"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.6.1.4 "><p id="p1620592111556"><a name="p1620592111556"></a><a name="p1620592111556"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p179221353164818"><a name="p179221353164818"></a><a name="p179221353164818"></a>X-coordinate of the lower left corner of the text.</p>
-    </td>
-    </tr>
-    <tr id="row9922453144814"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p2922175384813"><a name="p2922175384813"></a><a name="p2922175384813"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="24.55%" headers="mcps1.1.6.1.2 "><p id="p189223537489"><a name="p189223537489"></a><a name="p189223537489"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.3 "><p id="p1041115154552"><a name="p1041115154552"></a><a name="p1041115154552"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.6.1.4 "><p id="p620572117554"><a name="p620572117554"></a><a name="p620572117554"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p10922175364811"><a name="p10922175364811"></a><a name="p10922175364811"></a>Y-coordinate of the lower left corner of the text.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct StrokeText {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.font = '55px sans-serif'
-              this.offContext.strokeText("Hello World!", 20, 60)
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-          })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | text | string | Yes | "" | Text&nbsp;to&nbsp;draw. | 
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;lower&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;text. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;lower&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;text. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct StrokeText {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.font = '55px sans-serif'
+            this.offContext.strokeText("Hello World!", 20, 60)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+        })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
-
-    ![](figures/en-us_image_0000001237715149.png)
-
-
-### measureText<a name="section1945701213289"></a>
-
-measureText\(text: string\): TextMetrics
-
-Returns a  **TextMetrics**  object used to obtain the width of specified text.
-
--   Parameters
-
-    <a name="table44681253165017"></a>
-    <table><thead align="left"><tr id="row1746814532503"><th class="cellrowborder" valign="top" width="21.73%" id="mcps1.1.6.1.1"><p id="p144671653105011"><a name="p144671653105011"></a><a name="p144671653105011"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="15.329999999999998%" id="mcps1.1.6.1.2"><p id="p16467053115020"><a name="p16467053115020"></a><a name="p16467053115020"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.15%" id="mcps1.1.6.1.3"><p id="p53223268565"><a name="p53223268565"></a><a name="p53223268565"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.28%" id="mcps1.1.6.1.4"><p id="p1437813214565"><a name="p1437813214565"></a><a name="p1437813214565"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p64681853145011"><a name="p64681853145011"></a><a name="p64681853145011"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1246815355020"><td class="cellrowborder" valign="top" width="21.73%" headers="mcps1.1.6.1.1 "><p id="p14468145385014"><a name="p14468145385014"></a><a name="p14468145385014"></a>text</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.329999999999998%" headers="mcps1.1.6.1.2 "><p id="p1146819531509"><a name="p1146819531509"></a><a name="p1146819531509"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.15%" headers="mcps1.1.6.1.3 "><p id="p12322926205620"><a name="p12322926205620"></a><a name="p12322926205620"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.28%" headers="mcps1.1.6.1.4 "><p id="p153782032195616"><a name="p153782032195616"></a><a name="p153782032195616"></a>""</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p94681853175017"><a name="p94681853175017"></a><a name="p94681853175017"></a>Text to be measured.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Return values
-
-    <a name="table16391145317913"></a>
-    <table><thead align="left"><tr id="row2391145319910"><th class="cellrowborder" valign="top" width="17.380000000000003%" id="mcps1.1.3.1.1"><p id="p13911353991"><a name="p13911353991"></a><a name="p13911353991"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="82.62%" id="mcps1.1.3.1.2"><p id="p193911531395"><a name="p193911531395"></a><a name="p193911531395"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1339114531391"><td class="cellrowborder" valign="top" width="17.380000000000003%" headers="mcps1.1.3.1.1 "><p id="p156879250282"><a name="p156879250282"></a><a name="p156879250282"></a><a href="#li0376175812415">TextMetrics</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="82.62%" headers="mcps1.1.3.1.2 "><p id="p1312703682719"><a name="p1312703682719"></a><a name="p1312703682719"></a><strong id="b117602044152717"><a name="b117602044152717"></a><a name="b117602044152717"></a>TextMetrics</strong> object.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li0376175812415"></a>**TextMetrics**  attributes
-
-    <a name="table67211828124016"></a>
-    <table><thead align="left"><tr id="row108577289405"><th class="cellrowborder" valign="top" width="22.872287228722872%" id="mcps1.1.4.1.1"><p id="p385742814403"><a name="p385742814403"></a><a name="p385742814403"></a>Attribute</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="29.352935293529352%" id="mcps1.1.4.1.2"><p id="p19857192816408"><a name="p19857192816408"></a><a name="p19857192816408"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="47.774777477747776%" id="mcps1.1.4.1.3"><p id="p18573288402"><a name="p18573288402"></a><a name="p18573288402"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1085792824019"><td class="cellrowborder" valign="top" width="22.872287228722872%" headers="mcps1.1.4.1.1 "><p id="p1485792815404"><a name="p1485792815404"></a><a name="p1485792815404"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.352935293529352%" headers="mcps1.1.4.1.2 "><p id="p11857182804010"><a name="p11857182804010"></a><a name="p11857182804010"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="47.774777477747776%" headers="mcps1.1.4.1.3 "><p id="p1785711281405"><a name="p1785711281405"></a><a name="p1785711281405"></a>Width of the text string.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct MeasureText {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.font = '50px sans-serif'
-              this.offContext.fillText("Hello World!", 20, 100)
-              this.offContext.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200)
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-          })
-        }
-        .width('100%')
-        .height('100%')
+  }
+  ```
+
+  ![en-us_image_0000001212218466](figures/en-us_image_0000001212218466.png)
+
+
+### measureText
+
+measureText(text: string): TextMetrics
+
+Returns a **TextMetrics** object used to obtain the width of specified text.
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | text | string | Yes | "" | Text&nbsp;to&nbsp;be&nbsp;measured. | 
+
+- Return value
+    | Type | Description | 
+  | -------- | -------- |
+  | [ERROR:Invalid&nbsp;link:en-us_topic_0000001212218420.xml#en-us_topic_0000001192595178_xref4588645104013,link:#en-us_topic_0000001192595178_li0376175812415](#en-us_topic_0000001192595178_li0376175812415) | **TextMetrics**&nbsp;object. | 
+
+- **TextMetrics** attributes
+    | Name | Type | Description | 
+  | -------- | -------- | -------- |
+  | width | number | Width&nbsp;of&nbsp;the&nbsp;text. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct MeasureText {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.font = '50px sans-serif'
+            this.offContext.fillText("Hello World!", 20, 100)
+            this.offContext.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+        })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001193075172.png)
+  ![en-us_image_0000001256858431](figures/en-us_image_0000001256858431.png)
 
 
-### stroke<a name="section1843806192911"></a>
+### stroke
 
-stroke\(path?: Path2D\): void
+stroke(path?: Path2D): void
 
 Strokes a path.
 
--   Parameters
-
-    <a name="table01731111185812"></a>
-    <table><thead align="left"><tr id="row1317391185820"><th class="cellrowborder" valign="top" width="19.75%" id="mcps1.1.6.1.1"><p id="p1617431110587"><a name="p1617431110587"></a><a name="p1617431110587"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="24.55%" id="mcps1.1.6.1.2"><p id="p217471110589"><a name="p217471110589"></a><a name="p217471110589"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.41%" id="mcps1.1.6.1.3"><p id="p41741511145812"><a name="p41741511145812"></a><a name="p41741511145812"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.78%" id="mcps1.1.6.1.4"><p id="p317461165818"><a name="p317461165818"></a><a name="p317461165818"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p3174181135812"><a name="p3174181135812"></a><a name="p3174181135812"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row18174121155810"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p1517411110585"><a name="p1517411110585"></a><a name="p1517411110585"></a>path</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="24.55%" headers="mcps1.1.6.1.2 "><p id="p111741011145820"><a name="p111741011145820"></a><a name="p111741011145820"></a><a href="ts-components-canvas-path2d.md">Path2D</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.3 "><p id="p417431135819"><a name="p417431135819"></a><a name="p417431135819"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.6.1.4 "><p id="p11751111155815"><a name="p11751111155815"></a><a name="p11751111155815"></a>null</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p171751711145810"><a name="p171751711145810"></a><a name="p171751711145810"></a>A <strong id="b2798142615282"><a name="b2798142615282"></a><a name="b2798142615282"></a>Path2D</strong> path to draw.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct CanvasExample {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.moveTo(25, 25)
-              this.offContext.lineTo(25, 105)
-              this.offContext.strokeStyle = 'rgb(0,0,255)'
-              this.offContext.stroke()
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | path | [Path2D](ts-components-canvas-path2d.md) | No | null | A&nbsp;**Path2D**&nbsp;path&nbsp;to&nbsp;draw. |
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct Stroke {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.moveTo(25, 25)
+            this.offContext.lineTo(25, 105)
+            this.offContext.strokeStyle = 'rgb(0,0,255)'
+            this.offContext.stroke()
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001192595220.png)
+  ![en-us_image_0000001257138373](figures/en-us_image_0000001257138373.png)
 
 
-### beginPath<a name="section11464112911322"></a>
+### beginPath
 
-beginPath\(\): void
+beginPath(): void
 
 Creates a drawing path.
 
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct BeginPath {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.beginPath()
-              this.offContext.lineWidth = 6
-              this.offContext.strokeStyle = '#0000ff'
-              this.offContext.moveTo(15, 80)
-              this.offContext.lineTo(280, 160)
-              this.offContext.stroke()
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct BeginPath {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.beginPath()
+            this.offContext.lineWidth = 6
+            this.offContext.strokeStyle = '#0000ff'
+            this.offContext.moveTo(15, 80)
+            this.offContext.lineTo(280, 160)
+            this.offContext.stroke()
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001237555163.png)
+  ![en-us_image_0000001212378440](figures/en-us_image_0000001212378440.png)
 
 
-### moveTo<a name="section960915210337"></a>
+### moveTo
 
-moveTo\(x: number, y: number\): void
+moveTo(x: number, y: number): void
 
 Moves a drawing path to a target position on the canvas.
 
--   Parameters
-
-    <a name="table043983775614"></a>
-    <table><thead align="left"><tr id="row11437143711564"><th class="cellrowborder" valign="top" width="16.6%" id="mcps1.1.6.1.1"><p id="p17437193775619"><a name="p17437193775619"></a><a name="p17437193775619"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.979999999999997%" id="mcps1.1.6.1.2"><p id="p1643773714564"><a name="p1643773714564"></a><a name="p1643773714564"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.78%" id="mcps1.1.6.1.3"><p id="p105471588213"><a name="p105471588213"></a><a name="p105471588213"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="21.13%" id="mcps1.1.6.1.4"><p id="p5994549311"><a name="p5994549311"></a><a name="p5994549311"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p04379374560"><a name="p04379374560"></a><a name="p04379374560"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row20438153716561"><td class="cellrowborder" valign="top" width="16.6%" headers="mcps1.1.6.1.1 "><p id="p10437337195612"><a name="p10437337195612"></a><a name="p10437337195612"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.979999999999997%" headers="mcps1.1.6.1.2 "><p id="p743753720562"><a name="p743753720562"></a><a name="p743753720562"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.6.1.3 "><p id="p5548185814218"><a name="p5548185814218"></a><a name="p5548185814218"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.13%" headers="mcps1.1.6.1.4 "><p id="p1099410410313"><a name="p1099410410313"></a><a name="p1099410410313"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p443813719561"><a name="p443813719561"></a><a name="p443813719561"></a>X-coordinate of the target position.</p>
-    </td>
-    </tr>
-    <tr id="row12439163719567"><td class="cellrowborder" valign="top" width="16.6%" headers="mcps1.1.6.1.1 "><p id="p1143873755614"><a name="p1143873755614"></a><a name="p1143873755614"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.979999999999997%" headers="mcps1.1.6.1.2 "><p id="p154384373560"><a name="p154384373560"></a><a name="p154384373560"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.6.1.3 "><p id="p55486589211"><a name="p55486589211"></a><a name="p55486589211"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.13%" headers="mcps1.1.6.1.4 "><p id="p119941442316"><a name="p119941442316"></a><a name="p119941442316"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p9438203717562"><a name="p9438203717562"></a><a name="p9438203717562"></a>Y-coordinate of the target position.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct MoveTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.beginPath()
-              this.offContext.moveTo(10, 10)
-              this.offContext.lineTo(280, 160)
-              this.offContext.stroke()
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;target&nbsp;position. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;target&nbsp;position. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct MoveTo {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.beginPath()
+            this.offContext.moveTo(10, 10)
+            this.offContext.lineTo(280, 160)
+            this.offContext.stroke()
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001192595228.png)
+  ![en-us_image_0000001212058498](figures/en-us_image_0000001212058498.png)
 
 
-### lineTo<a name="section62318408338"></a>
+### lineTo
 
-lineTo\(x: number, y: number\): void
+lineTo(x: number, y: number): void
 
 Connects the current point to a target position using a straight line.
 
--   Parameters
-
-    <a name="table0862904537"></a>
-    <table><thead align="left"><tr id="row1286110145314"><th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.1"><p id="p98612015311"><a name="p98612015311"></a><a name="p98612015311"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.78%" id="mcps1.1.6.1.2"><p id="p0861801537"><a name="p0861801537"></a><a name="p0861801537"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.21%" id="mcps1.1.6.1.3"><p id="p539435316315"><a name="p539435316315"></a><a name="p539435316315"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.989999999999998%" id="mcps1.1.6.1.4"><p id="p9507559530"><a name="p9507559530"></a><a name="p9507559530"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p88610055312"><a name="p88610055312"></a><a name="p88610055312"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row18622055315"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p208617065311"><a name="p208617065311"></a><a name="p208617065311"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.78%" headers="mcps1.1.6.1.2 "><p id="p2086270135320"><a name="p2086270135320"></a><a name="p2086270135320"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.21%" headers="mcps1.1.6.1.3 "><p id="p83947531133"><a name="p83947531133"></a><a name="p83947531133"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.989999999999998%" headers="mcps1.1.6.1.4 "><p id="p1450713591433"><a name="p1450713591433"></a><a name="p1450713591433"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p178621209534"><a name="p178621209534"></a><a name="p178621209534"></a>X-coordinate of the target position.</p>
-    </td>
-    </tr>
-    <tr id="row10862130125318"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p286216019538"><a name="p286216019538"></a><a name="p286216019538"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.78%" headers="mcps1.1.6.1.2 "><p id="p168621802535"><a name="p168621802535"></a><a name="p168621802535"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.21%" headers="mcps1.1.6.1.3 "><p id="p133945531333"><a name="p133945531333"></a><a name="p133945531333"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.989999999999998%" headers="mcps1.1.6.1.4 "><p id="p10507195914313"><a name="p10507195914313"></a><a name="p10507195914313"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p138621108539"><a name="p138621108539"></a><a name="p138621108539"></a>Y-coordinate of the target position.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct LineTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.beginPath()
-              this.offContext.moveTo(10, 10)
-              this.offContext.lineTo(280, 160)
-              this.offContext.stroke()
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;target&nbsp;position. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;target&nbsp;position. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct LineTo {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.beginPath()
+            this.offContext.moveTo(10, 10)
+            this.offContext.lineTo(280, 160)
+            this.offContext.stroke()
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001237715151.png)
+  ![en-us_image_0000001257058435](figures/en-us_image_0000001257058435.png)
 
 
-### closePath<a name="section18507165183416"></a>
+### closePath
 
-closePath\(\): void
+closePath(): void
 
 Draws a closed path.
 
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct ClosePath {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-                this.offContext.beginPath()
-                this.offContext.moveTo(30, 30)
-                this.offContext.lineTo(110, 30)
-                this.offContext.lineTo(70, 90)
-                this.offContext.closePath()
-                this.offContext.stroke()
-                var image = this.offContext.transferToImageBitmap()
-                this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct ClosePath {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+              this.offContext.beginPath()
+              this.offContext.moveTo(30, 30)
+              this.offContext.lineTo(110, 30)
+              this.offContext.lineTo(70, 90)
+              this.offContext.closePath()
+              this.offContext.stroke()
+              var image = this.offContext.transferToImageBitmap()
+              this.context.transferFromImageBitmap(image)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001192595224.png)
+  ![en-us_image_0000001257058431](figures/en-us_image_0000001257058431.png)
 
 
-### createPattern<a name="section660873113512"></a>
+### createPattern
 
-createPattern\(image: ImageBitmap, repetition: string\): CanvasPattern
+createPattern(image: ImageBitmap, repetition: string): CanvasPattern
 
 Creates a pattern for image filling based on a specified source image and repetition mode.
 
--   Parameters
-
-    <a name="table13990205814558"></a>
-    <table><thead align="left"><tr id="row199901558125515"><th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.1"><p id="p2098995825514"><a name="p2098995825514"></a><a name="p2098995825514"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="17.330000000000002%" id="mcps1.1.6.1.2"><p id="p6989958155520"><a name="p6989958155520"></a><a name="p6989958155520"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.44%" id="mcps1.1.6.1.3"><p id="p178971910470"><a name="p178971910470"></a><a name="p178971910470"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.21%" id="mcps1.1.6.1.4"><p id="p17300151771"><a name="p17300151771"></a><a name="p17300151771"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p9990358145510"><a name="p9990358145510"></a><a name="p9990358145510"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row199075815553"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p09905583557"><a name="p09905583557"></a><a name="p09905583557"></a>image</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.330000000000002%" headers="mcps1.1.6.1.2 "><p id="p19901558185511"><a name="p19901558185511"></a><a name="p19901558185511"></a><a href="ts-components-canvas-imagebitmap.md">ImageBitmap</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.44%" headers="mcps1.1.6.1.3 "><p id="p168975106719"><a name="p168975106719"></a><a name="p168975106719"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.4 "><p id="p773012152711"><a name="p773012152711"></a><a name="p773012152711"></a>null</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1399075815558"><a name="p1399075815558"></a><a name="p1399075815558"></a>Source image. For details, see <a href="ts-components-canvas-imagebitmap.md">ImageBitmap</a>.</p>
-    </td>
-    </tr>
-    <tr id="row17990058105510"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p8990165812552"><a name="p8990165812552"></a><a name="p8990165812552"></a>repetition</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.330000000000002%" headers="mcps1.1.6.1.2 "><p id="p19905580556"><a name="p19905580556"></a><a name="p19905580556"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.44%" headers="mcps1.1.6.1.3 "><p id="p2897910374"><a name="p2897910374"></a><a name="p2897910374"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.4 "><p id="p67303153711"><a name="p67303153711"></a><a name="p67303153711"></a>""</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p699017580554"><a name="p699017580554"></a><a name="p699017580554"></a>Repetition mode. The value can be <strong id="b1532573394519"><a name="b1532573394519"></a><a name="b1532573394519"></a>'repeat'</strong>, <strong id="b632573316452"><a name="b632573316452"></a><a name="b632573316452"></a>'repeat-x'</strong>, <strong id="b6325633134511"><a name="b6325633134511"></a><a name="b6325633134511"></a>'repeat-y'</strong>, or <strong id="b11326113324511"><a name="b11326113324511"></a><a name="b11326113324511"></a>'no-repeat'</strong>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct CreatePattern {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              var pattern = this.offContext.createPattern(this.img, 'repeat')
-              this.offContext.fillStyle = pattern
-              this.offContext.fillRect(0, 0, 200, 200)
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | image | [ERROR:Invalid&nbsp;link:en-us_topic_0000001212218420.xml#en-us_topic_0000001192595178_xref1892917323814,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml) | Yes | null | Source&nbsp;image.&nbsp;For&nbsp;details,&nbsp;see&nbsp;[ERROR:Invalid&nbsp;link:en-us_topic_0000001212218420.xml#xref13437192515430,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml). | 
+  | repetition | string | Yes | "" | Repetition&nbsp;mode.&nbsp;The&nbsp;value&nbsp;can&nbsp;be&nbsp;**'repeat'**,&nbsp;**'repeat-x'**,&nbsp;**'repeat-y'**,&nbsp;or&nbsp;**'no-repeat'**. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct CreatePattern {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            var pattern = this.offContext.createPattern(this.img, 'repeat')
+            this.offContext.fillStyle = pattern
+            this.offContext.fillRect(0, 0, 200, 200)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001237475133.png)
+  ![en-us_image_0000001257138387](figures/en-us_image_0000001257138387.png)
 
 
-### bezierCurveTo<a name="section1682477193618"></a>
+### bezierCurveTo
 
-bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number\): void
+bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void
 
 Draws a cubic bezier curve on the canvas.
 
--   Parameters
-
-    <a name="table1846413314014"></a>
-    <table><thead align="left"><tr id="row104611434015"><th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.1"><p id="p19461531705"><a name="p19461531705"></a><a name="p19461531705"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.42%" id="mcps1.1.6.1.2"><p id="p646114310018"><a name="p646114310018"></a><a name="p646114310018"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.65%" id="mcps1.1.6.1.3"><p id="p58496449811"><a name="p58496449811"></a><a name="p58496449811"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.91%" id="mcps1.1.6.1.4"><p id="p181781550984"><a name="p181781550984"></a><a name="p181781550984"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p194611739019"><a name="p194611739019"></a><a name="p194611739019"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row44611732013"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p14612031206"><a name="p14612031206"></a><a name="p14612031206"></a>cp1x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.42%" headers="mcps1.1.6.1.2 "><p id="p164611735019"><a name="p164611735019"></a><a name="p164611735019"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.65%" headers="mcps1.1.6.1.3 "><p id="p98496449818"><a name="p98496449818"></a><a name="p98496449818"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.91%" headers="mcps1.1.6.1.4 "><p id="p5178195012810"><a name="p5178195012810"></a><a name="p5178195012810"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p54611233019"><a name="p54611233019"></a><a name="p54611233019"></a>X-coordinate of the first parameter of the bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row4462123601"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p84612031108"><a name="p84612031108"></a><a name="p84612031108"></a>cp1y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.42%" headers="mcps1.1.6.1.2 "><p id="p134621131401"><a name="p134621131401"></a><a name="p134621131401"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.65%" headers="mcps1.1.6.1.3 "><p id="p08491644983"><a name="p08491644983"></a><a name="p08491644983"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.91%" headers="mcps1.1.6.1.4 "><p id="p16178850583"><a name="p16178850583"></a><a name="p16178850583"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1046212316013"><a name="p1046212316013"></a><a name="p1046212316013"></a>Y-coordinate of the first parameter of the bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row194621034020"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p646213701"><a name="p646213701"></a><a name="p646213701"></a>cp2x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.42%" headers="mcps1.1.6.1.2 "><p id="p8462193507"><a name="p8462193507"></a><a name="p8462193507"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.65%" headers="mcps1.1.6.1.3 "><p id="p88492447818"><a name="p88492447818"></a><a name="p88492447818"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.91%" headers="mcps1.1.6.1.4 "><p id="p91784507818"><a name="p91784507818"></a><a name="p91784507818"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p746263502"><a name="p746263502"></a><a name="p746263502"></a>X-coordinate of the second parameter of the bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row144621935018"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p1446243505"><a name="p1446243505"></a><a name="p1446243505"></a>cp2y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.42%" headers="mcps1.1.6.1.2 "><p id="p1746217311020"><a name="p1746217311020"></a><a name="p1746217311020"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.65%" headers="mcps1.1.6.1.3 "><p id="p128498446811"><a name="p128498446811"></a><a name="p128498446811"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.91%" headers="mcps1.1.6.1.4 "><p id="p817895013813"><a name="p817895013813"></a><a name="p817895013813"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p9462732001"><a name="p9462732001"></a><a name="p9462732001"></a>Y-coordinate of the second parameter of the bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row14637315013"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p34621339011"><a name="p34621339011"></a><a name="p34621339011"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.42%" headers="mcps1.1.6.1.2 "><p id="p16463939016"><a name="p16463939016"></a><a name="p16463939016"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.65%" headers="mcps1.1.6.1.3 "><p id="p085019441280"><a name="p085019441280"></a><a name="p085019441280"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.91%" headers="mcps1.1.6.1.4 "><p id="p017813502087"><a name="p017813502087"></a><a name="p017813502087"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p104631831109"><a name="p104631831109"></a><a name="p104631831109"></a>X-coordinate of the end point on the bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row114631533016"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p346315313015"><a name="p346315313015"></a><a name="p346315313015"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.42%" headers="mcps1.1.6.1.2 "><p id="p84631033020"><a name="p84631033020"></a><a name="p84631033020"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.65%" headers="mcps1.1.6.1.3 "><p id="p68507441081"><a name="p68507441081"></a><a name="p68507441081"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.91%" headers="mcps1.1.6.1.4 "><p id="p61781501384"><a name="p61781501384"></a><a name="p61781501384"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p74631331309"><a name="p74631331309"></a><a name="p74631331309"></a>Y-coordinate of the end point on the bezier curve.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct BezierCurveTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.beginPath()
-              this.offContext.moveTo(10, 10)
-              this.offContext.bezierCurveTo(20, 100, 200, 100, 200, 20)
-              this.offContext.stroke()
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Name
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | cp1x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;first&nbsp;parameter&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve. | 
+  | cp1y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;first&nbsp;parameter&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve. | 
+  | cp2x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;second&nbsp;parameter&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve. | 
+  | cp2y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;second&nbsp;parameter&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve. | 
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;on&nbsp;the&nbsp;bezier&nbsp;curve. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;on&nbsp;the&nbsp;bezier&nbsp;curve. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct BezierCurveTo {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.beginPath()
+            this.offContext.moveTo(10, 10)
+            this.offContext.bezierCurveTo(20, 100, 200, 100, 200, 20)
+            this.offContext.stroke()
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001237715153.png)
+  ![en-us_image_0000001212378442](figures/en-us_image_0000001212378442.png)
 
 
-### quadraticCurveTo<a name="section18227355123619"></a>
+### quadraticCurveTo
 
-quadraticCurveTo\(cpx: number, cpy: number, x: number, y: number\): void
+quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
 
 Draws a quadratic curve on the canvas.
 
--   Parameters
-
-    <a name="table844513311575"></a>
-    <table><thead align="left"><tr id="row154437316717"><th class="cellrowborder" valign="top" width="28.51000000000001%" id="mcps1.1.6.1.1"><p id="p1844333114710"><a name="p1844333114710"></a><a name="p1844333114710"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="15.750000000000004%" id="mcps1.1.6.1.2"><p id="p194430318720"><a name="p194430318720"></a><a name="p194430318720"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.260000000000002%" id="mcps1.1.6.1.3"><p id="p698743112914"><a name="p698743112914"></a><a name="p698743112914"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.970000000000002%" id="mcps1.1.6.1.4"><p id="p63541938298"><a name="p63541938298"></a><a name="p63541938298"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51000000000001%" id="mcps1.1.6.1.5"><p id="p544383119711"><a name="p544383119711"></a><a name="p544383119711"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1444412310715"><td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.1 "><p id="p134443311719"><a name="p134443311719"></a><a name="p134443311719"></a>cpx</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.750000000000004%" headers="mcps1.1.6.1.2 "><p id="p134446311572"><a name="p134446311572"></a><a name="p134446311572"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.260000000000002%" headers="mcps1.1.6.1.3 "><p id="p2987531891"><a name="p2987531891"></a><a name="p2987531891"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.970000000000002%" headers="mcps1.1.6.1.4 "><p id="p1135473817912"><a name="p1135473817912"></a><a name="p1135473817912"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.5 "><p id="p04441311574"><a name="p04441311574"></a><a name="p04441311574"></a>X-coordinate of the bezier curve parameter.</p>
-    </td>
-    </tr>
-    <tr id="row174449318711"><td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.1 "><p id="p9444431675"><a name="p9444431675"></a><a name="p9444431675"></a>cpy</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.750000000000004%" headers="mcps1.1.6.1.2 "><p id="p84444319719"><a name="p84444319719"></a><a name="p84444319719"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.260000000000002%" headers="mcps1.1.6.1.3 "><p id="p1998716319912"><a name="p1998716319912"></a><a name="p1998716319912"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.970000000000002%" headers="mcps1.1.6.1.4 "><p id="p33541388916"><a name="p33541388916"></a><a name="p33541388916"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.5 "><p id="p144415316718"><a name="p144415316718"></a><a name="p144415316718"></a>Y-coordinate of the bezier curve parameter.</p>
-    </td>
-    </tr>
-    <tr id="row64452311714"><td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.1 "><p id="p184441831872"><a name="p184441831872"></a><a name="p184441831872"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.750000000000004%" headers="mcps1.1.6.1.2 "><p id="p1044417311871"><a name="p1044417311871"></a><a name="p1044417311871"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.260000000000002%" headers="mcps1.1.6.1.3 "><p id="p139871231498"><a name="p139871231498"></a><a name="p139871231498"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.970000000000002%" headers="mcps1.1.6.1.4 "><p id="p10354838791"><a name="p10354838791"></a><a name="p10354838791"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.5 "><p id="p144440318719"><a name="p144440318719"></a><a name="p144440318719"></a>X-coordinate of the end point on the bezier curve.</p>
-    </td>
-    </tr>
-    <tr id="row14451031679"><td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.1 "><p id="p184458316712"><a name="p184458316712"></a><a name="p184458316712"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.750000000000004%" headers="mcps1.1.6.1.2 "><p id="p19445183111717"><a name="p19445183111717"></a><a name="p19445183111717"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.260000000000002%" headers="mcps1.1.6.1.3 "><p id="p398783119910"><a name="p398783119910"></a><a name="p398783119910"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.970000000000002%" headers="mcps1.1.6.1.4 "><p id="p1535483815915"><a name="p1535483815915"></a><a name="p1535483815915"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.5 "><p id="p8445203119717"><a name="p8445203119717"></a><a name="p8445203119717"></a>Y-coordinate of the end point on the bezier curve.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct QuadraticCurveTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.beginPath();
-              this.offContext.moveTo(20, 20);
-              this.offContext.quadraticCurveTo(100, 100, 200, 20);
-              this.offContext.stroke();
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-          })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | cpx | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve&nbsp;parameter. | 
+  | cpy | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve&nbsp;parameter. | 
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;on&nbsp;the&nbsp;bezier&nbsp;curve. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;on&nbsp;the&nbsp;bezier&nbsp;curve. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct QuadraticCurveTo {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.beginPath();
+            this.offContext.moveTo(20, 20);
+            this.offContext.quadraticCurveTo(100, 100, 200, 20);
+            this.offContext.stroke();
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+        })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001192915184.png)
+  ![en-us_image_0000001256978383](figures/en-us_image_0000001256978383.png)
 
 
-### arc<a name="section3984132853718"></a>
+### arc
 
-arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean\): void
+arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
 
 Draws an arc on the canvas.
 
--   Parameters
-
-    <a name="table1685815501294"></a>
-    <table><thead align="left"><tr id="row58561950293"><th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.1"><p id="p18565502915"><a name="p18565502915"></a><a name="p18565502915"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="19.139999999999997%" id="mcps1.1.6.1.2"><p id="p13856175017919"><a name="p13856175017919"></a><a name="p13856175017919"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.15%" id="mcps1.1.6.1.3"><p id="p17163102401019"><a name="p17163102401019"></a><a name="p17163102401019"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.69%" id="mcps1.1.6.1.4"><p id="p544133219101"><a name="p544133219101"></a><a name="p544133219101"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p16856125011919"><a name="p16856125011919"></a><a name="p16856125011919"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1785705020920"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p285685011911"><a name="p285685011911"></a><a name="p285685011911"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.139999999999997%" headers="mcps1.1.6.1.2 "><p id="p1685612506911"><a name="p1685612506911"></a><a name="p1685612506911"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.15%" headers="mcps1.1.6.1.3 "><p id="p51631424171012"><a name="p51631424171012"></a><a name="p51631424171012"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.69%" headers="mcps1.1.6.1.4 "><p id="p174493251016"><a name="p174493251016"></a><a name="p174493251016"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p6857105019918"><a name="p6857105019918"></a><a name="p6857105019918"></a>X-coordinate of the center point of the arc.</p>
-    </td>
-    </tr>
-    <tr id="row1485745015913"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p148573503915"><a name="p148573503915"></a><a name="p148573503915"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.139999999999997%" headers="mcps1.1.6.1.2 "><p id="p1585719507913"><a name="p1585719507913"></a><a name="p1585719507913"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.15%" headers="mcps1.1.6.1.3 "><p id="p71639241108"><a name="p71639241108"></a><a name="p71639241108"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.69%" headers="mcps1.1.6.1.4 "><p id="p74410325105"><a name="p74410325105"></a><a name="p74410325105"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1685725017912"><a name="p1685725017912"></a><a name="p1685725017912"></a>Y-coordinate of the center point of the arc.</p>
-    </td>
-    </tr>
-    <tr id="row885717501999"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p128576506913"><a name="p128576506913"></a><a name="p128576506913"></a>radius</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.139999999999997%" headers="mcps1.1.6.1.2 "><p id="p085765018915"><a name="p085765018915"></a><a name="p085765018915"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.15%" headers="mcps1.1.6.1.3 "><p id="p216362441010"><a name="p216362441010"></a><a name="p216362441010"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.69%" headers="mcps1.1.6.1.4 "><p id="p19441732111015"><a name="p19441732111015"></a><a name="p19441732111015"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p685716502912"><a name="p685716502912"></a><a name="p685716502912"></a>Radius of the arc.</p>
-    </td>
-    </tr>
-    <tr id="row1885817507919"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p985755013918"><a name="p985755013918"></a><a name="p985755013918"></a>startAngle</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.139999999999997%" headers="mcps1.1.6.1.2 "><p id="p68571150999"><a name="p68571150999"></a><a name="p68571150999"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.15%" headers="mcps1.1.6.1.3 "><p id="p016342413100"><a name="p016342413100"></a><a name="p016342413100"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.69%" headers="mcps1.1.6.1.4 "><p id="p1344143241019"><a name="p1344143241019"></a><a name="p1344143241019"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p118573505912"><a name="p118573505912"></a><a name="p118573505912"></a>Start radian of the arc.</p>
-    </td>
-    </tr>
-    <tr id="row2858185013911"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p88585501991"><a name="p88585501991"></a><a name="p88585501991"></a>endAngle</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.139999999999997%" headers="mcps1.1.6.1.2 "><p id="p188581050996"><a name="p188581050996"></a><a name="p188581050996"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.15%" headers="mcps1.1.6.1.3 "><p id="p1016332441011"><a name="p1016332441011"></a><a name="p1016332441011"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.69%" headers="mcps1.1.6.1.4 "><p id="p1344183291013"><a name="p1344183291013"></a><a name="p1344183291013"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p98581950097"><a name="p98581950097"></a><a name="p98581950097"></a>End radian of the arc.</p>
-    </td>
-    </tr>
-    <tr id="row178587502914"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p148583501595"><a name="p148583501595"></a><a name="p148583501595"></a>anticlockwise</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.139999999999997%" headers="mcps1.1.6.1.2 "><p id="p1285812501894"><a name="p1285812501894"></a><a name="p1285812501894"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.15%" headers="mcps1.1.6.1.3 "><p id="p4163624101016"><a name="p4163624101016"></a><a name="p4163624101016"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.69%" headers="mcps1.1.6.1.4 "><p id="p1744163214109"><a name="p1744163214109"></a><a name="p1744163214109"></a>false</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p98589506912"><a name="p98589506912"></a><a name="p98589506912"></a>Whether to draw the arc counterclockwise.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct Arc {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.beginPath()
-              this.offContext.arc(100, 75, 50, 0, 6.28)
-              this.offContext.stroke()
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;point&nbsp;of&nbsp;the&nbsp;arc. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;point&nbsp;of&nbsp;the&nbsp;arc. | 
+  | radius | number | Yes | 0 | Radius&nbsp;of&nbsp;the&nbsp;arc. | 
+  | startAngle | number | Yes | 0 | Start&nbsp;radian&nbsp;of&nbsp;the&nbsp;arc. | 
+  | endAngle | number | Yes | 0 | End&nbsp;radian&nbsp;of&nbsp;the&nbsp;arc. | 
+  | anticlockwise | boolean | No | false | Whether&nbsp;to&nbsp;draw&nbsp;the&nbsp;arc&nbsp;counterclockwise. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct Arc {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.beginPath()
+            this.offContext.arc(100, 75, 50, 0, 6.28)
+            this.offContext.stroke()
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001192595226.png)
+  ![en-us_image_0000001212378430](figures/en-us_image_0000001212378430.png)
 
 
-### arcTo<a name="section119216819381"></a>
+### arcTo
 
-arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void
+arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
 
 Draws an arc based on the radius and points on the arc.
 
--   Parameters
-
-    <a name="table1329914791515"></a>
-    <table><thead align="left"><tr id="row182970710154"><th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.1"><p id="p162979719153"><a name="p162979719153"></a><a name="p162979719153"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.17%" id="mcps1.1.6.1.2"><p id="p1529712713151"><a name="p1529712713151"></a><a name="p1529712713151"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="p713917244118"><a name="p713917244118"></a><a name="p713917244118"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.330000000000002%" id="mcps1.1.6.1.4"><p id="p8619122971118"><a name="p8619122971118"></a><a name="p8619122971118"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p14297271157"><a name="p14297271157"></a><a name="p14297271157"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1629837141513"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p1829797201512"><a name="p1829797201512"></a><a name="p1829797201512"></a>x1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.17%" headers="mcps1.1.6.1.2 "><p id="p1429719711152"><a name="p1429719711152"></a><a name="p1429719711152"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p13139182441120"><a name="p13139182441120"></a><a name="p13139182441120"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.330000000000002%" headers="mcps1.1.6.1.4 "><p id="p461911294112"><a name="p461911294112"></a><a name="p461911294112"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p2029819715156"><a name="p2029819715156"></a><a name="p2029819715156"></a>X-coordinate of the first point on the arc.</p>
-    </td>
-    </tr>
-    <tr id="row162982741511"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p429815720159"><a name="p429815720159"></a><a name="p429815720159"></a>y1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.17%" headers="mcps1.1.6.1.2 "><p id="p1329827111513"><a name="p1329827111513"></a><a name="p1329827111513"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p1014018242117"><a name="p1014018242117"></a><a name="p1014018242117"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.330000000000002%" headers="mcps1.1.6.1.4 "><p id="p261952917118"><a name="p261952917118"></a><a name="p261952917118"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p102981771158"><a name="p102981771158"></a><a name="p102981771158"></a>Y-coordinate of the first point on the arc.</p>
-    </td>
-    </tr>
-    <tr id="row12985718157"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p62987761517"><a name="p62987761517"></a><a name="p62987761517"></a>x2</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.17%" headers="mcps1.1.6.1.2 "><p id="p1629813720153"><a name="p1629813720153"></a><a name="p1629813720153"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p814042461114"><a name="p814042461114"></a><a name="p814042461114"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.330000000000002%" headers="mcps1.1.6.1.4 "><p id="p4619172901119"><a name="p4619172901119"></a><a name="p4619172901119"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p152986711512"><a name="p152986711512"></a><a name="p152986711512"></a>X-coordinate of the second point on the arc.</p>
-    </td>
-    </tr>
-    <tr id="row22996701511"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p92981870152"><a name="p92981870152"></a><a name="p92981870152"></a>y2</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.17%" headers="mcps1.1.6.1.2 "><p id="p22981677154"><a name="p22981677154"></a><a name="p22981677154"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p914092420115"><a name="p914092420115"></a><a name="p914092420115"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.330000000000002%" headers="mcps1.1.6.1.4 "><p id="p156209292113"><a name="p156209292113"></a><a name="p156209292113"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1929919717158"><a name="p1929919717158"></a><a name="p1929919717158"></a>Y-coordinate of the second point on the arc.</p>
-    </td>
-    </tr>
-    <tr id="row1429915718151"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p102991571157"><a name="p102991571157"></a><a name="p102991571157"></a>radius</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.17%" headers="mcps1.1.6.1.2 "><p id="p1829947171517"><a name="p1829947171517"></a><a name="p1829947171517"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p1140182431119"><a name="p1140182431119"></a><a name="p1140182431119"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.330000000000002%" headers="mcps1.1.6.1.4 "><p id="p162022914111"><a name="p162022914111"></a><a name="p162022914111"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p02997741518"><a name="p02997741518"></a><a name="p02997741518"></a>Radius of the arc.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct ArcTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.moveTo(100, 20);
-              this.offContext.arcTo(150, 20, 150, 70, 50);
-              this.offContext.stroke();
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x1 | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;first&nbsp;point&nbsp;on&nbsp;the&nbsp;arc. | 
+  | y1 | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;first&nbsp;point&nbsp;on&nbsp;the&nbsp;arc. | 
+  | x2 | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;second&nbsp;point&nbsp;on&nbsp;the&nbsp;arc. | 
+  | y2 | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;second&nbsp;point&nbsp;on&nbsp;the&nbsp;arc. | 
+  | radius | number | Yes | 0 | Radius&nbsp;of&nbsp;the&nbsp;arc. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct ArcTo {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.moveTo(100, 20);
+            this.offContext.arcTo(150, 20, 150, 70, 50);
+            this.offContext.stroke();
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001237555167.png)
+  ![en-us_image_0000001257138383](figures/en-us_image_0000001257138383.png)
 
 
-### ellipse<a name="section1167873913385"></a>
+### ellipse
 
-ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean\): void
+ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
 
 Draws an ellipse in the specified rectangular region.
 
--   Parameters
-
-    <a name="table450718315196"></a>
-    <table><thead align="left"><tr id="row175044320194"><th class="cellrowborder" valign="top" width="19.75%" id="mcps1.1.6.1.1"><p id="p1504334195"><a name="p1504334195"></a><a name="p1504334195"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.14%" id="mcps1.1.6.1.2"><p id="p1950420318199"><a name="p1950420318199"></a><a name="p1950420318199"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.87%" id="mcps1.1.6.1.3"><p id="p821312914144"><a name="p821312914144"></a><a name="p821312914144"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.03%" id="mcps1.1.6.1.4"><p id="p1785311416148"><a name="p1785311416148"></a><a name="p1785311416148"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="30.209999999999997%" id="mcps1.1.6.1.5"><p id="p950418320192"><a name="p950418320192"></a><a name="p950418320192"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row195051317198"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p5504123101910"><a name="p5504123101910"></a><a name="p5504123101910"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p4504433196"><a name="p4504433196"></a><a name="p4504433196"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p521315911413"><a name="p521315911413"></a><a name="p521315911413"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.6.1.4 "><p id="p1885313143145"><a name="p1885313143145"></a><a name="p1885313143145"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.209999999999997%" headers="mcps1.1.6.1.5 "><p id="p15056351910"><a name="p15056351910"></a><a name="p15056351910"></a>X-coordinate of the ellipse center.</p>
-    </td>
-    </tr>
-    <tr id="row65051638195"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p1750517314199"><a name="p1750517314199"></a><a name="p1750517314199"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p3505143161914"><a name="p3505143161914"></a><a name="p3505143161914"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p32134912140"><a name="p32134912140"></a><a name="p32134912140"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.6.1.4 "><p id="p13853101411416"><a name="p13853101411416"></a><a name="p13853101411416"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.209999999999997%" headers="mcps1.1.6.1.5 "><p id="p85058311915"><a name="p85058311915"></a><a name="p85058311915"></a>Y-coordinate of the ellipse center.</p>
-    </td>
-    </tr>
-    <tr id="row25051439198"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p95059391919"><a name="p95059391919"></a><a name="p95059391919"></a>radiusX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p165051036193"><a name="p165051036193"></a><a name="p165051036193"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p8213129141419"><a name="p8213129141419"></a><a name="p8213129141419"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.6.1.4 "><p id="p68537149141"><a name="p68537149141"></a><a name="p68537149141"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.209999999999997%" headers="mcps1.1.6.1.5 "><p id="p1650519341912"><a name="p1650519341912"></a><a name="p1650519341912"></a>Ellipse radius on the x-axis.</p>
-    </td>
-    </tr>
-    <tr id="row105059313190"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p3505736199"><a name="p3505736199"></a><a name="p3505736199"></a>radiusY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p185056314199"><a name="p185056314199"></a><a name="p185056314199"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p1821399171420"><a name="p1821399171420"></a><a name="p1821399171420"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.6.1.4 "><p id="p8853151471412"><a name="p8853151471412"></a><a name="p8853151471412"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.209999999999997%" headers="mcps1.1.6.1.5 "><p id="p165054319193"><a name="p165054319193"></a><a name="p165054319193"></a>Ellipse radius on the y-axis.</p>
-    </td>
-    </tr>
-    <tr id="row650614321914"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p1450511310194"><a name="p1450511310194"></a><a name="p1450511310194"></a>rotation</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p205061235199"><a name="p205061235199"></a><a name="p205061235199"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p15213179111418"><a name="p15213179111418"></a><a name="p15213179111418"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.6.1.4 "><p id="p16853214121415"><a name="p16853214121415"></a><a name="p16853214121415"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.209999999999997%" headers="mcps1.1.6.1.5 "><p id="p05061638195"><a name="p05061638195"></a><a name="p05061638195"></a>Rotation angle of the ellipse, in radians.</p>
-    </td>
-    </tr>
-    <tr id="row1506731196"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p14506831197"><a name="p14506831197"></a><a name="p14506831197"></a>startAngle</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p1750623101910"><a name="p1750623101910"></a><a name="p1750623101910"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p9213189131411"><a name="p9213189131411"></a><a name="p9213189131411"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.6.1.4 "><p id="p1785301431414"><a name="p1785301431414"></a><a name="p1785301431414"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.209999999999997%" headers="mcps1.1.6.1.5 "><p id="p9506123121920"><a name="p9506123121920"></a><a name="p9506123121920"></a>Angle of the start point for drawing the ellipse, in radians.</p>
-    </td>
-    </tr>
-    <tr id="row65061537199"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p850619317199"><a name="p850619317199"></a><a name="p850619317199"></a>endAngle</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p95062331912"><a name="p95062331912"></a><a name="p95062331912"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p321314913144"><a name="p321314913144"></a><a name="p321314913144"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.6.1.4 "><p id="p28535144142"><a name="p28535144142"></a><a name="p28535144142"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.209999999999997%" headers="mcps1.1.6.1.5 "><p id="p185061837197"><a name="p185061837197"></a><a name="p185061837197"></a>Angle of the end point for drawing the ellipse, in radians.</p>
-    </td>
-    </tr>
-    <tr id="row1150717316199"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.6.1.1 "><p id="p11506193181911"><a name="p11506193181911"></a><a name="p11506193181911"></a>anticlockwise</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p3507538196"><a name="p3507538196"></a><a name="p3507538196"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.6.1.3 "><p id="p172131199142"><a name="p172131199142"></a><a name="p172131199142"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.03%" headers="mcps1.1.6.1.4 "><p id="p4853111451419"><a name="p4853111451419"></a><a name="p4853111451419"></a>false</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.209999999999997%" headers="mcps1.1.6.1.5 "><p id="p1850718313190"><a name="p1850718313190"></a><a name="p1850718313190"></a>Whether to draw the ellipse in the counterclockwise direction. The value <strong id="b12541105164711"><a name="b12541105164711"></a><a name="b12541105164711"></a>0</strong> means to draw the ellipse in the clockwise direction, and <strong id="b45421251104713"><a name="b45421251104713"></a><a name="b45421251104713"></a>1</strong> means to draw the ellipse in the counterclockwise direction. This parameter is optional. The default value is <strong id="b27601752184714"><a name="b27601752184714"></a><a name="b27601752184714"></a>0</strong>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct CanvasExample {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.beginPath()
-              this.offContext.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, true)
-              this.offContext.stroke()
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;ellipse&nbsp;center. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;ellipse&nbsp;center. | 
+  | radiusX | number | Yes | 0 | Ellipse&nbsp;radius&nbsp;on&nbsp;the&nbsp;x-axis. | 
+  | radiusY | number | Yes | 0 | Ellipse&nbsp;radius&nbsp;on&nbsp;the&nbsp;y-axis. | 
+  | rotation | number | Yes | 0 | Rotation&nbsp;angle&nbsp;of&nbsp;the&nbsp;ellipse,&nbsp;in&nbsp;radians. | 
+  | startAngle | number | Yes | 0 | Angle&nbsp;of&nbsp;the&nbsp;start&nbsp;point&nbsp;for&nbsp;drawing&nbsp;the&nbsp;ellipse,&nbsp;in&nbsp;radians. | 
+  | endAngle | number | Yes | 0 | Angle&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;for&nbsp;drawing&nbsp;the&nbsp;ellipse,&nbsp;in&nbsp;radians. | 
+  | anticlockwise | boolean | No | false | Whether&nbsp;to&nbsp;draw&nbsp;the&nbsp;ellipse&nbsp;in&nbsp;the&nbsp;counterclockwise&nbsp;direction. | 
+
+- Example
+
+  
+  ```
+  @Entry
+  @Component
+  struct CanvasExample {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.beginPath()
+            this.offContext.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI)
+            this.offContext.stroke()
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001237355131.png)
+  ![en-us_image_0000001256858423](figures/en-us_image_0000001256858423.png)
 
 
-### rect<a name="section1868942618396"></a>
+### rect
 
-rect\(x: number, y: number, width: number, height: number\): void
+rect(x: number, y: number, width: number, height: number): void
 
 Creates a rectangle.
 
--   Parameters
-
-    <a name="table1622173213205"></a>
-    <table><thead align="left"><tr id="row14220032182013"><th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.1"><p id="p02201232112019"><a name="p02201232112019"></a><a name="p02201232112019"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.2"><p id="p18220133212011"><a name="p18220133212011"></a><a name="p18220133212011"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.9%" id="mcps1.1.6.1.3"><p id="p11820919101519"><a name="p11820919101519"></a><a name="p11820919101519"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.969999999999999%" id="mcps1.1.6.1.4"><p id="p267692818152"><a name="p267692818152"></a><a name="p267692818152"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p1922093242018"><a name="p1922093242018"></a><a name="p1922093242018"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row02204322207"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p19220173219209"><a name="p19220173219209"></a><a name="p19220173219209"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.2 "><p id="p192201332162010"><a name="p192201332162010"></a><a name="p192201332162010"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.9%" headers="mcps1.1.6.1.3 "><p id="p1282091912157"><a name="p1282091912157"></a><a name="p1282091912157"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.969999999999999%" headers="mcps1.1.6.1.4 "><p id="p1267622817151"><a name="p1267622817151"></a><a name="p1267622817151"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p622093282017"><a name="p622093282017"></a><a name="p622093282017"></a>X-coordinate of the upper left corner of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row1022133216200"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p52202328209"><a name="p52202328209"></a><a name="p52202328209"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.2 "><p id="p02210325203"><a name="p02210325203"></a><a name="p02210325203"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.9%" headers="mcps1.1.6.1.3 "><p id="p19820141971513"><a name="p19820141971513"></a><a name="p19820141971513"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.969999999999999%" headers="mcps1.1.6.1.4 "><p id="p367692811517"><a name="p367692811517"></a><a name="p367692811517"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1122119323205"><a name="p1122119323205"></a><a name="p1122119323205"></a>Y-coordinate of the upper left corner of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row22211532142010"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p02211232172017"><a name="p02211232172017"></a><a name="p02211232172017"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.2 "><p id="p1221123215204"><a name="p1221123215204"></a><a name="p1221123215204"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.9%" headers="mcps1.1.6.1.3 "><p id="p68202194158"><a name="p68202194158"></a><a name="p68202194158"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.969999999999999%" headers="mcps1.1.6.1.4 "><p id="p1267618283156"><a name="p1267618283156"></a><a name="p1267618283156"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p32211432182014"><a name="p32211432182014"></a><a name="p32211432182014"></a>Width of the rectangle.</p>
-    </td>
-    </tr>
-    <tr id="row7221532132018"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p6221032102010"><a name="p6221032102010"></a><a name="p6221032102010"></a>height</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.2 "><p id="p1322114329207"><a name="p1322114329207"></a><a name="p1322114329207"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.9%" headers="mcps1.1.6.1.3 "><p id="p14820121913154"><a name="p14820121913154"></a><a name="p14820121913154"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.969999999999999%" headers="mcps1.1.6.1.4 "><p id="p196768285154"><a name="p196768285154"></a><a name="p196768285154"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p5221632122018"><a name="p5221632122018"></a><a name="p5221632122018"></a>Height of the rectangle.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct CanvasExample {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
-              this.offContext.stroke()
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | width | number | Yes | 0 | Width&nbsp;of&nbsp;the&nbsp;rectangle. | 
+  | height | number | Yes | 0 | Height&nbsp;of&nbsp;the&nbsp;rectangle. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct CanvasExample {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
+            this.offContext.stroke()
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001237715155.png)
+  ![en-us_image_0000001257138381](figures/en-us_image_0000001257138381.png)
 
 
-### fill<a name="section4620115915396"></a>
+### fill
 
-fill\(\): void
+fill(): void
 
 Fills the area inside a closed path.
 
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct Fill {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
-              this.offContext.fill()
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct Fill {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
+            this.offContext.fill()
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001193075166.png)
+  ![en-us_image_0000001256858421](figures/en-us_image_0000001256858421.png)
 
 
-### clip<a name="section6761132716402"></a>
+### clip
 
-clip\(\): void
+clip(): void
 
 Sets the current path to a clipping path.
 
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct Clip {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.rect(0, 0, 200, 200)
-              this.offContext.stroke()
-              this.offContext.clip()
-              this.offContext.fillStyle = "rgb(255,0,0)"
-              this.offContext.fillRect(0, 0, 150, 150)
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct Clip {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.rect(0, 0, 200, 200)
+            this.offContext.stroke()
+            this.offContext.clip()
+            this.offContext.fillStyle = "rgb(255,0,0)"
+            this.offContext.fillRect(0, 0, 150, 150)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001192595238.png)
+  ![en-us_image_0000001257058441](figures/en-us_image_0000001257058441.png)
 
 
-### rotate<a name="section2763756204013"></a>
+### rotate
 
-rotate\(rotate: number\): void
+rotate(rotate: number): void
 
 Rotates a canvas clockwise around its coordinate axes.
 
--   Parameters
-
-    <a name="table105511032162410"></a>
-    <table><thead align="left"><tr id="row195511832162416"><th class="cellrowborder" valign="top" width="14.729999999999999%" id="mcps1.1.6.1.1"><p id="p855143217248"><a name="p855143217248"></a><a name="p855143217248"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.26%" id="mcps1.1.6.1.2"><p id="p65511132102412"><a name="p65511132102412"></a><a name="p65511132102412"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.030000000000001%" id="mcps1.1.6.1.3"><p id="p19314185712167"><a name="p19314185712167"></a><a name="p19314185712167"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="19.02%" id="mcps1.1.6.1.4"><p id="p1829813215176"><a name="p1829813215176"></a><a name="p1829813215176"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="40.96%" id="mcps1.1.6.1.5"><p id="p955173242412"><a name="p955173242412"></a><a name="p955173242412"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row25511132132416"><td class="cellrowborder" valign="top" width="14.729999999999999%" headers="mcps1.1.6.1.1 "><p id="p8551632142419"><a name="p8551632142419"></a><a name="p8551632142419"></a>rotate</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.26%" headers="mcps1.1.6.1.2 "><p id="p165511632102419"><a name="p165511632102419"></a><a name="p165511632102419"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.030000000000001%" headers="mcps1.1.6.1.3 "><p id="p931419572164"><a name="p931419572164"></a><a name="p931419572164"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.02%" headers="mcps1.1.6.1.4 "><p id="p1629817231716"><a name="p1629817231716"></a><a name="p1629817231716"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="40.96%" headers="mcps1.1.6.1.5 "><p id="p1855193292413"><a name="p1855193292413"></a><a name="p1855193292413"></a>Clockwise rotation angle. You can use <strong id="b1318655144816"><a name="b1318655144816"></a><a name="b1318655144816"></a>Math.PI / 180</strong> to convert the angle to a radian.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct Rotate {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.rotate(45 * Math.PI / 180) // Rotate the rectangle 45 degrees
-              this.offContext.fillRect(70, 20, 50, 50)
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | rotate | number | Yes | 0 | Clockwise&nbsp;rotation&nbsp;angle.&nbsp;You&nbsp;can&nbsp;use&nbsp;**Math.PI&nbsp;/&nbsp;180**&nbsp;to&nbsp;convert&nbsp;the&nbsp;angle&nbsp;to&nbsp;a&nbsp;radian. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct Rotate {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.rotate(45 * Math.PI / 180) // Rotate the rectangle 45 degrees
+            this.offContext.fillRect(70, 20, 50, 50)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
-
-    ![](figures/en-us_image_0000001237355133.png)
-
-
-### scale<a name="section915124934112"></a>
-
-scale\(x: number, y: number\): void
-
-Scales a canvas based on scaling factors.
-
--   Parameters
-
-    <a name="table8153193817250"></a>
-    <table><thead align="left"><tr id="row1415333822513"><th class="cellrowborder" valign="top" width="17.330000000000002%" id="mcps1.1.6.1.1"><p id="p8152143812517"><a name="p8152143812517"></a><a name="p8152143812517"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.860000000000003%" id="mcps1.1.6.1.2"><p id="p13152238132513"><a name="p13152238132513"></a><a name="p13152238132513"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.27%" id="mcps1.1.6.1.3"><p id="p181861841161716"><a name="p181861841161716"></a><a name="p181861841161716"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.03%" id="mcps1.1.6.1.4"><p id="p152111436121714"><a name="p152111436121714"></a><a name="p152111436121714"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p1215283812511"><a name="p1215283812511"></a><a name="p1215283812511"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6153103872517"><td class="cellrowborder" valign="top" width="17.330000000000002%" headers="mcps1.1.6.1.1 "><p id="p1415353817251"><a name="p1415353817251"></a><a name="p1415353817251"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.860000000000003%" headers="mcps1.1.6.1.2 "><p id="p18153338162512"><a name="p18153338162512"></a><a name="p18153338162512"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.27%" headers="mcps1.1.6.1.3 "><p id="p518634101715"><a name="p518634101715"></a><a name="p518634101715"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.03%" headers="mcps1.1.6.1.4 "><p id="p5211636191711"><a name="p5211636191711"></a><a name="p5211636191711"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p9153193812256"><a name="p9153193812256"></a><a name="p9153193812256"></a>Horizontal scale factor.</p>
-    </td>
-    </tr>
-    <tr id="row91531438182510"><td class="cellrowborder" valign="top" width="17.330000000000002%" headers="mcps1.1.6.1.1 "><p id="p10153113811252"><a name="p10153113811252"></a><a name="p10153113811252"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.860000000000003%" headers="mcps1.1.6.1.2 "><p id="p19153173822518"><a name="p19153173822518"></a><a name="p19153173822518"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.27%" headers="mcps1.1.6.1.3 "><p id="p18186164151713"><a name="p18186164151713"></a><a name="p18186164151713"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.03%" headers="mcps1.1.6.1.4 "><p id="p1021113621711"><a name="p1021113621711"></a><a name="p1021113621711"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p8153203842518"><a name="p8153203842518"></a><a name="p8153203842518"></a>Vertical scale factor.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct Scale {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.strokeRect(10, 10, 25, 25)
-              this.offContext.scale(2, 2) // Scale to 200%
-              this.offContext.strokeRect(10, 10, 25, 25)
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
+  }
+  ```
+
+  ![en-us_image_0000001212218478](figures/en-us_image_0000001212218478.png)
+
+
+### scale
+
+scale(x: number, y: number): void
+
+Scales a canvas based on scale factors.
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | Horizontal&nbsp;scale&nbsp;factor. | 
+  | y | number | Yes | 0 | Vertical&nbsp;scale&nbsp;factor. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct Scale {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.strokeRect(10, 10, 25, 25)
+            this.offContext.scale(2, 2) // Scale to 200%
+            this.offContext.strokeRect(10, 10, 25, 25)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001192755178.png)
+  ![en-us_image_0000001211898516](figures/en-us_image_0000001211898516.png)
 
 
-### transform<a name="section20379142884219"></a>
+### transform
 
-transform\(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number\): void
+transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void
 
 Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects.
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->The following formulas calculate coordinates of the transformed graph.  **x**  and  **y**  represent coordinates before transformation, and  **x'**  and  **y'**  represent coordinates after transformation.
->-   x' = scaleX \* x + skewY \* y + translateX
->-   y' = skewX \* x + scaleY \* y + translateY
-
--   Parameters
-
-    <a name="table1191915312717"></a>
-    <table><thead align="left"><tr id="row09169362712"><th class="cellrowborder" valign="top" width="22.05%" id="mcps1.1.6.1.1"><p id="p129161332716"><a name="p129161332716"></a><a name="p129161332716"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.14%" id="mcps1.1.6.1.2"><p id="p491617311278"><a name="p491617311278"></a><a name="p491617311278"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.78%" id="mcps1.1.6.1.3"><p id="p26021281182"><a name="p26021281182"></a><a name="p26021281182"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.520000000000001%" id="mcps1.1.6.1.4"><p id="p16978193418183"><a name="p16978193418183"></a><a name="p16978193418183"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p1991603132713"><a name="p1991603132713"></a><a name="p1991603132713"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row69170319276"><td class="cellrowborder" valign="top" width="22.05%" headers="mcps1.1.6.1.1 "><p id="p1391619317278"><a name="p1391619317278"></a><a name="p1391619317278"></a>scaleX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p2091612342712"><a name="p2091612342712"></a><a name="p2091612342712"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.78%" headers="mcps1.1.6.1.3 "><p id="p17602828111819"><a name="p17602828111819"></a><a name="p17602828111819"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.520000000000001%" headers="mcps1.1.6.1.4 "><p id="p1097910343186"><a name="p1097910343186"></a><a name="p1097910343186"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1891617342711"><a name="p1891617342711"></a><a name="p1891617342711"></a>X-axis scale.</p>
-    </td>
-    </tr>
-    <tr id="row19917163112715"><td class="cellrowborder" valign="top" width="22.05%" headers="mcps1.1.6.1.1 "><p id="p9917113122716"><a name="p9917113122716"></a><a name="p9917113122716"></a>skewX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p391713372715"><a name="p391713372715"></a><a name="p391713372715"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.78%" headers="mcps1.1.6.1.3 "><p id="p360222816181"><a name="p360222816181"></a><a name="p360222816181"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.520000000000001%" headers="mcps1.1.6.1.4 "><p id="p11979934131812"><a name="p11979934131812"></a><a name="p11979934131812"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p491713112718"><a name="p491713112718"></a><a name="p491713112718"></a>X-axis skew.</p>
-    </td>
-    </tr>
-    <tr id="row7917334279"><td class="cellrowborder" valign="top" width="22.05%" headers="mcps1.1.6.1.1 "><p id="p10917639275"><a name="p10917639275"></a><a name="p10917639275"></a>skewY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p9917103192711"><a name="p9917103192711"></a><a name="p9917103192711"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.78%" headers="mcps1.1.6.1.3 "><p id="p1602122831817"><a name="p1602122831817"></a><a name="p1602122831817"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.520000000000001%" headers="mcps1.1.6.1.4 "><p id="p15979173401810"><a name="p15979173401810"></a><a name="p15979173401810"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1791717382713"><a name="p1791717382713"></a><a name="p1791717382713"></a>Y-axis skew.</p>
-    </td>
-    </tr>
-    <tr id="row1918335276"><td class="cellrowborder" valign="top" width="22.05%" headers="mcps1.1.6.1.1 "><p id="p109171338271"><a name="p109171338271"></a><a name="p109171338271"></a>scaleY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p1391711362710"><a name="p1391711362710"></a><a name="p1391711362710"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.78%" headers="mcps1.1.6.1.3 "><p id="p26021228131819"><a name="p26021228131819"></a><a name="p26021228131819"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.520000000000001%" headers="mcps1.1.6.1.4 "><p id="p59791834181814"><a name="p59791834181814"></a><a name="p59791834181814"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p109175314271"><a name="p109175314271"></a><a name="p109175314271"></a>Y-axis scale.</p>
-    </td>
-    </tr>
-    <tr id="row109184316272"><td class="cellrowborder" valign="top" width="22.05%" headers="mcps1.1.6.1.1 "><p id="p49187322717"><a name="p49187322717"></a><a name="p49187322717"></a>translateX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p18918153102713"><a name="p18918153102713"></a><a name="p18918153102713"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.78%" headers="mcps1.1.6.1.3 "><p id="p1060214282187"><a name="p1060214282187"></a><a name="p1060214282187"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.520000000000001%" headers="mcps1.1.6.1.4 "><p id="p797953461811"><a name="p797953461811"></a><a name="p797953461811"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p49181233272"><a name="p49181233272"></a><a name="p49181233272"></a>X-axis translation.</p>
-    </td>
-    </tr>
-    <tr id="row691910342710"><td class="cellrowborder" valign="top" width="22.05%" headers="mcps1.1.6.1.1 "><p id="p29184342713"><a name="p29184342713"></a><a name="p29184342713"></a>translateY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.14%" headers="mcps1.1.6.1.2 "><p id="p169191337272"><a name="p169191337272"></a><a name="p169191337272"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.78%" headers="mcps1.1.6.1.3 "><p id="p106021428181818"><a name="p106021428181818"></a><a name="p106021428181818"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.520000000000001%" headers="mcps1.1.6.1.4 "><p id="p3979153461816"><a name="p3979153461816"></a><a name="p3979153461816"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p179191311272"><a name="p179191311272"></a><a name="p179191311272"></a>Y-axis translation.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct Transform {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.fillStyle = 'rgb(0,0,0)'
-              this.offContext.fillRect(0, 0, 100, 100)
-              this.offContext.transform(1, 0.5, -0.5, 1, 10, 10)
-              this.offContext.fillStyle = 'rgb(255,0,0)'
-              this.offContext.fillRect(0, 0, 100, 100)
-              this.offContext.transform(1, 0.5, -0.5, 1, 10, 10)
-              this.offContext.fillStyle = 'rgb(0,0,255)'
-              this.offContext.fillRect(0, 0, 100, 100)
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
+> 
+> - x' = scaleX \* x + skewY \* y + translateX
+> 
+> - y' = skewX \* x + scaleY \* y + translateY
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | scaleX | number | Yes | 0 | X-axis&nbsp;scale. | 
+  | skewX | number | Yes | 0 | X-axis&nbsp;skew. | 
+  | skewY | number | Yes | 0 | Y-axis&nbsp;skew. | 
+  | scaleY | number | Yes | 0 | Y-axis&nbsp;scale. | 
+  | translateX | number | Yes | 0 | X-axis&nbsp;translation. | 
+  | translateY | number | Yes | 0 | Y-axis&nbsp;translation. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct Transform {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.fillStyle = 'rgb(0,0,0)'
+            this.offContext.fillRect(0, 0, 100, 100)
+            this.offContext.transform(1, 0.5, -0.5, 1, 10, 10)
+            this.offContext.fillStyle = 'rgb(255,0,0)'
+            this.offContext.fillRect(0, 0, 100, 100)
+            this.offContext.transform(1, 0.5, -0.5, 1, 10, 10)
+            this.offContext.fillStyle = 'rgb(0,0,255)'
+            this.offContext.fillRect(0, 0, 100, 100)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
-
-    ![](figures/en-us_image_0000001192595230.png)
-
-
-### setTransform<a name="section56207711434"></a>
-
-setTransform\(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number\): void
-
-Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the  **transform\(\)**  function.
-
--   Parameters
-
-    <a name="table1118143092810"></a>
-    <table><thead align="left"><tr id="row13111230202813"><th class="cellrowborder" valign="top" width="23.14%" id="mcps1.1.6.1.1"><p id="p71101130122816"><a name="p71101130122816"></a><a name="p71101130122816"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.27%" id="mcps1.1.6.1.2"><p id="p191102030142814"><a name="p191102030142814"></a><a name="p191102030142814"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.96%" id="mcps1.1.6.1.3"><p id="p16738101331912"><a name="p16738101331912"></a><a name="p16738101331912"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.120000000000001%" id="mcps1.1.6.1.4"><p id="p131621187198"><a name="p131621187198"></a><a name="p131621187198"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p10110103010286"><a name="p10110103010286"></a><a name="p10110103010286"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row111117307283"><td class="cellrowborder" valign="top" width="23.14%" headers="mcps1.1.6.1.1 "><p id="p711103011287"><a name="p711103011287"></a><a name="p711103011287"></a>scaleX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.27%" headers="mcps1.1.6.1.2 "><p id="p7111193092813"><a name="p7111193092813"></a><a name="p7111193092813"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.96%" headers="mcps1.1.6.1.3 "><p id="p773921371915"><a name="p773921371915"></a><a name="p773921371915"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.120000000000001%" headers="mcps1.1.6.1.4 "><p id="p8162918171914"><a name="p8162918171914"></a><a name="p8162918171914"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p7111113014288"><a name="p7111113014288"></a><a name="p7111113014288"></a>X-axis scale.</p>
-    </td>
-    </tr>
-    <tr id="row1117930172816"><td class="cellrowborder" valign="top" width="23.14%" headers="mcps1.1.6.1.1 "><p id="p91111830132813"><a name="p91111830132813"></a><a name="p91111830132813"></a>skewX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.27%" headers="mcps1.1.6.1.2 "><p id="p511173022814"><a name="p511173022814"></a><a name="p511173022814"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.96%" headers="mcps1.1.6.1.3 "><p id="p1873951301913"><a name="p1873951301913"></a><a name="p1873951301913"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.120000000000001%" headers="mcps1.1.6.1.4 "><p id="p1716261815196"><a name="p1716261815196"></a><a name="p1716261815196"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1117143014284"><a name="p1117143014284"></a><a name="p1117143014284"></a>X-axis skew.</p>
-    </td>
-    </tr>
-    <tr id="row15117430152814"><td class="cellrowborder" valign="top" width="23.14%" headers="mcps1.1.6.1.1 "><p id="p13117163011285"><a name="p13117163011285"></a><a name="p13117163011285"></a>skewY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.27%" headers="mcps1.1.6.1.2 "><p id="p1911743019284"><a name="p1911743019284"></a><a name="p1911743019284"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.96%" headers="mcps1.1.6.1.3 "><p id="p37392134196"><a name="p37392134196"></a><a name="p37392134196"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.120000000000001%" headers="mcps1.1.6.1.4 "><p id="p716331811193"><a name="p716331811193"></a><a name="p716331811193"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p0117130102818"><a name="p0117130102818"></a><a name="p0117130102818"></a>Y-axis skew.</p>
-    </td>
-    </tr>
-    <tr id="row111171630112814"><td class="cellrowborder" valign="top" width="23.14%" headers="mcps1.1.6.1.1 "><p id="p7117153018282"><a name="p7117153018282"></a><a name="p7117153018282"></a>scaleY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.27%" headers="mcps1.1.6.1.2 "><p id="p19117123012281"><a name="p19117123012281"></a><a name="p19117123012281"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.96%" headers="mcps1.1.6.1.3 "><p id="p14739513131910"><a name="p14739513131910"></a><a name="p14739513131910"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.120000000000001%" headers="mcps1.1.6.1.4 "><p id="p316381881915"><a name="p316381881915"></a><a name="p316381881915"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1411773032810"><a name="p1411773032810"></a><a name="p1411773032810"></a>Y-axis scale.</p>
-    </td>
-    </tr>
-    <tr id="row8118183012281"><td class="cellrowborder" valign="top" width="23.14%" headers="mcps1.1.6.1.1 "><p id="p16117163012282"><a name="p16117163012282"></a><a name="p16117163012282"></a>translateX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.27%" headers="mcps1.1.6.1.2 "><p id="p2118103092816"><a name="p2118103092816"></a><a name="p2118103092816"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.96%" headers="mcps1.1.6.1.3 "><p id="p2073919132194"><a name="p2073919132194"></a><a name="p2073919132194"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.120000000000001%" headers="mcps1.1.6.1.4 "><p id="p61631118161913"><a name="p61631118161913"></a><a name="p61631118161913"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1811873072819"><a name="p1811873072819"></a><a name="p1811873072819"></a>X-axis translation.</p>
-    </td>
-    </tr>
-    <tr id="row111823072817"><td class="cellrowborder" valign="top" width="23.14%" headers="mcps1.1.6.1.1 "><p id="p11118130102816"><a name="p11118130102816"></a><a name="p11118130102816"></a>translateY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.27%" headers="mcps1.1.6.1.2 "><p id="p2118930102813"><a name="p2118930102813"></a><a name="p2118930102813"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.96%" headers="mcps1.1.6.1.3 "><p id="p11739101321913"><a name="p11739101321913"></a><a name="p11739101321913"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.120000000000001%" headers="mcps1.1.6.1.4 "><p id="p171634183195"><a name="p171634183195"></a><a name="p171634183195"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p3118163014289"><a name="p3118163014289"></a><a name="p3118163014289"></a>Y-axis translation.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct SetTransform {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.fillStyle = 'rgb(255,0,0)'
-              this.offContext.fillRect(0, 0, 100, 100)
-              this.offContext.setTransform(1,0.5, -0.5, 1, 10, 10)
-              this.offContext.fillStyle = 'rgb(0,0,255)'
-              this.offContext.fillRect(0, 0, 100, 100)
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
+  }
+  ```
+
+  ![en-us_image_0000001212378438](figures/en-us_image_0000001212378438.png)
+
+
+### setTransform
+
+setTransform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void
+
+Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform()** function.
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | scaleX | number | Yes | 0 | X-axis&nbsp;scale. | 
+  | skewX | number | Yes | 0 | X-axis&nbsp;skew. | 
+  | skewY | number | Yes | 0 | Y-axis&nbsp;skew. | 
+  | scaleY | number | Yes | 0 | Y-axis&nbsp;scale. | 
+  | translateX | number | Yes | 0 | X-axis&nbsp;translation. | 
+  | translateY | number | Yes | 0 | Y-axis&nbsp;translation. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct SetTransform {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.fillStyle = 'rgb(255,0,0)'
+            this.offContext.fillRect(0, 0, 100, 100)
+            this.offContext.setTransform(1,0.5, -0.5, 1, 10, 10)
+            this.offContext.fillStyle = 'rgb(0,0,255)'
+            this.offContext.fillRect(0, 0, 100, 100)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001237715159.png)
+  ![en-us_image_0000001211898518](figures/en-us_image_0000001211898518.png)
 
 
-### translate<a name="section104793395437"></a>
+### translate
 
-translate\(x: number, y: number\): void
+translate(x: number, y: number): void
 
 Moves the origin of the coordinate system.
 
--   Parameters
-
-    <a name="table1362133712301"></a>
-    <table><thead align="left"><tr id="row9361173710307"><th class="cellrowborder" valign="top" width="23.26%" id="mcps1.1.6.1.1"><p id="p536113717306"><a name="p536113717306"></a><a name="p536113717306"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="21.12%" id="mcps1.1.6.1.2"><p id="p2036193714304"><a name="p2036193714304"></a><a name="p2036193714304"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.6%" id="mcps1.1.6.1.3"><p id="p129235563190"><a name="p129235563190"></a><a name="p129235563190"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.509999999999998%" id="mcps1.1.6.1.4"><p id="p1594681182016"><a name="p1594681182016"></a><a name="p1594681182016"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p13361103733012"><a name="p13361103733012"></a><a name="p13361103733012"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row5362163783010"><td class="cellrowborder" valign="top" width="23.26%" headers="mcps1.1.6.1.1 "><p id="p03621937153018"><a name="p03621937153018"></a><a name="p03621937153018"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.12%" headers="mcps1.1.6.1.2 "><p id="p18362637123017"><a name="p18362637123017"></a><a name="p18362637123017"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.6%" headers="mcps1.1.6.1.3 "><p id="p17923195614192"><a name="p17923195614192"></a><a name="p17923195614192"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.509999999999998%" headers="mcps1.1.6.1.4 "><p id="p694661132019"><a name="p694661132019"></a><a name="p694661132019"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p93621037183013"><a name="p93621037183013"></a><a name="p93621037183013"></a>X-axis translation</p>
-    </td>
-    </tr>
-    <tr id="row4362037133012"><td class="cellrowborder" valign="top" width="23.26%" headers="mcps1.1.6.1.1 "><p id="p1936213710301"><a name="p1936213710301"></a><a name="p1936213710301"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.12%" headers="mcps1.1.6.1.2 "><p id="p936253712309"><a name="p936253712309"></a><a name="p936253712309"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.6%" headers="mcps1.1.6.1.3 "><p id="p139231456161915"><a name="p139231456161915"></a><a name="p139231456161915"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.509999999999998%" headers="mcps1.1.6.1.4 "><p id="p11946212202"><a name="p11946212202"></a><a name="p11946212202"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p143621037153019"><a name="p143621037153019"></a><a name="p143621037153019"></a>Y-axis translation.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct Translate {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.fillRect(10, 10, 50, 50)
-              this.offContext.translate(70, 70)
-              this.offContext.fillRect(10, 10, 50, 50)
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes | 0 | X-axis&nbsp;translation. | 
+  | y | number | Yes | 0 | Y-axis&nbsp;translation. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct Translate {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.fillRect(10, 10, 50, 50)
+            this.offContext.translate(70, 70)
+            this.offContext.fillRect(10, 10, 50, 50)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+  ```
+
+  ![en-us_image_0000001256978373](figures/en-us_image_0000001256978373.png)
+
+
+### drawImage
+
+drawImage(image: ImageBitmap, dx: number, dy: number): void
+
+drawImage(image: ImageBitmap, dx: number, dy: number, dWidth: number, dHeight: number): void
+
+drawImage(image: ImageBitmap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void
+
+Draws an image.
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | image | [ERROR:Invalid&nbsp;link:en-us_topic_0000001212218420.xml#en-us_topic_0000001192595178_xref2365443135017,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml) | Yes | null | Image&nbsp;resource.&nbsp;For&nbsp;details,&nbsp;see&nbsp;[ERROR:Invalid&nbsp;link:en-us_topic_0000001212218420.xml#xref10476113612499,link:en-us_topic_0000001192915114.xml](en-us_topic_0000001192915114.xml). | 
+  | sx | number | No | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;used&nbsp;to&nbsp;crop&nbsp;the&nbsp;source&nbsp;image. | 
+  | sy | number | No | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;used&nbsp;to&nbsp;crop&nbsp;the&nbsp;source&nbsp;image. | 
+  | sWidth | number | No | 0 | Target&nbsp;width&nbsp;to&nbsp;crop&nbsp;the&nbsp;source&nbsp;image. | 
+  | sHeight | number | No | 0 | Target&nbsp;height&nbsp;to&nbsp;crop&nbsp;the&nbsp;source&nbsp;image. | 
+  | dx | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;drawing&nbsp;area&nbsp;on&nbsp;the&nbsp;canvas. | 
+  | dy | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;drawing&nbsp;area&nbsp;on&nbsp;the&nbsp;canvas. | 
+  | dWidth | number | No | 0 | Width&nbsp;of&nbsp;the&nbsp;drawing&nbsp;area. | 
+  | dHeight | number | No | 0 | Height&nbsp;of&nbsp;the&nbsp;drawing&nbsp;area. | 
+
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct Index {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
         .width('100%')
         .height('100%')
+        .backgroundColor('#ffff00')
+        .onReady(() => {
+            this.offContext.drawImage( this.img,0,0,400,200)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+        })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001237475137.png)
+  ![en-us_image_0000001256978377](figures/en-us_image_0000001256978377.png)
 
 
-### drawImage<a name="section1089821044417"></a>
+### createImageData
 
-drawImage\(image: ImageBitmap, dx: number, dy: number\): void
+createImageData(width: number, height: number): Object
 
-drawImage\(image: ImageBitmap, dx: number, dy: number, dWidth: number, dHeight: number\): void
+Creates an **ImageData** object based on the specified width and height. For details, see [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md).
 
-drawImage\(image: ImageBitmap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number\):void
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | width | number | Yes | 0 | Width&nbsp;of&nbsp;the&nbsp;**ImageData**&nbsp;object. | 
+  | height | number | Yes | 0 | Height&nbsp;of&nbsp;the&nbsp;**ImageData**&nbsp;object. | 
 
-Draws an image.
 
--   Parameters
-
-    <a name="table045918133582"></a>
-    <table><thead align="left"><tr id="row846011136587"><th class="cellrowborder" valign="top" width="18.47%" id="mcps1.1.6.1.1"><p id="p18460201355812"><a name="p18460201355812"></a><a name="p18460201355812"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="23.73%" id="mcps1.1.6.1.2"><p id="p1846017136587"><a name="p1846017136587"></a><a name="p1846017136587"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.879999999999999%" id="mcps1.1.6.1.3"><p id="p1846013130587"><a name="p1846013130587"></a><a name="p1846013130587"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="14.41%" id="mcps1.1.6.1.4"><p id="p8460313155815"><a name="p8460313155815"></a><a name="p8460313155815"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p16460613175816"><a name="p16460613175816"></a><a name="p16460613175816"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row8461131317581"><td class="cellrowborder" valign="top" width="18.47%" headers="mcps1.1.6.1.1 "><p id="p746151311580"><a name="p746151311580"></a><a name="p746151311580"></a>image</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.73%" headers="mcps1.1.6.1.2 "><p id="p736519439501"><a name="p736519439501"></a><a name="p736519439501"></a><a href="ts-components-canvas-imagebitmap.md">ImageBitmap</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.879999999999999%" headers="mcps1.1.6.1.3 "><p id="p746151385819"><a name="p746151385819"></a><a name="p746151385819"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.4 "><p id="p7461111311585"><a name="p7461111311585"></a><a name="p7461111311585"></a>null</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p84611713175816"><a name="p84611713175816"></a><a name="p84611713175816"></a>Image resource. For details, see <a href="ts-components-canvas-imagebitmap.md">ImageBitmap</a>.</p>
-    </td>
-    </tr>
-    <tr id="row14461111355814"><td class="cellrowborder" valign="top" width="18.47%" headers="mcps1.1.6.1.1 "><p id="p11461161316582"><a name="p11461161316582"></a><a name="p11461161316582"></a>sx</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.73%" headers="mcps1.1.6.1.2 "><p id="p10461121345810"><a name="p10461121345810"></a><a name="p10461121345810"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.879999999999999%" headers="mcps1.1.6.1.3 "><p id="p346220131588"><a name="p346220131588"></a><a name="p346220131588"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.4 "><p id="p34621413135811"><a name="p34621413135811"></a><a name="p34621413135811"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p74628135580"><a name="p74628135580"></a><a name="p74628135580"></a>X-coordinate of the upper left corner of the rectangle used to crop the source image.</p>
-    </td>
-    </tr>
-    <tr id="row12462191314583"><td class="cellrowborder" valign="top" width="18.47%" headers="mcps1.1.6.1.1 "><p id="p8462121315816"><a name="p8462121315816"></a><a name="p8462121315816"></a>sy</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.73%" headers="mcps1.1.6.1.2 "><p id="p746213132582"><a name="p746213132582"></a><a name="p746213132582"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.879999999999999%" headers="mcps1.1.6.1.3 "><p id="p16462121311585"><a name="p16462121311585"></a><a name="p16462121311585"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.4 "><p id="p1246381335814"><a name="p1246381335814"></a><a name="p1246381335814"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p20463151311581"><a name="p20463151311581"></a><a name="p20463151311581"></a>Y-coordinate of the upper left corner of the rectangle used to crop the source image.</p>
-    </td>
-    </tr>
-    <tr id="row646331317589"><td class="cellrowborder" valign="top" width="18.47%" headers="mcps1.1.6.1.1 "><p id="p18463191335817"><a name="p18463191335817"></a><a name="p18463191335817"></a>sWidth</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.73%" headers="mcps1.1.6.1.2 "><p id="p446331315583"><a name="p446331315583"></a><a name="p446331315583"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.879999999999999%" headers="mcps1.1.6.1.3 "><p id="p20463171320581"><a name="p20463171320581"></a><a name="p20463171320581"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.4 "><p id="p6463161318581"><a name="p6463161318581"></a><a name="p6463161318581"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p14635139588"><a name="p14635139588"></a><a name="p14635139588"></a>Target width to crop the source image.</p>
-    </td>
-    </tr>
-    <tr id="row1646318132587"><td class="cellrowborder" valign="top" width="18.47%" headers="mcps1.1.6.1.1 "><p id="p646451355810"><a name="p646451355810"></a><a name="p646451355810"></a>sHeight</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.73%" headers="mcps1.1.6.1.2 "><p id="p4464913115814"><a name="p4464913115814"></a><a name="p4464913115814"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.879999999999999%" headers="mcps1.1.6.1.3 "><p id="p20464113165812"><a name="p20464113165812"></a><a name="p20464113165812"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.4 "><p id="p246481311582"><a name="p246481311582"></a><a name="p246481311582"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1546421365813"><a name="p1546421365813"></a><a name="p1546421365813"></a>Target height to crop the source image.</p>
-    </td>
-    </tr>
-    <tr id="row446451375813"><td class="cellrowborder" valign="top" width="18.47%" headers="mcps1.1.6.1.1 "><p id="p1946411335816"><a name="p1946411335816"></a><a name="p1946411335816"></a>dx</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.73%" headers="mcps1.1.6.1.2 "><p id="p8465151313589"><a name="p8465151313589"></a><a name="p8465151313589"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.879999999999999%" headers="mcps1.1.6.1.3 "><p id="p3465181310587"><a name="p3465181310587"></a><a name="p3465181310587"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.4 "><p id="p10465913155814"><a name="p10465913155814"></a><a name="p10465913155814"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p14465813115813"><a name="p14465813115813"></a><a name="p14465813115813"></a>X-coordinate of the upper left corner of the drawing area on the canvas.</p>
-    </td>
-    </tr>
-    <tr id="row12465513195815"><td class="cellrowborder" valign="top" width="18.47%" headers="mcps1.1.6.1.1 "><p id="p1465201313585"><a name="p1465201313585"></a><a name="p1465201313585"></a>dy</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.73%" headers="mcps1.1.6.1.2 "><p id="p74651135580"><a name="p74651135580"></a><a name="p74651135580"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.879999999999999%" headers="mcps1.1.6.1.3 "><p id="p64651613205817"><a name="p64651613205817"></a><a name="p64651613205817"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.4 "><p id="p1546614137582"><a name="p1546614137582"></a><a name="p1546614137582"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p3466161325816"><a name="p3466161325816"></a><a name="p3466161325816"></a>Y-coordinate of the upper left corner of the drawing area on the canvas.</p>
-    </td>
-    </tr>
-    <tr id="row12466313185817"><td class="cellrowborder" valign="top" width="18.47%" headers="mcps1.1.6.1.1 "><p id="p144661313155813"><a name="p144661313155813"></a><a name="p144661313155813"></a>dWidth</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.73%" headers="mcps1.1.6.1.2 "><p id="p24661613155810"><a name="p24661613155810"></a><a name="p24661613155810"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.879999999999999%" headers="mcps1.1.6.1.3 "><p id="p104661013135816"><a name="p104661013135816"></a><a name="p104661013135816"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.4 "><p id="p144665133586"><a name="p144665133586"></a><a name="p144665133586"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p046671314587"><a name="p046671314587"></a><a name="p046671314587"></a>Width of the drawing area.</p>
-    </td>
-    </tr>
-    <tr id="row1467181325811"><td class="cellrowborder" valign="top" width="18.47%" headers="mcps1.1.6.1.1 "><p id="p18467191355819"><a name="p18467191355819"></a><a name="p18467191355819"></a>dHeight</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.73%" headers="mcps1.1.6.1.2 "><p id="p1246712138583"><a name="p1246712138583"></a><a name="p1246712138583"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.879999999999999%" headers="mcps1.1.6.1.3 "><p id="p184678132583"><a name="p184678132583"></a><a name="p184678132583"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="14.41%" headers="mcps1.1.6.1.4 "><p id="p4467813175813"><a name="p4467813175813"></a><a name="p4467813175813"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p144671913115820"><a name="p144671913115820"></a><a name="p144671913115820"></a>Height of the drawing area.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct Index {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
+### createImageData
+
+createImageData(imageData: ImageData): Object
+
+Creates an **ImageData** object by copying an existing **ImageData** object. For details, see [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md).
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | imagedata | [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md) | Yes | null | **ImageData**&nbsp;object&nbsp;to&nbsp;copy. | 
+
+
+### getImageData
+
+getImageData(sx: number, sy: number, sw: number, sh: number): Object
+
+Creates an [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md) object with pixels in the specified area on the canvas.
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | sx | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;output&nbsp;area. | 
+  | sy | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;output&nbsp;area. | 
+  | sw | number | Yes | 0 | Width&nbsp;of&nbsp;the&nbsp;output&nbsp;area. | 
+  | sh | number | Yes | 0 | Height&nbsp;of&nbsp;the&nbsp;output&nbsp;area. | 
+
+
+### putImageData
+
+putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number): void
+
+Puts the [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md) onto a rectangular area on the canvas.
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | imagedata | Object | Yes | null | **ImageData**&nbsp;object&nbsp;with&nbsp;pixels&nbsp;to&nbsp;put&nbsp;onto&nbsp;the&nbsp;canvas. | 
+  | dx | number | Yes | 0 | X-axis&nbsp;offset&nbsp;of&nbsp;the&nbsp;rectangular&nbsp;area&nbsp;on&nbsp;the&nbsp;canvas. | 
+  | dy | number | Yes | 0 | Y-axis&nbsp;offset&nbsp;of&nbsp;the&nbsp;rectangular&nbsp;area&nbsp;on&nbsp;the&nbsp;canvas. | 
+  | dirtyX | number | No | 0 | X-axis&nbsp;offset&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangular&nbsp;area&nbsp;relative&nbsp;to&nbsp;that&nbsp;of&nbsp;the&nbsp;source&nbsp;image. | 
+  | dirtyY | number | No | 0 | Y-axis&nbsp;offset&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangular&nbsp;area&nbsp;relative&nbsp;to&nbsp;that&nbsp;of&nbsp;the&nbsp;source&nbsp;image. | 
+  | dirtyWidth | number | No | Width&nbsp;of&nbsp;the&nbsp;**ImageData**&nbsp;object | Width&nbsp;of&nbsp;the&nbsp;rectangular&nbsp;area&nbsp;to&nbsp;crop&nbsp;the&nbsp;source&nbsp;image. | 
+  | dirtyHeight | number | No | Height&nbsp;of&nbsp;the&nbsp;**ImageData**&nbsp;object | Height&nbsp;of&nbsp;the&nbsp;rectangular&nbsp;area&nbsp;to&nbsp;crop&nbsp;the&nbsp;source&nbsp;image. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct PutImageData {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
           .width('100%')
           .height('100%')
           .backgroundColor('#ffff00')
-          .onReady(() => {
-              this.offContext.drawImage( this.img,0,0,400,200)
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
+          .onReady(() =>{
+            var imageData = this.offContext.createImageData(100, 100)
+            for (var i = 0; i < imageData.data.length; i += 4) {
+              imageData.data[i + 0] = 255
+              imageData.data[i + 1] = 0
+              imageData.data[i + 2] = 255
+              imageData.data[i + 3] = 255
+            }
+            this.offContext.putImageData(imageData, 10, 10)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
           })
-        }
-        .width('100%')
-        .height('100%')
-      }
-    }
-    ```
-
-    ![](figures/en-us_image_0000001192915180.png)
-
-
-### createImageData<a name="section678933317459"></a>
-
-createImageData\(width: number, height: number\): Object
-
-Creates an  **ImageData**  object based on the specified width and height. For details, see  [ImageData](ts-components-canvas-imagedata.md).
-
--   Parameters
-
-    <a name="table1315461283811"></a>
-    <table><thead align="left"><tr id="row1015231243811"><th class="cellrowborder" valign="top" width="28.512851285128516%" id="mcps1.1.6.1.1"><p id="p7152312153810"><a name="p7152312153810"></a><a name="p7152312153810"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.521652165216523%" id="mcps1.1.6.1.2"><p id="p1015261263817"><a name="p1015261263817"></a><a name="p1015261263817"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.49094909490949%" id="mcps1.1.6.1.3"><p id="p29247427221"><a name="p29247427221"></a><a name="p29247427221"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.16161616161616%" id="mcps1.1.6.1.4"><p id="p15522134752214"><a name="p15522134752214"></a><a name="p15522134752214"></a>Default</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="29.312931293129314%" id="mcps1.1.6.1.5"><p id="p9152712143812"><a name="p9152712143812"></a><a name="p9152712143812"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row815320122384"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p61525123383"><a name="p61525123383"></a><a name="p61525123383"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.521652165216523%" headers="mcps1.1.6.1.2 "><p id="p10153151283815"><a name="p10153151283815"></a><a name="p10153151283815"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.49094909490949%" headers="mcps1.1.6.1.3 "><p id="p12924164242215"><a name="p12924164242215"></a><a name="p12924164242215"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.16161616161616%" headers="mcps1.1.6.1.4 "><p id="p6522144762218"><a name="p6522144762218"></a><a name="p6522144762218"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p1315331263812"><a name="p1315331263812"></a><a name="p1315331263812"></a>Width of the <strong id="b496370509"><a name="b496370509"></a><a name="b496370509"></a>ImageData</strong> object.</p>
-    </td>
-    </tr>
-    <tr id="row121531812153813"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p4153141214385"><a name="p4153141214385"></a><a name="p4153141214385"></a>height</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.521652165216523%" headers="mcps1.1.6.1.2 "><p id="p01531212143810"><a name="p01531212143810"></a><a name="p01531212143810"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.49094909490949%" headers="mcps1.1.6.1.3 "><p id="p1492413424226"><a name="p1492413424226"></a><a name="p1492413424226"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.16161616161616%" headers="mcps1.1.6.1.4 "><p id="p152274715224"><a name="p152274715224"></a><a name="p152274715224"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p3153131217382"><a name="p3153131217382"></a><a name="p3153131217382"></a>Height of the <strong id="b2052617314013"><a name="b2052617314013"></a><a name="b2052617314013"></a>ImageData</strong> object.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-### createImageData<a name="section4401128204610"></a>
-
-createImageData\(imageData: ImageData\): Object
-
-Creates an  **ImageData**  object by copying an existing  **ImageData**  object. For details, see  [ImageData](ts-components-canvas-imagedata.md).
-
--   Parameters
-
-    <a name="table1376617177461"></a>
-    <table><thead align="left"><tr id="row476771711469"><th class="cellrowborder" valign="top" width="28.512851285128516%" id="mcps1.1.6.1.1"><p id="p13767131714620"><a name="p13767131714620"></a><a name="p13767131714620"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.521652165216523%" id="mcps1.1.6.1.2"><p id="p376751724611"><a name="p376751724611"></a><a name="p376751724611"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.49094909490949%" id="mcps1.1.6.1.3"><p id="p1876751718462"><a name="p1876751718462"></a><a name="p1876751718462"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.16161616161616%" id="mcps1.1.6.1.4"><p id="p1976701744613"><a name="p1976701744613"></a><a name="p1976701744613"></a>Default</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="29.312931293129314%" id="mcps1.1.6.1.5"><p id="p1276841724620"><a name="p1276841724620"></a><a name="p1276841724620"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1677141717462"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p377131712467"><a name="p377131712467"></a><a name="p377131712467"></a>imagedata</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.521652165216523%" headers="mcps1.1.6.1.2 "><p id="p1777191734616"><a name="p1777191734616"></a><a name="p1777191734616"></a><a href="ts-components-canvas-imagedata.md">ImageData</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.49094909490949%" headers="mcps1.1.6.1.3 "><p id="p6772417114619"><a name="p6772417114619"></a><a name="p6772417114619"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.16161616161616%" headers="mcps1.1.6.1.4 "><p id="p1377217176463"><a name="p1377217176463"></a><a name="p1377217176463"></a>null</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p11772161744612"><a name="p11772161744612"></a><a name="p11772161744612"></a><strong id="b16238654192510"><a name="b16238654192510"></a><a name="b16238654192510"></a>ImageData</strong> object to copy.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-### getImageData<a name="section2513124310460"></a>
-
-getImageData\(sx: number, sy: number, sw: number, sh: number\): Object
-
-Creates an  [ImageData](ts-components-canvas-imagedata.md)  object with pixels in the specified area on the canvas.
-
--   Parameters
-
-    <a name="table03551423182717"></a>
-    <table><thead align="left"><tr id="row23561523152710"><th class="cellrowborder" valign="top" width="28.51000000000001%" id="mcps1.1.6.1.1"><p id="p1335652312713"><a name="p1335652312713"></a><a name="p1335652312713"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.960000000000004%" id="mcps1.1.6.1.2"><p id="p0356182332717"><a name="p0356182332717"></a><a name="p0356182332717"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.63%" id="mcps1.1.6.1.3"><p id="p1043529172512"><a name="p1043529172512"></a><a name="p1043529172512"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.39%" id="mcps1.1.6.1.4"><p id="p17308333182513"><a name="p17308333182513"></a><a name="p17308333182513"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51000000000001%" id="mcps1.1.6.1.5"><p id="p12356723122713"><a name="p12356723122713"></a><a name="p12356723122713"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1435692342711"><td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.1 "><p id="p8356223102718"><a name="p8356223102718"></a><a name="p8356223102718"></a>sx</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.960000000000004%" headers="mcps1.1.6.1.2 "><p id="p14357142313278"><a name="p14357142313278"></a><a name="p14357142313278"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.63%" headers="mcps1.1.6.1.3 "><p id="p74332962510"><a name="p74332962510"></a><a name="p74332962510"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.39%" headers="mcps1.1.6.1.4 "><p id="p8308133102515"><a name="p8308133102515"></a><a name="p8308133102515"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.5 "><p id="p1357923192710"><a name="p1357923192710"></a><a name="p1357923192710"></a>X-coordinate of the upper left corner of the output area.</p>
-    </td>
-    </tr>
-    <tr id="row7357142352712"><td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.1 "><p id="p4357172313279"><a name="p4357172313279"></a><a name="p4357172313279"></a>sy</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.960000000000004%" headers="mcps1.1.6.1.2 "><p id="p133571523152710"><a name="p133571523152710"></a><a name="p133571523152710"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.63%" headers="mcps1.1.6.1.3 "><p id="p1943162918254"><a name="p1943162918254"></a><a name="p1943162918254"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.39%" headers="mcps1.1.6.1.4 "><p id="p19308153312519"><a name="p19308153312519"></a><a name="p19308153312519"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.5 "><p id="p18357152311271"><a name="p18357152311271"></a><a name="p18357152311271"></a>Y-coordinate of the upper left corner of the output area.</p>
-    </td>
-    </tr>
-    <tr id="row83571223112712"><td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.1 "><p id="p12358132313275"><a name="p12358132313275"></a><a name="p12358132313275"></a>sw</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.960000000000004%" headers="mcps1.1.6.1.2 "><p id="p18358123162711"><a name="p18358123162711"></a><a name="p18358123162711"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.63%" headers="mcps1.1.6.1.3 "><p id="p174312296257"><a name="p174312296257"></a><a name="p174312296257"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.39%" headers="mcps1.1.6.1.4 "><p id="p3308203382517"><a name="p3308203382517"></a><a name="p3308203382517"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.5 "><p id="p1035842332715"><a name="p1035842332715"></a><a name="p1035842332715"></a>Width of the output area.</p>
-    </td>
-    </tr>
-    <tr id="row113588236273"><td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.1 "><p id="p8358142392715"><a name="p8358142392715"></a><a name="p8358142392715"></a>sh</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.960000000000004%" headers="mcps1.1.6.1.2 "><p id="p435882352717"><a name="p435882352717"></a><a name="p435882352717"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.63%" headers="mcps1.1.6.1.3 "><p id="p194352972513"><a name="p194352972513"></a><a name="p194352972513"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.39%" headers="mcps1.1.6.1.4 "><p id="p13308333172514"><a name="p13308333172514"></a><a name="p13308333172514"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51000000000001%" headers="mcps1.1.6.1.5 "><p id="p1335832316271"><a name="p1335832316271"></a><a name="p1335832316271"></a>Height of the output area.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-### putImageData<a name="section510051774711"></a>
-
-putImageData\(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number\): void
-
-Puts the  [ImageData](ts-components-canvas-imagedata.md)  onto a rectangular area on the canvas.
-
--   Parameters
-
-    <a name="table1140093817271"></a>
-    <table><thead align="left"><tr id="row1400738152714"><th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.1"><p id="p1340073812276"><a name="p1340073812276"></a><a name="p1340073812276"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.96%" id="mcps1.1.6.1.2"><p id="p1740033816275"><a name="p1740033816275"></a><a name="p1740033816275"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.24%" id="mcps1.1.6.1.3"><p id="p097033012619"><a name="p097033012619"></a><a name="p097033012619"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="15.78%" id="mcps1.1.6.1.4"><p id="p38681535192616"><a name="p38681535192616"></a><a name="p38681535192616"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="28.51%" id="mcps1.1.6.1.5"><p id="p740143832713"><a name="p740143832713"></a><a name="p740143832713"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row940163812710"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p64019386271"><a name="p64019386271"></a><a name="p64019386271"></a>imagedata</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.2 "><p id="p114011138132714"><a name="p114011138132714"></a><a name="p114011138132714"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.24%" headers="mcps1.1.6.1.3 "><p id="p1497063018261"><a name="p1497063018261"></a><a name="p1497063018261"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.78%" headers="mcps1.1.6.1.4 "><p id="p9868335182611"><a name="p9868335182611"></a><a name="p9868335182611"></a>null</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p8401173882716"><a name="p8401173882716"></a><a name="p8401173882716"></a><strong id="b46823353268"><a name="b46823353268"></a><a name="b46823353268"></a>ImageData</strong> object with pixels to put onto the canvas.</p>
-    </td>
-    </tr>
-    <tr id="row54014381278"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p184021338132711"><a name="p184021338132711"></a><a name="p184021338132711"></a>dx</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.2 "><p id="p540223872716"><a name="p540223872716"></a><a name="p540223872716"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.24%" headers="mcps1.1.6.1.3 "><p id="p697114305261"><a name="p697114305261"></a><a name="p697114305261"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.78%" headers="mcps1.1.6.1.4 "><p id="p14868635132618"><a name="p14868635132618"></a><a name="p14868635132618"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p174021238172710"><a name="p174021238172710"></a><a name="p174021238172710"></a>X-axis offset of the rectangular area on the canvas.</p>
-    </td>
-    </tr>
-    <tr id="row184027380274"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p174021738192710"><a name="p174021738192710"></a><a name="p174021738192710"></a>dy</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.2 "><p id="p204022386272"><a name="p204022386272"></a><a name="p204022386272"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.24%" headers="mcps1.1.6.1.3 "><p id="p9971133042616"><a name="p9971133042616"></a><a name="p9971133042616"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.78%" headers="mcps1.1.6.1.4 "><p id="p7868435132615"><a name="p7868435132615"></a><a name="p7868435132615"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p184021438162711"><a name="p184021438162711"></a><a name="p184021438162711"></a>Y-axis offset of the rectangular area on the canvas.</p>
-    </td>
-    </tr>
-    <tr id="row940213892715"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p194031938102716"><a name="p194031938102716"></a><a name="p194031938102716"></a>dirtyX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.2 "><p id="p24034381275"><a name="p24034381275"></a><a name="p24034381275"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.24%" headers="mcps1.1.6.1.3 "><p id="p497153042619"><a name="p497153042619"></a><a name="p497153042619"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.78%" headers="mcps1.1.6.1.4 "><p id="p88681635102617"><a name="p88681635102617"></a><a name="p88681635102617"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p140363822713"><a name="p140363822713"></a><a name="p140363822713"></a>X-axis offset of the upper left corner of the rectangular area relative to that of the source image.</p>
-    </td>
-    </tr>
-    <tr id="row114031538202712"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p1740393862716"><a name="p1740393862716"></a><a name="p1740393862716"></a>dirtyY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.2 "><p id="p3403143862714"><a name="p3403143862714"></a><a name="p3403143862714"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.24%" headers="mcps1.1.6.1.3 "><p id="p09711030182613"><a name="p09711030182613"></a><a name="p09711030182613"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.78%" headers="mcps1.1.6.1.4 "><p id="p486853552613"><a name="p486853552613"></a><a name="p486853552613"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p74045383271"><a name="p74045383271"></a><a name="p74045383271"></a>Y-axis offset of the upper left corner of the rectangular area relative to that of the source image.</p>
-    </td>
-    </tr>
-    <tr id="row340443882716"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p124041738162713"><a name="p124041738162713"></a><a name="p124041738162713"></a>dirtyWidth</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.2 "><p id="p0404238182716"><a name="p0404238182716"></a><a name="p0404238182716"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.24%" headers="mcps1.1.6.1.3 "><p id="p109711230182618"><a name="p109711230182618"></a><a name="p109711230182618"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.78%" headers="mcps1.1.6.1.4 "><p id="p5868435102615"><a name="p5868435102615"></a><a name="p5868435102615"></a>Width of the <strong id="b674474482611"><a name="b674474482611"></a><a name="b674474482611"></a>ImageData</strong> object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p1840403813271"><a name="p1840403813271"></a><a name="p1840403813271"></a>Width of the rectangular area to crop the source image.</p>
-    </td>
-    </tr>
-    <tr id="row1640417387275"><td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.1 "><p id="p94041238122716"><a name="p94041238122716"></a><a name="p94041238122716"></a>dirtyHeight</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.96%" headers="mcps1.1.6.1.2 "><p id="p14040385271"><a name="p14040385271"></a><a name="p14040385271"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.24%" headers="mcps1.1.6.1.3 "><p id="p59711930142612"><a name="p59711930142612"></a><a name="p59711930142612"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.78%" headers="mcps1.1.6.1.4 "><p id="p1486815355264"><a name="p1486815355264"></a><a name="p1486815355264"></a>Height of the <strong id="b2070135114264"><a name="b2070135114264"></a><a name="b2070135114264"></a>ImageData</strong> object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="28.51%" headers="mcps1.1.6.1.5 "><p id="p84051382278"><a name="p84051382278"></a><a name="p84051382278"></a>Height of the rectangular area to crop the source image.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct PutImageData {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              var imageData = this.offContext.createImageData(100, 100)
-              for (var i = 0; i < imageData.data.length; i += 4) {
-                imageData.data[i + 0] = 255
-                imageData.data[i + 1] = 0
-                imageData.data[i + 2] = 255
-                imageData.data[i + 3] = 255
-              }
-              this.offContext.putImageData(imageData, 10, 10)
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
-    ![](figures/en-us_image_0000001193075170.png)
+  ![en-us_image_0000001212058496](figures/en-us_image_0000001212058496.png)
 
 
-### restore<a name="section101561815489"></a>
+### restore
 
-restore\(\): void
+restore(): void
 
 Restores the saved drawing context.
 
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct CanvasExample {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.restore()
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct CanvasExample {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.restore()
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
 
-### save<a name="section122921438154815"></a>
+### save
 
-save\(\): void
+save(): void
 
 Saves the current drawing context.
 
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct Restore {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              this.offContext.save()
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-          })
-        }
-        .width('100%')
-        .height('100%')
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct CanvasExample {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.save()
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+        })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
+  }
+  ```
 
 
-### createLinearGradient<a name="section14582213497"></a>
+### createLinearGradient
 
-createLinearGradient\(x0: number, y0: number, x1: number, y1: number\): void
+createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
 
 Creates a linear gradient.
 
--   Parameters
-
-    <a name="table138621614535"></a>
-    <table><thead align="left"><tr id="row985101685315"><th class="cellrowborder" valign="top" width="28.512851285128516%" id="mcps1.1.6.1.1"><p id="p48411169533"><a name="p48411169533"></a><a name="p48411169533"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.641664166416643%" id="mcps1.1.6.1.2"><p id="p184716145317"><a name="p184716145317"></a><a name="p184716145317"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.02120212021202%" id="mcps1.1.6.1.3"><p id="p1164517478287"><a name="p1164517478287"></a><a name="p1164517478287"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.511351135113511%" id="mcps1.1.6.1.4"><p id="p5988953122811"><a name="p5988953122811"></a><a name="p5988953122811"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="29.312931293129314%" id="mcps1.1.6.1.5"><p id="p88541613538"><a name="p88541613538"></a><a name="p88541613538"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row188512161533"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p1785141695316"><a name="p1785141695316"></a><a name="p1785141695316"></a>x0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.641664166416643%" headers="mcps1.1.6.1.2 "><p id="p88581645314"><a name="p88581645314"></a><a name="p88581645314"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.02120212021202%" headers="mcps1.1.6.1.3 "><p id="p11645154732816"><a name="p11645154732816"></a><a name="p11645154732816"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.511351135113511%" headers="mcps1.1.6.1.4 "><p id="p3988175311285"><a name="p3988175311285"></a><a name="p3988175311285"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p685216145320"><a name="p685216145320"></a><a name="p685216145320"></a>X-coordinate of the start point.</p>
-    </td>
-    </tr>
-    <tr id="row12851816185311"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p1985191655315"><a name="p1985191655315"></a><a name="p1985191655315"></a>y0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.641664166416643%" headers="mcps1.1.6.1.2 "><p id="p1085171618532"><a name="p1085171618532"></a><a name="p1085171618532"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.02120212021202%" headers="mcps1.1.6.1.3 "><p id="p1464516471281"><a name="p1464516471281"></a><a name="p1464516471281"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.511351135113511%" headers="mcps1.1.6.1.4 "><p id="p49887536287"><a name="p49887536287"></a><a name="p49887536287"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p3852166531"><a name="p3852166531"></a><a name="p3852166531"></a>Y-coordinate of the start point.</p>
-    </td>
-    </tr>
-    <tr id="row188511168531"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p178518163533"><a name="p178518163533"></a><a name="p178518163533"></a>x1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.641664166416643%" headers="mcps1.1.6.1.2 "><p id="p78571611530"><a name="p78571611530"></a><a name="p78571611530"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.02120212021202%" headers="mcps1.1.6.1.3 "><p id="p264574762811"><a name="p264574762811"></a><a name="p264574762811"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.511351135113511%" headers="mcps1.1.6.1.4 "><p id="p189886531283"><a name="p189886531283"></a><a name="p189886531283"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p78501665319"><a name="p78501665319"></a><a name="p78501665319"></a>X-coordinate of the end point.</p>
-    </td>
-    </tr>
-    <tr id="row586121665311"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p1685101614536"><a name="p1685101614536"></a><a name="p1685101614536"></a>y1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.641664166416643%" headers="mcps1.1.6.1.2 "><p id="p4862163539"><a name="p4862163539"></a><a name="p4862163539"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.02120212021202%" headers="mcps1.1.6.1.3 "><p id="p15645547102815"><a name="p15645547102815"></a><a name="p15645547102815"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.511351135113511%" headers="mcps1.1.6.1.4 "><p id="p14988353142810"><a name="p14988353142810"></a><a name="p14988353142810"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p986121685316"><a name="p986121685316"></a><a name="p986121685316"></a>Y-coordinate of the end point.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct CreateLinearGradient {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              var grad = this.offContext.createLinearGradient(50,0, 300,100)
-              gra.addColorStop(0.0, 'red')
-              gra.addColorStop(0.5, 'white')
-              gra.addColorStop(1.0, 'green')
-              this.offContext.fillStyle = grad
-              this.offContext.fillRect(0, 0, 500, 500)
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x0 | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;start&nbsp;point. | 
+  | y0 | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;start&nbsp;point. | 
+  | x1 | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;end&nbsp;point. | 
+  | y1 | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;end&nbsp;point. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct CreateLinearGradient {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            var grad = this.offContext.createLinearGradient(50,0, 300,100)
+            this.grad.addColorStop(0.0, 'red')
+            this.grad.addColorStop(0.5, 'white')
+            this.grad.addColorStop(1.0, 'green')
+            this.offContext.fillStyle = grad
+            this.offContext.fillRect(0, 0, 500, 500)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
-    
-![](figures/en-us_image_0000001192915162.png)
+  }
+  ```
+
+  ![en-us_image_0000001212378434](figures/en-us_image_0000001212378434.png)
 
 
-### createRadialGradient<a name="section136731637204919"></a>
+### createRadialGradient
 
-createRadialGradient\(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number\): void
+createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): void
 
 Creates a linear gradient.
 
--   Parameters
-
-    <a name="table14083215541"></a>
-    <table><thead align="left"><tr id="row5388326541"><th class="cellrowborder" valign="top" width="28.512851285128516%" id="mcps1.1.6.1.1"><p id="p113753285412"><a name="p113753285412"></a><a name="p113753285412"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="17.25172517251725%" id="mcps1.1.6.1.2"><p id="p163711328546"><a name="p163711328546"></a><a name="p163711328546"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.931193119311931%" id="mcps1.1.6.1.3"><p id="p47877337291"><a name="p47877337291"></a><a name="p47877337291"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.991299129912989%" id="mcps1.1.6.1.4"><p id="p1751720443295"><a name="p1751720443295"></a><a name="p1751720443295"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="29.312931293129314%" id="mcps1.1.6.1.5"><p id="p18381032145418"><a name="p18381032145418"></a><a name="p18381032145418"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row63873215548"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p33863217543"><a name="p33863217543"></a><a name="p33863217543"></a>x0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.25172517251725%" headers="mcps1.1.6.1.2 "><p id="p83814323549"><a name="p83814323549"></a><a name="p83814323549"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.931193119311931%" headers="mcps1.1.6.1.3 "><p id="p4787123317291"><a name="p4787123317291"></a><a name="p4787123317291"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.991299129912989%" headers="mcps1.1.6.1.4 "><p id="p1451784442917"><a name="p1451784442917"></a><a name="p1451784442917"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p73823295417"><a name="p73823295417"></a><a name="p73823295417"></a>X-coordinate of the center of the start circle.</p>
-    </td>
-    </tr>
-    <tr id="row838183255414"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p1338193214546"><a name="p1338193214546"></a><a name="p1338193214546"></a>y0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.25172517251725%" headers="mcps1.1.6.1.2 "><p id="p1238832155416"><a name="p1238832155416"></a><a name="p1238832155416"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.931193119311931%" headers="mcps1.1.6.1.3 "><p id="p5787933122910"><a name="p5787933122910"></a><a name="p5787933122910"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.991299129912989%" headers="mcps1.1.6.1.4 "><p id="p15517944112912"><a name="p15517944112912"></a><a name="p15517944112912"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p338173275413"><a name="p338173275413"></a><a name="p338173275413"></a>Y-coordinate of the center of the start circle.</p>
-    </td>
-    </tr>
-    <tr id="row1539143211548"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p143893265415"><a name="p143893265415"></a><a name="p143893265415"></a>r0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.25172517251725%" headers="mcps1.1.6.1.2 "><p id="p33963213548"><a name="p33963213548"></a><a name="p33963213548"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.931193119311931%" headers="mcps1.1.6.1.3 "><p id="p107871933102913"><a name="p107871933102913"></a><a name="p107871933102913"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.991299129912989%" headers="mcps1.1.6.1.4 "><p id="p1151794422915"><a name="p1151794422915"></a><a name="p1151794422915"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p239232165411"><a name="p239232165411"></a><a name="p239232165411"></a>Radius of the start circle, which must be a non-negative finite number.</p>
-    </td>
-    </tr>
-    <tr id="row7392327549"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p73953205420"><a name="p73953205420"></a><a name="p73953205420"></a>x1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.25172517251725%" headers="mcps1.1.6.1.2 "><p id="p23913217543"><a name="p23913217543"></a><a name="p23913217543"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.931193119311931%" headers="mcps1.1.6.1.3 "><p id="p1178753312292"><a name="p1178753312292"></a><a name="p1178753312292"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.991299129912989%" headers="mcps1.1.6.1.4 "><p id="p4517544102915"><a name="p4517544102915"></a><a name="p4517544102915"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p43933210545"><a name="p43933210545"></a><a name="p43933210545"></a>X-coordinate of the center of the end circle.</p>
-    </td>
-    </tr>
-    <tr id="row1339732195410"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p839932105413"><a name="p839932105413"></a><a name="p839932105413"></a>y1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.25172517251725%" headers="mcps1.1.6.1.2 "><p id="p43910327541"><a name="p43910327541"></a><a name="p43910327541"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.931193119311931%" headers="mcps1.1.6.1.3 "><p id="p078733392919"><a name="p078733392919"></a><a name="p078733392919"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.991299129912989%" headers="mcps1.1.6.1.4 "><p id="p1151784422916"><a name="p1151784422916"></a><a name="p1151784422916"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p9391032195411"><a name="p9391032195411"></a><a name="p9391032195411"></a>Y-coordinate of the center of the end circle.</p>
-    </td>
-    </tr>
-    <tr id="row740143275410"><td class="cellrowborder" valign="top" width="28.512851285128516%" headers="mcps1.1.6.1.1 "><p id="p1440632125419"><a name="p1440632125419"></a><a name="p1440632125419"></a>r1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.25172517251725%" headers="mcps1.1.6.1.2 "><p id="p2405320545"><a name="p2405320545"></a><a name="p2405320545"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.931193119311931%" headers="mcps1.1.6.1.3 "><p id="p678713315293"><a name="p678713315293"></a><a name="p678713315293"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.991299129912989%" headers="mcps1.1.6.1.4 "><p id="p15171944172915"><a name="p15171944172915"></a><a name="p15171944172915"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="29.312931293129314%" headers="mcps1.1.6.1.5 "><p id="p240173211546"><a name="p240173211546"></a><a name="p240173211546"></a>Radius of the end circle, which must be a non-negative finite number.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Example
-
-    ```
-    @Entry
-    @Component
-    struct CreateRadialGradient {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true)
-      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-      build() {
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Canvas(this.context)
-            .width('100%')
-            .height('100%')
-            .backgroundColor('#ffff00')
-            .onReady(() =>{
-              var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200)
-              gra.addColorStop(0.0, 'red')
-              gra.addColorStop(0.5, 'white')
-              gra.addColorStop(1.0, 'green')
-              this.offContext.fillStyle = grad
-              this.offContext.fillRect(0, 0, 500, 500)
-              var image = this.offContext.transferToImageBitmap()
-              this.context.transferFromImageBitmap(image)
-            })
-        }
-        .width('100%')
-        .height('100%')
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x0 | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;of&nbsp;the&nbsp;start&nbsp;circle. | 
+  | y0 | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;of&nbsp;the&nbsp;start&nbsp;circle. | 
+  | r0 | number | Yes | 0 | Radius&nbsp;of&nbsp;the&nbsp;start&nbsp;circle,&nbsp;which&nbsp;must&nbsp;be&nbsp;a&nbsp;non-negative&nbsp;finite&nbsp;number. | 
+  | x1 | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;of&nbsp;the&nbsp;end&nbsp;circle. | 
+  | y1 | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;of&nbsp;the&nbsp;end&nbsp;circle. | 
+  | r1 | number | Yes | 0 | Radius&nbsp;of&nbsp;the&nbsp;end&nbsp;circle,&nbsp;which&nbsp;must&nbsp;be&nbsp;a&nbsp;non-negative&nbsp;finite&nbsp;number. | 
+
+- Example
+  
+  ```
+  @Entry
+  @Component
+  struct CreateRadialGradient {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200)
+            this.grad.addColorStop(0.0, 'red')
+            this.grad.addColorStop(0.5, 'white')
+            this.grad.addColorStop(1.0, 'green')
+            this.offContext.fillStyle = grad
+            this.offContext.fillRect(0, 0, 500, 500)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
       }
+      .width('100%')
+      .height('100%')
     }
-    ```
-    
-![](figures/en-us_image_0000001237555179.png)
+  }
+  ```
 
+  ![en-us_image_0000001212218480](figures/en-us_image_0000001212218480.png)
 
-## CanvasPattern<a name="section146853345417"></a>
 
-Defines an object created by using the  [createPattern](#section660873113512)  method.
+## CanvasPattern
 
+Defines an object created by using the [createPattern](#createpattern) method.
diff --git a/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md b/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md
index b1b9c60825e06db19965cf57f494c3b1216076f8..8d3972d2b697cdb68ff25ad1ae031916b729cfb7 100644
--- a/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md
+++ b/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md
@@ -1,257 +1,70 @@
-# Page Transition<a name="EN-US_TOPIC_0000001237715079"></a>
-
->![](../../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.
-
-Customize the page transition animations by configuring the page entrance and exit components in the global  **pageTransition**  method.
-
-<a name="table290mcpsimp"></a>
-<table><thead align="left"><tr id="row296mcpsimp"><th class="cellrowborder" valign="top" width="22.12%" id="mcps1.1.4.1.1"><p id="p298mcpsimp"><a name="p298mcpsimp"></a><a name="p298mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="17.31%" id="mcps1.1.4.1.2"><p id="p300mcpsimp"><a name="p300mcpsimp"></a><a name="p300mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="60.57%" id="mcps1.1.4.1.3"><p id="p302mcpsimp"><a name="p302mcpsimp"></a><a name="p302mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row303mcpsimp"><td class="cellrowborder" valign="top" width="22.12%" headers="mcps1.1.4.1.1 "><p id="p2047213614526"><a name="p2047213614526"></a><a name="p2047213614526"></a>PageTransitionEnter</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.31%" headers="mcps1.1.4.1.2 "><p id="p25634210247"><a name="p25634210247"></a><a name="p25634210247"></a>Object</p>
-</td>
-<td class="cellrowborder" valign="top" width="60.57%" headers="mcps1.1.4.1.3 "><p id="p309mcpsimp"><a name="p309mcpsimp"></a><a name="p309mcpsimp"></a>Page entrance component, which is used to customize the entrance effect of the current page. For details, see <a href="#li1947672255711">animation parameters</a>.</p>
-</td>
-</tr>
-<tr id="row310mcpsimp"><td class="cellrowborder" valign="top" width="22.12%" headers="mcps1.1.4.1.1 "><p id="p312mcpsimp"><a name="p312mcpsimp"></a><a name="p312mcpsimp"></a>PageTransitionExit</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.31%" headers="mcps1.1.4.1.2 "><p id="p229674132017"><a name="p229674132017"></a><a name="p229674132017"></a>Object</p>
-</td>
-<td class="cellrowborder" valign="top" width="60.57%" headers="mcps1.1.4.1.3 "><p id="p316mcpsimp"><a name="p316mcpsimp"></a><a name="p316mcpsimp"></a>Page exit component, which is used to customize the exit effect of the current page. For details, see <a href="#li1947672255711">animation parameters</a>.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li1947672255711"></a>Animation parameters
-
-    <a name="table5380mcpsimp"></a>
-    <table><thead align="left"><tr id="row5388mcpsimp"><th class="cellrowborder" valign="top" width="10.67961165048544%" id="mcps1.1.6.1.1"><p id="p5390mcpsimp"><a name="p5390mcpsimp"></a><a name="p5390mcpsimp"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="17.47572815533981%" id="mcps1.1.6.1.2"><p id="p5392mcpsimp"><a name="p5392mcpsimp"></a><a name="p5392mcpsimp"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.92233009708738%" id="mcps1.1.6.1.3"><p id="p5394mcpsimp"><a name="p5394mcpsimp"></a><a name="p5394mcpsimp"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.116504854368934%" id="mcps1.1.6.1.4"><p id="p5396mcpsimp"><a name="p5396mcpsimp"></a><a name="p5396mcpsimp"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="50.80582524271845%" id="mcps1.1.6.1.5"><p id="p5398mcpsimp"><a name="p5398mcpsimp"></a><a name="p5398mcpsimp"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row5399mcpsimp"><td class="cellrowborder" valign="top" width="10.67961165048544%" headers="mcps1.1.6.1.1 "><p id="p5401mcpsimp"><a name="p5401mcpsimp"></a><a name="p5401mcpsimp"></a>type</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.47572815533981%" headers="mcps1.1.6.1.2 "><p id="p5403mcpsimp"><a name="p5403mcpsimp"></a><a name="p5403mcpsimp"></a><a href="#li1364031695819">RouteType</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.92233009708738%" headers="mcps1.1.6.1.3 "><p id="p5405mcpsimp"><a name="p5405mcpsimp"></a><a name="p5405mcpsimp"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.116504854368934%" headers="mcps1.1.6.1.4 "><p id="p5407mcpsimp"><a name="p5407mcpsimp"></a><a name="p5407mcpsimp"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="50.80582524271845%" headers="mcps1.1.6.1.5 "><p id="p5409mcpsimp"><a name="p5409mcpsimp"></a><a name="p5409mcpsimp"></a>If this parameter is not set, the reverse playback effect as pop switches to push is used.</p>
-    </td>
-    </tr>
-    <tr id="row5410mcpsimp"><td class="cellrowborder" valign="top" width="10.67961165048544%" headers="mcps1.1.6.1.1 "><p id="p5412mcpsimp"><a name="p5412mcpsimp"></a><a name="p5412mcpsimp"></a>duration</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.47572815533981%" headers="mcps1.1.6.1.2 "><p id="p5414mcpsimp"><a name="p5414mcpsimp"></a><a name="p5414mcpsimp"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.92233009708738%" headers="mcps1.1.6.1.3 "><p id="p5416mcpsimp"><a name="p5416mcpsimp"></a><a name="p5416mcpsimp"></a>1000</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.116504854368934%" headers="mcps1.1.6.1.4 "><p id="p5418mcpsimp"><a name="p5418mcpsimp"></a><a name="p5418mcpsimp"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="50.80582524271845%" headers="mcps1.1.6.1.5 "><p id="p5420mcpsimp"><a name="p5420mcpsimp"></a><a name="p5420mcpsimp"></a>Animation duration, in ms.</p>
-    </td>
-    </tr>
-    <tr id="row5421mcpsimp"><td class="cellrowborder" valign="top" width="10.67961165048544%" headers="mcps1.1.6.1.1 "><p id="p5423mcpsimp"><a name="p5423mcpsimp"></a><a name="p5423mcpsimp"></a>curve</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.47572815533981%" headers="mcps1.1.6.1.2 "><p id="p5425mcpsimp"><a name="p5425mcpsimp"></a><a name="p5425mcpsimp"></a>Curve | Curves</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.92233009708738%" headers="mcps1.1.6.1.3 "><p id="p5427mcpsimp"><a name="p5427mcpsimp"></a><a name="p5427mcpsimp"></a>Linear</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.116504854368934%" headers="mcps1.1.6.1.4 "><p id="p5429mcpsimp"><a name="p5429mcpsimp"></a><a name="p5429mcpsimp"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="50.80582524271845%" headers="mcps1.1.6.1.5 "><p id="p5431mcpsimp"><a name="p5431mcpsimp"></a><a name="p5431mcpsimp"></a>Animation curve. For details about the valid values, see the description of <a href="ts-animatorproperty.md#li16621545614">Curve</a>.</p>
-    </td>
-    </tr>
-    <tr id="row5432mcpsimp"><td class="cellrowborder" valign="top" width="10.67961165048544%" headers="mcps1.1.6.1.1 "><p id="p5434mcpsimp"><a name="p5434mcpsimp"></a><a name="p5434mcpsimp"></a>delay</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.47572815533981%" headers="mcps1.1.6.1.2 "><p id="p5436mcpsimp"><a name="p5436mcpsimp"></a><a name="p5436mcpsimp"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.92233009708738%" headers="mcps1.1.6.1.3 "><p id="p5438mcpsimp"><a name="p5438mcpsimp"></a><a name="p5438mcpsimp"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.116504854368934%" headers="mcps1.1.6.1.4 "><p id="p5440mcpsimp"><a name="p5440mcpsimp"></a><a name="p5440mcpsimp"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="50.80582524271845%" headers="mcps1.1.6.1.5 "><p id="p5442mcpsimp"><a name="p5442mcpsimp"></a><a name="p5442mcpsimp"></a>Animation delay, in ms. Delayed animation is disabled by default.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   <a name="li1364031695819"></a>RouteType enums
-
-    <a name="table3452114216394"></a>
-    <table><thead align="left"><tr id="row245219426397"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p545244283914"><a name="p545244283914"></a><a name="p545244283914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p2452114203917"><a name="p2452114203917"></a><a name="p2452114203917"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6452144218390"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p34529427398"><a name="p34529427398"></a><a name="p34529427398"></a>Pop</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245211421393"><a name="p1245211421393"></a><a name="p1245211421393"></a>When page A jumps to page B, page A is Exit+Push, and page B is Enter+Push.</p>
-    </td>
-    </tr>
-    <tr id="row12452184217398"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p54523425398"><a name="p54523425398"></a><a name="p54523425398"></a>Push</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p745215426391"><a name="p745215426391"></a><a name="p745215426391"></a>When page B returns to page A, page A is Enter+Pop, and page B is Exit+Pop.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Attributes<a name="section4182144743016"></a>
-
-The  **PageTransitionEnter**  and  **PageTransitionExit**  components support the following attributes:
-
-<a name="table5448mcpsimp"></a>
-<table><thead align="left"><tr id="row5456mcpsimp"><th class="cellrowborder" valign="top" width="10.679611650485436%" id="mcps1.1.6.1.1"><p id="p5458mcpsimp"><a name="p5458mcpsimp"></a><a name="p5458mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="19.28155339805825%" id="mcps1.1.6.1.2"><p id="p5460mcpsimp"><a name="p5460mcpsimp"></a><a name="p5460mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="14.24271844660194%" id="mcps1.1.6.1.3"><p id="p5462mcpsimp"><a name="p5462mcpsimp"></a><a name="p5462mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="9.155339805825243%" id="mcps1.1.6.1.4"><p id="p5464mcpsimp"><a name="p5464mcpsimp"></a><a name="p5464mcpsimp"></a>Mandatory</p>
-</th>
-<th class="cellrowborder" valign="top" width="46.640776699029125%" id="mcps1.1.6.1.5"><p id="p5466mcpsimp"><a name="p5466mcpsimp"></a><a name="p5466mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row5467mcpsimp"><td class="cellrowborder" valign="top" width="10.679611650485436%" headers="mcps1.1.6.1.1 "><p id="p5469mcpsimp"><a name="p5469mcpsimp"></a><a name="p5469mcpsimp"></a>slide</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.28155339805825%" headers="mcps1.1.6.1.2 "><p id="p5471mcpsimp"><a name="p5471mcpsimp"></a><a name="p5471mcpsimp"></a>SlideEffect</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.24271844660194%" headers="mcps1.1.6.1.3 "><p id="p5473mcpsimp"><a name="p5473mcpsimp"></a><a name="p5473mcpsimp"></a>Right</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.155339805825243%" headers="mcps1.1.6.1.4 "><p id="p5475mcpsimp"><a name="p5475mcpsimp"></a><a name="p5475mcpsimp"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="46.640776699029125%" headers="mcps1.1.6.1.5 "><p id="p5477mcpsimp"><a name="p5477mcpsimp"></a><a name="p5477mcpsimp"></a>Slide effect during page transition. For details about the valid values, see the description of <a href="#li81331342185820">SlideEffect</a>.</p>
-</td>
-</tr>
-<tr id="row5478mcpsimp"><td class="cellrowborder" valign="top" width="10.679611650485436%" headers="mcps1.1.6.1.1 "><p id="p5480mcpsimp"><a name="p5480mcpsimp"></a><a name="p5480mcpsimp"></a>translate</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.28155339805825%" headers="mcps1.1.6.1.2 "><p id="p2093081910118"><a name="p2093081910118"></a><a name="p2093081910118"></a>{</p>
-<p id="p18561221131115"><a name="p18561221131115"></a><a name="p18561221131115"></a>x? : number,</p>
-<p id="p133781031191110"><a name="p133781031191110"></a><a name="p133781031191110"></a>y? : number,</p>
-<p id="p298143417110"><a name="p298143417110"></a><a name="p298143417110"></a>z? : number</p>
-<p id="p5482mcpsimp"><a name="p5482mcpsimp"></a><a name="p5482mcpsimp"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.24271844660194%" headers="mcps1.1.6.1.3 "><p id="p5484mcpsimp"><a name="p5484mcpsimp"></a><a name="p5484mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.155339805825243%" headers="mcps1.1.6.1.4 "><p id="p5486mcpsimp"><a name="p5486mcpsimp"></a><a name="p5486mcpsimp"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="46.640776699029125%" headers="mcps1.1.6.1.5 "><p id="p5488mcpsimp"><a name="p5488mcpsimp"></a><a name="p5488mcpsimp"></a>Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with <strong id="b6600340111215"><a name="b6600340111215"></a><a name="b6600340111215"></a>slide</strong>, the latter takes effect by default.</p>
-</td>
-</tr>
-<tr id="row5489mcpsimp"><td class="cellrowborder" valign="top" width="10.679611650485436%" headers="mcps1.1.6.1.1 "><p id="p5491mcpsimp"><a name="p5491mcpsimp"></a><a name="p5491mcpsimp"></a>scale</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.28155339805825%" headers="mcps1.1.6.1.2 "><p id="p1042583691118"><a name="p1042583691118"></a><a name="p1042583691118"></a>{</p>
-<p id="p14822103741113"><a name="p14822103741113"></a><a name="p14822103741113"></a>x? : number,</p>
-<p id="p13761744161112"><a name="p13761744161112"></a><a name="p13761744161112"></a>y? : number,</p>
-<p id="p596404721113"><a name="p596404721113"></a><a name="p596404721113"></a>z? : number,</p>
-<p id="p8894104961112"><a name="p8894104961112"></a><a name="p8894104961112"></a>centerX? : number,</p>
-<p id="p484952201111"><a name="p484952201111"></a><a name="p484952201111"></a>centerY? : number</p>
-<p id="p5493mcpsimp"><a name="p5493mcpsimp"></a><a name="p5493mcpsimp"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.24271844660194%" headers="mcps1.1.6.1.3 "><p id="p5495mcpsimp"><a name="p5495mcpsimp"></a><a name="p5495mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.155339805825243%" headers="mcps1.1.6.1.4 "><p id="p5497mcpsimp"><a name="p5497mcpsimp"></a><a name="p5497mcpsimp"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="46.640776699029125%" headers="mcps1.1.6.1.5 "><p id="p5499mcpsimp"><a name="p5499mcpsimp"></a><a name="p5499mcpsimp"></a>Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit.</p>
-</td>
-</tr>
-<tr id="row5500mcpsimp"><td class="cellrowborder" valign="top" width="10.679611650485436%" headers="mcps1.1.6.1.1 "><p id="p5502mcpsimp"><a name="p5502mcpsimp"></a><a name="p5502mcpsimp"></a>opacity</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.28155339805825%" headers="mcps1.1.6.1.2 "><p id="p5504mcpsimp"><a name="p5504mcpsimp"></a><a name="p5504mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.24271844660194%" headers="mcps1.1.6.1.3 "><p id="p5506mcpsimp"><a name="p5506mcpsimp"></a><a name="p5506mcpsimp"></a>1</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.155339805825243%" headers="mcps1.1.6.1.4 "><p id="p5508mcpsimp"><a name="p5508mcpsimp"></a><a name="p5508mcpsimp"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="46.640776699029125%" headers="mcps1.1.6.1.5 "><p id="p5510mcpsimp"><a name="p5510mcpsimp"></a><a name="p5510mcpsimp"></a>Opacity, which is the opacity value of the start point of entrance or the end point of exit.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li81331342185820"></a>SlideEffect enums
-
-    <a name="table131131547175411"></a>
-    <table><thead align="left"><tr id="row14113947145414"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p1111344785419"><a name="p1111344785419"></a><a name="p1111344785419"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p711318475541"><a name="p711318475541"></a><a name="p711318475541"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row81131047205413"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p17113947195417"><a name="p17113947195417"></a><a name="p17113947195417"></a>Left</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p5113347125413"><a name="p5113347125413"></a><a name="p5113347125413"></a>When set to Enter, slides in from the left. When set to Exit, slides out to the left.</p>
-    </td>
-    </tr>
-    <tr id="row311314471543"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1911324735411"><a name="p1911324735411"></a><a name="p1911324735411"></a>Right</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p12113247195416"><a name="p12113247195416"></a><a name="p12113247195416"></a>When set to Enter, slides in from the right. When set to Exit, slides out to the right.</p>
-    </td>
-    </tr>
-    <tr id="row9452134213392"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p510719111403"><a name="p510719111403"></a><a name="p510719111403"></a>Top</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p154533425394"><a name="p154533425394"></a><a name="p154533425394"></a>When set to Enter, slides in from the top. When set to Exit, slides out to the top.</p>
-    </td>
-    </tr>
-    <tr id="row1345313424399"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1766215124010"><a name="p1766215124010"></a><a name="p1766215124010"></a>Bottom</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245319426394"><a name="p1245319426394"></a><a name="p1245319426394"></a>When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Events<a name="section141860153013"></a>
+# Page Transition
+
+
+> ![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.
+
+
+Customize the page transition animations by configuring the page entrance and exit components in the global **pageTransition** method.
+
+
+  | Name | Parameter | Description | 
+| -------- | -------- | -------- |
+| PageTransitionEnter | Object | Page&nbsp;entrance&nbsp;component,&nbsp;which&nbsp;is&nbsp;used&nbsp;to&nbsp;customize&nbsp;the&nbsp;entrance&nbsp;effect&nbsp;of&nbsp;the&nbsp;current&nbsp;page.&nbsp;For&nbsp;details,&nbsp;see&nbsp;animation&nbsp;parameters. | 
+| PageTransitionExit | Object | Page&nbsp;exit&nbsp;component,&nbsp;which&nbsp;is&nbsp;used&nbsp;to&nbsp;customize&nbsp;the&nbsp;exit&nbsp;effect&nbsp;of&nbsp;the&nbsp;current&nbsp;page.&nbsp;For&nbsp;details,&nbsp;see&nbsp;animation&nbsp;parameters. | 
+
+
+- Animation parameters
+    | Name | Type | Default&nbsp;Value | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | type | RouteType | - | No | If&nbsp;this&nbsp;parameter&nbsp;is&nbsp;not&nbsp;set,&nbsp;the&nbsp;reverse&nbsp;playback&nbsp;effect&nbsp;as&nbsp;pop&nbsp;switches&nbsp;to&nbsp;push&nbsp;is&nbsp;used. | 
+  | duration | number | 1000 | No | Animation&nbsp;duration,&nbsp;in&nbsp;ms. | 
+  | curve | Curve&nbsp;\|&nbsp;Curves | Linear | No | Animation&nbsp;curve.&nbsp;For&nbsp;details&nbsp;about&nbsp;the&nbsp;valid&nbsp;values,&nbsp;see&nbsp;**Curve&nbsp;enums**. | 
+  | delay | number | 0 | No | Animation&nbsp;delay,&nbsp;in&nbsp;ms.&nbsp;Delayed&nbsp;animation&nbsp;is&nbsp;disabled&nbsp;by&nbsp;default. | 
+
+
+- RouteType enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Pop | When&nbsp;page&nbsp;A&nbsp;jumps&nbsp;to&nbsp;page&nbsp;B,&nbsp;page&nbsp;A&nbsp;is&nbsp;Exit+Push,&nbsp;and&nbsp;page&nbsp;B&nbsp;is&nbsp;Enter+Push. | 
+  | Push | When&nbsp;page&nbsp;B&nbsp;returns&nbsp;to&nbsp;page&nbsp;A,&nbsp;page&nbsp;A&nbsp;is&nbsp;Enter+Pop,&nbsp;and&nbsp;page&nbsp;B&nbsp;is&nbsp;Exit+Pop. | 
+
+
+## Attributes
+
+The **PageTransitionEnter** and **PageTransitionExit** components support the following attributes:
+
+  | Name | Type | Default&nbsp;Value | Mandatory | Description | 
+| -------- | -------- | -------- | -------- | -------- |
+| slide | SlideEffect | SlideEffect.Right | No | Slide&nbsp;effect&nbsp;during&nbsp;page&nbsp;transition.&nbsp;For&nbsp;details&nbsp;about&nbsp;the&nbsp;valid&nbsp;values,&nbsp;see&nbsp;the&nbsp;description&nbsp;of&nbsp;[ERROR:Invalid&nbsp;link:en-us_topic_0000001257138309.xml#xref2991922111212,link:#li81331342185820](#li81331342185820). | 
+| translate | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number<br/>} | - | No | Translation&nbsp;effect&nbsp;during&nbsp;page&nbsp;transition,&nbsp;which&nbsp;is&nbsp;the&nbsp;value&nbsp;of&nbsp;the&nbsp;start&nbsp;point&nbsp;of&nbsp;entrance&nbsp;and&nbsp;the&nbsp;end&nbsp;point&nbsp;of&nbsp;exit.&nbsp;When&nbsp;this&nbsp;parameter&nbsp;is&nbsp;set&nbsp;together&nbsp;with&nbsp;**slide**,&nbsp;the&nbsp;latter&nbsp;takes&nbsp;effect&nbsp;by&nbsp;default. | 
+| scale | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number,<br/>centerX?&nbsp;:&nbsp;number,<br/>centerY?&nbsp;:&nbsp;number<br/>} | - | No | Scaling&nbsp;effect&nbsp;during&nbsp;page&nbsp;transition,&nbsp;which&nbsp;is&nbsp;the&nbsp;value&nbsp;of&nbsp;the&nbsp;start&nbsp;point&nbsp;of&nbsp;entrance&nbsp;and&nbsp;the&nbsp;end&nbsp;point&nbsp;of&nbsp;exit. | 
+| opacity | number | 1 | No | Opacity,&nbsp;which&nbsp;is&nbsp;the&nbsp;opacity&nbsp;value&nbsp;of&nbsp;the&nbsp;start&nbsp;point&nbsp;of&nbsp;entrance&nbsp;or&nbsp;the&nbsp;end&nbsp;point&nbsp;of&nbsp;exit. | 
+
+- SlideEffect enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Left | When&nbsp;set&nbsp;to&nbsp;Enter,&nbsp;slides&nbsp;in&nbsp;from&nbsp;the&nbsp;left.&nbsp;When&nbsp;set&nbsp;to&nbsp;Exit,&nbsp;slides&nbsp;out&nbsp;to&nbsp;the&nbsp;left. | 
+  | Right | When&nbsp;set&nbsp;to&nbsp;Enter,&nbsp;slides&nbsp;in&nbsp;from&nbsp;the&nbsp;right.&nbsp;When&nbsp;set&nbsp;to&nbsp;Exit,&nbsp;slides&nbsp;out&nbsp;to&nbsp;the&nbsp;right. | 
+  | Top | When&nbsp;set&nbsp;to&nbsp;Enter,&nbsp;slides&nbsp;in&nbsp;from&nbsp;the&nbsp;top.&nbsp;When&nbsp;set&nbsp;to&nbsp;Exit,&nbsp;slides&nbsp;out&nbsp;to&nbsp;the&nbsp;top. | 
+  | Bottom | When&nbsp;set&nbsp;to&nbsp;Enter,&nbsp;slides&nbsp;in&nbsp;from&nbsp;the&nbsp;bottom.&nbsp;When&nbsp;set&nbsp;to&nbsp;Exit,&nbsp;slides&nbsp;out&nbsp;to&nbsp;the&nbsp;bottom. | 
+
+
+## Events
 
 The PageTransitionEnter and PageTransitionExit components support the following events:
 
-<a name="table5518mcpsimp"></a>
-<table><thead align="left"><tr id="row5524mcpsimp"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.4.1.1"><p id="p5528mcpsimp"><a name="p5528mcpsimp"></a><a name="p5528mcpsimp"></a>Event</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.4.1.2"><p id="p5530mcpsimp"><a name="p5530mcpsimp"></a><a name="p5530mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row5531mcpsimp"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p5533mcpsimp"><a name="p5533mcpsimp"></a><a name="p5533mcpsimp"></a>onEnter(type: RouteType, progress: number) =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p5537mcpsimp"><a name="p5537mcpsimp"></a><a name="p5537mcpsimp"></a>The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1.</p>
-</td>
-</tr>
-<tr id="row5538mcpsimp"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.4.1.1 "><p id="p5540mcpsimp"><a name="p5540mcpsimp"></a><a name="p5540mcpsimp"></a>onExit(type: RouteType, progress: number) =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.4.1.2 "><p id="p5544mcpsimp"><a name="p5544mcpsimp"></a><a name="p5544mcpsimp"></a>The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section675104083920"></a>
+  | Event | Description | 
+| -------- | -------- |
+| onEnter(type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void | The&nbsp;callback&nbsp;input&nbsp;parameter&nbsp;is&nbsp;the&nbsp;normalized&nbsp;progress&nbsp;of&nbsp;the&nbsp;current&nbsp;entrance&nbsp;animation.&nbsp;The&nbsp;value&nbsp;range&nbsp;is&nbsp;0–1. | 
+| onExit(type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void | The&nbsp;callback&nbsp;input&nbsp;parameter&nbsp;is&nbsp;the&nbsp;normalized&nbsp;progress&nbsp;of&nbsp;the&nbsp;current&nbsp;exit&nbsp;animation.&nbsp;The&nbsp;value&nbsp;range&nbsp;is&nbsp;0–1. | 
+
+
+## Example
 
 Customization method 1: The entrance animation of the current page is configured as fade-in, and the exit animation is configured as zoom-out.
 
+
 ```
 // index.ets
 @Entry
@@ -286,6 +99,7 @@ struct PageTransitionExample1 {
 }
 ```
 
+
 ```
 // page1.ets
 @Entry
@@ -317,10 +131,11 @@ struct AExample {
 }
 ```
 
-![](figures/pagetransition1.gif)
+![en-us_image_0000001256978335](figures/en-us_image_0000001256978335.gif)
 
 Customization method 2: The entrance animation of the current page is configured to slide in from the left, and the exit animation is configured to zoom out with opacity change.
 
+
 ```
 // index.ets 
 @Entry
@@ -352,6 +167,7 @@ struct PageTransitionExample {
 }
 ```
 
+
 ```
 // page1.ets
 @Entry
@@ -383,5 +199,4 @@ struct PageTransitionExample1 {
 }
 ```
 
-![](figures/pagetransition2.gif)
-
+![en-us_image_0000001212058460](figures/en-us_image_0000001212058460.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 f6fc3dd221ed86729f59f31edbf46911232b11e0..7524c4fa4c0bdf5322c78c996053f726a8e4d298 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,160 +1,41 @@
-# Component Transition<a name="EN-US_TOPIC_0000001237715077"></a>
+# Component Transition
 
->![](../../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**.
+> ![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.
 
-## Attributes<a name="section96162324014"></a>
 
-<a name="table16771718327"></a>
-<table><thead align="left"><tr id="row77752182218"><th class="cellrowborder" valign="top" width="16.36%" id="mcps1.1.5.1.1"><p id="p13775141819212"><a name="p13775141819212"></a><a name="p13775141819212"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="15.64%" id="mcps1.1.5.1.2"><p id="p77758188212"><a name="p77758188212"></a><a name="p77758188212"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="13.200000000000001%" id="mcps1.1.5.1.3"><p id="p2077510181622"><a name="p2077510181622"></a><a name="p2077510181622"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="54.800000000000004%" id="mcps1.1.5.1.4"><p id="p877513181526"><a name="p877513181526"></a><a name="p877513181526"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1477516181921"><td class="cellrowborder" valign="top" width="16.36%" headers="mcps1.1.5.1.1 "><p id="p1477512187213"><a name="p1477512187213"></a><a name="p1477512187213"></a>transition</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.64%" headers="mcps1.1.5.1.2 "><p id="p1980112523116"><a name="p1980112523116"></a><a name="p1980112523116"></a>Object</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.200000000000001%" headers="mcps1.1.5.1.3 "><p id="p1477611180220"><a name="p1477611180220"></a><a name="p1477611180220"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="54.800000000000004%" headers="mcps1.1.5.1.4 "><p id="p8776171815211"><a name="p8776171815211"></a><a name="p8776171815211"></a>All parameters are optional. For details, see the description of <a href="#li735275511597">Transition parameters</a>.</p>
-</td>
-</tr>
-</tbody>
-</table>
+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**.
 
--   <a name="li735275511597"></a>Transition parameters
 
-    <a name="table569010183219"></a>
-    <table><thead align="left"><tr id="row137762181329"><th class="cellrowborder" valign="top" width="18.11%" id="mcps1.1.6.1.1"><p id="p277615181212"><a name="p277615181212"></a><a name="p277615181212"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="19.830000000000002%" id="mcps1.1.6.1.2"><p id="p57761418722"><a name="p57761418722"></a><a name="p57761418722"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.690000000000001%" id="mcps1.1.6.1.3"><p id="p47761018125"><a name="p47761018125"></a><a name="p47761018125"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="13.68%" id="mcps1.1.6.1.4"><p id="p177761318321"><a name="p177761318321"></a><a name="p177761318321"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="35.69%" id="mcps1.1.6.1.5"><p id="p3776181817215"><a name="p3776181817215"></a><a name="p3776181817215"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row137768181212"><td class="cellrowborder" valign="top" width="18.11%" headers="mcps1.1.6.1.1 "><p id="p14776161815219"><a name="p14776161815219"></a><a name="p14776161815219"></a>type</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.830000000000002%" headers="mcps1.1.6.1.2 "><p id="p77768181021"><a name="p77768181021"></a><a name="p77768181021"></a><a href="#li15581632802">TransitionType</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.690000000000001%" headers="mcps1.1.6.1.3 "><p id="p377612186218"><a name="p377612186218"></a><a name="p377612186218"></a>All</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.68%" headers="mcps1.1.6.1.4 "><p id="p2077615181324"><a name="p2077615181324"></a><a name="p2077615181324"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="35.69%" headers="mcps1.1.6.1.5 "><p id="p177681812218"><a name="p177681812218"></a><a name="p177681812218"></a>Transition type, which includes component addition and deletion by default.</p>
-    <div class="note" id="note18696315103317"><a name="note18696315103317"></a><a name="note18696315103317"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p206961915123311"><a name="p206961915123311"></a><a name="p206961915123311"></a>If <strong id="b8494851152417"><a name="b8494851152417"></a><a name="b8494851152417"></a>type</strong> is not specified, insertion and deletion use the same transition type.</p>
-    </div></div>
-    </td>
-    </tr>
-    <tr id="row87771318422"><td class="cellrowborder" valign="top" width="18.11%" headers="mcps1.1.6.1.1 "><p id="p5777181810216"><a name="p5777181810216"></a><a name="p5777181810216"></a>opacity</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.830000000000002%" headers="mcps1.1.6.1.2 "><p id="p187773181623"><a name="p187773181623"></a><a name="p187773181623"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.690000000000001%" headers="mcps1.1.6.1.3 "><p id="p0777818521"><a name="p0777818521"></a><a name="p0777818521"></a>1</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.68%" headers="mcps1.1.6.1.4 "><p id="p1777711187211"><a name="p1777711187211"></a><a name="p1777711187211"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="35.69%" headers="mcps1.1.6.1.5 "><p id="p2777418321"><a name="p2777418321"></a><a name="p2777418321"></a>Opacity effect during component transition, which is the value of the start point of insertion and the end point of deletion.</p>
-    </td>
-    </tr>
-    <tr id="row167774181721"><td class="cellrowborder" valign="top" width="18.11%" headers="mcps1.1.6.1.1 "><p id="p17777201815217"><a name="p17777201815217"></a><a name="p17777201815217"></a>translate</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.830000000000002%" headers="mcps1.1.6.1.2 "><p id="p191388322174"><a name="p191388322174"></a><a name="p191388322174"></a>{</p>
-    <p id="p126201424151718"><a name="p126201424151718"></a><a name="p126201424151718"></a>x? : number,</p>
-    <p id="p285632617179"><a name="p285632617179"></a><a name="p285632617179"></a>y? : number,</p>
-    <p id="p16524428111714"><a name="p16524428111714"></a><a name="p16524428111714"></a>z? : number</p>
-    <p id="p14777818824"><a name="p14777818824"></a><a name="p14777818824"></a>}</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.690000000000001%" headers="mcps1.1.6.1.3 "><p id="p6777151817215"><a name="p6777151817215"></a><a name="p6777151817215"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.68%" headers="mcps1.1.6.1.4 "><p id="p0777161816218"><a name="p0777161816218"></a><a name="p0777161816218"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="35.69%" headers="mcps1.1.6.1.5 "><p id="p97774181927"><a name="p97774181927"></a><a name="p97774181927"></a>Translation effect during component transition, which is the value of the start point of insertion and the end point of deletion.</p>
-    </td>
-    </tr>
-    <tr id="row177714181221"><td class="cellrowborder" valign="top" width="18.11%" headers="mcps1.1.6.1.1 "><p id="p277716188211"><a name="p277716188211"></a><a name="p277716188211"></a>scale</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.830000000000002%" headers="mcps1.1.6.1.2 "><p id="p172107302174"><a name="p172107302174"></a><a name="p172107302174"></a>{</p>
-    <p id="p11917173317171"><a name="p11917173317171"></a><a name="p11917173317171"></a>x? : number,</p>
-    <p id="p18653235191715"><a name="p18653235191715"></a><a name="p18653235191715"></a>y? : number,</p>
-    <p id="p913018403171"><a name="p913018403171"></a><a name="p913018403171"></a>z? : number,</p>
-    <p id="p324984481710"><a name="p324984481710"></a><a name="p324984481710"></a>centerX? : number,</p>
-    <p id="p09912451173"><a name="p09912451173"></a><a name="p09912451173"></a>centerY? : number</p>
-    <p id="p17770181124"><a name="p17770181124"></a><a name="p17770181124"></a>}</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.690000000000001%" headers="mcps1.1.6.1.3 "><p id="p147771185213"><a name="p147771185213"></a><a name="p147771185213"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.68%" headers="mcps1.1.6.1.4 "><p id="p47773184215"><a name="p47773184215"></a><a name="p47773184215"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="35.69%" headers="mcps1.1.6.1.5 "><p id="p977713181926"><a name="p977713181926"></a><a name="p977713181926"></a>Scaling effect during component transition, which is the value of the start point of insertion and the end point of deletion.</p>
-    </td>
-    </tr>
-    <tr id="row87779183210"><td class="cellrowborder" valign="top" width="18.11%" headers="mcps1.1.6.1.1 "><p id="p1277715181827"><a name="p1277715181827"></a><a name="p1277715181827"></a>rotate</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.830000000000002%" headers="mcps1.1.6.1.2 "><p id="p1740524821716"><a name="p1740524821716"></a><a name="p1740524821716"></a>{</p>
-    <p id="p173632508173"><a name="p173632508173"></a><a name="p173632508173"></a>x?: number,</p>
-    <p id="p1654155216170"><a name="p1654155216170"></a><a name="p1654155216170"></a>y?: number,</p>
-    <p id="p9193555181713"><a name="p9193555181713"></a><a name="p9193555181713"></a>z?: number,</p>
-    <p id="p146481157121711"><a name="p146481157121711"></a><a name="p146481157121711"></a>angle?: Angle,</p>
-    <p id="p496511181818"><a name="p496511181818"></a><a name="p496511181818"></a>centerX?: Length,</p>
-    <p id="p36951551188"><a name="p36951551188"></a><a name="p36951551188"></a>centerY?: Length</p>
-    <p id="p777721816211"><a name="p777721816211"></a><a name="p777721816211"></a>}</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.690000000000001%" headers="mcps1.1.6.1.3 "><p id="p977716181210"><a name="p977716181210"></a><a name="p977716181210"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="13.68%" headers="mcps1.1.6.1.4 "><p id="p157770181529"><a name="p157770181529"></a><a name="p157770181529"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="35.69%" headers="mcps1.1.6.1.5 "><p id="p6777018123"><a name="p6777018123"></a><a name="p6777018123"></a>Rotation effect during component transition, which is the value of the start point of insertion and the end point of deletion.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+## Attributes
 
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| transition | Object | - | All&nbsp;parameters&nbsp;are&nbsp;optional.&nbsp;For&nbsp;details,&nbsp;see&nbsp;**transition**&nbsp;parameters. | 
 
--   <a name="li15581632802"></a>TransitionType enums
+- transition parameters
+    | Name | Type | Default&nbsp;Value | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | type | TransitionType | TransitionType.All | No | Transition&nbsp;type,&nbsp;which&nbsp;includes&nbsp;component&nbsp;addition&nbsp;and&nbsp;deletion&nbsp;by&nbsp;default.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;If&nbsp;**type**&nbsp;is&nbsp;not&nbsp;specified,&nbsp;insertion&nbsp;and&nbsp;deletion&nbsp;use&nbsp;the&nbsp;same&nbsp;transition&nbsp;type. | 
+  | opacity | number | 1 | No | Opacity&nbsp;effect&nbsp;during&nbsp;component&nbsp;transition,&nbsp;which&nbsp;is&nbsp;the&nbsp;value&nbsp;of&nbsp;the&nbsp;start&nbsp;point&nbsp;of&nbsp;insertion&nbsp;and&nbsp;the&nbsp;end&nbsp;point&nbsp;of&nbsp;deletion. | 
+  | translate | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number<br/>} | - | No | Translation&nbsp;effect&nbsp;during&nbsp;component&nbsp;transition,&nbsp;which&nbsp;is&nbsp;the&nbsp;value&nbsp;of&nbsp;the&nbsp;start&nbsp;point&nbsp;of&nbsp;insertion&nbsp;and&nbsp;the&nbsp;end&nbsp;point&nbsp;of&nbsp;deletion. | 
+  | scale | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number,<br/>centerX?&nbsp;:&nbsp;number,<br/>centerY?&nbsp;:&nbsp;number<br/>} | - | No | Scaling&nbsp;effect&nbsp;during&nbsp;component&nbsp;transition,&nbsp;which&nbsp;is&nbsp;the&nbsp;value&nbsp;of&nbsp;the&nbsp;start&nbsp;point&nbsp;of&nbsp;insertion&nbsp;and&nbsp;the&nbsp;end&nbsp;point&nbsp;of&nbsp;deletion. | 
+  | rotate | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>angle?:&nbsp;Angle,<br/>centerX?:&nbsp;Length,<br/>centerY?:&nbsp;Length<br/>} | - | No | Rotation&nbsp;effect&nbsp;during&nbsp;component&nbsp;transition,&nbsp;which&nbsp;is&nbsp;the&nbsp;value&nbsp;of&nbsp;the&nbsp;start&nbsp;point&nbsp;of&nbsp;insertion&nbsp;and&nbsp;the&nbsp;end&nbsp;point&nbsp;of&nbsp;deletion. | 
 
-    <a name="table3452114216394"></a>
-    <table><thead align="left"><tr id="row245219426397"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p545244283914"><a name="p545244283914"></a><a name="p545244283914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p2452114203917"><a name="p2452114203917"></a><a name="p2452114203917"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6452144218390"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p34529427398"><a name="p34529427398"></a><a name="p34529427398"></a>All</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245211421393"><a name="p1245211421393"></a><a name="p1245211421393"></a>The transition takes effect in all scenarios.</p>
-    </td>
-    </tr>
-    <tr id="row12452184217398"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p54523425398"><a name="p54523425398"></a><a name="p54523425398"></a>Insert</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p94521233195915"><a name="p94521233195915"></a><a name="p94521233195915"></a>The transition takes effect when a component is inserted.</p>
-    </td>
-    </tr>
-    <tr id="row9452134213392"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p510719111403"><a name="p510719111403"></a><a name="p510719111403"></a>Delete</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p154533425394"><a name="p154533425394"></a><a name="p154533425394"></a>The transition takes effect when a component is deleted.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+- TransitionType enums
+    | Name | Description | 
+  | -------- | -------- |
+  | All | The&nbsp;transition&nbsp;takes&nbsp;effect&nbsp;in&nbsp;all&nbsp;scenarios. | 
+  | Insert | The&nbsp;transition&nbsp;takes&nbsp;effect&nbsp;when&nbsp;a&nbsp;component&nbsp;is&nbsp;inserted. | 
+  | Delete | The&nbsp;transition&nbsp;takes&nbsp;effect&nbsp;when&nbsp;a&nbsp;component&nbsp;is&nbsp;deleted. | 
 
 
-## Example<a name="section1137330124017"></a>
+## 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.
 
+  
 ```
 @Entry
 @Component
@@ -186,5 +67,4 @@ struct TransitionExample {
 }
 ```
 
-![](figures/transition.gif)
-
+![en-us_image_0000001211898498](figures/en-us_image_0000001211898498.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md b/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
index a73b337b47d8ffa16af12d0a831c538d04467744..41bb952be72928cd57adde58417f3274d4820336 100644
--- a/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
+++ b/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
@@ -1,92 +1,32 @@
-# Transition of Shared Elements<a name="EN-US_TOPIC_0000001193075084"></a>
+# Transition of Shared Elements
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This animationis supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
->![](../../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.
 
 Shared element transition can be used for transition between pages, for example, transition from an image on the current page to the next page.
 
-## Type<a name="section35901546194017"></a>
-
-<a name="table10667105011521"></a>
-<table><thead align="left"><tr id="row373545015217"><th class="cellrowborder" valign="top" width="17.24%" id="mcps1.1.5.1.1"><p id="p19735175011522"><a name="p19735175011522"></a><a name="p19735175011522"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="20.880000000000003%" id="mcps1.1.5.1.2"><p id="p7735175085210"><a name="p7735175085210"></a><a name="p7735175085210"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="9.91%" id="mcps1.1.5.1.3"><p id="p2735350115217"><a name="p2735350115217"></a><a name="p2735350115217"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="51.970000000000006%" id="mcps1.1.5.1.4"><p id="p10735135018523"><a name="p10735135018523"></a><a name="p10735135018523"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row8735115014526"><td class="cellrowborder" valign="top" width="17.24%" headers="mcps1.1.5.1.1 "><p id="p77355509528"><a name="p77355509528"></a><a name="p77355509528"></a>sharedTransition</p>
-</td>
-<td class="cellrowborder" valign="top" width="20.880000000000003%" headers="mcps1.1.5.1.2 "><p id="p0573102927"><a name="p0573102927"></a><a name="p0573102927"></a>id: string,</p>
-<p id="p1536984417195"><a name="p1536984417195"></a><a name="p1536984417195"></a><a href="#li12109141415716">options</a>?: Object</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.91%" headers="mcps1.1.5.1.3 "><p id="p1373516508529"><a name="p1373516508529"></a><a name="p1373516508529"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="51.970000000000006%" headers="mcps1.1.5.1.4 "><p id="p6735650155210"><a name="p6735650155210"></a><a name="p6735650155210"></a>If the same ID is configured for a component on the two pages, this shared component is transited. If this parameter is set to an empty string, no shared elements are transited.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li12109141415716"></a>options parameters
-
-    <a name="table46771650145219"></a>
-    <table><thead align="left"><tr id="row13735125055220"><th class="cellrowborder" valign="top" width="13.309999999999999%" id="mcps1.1.6.1.1"><p id="p273585095220"><a name="p273585095220"></a><a name="p273585095220"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="17.59%" id="mcps1.1.6.1.2"><p id="p773525012528"><a name="p773525012528"></a><a name="p773525012528"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="8.99%" id="mcps1.1.6.1.3"><p id="p11735205035220"><a name="p11735205035220"></a><a name="p11735205035220"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="7.340000000000001%" id="mcps1.1.6.1.4"><p id="p137357503523"><a name="p137357503523"></a><a name="p137357503523"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="52.769999999999996%" id="mcps1.1.6.1.5"><p id="p9736250195214"><a name="p9736250195214"></a><a name="p9736250195214"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1736115045217"><td class="cellrowborder" valign="top" width="13.309999999999999%" headers="mcps1.1.6.1.1 "><p id="p117364507524"><a name="p117364507524"></a><a name="p117364507524"></a>duration</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.59%" headers="mcps1.1.6.1.2 "><p id="p17736950105212"><a name="p17736950105212"></a><a name="p17736950105212"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.99%" headers="mcps1.1.6.1.3 "><p id="p473616508525"><a name="p473616508525"></a><a name="p473616508525"></a>1000</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.340000000000001%" headers="mcps1.1.6.1.4 "><p id="p17361250135213"><a name="p17361250135213"></a><a name="p17361250135213"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="52.769999999999996%" headers="mcps1.1.6.1.5 "><p id="p57361506525"><a name="p57361506525"></a><a name="p57361506525"></a>Animation duration, in ms. The default duration is 1000 ms.</p>
-    </td>
-    </tr>
-    <tr id="row873625025217"><td class="cellrowborder" valign="top" width="13.309999999999999%" headers="mcps1.1.6.1.1 "><p id="p4736165095217"><a name="p4736165095217"></a><a name="p4736165095217"></a>curve</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.59%" headers="mcps1.1.6.1.2 "><p id="p1973614508526"><a name="p1973614508526"></a><a name="p1973614508526"></a>Curve | Curves</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.99%" headers="mcps1.1.6.1.3 "><p id="p1773617505529"><a name="p1773617505529"></a><a name="p1773617505529"></a>Linear</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.340000000000001%" headers="mcps1.1.6.1.4 "><p id="p27361050135213"><a name="p27361050135213"></a><a name="p27361050135213"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="52.769999999999996%" headers="mcps1.1.6.1.5 "><p id="p7736175016521"><a name="p7736175016521"></a><a name="p7736175016521"></a>The default curve is linear. For details about the valid values, see <strong id="b960623455816"><a name="b960623455816"></a><a name="b960623455816"></a>Curve enums</strong>.</p>
-    </td>
-    </tr>
-    <tr id="row1473615015525"><td class="cellrowborder" valign="top" width="13.309999999999999%" headers="mcps1.1.6.1.1 "><p id="p19736250175212"><a name="p19736250175212"></a><a name="p19736250175212"></a>delay</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="17.59%" headers="mcps1.1.6.1.2 "><p id="p07361950105215"><a name="p07361950105215"></a><a name="p07361950105215"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.99%" headers="mcps1.1.6.1.3 "><p id="p9736950185217"><a name="p9736950185217"></a><a name="p9736950185217"></a>0</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.340000000000001%" headers="mcps1.1.6.1.4 "><p id="p1473618508529"><a name="p1473618508529"></a><a name="p1473618508529"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="52.769999999999996%" headers="mcps1.1.6.1.5 "><p id="p1173645085210"><a name="p1173645085210"></a><a name="p1173645085210"></a>Delay of animation playback, in ms. By default, the playback is not delayed.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section34004854112"></a>
+
+## Type
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| sharedTransition | id:&nbsp;string,<br/>options?:&nbsp;Object | - | If&nbsp;the&nbsp;same&nbsp;ID&nbsp;is&nbsp;configured&nbsp;for&nbsp;a&nbsp;component&nbsp;on&nbsp;the&nbsp;two&nbsp;pages,&nbsp;this&nbsp;shared&nbsp;component&nbsp;is&nbsp;transited.&nbsp;If&nbsp;this&nbsp;parameter&nbsp;is&nbsp;set&nbsp;to&nbsp;an&nbsp;empty&nbsp;string,&nbsp;no&nbsp;shared&nbsp;elements&nbsp;are&nbsp;transited. | 
+
+- options parameters
+    | Name | Type | Default&nbsp;Value | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | duration | number | 1000 | No | Animation&nbsp;duration,&nbsp;in&nbsp;ms.&nbsp;The&nbsp;default&nbsp;duration&nbsp;is&nbsp;1000&nbsp;ms. | 
+  | curve | Curve&nbsp;\|&nbsp;Curves | Linear | No | The&nbsp;default&nbsp;curve&nbsp;is&nbsp;linear.&nbsp;For&nbsp;details&nbsp;about&nbsp;the&nbsp;valid&nbsp;values,&nbsp;see&nbsp;**Curve&nbsp;enums**. | 
+  | delay | number | 0 | No | Delay&nbsp;of&nbsp;animation&nbsp;playback,&nbsp;in&nbsp;ms.&nbsp;By&nbsp;default,&nbsp;the&nbsp;playback&nbsp;is&nbsp;not&nbsp;delayed. | 
+
+
+## Example
 
 The example shows the transition of a shared element from a page and page B.
 
+  
 ```
 @Entry
 @Component
@@ -115,6 +55,7 @@ struct SharedTransitionExample {
 }
 ```
 
+  
 ```
 // PageB
 @Entry
@@ -128,5 +69,4 @@ struct BExample {
 }
 ```
 
-![](figures/sharedtransition.gif)
-
+![en-us_image_0000001211898494](figures/en-us_image_0000001211898494.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation.md b/en/application-dev/reference/arkui-ts/ts-transition-animation.md
index 590b23e37aa735e0b641bb0d129f09da4972323c..5fd0655ea2f80cadeb2c63392c9602929d96c81d 100644
--- a/en/application-dev/reference/arkui-ts/ts-transition-animation.md
+++ b/en/application-dev/reference/arkui-ts/ts-transition-animation.md
@@ -1,9 +1,9 @@
-# Transition Animation<a name="EN-US_TOPIC_0000001193075094"></a>
+# Transition Animation
 
--   **[Page Transition](ts-page-transition-animation.md)**  
 
--   **[Component Transition](ts-transition-animation-component.md)**  
 
--   **[Transition of Shared Elements](ts-transition-animation-shared-elements.md)**  
+- **[Page Transition](ts-page-transition-animation.md)**
 
+- **[Component Transition](ts-transition-animation-component.md)**
 
+- **[Transition of Shared Elements](ts-transition-animation-shared-elements.md)**
\ No newline at end of file
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 38ccc9ff5839ffd750bf5e4f5a3673d176d12290..41959f374b15727d0a94c46856b63d25e49c29dc 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
@@ -1,106 +1,39 @@
-# Background<a name="EN-US_TOPIC_0000001237555119"></a>
+# Background
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 The attributes in this topic are used to set the background color of a component.
 
-## Required Permissions<a name="section781125411508"></a>
+
+## Required Permissions
 
 None
 
-## Attributes<a name="section6820191711316"></a>
-
-<a name="table548mcpsimp"></a>
-<table><thead align="left"><tr id="row555mcpsimp"><th class="cellrowborder" valign="top" width="18.279999999999998%" id="mcps1.1.5.1.1"><p id="p557mcpsimp"><a name="p557mcpsimp"></a><a name="p557mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="22.439999999999998%" id="mcps1.1.5.1.2"><p id="p559mcpsimp"><a name="p559mcpsimp"></a><a name="p559mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="10.85%" id="mcps1.1.5.1.3"><p id="p561mcpsimp"><a name="p561mcpsimp"></a><a name="p561mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="48.43%" id="mcps1.1.5.1.4"><p id="p563mcpsimp"><a name="p563mcpsimp"></a><a name="p563mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row564mcpsimp"><td class="cellrowborder" valign="top" width="18.279999999999998%" headers="mcps1.1.5.1.1 "><p id="p566mcpsimp"><a name="p566mcpsimp"></a><a name="p566mcpsimp"></a>backgroundColor</p>
-</td>
-<td class="cellrowborder" valign="top" width="22.439999999999998%" headers="mcps1.1.5.1.2 "><p id="p568mcpsimp"><a name="p568mcpsimp"></a><a name="p568mcpsimp"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="10.85%" headers="mcps1.1.5.1.3 "><p id="p570mcpsimp"><a name="p570mcpsimp"></a><a name="p570mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="48.43%" headers="mcps1.1.5.1.4 "><p id="p572mcpsimp"><a name="p572mcpsimp"></a><a name="p572mcpsimp"></a>Background color of a component.</p>
-</td>
-</tr>
-<tr id="row1993142420457"><td class="cellrowborder" valign="top" width="18.279999999999998%" headers="mcps1.1.5.1.1 "><p id="p1493242415452"><a name="p1493242415452"></a><a name="p1493242415452"></a>backgroundImage</p>
-</td>
-<td class="cellrowborder" valign="top" width="22.439999999999998%" headers="mcps1.1.5.1.2 "><p id="p3215443104520"><a name="p3215443104520"></a><a name="p3215443104520"></a>src: string,</p>
-<p id="p1393262494519"><a name="p1393262494519"></a><a name="p1393262494519"></a>repeat?: <a href="ts-appendix-enums.md#section5656191941718">ImageRepeat</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="10.85%" headers="mcps1.1.5.1.3 "><p id="p1093220249451"><a name="p1093220249451"></a><a name="p1093220249451"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="48.43%" headers="mcps1.1.5.1.4 "><p id="p539239184613"><a name="p539239184613"></a><a name="p539239184613"></a><strong id="b1989061912920"><a name="b1989061912920"></a><a name="b1989061912920"></a>src</strong>: image address, which can be the address of an Internet or a local image. (SVG images are not supported.)</p>
-<p id="p59321124124510"><a name="p59321124124510"></a><a name="p59321124124510"></a><strong id="b146564122510"><a name="b146564122510"></a><a name="b146564122510"></a>repeat</strong>: whether the background image is repeatedly used. By default, the background image is not repeatedly used.</p>
-</td>
-</tr>
-<tr id="row865252718459"><td class="cellrowborder" valign="top" width="18.279999999999998%" headers="mcps1.1.5.1.1 "><p id="p116521927114520"><a name="p116521927114520"></a><a name="p116521927114520"></a>backgroundImageSize</p>
-</td>
-<td class="cellrowborder" valign="top" width="22.439999999999998%" headers="mcps1.1.5.1.2 "><p id="p11618630194614"><a name="p11618630194614"></a><a name="p11618630194614"></a>{</p>
-<p id="p466233524614"><a name="p466233524614"></a><a name="p466233524614"></a>width?: Length,</p>
-<p id="p208462032787"><a name="p208462032787"></a><a name="p208462032787"></a>height?: Length</p>
-<p id="p20652192724512"><a name="p20652192724512"></a><a name="p20652192724512"></a>} | <a href="#li937882865915">ImageSize</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="10.85%" headers="mcps1.1.5.1.3 "><p id="p6652202734515"><a name="p6652202734515"></a><a name="p6652202734515"></a>Auto</p>
-</td>
-<td class="cellrowborder" valign="top" width="48.43%" headers="mcps1.1.5.1.4 "><p id="p196521327134511"><a name="p196521327134511"></a><a name="p196521327134511"></a>Width and height of the background image. When the input is a <strong id="b2022994745115"><a name="b2022994745115"></a><a name="b2022994745115"></a>{width: Length, height: Length}</strong> 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.</p>
-</td>
-</tr>
-<tr id="row561293054512"><td class="cellrowborder" valign="top" width="18.279999999999998%" headers="mcps1.1.5.1.1 "><p id="p16612193094518"><a name="p16612193094518"></a><a name="p16612193094518"></a>backgroundImagePosition</p>
-</td>
-<td class="cellrowborder" valign="top" width="22.439999999999998%" headers="mcps1.1.5.1.2 "><p id="p159911535182"><a name="p159911535182"></a><a name="p159911535182"></a>{</p>
-<p id="p11265191513910"><a name="p11265191513910"></a><a name="p11265191513910"></a>x?: Length,</p>
-<p id="p33314129919"><a name="p33314129919"></a><a name="p33314129919"></a>y?: Length</p>
-<p id="p86122302456"><a name="p86122302456"></a><a name="p86122302456"></a>} | <a href="ts-appendix-enums.md#section1145418513159">Alignment</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="10.85%" headers="mcps1.1.5.1.3 "><p id="p768611265914"><a name="p768611265914"></a><a name="p768611265914"></a>{</p>
-<p id="p182481283917"><a name="p182481283917"></a><a name="p182481283917"></a>x: 0,</p>
-<p id="p48380293912"><a name="p48380293912"></a><a name="p48380293912"></a>y: 0</p>
-<p id="p1261283014510"><a name="p1261283014510"></a><a name="p1261283014510"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="48.43%" headers="mcps1.1.5.1.4 "><p id="p261293004518"><a name="p261293004518"></a><a name="p261293004518"></a>Position of the background image in the component.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li937882865915"></a>ImageSize enums
-
-    <a name="table61607433471"></a>
-    <table><thead align="left"><tr id="row13210194394717"><th class="cellrowborder" valign="top" width="30.459999999999997%" id="mcps1.1.3.1.1"><p id="p7211134394716"><a name="p7211134394716"></a><a name="p7211134394716"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="69.54%" id="mcps1.1.3.1.2"><p id="p6211204384714"><a name="p6211204384714"></a><a name="p6211204384714"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1121164334710"><td class="cellrowborder" valign="top" width="30.459999999999997%" headers="mcps1.1.3.1.1 "><p id="p8211144317475"><a name="p8211144317475"></a><a name="p8211144317475"></a>Cover</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="69.54%" headers="mcps1.1.3.1.2 "><p id="p162119432471"><a name="p162119432471"></a><a name="p162119432471"></a>Default value. The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.</p>
-    </td>
-    </tr>
-    <tr id="row192118430476"><td class="cellrowborder" valign="top" width="30.459999999999997%" headers="mcps1.1.3.1.1 "><p id="p20211543164713"><a name="p20211543164713"></a><a name="p20211543164713"></a>Contain</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="69.54%" headers="mcps1.1.3.1.2 "><p id="p162111943104711"><a name="p162111943104711"></a><a name="p162111943104711"></a>The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries.</p>
-    </td>
-    </tr>
-    <tr id="row16211843204712"><td class="cellrowborder" valign="top" width="30.459999999999997%" headers="mcps1.1.3.1.1 "><p id="p7211134334715"><a name="p7211134334715"></a><a name="p7211134334715"></a>Auto</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="69.54%" headers="mcps1.1.3.1.2 "><p id="p121118431474"><a name="p121118431474"></a><a name="p121118431474"></a>The original image aspect ratio is retained.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section88491836154010"></a>
+
+## Attributes
+
+
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| backgroundColor | Color | - | Background&nbsp;color&nbsp;of&nbsp;a&nbsp;component. |
+| backgroundImage | src:&nbsp;string,<br/>repeat?:&nbsp;[ImageRepeat](ts-appendix-enums.md#imagerepeat-enums) | - | **src**:&nbsp;image&nbsp;address,&nbsp;which&nbsp;can&nbsp;be&nbsp;the&nbsp;address&nbsp;of&nbsp;an&nbsp;Internet&nbsp;or&nbsp;a&nbsp;local&nbsp;image.&nbsp;(SVG&nbsp;images&nbsp;are&nbsp;not&nbsp;supported.)<br/>**repeat**:&nbsp;whether&nbsp;the&nbsp;background&nbsp;image&nbsp;is&nbsp;repeatedly&nbsp;used.&nbsp;By&nbsp;default,&nbsp;the&nbsp;background&nbsp;image&nbsp;is&nbsp;not&nbsp;repeatedly&nbsp;used. |
+| backgroundImageSize | {<br/>width?:&nbsp;Length,<br/>height?:&nbsp;Length<br/>}&nbsp;\|&nbsp;ImageSize | Auto | Width&nbsp;and&nbsp;height&nbsp;of&nbsp;the&nbsp;background&nbsp;image.&nbsp;When&nbsp;the&nbsp;input&nbsp;is&nbsp;a&nbsp;**{width:&nbsp;Length,&nbsp;height:&nbsp;Length}**&nbsp;object,&nbsp;if&nbsp;only&nbsp;one&nbsp;attribute&nbsp;is&nbsp;set,&nbsp;the&nbsp;other&nbsp;attribute&nbsp;is&nbsp;the&nbsp;set&nbsp;value&nbsp;multiplied&nbsp;by&nbsp;the&nbsp;original&nbsp;aspect&nbsp;ratio&nbsp;of&nbsp;the&nbsp;image.&nbsp;By&nbsp;default,&nbsp;the&nbsp;original&nbsp;image&nbsp;aspect&nbsp;ratio&nbsp;remains&nbsp;unchanged. |
+| backgroundImagePosition | {<br/>x?:&nbsp;Length,<br/>y?:&nbsp;Length<br/>}&nbsp;\|&nbsp;[Alignment](ts-appendix-enums.md#alignment-enums) | {<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} | Position&nbsp;of&nbsp;the&nbsp;background&nbsp;image&nbsp;in&nbsp;the&nbsp;component. |
+
+
+- ImageSize enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Cover | Default&nbsp;value.&nbsp;The&nbsp;image&nbsp;is&nbsp;scaled&nbsp;with&nbsp;its&nbsp;aspect&nbsp;ratio&nbsp;retained&nbsp;for&nbsp;both&nbsp;sides&nbsp;to&nbsp;be&nbsp;greater&nbsp;than&nbsp;or&nbsp;equal&nbsp;to&nbsp;the&nbsp;display&nbsp;boundaries. | 
+  | Contain | The&nbsp;image&nbsp;is&nbsp;scaled&nbsp;with&nbsp;its&nbsp;aspect&nbsp;ratio&nbsp;retained&nbsp;for&nbsp;the&nbsp;content&nbsp;to&nbsp;be&nbsp;completely&nbsp;displayed&nbsp;within&nbsp;the&nbsp;display&nbsp;boundaries. | 
+  | Auto | The&nbsp;original&nbsp;image&nbsp;aspect&nbsp;ratio&nbsp;is&nbsp;retained. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -166,5 +99,4 @@ struct BackgroundExample {
 }
 ```
 
-![](figures/back.png)
-
+![en-us_image_0000001211898502](figures/en-us_image_0000001211898502.png)
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 e26571ee07d079fa89ecb48379084e85a5032f00..84561f7671decc24f8d4a8e81d02c705762cc275 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
@@ -1,110 +1,41 @@
-# Border Configuration<a name="EN-US_TOPIC_0000001237555101"></a>
+# Border
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-This section describes the settings of border styles.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+
+The attributes described in this topic are used to set border styles.
+
+
+## Required Permissions
 
 None
 
-## Attributes<a name="section6820191711316"></a>
-
-<a name="table444mcpsimp"></a>
-<table><thead align="left"><tr id="row451mcpsimp"><th class="cellrowborder" valign="top" width="16%" id="mcps1.1.5.1.1"><p id="p453mcpsimp"><a name="p453mcpsimp"></a><a name="p453mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="27.79%" id="mcps1.1.5.1.2"><p id="p455mcpsimp"><a name="p455mcpsimp"></a><a name="p455mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="12.57%" id="mcps1.1.5.1.3"><p id="p457mcpsimp"><a name="p457mcpsimp"></a><a name="p457mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="43.64%" id="mcps1.1.5.1.4"><p id="p459mcpsimp"><a name="p459mcpsimp"></a><a name="p459mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row460mcpsimp"><td class="cellrowborder" valign="top" width="16%" headers="mcps1.1.5.1.1 "><p id="p462mcpsimp"><a name="p462mcpsimp"></a><a name="p462mcpsimp"></a>border</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.79%" headers="mcps1.1.5.1.2 "><p id="p69540314713"><a name="p69540314713"></a><a name="p69540314713"></a>{</p>
-<p id="p82011074712"><a name="p82011074712"></a><a name="p82011074712"></a>width?: Length,</p>
-<p id="p1731310109716"><a name="p1731310109716"></a><a name="p1731310109716"></a>color?: Color,</p>
-<p id="p1978101210718"><a name="p1978101210718"></a><a name="p1978101210718"></a>radius?: Length,</p>
-<p id="p1358418161679"><a name="p1358418161679"></a><a name="p1358418161679"></a>style?: <a href="#li5617903594">BorderStyle</a></p>
-<p id="p464mcpsimp"><a name="p464mcpsimp"></a><a name="p464mcpsimp"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.57%" headers="mcps1.1.5.1.3 "><p id="p469mcpsimp"><a name="p469mcpsimp"></a><a name="p469mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="43.64%" headers="mcps1.1.5.1.4 "><p id="p471mcpsimp"><a name="p471mcpsimp"></a><a name="p471mcpsimp"></a>Sets a unified border style.</p>
-</td>
-</tr>
-<tr id="row472mcpsimp"><td class="cellrowborder" valign="top" width="16%" headers="mcps1.1.5.1.1 "><p id="p474mcpsimp"><a name="p474mcpsimp"></a><a name="p474mcpsimp"></a>borderStyle</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.79%" headers="mcps1.1.5.1.2 "><p id="p476mcpsimp"><a name="p476mcpsimp"></a><a name="p476mcpsimp"></a><a href="#li5617903594">BorderStyle</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="12.57%" headers="mcps1.1.5.1.3 "><p id="p478mcpsimp"><a name="p478mcpsimp"></a><a name="p478mcpsimp"></a>Solid</p>
-</td>
-<td class="cellrowborder" valign="top" width="43.64%" headers="mcps1.1.5.1.4 "><p id="p480mcpsimp"><a name="p480mcpsimp"></a><a name="p480mcpsimp"></a>Sets the border style of an element.</p>
-</td>
-</tr>
-<tr id="row481mcpsimp"><td class="cellrowborder" valign="top" width="16%" headers="mcps1.1.5.1.1 "><p id="p483mcpsimp"><a name="p483mcpsimp"></a><a name="p483mcpsimp"></a>borderWidth</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.79%" headers="mcps1.1.5.1.2 "><p id="p485mcpsimp"><a name="p485mcpsimp"></a><a name="p485mcpsimp"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.57%" headers="mcps1.1.5.1.3 "><p id="p487mcpsimp"><a name="p487mcpsimp"></a><a name="p487mcpsimp"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="43.64%" headers="mcps1.1.5.1.4 "><p id="p489mcpsimp"><a name="p489mcpsimp"></a><a name="p489mcpsimp"></a>Sets the border width of an element.</p>
-</td>
-</tr>
-<tr id="row490mcpsimp"><td class="cellrowborder" valign="top" width="16%" headers="mcps1.1.5.1.1 "><p id="p492mcpsimp"><a name="p492mcpsimp"></a><a name="p492mcpsimp"></a>borderColor</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.79%" headers="mcps1.1.5.1.2 "><p id="p494mcpsimp"><a name="p494mcpsimp"></a><a name="p494mcpsimp"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.57%" headers="mcps1.1.5.1.3 "><p id="p496mcpsimp"><a name="p496mcpsimp"></a><a name="p496mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="43.64%" headers="mcps1.1.5.1.4 "><p id="p498mcpsimp"><a name="p498mcpsimp"></a><a name="p498mcpsimp"></a>Sets the border color of an element.</p>
-</td>
-</tr>
-<tr id="row499mcpsimp"><td class="cellrowborder" valign="top" width="16%" headers="mcps1.1.5.1.1 "><p id="p501mcpsimp"><a name="p501mcpsimp"></a><a name="p501mcpsimp"></a>borderRadius</p>
-</td>
-<td class="cellrowborder" valign="top" width="27.79%" headers="mcps1.1.5.1.2 "><p id="p503mcpsimp"><a name="p503mcpsimp"></a><a name="p503mcpsimp"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.57%" headers="mcps1.1.5.1.3 "><p id="p505mcpsimp"><a name="p505mcpsimp"></a><a name="p505mcpsimp"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="43.64%" headers="mcps1.1.5.1.4 "><p id="p507mcpsimp"><a name="p507mcpsimp"></a><a name="p507mcpsimp"></a>Sets the border radius of an element.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li5617903594"></a>BorderStyle enums
-
-    <a name="table3452114216394"></a>
-    <table><thead align="left"><tr id="row245219426397"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p545244283914"><a name="p545244283914"></a><a name="p545244283914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p2452114203917"><a name="p2452114203917"></a><a name="p2452114203917"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6452144218390"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p34529427398"><a name="p34529427398"></a><a name="p34529427398"></a>Dotted</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245211421393"><a name="p1245211421393"></a><a name="p1245211421393"></a>Dotted border. The radius of a dot is half of <strong id="b08584301617"><a name="b08584301617"></a><a name="b08584301617"></a>borderWidth</strong>.</p>
-    </td>
-    </tr>
-    <tr id="row12452184217398"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p54523425398"><a name="p54523425398"></a><a name="p54523425398"></a>Dashed</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p745215426391"><a name="p745215426391"></a><a name="p745215426391"></a>Dashed border.</p>
-    </td>
-    </tr>
-    <tr id="row9452134213392"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p510719111403"><a name="p510719111403"></a><a name="p510719111403"></a>Solid</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p154533425394"><a name="p154533425394"></a><a name="p154533425394"></a>Solid border.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section1976245813394"></a>
 
+## Attributes
+
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| border | {<br/>width?:&nbsp;Length,<br/>color?:&nbsp;Color,<br/>radius?:&nbsp;Length,<br/>style?:&nbsp;BorderStyle<br/>} | - | Sets&nbsp;a&nbsp;unified&nbsp;border&nbsp;style. | 
+| borderStyle | BorderStyle | BorderStyle.Solid | Sets&nbsp;the&nbsp;border&nbsp;style&nbsp;of&nbsp;an&nbsp;element. | 
+| borderWidth | Length | 0 | Sets&nbsp;the&nbsp;border&nbsp;width&nbsp;of&nbsp;an&nbsp;element. | 
+| borderColor | Color | - | Sets&nbsp;the&nbsp;border&nbsp;color&nbsp;of&nbsp;an&nbsp;element. | 
+| borderRadius | Length | 0 | Sets&nbsp;the&nbsp;border&nbsp;radius&nbsp;of&nbsp;an&nbsp;element. | 
+
+
+- BorderStyle enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Dotted | Dotted&nbsp;border.&nbsp;The&nbsp;radius&nbsp;of&nbsp;a&nbsp;dot&nbsp;is&nbsp;half&nbsp;of&nbsp;**borderWidth**. | 
+  | Dashed | Dashed&nbsp;border. | 
+  | Solid | Solid&nbsp;border. | 
+
+
+## Example
+
+  
 ```
 @Entry
 @Component
@@ -124,5 +55,4 @@ struct BorderExample {
 }
 ```
 
-![](figures/border.gif)
-
+![en-us_image_0000001211898466](figures/en-us_image_0000001211898466.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-click.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-click.md
new file mode 100644
index 0000000000000000000000000000000000000000..1679db73148f51450f2c1687d0521b46712f8b5c
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-click.md
@@ -0,0 +1,52 @@
+# Click Control
+
+
+> ![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.
+
+
+## Required Permissions
+
+None
+
+
+## Attributes
+
+
+  | **Name** | **Type** | **Default&nbsp;Value** | **Description** | 
+| -------- | -------- | -------- | -------- |
+| touchable | boolean | true | Whether&nbsp;the&nbsp;current&nbsp;component&nbsp;is&nbsp;touchable. | 
+
+
+## Example
+
+  
+```
+@Entry
+@Component
+struct TouchAbleExample {
+  @State text1: string = ''
+  @State text2: string = ''
+
+  build() {
+    Stack() {
+      Rect()
+        .fill(Color.Gray).width(150).height(150)
+        .onClick(() => {
+          console.info(this.text1 = 'Rect Clicked')
+        })
+        .overlay(this.text1, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
+      Ellipse()
+        .fill(Color.Pink).width(150).height(80)
+        .touchable(false) // When the Ellipse area is touched, the message "Ellipse Clicked" is not displayed.
+        .onClick(() => {
+          console.info(this.text2 = 'Ellipse Clicked')
+        })
+        .overlay(this.text2, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
+    }.margin(100)
+  }
+}
+```
+
+
+![en-us_image_0000001257138351](figures/en-us_image_0000001257138351.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
new file mode 100644
index 0000000000000000000000000000000000000000..8fe23854906a4709f817060b8667c3c7131d22ce
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
@@ -0,0 +1,104 @@
+# Component ID
+
+
+> ![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.
+
+
+## Required Permissions
+
+None
+
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| id | string | '' | Unique&nbsp;ID&nbsp;of&nbsp;the&nbsp;component.&nbsp;The&nbsp;uniqueness&nbsp;is&nbsp;ensured&nbsp;by&nbsp;the&nbsp;user. | 
+
+
+## APIs
+
+
+### getInspectorByKey
+
+getInspectorByKey(id: string): string
+
+Obtains all attributes of the component with the specified ID, excluding the information about child components.
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | id | string | Yes | - | ID&nbsp;of&nbsp;the&nbsp;component&nbsp;whose&nbsp;attributes&nbsp;are&nbsp;to&nbsp;be&nbsp;obtained. | 
+
+- Return value
+    | Type | Description | 
+  | -------- | -------- |
+  | string | JSON&nbsp;string&nbsp;of&nbsp;the&nbsp;component&nbsp;attribute&nbsp;list. | 
+
+
+### sendEventByKey
+
+sendEventByKey(id: string, action: number, params: string): boolean
+
+Sends an event to the component with the specified ID.
+
+- Parameters
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | id | string | Yes | - | ID&nbsp;of&nbsp;the&nbsp;component&nbsp;for&nbsp;which&nbsp;the&nbsp;event&nbsp;is&nbsp;to&nbsp;be&nbsp;sent. | 
+  | action | number | Yes | - | Type&nbsp;of&nbsp;the&nbsp;event&nbsp;to&nbsp;be&nbsp;sent.&nbsp;The&nbsp;options&nbsp;are&nbsp;as&nbsp;follows:<br/>-&nbsp;Click&nbsp;event:&nbsp;10.<br/>-&nbsp;LongClick:&nbsp;11. | 
+  | params | string | Yes | - | Event&nbsp;parameters.&nbsp;If&nbsp;there&nbsp;is&nbsp;no&nbsp;parameter,&nbsp;pass&nbsp;an&nbsp;empty&nbsp;string&nbsp;**""**. | 
+
+- Return value
+    | Type | Description | 
+  | -------- | -------- |
+  | boolean | Returns&nbsp;**false**&nbsp;if&nbsp;the&nbsp;component&nbsp;with&nbsp;the&nbsp;specified&nbsp;ID&nbsp;cannot&nbsp;be&nbsp;found;&nbsp;returns&nbsp;**true**&nbsp;otherwise. | 
+
+
+## Example
+
+  
+```
+@Entry
+@Component
+struct IdExample {
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Button() {
+        Text('click')
+          .fontSize(25)
+          .fontWeight(FontWeight.Bold)
+      }
+      .type(ButtonType.Capsule)
+      .margin({
+        top: 20
+      }).onClick(() => {
+        console.info(getInspectorByKey("click"))
+        console.info(getInspectorTree())
+        setTimeout(() => {
+          sendEventByKey("longclick", 11, "")
+        }, 2000)
+      }).id('click')
+
+      Button() {
+        Text('longclick')
+          .fontSize(25)
+          .fontWeight(FontWeight.Bold)
+      }
+      .type(ButtonType.Capsule)
+      .margin({
+        top: 20
+      })
+      .backgroundColor('#0D9FFB')
+      .gesture(
+        LongPressGesture().onActionEnd(() => {
+          console.info('long clicked')
+        }))
+      .id('longclick')
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+```
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md
index 9d6b1249786664f03c83e8544e32c860aef8a6a2..1c2ccdfc0895dada913069589f3a27d0c8822ef1 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md
@@ -1,39 +1,26 @@
-# Enable/Disable<a name="EN-US_TOPIC_0000001192595162"></a>
+# Enable/Disable
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## Attributes<a name="section6820191711316"></a>
-
-<a name="table3897mcpsimp"></a>
-<table><thead align="left"><tr id="row3904mcpsimp"><th class="cellrowborder" valign="top" width="12.24%" id="mcps1.1.5.1.1"><p id="p3906mcpsimp"><a name="p3906mcpsimp"></a><a name="p3906mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="12.08%" id="mcps1.1.5.1.2"><p id="p3908mcpsimp"><a name="p3908mcpsimp"></a><a name="p3908mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="10.870000000000001%" id="mcps1.1.5.1.3"><p id="p3910mcpsimp"><a name="p3910mcpsimp"></a><a name="p3910mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="64.81%" id="mcps1.1.5.1.4"><p id="p3912mcpsimp"><a name="p3912mcpsimp"></a><a name="p3912mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row3913mcpsimp"><td class="cellrowborder" valign="top" width="12.24%" headers="mcps1.1.5.1.1 "><p id="p3915mcpsimp"><a name="p3915mcpsimp"></a><a name="p3915mcpsimp"></a>enabled</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.08%" headers="mcps1.1.5.1.2 "><p id="p3917mcpsimp"><a name="p3917mcpsimp"></a><a name="p3917mcpsimp"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="10.870000000000001%" headers="mcps1.1.5.1.3 "><p id="p3919mcpsimp"><a name="p3919mcpsimp"></a><a name="p3919mcpsimp"></a>true</p>
-</td>
-<td class="cellrowborder" valign="top" width="64.81%" headers="mcps1.1.5.1.4 "><p id="p3921mcpsimp"><a name="p3921mcpsimp"></a><a name="p3921mcpsimp"></a>The value <strong id="b14522251174915"><a name="b14522251174915"></a><a name="b14522251174915"></a>true</strong> means that the component is available and can respond to operations such as clicking. The value <strong id="b9788591501"><a name="b9788591501"></a><a name="b9788591501"></a>false</strong> means that the component does not respond to operations such as clicking.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section4278134412416"></a>
 
+## Attributes
+
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| enabled | boolean | true | The&nbsp;value&nbsp;**true**&nbsp;means&nbsp;that&nbsp;the&nbsp;component&nbsp;is&nbsp;available&nbsp;and&nbsp;can&nbsp;respond&nbsp;to&nbsp;operations&nbsp;such&nbsp;as&nbsp;clicking.&nbsp;The&nbsp;value&nbsp;**false**&nbsp;means&nbsp;that&nbsp;the&nbsp;component&nbsp;does&nbsp;not&nbsp;respond&nbsp;to&nbsp;operations&nbsp;such&nbsp;as&nbsp;clicking. | 
+
+
+## Example
+
+  
 ```
 @Entry
 @Component
@@ -50,5 +37,4 @@ struct EnabledExample {
 }
 ```
 
-![](figures/enabled.gif)
-
+![en-us_image_0000001212218428](figures/en-us_image_0000001212218428.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
index 6423acb80767eded69d695f15723ef1d92660dd5..eaa92f882dfcce0c50c276b907fcb246bc87e4c7 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
@@ -1,66 +1,30 @@
-# Flex Layout<a name="EN-US_TOPIC_0000001192755122"></a>
+# Flex Layout
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->-   This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
->-   This attribute is valid only when the parent component is a  **Flex**  component.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> - This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+> 
+> - This attribute is valid only when the parent component is a **Flex** component.
+
+
+## Required Permissions
 
 None
 
-## Attributes<a name="section414916171752"></a>
-
-<a name="table444mcpsimp"></a>
-<table><thead align="left"><tr id="row451mcpsimp"><th class="cellrowborder" valign="top" width="16%" id="mcps1.1.5.1.1"><p id="p453mcpsimp"><a name="p453mcpsimp"></a><a name="p453mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="16.66%" id="mcps1.1.5.1.2"><p id="p455mcpsimp"><a name="p455mcpsimp"></a><a name="p455mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="13.459999999999999%" id="mcps1.1.5.1.3"><p id="p457mcpsimp"><a name="p457mcpsimp"></a><a name="p457mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="53.879999999999995%" id="mcps1.1.5.1.4"><p id="p459mcpsimp"><a name="p459mcpsimp"></a><a name="p459mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row460mcpsimp"><td class="cellrowborder" valign="top" width="16%" headers="mcps1.1.5.1.1 "><p id="p462mcpsimp"><a name="p462mcpsimp"></a><a name="p462mcpsimp"></a>flexBasis</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.66%" headers="mcps1.1.5.1.2 "><p id="p464mcpsimp"><a name="p464mcpsimp"></a><a name="p464mcpsimp"></a>'auto' | Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.459999999999999%" headers="mcps1.1.5.1.3 "><p id="p469mcpsimp"><a name="p469mcpsimp"></a><a name="p469mcpsimp"></a>'auto'</p>
-</td>
-<td class="cellrowborder" valign="top" width="53.879999999999995%" headers="mcps1.1.5.1.4 "><p id="p471mcpsimp"><a name="p471mcpsimp"></a><a name="p471mcpsimp"></a>Base dimension of a component in the main axis of the <strong id="b1686121761316"><a name="b1686121761316"></a><a name="b1686121761316"></a>Flex</strong> layout.</p>
-</td>
-</tr>
-<tr id="row472mcpsimp"><td class="cellrowborder" valign="top" width="16%" headers="mcps1.1.5.1.1 "><p id="p474mcpsimp"><a name="p474mcpsimp"></a><a name="p474mcpsimp"></a>flexGrow</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.66%" headers="mcps1.1.5.1.2 "><p id="p476mcpsimp"><a name="p476mcpsimp"></a><a name="p476mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.459999999999999%" headers="mcps1.1.5.1.3 "><p id="p478mcpsimp"><a name="p478mcpsimp"></a><a name="p478mcpsimp"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="53.879999999999995%" headers="mcps1.1.5.1.4 "><p id="p480mcpsimp"><a name="p480mcpsimp"></a><a name="p480mcpsimp"></a>Percentage of the <strong id="b0358174519133"><a name="b0358174519133"></a><a name="b0358174519133"></a>Flex</strong> layout's remaining space that is allocated to the component.</p>
-</td>
-</tr>
-<tr id="row481mcpsimp"><td class="cellrowborder" valign="top" width="16%" headers="mcps1.1.5.1.1 "><p id="p483mcpsimp"><a name="p483mcpsimp"></a><a name="p483mcpsimp"></a>flexShrink</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.66%" headers="mcps1.1.5.1.2 "><p id="p485mcpsimp"><a name="p485mcpsimp"></a><a name="p485mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.459999999999999%" headers="mcps1.1.5.1.3 "><p id="p487mcpsimp"><a name="p487mcpsimp"></a><a name="p487mcpsimp"></a>1</p>
-</td>
-<td class="cellrowborder" valign="top" width="53.879999999999995%" headers="mcps1.1.5.1.4 "><p id="p489mcpsimp"><a name="p489mcpsimp"></a><a name="p489mcpsimp"></a>Percentage of the <strong id="b14896356151316"><a name="b14896356151316"></a><a name="b14896356151316"></a>Flex</strong> layout's shrink size that is allocated to the component.</p>
-</td>
-</tr>
-<tr id="row499mcpsimp"><td class="cellrowborder" valign="top" width="16%" headers="mcps1.1.5.1.1 "><p id="p501mcpsimp"><a name="p501mcpsimp"></a><a name="p501mcpsimp"></a>alignSelf</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.66%" headers="mcps1.1.5.1.2 "><p id="p503mcpsimp"><a name="p503mcpsimp"></a><a name="p503mcpsimp"></a><a href="ts-appendix-enums.md#section14211428171612">ItemAlign</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="13.459999999999999%" headers="mcps1.1.5.1.3 "><p id="p505mcpsimp"><a name="p505mcpsimp"></a><a name="p505mcpsimp"></a>Auto</p>
-</td>
-<td class="cellrowborder" valign="top" width="53.879999999999995%" headers="mcps1.1.5.1.4 "><p id="p507mcpsimp"><a name="p507mcpsimp"></a><a name="p507mcpsimp"></a>Alighment mode, which overwrites the default <strong id="b20794168174419"><a name="b20794168174419"></a><a name="b20794168174419"></a>alignItems</strong> configuration in the <strong id="b194962528154"><a name="b194962528154"></a><a name="b194962528154"></a>Flex</strong> layout.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section1976245813394"></a>
+
+## Attributes
+
+
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| flexBasis | 'auto'&nbsp;\|&nbsp;Length | 'auto' | Base&nbsp;dimension&nbsp;of&nbsp;a&nbsp;component&nbsp;in&nbsp;the&nbsp;main&nbsp;axis&nbsp;of&nbsp;the&nbsp;**Flex**&nbsp;layout. |
+| flexGrow | number | 0 | Percentage&nbsp;of&nbsp;the&nbsp;**Flex**&nbsp;layout's&nbsp;remaining&nbsp;space&nbsp;that&nbsp;is&nbsp;allocated&nbsp;to&nbsp;the&nbsp;component. |
+| flexShrink | number | 1 | Percentage&nbsp;of&nbsp;the&nbsp;**Flex**&nbsp;layout's&nbsp;shrink&nbsp;size&nbsp;that&nbsp;is&nbsp;allocated&nbsp;to&nbsp;the&nbsp;component. |
+| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign-enums) | Auto | Alignment&nbsp;mode,&nbsp;which&nbsp;overwrites&nbsp;the&nbsp;default&nbsp;**alignItems**&nbsp;configuration&nbsp;in&nbsp;the&nbsp;**Flex**&nbsp;layout. |
+
+
+## Example
+
 
 ```
 @Entry
@@ -94,7 +58,7 @@ struct FlexExample {
 
       Text('flexShrink').fontSize(9).fontColor(0xCCCCCC).width('90%')
       // flexShrink() specifies the percentage of the shrink size allocated to the component.
-      // The ratio of text1 is 0, and the default values of other parameters are 1. If the components cannot be completely displayed, the last two components are shrunk proportionally. The first componented is not shrunk.
+      // The ratio of text1 is 0, and the default values of other parameters are 1. If the components cannot be completely displayed, the last two components are shrunk proportionally. The first component is not shrunk.
       Flex({ direction: FlexDirection.Row }) {
         Text('flexShrink(0)')
           .flexShrink(0).width('50%').height(100).lineHeight(70)
@@ -122,5 +86,4 @@ struct FlexExample {
 }
 ```
 
-![](figures/flex.png)
-
+![en-us_image_0000001212378394](figures/en-us_image_0000001212378394.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md
new file mode 100644
index 0000000000000000000000000000000000000000..9f3e2481f97d4d40e7f65d106cb245a0a2d68f0f
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md
@@ -0,0 +1,78 @@
+# Focus Control
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This attribute is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
+
+None
+
+
+## Attributes
+
+  | **Name** | **Type** | **Default&nbsp;Value** | **Description** | 
+| -------- | -------- | -------- | -------- |
+| focusable | boolean | false | Whether&nbsp;the&nbsp;current&nbsp;component&nbsp;is&nbsp;focusable. | 
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> The following components support focus control: **&lt;Button&gt;**, **&lt;Text&gt;**, **&lt;Image&gt;**, **&lt;List&gt;**, and **&lt;Grid&gt;**.
+
+
+## Example
+
+  
+```
+@Entry
+@Component
+struct FocusableExample {
+  @State textOne: string = ''
+  @State textTwo: string = ''
+  @State textThree: string = 'The third button cannot be focused'
+  @State oneButtonColor: string = '#FF0000'
+  @State twoButtonColor: string = '#FFC0CB'
+  @State threeButtonColor: string = '#87CEFA'
+
+  build() {
+    Column({ space:20 }){
+      Button(this.textOne)
+        .backgroundColor(this.oneButtonColor)
+        .width(300).height(70).fontColor(Color.Black)
+        .focusable(true)
+        .onFocus(() => {
+          this.textOne = 'First Button onFocus'
+          this.oneButtonColor = '#AFEEEE'
+        })
+        .onBlur(() => {
+          this.textOne = 'First Button onBlur'
+          this.oneButtonColor = '#FFC0CB'
+        })
+      Button(this.textTwo)
+        .backgroundColor(this.twoButtonColor)
+        .width(300).height(70).fontColor(Color.Black)
+        .focusable(true)
+        .onFocus(() => {
+          this.textTwo = 'Second Button onFocus'
+          this.twoButtonColor = '#AFEEEE'
+        })
+        .onBlur(() => {
+          this.textTwo = 'Second Button onBlur'
+          this.twoButtonColor = '#FFC0CB'
+        })
+      Button(this.textThree)
+        .backgroundColor(this.threeButtonColor)
+        .width(300).height(70).fontColor(Color.Black)
+        .focusable(false)
+        .onFocus(() => {
+          this.textThree = 'Third Button onFocus'
+          this.threeButtonColor = '#AFEEEE'
+        })
+        .onBlur(() => {
+          this.textThree = 'Third Button onBlur'
+          this.threeButtonColor = '#FFC0CB'
+        })
+    }.width('100%').margin({ top:20 })
+  }
+}
+```
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 754e983d7efc929ff9890c9095a61be8784eafc5..dace1744afc31a70ef38060e1c56e514198459c9 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
@@ -1,145 +1,43 @@
-# Gradient Color<a name="EN-US_TOPIC_0000001237355083"></a>
+# Gradient Color
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## Attributes<a name="section6820191711316"></a>
-
-<a name="table1265031910316"></a>
-<table><thead align="left"><tr id="row9650111916319"><th class="cellrowborder" valign="top" width="17.86%" id="mcps1.1.5.1.1"><p id="p18651919153114"><a name="p18651919153114"></a><a name="p18651919153114"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="35.92%" id="mcps1.1.5.1.2"><p id="p965116197315"><a name="p965116197315"></a><a name="p965116197315"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="9.4%" id="mcps1.1.5.1.3"><p id="p4651181953113"><a name="p4651181953113"></a><a name="p4651181953113"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="36.82%" id="mcps1.1.5.1.4"><p id="p6651191918319"><a name="p6651191918319"></a><a name="p6651191918319"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1165131943114"><td class="cellrowborder" valign="top" width="17.86%" headers="mcps1.1.5.1.1 "><p id="p122152715327"><a name="p122152715327"></a><a name="p122152715327"></a>linearGradient</p>
-</td>
-<td class="cellrowborder" valign="top" width="35.92%" headers="mcps1.1.5.1.2 "><p id="p94621515915"><a name="p94621515915"></a><a name="p94621515915"></a>{</p>
-<p id="p696011914596"><a name="p696011914596"></a><a name="p696011914596"></a>angle?: <a href="../../toctopics/en-us_topic_0000001237475069.md#section1530915545289">Angle</a>,</p>
-<p id="p116922025185912"><a name="p116922025185912"></a><a name="p116922025185912"></a>direction?:<a href="#li1798245810543">GradientDirection</a>,</p>
-<p id="p38974273590"><a name="p38974273590"></a><a name="p38974273590"></a>colors: Array&lt;<a href="../../toctopics/en-us_topic_0000001237475069.md#section5633640161413">ColorStop</a>&gt;</p>
-<p id="p82133214396"><a name="p82133214396"></a><a name="p82133214396"></a>repeating?: boolean</p>
-<p id="p822914920401"><a name="p822914920401"></a><a name="p822914920401"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.4%" headers="mcps1.1.5.1.3 "><p id="p1885914345342"><a name="p1885914345342"></a><a name="p1885914345342"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="36.82%" headers="mcps1.1.5.1.4 "><p id="p1821562018213"><a name="p1821562018213"></a><a name="p1821562018213"></a>Linear gradient.</p>
-<p id="p1622132703211"><a name="p1622132703211"></a><a name="p1622132703211"></a><strong id="b22111113277"><a name="b22111113277"></a><a name="b22111113277"></a>angle</strong>: angle of the linear gradient.</p>
-<p id="p156811542172917"><a name="p156811542172917"></a><a name="p156811542172917"></a><strong id="b142838318273"><a name="b142838318273"></a><a name="b142838318273"></a>direction</strong>: direction of the linear gradient.</p>
-<p id="p35832582286"><a name="p35832582286"></a><a name="p35832582286"></a><strong id="b109818162718"><a name="b109818162718"></a><a name="b109818162718"></a>colors</strong>: description of the gradient colors.</p>
-<p id="p19829150123911"><a name="p19829150123911"></a><a name="p19829150123911"></a><strong id="b9721134984113"><a name="b9721134984113"></a><a name="b9721134984113"></a>repeating</strong>: whether the colors are repeated.</p>
-</td>
-</tr>
-<tr id="row472mcpsimp"><td class="cellrowborder" valign="top" width="17.86%" headers="mcps1.1.5.1.1 "><p id="p19221162773210"><a name="p19221162773210"></a><a name="p19221162773210"></a>sweepGradient</p>
-</td>
-<td class="cellrowborder" valign="top" width="35.92%" headers="mcps1.1.5.1.2 "><p id="p1339211315593"><a name="p1339211315593"></a><a name="p1339211315593"></a>{</p>
-<p id="p1973712343599"><a name="p1973712343599"></a><a name="p1973712343599"></a>center: Point,</p>
-<p id="p6761136175910"><a name="p6761136175910"></a><a name="p6761136175910"></a>start?: angle,</p>
-<p id="p16717740175912"><a name="p16717740175912"></a><a name="p16717740175912"></a>end?: angle,</p>
-<p id="p11563114615596"><a name="p11563114615596"></a><a name="p11563114615596"></a>colors: Array&lt;<a href="../../toctopics/en-us_topic_0000001237475069.md#section5633640161413">ColorStop</a>&gt;</p>
-<p id="p1246417165412"><a name="p1246417165412"></a><a name="p1246417165412"></a>repeating?: boolean</p>
-<p id="p2843117104311"><a name="p2843117104311"></a><a name="p2843117104311"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.4%" headers="mcps1.1.5.1.3 "><p id="p885717342341"><a name="p885717342341"></a><a name="p885717342341"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="36.82%" headers="mcps1.1.5.1.4 "><p id="p2022574119118"><a name="p2022574119118"></a><a name="p2022574119118"></a>Angle gradient.</p>
-<p id="p11186446217"><a name="p11186446217"></a><a name="p11186446217"></a><strong id="b9341174142811"><a name="b9341174142811"></a><a name="b9341174142811"></a>center</strong>: center point of the angle gradient.</p>
-<p id="p158901054911"><a name="p158901054911"></a><a name="p158901054911"></a><strong id="b1548712140282"><a name="b1548712140282"></a><a name="b1548712140282"></a>start</strong>: start point of the angle gradient.</p>
-<p id="p1057017411396"><a name="p1057017411396"></a><a name="p1057017411396"></a><strong id="b1118721818283"><a name="b1118721818283"></a><a name="b1118721818283"></a>end</strong>: end point of the angle gradient.</p>
-<p id="p117514168309"><a name="p117514168309"></a><a name="p117514168309"></a><strong id="b84270335284"><a name="b84270335284"></a><a name="b84270335284"></a>colors</strong>: description of the gradient colors.</p>
-<p id="p626262014112"><a name="p626262014112"></a><a name="p626262014112"></a><strong id="b15651184464212"><a name="b15651184464212"></a><a name="b15651184464212"></a>repeating</strong>: whether the colors are repeated.</p>
-</td>
-</tr>
-<tr id="row481mcpsimp"><td class="cellrowborder" valign="top" width="17.86%" headers="mcps1.1.5.1.1 "><p id="p2221027193216"><a name="p2221027193216"></a><a name="p2221027193216"></a>radialGradient</p>
-</td>
-<td class="cellrowborder" valign="top" width="35.92%" headers="mcps1.1.5.1.2 "><p id="p106469530594"><a name="p106469530594"></a><a name="p106469530594"></a>{</p>
-<p id="p167511156125910"><a name="p167511156125910"></a><a name="p167511156125910"></a>center: Point,</p>
-<p id="p39331958195916"><a name="p39331958195916"></a><a name="p39331958195916"></a>radius: Length,</p>
-<p id="p65713519017"><a name="p65713519017"></a><a name="p65713519017"></a>colors: Array&lt;<a href="../../toctopics/en-us_topic_0000001237475069.md#section5633640161413">ColorStop</a>&gt;</p>
-<p id="p48831534184115"><a name="p48831534184115"></a><a name="p48831534184115"></a>repeating: boolean</p>
-<p id="p99163173317"><a name="p99163173317"></a><a name="p99163173317"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.4%" headers="mcps1.1.5.1.3 "><p id="p13855193418347"><a name="p13855193418347"></a><a name="p13855193418347"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="36.82%" headers="mcps1.1.5.1.4 "><p id="p188052111806"><a name="p188052111806"></a><a name="p188052111806"></a>Radial gradient.</p>
-<p id="p2516261008"><a name="p2516261008"></a><a name="p2516261008"></a><strong id="b1746018451282"><a name="b1746018451282"></a><a name="b1746018451282"></a>center</strong>: center point of the radial gradient.</p>
-<p id="p59780470391"><a name="p59780470391"></a><a name="p59780470391"></a><strong id="b3545195017285"><a name="b3545195017285"></a><a name="b3545195017285"></a>radius</strong>: radius of the radial gradient.</p>
-<p id="p3283173111308"><a name="p3283173111308"></a><a name="p3283173111308"></a><strong id="b2447183042815"><a name="b2447183042815"></a><a name="b2447183042815"></a>colors</strong>: description of the gradient colors.</p>
-<p id="p1131915428412"><a name="p1131915428412"></a><a name="p1131915428412"></a><strong id="b15789161094315"><a name="b15789161094315"></a><a name="b15789161094315"></a>repeating</strong>: whether the colors are repeated.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li1798245810543"></a>GradientDirection enums
-
-    **GradientDirection**  is used to describe the gradient direction.
-
-    <a name="table205151453908"></a>
-    <table><thead align="left"><tr id="row1451635313012"><th class="cellrowborder" valign="top" width="41.68%" id="mcps1.1.3.1.1"><p id="p105161053106"><a name="p105161053106"></a><a name="p105161053106"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="58.32000000000001%" id="mcps1.1.3.1.2"><p id="p2516253904"><a name="p2516253904"></a><a name="p2516253904"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row751616531208"><td class="cellrowborder" valign="top" width="41.68%" headers="mcps1.1.3.1.1 "><p id="p451619537013"><a name="p451619537013"></a><a name="p451619537013"></a>Left</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="58.32000000000001%" headers="mcps1.1.3.1.2 "><p id="p9516165316017"><a name="p9516165316017"></a><a name="p9516165316017"></a>The gradient direction is from right to left.</p>
-    </td>
-    </tr>
-    <tr id="row205161453607"><td class="cellrowborder" valign="top" width="41.68%" headers="mcps1.1.3.1.1 "><p id="p25164531602"><a name="p25164531602"></a><a name="p25164531602"></a>Top</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="58.32000000000001%" headers="mcps1.1.3.1.2 "><p id="p145171353407"><a name="p145171353407"></a><a name="p145171353407"></a>The gradient direction is from bottom to top.</p>
-    </td>
-    </tr>
-    <tr id="row951712539020"><td class="cellrowborder" valign="top" width="41.68%" headers="mcps1.1.3.1.1 "><p id="p2517753403"><a name="p2517753403"></a><a name="p2517753403"></a>Right</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="58.32000000000001%" headers="mcps1.1.3.1.2 "><p id="p1451795314015"><a name="p1451795314015"></a><a name="p1451795314015"></a>The gradient direction is from left to right.</p>
-    </td>
-    </tr>
-    <tr id="row55178538020"><td class="cellrowborder" valign="top" width="41.68%" headers="mcps1.1.3.1.1 "><p id="p4517165319018"><a name="p4517165319018"></a><a name="p4517165319018"></a>Bottom</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="58.32000000000001%" headers="mcps1.1.3.1.2 "><p id="p1351716531803"><a name="p1351716531803"></a><a name="p1351716531803"></a>The gradient direction is from top to bottom.</p>
-    </td>
-    </tr>
-    <tr id="row105177531901"><td class="cellrowborder" valign="top" width="41.68%" headers="mcps1.1.3.1.1 "><p id="p1951714531201"><a name="p1951714531201"></a><a name="p1951714531201"></a>LeftTop</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="58.32000000000001%" headers="mcps1.1.3.1.2 "><p id="p451711531005"><a name="p451711531005"></a><a name="p451711531005"></a>The gradient direction is upper left.</p>
-    </td>
-    </tr>
-    <tr id="row0518153801"><td class="cellrowborder" valign="top" width="41.68%" headers="mcps1.1.3.1.1 "><p id="p175181953303"><a name="p175181953303"></a><a name="p175181953303"></a>LeftBottom</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="58.32000000000001%" headers="mcps1.1.3.1.2 "><p id="p25181453605"><a name="p25181453605"></a><a name="p25181453605"></a>The gradient direction is lower left.</p>
-    </td>
-    </tr>
-    <tr id="row133247299114"><td class="cellrowborder" valign="top" width="41.68%" headers="mcps1.1.3.1.1 "><p id="p932512291613"><a name="p932512291613"></a><a name="p932512291613"></a>RightTop</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="58.32000000000001%" headers="mcps1.1.3.1.2 "><p id="p132513291318"><a name="p132513291318"></a><a name="p132513291318"></a>The gradient direction is upper right.</p>
-    </td>
-    </tr>
-    <tr id="row85839321130"><td class="cellrowborder" valign="top" width="41.68%" headers="mcps1.1.3.1.1 "><p id="p1858333212316"><a name="p1858333212316"></a><a name="p1858333212316"></a>RightBottom</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="58.32000000000001%" headers="mcps1.1.3.1.2 "><p id="p258313321431"><a name="p258313321431"></a><a name="p258313321431"></a>The gradient direction is lower right.</p>
-    </td>
-    </tr>
-    <tr id="row19740746235"><td class="cellrowborder" valign="top" width="41.68%" headers="mcps1.1.3.1.1 "><p id="p1474014467315"><a name="p1474014467315"></a><a name="p1474014467315"></a>None</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="58.32000000000001%" headers="mcps1.1.3.1.2 "><p id="p12741646333"><a name="p12741646333"></a><a name="p12741646333"></a>No gradient.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section5724154094916"></a>
+
+## Attributes
+
+
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| linearGradient | {<br/>angle?:&nbsp;[Angle](../../ui/ts-types.md),<br/>direction?:GradientDirection,<br/>colors:&nbsp;Array<[ColorStop](../../ui/ts-types.md)><br/>repeating?:&nbsp;boolean<br/>} | - | Linear&nbsp;gradient.<br/>**angle**:&nbsp;angle&nbsp;of&nbsp;the&nbsp;linear&nbsp;gradient.<br/>**direction**:&nbsp;direction&nbsp;of&nbsp;the&nbsp;linear&nbsp;gradient.<br/>**colors**:&nbsp;description&nbsp;of&nbsp;the&nbsp;gradient&nbsp;colors.<br/>**repeating**:&nbsp;whether&nbsp;the&nbsp;colors&nbsp;are&nbsp;repeated. |
+| sweepGradient | {<br/>center:&nbsp;Point,<br/>start?:&nbsp;angle,<br/>end?:&nbsp;angle,<br/>colors:&nbsp;Array<[ColorStop](../../ui/ts-types.md)><br/>repeating?:&nbsp;boolean<br/>} | - | Angle&nbsp;gradient.<br/>**center**:&nbsp;center&nbsp;point&nbsp;of&nbsp;the&nbsp;angle&nbsp;gradient.<br/>**start**:&nbsp;start&nbsp;point&nbsp;of&nbsp;the&nbsp;angle&nbsp;gradient.<br/>**end**:&nbsp;end&nbsp;point&nbsp;of&nbsp;the&nbsp;angle&nbsp;gradient.<br/>**colors**:&nbsp;description&nbsp;of&nbsp;the&nbsp;gradient&nbsp;colors.<br/>**repeating**:&nbsp;whether&nbsp;the&nbsp;colors&nbsp;are&nbsp;repeated. |
+| radialGradient | {<br/>center:&nbsp;Point,<br/>radius:&nbsp;Length,<br/>colors:&nbsp;Array<[ColorStop](../../ui/ts-types.md)><br/>repeating:&nbsp;boolean<br/>} | - | Radial&nbsp;gradient.<br/>**center**:&nbsp;center&nbsp;point&nbsp;of&nbsp;the&nbsp;radial&nbsp;gradient.<br/>**radius**:&nbsp;radius&nbsp;of&nbsp;the&nbsp;radial&nbsp;gradient.<br/>**colors**:&nbsp;description&nbsp;of&nbsp;the&nbsp;gradient&nbsp;colors.<br/>**repeating**:&nbsp;whether&nbsp;the&nbsp;colors&nbsp;are&nbsp;repeated. |
+
+
+- GradientDirection enums
+  **GradientDirection** is used to describe the gradient direction.
+
+    | Name | Description | 
+  | -------- | -------- |
+  | Left | The&nbsp;gradient&nbsp;direction&nbsp;is&nbsp;from&nbsp;right&nbsp;to&nbsp;left. | 
+  | Top | The&nbsp;gradient&nbsp;direction&nbsp;is&nbsp;from&nbsp;bottom&nbsp;to&nbsp;top. | 
+  | Right | The&nbsp;gradient&nbsp;direction&nbsp;is&nbsp;from&nbsp;left&nbsp;to&nbsp;right. | 
+  | Bottom | The&nbsp;gradient&nbsp;direction&nbsp;is&nbsp;from&nbsp;top&nbsp;to&nbsp;bottom. | 
+  | LeftTop | The&nbsp;gradient&nbsp;direction&nbsp;is&nbsp;upper&nbsp;left. | 
+  | LeftBottom | The&nbsp;gradient&nbsp;direction&nbsp;is&nbsp;lower&nbsp;left. | 
+  | RightTop | The&nbsp;gradient&nbsp;direction&nbsp;is&nbsp;upper&nbsp;right. | 
+  | RightBottom | The&nbsp;gradient&nbsp;direction&nbsp;is&nbsp;lower&nbsp;right. | 
+  | None | No&nbsp;gradient. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -182,5 +80,4 @@ struct ColorGradientExample {
 }
 ```
 
-![](figures/colorgradient.png)
-
+![en-us_image_0000001212218484](figures/en-us_image_0000001212218484.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md
index 941a38b140b9b86cb767935e9895a676dfed1c8e..c62278b652e26902bd50fe1e62723c1cd48a11ae 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md
@@ -1,71 +1,29 @@
-# Grid<a name="EN-US_TOPIC_0000001192755130"></a>
+# Grid
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->-   This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
->-   The column width and column gap in the grid layout are determined by the nearest parent component  **GridContainer**. The component tree that uses grid attributes must contain one  **GridContainer**  or more.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> - This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+> 
+> - The column width and column gap in the grid layout are determined by the nearest parent component **GridContainer**. The component tree that uses grid attributes must contain one **GridContainer** or more.
+
+
+## Required Permissions
 
 None
 
-## Attributes<a name="section6820191711316"></a>
-
-<a name="table1265031910316"></a>
-<table><thead align="left"><tr id="row9650111916319"><th class="cellrowborder" valign="top" width="15.42%" id="mcps1.1.5.1.1"><p id="p18651919153114"><a name="p18651919153114"></a><a name="p18651919153114"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="23.880000000000003%" id="mcps1.1.5.1.2"><p id="p965116197315"><a name="p965116197315"></a><a name="p965116197315"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="9.55%" id="mcps1.1.5.1.3"><p id="p4651181953113"><a name="p4651181953113"></a><a name="p4651181953113"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="51.15%" id="mcps1.1.5.1.4"><p id="p6651191918319"><a name="p6651191918319"></a><a name="p6651191918319"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1165131943114"><td class="cellrowborder" valign="top" width="15.42%" headers="mcps1.1.5.1.1 "><p id="p10511918121510"><a name="p10511918121510"></a><a name="p10511918121510"></a>useSizeType</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.880000000000003%" headers="mcps1.1.5.1.2 "><p id="p2511181812157"><a name="p2511181812157"></a><a name="p2511181812157"></a>{</p>
-<p id="p1151191816156"><a name="p1151191816156"></a><a name="p1151191816156"></a>xs?: number | { span: number, offset: number },</p>
-<p id="p451101841519"><a name="p451101841519"></a><a name="p451101841519"></a>sm?: number | { span: number, offset: number },</p>
-<p id="p12511171851518"><a name="p12511171851518"></a><a name="p12511171851518"></a>md?: number | { span: number, offset: number },</p>
-<p id="p951171851514"><a name="p951171851514"></a><a name="p951171851514"></a>lg?: number | { span: number, offset: number }</p>
-<p id="p45111418191517"><a name="p45111418191517"></a><a name="p45111418191517"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.55%" headers="mcps1.1.5.1.3 "><p id="p10511518201518"><a name="p10511518201518"></a><a name="p10511518201518"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="51.15%" headers="mcps1.1.5.1.4 "><p id="p684393617229"><a name="p684393617229"></a><a name="p684393617229"></a>Number of occupied columns and offset columns for a specific device width type. <strong id="b984216415178"><a name="b984216415178"></a><a name="b984216415178"></a>span</strong> indicates the number of occupied columns, and <strong id="b198914651713"><a name="b198914651713"></a><a name="b198914651713"></a>offset</strong> indicates the number of offset columns.</p>
-<p id="p251151841510"><a name="p251151841510"></a><a name="p251151841510"></a>If the value is of the number type, only the number of columns can be set. If the value is in the format of {"span": 1, "offset": 0}, both the number of occupied columns and the number of offset columns need to be set.</p>
-<a name="ul2612171925511"></a><a name="ul2612171925511"></a><ul id="ul2612171925511"><li><strong id="b9505132215189"><a name="b9505132215189"></a><a name="b9505132215189"></a>xs</strong> indicates that the device width type is <strong id="b1800143718188"><a name="b1800143718188"></a><a name="b1800143718188"></a>SizeType.XS</strong>.</li><li><strong id="b14586121313194"><a name="b14586121313194"></a><a name="b14586121313194"></a>sm</strong> indicates that the device width type is <strong id="b25921113151918"><a name="b25921113151918"></a><a name="b25921113151918"></a>SizeType.SM</strong>.</li></ul>
-<a name="ul2246226185512"></a><a name="ul2246226185512"></a><ul id="ul2246226185512"><li><strong id="b109119226192"><a name="b109119226192"></a><a name="b109119226192"></a>md</strong> indicates that the device width type is <strong id="b791132215193"><a name="b791132215193"></a><a name="b791132215193"></a>SizeType.MD</strong>.</li><li><strong id="b662193131916"><a name="b662193131916"></a><a name="b662193131916"></a>lg</strong> indicates that the device width type is <strong id="b46243120198"><a name="b46243120198"></a><a name="b46243120198"></a>SizeType.LG</strong>.</li></ul>
-</td>
-</tr>
-<tr id="row472mcpsimp"><td class="cellrowborder" valign="top" width="15.42%" headers="mcps1.1.5.1.1 "><p id="p160914118157"><a name="p160914118157"></a><a name="p160914118157"></a>gridSpan</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.880000000000003%" headers="mcps1.1.5.1.2 "><p id="p136091811101519"><a name="p136091811101519"></a><a name="p136091811101519"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.55%" headers="mcps1.1.5.1.3 "><p id="p360921112150"><a name="p360921112150"></a><a name="p360921112150"></a>1</p>
-</td>
-<td class="cellrowborder" valign="top" width="51.15%" headers="mcps1.1.5.1.4 "><p id="p176091311181517"><a name="p176091311181517"></a><a name="p176091311181517"></a>Default number of occupied columns, that is, the number of occupied columns when <strong id="b6649102618447"><a name="b6649102618447"></a><a name="b6649102618447"></a>span</strong> in <strong id="b19930913182017"><a name="b19930913182017"></a><a name="b19930913182017"></a>useSizeType</strong> is not set.</p>
-<div class="note" id="note155021950101610"><a name="note155021950101610"></a><a name="note155021950101610"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p20503115041613"><a name="p20503115041613"></a><a name="p20503115041613"></a>If the <strong id="b16051041164415"><a name="b16051041164415"></a><a name="b16051041164415"></a>span</strong> attribute is set, the component width is determined by the grid layout.</p>
-</div></div>
-</td>
-</tr>
-<tr id="row481mcpsimp"><td class="cellrowborder" valign="top" width="15.42%" headers="mcps1.1.5.1.1 "><p id="p3156334151515"><a name="p3156334151515"></a><a name="p3156334151515"></a>gridOffset</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.880000000000003%" headers="mcps1.1.5.1.2 "><p id="p16156143420150"><a name="p16156143420150"></a><a name="p16156143420150"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.55%" headers="mcps1.1.5.1.3 "><p id="p1615611347155"><a name="p1615611347155"></a><a name="p1615611347155"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="51.15%" headers="mcps1.1.5.1.4 "><p id="p515683491513"><a name="p515683491513"></a><a name="p515683491513"></a>Default number of offset columns, that is, the number of offset columns in the start direction of the parent component (which is also the nth column that the component is in) when <strong id="b3400101818454"><a name="b3400101818454"></a><a name="b3400101818454"></a>offset</strong> in <strong id="b14440314112111"><a name="b14440314112111"></a><a name="b14440314112111"></a>useSizeType</strong> is not set.</p>
-<div class="note" id="note31561434121517"><a name="note31561434121517"></a><a name="note31561434121517"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p1315613431519"><a name="p1315613431519"></a><a name="p1315613431519"></a>1. After this attribute is set, the horizontal layout of the current component does not follow the original layout of the parent component. Instead, it offsets along the start direction of the parent component.</p>
-<p id="p3156203412152"><a name="p3156203412152"></a><a name="p3156203412152"></a>2. Offset = (Column width + Gap) x Number of columns</p>
-<p id="p16156113416159"><a name="p16156113416159"></a><a name="p16156113416159"></a>3. After this attribute is set, sibling components will be arranged relatively to this component, as in the relative layout.</p>
-</div></div>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section1976245813394"></a>
+
+## Attributes
+
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| useSizeType | {<br/>xs?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;},<br/>sm?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;},<br/>md?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;},<br/>lg?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;}<br/>} | - | Number&nbsp;of&nbsp;occupied&nbsp;columns&nbsp;and&nbsp;offset&nbsp;columns&nbsp;for&nbsp;a&nbsp;specific&nbsp;device&nbsp;width&nbsp;type.&nbsp;**span**&nbsp;indicates&nbsp;the&nbsp;number&nbsp;of&nbsp;occupied&nbsp;columns,&nbsp;and&nbsp;**offset**&nbsp;indicates&nbsp;the&nbsp;number&nbsp;of&nbsp;offset&nbsp;columns.<br/>If&nbsp;the&nbsp;value&nbsp;is&nbsp;of&nbsp;the&nbsp;number&nbsp;type,&nbsp;only&nbsp;the&nbsp;number&nbsp;of&nbsp;columns&nbsp;can&nbsp;be&nbsp;set.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;in&nbsp;the&nbsp;format&nbsp;of&nbsp;{"span":&nbsp;1,&nbsp;"offset":&nbsp;0},&nbsp;both&nbsp;the&nbsp;number&nbsp;of&nbsp;occupied&nbsp;columns&nbsp;and&nbsp;the&nbsp;number&nbsp;of&nbsp;offset&nbsp;columns&nbsp;need&nbsp;to&nbsp;be&nbsp;set.<br/>-&nbsp;**xs**&nbsp;indicates&nbsp;that&nbsp;the&nbsp;device&nbsp;width&nbsp;type&nbsp;is&nbsp;**SizeType.XS**.<br/>-&nbsp;**sm**&nbsp;indicates&nbsp;that&nbsp;the&nbsp;device&nbsp;width&nbsp;type&nbsp;is&nbsp;**SizeType.SM**.<br/>-&nbsp;**md**&nbsp;indicates&nbsp;that&nbsp;the&nbsp;device&nbsp;width&nbsp;type&nbsp;is&nbsp;**SizeType.MD**.<br/>-&nbsp;**lg**&nbsp;indicates&nbsp;that&nbsp;the&nbsp;device&nbsp;width&nbsp;type&nbsp;is&nbsp;**SizeType.LG**. | 
+| gridSpan | number | 1 | Default&nbsp;number&nbsp;of&nbsp;occupied&nbsp;columns,&nbsp;that&nbsp;is,&nbsp;the&nbsp;number&nbsp;of&nbsp;occupied&nbsp;columns&nbsp;when&nbsp;**span**&nbsp;in&nbsp;**useSizeType**&nbsp;is&nbsp;not&nbsp;set.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;If&nbsp;the&nbsp;**span**&nbsp;attribute&nbsp;is&nbsp;set,&nbsp;the&nbsp;component&nbsp;width&nbsp;is&nbsp;determined&nbsp;by&nbsp;the&nbsp;grid&nbsp;layout. | 
+| gridOffset | number | 0 | Default&nbsp;number&nbsp;of&nbsp;offset&nbsp;columns,&nbsp;that&nbsp;is,&nbsp;the&nbsp;number&nbsp;of&nbsp;offset&nbsp;columns&nbsp;in&nbsp;the&nbsp;start&nbsp;direction&nbsp;of&nbsp;the&nbsp;parent&nbsp;component&nbsp;(which&nbsp;is&nbsp;also&nbsp;the&nbsp;nth&nbsp;column&nbsp;that&nbsp;the&nbsp;component&nbsp;is&nbsp;in)&nbsp;when&nbsp;**offset**&nbsp;in&nbsp;**useSizeType**&nbsp;is&nbsp;not&nbsp;set.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;1.&nbsp;After&nbsp;this&nbsp;attribute&nbsp;is&nbsp;set,&nbsp;the&nbsp;horizontal&nbsp;layout&nbsp;of&nbsp;the&nbsp;current&nbsp;component&nbsp;does&nbsp;not&nbsp;follow&nbsp;the&nbsp;original&nbsp;layout&nbsp;of&nbsp;the&nbsp;parent&nbsp;component.&nbsp;Instead,&nbsp;it&nbsp;offsets&nbsp;along&nbsp;the&nbsp;start&nbsp;direction&nbsp;of&nbsp;the&nbsp;parent&nbsp;component.<br/>>&nbsp;<br/>>&nbsp;2.&nbsp;Offset&nbsp;=&nbsp;(Column&nbsp;width&nbsp;+&nbsp;Gap)&nbsp;x&nbsp;Number&nbsp;of&nbsp;columns<br/>>&nbsp;<br/>>&nbsp;3.&nbsp;After&nbsp;this&nbsp;attribute&nbsp;is&nbsp;set,&nbsp;sibling&nbsp;components&nbsp;will&nbsp;be&nbsp;arranged&nbsp;relatively&nbsp;to&nbsp;this&nbsp;component,&nbsp;as&nbsp;in&nbsp;the&nbsp;relative&nbsp;layout. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -110,12 +68,11 @@ struct GridContainerExample1 {
 }
 ```
 
-**Figure  1**  Device width type SM<a name="fig20276133417719"></a>  
-![](figures/device-width-type-sm.png "device-width-type-sm")
-
-**Figure  2**  Device width type MD<a name="fig677595214820"></a>  
-![](figures/device-width-type-md.png "device-width-type-md")
+  **Figure1** Device width type SM
+  ![en-us_image_0000001256858405](figures/en-us_image_0000001256858405.png)
 
-**Figure  3**  Device width type LG<a name="fig15900112016917"></a>  
-![](figures/device-width-type-lg.png "device-width-type-lg")
+  **Figure2** Device width type MD
+  ![en-us_image_0000001257058415](figures/en-us_image_0000001257058415.png)
 
+  **Figure3** Device width type LG
+  ![en-us_image_0000001212378416](figures/en-us_image_0000001212378416.png)
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
new file mode 100644
index 0000000000000000000000000000000000000000..6e47ced759df2a67842ece1c9f67a4b455786df2
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md
@@ -0,0 +1,69 @@
+# Hover Effect
+
+
+> ![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.
+
+
+## Required Permissions
+
+None
+
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| hoverEffect | HoverEffect | HoverEffect.Auto | Hover&nbsp;effect&nbsp;of&nbsp;the&nbsp;component&nbsp;in&nbsp;hover&nbsp;state. | 
+
+- HoverEffect enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Auto | Default&nbsp;hover&nbsp;effect. | 
+  | Scale | Scale&nbsp;effect. | 
+  | Board | Fade-in&nbsp;and&nbsp;fade-out&nbsp;effect. | 
+  | None | No&nbsp;effect. | 
+
+
+## Example
+
+  
+```
+@Entry
+@Component
+struct HoverExample {
+  @State isHoverVal: boolean = false
+
+  build() {
+    Column({ space: 5 }) {
+      Column({ space: 5 }) {
+        Text('Scale').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 80 })
+        Column()
+          .width('80%').height(200).backgroundColor(Color.Gray)
+          .position({ x: 40, y: 120 })
+          .hoverEffect(HoverEffect.Scale)
+          .onHover((isHover: boolean) => {
+            console.info('Scale' + isHover)
+            this.isHoverVal = isHover
+          })
+
+        Text('Board').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 380 })
+        Column()
+          .width('80%').height(200).backgroundColor(Color.Gray)
+          .hoverEffect(HoverEffect.Board)
+          .position({ x: 40, y: 420 })
+          .onHover((isHover: boolean) => {
+            console.info('HoverEffect.Board')
+            this.isHoverVal = isHover
+          })
+      }
+      .hoverEffect(HoverEffect.None)
+      .width('100%').height('100%').border({ width: 1 })
+      .onHover((isHover: boolean) => {
+        console.info('HoverEffect.None')
+        this.isHoverVal = isHover
+      })
+    }
+  }
+}
+```
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
index a5e0d3e0add09867b6380c00df0b8dc8323c36d3..25e98c6ea8dd47def3c7d1cd7deaf44db3e1f4ee 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
@@ -1,133 +1,35 @@
-# Image Effect Configuration<a name="EN-US_TOPIC_0000001237715097"></a>
+# Image Effect Configuration
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## Attributes<a name="section6820191711316"></a>
-
-<a name="table3076mcpsimp"></a>
-<table><thead align="left"><tr id="row3084mcpsimp"><th class="cellrowborder" valign="top" width="15.409999999999998%" id="mcps1.1.5.1.1"><p id="p3086mcpsimp"><a name="p3086mcpsimp"></a><a name="p3086mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="20.91%" id="mcps1.1.5.1.2"><p id="p3088mcpsimp"><a name="p3088mcpsimp"></a><a name="p3088mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.5.1.3"><p id="p3090mcpsimp"><a name="p3090mcpsimp"></a><a name="p3090mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="40.56%" id="mcps1.1.5.1.4"><p id="p3094mcpsimp"><a name="p3094mcpsimp"></a><a name="p3094mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row3095mcpsimp"><td class="cellrowborder" valign="top" width="15.409999999999998%" headers="mcps1.1.5.1.1 "><p id="p3097mcpsimp"><a name="p3097mcpsimp"></a><a name="p3097mcpsimp"></a>blur</p>
-</td>
-<td class="cellrowborder" valign="top" width="20.91%" headers="mcps1.1.5.1.2 "><p id="p3099mcpsimp"><a name="p3099mcpsimp"></a><a name="p3099mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.5.1.3 "><p id="p3101mcpsimp"><a name="p3101mcpsimp"></a><a name="p3101mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="40.56%" headers="mcps1.1.5.1.4 "><p id="p3105mcpsimp"><a name="p3105mcpsimp"></a><a name="p3105mcpsimp"></a>Adds the content blurring for the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is <strong id="b0674181121916"><a name="b0674181121916"></a><a name="b0674181121916"></a>0</strong>, the content is not blurred.</p>
-</td>
-</tr>
-<tr id="row3106mcpsimp"><td class="cellrowborder" valign="top" width="15.409999999999998%" headers="mcps1.1.5.1.1 "><p id="p3108mcpsimp"><a name="p3108mcpsimp"></a><a name="p3108mcpsimp"></a>backdropBlur</p>
-</td>
-<td class="cellrowborder" valign="top" width="20.91%" headers="mcps1.1.5.1.2 "><p id="p3110mcpsimp"><a name="p3110mcpsimp"></a><a name="p3110mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.5.1.3 "><p id="p3112mcpsimp"><a name="p3112mcpsimp"></a><a name="p3112mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="40.56%" headers="mcps1.1.5.1.4 "><p id="p3116mcpsimp"><a name="p3116mcpsimp"></a><a name="p3116mcpsimp"></a>Adds the background blur effect for the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is <strong id="b9400146151918"><a name="b9400146151918"></a><a name="b9400146151918"></a>0</strong>, the background is not blurred.</p>
-</td>
-</tr>
-<tr id="row3494113815448"><td class="cellrowborder" valign="top" width="15.409999999999998%" headers="mcps1.1.5.1.1 "><p id="p12494113824411"><a name="p12494113824411"></a><a name="p12494113824411"></a>shadow</p>
-</td>
-<td class="cellrowborder" valign="top" width="20.91%" headers="mcps1.1.5.1.2 "><p id="p58413718164"><a name="p58413718164"></a><a name="p58413718164"></a>{</p>
-<p id="p06801858103018"><a name="p06801858103018"></a><a name="p06801858103018"></a>radius: number,</p>
-<p id="p243903193118"><a name="p243903193118"></a><a name="p243903193118"></a>color?: Color,</p>
-<p id="p13872673316"><a name="p13872673316"></a><a name="p13872673316"></a>offsetX?: number,</p>
-<p id="p15182141141615"><a name="p15182141141615"></a><a name="p15182141141615"></a>offsetY?: number</p>
-<p id="p154953383449"><a name="p154953383449"></a><a name="p154953383449"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.5.1.3 "><p id="p34951138174417"><a name="p34951138174417"></a><a name="p34951138174417"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="40.56%" headers="mcps1.1.5.1.4 "><p id="p74951380449"><a name="p74951380449"></a><a name="p74951380449"></a>Adds the shadow effect to the current component. The input parameters are the fuzzy radius (mandatory), shadow color (optional; gray by default), X-axis offset (optional and 0 by default), and Y-axis offset (optional; 0 by default). The offset unit is px.</p>
-</td>
-</tr>
-<tr id="row6209195195414"><td class="cellrowborder" valign="top" width="15.409999999999998%" headers="mcps1.1.5.1.1 "><p id="p192105516548"><a name="p192105516548"></a><a name="p192105516548"></a>grayscale</p>
-</td>
-<td class="cellrowborder" valign="top" width="20.91%" headers="mcps1.1.5.1.2 "><p id="p521035185410"><a name="p521035185410"></a><a name="p521035185410"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.5.1.3 "><p id="p8210852546"><a name="p8210852546"></a><a name="p8210852546"></a>0.0</p>
-</td>
-<td class="cellrowborder" valign="top" width="40.56%" headers="mcps1.1.5.1.4 "><p id="p1421016514547"><a name="p1421016514547"></a><a name="p1421016514547"></a>The value indicates the grayscale conversion ratio. If the input value is <strong id="b106011217122317"><a name="b106011217122317"></a><a name="b106011217122317"></a>1.0</strong>, the image is converted into a grayscale image. If the input value is <strong id="b74651527202317"><a name="b74651527202317"></a><a name="b74651527202317"></a>0.0</strong>, the image does not change. If the input value is between <strong id="b07771658122518"><a name="b07771658122518"></a><a name="b07771658122518"></a>0.0</strong> and <strong id="b87231515266"><a name="b87231515266"></a><a name="b87231515266"></a>1.0</strong>, the effect changes in linear mode. The unit is percentage. The unit is percentage.</p>
-</td>
-</tr>
-<tr id="row202641830144914"><td class="cellrowborder" valign="top" width="15.409999999999998%" headers="mcps1.1.5.1.1 "><p id="p14265113004918"><a name="p14265113004918"></a><a name="p14265113004918"></a>brightness</p>
-</td>
-<td class="cellrowborder" valign="top" width="20.91%" headers="mcps1.1.5.1.2 "><p id="p3265163018493"><a name="p3265163018493"></a><a name="p3265163018493"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.5.1.3 "><p id="p226533020499"><a name="p226533020499"></a><a name="p226533020499"></a>1.0</p>
-</td>
-<td class="cellrowborder" valign="top" width="40.56%" headers="mcps1.1.5.1.4 "><p id="p8265730194912"><a name="p8265730194912"></a><a name="p8265730194912"></a>Adds a brightness to the current component. The input parameter is a brightness ratio. The value <strong id="b1647514093114"><a name="b1647514093114"></a><a name="b1647514093114"></a>1</strong> indicates no effects. The value <strong id="b86951213155511"><a name="b86951213155511"></a><a name="b86951213155511"></a>0</strong> indicates the complete darkness. If the value is less than <strong id="b989705893111"><a name="b989705893111"></a><a name="b989705893111"></a>1</strong>, the brightness decreases. If the value is greater than <strong id="b114435211326"><a name="b114435211326"></a><a name="b114435211326"></a>1</strong>, the brightness increases. A larger value indicates a higher brightness.</p>
-</td>
-</tr>
-<tr id="row1723333504910"><td class="cellrowborder" valign="top" width="15.409999999999998%" headers="mcps1.1.5.1.1 "><p id="p323373520495"><a name="p323373520495"></a><a name="p323373520495"></a>saturate</p>
-</td>
-<td class="cellrowborder" valign="top" width="20.91%" headers="mcps1.1.5.1.2 "><p id="p42348356497"><a name="p42348356497"></a><a name="p42348356497"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.5.1.3 "><p id="p123413356491"><a name="p123413356491"></a><a name="p123413356491"></a>1.0</p>
-</td>
-<td class="cellrowborder" valign="top" width="40.56%" headers="mcps1.1.5.1.4 "><p id="p323412350499"><a name="p323412350499"></a><a name="p323412350499"></a>Adds the saturation effect to the current component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. When the input value is <strong id="b1134517113910"><a name="b1134517113910"></a><a name="b1134517113910"></a>1</strong>, the source image is displayed. When the input value is greater than <strong id="b3873226203911"><a name="b3873226203911"></a><a name="b3873226203911"></a>1</strong>, a higher percentage of the chromatic component indicates a higher saturation. When the input value is less than <strong id="b109807619453"><a name="b109807619453"></a><a name="b109807619453"></a>1</strong>, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage.</p>
-</td>
-</tr>
-<tr id="row852642445014"><td class="cellrowborder" valign="top" width="15.409999999999998%" headers="mcps1.1.5.1.1 "><p id="p252742465011"><a name="p252742465011"></a><a name="p252742465011"></a>contrast</p>
-</td>
-<td class="cellrowborder" valign="top" width="20.91%" headers="mcps1.1.5.1.2 "><p id="p35277245503"><a name="p35277245503"></a><a name="p35277245503"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.5.1.3 "><p id="p7527824185013"><a name="p7527824185013"></a><a name="p7527824185013"></a>1.0</p>
-</td>
-<td class="cellrowborder" valign="top" width="40.56%" headers="mcps1.1.5.1.4 "><p id="p1652782475014"><a name="p1652782475014"></a><a name="p1652782475014"></a>Adds the contrast effect to the current component. The input parameter is a contrast value. If the value is <strong id="b1473145619494"><a name="b1473145619494"></a><a name="b1473145619494"></a>1</strong>, the source image is displayed. If the value is greater than <strong id="b1562516185018"><a name="b1562516185018"></a><a name="b1562516185018"></a>1</strong>, a larger value indicates a higher contrast and a clearer image. If the value is less than <strong id="b188170402509"><a name="b188170402509"></a><a name="b188170402509"></a>1</strong>, a smaller value indicates a lower contrast is. If the value is <strong id="b390541819511"><a name="b390541819511"></a><a name="b390541819511"></a>0</strong>, the image becomes all gray. The unit is percentage.</p>
-</td>
-</tr>
-<tr id="row111960118522"><td class="cellrowborder" valign="top" width="15.409999999999998%" headers="mcps1.1.5.1.1 "><p id="p41971316528"><a name="p41971316528"></a><a name="p41971316528"></a>invert</p>
-</td>
-<td class="cellrowborder" valign="top" width="20.91%" headers="mcps1.1.5.1.2 "><p id="p171973135210"><a name="p171973135210"></a><a name="p171973135210"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.5.1.3 "><p id="p17197101195218"><a name="p17197101195218"></a><a name="p17197101195218"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="40.56%" headers="mcps1.1.5.1.4 "><p id="p3476165475218"><a name="p3476165475218"></a><a name="p3476165475218"></a>Inverts the input image. The input parameter is an image inversion ratio. The value <strong id="b14161413529"><a name="b14161413529"></a><a name="b14161413529"></a>1</strong> indicates complete inversion. The value <strong id="b1662571385213"><a name="b1662571385213"></a><a name="b1662571385213"></a>0</strong> indicates that the image does not change. The unit is percentage.</p>
-</td>
-</tr>
-<tr id="row916618513522"><td class="cellrowborder" valign="top" width="15.409999999999998%" headers="mcps1.1.5.1.1 "><p id="p116716519529"><a name="p116716519529"></a><a name="p116716519529"></a>colorBlend <sup id="sup4981191915316"><a name="sup4981191915316"></a><a name="sup4981191915316"></a>8+</sup></p>
-</td>
-<td class="cellrowborder" valign="top" width="20.91%" headers="mcps1.1.5.1.2 "><p id="p78661214533"><a name="p78661214533"></a><a name="p78661214533"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.5.1.3 "><p id="p61691512523"><a name="p61691512523"></a><a name="p61691512523"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="40.56%" headers="mcps1.1.5.1.4 "><p id="p71693515216"><a name="p71693515216"></a><a name="p71693515216"></a>Adds the color blend effect to the current component. The input parameter is the blended color.</p>
-</td>
-</tr>
-<tr id="row4632151055214"><td class="cellrowborder" valign="top" width="15.409999999999998%" headers="mcps1.1.5.1.1 "><p id="p1632161019520"><a name="p1632161019520"></a><a name="p1632161019520"></a>sepia</p>
-</td>
-<td class="cellrowborder" valign="top" width="20.91%" headers="mcps1.1.5.1.2 "><p id="p6633171075214"><a name="p6633171075214"></a><a name="p6633171075214"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.5.1.3 "><p id="p86331510165217"><a name="p86331510165217"></a><a name="p86331510165217"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="40.56%" headers="mcps1.1.5.1.4 "><p id="p10633111065216"><a name="p10633111065216"></a><a name="p10633111065216"></a>Converts the image color to sepia. The input parameter is an image inversion ratio. The value <strong id="b1359310473557"><a name="b1359310473557"></a><a name="b1359310473557"></a>1</strong> indicates the image is completely sepia. The value <strong id="b112966452564"><a name="b112966452564"></a><a name="b112966452564"></a>0</strong> indicates that the image does not change. The unit is percentage.</p>
-</td>
-</tr>
-<tr id="row19167191310544"><td class="cellrowborder" valign="top" width="15.409999999999998%" headers="mcps1.1.5.1.1 "><p id="p19167141365415"><a name="p19167141365415"></a><a name="p19167141365415"></a>hueRotate</p>
-</td>
-<td class="cellrowborder" valign="top" width="20.91%" headers="mcps1.1.5.1.2 "><p id="p11167121395413"><a name="p11167121395413"></a><a name="p11167121395413"></a>Angle</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.5.1.3 "><p id="p11681713135413"><a name="p11681713135413"></a><a name="p11681713135413"></a>0deg</p>
-</td>
-<td class="cellrowborder" valign="top" width="40.56%" headers="mcps1.1.5.1.4 "><p id="p9168613165411"><a name="p9168613165411"></a><a name="p9168613165411"></a>Adds the hue rotation effect to the current component. The input parameter is a rotation angle. If the input value is <strong id="b4873953115713"><a name="b4873953115713"></a><a name="b4873953115713"></a>0deg</strong>, the image does not change (because the default rotation angle is <strong id="b1940868135812"><a name="b1940868135812"></a><a name="b1940868135812"></a>0deg</strong>). The input parameter does not have the maximum value. If the value exceeds <strong id="b191751105815"><a name="b191751105815"></a><a name="b191751105815"></a>360deg</strong>, the image is rotated one ore more circles.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section4278134412416"></a>
+
+## Attributes
+
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| blur | number | - | Adds&nbsp;the&nbsp;content&nbsp;blurring&nbsp;for&nbsp;the&nbsp;current&nbsp;component.&nbsp;The&nbsp;input&nbsp;parameter&nbsp;is&nbsp;the&nbsp;blur&nbsp;radius.&nbsp;The&nbsp;larger&nbsp;the&nbsp;radius&nbsp;is,&nbsp;the&nbsp;more&nbsp;blurred&nbsp;the&nbsp;content&nbsp;is.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;**0**,&nbsp;the&nbsp;content&nbsp;is&nbsp;not&nbsp;blurred. | 
+| backdropBlur | number | - | Adds&nbsp;the&nbsp;background&nbsp;blur&nbsp;effect&nbsp;for&nbsp;the&nbsp;current&nbsp;component.&nbsp;The&nbsp;input&nbsp;parameter&nbsp;is&nbsp;the&nbsp;blur&nbsp;radius.&nbsp;The&nbsp;larger&nbsp;the&nbsp;radius&nbsp;is,&nbsp;the&nbsp;more&nbsp;blurred&nbsp;the&nbsp;background&nbsp;is.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;**0**,&nbsp;the&nbsp;background&nbsp;is&nbsp;not&nbsp;blurred. |
+| shadow | {<br/>radius:&nbsp;number,<br/>color?:&nbsp;Color,<br/>offsetX?:&nbsp;number,<br/>offsetY?:&nbsp;number<br/>} | - | Adds&nbsp;the&nbsp;shadow&nbsp;effect&nbsp;to&nbsp;the&nbsp;current&nbsp;component.&nbsp;The&nbsp;input&nbsp;parameters&nbsp;are&nbsp;the&nbsp;fuzzy&nbsp;radius&nbsp;(mandatory),&nbsp;shadow&nbsp;color&nbsp;(optional;&nbsp;gray&nbsp;by&nbsp;default),&nbsp;X-axis&nbsp;offset&nbsp;(optional&nbsp;and&nbsp;0&nbsp;by&nbsp;default),&nbsp;and&nbsp;Y-axis&nbsp;offset&nbsp;(optional;&nbsp;0&nbsp;by&nbsp;default).&nbsp;The&nbsp;offset&nbsp;unit&nbsp;is&nbsp;px. | 
+| grayscale | number | 0.0 | The&nbsp;value&nbsp;indicates&nbsp;the&nbsp;grayscale&nbsp;conversion&nbsp;ratio.&nbsp;If&nbsp;the&nbsp;input&nbsp;value&nbsp;is&nbsp;**1.0**,&nbsp;the&nbsp;image&nbsp;is&nbsp;converted&nbsp;into&nbsp;a&nbsp;grayscale&nbsp;image.&nbsp;If&nbsp;the&nbsp;input&nbsp;value&nbsp;is&nbsp;**0.0**,&nbsp;the&nbsp;image&nbsp;does&nbsp;not&nbsp;change.&nbsp;If&nbsp;the&nbsp;input&nbsp;value&nbsp;is&nbsp;between&nbsp;**0.0**&nbsp;and&nbsp;**1.0**,&nbsp;the&nbsp;effect&nbsp;changes&nbsp;in&nbsp;linear&nbsp;mode.&nbsp;The&nbsp;unit&nbsp;is&nbsp;percentage.&nbsp;The&nbsp;unit&nbsp;is&nbsp;percentage. | 
+| brightness | number | 1.0 | Adds&nbsp;a&nbsp;brightness&nbsp;to&nbsp;the&nbsp;current&nbsp;component.&nbsp;The&nbsp;input&nbsp;parameter&nbsp;is&nbsp;a&nbsp;brightness&nbsp;ratio.&nbsp;The&nbsp;value&nbsp;**1**&nbsp;indicates&nbsp;no&nbsp;effects.&nbsp;The&nbsp;value&nbsp;**0**&nbsp;indicates&nbsp;the&nbsp;complete&nbsp;darkness.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;less&nbsp;than&nbsp;**1**,&nbsp;the&nbsp;brightness&nbsp;decreases.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;greater&nbsp;than&nbsp;**1**,&nbsp;the&nbsp;brightness&nbsp;increases.&nbsp;A&nbsp;larger&nbsp;value&nbsp;indicates&nbsp;a&nbsp;higher&nbsp;brightness. | 
+| saturate | number | 1.0 | Adds&nbsp;the&nbsp;saturation&nbsp;effect&nbsp;to&nbsp;the&nbsp;current&nbsp;component.&nbsp;The&nbsp;saturation&nbsp;is&nbsp;the&nbsp;ratio&nbsp;of&nbsp;the&nbsp;chromatic&nbsp;component&nbsp;to&nbsp;the&nbsp;achromatic&nbsp;component&nbsp;(gray)&nbsp;in&nbsp;a&nbsp;color.&nbsp;When&nbsp;the&nbsp;input&nbsp;value&nbsp;is&nbsp;**1**,&nbsp;the&nbsp;source&nbsp;image&nbsp;is&nbsp;displayed.&nbsp;When&nbsp;the&nbsp;input&nbsp;value&nbsp;is&nbsp;greater&nbsp;than&nbsp;**1**,&nbsp;a&nbsp;higher&nbsp;percentage&nbsp;of&nbsp;the&nbsp;chromatic&nbsp;component&nbsp;indicates&nbsp;a&nbsp;higher&nbsp;saturation.&nbsp;When&nbsp;the&nbsp;input&nbsp;value&nbsp;is&nbsp;less&nbsp;than&nbsp;**1**,&nbsp;a&nbsp;higher&nbsp;percentage&nbsp;of&nbsp;the&nbsp;achromatic&nbsp;component&nbsp;indicates&nbsp;a&nbsp;lower&nbsp;saturation.&nbsp;The&nbsp;unit&nbsp;is&nbsp;percentage. | 
+| contrast | number | 1.0 | Adds&nbsp;the&nbsp;contrast&nbsp;effect&nbsp;to&nbsp;the&nbsp;current&nbsp;component.&nbsp;The&nbsp;input&nbsp;parameter&nbsp;is&nbsp;a&nbsp;contrast&nbsp;value.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;**1**,&nbsp;the&nbsp;source&nbsp;image&nbsp;is&nbsp;displayed.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;greater&nbsp;than&nbsp;**1**,&nbsp;a&nbsp;larger&nbsp;value&nbsp;indicates&nbsp;a&nbsp;higher&nbsp;contrast&nbsp;and&nbsp;a&nbsp;clearer&nbsp;image.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;less&nbsp;than&nbsp;**1**,&nbsp;a&nbsp;smaller&nbsp;value&nbsp;indicates&nbsp;a&nbsp;lower&nbsp;contrast&nbsp;is.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;**0**,&nbsp;the&nbsp;image&nbsp;becomes&nbsp;all&nbsp;gray.&nbsp;The&nbsp;unit&nbsp;is&nbsp;percentage. | 
+| invert | number | 0 | Inverts&nbsp;the&nbsp;input&nbsp;image.&nbsp;The&nbsp;input&nbsp;parameter&nbsp;is&nbsp;an&nbsp;image&nbsp;inversion&nbsp;ratio.&nbsp;The&nbsp;value&nbsp;**1**&nbsp;indicates&nbsp;complete&nbsp;inversion.&nbsp;The&nbsp;value&nbsp;**0**&nbsp;indicates&nbsp;that&nbsp;the&nbsp;image&nbsp;does&nbsp;not&nbsp;change.&nbsp;The&nbsp;unit&nbsp;is&nbsp;percentage. | 
+| colorBlend&nbsp;<sup>8+</sup> | Color | - | Adds&nbsp;the&nbsp;color&nbsp;blend&nbsp;effect&nbsp;to&nbsp;the&nbsp;current&nbsp;component.&nbsp;The&nbsp;input&nbsp;parameter&nbsp;is&nbsp;the&nbsp;blended&nbsp;color. | 
+| sepia | number | 0 | Converts&nbsp;the&nbsp;image&nbsp;color&nbsp;to&nbsp;sepia.&nbsp;The&nbsp;input&nbsp;parameter&nbsp;is&nbsp;an&nbsp;image&nbsp;inversion&nbsp;ratio.&nbsp;The&nbsp;value&nbsp;**1**&nbsp;indicates&nbsp;the&nbsp;image&nbsp;is&nbsp;completely&nbsp;sepia.&nbsp;The&nbsp;value&nbsp;**0**&nbsp;indicates&nbsp;that&nbsp;the&nbsp;image&nbsp;does&nbsp;not&nbsp;change.&nbsp;The&nbsp;unit&nbsp;is&nbsp;percentage. | 
+| hueRotate | Angle | 0deg | Adds&nbsp;the&nbsp;hue&nbsp;rotation&nbsp;effect&nbsp;to&nbsp;the&nbsp;current&nbsp;component.&nbsp;The&nbsp;input&nbsp;parameter&nbsp;is&nbsp;a&nbsp;rotation&nbsp;angle.&nbsp;If&nbsp;the&nbsp;input&nbsp;value&nbsp;is&nbsp;**0deg**,&nbsp;the&nbsp;image&nbsp;does&nbsp;not&nbsp;change&nbsp;(because&nbsp;the&nbsp;default&nbsp;rotation&nbsp;angle&nbsp;is&nbsp;**0deg**).&nbsp;The&nbsp;input&nbsp;parameter&nbsp;does&nbsp;not&nbsp;have&nbsp;the&nbsp;maximum&nbsp;value.&nbsp;If&nbsp;the&nbsp;value&nbsp;exceeds&nbsp;**360deg**,&nbsp;the&nbsp;image&nbsp;is&nbsp;rotated&nbsp;one&nbsp;ore&nbsp;more&nbsp;circles. |
+
+
+## Example
+
 
 ```
 @Entry
@@ -172,5 +74,4 @@ Column({space: 10}) {
 }
 ```
 
-![](figures/2222.png)
-
+![en-us_image_0000001212218448](figures/en-us_image_0000001212218448.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
index cb9ef84f00640333a638c95a2bf1bb7e00cb1179..7b599ad4112cfc8f50c103b232508eaa227bad7d 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
@@ -1,49 +1,26 @@
-# Layout Constraints<a name="EN-US_TOPIC_0000001192915124"></a>
+# Layout Constraints
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## Attributes<a name="section6820191711316"></a>
-
-<a name="table2938mcpsimp"></a>
-<table><thead align="left"><tr id="row2946mcpsimp"><th class="cellrowborder" valign="top" width="19.781978197819782%" id="mcps1.1.5.1.1"><p id="p2948mcpsimp"><a name="p2948mcpsimp"></a><a name="p2948mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="15.38153815381538%" id="mcps1.1.5.1.2"><p id="p2950mcpsimp"><a name="p2950mcpsimp"></a><a name="p2950mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="8.720872087208722%" id="mcps1.1.5.1.3"><p id="p2952mcpsimp"><a name="p2952mcpsimp"></a><a name="p2952mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="56.11561156115612%" id="mcps1.1.5.1.4"><p id="p2956mcpsimp"><a name="p2956mcpsimp"></a><a name="p2956mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row2968mcpsimp"><td class="cellrowborder" valign="top" width="19.781978197819782%" headers="mcps1.1.5.1.1 "><p id="p2970mcpsimp"><a name="p2970mcpsimp"></a><a name="p2970mcpsimp"></a>aspectRatio</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.38153815381538%" headers="mcps1.1.5.1.2 "><p id="p2972mcpsimp"><a name="p2972mcpsimp"></a><a name="p2972mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="8.720872087208722%" headers="mcps1.1.5.1.3 "><p id="p2974mcpsimp"><a name="p2974mcpsimp"></a><a name="p2974mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="56.11561156115612%" headers="mcps1.1.5.1.4 "><p id="p2978mcpsimp"><a name="p2978mcpsimp"></a><a name="p2978mcpsimp"></a>Specifies an aspect ratio for the current component.</p>
-</td>
-</tr>
-<tr id="row2979mcpsimp"><td class="cellrowborder" valign="top" width="19.781978197819782%" headers="mcps1.1.5.1.1 "><p id="p2981mcpsimp"><a name="p2981mcpsimp"></a><a name="p2981mcpsimp"></a>displayPriority</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.38153815381538%" headers="mcps1.1.5.1.2 "><p id="p2983mcpsimp"><a name="p2983mcpsimp"></a><a name="p2983mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="8.720872087208722%" headers="mcps1.1.5.1.3 "><p id="p2985mcpsimp"><a name="p2985mcpsimp"></a><a name="p2985mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="56.11561156115612%" headers="mcps1.1.5.1.4 "><p id="p76035219317"><a name="p76035219317"></a><a name="p76035219317"></a>Sets a display priority for the current component in the layout container. When the space of the parent container is insufficient, the component with a lower priority is hidden.</p>
-<div class="note" id="note5552927146"><a name="note5552927146"></a><a name="note5552927146"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p86651195410"><a name="p86651195410"></a><a name="p86651195410"></a>This parameter is valid only for the Row/Column/Flex (single-row) container component.</p>
-</div></div>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section12073184715"></a>
+
+## Attributes
+
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| aspectRatio | number | - | Specifies&nbsp;an&nbsp;aspect&nbsp;ratio&nbsp;for&nbsp;the&nbsp;current&nbsp;component. | 
+| displayPriority | number | - | Sets&nbsp;a&nbsp;display&nbsp;priority&nbsp;for&nbsp;the&nbsp;current&nbsp;component&nbsp;in&nbsp;the&nbsp;layout&nbsp;container.&nbsp;When&nbsp;the&nbsp;space&nbsp;of&nbsp;the&nbsp;parent&nbsp;container&nbsp;is&nbsp;insufficient,&nbsp;the&nbsp;component&nbsp;with&nbsp;a&nbsp;lower&nbsp;priority&nbsp;is&nbsp;hidden.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;This&nbsp;parameter&nbsp;is&nbsp;valid&nbsp;only&nbsp;for&nbsp;the&nbsp;Row/Column/Flex&nbsp;(single-row)&nbsp;container&nbsp;component. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -93,11 +70,12 @@ struct AspectRatioExample {
 }
 ```
 
-**Figure  1**  Portrait display<a name="fig113193013010"></a>  
-![](figures/portrait-display.gif "portrait-display")
+  **Figure1** Portrait display
+  ![en-us_image_0000001256978379](figures/en-us_image_0000001256978379.gif)
+
+  **Figure2** Landscape display
+  ![en-us_image_0000001212218476](figures/en-us_image_0000001212218476.gif)
 
-**Figure  2**  Landscape display<a name="fig1245012267316"></a>  
-![](figures/landscape-display.gif "landscape-display")
 
 ```
 class ContainerInfo {
@@ -150,5 +128,4 @@ struct DisplayPriorityExample {
 
 ```
 
-![](figures/displaypriorityexample.gif)
-
+![en-us_image_0000001212058504](figures/en-us_image_0000001212058504.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md
index a3617a10670716c6dfa63416a42f49fede8b21c8..f5154e37c8765f6424c9a856a4b1b733f6c5c9f0 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md
@@ -1,117 +1,37 @@
-# Location<a name="EN-US_TOPIC_0000001193075116"></a>
+# Location
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## Attributes<a name="section8832145623"></a>
-
-<a name="table2377mcpsimp"></a>
-<table><thead align="left"><tr id="row2385mcpsimp"><th class="cellrowborder" valign="top" width="17.341734173417343%" id="mcps1.1.5.1.1"><p id="p2387mcpsimp"><a name="p2387mcpsimp"></a><a name="p2387mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="28.672867286728675%" id="mcps1.1.5.1.2"><p id="p2389mcpsimp"><a name="p2389mcpsimp"></a><a name="p2389mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="14.35143514351435%" id="mcps1.1.5.1.3"><p id="p2391mcpsimp"><a name="p2391mcpsimp"></a><a name="p2391mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="39.63396339633963%" id="mcps1.1.5.1.4"><p id="p2395mcpsimp"><a name="p2395mcpsimp"></a><a name="p2395mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row2396mcpsimp"><td class="cellrowborder" valign="top" width="17.341734173417343%" headers="mcps1.1.5.1.1 "><p id="p2398mcpsimp"><a name="p2398mcpsimp"></a><a name="p2398mcpsimp"></a>align</p>
-</td>
-<td class="cellrowborder" valign="top" width="28.672867286728675%" headers="mcps1.1.5.1.2 "><p id="p2400mcpsimp"><a name="p2400mcpsimp"></a><a name="p2400mcpsimp"></a><a href="ts-appendix-enums.md#section1145418513159">Alignment</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="14.35143514351435%" headers="mcps1.1.5.1.3 "><p id="p2402mcpsimp"><a name="p2402mcpsimp"></a><a name="p2402mcpsimp"></a>Center</p>
-</td>
-<td class="cellrowborder" valign="top" width="39.63396339633963%" headers="mcps1.1.5.1.4 "><p id="p3491422033"><a name="p3491422033"></a><a name="p3491422033"></a>Alignment of the component content. This attribute is valid only when the values of <strong id="b0492753916"><a name="b0492753916"></a><a name="b0492753916"></a>width</strong> and <strong id="b2748593390"><a name="b2748593390"></a><a name="b2748593390"></a>height</strong> are greater than the size of the component content.</p>
-</td>
-</tr>
-<tr id="row2407mcpsimp"><td class="cellrowborder" valign="top" width="17.341734173417343%" headers="mcps1.1.5.1.1 "><p id="p2409mcpsimp"><a name="p2409mcpsimp"></a><a name="p2409mcpsimp"></a>direction</p>
-</td>
-<td class="cellrowborder" valign="top" width="28.672867286728675%" headers="mcps1.1.5.1.2 "><p id="p2411mcpsimp"><a name="p2411mcpsimp"></a><a name="p2411mcpsimp"></a><a href="#li12312485585">Direction</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="14.35143514351435%" headers="mcps1.1.5.1.3 "><p id="p2413mcpsimp"><a name="p2413mcpsimp"></a><a name="p2413mcpsimp"></a>Auto</p>
-</td>
-<td class="cellrowborder" valign="top" width="39.63396339633963%" headers="mcps1.1.5.1.4 "><p id="p1980615130316"><a name="p1980615130316"></a><a name="p1980615130316"></a>Horizontal layout of the component. For details about the options, see <a href="#li12312485585">Direction enums</a>.</p>
-</td>
-</tr>
-<tr id="row2418mcpsimp"><td class="cellrowborder" valign="top" width="17.341734173417343%" headers="mcps1.1.5.1.1 "><p id="p2420mcpsimp"><a name="p2420mcpsimp"></a><a name="p2420mcpsimp"></a>position</p>
-</td>
-<td class="cellrowborder" valign="top" width="28.672867286728675%" headers="mcps1.1.5.1.2 "><p id="p16757125154718"><a name="p16757125154718"></a><a name="p16757125154718"></a>{</p>
-<p id="p183016439471"><a name="p183016439471"></a><a name="p183016439471"></a>x: Length,</p>
-<p id="p764913452474"><a name="p764913452474"></a><a name="p764913452474"></a>y: Length</p>
-<p id="p2422mcpsimp"><a name="p2422mcpsimp"></a><a name="p2422mcpsimp"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.35143514351435%" headers="mcps1.1.5.1.3 "><p id="p2424mcpsimp"><a name="p2424mcpsimp"></a><a name="p2424mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="39.63396339633963%" headers="mcps1.1.5.1.4 "><p id="p2428mcpsimp"><a name="p2428mcpsimp"></a><a name="p2428mcpsimp"></a>Offset of the component anchor point relative to the top start edge of the parent component. The offset is expressed using absolute values. When laying out components, this attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.</p>
-</td>
-</tr>
-<tr id="row1147212479269"><td class="cellrowborder" valign="top" width="17.341734173417343%" headers="mcps1.1.5.1.1 "><p id="p16472184713266"><a name="p16472184713266"></a><a name="p16472184713266"></a>markAnchor</p>
-</td>
-<td class="cellrowborder" valign="top" width="28.672867286728675%" headers="mcps1.1.5.1.2 "><p id="p123675110476"><a name="p123675110476"></a><a name="p123675110476"></a>{</p>
-<p id="p1896253114716"><a name="p1896253114716"></a><a name="p1896253114716"></a>x: Length,</p>
-<p id="p46656558470"><a name="p46656558470"></a><a name="p46656558470"></a>y: Length</p>
-<p id="p106108613276"><a name="p106108613276"></a><a name="p106108613276"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.35143514351435%" headers="mcps1.1.5.1.3 "><p id="p12862191814214"><a name="p12862191814214"></a><a name="p12862191814214"></a>{</p>
-<p id="p98521729"><a name="p98521729"></a><a name="p98521729"></a>x: 0,</p>
-<p id="p88483417217"><a name="p88483417217"></a><a name="p88483417217"></a>y: 0</p>
-<p id="p1646264492820"><a name="p1646264492820"></a><a name="p1646264492820"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="39.63396339633963%" headers="mcps1.1.5.1.4 "><p id="p44721347162616"><a name="p44721347162616"></a><a name="p44721347162616"></a>Anchor point of the component for positioning. The top start edge of the component is used as the reference point for offset.</p>
-</td>
-</tr>
-<tr id="row2429mcpsimp"><td class="cellrowborder" valign="top" width="17.341734173417343%" headers="mcps1.1.5.1.1 "><p id="p2431mcpsimp"><a name="p2431mcpsimp"></a><a name="p2431mcpsimp"></a>offset</p>
-</td>
-<td class="cellrowborder" valign="top" width="28.672867286728675%" headers="mcps1.1.5.1.2 "><p id="p1925713118484"><a name="p1925713118484"></a><a name="p1925713118484"></a>{</p>
-<p id="p14734111364812"><a name="p14734111364812"></a><a name="p14734111364812"></a>x: Length,</p>
-<p id="p834931664818"><a name="p834931664818"></a><a name="p834931664818"></a>y: Length</p>
-<p id="p2433mcpsimp"><a name="p2433mcpsimp"></a><a name="p2433mcpsimp"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.35143514351435%" headers="mcps1.1.5.1.3 "><p id="p12906114817217"><a name="p12906114817217"></a><a name="p12906114817217"></a>{</p>
-<p id="p116940501223"><a name="p116940501223"></a><a name="p116940501223"></a>x: 0,</p>
-<p id="p196153523"><a name="p196153523"></a><a name="p196153523"></a>y: 0</p>
-<p id="p2435mcpsimp"><a name="p2435mcpsimp"></a><a name="p2435mcpsimp"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="39.63396339633963%" headers="mcps1.1.5.1.4 "><p id="p2439mcpsimp"><a name="p2439mcpsimp"></a><a name="p2439mcpsimp"></a>Coordinate offset of the relative layout. This attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li12312485585"></a>Direction enums
-
-    <a name="table197411342193817"></a>
-    <table><thead align="left"><tr id="row374111426387"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p15741134223813"><a name="p15741134223813"></a><a name="p15741134223813"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p474164215383"><a name="p474164215383"></a><a name="p474164215383"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1774194233815"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1674111428389"><a name="p1674111428389"></a><a name="p1674111428389"></a>Ltr</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p18741134243810"><a name="p18741134243810"></a><a name="p18741134243810"></a>Components are arranged from left to right.</p>
-    </td>
-    </tr>
-    <tr id="row1741442113814"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p87418424388"><a name="p87418424388"></a><a name="p87418424388"></a>Rtl</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p6741104213389"><a name="p6741104213389"></a><a name="p6741104213389"></a>Components are arranged from right to left.</p>
-    </td>
-    </tr>
-    <tr id="row12741542203810"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p12742342103816"><a name="p12742342103816"></a><a name="p12742342103816"></a>Auto</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p157426425387"><a name="p157426425387"></a><a name="p157426425387"></a>The default layout direction is used.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section12073184715"></a>
+
+## Attributes
+
+
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| align | [Alignment](ts-appendix-enums.md#alignment-enums) | Center | Alignment&nbsp;of&nbsp;the&nbsp;component&nbsp;content.&nbsp;This&nbsp;attribute&nbsp;is&nbsp;valid&nbsp;only&nbsp;when&nbsp;the&nbsp;values&nbsp;of&nbsp;**width**&nbsp;and&nbsp;**height**&nbsp;are&nbsp;greater&nbsp;than&nbsp;the&nbsp;size&nbsp;of&nbsp;the&nbsp;component&nbsp;content. |
+| direction | Direction | Auto | Horizontal&nbsp;layout&nbsp;of&nbsp;the&nbsp;component.&nbsp;For&nbsp;details&nbsp;about&nbsp;the&nbsp;options,&nbsp;see&nbsp;**Direction**&nbsp;enums. |
+| position | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | - | Offset&nbsp;of&nbsp;the&nbsp;component&nbsp;anchor&nbsp;point&nbsp;relative&nbsp;to&nbsp;the&nbsp;top&nbsp;start&nbsp;edge&nbsp;of&nbsp;the&nbsp;parent&nbsp;component.&nbsp;The&nbsp;offset&nbsp;is&nbsp;expressed&nbsp;using&nbsp;absolute&nbsp;values.&nbsp;When&nbsp;laying&nbsp;out&nbsp;components,&nbsp;this&nbsp;attribute&nbsp;does&nbsp;not&nbsp;affect&nbsp;the&nbsp;layout&nbsp;of&nbsp;the&nbsp;parent&nbsp;component.&nbsp;It&nbsp;only&nbsp;adjusts&nbsp;the&nbsp;component&nbsp;position&nbsp;during&nbsp;drawing. |
+| markAnchor | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} | Anchor&nbsp;point&nbsp;of&nbsp;the&nbsp;component&nbsp;for&nbsp;positioning.&nbsp;The&nbsp;top&nbsp;start&nbsp;edge&nbsp;of&nbsp;the&nbsp;component&nbsp;is&nbsp;used&nbsp;as&nbsp;the&nbsp;reference&nbsp;point&nbsp;for&nbsp;offset. |
+| offset | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} | Coordinate&nbsp;offset&nbsp;of&nbsp;the&nbsp;relative&nbsp;layout.&nbsp;This&nbsp;attribute&nbsp;does&nbsp;not&nbsp;affect&nbsp;the&nbsp;layout&nbsp;of&nbsp;the&nbsp;parent&nbsp;component.&nbsp;It&nbsp;only&nbsp;adjusts&nbsp;the&nbsp;component&nbsp;position&nbsp;during&nbsp;drawing. |
+
+
+- Direction enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Ltr | Components&nbsp;are&nbsp;arranged&nbsp;from&nbsp;left&nbsp;to&nbsp;right. | 
+  | Rtl | Components&nbsp;are&nbsp;arranged&nbsp;from&nbsp;right&nbsp;to&nbsp;left. | 
+  | Auto | The&nbsp;default&nbsp;layout&nbsp;direction&nbsp;is&nbsp;used. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -144,7 +64,8 @@ struct PositionExample {
 }
 ```
 
-![](figures/position.gif)
+![en-us_image_0000001212218456](figures/en-us_image_0000001212218456.gif)
+
 
 ```
 @Entry
@@ -197,5 +118,4 @@ struct PositionExample2 {
 }
 ```
 
-![](figures/position2.gif)
-
+![en-us_image_0000001256858409](figures/en-us_image_0000001256858409.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md
index 1103e964b2be11cae8ab1872dbfeab81838b3c32..c786ef89d6bb43988a3f2039886d3ff8665e5dc9 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md
@@ -1,41 +1,29 @@
-# Opacity<a name="EN-US_TOPIC_0000001237475067"></a>
+# Opacity
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 The attributes described in this topic are used to set the opacity of a component.
 
-## Required Permissions<a name="section781125411508"></a>
+
+## Required Permissions
 
 None
 
-## Attributes<a name="section6820191711316"></a>
-
-<a name="table581mcpsimp"></a>
-<table><thead align="left"><tr id="row587mcpsimp"><th class="cellrowborder" valign="top" width="13.969999999999999%" id="mcps1.1.5.1.1"><p id="p589mcpsimp"><a name="p589mcpsimp"></a><a name="p589mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="17.419999999999998%" id="mcps1.1.5.1.2"><p id="p591mcpsimp"><a name="p591mcpsimp"></a><a name="p591mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="10.35%" id="mcps1.1.5.1.3"><p id="p283717104462"><a name="p283717104462"></a><a name="p283717104462"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="58.26%" id="mcps1.1.5.1.4"><p id="p593mcpsimp"><a name="p593mcpsimp"></a><a name="p593mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row594mcpsimp"><td class="cellrowborder" valign="top" width="13.969999999999999%" headers="mcps1.1.5.1.1 "><p id="p596mcpsimp"><a name="p596mcpsimp"></a><a name="p596mcpsimp"></a>opacity</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.419999999999998%" headers="mcps1.1.5.1.2 "><p id="p598mcpsimp"><a name="p598mcpsimp"></a><a name="p598mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="10.35%" headers="mcps1.1.5.1.3 "><p id="p8837131054617"><a name="p8837131054617"></a><a name="p8837131054617"></a>1</p>
-</td>
-<td class="cellrowborder" valign="top" width="58.26%" headers="mcps1.1.5.1.4 "><p id="p600mcpsimp"><a name="p600mcpsimp"></a><a name="p600mcpsimp"></a>Opacity of a component. The value ranges from <strong id="b122851614162713"><a name="b122851614162713"></a><a name="b122851614162713"></a>0</strong> to <strong id="b6291121492717"><a name="b6291121492717"></a><a name="b6291121492717"></a>1</strong>. The value <strong id="b10291111432714"><a name="b10291111432714"></a><a name="b10291111432714"></a>1</strong> means opaque, and <strong id="b12291191492719"><a name="b12291191492719"></a><a name="b12291191492719"></a>0</strong> means completely transparent.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section4278134412416"></a>
 
+## Attributes
+
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| opacity | number | 1 | Opacity&nbsp;of&nbsp;a&nbsp;component.&nbsp;The&nbsp;value&nbsp;ranges&nbsp;from&nbsp;**0**&nbsp;to&nbsp;**1**.&nbsp;The&nbsp;value&nbsp;**1**&nbsp;means&nbsp;opaque,&nbsp;and&nbsp;**0**&nbsp;means&nbsp;completely&nbsp;transparent. | 
+
+
+## Example
+
+  
 ```
 @Entry
 @Component
@@ -55,5 +43,4 @@ struct OpacityExample {
 }
 ```
 
-![](figures/opacity.gif)
-
+![en-us_image_0000001256858385](figures/en-us_image_0000001256858385.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md
index 005b5faf00fb2dbec0b720fd7e7cbd700617773d..f07ffeb31db4e19ff7af1f79c739e7a2d387378d 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md
@@ -1,45 +1,25 @@
-# Overlay<a name="EN-US_TOPIC_0000001237355073"></a>
+# Overlay
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## Attributes<a name="section6820191711316"></a>
 
-<a name="table3548mcpsimp"></a>
-<table><thead align="left"><tr id="row3556mcpsimp"><th class="cellrowborder" valign="top" width="15.120000000000001%" id="mcps1.1.5.1.1"><p id="p3558mcpsimp"><a name="p3558mcpsimp"></a><a name="p3558mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="35.94%" id="mcps1.1.5.1.2"><p id="p3560mcpsimp"><a name="p3560mcpsimp"></a><a name="p3560mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="25.4%" id="mcps1.1.5.1.3"><p id="p3562mcpsimp"><a name="p3562mcpsimp"></a><a name="p3562mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="23.54%" id="mcps1.1.5.1.4"><p id="p3566mcpsimp"><a name="p3566mcpsimp"></a><a name="p3566mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row3567mcpsimp"><td class="cellrowborder" valign="top" width="15.120000000000001%" headers="mcps1.1.5.1.1 "><p id="p3569mcpsimp"><a name="p3569mcpsimp"></a><a name="p3569mcpsimp"></a>overlay</p>
-</td>
-<td class="cellrowborder" valign="top" width="35.94%" headers="mcps1.1.5.1.2 "><p id="p15143143013238"><a name="p15143143013238"></a><a name="p15143143013238"></a>title: string,</p>
-<p id="p346205712231"><a name="p346205712231"></a><a name="p346205712231"></a>options: {</p>
-<p id="p1022253413236"><a name="p1022253413236"></a><a name="p1022253413236"></a>align?: <a href="ts-appendix-enums.md#section1145418513159">Alignment</a>,</p>
-<p id="p750225072319"><a name="p750225072319"></a><a name="p750225072319"></a>offset?: {x: number, y: number}</p>
-<p id="p3571mcpsimp"><a name="p3571mcpsimp"></a><a name="p3571mcpsimp"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="25.4%" headers="mcps1.1.5.1.3 "><p id="p17678157182417"><a name="p17678157182417"></a><a name="p17678157182417"></a>{</p>
-<p id="p122176521265"><a name="p122176521265"></a><a name="p122176521265"></a>align: Alignment.Center,</p>
-<p id="p1987841519242"><a name="p1987841519242"></a><a name="p1987841519242"></a>offset: {0, 0}</p>
-<p id="p3573mcpsimp"><a name="p3573mcpsimp"></a><a name="p3573mcpsimp"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.54%" headers="mcps1.1.5.1.4 "><p id="p3577mcpsimp"><a name="p3577mcpsimp"></a><a name="p3577mcpsimp"></a>Mask added to the component. The mask has the same layout as the component.</p>
-</td>
-</tr>
-</tbody>
-</table>
+## Attributes
+
+
+| Name | Type | Default&nbsp;Value | Description |
+| -------- | -------- | -------- | -------- |
+| overlay | title:&nbsp;string,<br/>options:&nbsp;{<br/>align?:&nbsp;[Alignment](ts-appendix-enums.md#alignment-enums),<br/>offset?:&nbsp;{x:&nbsp;number,&nbsp;y:&nbsp;number}<br/>} | {<br/>align:&nbsp;Alignment.Center,<br/>offset:&nbsp;{0,&nbsp;0}<br/>} | Mask&nbsp;added&nbsp;to&nbsp;the&nbsp;component.&nbsp;The&nbsp;mask&nbsp;has&nbsp;the&nbsp;same&nbsp;layout&nbsp;as&nbsp;the&nbsp;component. |
+
+
+## Example
 
-## Example<a name="section4278134412416"></a>
 
 ```
 @Entry
@@ -61,5 +41,4 @@ struct OverlayExample {
 }
 ```
 
-![](figures/en-us_image_0000001194911566.png)
-
+![en-us_image_0000001212058472](figures/en-us_image_0000001212058472.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md
new file mode 100644
index 0000000000000000000000000000000000000000..0baadc21f6c8f99d56770f692e580d74b656154f
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md
@@ -0,0 +1,126 @@
+# Polymorphic Style
+
+
+> ![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.
+
+
+You can set state-specific styles for components.
+
+
+## Required Permissions
+
+None
+
+
+## Attributes
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| stateStyle | StateStyles | - | Sets&nbsp;the&nbsp;styles&nbsp;of&nbsp;a&nbsp;component&nbsp;for&nbsp;different&nbsp;states. | 
+
+- StateStyles<sup>8+</sup>
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | normal | ()=&gt;void | No | - | Style&nbsp;of&nbsp;the&nbsp;component&nbsp;when&nbsp;stateless. | 
+  | pressed | ()=&gt;void | No | - | Style&nbsp;of&nbsp;the&nbsp;component&nbsp;in&nbsp;the&nbsp;pressed&nbsp;state. | 
+  | disabled | ()=&gt;void | No | - | Style&nbsp;of&nbsp;the&nbsp;component&nbsp;in&nbsp;disabled&nbsp;state. | 
+
+
+## Example
+
+  
+```
+@Entry
+@Component
+struct StyleExample {
+  @State isEnable: boolean = true
+
+  @Styles pressedStyles() {
+        .backgroundColor("#ED6F21")
+        .borderRadius(10)
+        .borderStyle(BorderStyle.Dashed)
+        .borderWidth(2)
+        .borderColor("#33000000")
+        .width(120)
+        .height(30)
+        .opacity(1)
+  }
+
+  @Styles disabledStyles() {
+        .backgroundColor("#E5E5E5")
+        .borderRadius(10)
+        .borderStyle(BorderStyle.Solid)
+        .borderWidth(2)
+        .borderColor("#2a4c1919")
+        .width(90)
+        .height(25)
+        .opacity(1)
+  }
+
+  @Styles normalStyles() {
+        .backgroundColor("#0A59F7")
+        .borderRadius(10)
+        .borderStyle(BorderStyle.Solid)
+        .borderWidth(2)
+        .borderColor("#33000000")
+        .width(100)
+        .height(25)
+        .opacity(1)
+  }
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
+      Text("normal")
+        .fontSize(14)
+        .fontColor(Color.White)
+        .opacity(0.5)
+        .stateStyles({
+          normal: this.normalStyles,
+        })
+        .margin({ bottom: 20 })
+        .textAlign(TextAlign.Center)
+      Text("pressed")
+        .backgroundColor("#0A59F7")
+        .borderRadius(20)
+        .borderStyle(BorderStyle.Dotted)
+        .borderWidth(2)
+        .borderColor(Color.Red)
+        .width(100)
+        .height(25)
+        .opacity(1)
+        .fontSize(14)
+        .fontColor(Color.White)
+        .stateStyles({
+          pressed: this.pressedStyles,
+        })
+        .margin({ bottom: 20 })
+        .textAlign(TextAlign.Center)
+      Text(this.isEnable == true ? "effective" : "disabled")
+        .backgroundColor("#0A59F7")
+        .borderRadius(20)
+        .borderStyle(BorderStyle.Solid)
+        .borderWidth(2)
+        .borderColor(Color.Gray)
+        .width(100)
+        .height(25)
+        .opacity(1)
+        .fontSize(14)
+        .fontColor(Color.White)
+        .enabled(this.isEnable)
+        .stateStyles({
+          disabled: this.disabledStyles,
+        })
+        .textAlign(TextAlign.Center)
+      Text("control disabled")
+        .onClick(() => {
+          this.isEnable = !this.isEnable
+          console.log(`${this.isEnable}`)
+        })
+    }
+    .width(350).height(300)
+  }
+}
+```
+
+![en-us_image_0000001211898512](figures/en-us_image_0000001211898512.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
index e0ec8e6def24f08eecdacc1233f563abe4427a43..e3e1aa2400713a3b5a58bb45ede5385ed16b9173 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
@@ -1,272 +1,58 @@
-# Popup Control<a name="EN-US_TOPIC_0000001192755120"></a>
+# Popup Control
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## Attributes<a name="section6820191711316"></a>
 
-<a name="table3856mcpsimp"></a>
-<table><thead align="left"><tr id="row3864mcpsimp"><th class="cellrowborder" valign="top" width="12.088791120887912%" id="mcps1.1.5.1.1"><p id="p3866mcpsimp"><a name="p3866mcpsimp"></a><a name="p3866mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="42.165783421657835%" id="mcps1.1.5.1.2"><p id="p3868mcpsimp"><a name="p3868mcpsimp"></a><a name="p3868mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="9.849015098490153%" id="mcps1.1.5.1.3"><p id="p3870mcpsimp"><a name="p3870mcpsimp"></a><a name="p3870mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="35.896410358964104%" id="mcps1.1.5.1.4"><p id="p3874mcpsimp"><a name="p3874mcpsimp"></a><a name="p3874mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row3875mcpsimp"><td class="cellrowborder" valign="top" width="12.088791120887912%" headers="mcps1.1.5.1.1 "><p id="p18207172943415"><a name="p18207172943415"></a><a name="p18207172943415"></a>bindPopup</p>
-</td>
-<td class="cellrowborder" valign="top" width="42.165783421657835%" headers="mcps1.1.5.1.2 "><p id="p1895115541642"><a name="p1895115541642"></a><a name="p1895115541642"></a>show: boolean,</p>
-<p id="p831713614349"><a name="p831713614349"></a><a name="p831713614349"></a>popup: <a href="#table1488313583914">PopupOption</a> | <a href="#table192660141468">CustomPopupOption</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="9.849015098490153%" headers="mcps1.1.5.1.3 "><p id="p3881mcpsimp"><a name="p3881mcpsimp"></a><a name="p3881mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="35.896410358964104%" headers="mcps1.1.5.1.4 "><p id="p1032412610614"><a name="p1032412610614"></a><a name="p1032412610614"></a>Settings of the popup bound to a component.</p>
-<p id="p14394133110614"><a name="p14394133110614"></a><a name="p14394133110614"></a><strong id="b31631743193718"><a name="b31631743193718"></a><a name="b31631743193718"></a>show</strong>: whether to display the popup message on the creation page by default. The default value is <strong id="b4850184514390"><a name="b4850184514390"></a><a name="b4850184514390"></a>false</strong>.</p>
-<p id="p3885mcpsimp"><a name="p3885mcpsimp"></a><a name="p3885mcpsimp"></a>popup: parameters of the current popup window.</p>
-</td>
-</tr>
-</tbody>
-</table>
+## Attributes
 
--   PopupOption APIs
 
-    <a name="table1488313583914"></a>
-    <table><thead align="left"><tr id="row3883659398"><th class="cellrowborder" valign="top" width="17.723624975533372%" id="mcps1.1.6.1.1"><p id="p188835515399"><a name="p188835515399"></a><a name="p188835515399"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.82599334507731%" id="mcps1.1.6.1.2"><p id="p8883155173915"><a name="p8883155173915"></a><a name="p8883155173915"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="8.426306517909572%" id="mcps1.1.6.1.3"><p id="p58841456398"><a name="p58841456398"></a><a name="p58841456398"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.94950088079859%" id="mcps1.1.6.1.4"><p id="p118845512394"><a name="p118845512394"></a><a name="p118845512394"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="41.074574280681155%" id="mcps1.1.6.1.5"><p id="p688495143916"><a name="p688495143916"></a><a name="p688495143916"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1788414593919"><td class="cellrowborder" valign="top" width="17.723624975533372%" headers="mcps1.1.6.1.1 "><p id="p19916122516126"><a name="p19916122516126"></a><a name="p19916122516126"></a>message</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.82599334507731%" headers="mcps1.1.6.1.2 "><p id="p1191602581213"><a name="p1191602581213"></a><a name="p1191602581213"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.426306517909572%" headers="mcps1.1.6.1.3 "><p id="p189171725131212"><a name="p189171725131212"></a><a name="p189171725131212"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.94950088079859%" headers="mcps1.1.6.1.4 "><p id="p169171125151210"><a name="p169171125151210"></a><a name="p169171125151210"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="41.074574280681155%" headers="mcps1.1.6.1.5 "><p id="p159172251128"><a name="p159172251128"></a><a name="p159172251128"></a>Content of the popup message.</p>
-    </td>
-    </tr>
-    <tr id="row12940102711110"><td class="cellrowborder" valign="top" width="17.723624975533372%" headers="mcps1.1.6.1.1 "><p id="p1141114621219"><a name="p1141114621219"></a><a name="p1141114621219"></a>placementOnTop</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.82599334507731%" headers="mcps1.1.6.1.2 "><p id="p1714164681216"><a name="p1714164681216"></a><a name="p1714164681216"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.426306517909572%" headers="mcps1.1.6.1.3 "><p id="p214194641218"><a name="p214194641218"></a><a name="p214194641218"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.94950088079859%" headers="mcps1.1.6.1.4 "><p id="p13141184617129"><a name="p13141184617129"></a><a name="p13141184617129"></a>false</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="41.074574280681155%" headers="mcps1.1.6.1.5 "><p id="p1514117463122"><a name="p1514117463122"></a><a name="p1514117463122"></a>Whether to display the popup message above the component. The default value is <strong id="b8989131124619"><a name="b8989131124619"></a><a name="b8989131124619"></a>false</strong>.</p>
-    </td>
-    </tr>
-    <tr id="row39661446161412"><td class="cellrowborder" valign="top" width="17.723624975533372%" headers="mcps1.1.6.1.1 "><p id="p99661946111418"><a name="p99661946111418"></a><a name="p99661946111418"></a>primaryButton</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.82599334507731%" headers="mcps1.1.6.1.2 "><p id="p1723754771318"><a name="p1723754771318"></a><a name="p1723754771318"></a>{</p>
-    <p id="p1553014716310"><a name="p1553014716310"></a><a name="p1553014716310"></a>value: string,</p>
-    <p id="p2282164681314"><a name="p2282164681314"></a><a name="p2282164681314"></a>action: () =&gt; void</p>
-    <p id="p133191116156"><a name="p133191116156"></a><a name="p133191116156"></a>}</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.426306517909572%" headers="mcps1.1.6.1.3 "><p id="p19884115133910"><a name="p19884115133910"></a><a name="p19884115133910"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.94950088079859%" headers="mcps1.1.6.1.4 "><p id="p14884657397"><a name="p14884657397"></a><a name="p14884657397"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="41.074574280681155%" headers="mcps1.1.6.1.5 "><p id="p9884956396"><a name="p9884956396"></a><a name="p9884956396"></a>The first button.</p>
-    <p id="p665934132012"><a name="p665934132012"></a><a name="p665934132012"></a><strong id="b19248184444912"><a name="b19248184444912"></a><a name="b19248184444912"></a>value</strong>: text of the primary button in the popup.</p>
-    <p id="p16918824112213"><a name="p16918824112213"></a><a name="p16918824112213"></a><strong id="b12411740145417"><a name="b12411740145417"></a><a name="b12411740145417"></a>action</strong>: callback function for tapping the primary button.</p>
-    </td>
-    </tr>
-    <tr id="row129365741412"><td class="cellrowborder" valign="top" width="17.723624975533372%" headers="mcps1.1.6.1.1 "><p id="p1693115718143"><a name="p1693115718143"></a><a name="p1693115718143"></a>secondaryButton</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.82599334507731%" headers="mcps1.1.6.1.2 "><p id="p136435010156"><a name="p136435010156"></a><a name="p136435010156"></a>{</p>
-    <p id="p1676605014159"><a name="p1676605014159"></a><a name="p1676605014159"></a>value: string,</p>
-    <p id="p19529021620"><a name="p19529021620"></a><a name="p19529021620"></a>action: () =&gt; void</p>
-    <p id="p593145716140"><a name="p593145716140"></a><a name="p593145716140"></a>}</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.426306517909572%" headers="mcps1.1.6.1.3 "><p id="p993115771417"><a name="p993115771417"></a><a name="p993115771417"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.94950088079859%" headers="mcps1.1.6.1.4 "><p id="p7931572141"><a name="p7931572141"></a><a name="p7931572141"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="41.074574280681155%" headers="mcps1.1.6.1.5 "><p id="p694115711144"><a name="p694115711144"></a><a name="p694115711144"></a>Second button.</p>
-    <p id="p1974117152312"><a name="p1974117152312"></a><a name="p1974117152312"></a><strong id="b137532369568"><a name="b137532369568"></a><a name="b137532369568"></a>value</strong>: text of the secondary button in the popup.</p>
-    <p id="p1074127102315"><a name="p1074127102315"></a><a name="p1074127102315"></a><strong id="b08791247165611"><a name="b08791247165611"></a><a name="b08791247165611"></a>action</strong>: callback function for tapping the secondary button.</p>
-    </td>
-    </tr>
-    <tr id="row688418573919"><td class="cellrowborder" valign="top" width="17.723624975533372%" headers="mcps1.1.6.1.1 "><p id="p5884351394"><a name="p5884351394"></a><a name="p5884351394"></a>onStateChange</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.82599334507731%" headers="mcps1.1.6.1.2 "><p id="p591851741120"><a name="p591851741120"></a><a name="p591851741120"></a>(isVisible: boolean) =&gt; void</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="8.426306517909572%" headers="mcps1.1.6.1.3 "><p id="p186161912101511"><a name="p186161912101511"></a><a name="p186161912101511"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.94950088079859%" headers="mcps1.1.6.1.4 "><p id="p07051116181519"><a name="p07051116181519"></a><a name="p07051116181519"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="41.074574280681155%" headers="mcps1.1.6.1.5 "><p id="p6415111811517"><a name="p6415111811517"></a><a name="p6415111811517"></a>Callback for the popup status change event. The parameter <strong id="b2061192210116"><a name="b2061192210116"></a><a name="b2061192210116"></a>isVisible</strong> indicates the visibility of the popup.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| bindPopup | show:&nbsp;boolean,<br/>popup:&nbsp;PopupOption&nbsp;\|&nbsp;CustomPopupOption | - | Settings&nbsp;of&nbsp;the&nbsp;popup&nbsp;bound&nbsp;to&nbsp;a&nbsp;component.<br/>**show**:&nbsp;whether&nbsp;to&nbsp;display&nbsp;the&nbsp;popup&nbsp;on&nbsp;the&nbsp;creation&nbsp;page&nbsp;by&nbsp;default.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**false**.<br/>**popup**:&nbsp;parameters&nbsp;of&nbsp;the&nbsp;current&nbsp;popup. | 
 
--   CustomPopupOption APIs<sup>8+</sup>
 
-    <a name="table8167205313"></a>
-    <table><thead align="left"><tr id="row101672001439"><th class="cellrowborder" valign="top" width="14.542963397925234%" id="mcps1.1.6.1.1"><p id="p14167501332"><a name="p14167501332"></a><a name="p14167501332"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="19.69074182814641%" id="mcps1.1.6.1.2"><p id="p21671208319"><a name="p21671208319"></a><a name="p21671208319"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="6.605989430416913%" id="mcps1.1.6.1.3"><p id="p1116810533"><a name="p1116810533"></a><a name="p1116810533"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.080250538265807%" id="mcps1.1.6.1.4"><p id="p7168304311"><a name="p7168304311"></a><a name="p7168304311"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="49.08005480524565%" id="mcps1.1.6.1.5"><p id="p41681101310"><a name="p41681101310"></a><a name="p41681101310"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row616810020312"><td class="cellrowborder" valign="top" width="14.542963397925234%" headers="mcps1.1.6.1.1 "><p id="p10168170437"><a name="p10168170437"></a><a name="p10168170437"></a>builder</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.69074182814641%" headers="mcps1.1.6.1.2 "><p id="p916817019315"><a name="p916817019315"></a><a name="p916817019315"></a>() =&gt; any</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.605989430416913%" headers="mcps1.1.6.1.3 "><p id="p816815015312"><a name="p816815015312"></a><a name="p816815015312"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.080250538265807%" headers="mcps1.1.6.1.4 "><p id="p171689012316"><a name="p171689012316"></a><a name="p171689012316"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="49.08005480524565%" headers="mcps1.1.6.1.5 "><p id="p121681005319"><a name="p121681005319"></a><a name="p121681005319"></a>Builder of the tooltip content.</p>
-    </td>
-    </tr>
-    <tr id="row1416810938"><td class="cellrowborder" valign="top" width="14.542963397925234%" headers="mcps1.1.6.1.1 "><p id="p1616880734"><a name="p1616880734"></a><a name="p1616880734"></a>placement</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.69074182814641%" headers="mcps1.1.6.1.2 "><p id="p18168704316"><a name="p18168704316"></a><a name="p18168704316"></a><a href="#li1521155325910">Placement</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.605989430416913%" headers="mcps1.1.6.1.3 "><p id="p8168505319"><a name="p8168505319"></a><a name="p8168505319"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.080250538265807%" headers="mcps1.1.6.1.4 "><p id="p16168140035"><a name="p16168140035"></a><a name="p16168140035"></a>Placement.Bottom</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="49.08005480524565%" headers="mcps1.1.6.1.5 "><p id="p1116890238"><a name="p1116890238"></a><a name="p1116890238"></a>Preferred position of the tooltip component. If the set position is insufficient for holding the component, it will be automatically adjusted.</p>
-    </td>
-    </tr>
-    <tr id="row1016870938"><td class="cellrowborder" valign="top" width="14.542963397925234%" headers="mcps1.1.6.1.1 "><p id="p181681101431"><a name="p181681101431"></a><a name="p181681101431"></a>maskColor</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.69074182814641%" headers="mcps1.1.6.1.2 "><p id="p816812013313"><a name="p816812013313"></a><a name="p816812013313"></a><a href="../../toctopics/en-us_topic_0000001237475069.md#section1326744510818">Color</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.605989430416913%" headers="mcps1.1.6.1.3 "><p id="p016813016317"><a name="p016813016317"></a><a name="p016813016317"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.080250538265807%" headers="mcps1.1.6.1.4 "><p id="p1016813019310"><a name="p1016813019310"></a><a name="p1016813019310"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="49.08005480524565%" headers="mcps1.1.6.1.5 "><p id="p116819013310"><a name="p116819013310"></a><a name="p116819013310"></a>Color of the tooltip mask.</p>
-    </td>
-    </tr>
-    <tr id="row01681402313"><td class="cellrowborder" valign="top" width="14.542963397925234%" headers="mcps1.1.6.1.1 "><p id="p161686019320"><a name="p161686019320"></a><a name="p161686019320"></a>popupColor</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.69074182814641%" headers="mcps1.1.6.1.2 "><p id="p4168901034"><a name="p4168901034"></a><a name="p4168901034"></a><a href="../../toctopics/en-us_topic_0000001237475069.md#section1326744510818">Color</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.605989430416913%" headers="mcps1.1.6.1.3 "><p id="p15168407317"><a name="p15168407317"></a><a name="p15168407317"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.080250538265807%" headers="mcps1.1.6.1.4 "><p id="p51681903311"><a name="p51681903311"></a><a name="p51681903311"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="49.08005480524565%" headers="mcps1.1.6.1.5 "><p id="p121681101637"><a name="p121681101637"></a><a name="p121681101637"></a>Color of the tooltip.</p>
-    </td>
-    </tr>
-    <tr id="row6169401638"><td class="cellrowborder" valign="top" width="14.542963397925234%" headers="mcps1.1.6.1.1 "><p id="p11169807314"><a name="p11169807314"></a><a name="p11169807314"></a>enableArrow</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.69074182814641%" headers="mcps1.1.6.1.2 "><p id="p171691801538"><a name="p171691801538"></a><a name="p171691801538"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.605989430416913%" headers="mcps1.1.6.1.3 "><p id="p111691201139"><a name="p111691201139"></a><a name="p111691201139"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.080250538265807%" headers="mcps1.1.6.1.4 "><p id="p716910630"><a name="p716910630"></a><a name="p716910630"></a>true</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="49.08005480524565%" headers="mcps1.1.6.1.5 "><p id="p31691901231"><a name="p31691901231"></a><a name="p31691901231"></a>Whether to display arrows. Arrows are displayed only for tooltips in the up and down directions.</p>
-    </td>
-    </tr>
-    <tr id="row81691806316"><td class="cellrowborder" valign="top" width="14.542963397925234%" headers="mcps1.1.6.1.1 "><p id="p3169705315"><a name="p3169705315"></a><a name="p3169705315"></a>autoCancel</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.69074182814641%" headers="mcps1.1.6.1.2 "><p id="p916910012312"><a name="p916910012312"></a><a name="p916910012312"></a>boolean</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.605989430416913%" headers="mcps1.1.6.1.3 "><p id="p101691601431"><a name="p101691601431"></a><a name="p101691601431"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.080250538265807%" headers="mcps1.1.6.1.4 "><p id="p101691105319"><a name="p101691105319"></a><a name="p101691105319"></a>true</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="49.08005480524565%" headers="mcps1.1.6.1.5 "><p id="p18169602318"><a name="p18169602318"></a><a name="p18169602318"></a>Whether to automatically close the tooltip when an operation is performed on the page.</p>
-    </td>
-    </tr>
-    <tr id="row15169110939"><td class="cellrowborder" valign="top" width="14.542963397925234%" headers="mcps1.1.6.1.1 "><p id="p51693019313"><a name="p51693019313"></a><a name="p51693019313"></a>onStateChange</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="19.69074182814641%" headers="mcps1.1.6.1.2 "><p id="p13169001734"><a name="p13169001734"></a><a name="p13169001734"></a>(isVisible: boolean) =&gt; void</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.605989430416913%" headers="mcps1.1.6.1.3 "><p id="p111698017316"><a name="p111698017316"></a><a name="p111698017316"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.080250538265807%" headers="mcps1.1.6.1.4 "><p id="p1716919015310"><a name="p1716919015310"></a><a name="p1716919015310"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="49.08005480524565%" headers="mcps1.1.6.1.5 "><p id="p31691007316"><a name="p31691007316"></a><a name="p31691007316"></a>Callback for the popup status change event. The parameter <strong id="b2148454966"><a name="b2148454966"></a><a name="b2148454966"></a>isVisible</strong> indicates the visibility of the popup.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+- PopupOption attributes
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | message | string | Yes | - | Content&nbsp;of&nbsp;the&nbsp;popup&nbsp;message. | 
+  | placementOnTop | boolean | No | false | Whether&nbsp;to&nbsp;display&nbsp;the&nbsp;popup&nbsp;above&nbsp;the&nbsp;component.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**false**. | 
+  | primaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | No | - | First&nbsp;button.<br/>**value**:&nbsp;text&nbsp;of&nbsp;the&nbsp;primary&nbsp;button&nbsp;in&nbsp;the&nbsp;popup.<br/>**action**:&nbsp;callback&nbsp;function&nbsp;for&nbsp;clicking&nbsp;the&nbsp;primary&nbsp;button. | 
+  | secondaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | No | - | Second&nbsp;button.<br/>**value**:&nbsp;text&nbsp;of&nbsp;the&nbsp;secondary&nbsp;button&nbsp;in&nbsp;the&nbsp;popup.<br/>**action**:&nbsp;callback&nbsp;function&nbsp;for&nbsp;clicking&nbsp;the&nbsp;secondary&nbsp;button. | 
+  | onStateChange | (isVisible:&nbsp;boolean)&nbsp;=&gt;&nbsp;void | No | - | Callback&nbsp;for&nbsp;the&nbsp;popup&nbsp;status&nbsp;change&nbsp;event.&nbsp;The&nbsp;parameter&nbsp;**isVisible**&nbsp;indicates&nbsp;the&nbsp;visibility&nbsp;of&nbsp;the&nbsp;popup. | 
 
--   Placement enums<sup>8+</sup>
+- CustomPopupOption<sup>8+</sup>
+    | Name | Type | Mandatory | Default&nbsp;Value | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | builder | ()&nbsp;=&gt;&nbsp;any | Yes | - | Builder&nbsp;of&nbsp;the&nbsp;tooltip&nbsp;content. |
+  | placement | Placement | No | Placement.Bottom | Preferred&nbsp;position&nbsp;of&nbsp;the&nbsp;tooltip&nbsp;component.&nbsp;If&nbsp;the&nbsp;set&nbsp;position&nbsp;is&nbsp;insufficient&nbsp;for&nbsp;holding&nbsp;the&nbsp;component,&nbsp;it&nbsp;will&nbsp;be&nbsp;automatically&nbsp;adjusted. |
+  | maskColor | [Color](../../ui/ts-types.md) | No | - | Color&nbsp;of&nbsp;the&nbsp;tooltip&nbsp;mask. |
+  | popupColor | [Color](../../ui/ts-types.md) | No | - | Color&nbsp;of&nbsp;the&nbsp;tooltip. |
+  | enableArrow | boolean | No | true | Whether&nbsp;to&nbsp;display&nbsp;arrows.&nbsp;Arrows&nbsp;are&nbsp;displayed&nbsp;only&nbsp;for&nbsp;tooltips&nbsp;in&nbsp;the&nbsp;up&nbsp;and&nbsp;down&nbsp;directions. |
+  | autoCancel | boolean | No | true | Whether&nbsp;to&nbsp;automatically&nbsp;close&nbsp;the&nbsp;tooltip&nbsp;when&nbsp;an&nbsp;operation&nbsp;is&nbsp;performed&nbsp;on&nbsp;the&nbsp;page. |
+  | onStateChange | (isVisible:&nbsp;boolean)&nbsp;=&gt;&nbsp;void | No | - | Callback&nbsp;for&nbsp;the&nbsp;popup&nbsp;status&nbsp;change&nbsp;event.&nbsp;The&nbsp;parameter&nbsp;**isVisible**&nbsp;indicates&nbsp;the&nbsp;visibility&nbsp;of&nbsp;the&nbsp;popup. |
 
-    <a name="table3452114216394"></a>
-    <table><thead align="left"><tr id="row245219426397"><th class="cellrowborder" valign="top" width="25.180000000000003%" id="mcps1.1.3.1.1"><p id="p545244283914"><a name="p545244283914"></a><a name="p545244283914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.82%" id="mcps1.1.3.1.2"><p id="p2452114203917"><a name="p2452114203917"></a><a name="p2452114203917"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6452144218390"><td class="cellrowborder" valign="top" width="25.180000000000003%" headers="mcps1.1.3.1.1 "><p id="p34529427398"><a name="p34529427398"></a><a name="p34529427398"></a>Left</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.82%" headers="mcps1.1.3.1.2 "><p id="p1245211421393"><a name="p1245211421393"></a><a name="p1245211421393"></a>The tooltip is on the left of the component.</p>
-    </td>
-    </tr>
-    <tr id="row12452184217398"><td class="cellrowborder" valign="top" width="25.180000000000003%" headers="mcps1.1.3.1.1 "><p id="p54523425398"><a name="p54523425398"></a><a name="p54523425398"></a>Right</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.82%" headers="mcps1.1.3.1.2 "><p id="p745215426391"><a name="p745215426391"></a><a name="p745215426391"></a>The tooltip is on the right of the component.</p>
-    </td>
-    </tr>
-    <tr id="row9452134213392"><td class="cellrowborder" valign="top" width="25.180000000000003%" headers="mcps1.1.3.1.1 "><p id="p510719111403"><a name="p510719111403"></a><a name="p510719111403"></a>Top</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.82%" headers="mcps1.1.3.1.2 "><p id="p154533425394"><a name="p154533425394"></a><a name="p154533425394"></a>The tooltip is on the top of the component.</p>
-    </td>
-    </tr>
-    <tr id="row0211134613505"><td class="cellrowborder" valign="top" width="25.180000000000003%" headers="mcps1.1.3.1.1 "><p id="p1653174535020"><a name="p1653174535020"></a><a name="p1653174535020"></a>Bottom</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.82%" headers="mcps1.1.3.1.2 "><p id="p2533455508"><a name="p2533455508"></a><a name="p2533455508"></a>The tooltip is at the bottom of the component.</p>
-    </td>
-    </tr>
-    <tr id="row152111246105011"><td class="cellrowborder" valign="top" width="25.180000000000003%" headers="mcps1.1.3.1.1 "><p id="p153245165017"><a name="p153245165017"></a><a name="p153245165017"></a>TopLeft</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.82%" headers="mcps1.1.3.1.2 "><p id="p254194555014"><a name="p254194555014"></a><a name="p254194555014"></a>The tooltip is in the upper left corner of the component.</p>
-    </td>
-    </tr>
-    <tr id="row7829204845016"><td class="cellrowborder" valign="top" width="25.180000000000003%" headers="mcps1.1.3.1.1 "><p id="p10717194765010"><a name="p10717194765010"></a><a name="p10717194765010"></a>TopRight</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.82%" headers="mcps1.1.3.1.2 "><p id="p1718164712507"><a name="p1718164712507"></a><a name="p1718164712507"></a>The tooltip is in the upper right corner of the component.</p>
-    </td>
-    </tr>
-    <tr id="row15829144815507"><td class="cellrowborder" valign="top" width="25.180000000000003%" headers="mcps1.1.3.1.1 "><p id="p37183472503"><a name="p37183472503"></a><a name="p37183472503"></a>BottomLeft</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.82%" headers="mcps1.1.3.1.2 "><p id="p107183476502"><a name="p107183476502"></a><a name="p107183476502"></a>The tooltip is in the lower left corner of the component.</p>
-    </td>
-    </tr>
-    <tr id="row13378931517"><td class="cellrowborder" valign="top" width="25.180000000000003%" headers="mcps1.1.3.1.1 "><p id="p12424215115"><a name="p12424215115"></a><a name="p12424215115"></a>BottomRight</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.82%" headers="mcps1.1.3.1.2 "><p id="p824211275120"><a name="p824211275120"></a><a name="p824211275120"></a>The tooltip is in the lower right corner of the component.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+- Placement<sup>8+</sup> enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Left | The&nbsp;tooltip&nbsp;is&nbsp;on&nbsp;the&nbsp;left&nbsp;of&nbsp;the&nbsp;component. | 
+  | Right | The&nbsp;tooltip&nbsp;is&nbsp;on&nbsp;the&nbsp;right&nbsp;of&nbsp;the&nbsp;component. | 
+  | Top | The&nbsp;tooltip&nbsp;is&nbsp;on&nbsp;the&nbsp;top&nbsp;of&nbsp;the&nbsp;component. | 
+  | Bottom | The&nbsp;tooltip&nbsp;is&nbsp;at&nbsp;the&nbsp;bottom&nbsp;of&nbsp;the&nbsp;component. | 
+  | TopLeft | The&nbsp;tooltip&nbsp;is&nbsp;in&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;component. | 
+  | TopRight | The&nbsp;tooltip&nbsp;is&nbsp;in&nbsp;the&nbsp;upper&nbsp;right&nbsp;corner&nbsp;of&nbsp;the&nbsp;component. | 
+  | BottomLeft | The&nbsp;tooltip&nbsp;is&nbsp;in&nbsp;the&nbsp;lower&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;component. | 
+  | BottomRight | The&nbsp;tooltip&nbsp;is&nbsp;in&nbsp;the&nbsp;lower&nbsp;right&nbsp;corner&nbsp;of&nbsp;the&nbsp;component. | 
 
 
-## Example<a name="section0760145054817"></a>
+## Example
+
 
 ```
 @Entry
@@ -343,5 +129,4 @@ struct PopupExample {
 }
 ```
 
-![](figures/popup.gif)
-
+![en-us_image_0000001212058458](figures/en-us_image_0000001212058458.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-response-region.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-response-region.md
deleted file mode 100644
index cf71d324e4ed22f3bee1ef83a1c8b57bb88c1339..0000000000000000000000000000000000000000
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-response-region.md
+++ /dev/null
@@ -1,133 +0,0 @@
-# Touch Target<a name="EN-US_TOPIC_0000001192595182"></a>
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This attribute is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-You can set the touch target for components that support universal click events, touch events, and gestures.
-
-## Required Permissions<a name="section781125411508"></a>
-
-None
-
-## Attributes<a name="section6820191711316"></a>
-
-<a name="table3548mcpsimp"></a>
-<table><thead align="left"><tr id="row3556mcpsimp"><th class="cellrowborder" valign="top" width="15.120000000000001%" id="mcps1.1.5.1.1"><p id="p3558mcpsimp"><a name="p3558mcpsimp"></a><a name="p3558mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="18.05%" id="mcps1.1.5.1.2"><p id="p3560mcpsimp"><a name="p3560mcpsimp"></a><a name="p3560mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="18.22%" id="mcps1.1.5.1.3"><p id="p3562mcpsimp"><a name="p3562mcpsimp"></a><a name="p3562mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="48.61%" id="mcps1.1.5.1.4"><p id="p3566mcpsimp"><a name="p3566mcpsimp"></a><a name="p3566mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row3567mcpsimp"><td class="cellrowborder" valign="top" width="15.120000000000001%" headers="mcps1.1.5.1.1 "><p id="p7937194712382"><a name="p7937194712382"></a><a name="p7937194712382"></a>responseRegion</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.05%" headers="mcps1.1.5.1.2 "><p id="p1993734718386"><a name="p1993734718386"></a><a name="p1993734718386"></a>Array&lt;Rectangle&gt; | <a href="#li11163114695111">Rectangle</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="18.22%" headers="mcps1.1.5.1.3 "><p id="p123675110476"><a name="p123675110476"></a><a name="p123675110476"></a>{</p>
-<p id="p1896253114716"><a name="p1896253114716"></a><a name="p1896253114716"></a>x: 0,</p>
-<p id="p46656558470"><a name="p46656558470"></a><a name="p46656558470"></a>y：0,</p>
-<p id="p1142411112430"><a name="p1142411112430"></a><a name="p1142411112430"></a>width：'100%',</p>
-<p id="p31570811444"><a name="p31570811444"></a><a name="p31570811444"></a>height：'100%'</p>
-<p id="p106108613276"><a name="p106108613276"></a><a name="p106108613276"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="48.61%" headers="mcps1.1.5.1.4 "><p id="p3577mcpsimp"><a name="p3577mcpsimp"></a><a name="p3577mcpsimp"></a>Indicates one or more touch targets, including their location and size.</p>
-<div class="note" id="note362494014496"><a name="note362494014496"></a><a name="note362494014496"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p945217554319"><a name="p945217554319"></a><a name="p945217554319"></a>The percentage is measured relative to the component itself.</p>
-<p id="p26671365154"><a name="p26671365154"></a><a name="p26671365154"></a><strong id="b1789155982819"><a name="b1789155982819"></a><a name="b1789155982819"></a>x</strong> and <strong id="b13886151112910"><a name="b13886151112910"></a><a name="b13886151112910"></a>y</strong> can be set to a positive or negative percentage value. For example, when <strong id="b1862536112916"><a name="b1862536112916"></a><a name="b1862536112916"></a>x</strong> is set to <strong id="b72301745193017"><a name="b72301745193017"></a><a name="b72301745193017"></a>'100%'</strong>, the touch target is offset from the right edge of the component by the component's width. When <strong id="b16863154414"><a name="b16863154414"></a><a name="b16863154414"></a>x</strong> is set to <strong id="b17555554417"><a name="b17555554417"></a><a name="b17555554417"></a>'-100%'</strong>, the touch target is offset from the left edge of the component by the component's width. When <strong id="b31941833174511"><a name="b31941833174511"></a><a name="b31941833174511"></a>y</strong> is set to <strong id="b61941433104514"><a name="b61941433104514"></a><a name="b61941433104514"></a>'100%'</strong>, the touch target is offset from the bottom edge of the component by the component's height. When <strong id="b219418330458"><a name="b219418330458"></a><a name="b219418330458"></a>y</strong> is set to <strong id="b191941933204510"><a name="b191941933204510"></a><a name="b191941933204510"></a>'-100%'</strong>, the touch target is offset from the top edge of the component by the component's height.</p>
-<p id="p14618143735213"><a name="p14618143735213"></a><a name="p14618143735213"></a><strong id="b147841237155720"><a name="b147841237155720"></a><a name="b147841237155720"></a>width</strong> and <strong id="b6600740125710"><a name="b6600740125710"></a><a name="b6600740125710"></a>height</strong> can only be set to positive percentage values. For example, when <strong id="b1868265745715"><a name="b1868265745715"></a><a name="b1868265745715"></a>width</strong> is set to <strong id="b9790182584216"><a name="b9790182584216"></a><a name="b9790182584216"></a>'100%'</strong>, the width of the touch target is equal to that of the component; when <strong id="b183581058102511"><a name="b183581058102511"></a><a name="b183581058102511"></a>height</strong> is set to <strong id="b73582588255"><a name="b73582588255"></a><a name="b73582588255"></a>'100%'</strong>, the height of the touch target is equal to that of the component.</p>
-</div></div>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li11163114695111"></a>Rectangle object
-
-    <a name="table197411342193817"></a>
-    <table><thead align="left"><tr id="row374111426387"><th class="cellrowborder" valign="top" width="12.601260126012601%" id="mcps1.1.6.1.1"><p id="p15741134223813"><a name="p15741134223813"></a><a name="p15741134223813"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="15.791579157915791%" id="mcps1.1.6.1.2"><p id="p814413115312"><a name="p814413115312"></a><a name="p814413115312"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="6.950695069506951%" id="mcps1.1.6.1.3"><p id="p034985833218"><a name="p034985833218"></a><a name="p034985833218"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="7.520752075207521%" id="mcps1.1.6.1.4"><p id="p187421851338"><a name="p187421851338"></a><a name="p187421851338"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="57.13571357135714%" id="mcps1.1.6.1.5"><p id="p474164215383"><a name="p474164215383"></a><a name="p474164215383"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1774194233815"><td class="cellrowborder" valign="top" width="12.601260126012601%" headers="mcps1.1.6.1.1 "><p id="p1674111428389"><a name="p1674111428389"></a><a name="p1674111428389"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.791579157915791%" headers="mcps1.1.6.1.2 "><p id="p14141013145315"><a name="p14141013145315"></a><a name="p14141013145315"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.950695069506951%" headers="mcps1.1.6.1.3 "><p id="p11349125893214"><a name="p11349125893214"></a><a name="p11349125893214"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.520752075207521%" headers="mcps1.1.6.1.4 "><p id="p187421955339"><a name="p187421955339"></a><a name="p187421955339"></a>0vp</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="57.13571357135714%" headers="mcps1.1.6.1.5 "><p id="p18741134243810"><a name="p18741134243810"></a><a name="p18741134243810"></a>X coordinate of the touch point relative to the left edge of the component.</p>
-    </td>
-    </tr>
-    <tr id="row1741442113814"><td class="cellrowborder" valign="top" width="12.601260126012601%" headers="mcps1.1.6.1.1 "><p id="p87418424388"><a name="p87418424388"></a><a name="p87418424388"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.791579157915791%" headers="mcps1.1.6.1.2 "><p id="p6141113175310"><a name="p6141113175310"></a><a name="p6141113175310"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.950695069506951%" headers="mcps1.1.6.1.3 "><p id="p193490583320"><a name="p193490583320"></a><a name="p193490583320"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.520752075207521%" headers="mcps1.1.6.1.4 "><p id="p17742125143317"><a name="p17742125143317"></a><a name="p17742125143317"></a>0vp</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="57.13571357135714%" headers="mcps1.1.6.1.5 "><p id="p6741104213389"><a name="p6741104213389"></a><a name="p6741104213389"></a>Y coordinate of the touch point relative to the left edge of the component.</p>
-    </td>
-    </tr>
-    <tr id="row12741542203810"><td class="cellrowborder" valign="top" width="12.601260126012601%" headers="mcps1.1.6.1.1 "><p id="p12742342103816"><a name="p12742342103816"></a><a name="p12742342103816"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.791579157915791%" headers="mcps1.1.6.1.2 "><p id="p121471317537"><a name="p121471317537"></a><a name="p121471317537"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.950695069506951%" headers="mcps1.1.6.1.3 "><p id="p18349105818327"><a name="p18349105818327"></a><a name="p18349105818327"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.520752075207521%" headers="mcps1.1.6.1.4 "><p id="p17742254334"><a name="p17742254334"></a><a name="p17742254334"></a>100%</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="57.13571357135714%" headers="mcps1.1.6.1.5 "><p id="p157426425387"><a name="p157426425387"></a><a name="p157426425387"></a>Width of the touch target.</p>
-    </td>
-    </tr>
-    <tr id="row11106175711531"><td class="cellrowborder" valign="top" width="12.601260126012601%" headers="mcps1.1.6.1.1 "><p id="p61068578532"><a name="p61068578532"></a><a name="p61068578532"></a>height</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="15.791579157915791%" headers="mcps1.1.6.1.2 "><p id="p1710613574534"><a name="p1710613574534"></a><a name="p1710613574534"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="6.950695069506951%" headers="mcps1.1.6.1.3 "><p id="p16349155873214"><a name="p16349155873214"></a><a name="p16349155873214"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="7.520752075207521%" headers="mcps1.1.6.1.4 "><p id="p374217511334"><a name="p374217511334"></a><a name="p374217511334"></a>100%</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="57.13571357135714%" headers="mcps1.1.6.1.5 "><p id="p1710617573533"><a name="p1710617573533"></a><a name="p1710617573533"></a>Height of the touch target.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-    >![](../../public_sys-resources/icon-note.gif) **NOTE:** 
-    >When both  **x**  and  **y**  are set to positive values, the entire touch target offsets towards the lower right corner of the component. How much the touch target offsets is subject to the set values.
-
-
-## Example<a name="section18306182803217"></a>
-
-```
-@Entry
-@Component
-struct ResponseRegionExample {
-  build() {
-    Column() {
-        Toggle({ type: ToggleType.Checkbox, isOn: true })
-          .selectedColor(0x39a2db)
-          .backgroundColor(0xAFEEEE)
-          .responseRegion({ x: 1.0, y: 1.0, width: 400, height: 400 })
-          .onChange((isOn: boolean) => {
-            console.info('Component status:' + isOn)
-          })
-    }.width('100%').margin({ top: 5 })
-  }
-}
-```
-
-![](figures/gif1.gif)
-
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
index 0fb7dd4f8881ad4258e2d887e6a9004d0ce0cd16..eef44b85ca3a83a5d60b78462db9b9b28061c7f8 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
@@ -1,48 +1,27 @@
-# Shape Clipping<a name="EN-US_TOPIC_0000001237555111"></a>
+# Shape Clipping
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## Attributes<a name="section6820191711316"></a>
-
-<a name="table146051414275"></a>
-<table><thead align="left"><tr id="row668017152712"><th class="cellrowborder" valign="top" width="14.19%" id="mcps1.1.5.1.1"><p id="p668014113277"><a name="p668014113277"></a><a name="p668014113277"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="19.52%" id="mcps1.1.5.1.2"><p id="p1568031172711"><a name="p1568031172711"></a><a name="p1568031172711"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="15.07%" id="mcps1.1.5.1.3"><p id="p1068081122712"><a name="p1068081122712"></a><a name="p1068081122712"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="51.22%" id="mcps1.1.5.1.4"><p id="p186806116274"><a name="p186806116274"></a><a name="p186806116274"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1068015110273"><td class="cellrowborder" valign="top" width="14.19%" headers="mcps1.1.5.1.1 "><p id="p156804114277"><a name="p156804114277"></a><a name="p156804114277"></a>clip</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.52%" headers="mcps1.1.5.1.2 "><p id="p1668071182718"><a name="p1668071182718"></a><a name="p1668071182718"></a>Shape | boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.07%" headers="mcps1.1.5.1.3 "><p id="p368017172715"><a name="p368017172715"></a><a name="p368017172715"></a>false</p>
-</td>
-<td class="cellrowborder" valign="top" width="51.22%" headers="mcps1.1.5.1.4 "><p id="p10680151172719"><a name="p10680151172719"></a><a name="p10680151172719"></a>Specifies a clip mode. The value <strong id="b163820313918"><a name="b163820313918"></a><a name="b163820313918"></a>Shape</strong> indicates that the current component is cropped based on the specified shape. The value <strong id="b68195717910"><a name="b68195717910"></a><a name="b68195717910"></a>boolean</strong> specifies whether to clip the component based on the edge outline.</p>
-</td>
-</tr>
-<tr id="row2068091122714"><td class="cellrowborder" valign="top" width="14.19%" headers="mcps1.1.5.1.1 "><p id="p12680817272"><a name="p12680817272"></a><a name="p12680817272"></a>mask</p>
-</td>
-<td class="cellrowborder" valign="top" width="19.52%" headers="mcps1.1.5.1.2 "><p id="p668010119272"><a name="p668010119272"></a><a name="p668010119272"></a>Shape</p>
-</td>
-<td class="cellrowborder" valign="top" width="15.07%" headers="mcps1.1.5.1.3 "><p id="p196818116273"><a name="p196818116273"></a><a name="p196818116273"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="51.22%" headers="mcps1.1.5.1.4 "><p id="p168115111272"><a name="p168115111272"></a><a name="p168115111272"></a>Adds a mask of the specified shape to the current component.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section1794417203411"></a>
 
+## Attributes
+
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| clip | Shape&nbsp;\|&nbsp;boolean | false | Specifies&nbsp;a&nbsp;clip&nbsp;mode.&nbsp;The&nbsp;value&nbsp;**Shape**&nbsp;indicates&nbsp;that&nbsp;the&nbsp;current&nbsp;component&nbsp;is&nbsp;cropped&nbsp;based&nbsp;on&nbsp;the&nbsp;specified&nbsp;shape.&nbsp;The&nbsp;value&nbsp;**boolean**&nbsp;specifies&nbsp;whether&nbsp;to&nbsp;clip&nbsp;the&nbsp;component&nbsp;based&nbsp;on&nbsp;the&nbsp;edge&nbsp;outline. | 
+| mask | Shape | - | Adds&nbsp;a&nbsp;mask&nbsp;of&nbsp;the&nbsp;specified&nbsp;shape&nbsp;to&nbsp;the&nbsp;current&nbsp;component. | 
+
+
+## Example
+
+  
 ```
 @Entry
 @Component
@@ -78,5 +57,4 @@ struct ClipAndMaskExample {
 }
 ```
 
-![](figures/clip.png)
-
+![en-us_image_0000001212218452](figures/en-us_image_0000001212218452.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
index dbac35d7acd691ff16880f42955607a30fb80f8b..f35376f94477923703e61ac33c9e9a6b12a10552 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
@@ -1,120 +1,30 @@
-# Size<a name="EN-US_TOPIC_0000001192915116"></a>
+# Size
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## Attributes<a name="section17707164916113"></a>
 
-<a name="table372mcpsimp"></a>
-<table><thead align="left"><tr id="row379mcpsimp"><th class="cellrowborder" valign="top" width="14.49%" id="mcps1.1.5.1.1"><p id="p381mcpsimp"><a name="p381mcpsimp"></a><a name="p381mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="29.720000000000002%" id="mcps1.1.5.1.2"><p id="p383mcpsimp"><a name="p383mcpsimp"></a><a name="p383mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="18.98%" id="mcps1.1.5.1.3"><p id="p385mcpsimp"><a name="p385mcpsimp"></a><a name="p385mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="36.809999999999995%" id="mcps1.1.5.1.4"><p id="p387mcpsimp"><a name="p387mcpsimp"></a><a name="p387mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row388mcpsimp"><td class="cellrowborder" valign="top" width="14.49%" headers="mcps1.1.5.1.1 "><p id="p390mcpsimp"><a name="p390mcpsimp"></a><a name="p390mcpsimp"></a>width</p>
-</td>
-<td class="cellrowborder" valign="top" width="29.720000000000002%" headers="mcps1.1.5.1.2 "><p id="p392mcpsimp"><a name="p392mcpsimp"></a><a name="p392mcpsimp"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.98%" headers="mcps1.1.5.1.3 "><p id="p394mcpsimp"><a name="p394mcpsimp"></a><a name="p394mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="36.809999999999995%" headers="mcps1.1.5.1.4 "><p id="p396mcpsimp"><a name="p396mcpsimp"></a><a name="p396mcpsimp"></a>Width of a component. By default, the width required to fully hold the component content is used.</p>
-</td>
-</tr>
-<tr id="row397mcpsimp"><td class="cellrowborder" valign="top" width="14.49%" headers="mcps1.1.5.1.1 "><p id="p399mcpsimp"><a name="p399mcpsimp"></a><a name="p399mcpsimp"></a>height</p>
-</td>
-<td class="cellrowborder" valign="top" width="29.720000000000002%" headers="mcps1.1.5.1.2 "><p id="p401mcpsimp"><a name="p401mcpsimp"></a><a name="p401mcpsimp"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.98%" headers="mcps1.1.5.1.3 "><p id="p403mcpsimp"><a name="p403mcpsimp"></a><a name="p403mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="36.809999999999995%" headers="mcps1.1.5.1.4 "><p id="p405mcpsimp"><a name="p405mcpsimp"></a><a name="p405mcpsimp"></a>Height of the component. By default, the height required to fully hold the component content is used.</p>
-</td>
-</tr>
-<tr id="row1833162114520"><td class="cellrowborder" valign="top" width="14.49%" headers="mcps1.1.5.1.1 "><p id="p2302mcpsimp"><a name="p2302mcpsimp"></a><a name="p2302mcpsimp"></a>size</p>
-</td>
-<td class="cellrowborder" valign="top" width="29.720000000000002%" headers="mcps1.1.5.1.2 "><p id="p331335610221"><a name="p331335610221"></a><a name="p331335610221"></a>{</p>
-<p id="p14757012233"><a name="p14757012233"></a><a name="p14757012233"></a>width?: Length,</p>
-<p id="p172028105237"><a name="p172028105237"></a><a name="p172028105237"></a>height?: Length</p>
-<p id="p2304mcpsimp"><a name="p2304mcpsimp"></a><a name="p2304mcpsimp"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.98%" headers="mcps1.1.5.1.3 "><p id="p2306mcpsimp"><a name="p2306mcpsimp"></a><a name="p2306mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="36.809999999999995%" headers="mcps1.1.5.1.4 "><p id="p2308mcpsimp"><a name="p2308mcpsimp"></a><a name="p2308mcpsimp"></a>Height and width of the component.</p>
-</td>
-</tr>
-<tr id="row406mcpsimp"><td class="cellrowborder" valign="top" width="14.49%" headers="mcps1.1.5.1.1 "><p id="p408mcpsimp"><a name="p408mcpsimp"></a><a name="p408mcpsimp"></a>padding</p>
-</td>
-<td class="cellrowborder" valign="top" width="29.720000000000002%" headers="mcps1.1.5.1.2 "><p id="p77142022184414"><a name="p77142022184414"></a><a name="p77142022184414"></a>{</p>
-<p id="p10161526164411"><a name="p10161526164411"></a><a name="p10161526164411"></a>top?: Length,</p>
-<p id="p145099281445"><a name="p145099281445"></a><a name="p145099281445"></a>right?: Length,</p>
-<p id="p13718733124415"><a name="p13718733124415"></a><a name="p13718733124415"></a>bottom?: Length,</p>
-<p id="p46639365448"><a name="p46639365448"></a><a name="p46639365448"></a>left?: Length</p>
-<p id="p17631439124416"><a name="p17631439124416"></a><a name="p17631439124416"></a>} | Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.98%" headers="mcps1.1.5.1.3 "><p id="p415mcpsimp"><a name="p415mcpsimp"></a><a name="p415mcpsimp"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="36.809999999999995%" headers="mcps1.1.5.1.4 "><p id="p417mcpsimp"><a name="p417mcpsimp"></a><a name="p417mcpsimp"></a>Padding of the component.</p>
-<p id="p113121266320"><a name="p113121266320"></a><a name="p113121266320"></a>When the parameter is of the <strong id="b3975853191218"><a name="b3975853191218"></a><a name="b3975853191218"></a>Length</strong> type, the four paddings take effect.</p>
-</td>
-</tr>
-<tr id="row419mcpsimp"><td class="cellrowborder" valign="top" width="14.49%" headers="mcps1.1.5.1.1 "><p id="p421mcpsimp"><a name="p421mcpsimp"></a><a name="p421mcpsimp"></a>margin</p>
-</td>
-<td class="cellrowborder" valign="top" width="29.720000000000002%" headers="mcps1.1.5.1.2 "><p id="p17197165164516"><a name="p17197165164516"></a><a name="p17197165164516"></a>{</p>
-<p id="p1780118538452"><a name="p1780118538452"></a><a name="p1780118538452"></a>top?: Length,</p>
-<p id="p131781357144519"><a name="p131781357144519"></a><a name="p131781357144519"></a>right?: Length,</p>
-<p id="p9656135974517"><a name="p9656135974517"></a><a name="p9656135974517"></a>bottom?: Length,</p>
-<p id="p1862994164612"><a name="p1862994164612"></a><a name="p1862994164612"></a>left?: Length</p>
-<p id="p17278191014464"><a name="p17278191014464"></a><a name="p17278191014464"></a>}</p>
-<p id="p423mcpsimp"><a name="p423mcpsimp"></a><a name="p423mcpsimp"></a>| Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.98%" headers="mcps1.1.5.1.3 "><p id="p428mcpsimp"><a name="p428mcpsimp"></a><a name="p428mcpsimp"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="36.809999999999995%" headers="mcps1.1.5.1.4 "><p id="p430mcpsimp"><a name="p430mcpsimp"></a><a name="p430mcpsimp"></a>Margin of the component. </p>
-<p id="p15312192683212"><a name="p15312192683212"></a><a name="p15312192683212"></a>When the parameter is of the <strong id="b45731402134"><a name="b45731402134"></a><a name="b45731402134"></a>Length</strong> type, the four margins take effect.</p>
-</td>
-</tr>
-<tr id="row176711443134019"><td class="cellrowborder" valign="top" width="14.49%" headers="mcps1.1.5.1.1 "><p id="p2313mcpsimp"><a name="p2313mcpsimp"></a><a name="p2313mcpsimp"></a>constraintSize</p>
-</td>
-<td class="cellrowborder" valign="top" width="29.720000000000002%" headers="mcps1.1.5.1.2 "><p id="p461192115467"><a name="p461192115467"></a><a name="p461192115467"></a>{</p>
-<p id="p11113203434615"><a name="p11113203434615"></a><a name="p11113203434615"></a>minWidth?: Length,</p>
-<p id="p149961241183520"><a name="p149961241183520"></a><a name="p149961241183520"></a>maxWidth?: Length,</p>
-<p id="p19940543173518"><a name="p19940543173518"></a><a name="p19940543173518"></a>minHeight?: Length,</p>
-<p id="p169561826154615"><a name="p169561826154615"></a><a name="p169561826154615"></a>maxHeight?: Lenght</p>
-<p id="p2315mcpsimp"><a name="p2315mcpsimp"></a><a name="p2315mcpsimp"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.98%" headers="mcps1.1.5.1.3 "><p id="p240035994617"><a name="p240035994617"></a><a name="p240035994617"></a>{</p>
-<p id="p1893211484355"><a name="p1893211484355"></a><a name="p1893211484355"></a>minWidth: 0,</p>
-<p id="p11954455193513"><a name="p11954455193513"></a><a name="p11954455193513"></a>maxWidth: Infinity,</p>
-<p id="p184261059153510"><a name="p184261059153510"></a><a name="p184261059153510"></a>minHeight: 0,</p>
-<p id="p564520112470"><a name="p564520112470"></a><a name="p564520112470"></a>maxHeight: Infinity</p>
-<p id="p2317mcpsimp"><a name="p2317mcpsimp"></a><a name="p2317mcpsimp"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="36.809999999999995%" headers="mcps1.1.5.1.4 "><p id="p2319mcpsimp"><a name="p2319mcpsimp"></a><a name="p2319mcpsimp"></a>Constraint size of the component, which is used to limit the size range during component layout.</p>
-</td>
-</tr>
-<tr id="row59967194437"><td class="cellrowborder" valign="top" width="14.49%" headers="mcps1.1.5.1.1 "><p id="p2357mcpsimp"><a name="p2357mcpsimp"></a><a name="p2357mcpsimp"></a>layoutWeight</p>
-</td>
-<td class="cellrowborder" valign="top" width="29.720000000000002%" headers="mcps1.1.5.1.2 "><p id="p2359mcpsimp"><a name="p2359mcpsimp"></a><a name="p2359mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.98%" headers="mcps1.1.5.1.3 "><p id="p2361mcpsimp"><a name="p2361mcpsimp"></a><a name="p2361mcpsimp"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="36.809999999999995%" headers="mcps1.1.5.1.4 "><p id="p2363mcpsimp"><a name="p2363mcpsimp"></a><a name="p2363mcpsimp"></a>Weight of the component during layout. When the container size is determined, the layout of the component and sibling components is allocated based on the weight along the main axis. The component size setting is ignored.</p>
-<div class="note" id="note15732101815513"><a name="note15732101815513"></a><a name="note15732101815513"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p1673212186515"><a name="p1673212186515"></a><a name="p1673212186515"></a>This attribute is valid only for the <strong id="b189315584117"><a name="b189315584117"></a><a name="b189315584117"></a>Row</strong>, <strong id="b143081721324"><a name="b143081721324"></a><a name="b143081721324"></a>Column</strong>, and <strong id="b1901751226"><a name="b1901751226"></a><a name="b1901751226"></a>Flex</strong> layouts.</p>
-</div></div>
-</td>
-</tr>
-</tbody>
-</table>
+## Attributes
+
 
-## Example<a name="section19690013134020"></a>
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| width | Length | - | Width&nbsp;of&nbsp;a&nbsp;component.&nbsp;By&nbsp;default,&nbsp;the&nbsp;width&nbsp;required&nbsp;to&nbsp;fully&nbsp;hold&nbsp;the&nbsp;component&nbsp;content&nbsp;is&nbsp;used. | 
+| height | Length | - | Height&nbsp;of&nbsp;the&nbsp;component.&nbsp;By&nbsp;default,&nbsp;the&nbsp;height&nbsp;required&nbsp;to&nbsp;fully&nbsp;hold&nbsp;the&nbsp;component&nbsp;content&nbsp;is&nbsp;used. | 
+| size | {<br/>width?:&nbsp;Length,<br/>height?:&nbsp;Length<br/>} | - | Height&nbsp;and&nbsp;width&nbsp;of&nbsp;the&nbsp;component. | 
+| padding | {<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>left?:&nbsp;Length<br/>}&nbsp;\|&nbsp;Length | 0 | Padding&nbsp;of&nbsp;the&nbsp;component.<br/>When&nbsp;the&nbsp;parameter&nbsp;is&nbsp;of&nbsp;the&nbsp;**Length**&nbsp;type,&nbsp;the&nbsp;four&nbsp;paddings&nbsp;take&nbsp;effect. | 
+| margin | {<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>left?:&nbsp;Length<br/>}<br/>\|&nbsp;Length | 0 | Margin&nbsp;of&nbsp;the&nbsp;component.&nbsp;<br/>When&nbsp;the&nbsp;parameter&nbsp;is&nbsp;of&nbsp;the&nbsp;**Length**&nbsp;type,&nbsp;the&nbsp;four&nbsp;margins&nbsp;take&nbsp;effect. | 
+| constraintSize | {<br/>minWidth?:&nbsp;Length,<br/>maxWidth?:&nbsp;Length,<br/>minHeight?:&nbsp;Length,<br/>maxHeight?:&nbsp;Length<br/>} | {<br/>minWidth:&nbsp;0,<br/>maxWidth:&nbsp;Infinity,<br/>minHeight:&nbsp;0,<br/>maxHeight:&nbsp;Infinity<br/>} | Constraint&nbsp;size&nbsp;of&nbsp;the&nbsp;component,&nbsp;which&nbsp;is&nbsp;used&nbsp;to&nbsp;limit&nbsp;the&nbsp;size&nbsp;range&nbsp;during&nbsp;component&nbsp;layout. |
+| layoutWeight | number | 0 | Weight&nbsp;of&nbsp;the&nbsp;component&nbsp;during&nbsp;layout.&nbsp;When&nbsp;the&nbsp;container&nbsp;size&nbsp;is&nbsp;determined,&nbsp;the&nbsp;layout&nbsp;of&nbsp;the&nbsp;component&nbsp;and&nbsp;sibling&nbsp;components&nbsp;is&nbsp;allocated&nbsp;based&nbsp;on&nbsp;the&nbsp;weight&nbsp;along&nbsp;the&nbsp;main&nbsp;axis.&nbsp;The&nbsp;component&nbsp;size&nbsp;setting&nbsp;is&nbsp;ignored.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;This&nbsp;attribute&nbsp;is&nbsp;valid&nbsp;only&nbsp;for&nbsp;the&nbsp;**Row**,&nbsp;**Column**,&nbsp;and&nbsp;**Flex**&nbsp;layouts. | 
+
+
+## Example
 
 ```
 @Entry
@@ -137,7 +47,7 @@ struct SizeExample {
         Text('layoutWeight(1)')
           .size({ width: '30%', height: 110 }).backgroundColor(0xFFEFD5).textAlign(TextAlign.Center)
           .layoutWeight(1)
-        // Weight 0
+       // Weight 0
         Text('layoutWeight(2)')
           .size({ width: '30%', height: 110 }).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
           .layoutWeight(2)
@@ -146,9 +56,7 @@ struct SizeExample {
           .size({ width: '30%', height: 110 }).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
       }.size({ width: '90%', height: 140 }).backgroundColor(0xAFEEEE)
     }.width('100%').margin({ top: 5 })
-  }
-}
+  }}
 ```
 
-![](figures/size.gif)
-
+![en-us_image_0000001257138367](figures/en-us_image_0000001257138367.gif)
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 d793202b2815247310b306b50a98b2f835ed1ec5..8cfa736c145a1c1e378a90b34abd9aede4a6a5ea 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
@@ -1,144 +1,51 @@
-# Text Style<a name="EN-US_TOPIC_0000001237475065"></a>
+# Text Style
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 The attributes described in this topic are used to set the text style for a component that contains text.
 
-## Required Permissions<a name="section781125411508"></a>
+
+## Required Permissions
 
 None
 
-## Attributes<a name="section6820191711316"></a>
-
-<a name="table1272794482110"></a>
-<table><thead align="left"><tr id="row1672764492111"><th class="cellrowborder" valign="top" width="13.15%" id="mcps1.1.5.1.1"><p id="p187274444211"><a name="p187274444211"></a><a name="p187274444211"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="18.3%" id="mcps1.1.5.1.2"><p id="p5727104415214"><a name="p5727104415214"></a><a name="p5727104415214"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="11.28%" id="mcps1.1.5.1.3"><p id="p127277445216"><a name="p127277445216"></a><a name="p127277445216"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="57.269999999999996%" id="mcps1.1.5.1.4"><p id="p11727114417217"><a name="p11727114417217"></a><a name="p11727114417217"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1272884442111"><td class="cellrowborder" valign="top" width="13.15%" headers="mcps1.1.5.1.1 "><p id="p872874419212"><a name="p872874419212"></a><a name="p872874419212"></a>fontColor</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.3%" headers="mcps1.1.5.1.2 "><p id="p3728744192114"><a name="p3728744192114"></a><a name="p3728744192114"></a>Color</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.28%" headers="mcps1.1.5.1.3 "><p id="p1372816447214"><a name="p1372816447214"></a><a name="p1372816447214"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="57.269999999999996%" headers="mcps1.1.5.1.4 "><p id="p97281344132120"><a name="p97281344132120"></a><a name="p97281344132120"></a>Text color.</p>
-</td>
-</tr>
-<tr id="row0728144152115"><td class="cellrowborder" valign="top" width="13.15%" headers="mcps1.1.5.1.1 "><p id="p5728134411218"><a name="p5728134411218"></a><a name="p5728134411218"></a>fontSize</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.3%" headers="mcps1.1.5.1.2 "><p id="p77284448214"><a name="p77284448214"></a><a name="p77284448214"></a>Length</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.28%" headers="mcps1.1.5.1.3 "><p id="p67281844112112"><a name="p67281844112112"></a><a name="p67281844112112"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="57.269999999999996%" headers="mcps1.1.5.1.4 "><p id="p20728544112119"><a name="p20728544112119"></a><a name="p20728544112119"></a>Text size. If the value is of the number type, the unit fp is used.</p>
-</td>
-</tr>
-<tr id="row117281144172120"><td class="cellrowborder" valign="top" width="13.15%" headers="mcps1.1.5.1.1 "><p id="p272864422118"><a name="p272864422118"></a><a name="p272864422118"></a>fontStyle</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.3%" headers="mcps1.1.5.1.2 "><p id="p207281044182117"><a name="p207281044182117"></a><a name="p207281044182117"></a><a href="#li6906111945316">FontStyle</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="11.28%" headers="mcps1.1.5.1.3 "><p id="p072854416211"><a name="p072854416211"></a><a name="p072854416211"></a>Normal</p>
-</td>
-<td class="cellrowborder" valign="top" width="57.269999999999996%" headers="mcps1.1.5.1.4 "><p id="p19180235236"><a name="p19180235236"></a><a name="p19180235236"></a>Font style of the text.</p>
-</td>
-</tr>
-<tr id="row19728154413218"><td class="cellrowborder" valign="top" width="13.15%" headers="mcps1.1.5.1.1 "><p id="p9728244122117"><a name="p9728244122117"></a><a name="p9728244122117"></a>fontWeight</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.3%" headers="mcps1.1.5.1.2 "><p id="p9471820103010"><a name="p9471820103010"></a><a name="p9471820103010"></a>number | <a href="#li24391125115311">FontWeight</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="11.28%" headers="mcps1.1.5.1.3 "><p id="p9728144419218"><a name="p9728144419218"></a><a name="p9728144419218"></a>Normal</p>
-</td>
-<td class="cellrowborder" valign="top" width="57.269999999999996%" headers="mcps1.1.5.1.4 "><p id="p1422814610347"><a name="p1422814610347"></a><a name="p1422814610347"></a>Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is <strong id="b89916571465"><a name="b89916571465"></a><a name="b89916571465"></a>400</strong>. A larger value indicates a larger font weight.</p>
-<p id="p5728184432119"><a name="p5728184432119"></a><a name="p5728184432119"></a>For details on the common enumerated values, see <a href="#li24391125115311">FontWeight enums</a>.</p>
-</td>
-</tr>
-<tr id="row18318204813215"><td class="cellrowborder" valign="top" width="13.15%" headers="mcps1.1.5.1.1 "><p id="p2319348153210"><a name="p2319348153210"></a><a name="p2319348153210"></a>fontFamily</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.3%" headers="mcps1.1.5.1.2 "><p id="p73191748103218"><a name="p73191748103218"></a><a name="p73191748103218"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.28%" headers="mcps1.1.5.1.3 "><p id="p10319144823214"><a name="p10319144823214"></a><a name="p10319144823214"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="57.269999999999996%" headers="mcps1.1.5.1.4 "><p id="p9319164810326"><a name="p9319164810326"></a><a name="p9319164810326"></a>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 <strong id="b178133520810"><a name="b178133520810"></a><a name="b178133520810"></a>Arial, sans-serif</strong>.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li6906111945316"></a>FontStyle enums
-
-    <a name="table3452114216394"></a>
-    <table><thead align="left"><tr id="row245219426397"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p545244283914"><a name="p545244283914"></a><a name="p545244283914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p2452114203917"><a name="p2452114203917"></a><a name="p2452114203917"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6452144218390"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p34529427398"><a name="p34529427398"></a><a name="p34529427398"></a>Normal</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245211421393"><a name="p1245211421393"></a><a name="p1245211421393"></a>Standard font style.</p>
-    </td>
-    </tr>
-    <tr id="row12452184217398"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p54523425398"><a name="p54523425398"></a><a name="p54523425398"></a>Italic</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p745215426391"><a name="p745215426391"></a><a name="p745215426391"></a>Italic font style.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   <a name="li24391125115311"></a>FontWeight enums
-
-    <a name="table1840481341616"></a>
-    <table><thead align="left"><tr id="row1540401313169"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p11404101319164"><a name="p11404101319164"></a><a name="p11404101319164"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p240461331619"><a name="p240461331619"></a><a name="p240461331619"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row940412136164"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p8404131313162"><a name="p8404131313162"></a><a name="p8404131313162"></a>Lighter</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p18404151391615"><a name="p18404151391615"></a><a name="p18404151391615"></a>The font weight is lighter.</p>
-    </td>
-    </tr>
-    <tr id="row84041113121615"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p164047136166"><a name="p164047136166"></a><a name="p164047136166"></a>Normal</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p17404813161612"><a name="p17404813161612"></a><a name="p17404813161612"></a>The font weight is normal.</p>
-    </td>
-    </tr>
-    <tr id="row740412136162"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1040413132166"><a name="p1040413132166"></a><a name="p1040413132166"></a>Regular</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p2404171314163"><a name="p2404171314163"></a><a name="p2404171314163"></a>The font weight is regular.</p>
-    </td>
-    </tr>
-    <tr id="row4404013161612"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1740414136168"><a name="p1740414136168"></a><a name="p1740414136168"></a>Medium</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p4404191313165"><a name="p4404191313165"></a><a name="p4404191313165"></a>The font weight is medium.</p>
-    </td>
-    </tr>
-    <tr id="row1353733241814"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p35383322189"><a name="p35383322189"></a><a name="p35383322189"></a>Bold</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p16538173212187"><a name="p16538173212187"></a><a name="p16538173212187"></a>The font weight is bold.</p>
-    </td>
-    </tr>
-    <tr id="row19186440141814"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p6186340151810"><a name="p6186340151810"></a><a name="p6186340151810"></a>Bolder</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1818615400189"><a name="p1818615400189"></a><a name="p1818615400189"></a>The font weight is bolder.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section17655814153017"></a>
 
+## Attributes
+
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| fontColor | Color | - | Text&nbsp;color. | 
+| fontSize | Length | - | Text&nbsp;size.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;of&nbsp;the&nbsp;number&nbsp;type,&nbsp;the&nbsp;unit&nbsp;fp&nbsp;is&nbsp;used. | 
+| fontStyle | FontStyle | FontStyle.Normal | Font&nbsp;style&nbsp;of&nbsp;the&nbsp;text. | 
+| fontWeight | number&nbsp;\|&nbsp;FontWeight | FontWeight.Normal | Font&nbsp;weight.&nbsp;For&nbsp;the&nbsp;number&nbsp;type,&nbsp;the&nbsp;value&nbsp;ranges&nbsp;from&nbsp;100&nbsp;to&nbsp;900,&nbsp;at&nbsp;an&nbsp;interval&nbsp;of&nbsp;100.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**400**.&nbsp;A&nbsp;larger&nbsp;value&nbsp;indicates&nbsp;a&nbsp;larger&nbsp;font&nbsp;weight.<br/>For&nbsp;common&nbsp;values&nbsp;of&nbsp;the&nbsp;**FontWeight**&nbsp;type,&nbsp;see&nbsp;**FontWeight**&nbsp;enums. | 
+| fontFamily | string | - | Font&nbsp;family&nbsp;of&nbsp;the&nbsp;text.&nbsp;Use&nbsp;commas&nbsp;(,)&nbsp;to&nbsp;separate&nbsp;multiple&nbsp;fonts.&nbsp;The&nbsp;priority&nbsp;the&nbsp;fonts&nbsp;is&nbsp;the&nbsp;sequence&nbsp;in&nbsp;which&nbsp;they&nbsp;are&nbsp;placed.&nbsp;An&nbsp;example&nbsp;value&nbsp;is&nbsp;**Arial,&nbsp;sans-serif**. | 
+
+
+- FontStyle enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Normal | Standard&nbsp;font&nbsp;style. | 
+  | Italic | Italic&nbsp;font&nbsp;style. | 
+
+
+- FontWeight enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Lighter | The&nbsp;font&nbsp;weight&nbsp;is&nbsp;lighter. | 
+  | Normal | The&nbsp;font&nbsp;weight&nbsp;is&nbsp;normal. | 
+  | Regular | The&nbsp;font&nbsp;weight&nbsp;is&nbsp;regular. | 
+  | Medium | The&nbsp;font&nbsp;weight&nbsp;is&nbsp;medium. | 
+  | Bold | The&nbsp;font&nbsp;weight&nbsp;is&nbsp;bold. | 
+  | Bolder | The&nbsp;font&nbsp;weight&nbsp;is&nbsp;bolder. | 
+
+
+## Example
+
+  
 ```
 @Entry
 @Component
@@ -182,5 +89,4 @@ struct TextStyleExample {
 }
 ```
 
-![](figures/textstyle.png)
-
+![en-us_image_0000001256978333](figures/en-us_image_0000001256978333.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md
new file mode 100644
index 0000000000000000000000000000000000000000..62fd9db2ddca3e177003555ef8ee806f67c59627
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md
@@ -0,0 +1,57 @@
+# Touch Target
+
+
+> ![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.
+
+
+You can set the touch target for components that support universal click events, touch events, and gestures.
+
+
+## Required Permissions
+
+None
+
+
+## Attributes
+
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| responseRegion | Array&lt;Rectangle&gt;&nbsp;\|&nbsp;Rectangle | {<br/>x:&nbsp;0,<br/>y:&nbsp;0,<br/>width:&nbsp;'100%',<br/>height:&nbsp;'100%'<br/>} | One&nbsp;or&nbsp;more&nbsp;touch&nbsp;targets,&nbsp;including&nbsp;their&nbsp;location&nbsp;and&nbsp;size.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;The&nbsp;percentage&nbsp;is&nbsp;measured&nbsp;relative&nbsp;to&nbsp;the&nbsp;component&nbsp;itself.<br/>>&nbsp;<br/>>&nbsp;**x**&nbsp;and&nbsp;**y**&nbsp;can&nbsp;be&nbsp;set&nbsp;to&nbsp;a&nbsp;positive&nbsp;or&nbsp;negative&nbsp;percentage&nbsp;value.&nbsp;For&nbsp;example,&nbsp;when&nbsp;**x**&nbsp;is&nbsp;set&nbsp;to&nbsp;**'100%'**,&nbsp;the&nbsp;touch&nbsp;target&nbsp;is&nbsp;offset&nbsp;from&nbsp;the&nbsp;right&nbsp;edge&nbsp;of&nbsp;the&nbsp;component&nbsp;by&nbsp;the&nbsp;component's&nbsp;width.&nbsp;When&nbsp;**x**&nbsp;is&nbsp;set&nbsp;to&nbsp;**'-100%'**,&nbsp;the&nbsp;touch&nbsp;target&nbsp;is&nbsp;offset&nbsp;from&nbsp;the&nbsp;left&nbsp;edge&nbsp;of&nbsp;the&nbsp;component&nbsp;by&nbsp;the&nbsp;component's&nbsp;width.&nbsp;When&nbsp;**y**&nbsp;is&nbsp;set&nbsp;to&nbsp;**'100%'**,&nbsp;the&nbsp;touch&nbsp;target&nbsp;is&nbsp;offset&nbsp;from&nbsp;the&nbsp;bottom&nbsp;edge&nbsp;of&nbsp;the&nbsp;component&nbsp;by&nbsp;the&nbsp;component's&nbsp;height.&nbsp;When&nbsp;**y**&nbsp;is&nbsp;set&nbsp;to&nbsp;**'-100%'**,&nbsp;the&nbsp;touch&nbsp;target&nbsp;is&nbsp;offset&nbsp;from&nbsp;the&nbsp;top&nbsp;edge&nbsp;of&nbsp;the&nbsp;component&nbsp;by&nbsp;the&nbsp;component's&nbsp;height.<br/>>&nbsp;<br/>>&nbsp;**width**&nbsp;and&nbsp;**height**&nbsp;can&nbsp;only&nbsp;be&nbsp;set&nbsp;to&nbsp;positive&nbsp;percentage&nbsp;values.&nbsp;When&nbsp;**width**&nbsp;is&nbsp;set&nbsp;to&nbsp;**'100%'**,&nbsp;the&nbsp;width&nbsp;of&nbsp;the&nbsp;touch&nbsp;target&nbsp;is&nbsp;equal&nbsp;to&nbsp;that&nbsp;of&nbsp;the&nbsp;component;&nbsp;when&nbsp;**height**&nbsp;is&nbsp;set&nbsp;to&nbsp;**'100%'**,&nbsp;the&nbsp;height&nbsp;of&nbsp;the&nbsp;touch&nbsp;target&nbsp;is&nbsp;equal&nbsp;to&nbsp;that&nbsp;of&nbsp;the&nbsp;component. | 
+
+
+- Rectangle attributes
+    | Name | Type | Mandatory | Default&nbsp;Value | Description | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | Length | No | 0vp | X&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;touch&nbsp;point&nbsp;relative&nbsp;to&nbsp;the&nbsp;left&nbsp;edge&nbsp;of&nbsp;the&nbsp;component. | 
+  | y | Length | No | 0vp | Y&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;touch&nbsp;point&nbsp;relative&nbsp;to&nbsp;the&nbsp;left&nbsp;edge&nbsp;of&nbsp;the&nbsp;component. | 
+  | width | Length | No | 100% | Width&nbsp;of&nbsp;the&nbsp;touch&nbsp;target. | 
+  | height | Length | No | 100% | Height&nbsp;of&nbsp;the&nbsp;touch&nbsp;target. | 
+
+  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+  > When both **x** and **y** are set to positive values, the entire touch target offsets towards the lower right corner of the component. How much the touch target offsets is subject to the set values.
+
+
+## Example
+
+  
+```
+@Entry
+@Component
+struct ResponseRegionExample {
+  build() {
+    Column() {
+        Toggle({ type: ToggleType.Checkbox, isOn: true })
+          .selectedColor(0x39a2db)
+          .backgroundColor(0xAFEEEE)
+          .responseRegion({ x: 1.0, y: 1.0, width: 400, height: 400 })
+          .onChange((isOn: boolean) => {
+            console.info('Component status:' + isOn)
+          })
+    }.width('100%').margin({ top: 5 })
+  }
+}
+```
+
+![en-us_image_0000001212218468](figures/en-us_image_0000001212218468.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-touchable.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-touchable.md
deleted file mode 100644
index b657f8645c805a602937716d43743016ee5fc99b..0000000000000000000000000000000000000000
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-touchable.md
+++ /dev/null
@@ -1,65 +0,0 @@
-# Click Control<a name="EN-US_TOPIC_0000001192595170"></a>
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This attribute is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-## Required Permissions<a name="section781125411508"></a>
-
-None
-
-## Attributes<a name="section6820191711316"></a>
-
-<a name="table1857494275915"></a>
-<table><thead align="left"><tr id="row1865613421594"><th class="cellrowborder" valign="top" width="25.46%" id="mcps1.1.5.1.1"><p id="p265614255916"><a name="p265614255916"></a><a name="p265614255916"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="18.19%" id="mcps1.1.5.1.2"><p id="p1865714425594"><a name="p1865714425594"></a><a name="p1865714425594"></a><strong id="b14692493144"><a name="b14692493144"></a><a name="b14692493144"></a>Type</strong></p>
-</th>
-<th class="cellrowborder" valign="top" width="12.120000000000001%" id="mcps1.1.5.1.3"><p id="p46572426593"><a name="p46572426593"></a><a name="p46572426593"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="44.230000000000004%" id="mcps1.1.5.1.4"><p id="p17657942185915"><a name="p17657942185915"></a><a name="p17657942185915"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row2657242115920"><td class="cellrowborder" valign="top" width="25.46%" headers="mcps1.1.5.1.1 "><p id="p565719424599"><a name="p565719424599"></a><a name="p565719424599"></a>touchable</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.19%" headers="mcps1.1.5.1.2 "><p id="p136577426594"><a name="p136577426594"></a><a name="p136577426594"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.120000000000001%" headers="mcps1.1.5.1.3 "><p id="p365774245912"><a name="p365774245912"></a><a name="p365774245912"></a>true</p>
-</td>
-<td class="cellrowborder" valign="top" width="44.230000000000004%" headers="mcps1.1.5.1.4 "><p id="p116579424595"><a name="p116579424595"></a><a name="p116579424595"></a>Whether the current component is touchable.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section1693524132311"></a>
-
-```
-@Entry
-@Component
-struct TouchAbleExample {
-  @State text1: string = ''
-  @State text2: string = ''
-
-  build() {
-    Stack() {
-      Rect()
-        .fill(Color.Gray).width(150).height(150)
-        .onClick(() => {
-          console.info(this.text1 = 'Rect Clicked')
-        })
-        .overlay(this.text1, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
-      Ellipse()
-        .fill(Color.Pink).width(150).height(80)
-        .touchable(false) // When the Ellipse area is touched, the message "Ellipse Clicked" is not displayed.
-        .onClick(() => {
-          console.info(this.text2 = 'Ellipse Clicked')
-        })
-        .overlay(this.text2, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
-    }.margin(100)
-  }
-}
-```
-
-![](figures/gif2.gif)
-
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
index 10ced26c5df07aa57727c633231be1d7bbb90f55..9872e09c8ee299860ac42290bd8240284bd48305 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
@@ -1,100 +1,29 @@
-# Transformation<a name="EN-US_TOPIC_0000001237355071"></a>
+# Transformation
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## Attributes<a name="section6820191711316"></a>
-
-<a name="table2999mcpsimp"></a>
-<table><thead align="left"><tr id="row3007mcpsimp"><th class="cellrowborder" valign="top" width="13.87%" id="mcps1.1.5.1.1"><p id="p3009mcpsimp"><a name="p3009mcpsimp"></a><a name="p3009mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="32.28%" id="mcps1.1.5.1.2"><p id="p3011mcpsimp"><a name="p3011mcpsimp"></a><a name="p3011mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="28.449999999999996%" id="mcps1.1.5.1.3"><p id="p3013mcpsimp"><a name="p3013mcpsimp"></a><a name="p3013mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="25.4%" id="mcps1.1.5.1.4"><p id="p3017mcpsimp"><a name="p3017mcpsimp"></a><a name="p3017mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row3018mcpsimp"><td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.5.1.1 "><p id="p3020mcpsimp"><a name="p3020mcpsimp"></a><a name="p3020mcpsimp"></a>rotate</p>
-</td>
-<td class="cellrowborder" valign="top" width="32.28%" headers="mcps1.1.5.1.2 "><p id="p12827142241112"><a name="p12827142241112"></a><a name="p12827142241112"></a>{</p>
-<p id="p5541155661115"><a name="p5541155661115"></a><a name="p5541155661115"></a>x?: number,</p>
-<p id="p14131160161217"><a name="p14131160161217"></a><a name="p14131160161217"></a>y?: number,</p>
-<p id="p2698910171214"><a name="p2698910171214"></a><a name="p2698910171214"></a>z?: number,</p>
-<p id="p17777413101214"><a name="p17777413101214"></a><a name="p17777413101214"></a>angle?: Angle,</p>
-<p id="p14233426141215"><a name="p14233426141215"></a><a name="p14233426141215"></a>centerX?: Length,</p>
-<p id="p9376295120"><a name="p9376295120"></a><a name="p9376295120"></a>centerY?: Length</p>
-<p id="p3022mcpsimp"><a name="p3022mcpsimp"></a><a name="p3022mcpsimp"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="28.449999999999996%" headers="mcps1.1.5.1.3 "><p id="p1239258101317"><a name="p1239258101317"></a><a name="p1239258101317"></a>{</p>
-<p id="p38045598131"><a name="p38045598131"></a><a name="p38045598131"></a>x: 0,</p>
-<p id="p15451101181418"><a name="p15451101181418"></a><a name="p15451101181418"></a>y: 0,</p>
-<p id="p16990897148"><a name="p16990897148"></a><a name="p16990897148"></a>z: 0,</p>
-<p id="p118341975147"><a name="p118341975147"></a><a name="p118341975147"></a>angle: 0,</p>
-<p id="p1917210410510"><a name="p1917210410510"></a><a name="p1917210410510"></a>centerX: '50%',</p>
-<p id="p3492022141418"><a name="p3492022141418"></a><a name="p3492022141418"></a>centerY: '50%'</p>
-<p id="p3024mcpsimp"><a name="p3024mcpsimp"></a><a name="p3024mcpsimp"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="25.4%" headers="mcps1.1.5.1.4 "><p id="p3028mcpsimp"><a name="p3028mcpsimp"></a><a name="p3028mcpsimp"></a>The vector (x, y, z) specifies a rotation axis. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The default value is <strong id="b1656651885313"><a name="b1656651885313"></a><a name="b1656651885313"></a>0</strong>. <strong id="b105817468534"><a name="b105817468534"></a><a name="b105817468534"></a>centerX</strong> and <strong id="b18308553155320"><a name="b18308553155320"></a><a name="b18308553155320"></a>centerY</strong> are used to set the rotation center point.</p>
-</td>
-</tr>
-<tr id="row3029mcpsimp"><td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.5.1.1 "><p id="p3031mcpsimp"><a name="p3031mcpsimp"></a><a name="p3031mcpsimp"></a>translate</p>
-</td>
-<td class="cellrowborder" valign="top" width="32.28%" headers="mcps1.1.5.1.2 "><p id="p144161243161214"><a name="p144161243161214"></a><a name="p144161243161214"></a>{</p>
-<p id="p13762144521216"><a name="p13762144521216"></a><a name="p13762144521216"></a>x?: Length,</p>
-<p id="p1870614710120"><a name="p1870614710120"></a><a name="p1870614710120"></a>y?: Length,</p>
-<p id="p7152175031215"><a name="p7152175031215"></a><a name="p7152175031215"></a>z? : Length</p>
-<p id="p3033mcpsimp"><a name="p3033mcpsimp"></a><a name="p3033mcpsimp"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="28.449999999999996%" headers="mcps1.1.5.1.3 "><p id="p102121847131418"><a name="p102121847131418"></a><a name="p102121847131418"></a>{</p>
-<p id="p15804174814143"><a name="p15804174814143"></a><a name="p15804174814143"></a>x: 0,</p>
-<p id="p2540145020146"><a name="p2540145020146"></a><a name="p2540145020146"></a>y: 0,</p>
-<p id="p18808152101419"><a name="p18808152101419"></a><a name="p18808152101419"></a>z: 0</p>
-<p id="p3035mcpsimp"><a name="p3035mcpsimp"></a><a name="p3035mcpsimp"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="25.4%" headers="mcps1.1.5.1.4 "><p id="p3039mcpsimp"><a name="p3039mcpsimp"></a><a name="p3039mcpsimp"></a>Translation distance along the x-, y-, and z-axis. The translation direction is determined by the positive and negative values. The default value is <strong id="b3261418564"><a name="b3261418564"></a><a name="b3261418564"></a>0</strong>.</p>
-</td>
-</tr>
-<tr id="row3040mcpsimp"><td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.5.1.1 "><p id="p3042mcpsimp"><a name="p3042mcpsimp"></a><a name="p3042mcpsimp"></a>scale</p>
-</td>
-<td class="cellrowborder" valign="top" width="32.28%" headers="mcps1.1.5.1.2 "><p id="p192253213139"><a name="p192253213139"></a><a name="p192253213139"></a>{</p>
-<p id="p1582354201319"><a name="p1582354201319"></a><a name="p1582354201319"></a>x?: number,</p>
-<p id="p61961877139"><a name="p61961877139"></a><a name="p61961877139"></a>y?: number,</p>
-<p id="p187761917136"><a name="p187761917136"></a><a name="p187761917136"></a>z?: number,</p>
-<p id="p148699403133"><a name="p148699403133"></a><a name="p148699403133"></a>centerX?: Length,</p>
-<p id="p93415382132"><a name="p93415382132"></a><a name="p93415382132"></a>centerY?: Length</p>
-<p id="p3044mcpsimp"><a name="p3044mcpsimp"></a><a name="p3044mcpsimp"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="28.449999999999996%" headers="mcps1.1.5.1.3 "><p id="p234156191410"><a name="p234156191410"></a><a name="p234156191410"></a>{</p>
-<p id="p9677165717148"><a name="p9677165717148"></a><a name="p9677165717148"></a>x: 1,</p>
-<p id="p102386051519"><a name="p102386051519"></a><a name="p102386051519"></a>y: 1,</p>
-<p id="p16318123191510"><a name="p16318123191510"></a><a name="p16318123191510"></a>z: 1,</p>
-<p id="p10695631520"><a name="p10695631520"></a><a name="p10695631520"></a>centerX:'50%',</p>
-<p id="p12661131519"><a name="p12661131519"></a><a name="p12661131519"></a>centerY:'50%'</p>
-<p id="p3046mcpsimp"><a name="p3046mcpsimp"></a><a name="p3046mcpsimp"></a>}</p>
-</td>
-<td class="cellrowborder" valign="top" width="25.4%" headers="mcps1.1.5.1.4 "><p id="p3050mcpsimp"><a name="p3050mcpsimp"></a><a name="p3050mcpsimp"></a>Scale ratio of the x-, y-, and z-axis. The default value is <strong id="b149961575817"><a name="b149961575817"></a><a name="b149961575817"></a>1</strong>. <strong id="b14313133495812"><a name="b14313133495812"></a><a name="b14313133495812"></a>centerX</strong> and <strong id="b4369838165812"><a name="b4369838165812"></a><a name="b4369838165812"></a>centerY</strong> are used to set the scale center point.</p>
-</td>
-</tr>
-<tr id="row3051mcpsimp"><td class="cellrowborder" valign="top" width="13.87%" headers="mcps1.1.5.1.1 "><p id="p3053mcpsimp"><a name="p3053mcpsimp"></a><a name="p3053mcpsimp"></a>transform</p>
-</td>
-<td class="cellrowborder" valign="top" width="32.28%" headers="mcps1.1.5.1.2 "><p id="p3055mcpsimp"><a name="p3055mcpsimp"></a><a name="p3055mcpsimp"></a>matrix: Matrix4</p>
-</td>
-<td class="cellrowborder" valign="top" width="28.449999999999996%" headers="mcps1.1.5.1.3 "><p id="p3057mcpsimp"><a name="p3057mcpsimp"></a><a name="p3057mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="25.4%" headers="mcps1.1.5.1.4 "><p id="p3060mcpsimp"><a name="p3060mcpsimp"></a><a name="p3060mcpsimp"></a>Transformation matrix of the component.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section4278134412416"></a>
 
+## Attributes
+
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| rotate | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>angle?:&nbsp;Angle,<br/>centerX?:&nbsp;Length,<br/>centerY?:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0,<br/>z:&nbsp;0,<br/>angle:&nbsp;0,<br/>centerX:&nbsp;'50%',<br/>centerY:&nbsp;'50%'<br/>} | The&nbsp;vector&nbsp;(x,&nbsp;y,&nbsp;z)&nbsp;specifies&nbsp;a&nbsp;rotation&nbsp;axis.&nbsp;A&nbsp;positive&nbsp;angle&nbsp;indicates&nbsp;a&nbsp;clockwise&nbsp;rotation,&nbsp;and&nbsp;a&nbsp;negative&nbsp;angle&nbsp;indicates&nbsp;a&nbsp;counterclockwise&nbsp;rotation.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**0**.&nbsp;**centerX**&nbsp;and&nbsp;**centerY**&nbsp;are&nbsp;used&nbsp;to&nbsp;set&nbsp;the&nbsp;rotation&nbsp;center&nbsp;point. | 
+| translate | {<br/>x?:&nbsp;Length,<br/>y?:&nbsp;Length,<br/>z?&nbsp;:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0,<br/>z:&nbsp;0<br/>} | Translation&nbsp;distance&nbsp;along&nbsp;the&nbsp;x-,&nbsp;y-,&nbsp;and&nbsp;z-axis.&nbsp;The&nbsp;translation&nbsp;direction&nbsp;is&nbsp;determined&nbsp;by&nbsp;the&nbsp;positive&nbsp;and&nbsp;negative&nbsp;values.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**0**. | 
+| scale | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>centerX?:&nbsp;Length,<br/>centerY?:&nbsp;Length<br/>} | {<br/>x:&nbsp;1,<br/>y:&nbsp;1,<br/>z:&nbsp;1,<br/>centerX:'50%',<br/>centerY:'50%'<br/>} | Scale&nbsp;ratio&nbsp;of&nbsp;the&nbsp;x-,&nbsp;y-,&nbsp;and&nbsp;z-axis.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**1**.&nbsp;**centerX**&nbsp;and&nbsp;**centerY**&nbsp;are&nbsp;used&nbsp;to&nbsp;set&nbsp;the&nbsp;scale&nbsp;center&nbsp;point. | 
+| transform | matrix:&nbsp;Matrix4 | - | Transformation&nbsp;matrix&nbsp;of&nbsp;the&nbsp;component. | 
+
+
+## Example
+
+  
 ```
 import Matrix4 from '@ohos.matrix4'
 
@@ -134,5 +63,4 @@ struct TransformExample {
 }
 ```
 
-![](figures/1111.png)
-
+![en-us_image_0000001257058401](figures/en-us_image_0000001257058401.png)
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 0d1e059339f91505df8d52c44d6e517bffb9f148..0754cd8cc2061dbd136ae8e88e9bc0de84e79592 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
@@ -1,67 +1,34 @@
-# Visibility<a name="EN-US_TOPIC_0000001192755134"></a>
+# Visibility
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## Attributes<a name="section6820191711316"></a>
-
-<a name="table3856mcpsimp"></a>
-<table><thead align="left"><tr id="row3864mcpsimp"><th class="cellrowborder" valign="top" width="12.088791120887912%" id="mcps1.1.5.1.1"><p id="p3866mcpsimp"><a name="p3866mcpsimp"></a><a name="p3866mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="13.18868113188681%" id="mcps1.1.5.1.2"><p id="p3868mcpsimp"><a name="p3868mcpsimp"></a><a name="p3868mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="10.988901109889012%" id="mcps1.1.5.1.3"><p id="p3870mcpsimp"><a name="p3870mcpsimp"></a><a name="p3870mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="63.73362663733626%" id="mcps1.1.5.1.4"><p id="p3874mcpsimp"><a name="p3874mcpsimp"></a><a name="p3874mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row3875mcpsimp"><td class="cellrowborder" valign="top" width="12.088791120887912%" headers="mcps1.1.5.1.1 "><p id="p3877mcpsimp"><a name="p3877mcpsimp"></a><a name="p3877mcpsimp"></a>visibility</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.18868113188681%" headers="mcps1.1.5.1.2 "><p id="p3879mcpsimp"><a name="p3879mcpsimp"></a><a name="p3879mcpsimp"></a><a href="#li1521155325910">Visibility</a></p>
-</td>
-<td class="cellrowborder" valign="top" width="10.988901109889012%" headers="mcps1.1.5.1.3 "><p id="p3881mcpsimp"><a name="p3881mcpsimp"></a><a name="p3881mcpsimp"></a>Visible</p>
-</td>
-<td class="cellrowborder" valign="top" width="63.73362663733626%" headers="mcps1.1.5.1.4 "><p id="p3885mcpsimp"><a name="p3885mcpsimp"></a><a name="p3885mcpsimp"></a>Whether the component is shown or hidden.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li1521155325910"></a>Visibility enums
-
-    <a name="table3452114216394"></a>
-    <table><thead align="left"><tr id="row245219426397"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p545244283914"><a name="p545244283914"></a><a name="p545244283914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p2452114203917"><a name="p2452114203917"></a><a name="p2452114203917"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6452144218390"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p34529427398"><a name="p34529427398"></a><a name="p34529427398"></a>Hidden</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245211421393"><a name="p1245211421393"></a><a name="p1245211421393"></a>The component is hidden, and a placeholder is used for it in the layout.</p>
-    </td>
-    </tr>
-    <tr id="row12452184217398"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p54523425398"><a name="p54523425398"></a><a name="p54523425398"></a>Visible</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p745215426391"><a name="p745215426391"></a><a name="p745215426391"></a>The component is shown.</p>
-    </td>
-    </tr>
-    <tr id="row9452134213392"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p510719111403"><a name="p510719111403"></a><a name="p510719111403"></a>None</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p154533425394"><a name="p154533425394"></a><a name="p154533425394"></a>The component is hidden. It is not involved in the layout, and no placeholder is used for it.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section4278134412416"></a>
 
+## Attributes
+
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| visibility | Visibility | Visibility.Visible | Whether&nbsp;the&nbsp;component&nbsp;is&nbsp;shown&nbsp;or&nbsp;hidden. | 
+
+
+- Visibility enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Hidden | The&nbsp;component&nbsp;is&nbsp;hidden,&nbsp;and&nbsp;a&nbsp;placeholder&nbsp;is&nbsp;used&nbsp;for&nbsp;it&nbsp;in&nbsp;the&nbsp;layout. | 
+  | Visible | The&nbsp;component&nbsp;is&nbsp;shown. | 
+  | None | The&nbsp;component&nbsp;is&nbsp;hidden.&nbsp;It&nbsp;is&nbsp;not&nbsp;involved&nbsp;in&nbsp;the&nbsp;layout,&nbsp;and&nbsp;no&nbsp;placeholder&nbsp;is&nbsp;used&nbsp;for&nbsp;it. | 
+
+
+## Example
+
+  
 ```
 @Entry
 @Component
@@ -85,5 +52,4 @@ struct VisibilityExample {
 }
 ```
 
-![](figures/visibility.gif)
-
+![en-us_image_0000001257058421](figures/en-us_image_0000001257058421.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md
index 91770cb64ef08cd8209c9ce6d9969d708ebd9f3b..75c12a927c600b0f2a2254f7fa6f4b7e3e414a1f 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md
@@ -1,39 +1,26 @@
-# Z-order Control<a name="EN-US_TOPIC_0000001237475083"></a>
+# Z-order Control
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## Attributes<a name="section6820191711316"></a>
-
-<a name="table3548mcpsimp"></a>
-<table><thead align="left"><tr id="row3556mcpsimp"><th class="cellrowborder" valign="top" width="15.120000000000001%" id="mcps1.1.5.1.1"><p id="p3558mcpsimp"><a name="p3558mcpsimp"></a><a name="p3558mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="14.829999999999998%" id="mcps1.1.5.1.2"><p id="p3560mcpsimp"><a name="p3560mcpsimp"></a><a name="p3560mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="11.39%" id="mcps1.1.5.1.3"><p id="p3562mcpsimp"><a name="p3562mcpsimp"></a><a name="p3562mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="58.660000000000004%" id="mcps1.1.5.1.4"><p id="p3566mcpsimp"><a name="p3566mcpsimp"></a><a name="p3566mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row3567mcpsimp"><td class="cellrowborder" valign="top" width="15.120000000000001%" headers="mcps1.1.5.1.1 "><p id="p3569mcpsimp"><a name="p3569mcpsimp"></a><a name="p3569mcpsimp"></a>zIndex</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.829999999999998%" headers="mcps1.1.5.1.2 "><p id="p3571mcpsimp"><a name="p3571mcpsimp"></a><a name="p3571mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.39%" headers="mcps1.1.5.1.3 "><p id="p3573mcpsimp"><a name="p3573mcpsimp"></a><a name="p3573mcpsimp"></a>0</p>
-</td>
-<td class="cellrowborder" valign="top" width="58.660000000000004%" headers="mcps1.1.5.1.4 "><p id="p3577mcpsimp"><a name="p3577mcpsimp"></a><a name="p3577mcpsimp"></a>Hierarchy of sibling components in a container. A larger z-order value indicates a higher display level.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section4278134412416"></a>
 
+## Attributes
+
+
+  | Name | Type | Default&nbsp;Value | Description | 
+| -------- | -------- | -------- | -------- |
+| zIndex | number | 0 | Hierarchy&nbsp;of&nbsp;sibling&nbsp;components&nbsp;in&nbsp;a&nbsp;container.&nbsp;A&nbsp;larger&nbsp;z-order&nbsp;value&nbsp;indicates&nbsp;a&nbsp;higher&nbsp;display&nbsp;level. | 
+
+
+## Example
+
+  
 ```
 @Entry
 @Component
@@ -57,5 +44,4 @@ struct ZIndexExample {
 }
 ```
 
-![](figures/zindex.png)
-
+![en-us_image_0000001257058443](figures/en-us_image_0000001257058443.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes.md
index 2ca2f7ebdbf19b813cdaf4894ab13bb8eb2172f4..b565b5df7a66ceff61d1fe67d004ac9a385dd91b 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes.md
@@ -1,45 +1,53 @@
-# Universal Attributes<a name="EN-US_TOPIC_0000001237355049"></a>
+# Universal Attributes
 
--   **[Size](ts-universal-attributes-size.md)**  
 
--   **[Location](ts-universal-attributes-location.md)**  
 
--   **[Layout Constraints](ts-universal-attributes-layout-constraints.md)**  
+- **[Size](ts-universal-attributes-size.md)**
 
--   **[Flex Layout](ts-universal-attributes-flex-layout.md)**  
+- **[Location](ts-universal-attributes-location.md)**
 
--   **[Border Configuration](ts-universal-attributes-border.md)**  
+- **[Layout Constraints](ts-universal-attributes-layout-constraints.md)**
 
--   **[Background](ts-universal-attributes-background.md)**  
+- **[Flex Layout](ts-universal-attributes-flex-layout.md)**
 
--   **[Opacity](ts-universal-attributes-opacity.md)**  
+- **[Border](ts-universal-attributes-border.md)**
 
--   **[Visibility](ts-universal-attributes-visibility.md)**  
+- **[Background](ts-universal-attributes-background.md)**
 
--   **[Enable/Disable](ts-universal-attributes-enable.md)**  
+- **[Opacity](ts-universal-attributes-opacity.md)**
 
--   **[Overlay](ts-universal-attributes-overlay.md)**  
+- **[Visibility](ts-universal-attributes-visibility.md)**
 
--   **[Z-order Control](ts-universal-attributes-z-order.md)**  
+- **[Enable/Disable](ts-universal-attributes-enable.md)**
 
--   **[Transformation](ts-universal-attributes-transformation.md)**  
+- **[Overlay](ts-universal-attributes-overlay.md)**
 
--   **[Image Effect Configuration](ts-universal-attributes-image-effect.md)**  
+- **[Z-order Control](ts-universal-attributes-z-order.md)**
 
--   **[Shape Clipping](ts-universal-attributes-sharp-clipping.md)**  
+- **[Transformation](ts-universal-attributes-transformation.md)**
 
--   **[Text Style](ts-universal-attributes-text-style.md)**  
+- **[Image Effect Configuration](ts-universal-attributes-image-effect.md)**
 
--   **[Grid](ts-universal-attributes-grid.md)**  
+- **[Shape Clipping](ts-universal-attributes-sharp-clipping.md)**
 
--   **[Gradient Color](ts-universal-attributes-gradient-color.md)**  
+- **[Text Style](ts-universal-attributes-text-style.md)**
 
--   **[Popup Control](ts-universal-attributes-popup.md)**  
+- **[Grid](ts-universal-attributes-grid.md)**
 
--   **[Menu Control](ts-universal-attributes-menu.md)**  
+- **[Gradient Color](ts-universal-attributes-gradient-color.md)**
 
--   **[Click Control](ts-universal-attributes-touchable.md)**  
+- **[Popup Control](ts-universal-attributes-popup.md)**
 
--   **[Touch Target](ts-universal-attributes-response-region.md)**  
+- **[Menu Control](ts-universal-attributes-menu.md)**
 
+- **[Click Control](ts-universal-attributes-click.md)**
 
+- **[Focus Control](ts-universal-attributes-focus.md)**
+
+- **[Hover Effect](ts-universal-attributes-hover-effect.md)**
+
+- **[Component ID](ts-universal-attributes-component-id.md)**
+
+- **[Touch Target](ts-universal-attributes-touch-target.md)**
+
+- **[Polymorphic Style](ts-universal-attributes-polymorphic-style.md)**
\ No newline at end of file
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md b/en/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
new file mode 100644
index 0000000000000000000000000000000000000000..200f994c813dd0768abdb859bbdd92b4c0530ca3
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
@@ -0,0 +1,48 @@
+# Component Area Change Event
+
+
+> ![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.
+
+
+## Required Permissions
+
+None
+
+
+## Events
+
+  | Name | Bubble&nbsp;Supported | Description | 
+| -------- | -------- | -------- |
+| onAreaChange(event:&nbsp;(oldValue:&nbsp;Area,&nbsp;newValue:&nbsp;Area)&nbsp;=&gt;&nbsp;void) | No | Triggered&nbsp;when&nbsp;the&nbsp;component&nbsp;area&nbsp;changes.&nbsp;For&nbsp;details&nbsp;about&nbsp;the&nbsp;**Area**&nbsp;type,&nbsp;see&nbsp;**Area**&nbsp;attributes. | 
+
+
+## Example
+
+
+```
+@Entry
+@Component
+struct AreaExample {
+  @State value: string = 'Text'
+  @State size: string = ''
+
+  build() {
+    Column() {
+      Text(this.value)
+        .backgroundColor(Color.Green).margin(30).fontSize(20)
+        .onClick(() => {
+          this.value = this.value + 'Text'
+        })
+        .onAreaChange((oldValue: Area, newValue: Area) => {
+          console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
+          this.size = JSON.stringify(newValue)
+        })
+      Text('new area is: \n' + this.size).margin({ right: 30, left: 30 })
+    }
+    .width('100%').height('100%').margin({ top: 30 })
+  }
+}
+```
+
+![en-us_image_0000001257058403](figures/en-us_image_0000001257058403.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-components.md b/en/application-dev/reference/arkui-ts/ts-universal-components.md
index 3a70c3c421034a7cba1e10b40c8f557ad143f8ce..35d2a841f25a6884ca690a19fdc068d3fad4e1a8 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-components.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-components.md
@@ -1,9 +1,9 @@
-# Universal Components<a name="EN-US_TOPIC_0000001192595160"></a>
+# Universal Components
 
--   **[Universal Events](ts-universal-events.md)**  
 
--   **[Universal Attributes](ts-universal-attributes.md)**  
 
--   **[Gesture Processing](ts-gesture-processing.md)**  
+- **[Universal Events](ts-universal-events.md)**
 
+- **[Universal Attributes](ts-universal-attributes.md)**
 
+- **[Gesture Processing](ts-gesture-processing.md)**
\ No newline at end of file
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-click.md b/en/application-dev/reference/arkui-ts/ts-universal-events-click.md
index 8ac56eb6bba732d3e9780113361fe4775b4723cb..0cf31dce9664da5dcc4296f199e613088629bcd1 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-events-click.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-events-click.md
@@ -1,182 +1,36 @@
-# Click Event<a name="EN-US_TOPIC_0000001192915110"></a>
+# Click Event
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## Events<a name="section1823713918564"></a>
-
-<a name="table268mcpsimp"></a>
-<table><thead align="left"><tr id="row274mcpsimp"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.5.1.1"><p id="p278mcpsimp"><a name="p278mcpsimp"></a><a name="p278mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.5.1.2"><p id="p240018113020"><a name="p240018113020"></a><a name="p240018113020"></a>Bubble Supported</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.5.1.3"><p id="p280mcpsimp"><a name="p280mcpsimp"></a><a name="p280mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row281mcpsimp"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.5.1.1 "><p id="p283mcpsimp"><a name="p283mcpsimp"></a><a name="p283mcpsimp"></a>onClick(callback: (event?: ClickEvent) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.5.1.2 "><p id="p240119143012"><a name="p240119143012"></a><a name="p240119143012"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.5.1.3 "><p id="p287mcpsimp"><a name="p287mcpsimp"></a><a name="p287mcpsimp"></a>Called when a click event occurs. For details about the event parameters, see <a href="#li155675712535">ClickEvent object</a>.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
--   <a name="li155675712535"></a>ClickEvent object
-
-    <a name="table150414419378"></a>
-    <table><thead align="left"><tr id="row250434411379"><th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.1.4.1.1"><p id="p17251053163714"><a name="p17251053163714"></a><a name="p17251053163714"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.1.4.1.2"><p id="p125175313377"><a name="p125175313377"></a><a name="p125175313377"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.1.4.1.3"><p id="p152518539379"><a name="p152518539379"></a><a name="p152518539379"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row25047446377"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p625120539377"><a name="p625120539377"></a><a name="p625120539377"></a>screenX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.2 "><p id="p7251105311371"><a name="p7251105311371"></a><a name="p7251105311371"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.3 "><p id="p62511553103710"><a name="p62511553103710"></a><a name="p62511553103710"></a>X coordinate of the click relative to the left edge of the screen.</p>
-    </td>
-    </tr>
-    <tr id="row16504744143718"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p3251353193710"><a name="p3251353193710"></a><a name="p3251353193710"></a>screenY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.2 "><p id="p14252175323715"><a name="p14252175323715"></a><a name="p14252175323715"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.3 "><p id="p225275353713"><a name="p225275353713"></a><a name="p225275353713"></a>Y coordinate of the click relative to the upper edge of the screen.</p>
-    </td>
-    </tr>
-    <tr id="row750454419376"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p11252195317371"><a name="p11252195317371"></a><a name="p11252195317371"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.2 "><p id="p025215313716"><a name="p025215313716"></a><a name="p025215313716"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.3 "><p id="p10252195316373"><a name="p10252195316373"></a><a name="p10252195316373"></a>X coordinate of the click relative to the left edge of the component being clicked.</p>
-    </td>
-    </tr>
-    <tr id="row19505244163715"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p6252195312377"><a name="p6252195312377"></a><a name="p6252195312377"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.2 "><p id="p92521553113719"><a name="p92521553113719"></a><a name="p92521553113719"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.3 "><p id="p1925216537376"><a name="p1925216537376"></a><a name="p1925216537376"></a>Y coordinate of the click relative to the upper edge of the component being clicked.</p>
-    </td>
-    </tr>
-    <tr id="row206951418174710"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p069611884717"><a name="p069611884717"></a><a name="p069611884717"></a>target<sup id="sup2028414336385"><a name="sup2028414336385"></a><a name="sup2028414336385"></a>8+</sup></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.2 "><p id="p869611874717"><a name="p869611874717"></a><a name="p869611874717"></a><a href="#li552912253714">EventTarget</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.3 "><p id="p136963189476"><a name="p136963189476"></a><a name="p136963189476"></a>Object of the element that is clicked.</p>
-    </td>
-    </tr>
-    <tr id="row7505194418373"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p3252155316378"><a name="p3252155316378"></a><a name="p3252155316378"></a>timestamp</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.2 "><p id="p16252453163717"><a name="p16252453163717"></a><a name="p16252453163717"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.3 "><p id="p13252115333711"><a name="p13252115333711"></a><a name="p13252115333711"></a>Timestamp of the event.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li552912253714"></a>EventTarget object<sup>8+</sup>
-
-    <a name="table16263713812"></a>
-    <table><thead align="left"><tr id="row821037683"><th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.1.4.1.1"><p id="p14212371983"><a name="p14212371983"></a><a name="p14212371983"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.1.4.1.2"><p id="p62737480"><a name="p62737480"></a><a name="p62737480"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.1.4.1.3"><p id="p186742557817"><a name="p186742557817"></a><a name="p186742557817"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row2027375819"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p8214371488"><a name="p8214371488"></a><a name="p8214371488"></a>area</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.2 "><p id="p1721375814"><a name="p1721375814"></a><a name="p1721375814"></a><a href="#li3196948121214">Area</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.3 "><p id="p112133720810"><a name="p112133720810"></a><a name="p112133720810"></a>Area information of the target element.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li3196948121214"></a>Area attributes<sup>8+</sup>
-
-    <a name="table7114191821312"></a>
-    <table><thead align="left"><tr id="row811471812132"><th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.1.4.1.1"><p id="p161151118191312"><a name="p161151118191312"></a><a name="p161151118191312"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.1.4.1.2"><p id="p6115141815136"><a name="p6115141815136"></a><a name="p6115141815136"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.1.4.1.3"><p id="p1197593717135"><a name="p1197593717135"></a><a name="p1197593717135"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row21151918111311"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p21151818111310"><a name="p21151818111310"></a><a name="p21151818111310"></a>width</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.2 "><p id="p18115131819137"><a name="p18115131819137"></a><a name="p18115131819137"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.3 "><p id="p31157183130"><a name="p31157183130"></a><a name="p31157183130"></a>Width of the target element.</p>
-    </td>
-    </tr>
-    <tr id="row1211511814134"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p111511815137"><a name="p111511815137"></a><a name="p111511815137"></a>height</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.2 "><p id="p811518188132"><a name="p811518188132"></a><a name="p811518188132"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.3 "><p id="p14115191841319"><a name="p14115191841319"></a><a name="p14115191841319"></a>Height of the target element.</p>
-    </td>
-    </tr>
-    <tr id="row611515184130"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p11151318201311"><a name="p11151318201311"></a><a name="p11151318201311"></a>pos</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.2 "><p id="p19115181811313"><a name="p19115181811313"></a><a name="p19115181811313"></a><a href="#li7111244165">Position</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.3 "><p id="p161151318191314"><a name="p161151318191314"></a><a name="p161151318191314"></a>Position of the upper left corner of the target element relative to that of the parent element.</p>
-    </td>
-    </tr>
-    <tr id="row141151018171317"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p19115618131320"><a name="p19115618131320"></a><a name="p19115618131320"></a>globalPos</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.2 "><p id="p1146417160254"><a name="p1146417160254"></a><a name="p1146417160254"></a><a href="#li7111244165">Position</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.3 "><p id="p12115618141318"><a name="p12115618141318"></a><a name="p12115618141318"></a>Position of the upper left corner of the target element relative to that of the page.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li7111244165"></a>Position attributes<sup>8+</sup>
-
-    <a name="table1211352151616"></a>
-    <table><thead align="left"><tr id="row142115526161"><th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.1.4.1.1"><p id="p14211252101612"><a name="p14211252101612"></a><a name="p14211252101612"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.1.4.1.2"><p id="p921155281618"><a name="p921155281618"></a><a name="p921155281618"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.1.4.1.3"><p id="p22115212162"><a name="p22115212162"></a><a name="p22115212162"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row192175211612"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p152118524166"><a name="p152118524166"></a><a name="p152118524166"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.2 "><p id="p82125215163"><a name="p82125215163"></a><a name="p82125215163"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.3 "><p id="p921115219166"><a name="p921115219166"></a><a name="p921115219166"></a>X-coordinate.</p>
-    </td>
-    </tr>
-    <tr id="row1721752161614"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p721155212168"><a name="p721155212168"></a><a name="p721155212168"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.2 "><p id="p1521125218168"><a name="p1521125218168"></a><a name="p1521125218168"></a>Length</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.3 "><p id="p1921652181617"><a name="p1921652181617"></a><a name="p1921652181617"></a>Y-coordinate.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section16900453182718"></a>
+
+## Events
+
+  | Name | Bubble&nbsp;Supported | Description | 
+| -------- | -------- | -------- |
+| onClick(callback:&nbsp;(event?:&nbsp;ClickEvent)&nbsp;=&gt;&nbsp;void) | No | Called&nbsp;when&nbsp;a&nbsp;click&nbsp;event&nbsp;occurs.&nbsp;For&nbsp;details&nbsp;about&nbsp;the&nbsp;event&nbsp;parameters,&nbsp;see&nbsp;[ClickEvent](#clickevent). | 
+
+
+### ClickEvent
+
+  | Name | Type | Description | 
+| -------- | -------- | -------- |
+| screenX | number | X&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;click&nbsp;relative&nbsp;to&nbsp;the&nbsp;left&nbsp;edge&nbsp;of&nbsp;the&nbsp;screen. | 
+| screenY | number | Y&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;click&nbsp;relative&nbsp;to&nbsp;the&nbsp;upper&nbsp;edge&nbsp;of&nbsp;the&nbsp;screen. | 
+| x | number | X&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;click&nbsp;relative&nbsp;to&nbsp;the&nbsp;left&nbsp;edge&nbsp;of&nbsp;the&nbsp;component&nbsp;being&nbsp;clicked. | 
+| y | number | Y&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;click&nbsp;relative&nbsp;to&nbsp;the&nbsp;upper&nbsp;edge&nbsp;of&nbsp;the&nbsp;component&nbsp;being&nbsp;clicked. | 
+| target<sup>8+</sup> | EventTarget | Target&nbsp;element&nbsp;that&nbsp;is&nbsp;clicked. | 
+| timestamp | number | Timestamp&nbsp;of&nbsp;the&nbsp;event. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -189,9 +43,9 @@ struct ClickExample {
       Button('Click').backgroundColor(0x2788D9).width(100).height(40)
         .onClick((event: ClickEvent) => {
           console.info(this.text = 'Click Point:' + '\n  screenX:' + event.screenX + '\n  screenY:' + event.screenY
-          + '\n  x :' + event.x + '\n  y:' + event.y + '\ntarget:' + '\n  component globalPos:('
-+ event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\n  width:'
-          + event.target.area.width + '\n  height：' + event.target.area.height)
+          + '\n  x:' + event.x + '\n  y:' + event.y + '\ntarget:' + '\n  component globalPos:('
+          + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\n  width:'
+          + event.target.area.width + '\n  height:' + event.target.area.height)
         })
       Text(this.text).padding(15)
     }.height(350).width('100%').padding(10)
@@ -199,5 +53,5 @@ struct ClickExample {
 }
 ```
 
-![](figures/en-us_image_0000001237355087.gif)
 
+![en-us_image_0000001256858383](figures/en-us_image_0000001256858383.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-component-area-change.md b/en/application-dev/reference/arkui-ts/ts-universal-events-component-area-change.md
deleted file mode 100644
index 4b79a9ccdd11448dff7c316ee56b10424fa7d796..0000000000000000000000000000000000000000
--- a/en/application-dev/reference/arkui-ts/ts-universal-events-component-area-change.md
+++ /dev/null
@@ -1,59 +0,0 @@
-# Component Area Change Event<a name="EN-US_TOPIC_0000001237475071"></a>
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This event is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-## Required Permissions<a name="section781125411508"></a>
-
-None
-
-## Events<a name="section7486701018"></a>
-
-<a name="table268mcpsimp"></a>
-<table><thead align="left"><tr id="row274mcpsimp"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.5.1.1"><p id="p278mcpsimp"><a name="p278mcpsimp"></a><a name="p278mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.5.1.2"><p id="p240018113020"><a name="p240018113020"></a><a name="p240018113020"></a>Bubble Supported</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.5.1.3"><p id="p280mcpsimp"><a name="p280mcpsimp"></a><a name="p280mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row281mcpsimp"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.5.1.1 "><p id="p15453115275010"><a name="p15453115275010"></a><a name="p15453115275010"></a>onAreaChange(event: (oldValue: Area, newValue: Area) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.5.1.2 "><p id="p240119143012"><a name="p240119143012"></a><a name="p240119143012"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.5.1.3 "><p id="p287mcpsimp"><a name="p287mcpsimp"></a><a name="p287mcpsimp"></a>Triggered when the component area changes. For details about the <strong id="b419315131717"><a name="b419315131717"></a><a name="b419315131717"></a>Area</strong> type, see the description of the <a href="ts-universal-events-click.md#li3196948121214">Area object</a>.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section16900453182718"></a>
-
-```
-@Entry
-@Component
-struct AreaExample {
-  @State value: string = 'Text'
-  @State size: string = ''
-
-  build() {
-    Column() {
-      Text(this.value)
-        .backgroundColor(Color.Green).margin(30).fontSize(20)
-        .onClick(() => {
-          this.value = this.value + 'Text'
-        })
-        .onAreaChange((oldValue: Area, newValue: Area) => {
-          console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
-          this.size = JSON.stringify(newValue)
-        })
-      Text('new area is: \n' + this.size).margin({ right: 30, left: 30 })
-    }
-    .width('100%').height('100%').margin({ top: 30 })
-  }
-}
-```
-
-![](figures/gif4.gif)
-
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md b/en/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
new file mode 100644
index 0000000000000000000000000000000000000000..b8725c95e27c3d04a9c556eb35ffb6721c99111f
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
@@ -0,0 +1,147 @@
+# Drag/Drop Event
+
+
+> ![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.
+
+
+| Name | Bubble&nbsp;Supported | Description |
+| -------- | -------- | -------- |
+| onDragStart(callback:&nbsp;(event:&nbsp;[DragEvent](#DragEvent),&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;\|[Custom Builder](../../ui/ts-types.md)) | No | Triggered&nbsp;when&nbsp;the&nbsp;component&nbsp;bound&nbsp;to&nbsp;the&nbsp;event&nbsp;is&nbsp;dragged&nbsp;for&nbsp;the&nbsp;first&nbsp;time.<br/>-**event**:&nbsp;information&nbsp;about&nbsp;the&nbsp;drag&nbsp;event,&nbsp;including&nbsp;the&nbsp;coordinates&nbsp;of&nbsp;the&nbsp;item&nbsp;that&nbsp;is&nbsp;being&nbsp;dragged.<br/>-**extraParams**:&nbsp;additional&nbsp;information&nbsp;about&nbsp;the&nbsp;drag&nbsp;event.&nbsp;For&nbsp;details,&nbsp;see&nbsp;extraParam.<br/>Return&nbsp;value:&nbsp;object&nbsp;being&nbsp;dragged,&nbsp;which&nbsp;is&nbsp;used&nbsp;for&nbsp;prompts&nbsp;displayed&nbsp;when&nbsp;the&nbsp;object&nbsp;is&nbsp;dragged.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;-&nbsp;A&nbsp;drag&nbsp;event&nbsp;can&nbsp;be&nbsp;triggered&nbsp;by&nbsp;a&nbsp;150&nbsp;ms&nbsp;long&nbsp;press.<br/>>&nbsp;<br/>>&nbsp;-&nbsp;If&nbsp;the&nbsp;duration&nbsp;of&nbsp;a&nbsp;long-press&nbsp;gesture&nbsp;is&nbsp;set&nbsp;to&nbsp;less&nbsp;than&nbsp;or&nbsp;equal&nbsp;to&nbsp;150&nbsp;ms,&nbsp;the&nbsp;callback&nbsp;for&nbsp;the&nbsp;long-press&nbsp;gesture&nbsp;takes&nbsp;precedence.&nbsp;Otherwise,&nbsp;the&nbsp;callback&nbsp;for&nbsp;the&nbsp;drag&nbsp;event&nbsp;takes&nbsp;precedence. |
+| onDragEnter(callback:&nbsp;(event:&nbsp;[DragEvent](#DragEvent),&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | No | Triggered&nbsp;when&nbsp;the&nbsp;dragged&nbsp;item&nbsp;enters&nbsp;a&nbsp;valid&nbsp;drop&nbsp;target.<br/>-**event**:&nbsp;information&nbsp;about&nbsp;the&nbsp;drag&nbsp;event,&nbsp;including&nbsp;the&nbsp;coordinates&nbsp;of&nbsp;the&nbsp;item&nbsp;that&nbsp;is&nbsp;being&nbsp;dragged.<br/>-**extraParams**:&nbsp;additional&nbsp;information&nbsp;about&nbsp;the&nbsp;drag&nbsp;event.&nbsp;For&nbsp;details,&nbsp;see&nbsp;extraParam.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;This&nbsp;event&nbsp;is&nbsp;valid&nbsp;only&nbsp;when&nbsp;the&nbsp;**onDrop**&nbsp;event&nbsp;is&nbsp;listened&nbsp;to. |
+| onDragMove(callback:&nbsp;(event:&nbsp;[DragEvent](#DragEvent),&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | No | Triggered&nbsp;when&nbsp;the&nbsp;dragged&nbsp;item&nbsp;moves&nbsp;in&nbsp;a&nbsp;valid&nbsp;drop&nbsp;target.<br/>-**event**:&nbsp;information&nbsp;about&nbsp;the&nbsp;drag&nbsp;event,&nbsp;including&nbsp;the&nbsp;coordinates&nbsp;of&nbsp;the&nbsp;item&nbsp;that&nbsp;is&nbsp;being&nbsp;dragged.<br/>-**extraParams**:&nbsp;additional&nbsp;information&nbsp;about&nbsp;the&nbsp;drag&nbsp;event.&nbsp;For&nbsp;details,&nbsp;see&nbsp;extraParam.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;This&nbsp;event&nbsp;is&nbsp;valid&nbsp;only&nbsp;when&nbsp;the&nbsp;**onDrop**&nbsp;event&nbsp;is&nbsp;listened&nbsp;to. |
+| onDragLeave(callback:&nbsp;(event:&nbsp;[DragEvent](#DragEvent),&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | No | Triggered&nbsp;when&nbsp;the&nbsp;dragged&nbsp;item&nbsp;leaves&nbsp;a&nbsp;valid&nbsp;drop&nbsp;target.<br/>-**event**:&nbsp;information&nbsp;about&nbsp;the&nbsp;drag&nbsp;event,&nbsp;including&nbsp;the&nbsp;coordinates&nbsp;of&nbsp;the&nbsp;item&nbsp;that&nbsp;is&nbsp;being&nbsp;dragged.<br/>-**extraParams**:&nbsp;additional&nbsp;information&nbsp;about&nbsp;the&nbsp;drag&nbsp;event.&nbsp;For&nbsp;details,&nbsp;see&nbsp;extraParam.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;This&nbsp;event&nbsp;is&nbsp;valid&nbsp;only&nbsp;when&nbsp;the&nbsp;**onDrop**&nbsp;event&nbsp;is&nbsp;listened&nbsp;to. |
+| onDrop(callback:&nbsp;(event:[DragEvent](#DragEvent),&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | No | Triggered&nbsp;when&nbsp;the&nbsp;dragged&nbsp;item&nbsp;is&nbsp;dropped&nbsp;on&nbsp;a&nbsp;valid&nbsp;drop&nbsp;target.<br/>-**event**:&nbsp;information&nbsp;about&nbsp;the&nbsp;drag&nbsp;event,&nbsp;including&nbsp;the&nbsp;coordinates&nbsp;of&nbsp;the&nbsp;item&nbsp;that&nbsp;is&nbsp;being&nbsp;dragged.<br/>-**extraParams**:&nbsp;additional&nbsp;information&nbsp;about&nbsp;the&nbsp;drag&nbsp;event.&nbsp;For&nbsp;details,&nbsp;see&nbsp;extraParam. |
+
+
+- extraParam
+  Returns additional information required for dragging an item.
+
+    **extraParam** is a string converted from a JSON object. You can obtain the following attributes using the JSON object converted from **Json.parse**.
+    | Name | Type | Description | 
+  | -------- | -------- | -------- |
+  | selectedIndex | number | Index&nbsp;of&nbsp;the&nbsp;dragged&nbsp;item&nbsp;in&nbsp;the&nbsp;parent&nbsp;container.&nbsp;The&nbsp;value&nbsp;of&nbsp;**selectedindex**&nbsp;starts&nbsp;from&nbsp;**0**.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;This&nbsp;attribute&nbsp;is&nbsp;valid&nbsp;only&nbsp;in&nbsp;the&nbsp;**ListItem**&nbsp;component. | 
+  | insertIndex | number | Index&nbsp;of&nbsp;the&nbsp;element&nbsp;into&nbsp;which&nbsp;the&nbsp;dragged&nbsp;item&nbsp;is&nbsp;dropped&nbsp;in&nbsp;the&nbsp;**List**&nbsp;component.&nbsp;The&nbsp;value&nbsp;of&nbsp;**insertIndex**&nbsp;starts&nbsp;from&nbsp;**0**.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE：**<br/>>&nbsp;This&nbsp;attribute&nbsp;is&nbsp;valid&nbsp;only&nbsp;in&nbsp;the&nbsp;drag&nbsp;event&nbsp;of&nbsp;the&nbsp;**List**&nbsp;component. | 
+
+
+### DragEvent
+
+- APIs
+    | Name | Return&nbsp;Value&nbsp;Type | Description | 
+  | -------- | -------- | -------- |
+  | getX() | number | X-coordinate&nbsp;of&nbsp;the&nbsp;item&nbsp;that&nbsp;is&nbsp;being&nbsp;dragged,&nbsp;in&nbsp;vp. | 
+  | getY() | number | Y-coordinate&nbsp;of&nbsp;the&nbsp;item&nbsp;that&nbsp;is&nbsp;being&nbsp;dragged,&nbsp;in&nbsp;vp. | 
+
+
+## Example
+
+
+```
+@Entry
+@Component
+struct DragExample {
+  @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']
+  @State text: string = ''
+  @State bool: boolean = false
+  @State bool1: boolean = false
+  @State size: string = ''
+  @State appleVisible: Visibility = Visibility.Visible
+  @State orangeVisible: Visibility = Visibility.Visible
+  @State bananaVisible: Visibility = Visibility.Visible
+  @State select: number = 0
+  @State currentIndex: number = 0
+
+  @Builder pixelMapBuilder() {
+    Column() {
+      Text(this.text)
+        .width('50%').height(60).fontSize(16).borderRadius(10)
+        .textAlign(TextAlign.Center).backgroundColor(Color.Yellow)
+    }
+  }
+
+  build() {
+    Column() {
+      Text('There are three Text elements here')
+        .fontSize(12).fontColor(0xCCCCCC).width('90%')
+        .textAlign(TextAlign.Start).margin(5)
+      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) {
+        Text('apple').width('25%').height(35).fontSize(16)
+          .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE)
+          .visibility(this.appleVisible)
+          .onDragStart(() => {
+            this.bool = true
+            this.text = 'apple'
+            this.appleVisible = Visibility.Hidden
+            return this.pixelMapBuilder
+          })
+        Text('orange').width('25%').height(35).fontSize(16)
+          .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE)
+          .visibility(this.orangeVisible)
+          .onDragStart(() => {
+            this.bool = true
+            this.text = 'orange'
+            this.orangeVisible = Visibility.Hidden
+            return this.pixelMapBuilder
+          })
+        Text('banana').width('25%').height(35).fontSize(16)
+          .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE)
+          .visibility(this.bananaVisible)
+          .onDragStart((event: DragEvent, extraParams: string) => {
+            console.log('Text onDragStarts, ' + extraParams)
+            this.bool = true
+            this.text = 'banana'
+            this.bananaVisible = Visibility.Hidden
+            return this.pixelMapBuilder
+          })
+      }.border({ width: 1 }).width('90%').padding({ top: 10, bottom: 10 }).margin(10)
+
+      Text('This is a List element').fontSize(12)
+        .fontColor(0xCCCCCC).width('90%')
+        .textAlign(TextAlign.Start).margin(15)
+      List({ space: 20, initialIndex: 0 }) {
+        ForEach(this.numbers, (item) => {
+          ListItem() {
+            Text('' + item)
+              .width('100%').height(80).fontSize(16).borderRadius(10)
+              .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE)
+          }
+          .onDragStart((event: DragEvent, extraParams: string) => {
+            console.log('ListItem onDragStarts, ' + extraParams)
+            var jsonString = JSON.parse(extraParams)
+            this.bool1 = true
+            this.text = this.numbers[jsonString.selectedIndex]
+            this.select = jsonString.selectedIndex
+            return this.pixelMapBuilder
+          })
+        }, item => item)
+      }
+      .editMode(true)
+      .height('50%').width('90%').border({ width: 1 })
+      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 })
+      .onDragEnter((event: DragEvent, extraParams: string) => {
+        console.log('List onDragEnter, ' + extraParams)
+      })
+      .onDragMove((event: DragEvent, extraParams: string) => {
+        console.log('List onDragMove, ' + extraParams)
+      })
+      .onDragLeave((event: DragEvent, extraParams: string) => {
+        console.log('List onDragLeave, ' + extraParams)
+      })
+      .onDrop((event: DragEvent, extraParams: string) => {
+        var jsonString = JSON.parse(extraParams)
+        if (this.bool) {
+          this.numbers.splice(jsonString.insertIndex, 0, this.text)
+          this.bool = false
+        } else if (this.bool1) {
+          this.numbers.splice(jsonString.selectedIndex, 1)
+          this.numbers.splice(jsonString.insertIndex, 0, this.text)
+          this.bool = false
+          this.bool1 = false
+        }
+      })
+    }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 })
+  }
+}
+```
+
+![en-us_image_0000001212218450](figures/en-us_image_0000001212218450.gif)
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 0cbdd5984bd943aa5928259c6becf73df56d07cb..38e1218012c8597c5d2f3022672f88a6ba55a118 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
@@ -1,226 +1,67 @@
-# Key Event<a name="EN-US_TOPIC_0000001192915122"></a>
+# Key Event
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## Events<a name="section2158223135910"></a>
-
-<a name="table1721263545919"></a>
-<table><thead align="left"><tr id="row1021273545912"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.5.1.1"><p id="p8212635135919"><a name="p8212635135919"></a><a name="p8212635135919"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.5.1.2"><p id="p1321253510597"><a name="p1321253510597"></a><a name="p1321253510597"></a>Bubble Supported</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.5.1.3"><p id="p1421211354599"><a name="p1421211354599"></a><a name="p1421211354599"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row112122035115916"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.5.1.1 "><p id="p1221214357594"><a name="p1221214357594"></a><a name="p1221214357594"></a>onKeyEvent(event: (event?: KeyEvent) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.5.1.2 "><p id="p102121035145917"><a name="p102121035145917"></a><a name="p102121035145917"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.5.1.3 "><p id="p22121535105920"><a name="p22121535105920"></a><a name="p22121535105920"></a>Called when a key event occurs. For details about the event parameters, see <a href="#section3668926124018">KeyEvent Object</a>.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## KeyEvent Object<a name="section3668926124018"></a>
-
--   Attributes
-
-    <a name="table53243322214"></a>
-    <table><thead align="left"><tr id="row832453172215"><th class="cellrowborder" valign="top" width="33.29332933293329%" id="mcps1.1.4.1.1"><p id="p113242319226"><a name="p113242319226"></a><a name="p113242319226"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="21.26212621262126%" id="mcps1.1.4.1.2"><p id="p183242030221"><a name="p183242030221"></a><a name="p183242030221"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="45.44454445444545%" id="mcps1.1.4.1.3"><p id="p143241031224"><a name="p143241031224"></a><a name="p143241031224"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row43244322214"><td class="cellrowborder" valign="top" width="33.29332933293329%" headers="mcps1.1.4.1.1 "><p id="p1324631229"><a name="p1324631229"></a><a name="p1324631229"></a>type</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.26212621262126%" headers="mcps1.1.4.1.2 "><p id="p4324203182211"><a name="p4324203182211"></a><a name="p4324203182211"></a><a href="#li15552046124817">KeyType</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="45.44454445444545%" headers="mcps1.1.4.1.3 "><p id="p13241232225"><a name="p13241232225"></a><a name="p13241232225"></a>Type of a key.</p>
-    </td>
-    </tr>
-    <tr id="row9324532224"><td class="cellrowborder" valign="top" width="33.29332933293329%" headers="mcps1.1.4.1.1 "><p id="p153241932220"><a name="p153241932220"></a><a name="p153241932220"></a>keyCode</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.26212621262126%" headers="mcps1.1.4.1.2 "><p id="p113244332215"><a name="p113244332215"></a><a name="p113244332215"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="45.44454445444545%" headers="mcps1.1.4.1.3 "><p id="p932412312226"><a name="p932412312226"></a><a name="p932412312226"></a>Key code.</p>
-    </td>
-    </tr>
-    <tr id="row14324332229"><td class="cellrowborder" valign="top" width="33.29332933293329%" headers="mcps1.1.4.1.1 "><p id="p332412302213"><a name="p332412302213"></a><a name="p332412302213"></a>keyText</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.26212621262126%" headers="mcps1.1.4.1.2 "><p id="p1232515372212"><a name="p1232515372212"></a><a name="p1232515372212"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="45.44454445444545%" headers="mcps1.1.4.1.3 "><p id="p032510312221"><a name="p032510312221"></a><a name="p032510312221"></a>Key value.</p>
-    </td>
-    </tr>
-    <tr id="row1032543162211"><td class="cellrowborder" valign="top" width="33.29332933293329%" headers="mcps1.1.4.1.1 "><p id="p932517352210"><a name="p932517352210"></a><a name="p932517352210"></a>keySource</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.26212621262126%" headers="mcps1.1.4.1.2 "><p id="p832533172211"><a name="p832533172211"></a><a name="p832533172211"></a><a href="#li19778175915485">KeySource</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="45.44454445444545%" headers="mcps1.1.4.1.3 "><p id="p1432563132211"><a name="p1432563132211"></a><a name="p1432563132211"></a>Type of the input device that triggers the key event.</p>
-    </td>
-    </tr>
-    <tr id="row732533102212"><td class="cellrowborder" valign="top" width="33.29332933293329%" headers="mcps1.1.4.1.1 "><p id="p332514311229"><a name="p332514311229"></a><a name="p332514311229"></a>deviceId</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.26212621262126%" headers="mcps1.1.4.1.2 "><p id="p1325637223"><a name="p1325637223"></a><a name="p1325637223"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="45.44454445444545%" headers="mcps1.1.4.1.3 "><p id="p153258312221"><a name="p153258312221"></a><a name="p153258312221"></a>ID of the input device that triggers the key event.</p>
-    </td>
-    </tr>
-    <tr id="row732523172210"><td class="cellrowborder" valign="top" width="33.29332933293329%" headers="mcps1.1.4.1.1 "><p id="p93254332219"><a name="p93254332219"></a><a name="p93254332219"></a>metaKey</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.26212621262126%" headers="mcps1.1.4.1.2 "><p id="p113256392210"><a name="p113256392210"></a><a name="p113256392210"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="45.44454445444545%" headers="mcps1.1.4.1.3 "><p id="p173264317227"><a name="p173264317227"></a><a name="p173264317227"></a>State of the metakey when the key is pressed. The value <strong id="b2452841763"><a name="b2452841763"></a><a name="b2452841763"></a>1</strong> means the pressed state, and <strong id="b836913917620"><a name="b836913917620"></a><a name="b836913917620"></a>0</strong> means the unpressed state.</p>
-    </td>
-    </tr>
-    <tr id="row19326339229"><td class="cellrowborder" valign="top" width="33.29332933293329%" headers="mcps1.1.4.1.1 "><p id="p1532643112211"><a name="p1532643112211"></a><a name="p1532643112211"></a>timestamp</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="21.26212621262126%" headers="mcps1.1.4.1.2 "><p id="p183269319227"><a name="p183269319227"></a><a name="p183269319227"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="45.44454445444545%" headers="mcps1.1.4.1.3 "><p id="p83262322214"><a name="p83262322214"></a><a name="p83262322214"></a>Timestamp when the key is pressed.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   APIs
-
-    <a name="table16480191335813"></a>
-    <table><thead align="left"><tr id="row948041318587"><th class="cellrowborder" valign="top" width="42.68%" id="mcps1.1.3.1.1"><p id="p3480181310588"><a name="p3480181310588"></a><a name="p3480181310588"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="57.32000000000001%" id="mcps1.1.3.1.2"><p id="p1148014131585"><a name="p1148014131585"></a><a name="p1148014131585"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1448011395810"><td class="cellrowborder" valign="top" width="42.68%" headers="mcps1.1.3.1.1 "><p id="p1748011130582"><a name="p1748011130582"></a><a name="p1748011130582"></a>stopPropagation(): void</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="57.32000000000001%" headers="mcps1.1.3.1.2 "><p id="p11480413125814"><a name="p11480413125814"></a><a name="p11480413125814"></a>Stops the event from bubbling upwards or downwards.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   <a name="li15552046124817"></a>KeyType enums
-
-    <a name="table12144170154116"></a>
-    <table><thead align="left"><tr id="row1314430184118"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p1614414014416"><a name="p1614414014416"></a><a name="p1614414014416"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p1314415074113"><a name="p1314415074113"></a><a name="p1314415074113"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row61441505417"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p191443034117"><a name="p191443034117"></a><a name="p191443034117"></a>Down</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p121447017412"><a name="p121447017412"></a><a name="p121447017412"></a>The key is pressed.</p>
-    </td>
-    </tr>
-    <tr id="row20144801418"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p17145110194110"><a name="p17145110194110"></a><a name="p17145110194110"></a>Up</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p171454015415"><a name="p171454015415"></a><a name="p171454015415"></a>The key is released.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   <a name="li19778175915485"></a>KeySource enums
-
-    <a name="table9370949114019"></a>
-    <table><thead align="left"><tr id="row1237015492406"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p1637014974014"><a name="p1637014974014"></a><a name="p1637014974014"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p16370174924013"><a name="p16370174924013"></a><a name="p16370174924013"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row8370749184018"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p7370114974013"><a name="p7370114974013"></a><a name="p7370114974013"></a>Unknown</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1537034917408"><a name="p1537034917408"></a><a name="p1537034917408"></a>Unknown input device.</p>
-    </td>
-    </tr>
-    <tr id="row137024915409"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p19370349134011"><a name="p19370349134011"></a><a name="p19370349134011"></a>Keyboard</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p437064913405"><a name="p437064913405"></a><a name="p437064913405"></a>The input device is a keyboard.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Common KeyCode description
-
-    <a name="t2c492df6ccd147b5854b71c189da0b33"></a>
-    <table><thead align="left"><tr id="r461911d4ccce42b5bee4715daf04e2f2"><th class="cellrowborder" valign="top" width="17%" id="mcps1.1.4.1.1"><p id="ae0aa377969e64f3093c9da590c028f4a"><a name="ae0aa377969e64f3093c9da590c028f4a"></a><a name="ae0aa377969e64f3093c9da590c028f4a"></a>Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20%" id="mcps1.1.4.1.2"><p id="a49107360a6c847c8949a193b78b096d5"><a name="a49107360a6c847c8949a193b78b096d5"></a><a name="a49107360a6c847c8949a193b78b096d5"></a>Behavior</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="63%" id="mcps1.1.4.1.3"><p id="af9bff2c0e0b046f5be5996e347a19585"><a name="af9bff2c0e0b046f5be5996e347a19585"></a><a name="af9bff2c0e0b046f5be5996e347a19585"></a>Physical Button</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="rd5955edc33f54b80b911dab12cc45b02"><td class="cellrowborder" valign="top" width="17%" headers="mcps1.1.4.1.1 "><p id="ade7af794b1a543a88d635a814313aa53"><a name="ade7af794b1a543a88d635a814313aa53"></a><a name="ade7af794b1a543a88d635a814313aa53"></a>19</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.4.1.2 "><p id="a007d4aa2ac6f4721a0336db748594084"><a name="a007d4aa2ac6f4721a0336db748594084"></a><a name="a007d4aa2ac6f4721a0336db748594084"></a>Upward</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="a90e47b7457d945e697b75fa7f3a18c35"><a name="a90e47b7457d945e697b75fa7f3a18c35"></a><a name="a90e47b7457d945e697b75fa7f3a18c35"></a>Up button.</p>
-    </td>
-    </tr>
-    <tr id="r4bc5f674a74344c8abcb362929e1005b"><td class="cellrowborder" valign="top" width="17%" headers="mcps1.1.4.1.1 "><p id="aff3cba4d7a9f4fa7be1e2cdf29916c3b"><a name="aff3cba4d7a9f4fa7be1e2cdf29916c3b"></a><a name="aff3cba4d7a9f4fa7be1e2cdf29916c3b"></a>20</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.4.1.2 "><p id="af895a1908bd44341b22a809e23fa2316"><a name="af895a1908bd44341b22a809e23fa2316"></a><a name="af895a1908bd44341b22a809e23fa2316"></a>Downward</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="a84188d2c586243e79c6d33386f81afe3"><a name="a84188d2c586243e79c6d33386f81afe3"></a><a name="a84188d2c586243e79c6d33386f81afe3"></a>Down button.</p>
-    </td>
-    </tr>
-    <tr id="rcb8ae2a1d06247c19f1658b486365c33"><td class="cellrowborder" valign="top" width="17%" headers="mcps1.1.4.1.1 "><p id="aece5938bafb941aea43f2023bc0d8e7b"><a name="aece5938bafb941aea43f2023bc0d8e7b"></a><a name="aece5938bafb941aea43f2023bc0d8e7b"></a>21</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.4.1.2 "><p id="a918cde8697b642eaa17fc8bb5e159fbd"><a name="a918cde8697b642eaa17fc8bb5e159fbd"></a><a name="a918cde8697b642eaa17fc8bb5e159fbd"></a>Leftward</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="a9285bc852f844be5b1b8c6291166cf1d"><a name="a9285bc852f844be5b1b8c6291166cf1d"></a><a name="a9285bc852f844be5b1b8c6291166cf1d"></a>Left button.</p>
-    </td>
-    </tr>
-    <tr id="r8df67c24c07b428aaaeee859f1b17701"><td class="cellrowborder" valign="top" width="17%" headers="mcps1.1.4.1.1 "><p id="a501c6f67ac564af2a2270d3f44cacc48"><a name="a501c6f67ac564af2a2270d3f44cacc48"></a><a name="a501c6f67ac564af2a2270d3f44cacc48"></a>22</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.4.1.2 "><p id="a45ea66b3a96f4d74b057c714b3659faa"><a name="a45ea66b3a96f4d74b057c714b3659faa"></a><a name="a45ea66b3a96f4d74b057c714b3659faa"></a>Rightward</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="af1a6068683fe40b3a902770479a5869d"><a name="af1a6068683fe40b3a902770479a5869d"></a><a name="af1a6068683fe40b3a902770479a5869d"></a>Right button.</p>
-    </td>
-    </tr>
-    <tr id="rf83f1de192fc4e43819d40cd4dd9d5c5"><td class="cellrowborder" valign="top" width="17%" headers="mcps1.1.4.1.1 "><p id="a357e75de4e3d4bfea63740239a91a233"><a name="a357e75de4e3d4bfea63740239a91a233"></a><a name="a357e75de4e3d4bfea63740239a91a233"></a>23</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.4.1.2 "><p id="a156cfdca6ee24c2a831f9ed1fe750faa"><a name="a156cfdca6ee24c2a831f9ed1fe750faa"></a><a name="a156cfdca6ee24c2a831f9ed1fe750faa"></a>OK</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="a9b3f9045e7b84093b15f688654c68036"><a name="a9b3f9045e7b84093b15f688654c68036"></a><a name="a9b3f9045e7b84093b15f688654c68036"></a><strong id="b99251545123919"><a name="b99251545123919"></a><a name="b99251545123919"></a>OK</strong> key on a remote control.</p>
-    </td>
-    </tr>
-    <tr id="r799b62b61f0e48b28dc378241cb1ee70"><td class="cellrowborder" valign="top" width="17%" headers="mcps1.1.4.1.1 "><p id="a9968d42723b14eaca3df9b5cb683ae9f"><a name="a9968d42723b14eaca3df9b5cb683ae9f"></a><a name="a9968d42723b14eaca3df9b5cb683ae9f"></a>66</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.4.1.2 "><p id="acae4c7acd744429eb8918859ef9e8c55"><a name="acae4c7acd744429eb8918859ef9e8c55"></a><a name="acae4c7acd744429eb8918859ef9e8c55"></a>OK</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="ab0177a6dbd4c4838929efc57e77dffa8"><a name="ab0177a6dbd4c4838929efc57e77dffa8"></a><a name="ab0177a6dbd4c4838929efc57e77dffa8"></a><strong id="b274645143918"><a name="b274645143918"></a><a name="b274645143918"></a>Enter</strong> key on a keyboard.</p>
-    </td>
-    </tr>
-    <tr id="rdd439f968c2c4bc394305ba7c7364203"><td class="cellrowborder" valign="top" width="17%" headers="mcps1.1.4.1.1 "><p id="aafaeeb563fff433e98bc2975130dded1"><a name="aafaeeb563fff433e98bc2975130dded1"></a><a name="aafaeeb563fff433e98bc2975130dded1"></a>160</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.4.1.2 "><p id="a45250b274d6d4fccb7805084114c6d57"><a name="a45250b274d6d4fccb7805084114c6d57"></a><a name="a45250b274d6d4fccb7805084114c6d57"></a>OK</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="a90a580f492a54928a2d27bf7b9926221"><a name="a90a580f492a54928a2d27bf7b9926221"></a><a name="a90a580f492a54928a2d27bf7b9926221"></a><strong id="b17756191154011"><a name="b17756191154011"></a><a name="b17756191154011"></a>Enter</strong> button on the numeric keypad.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section520994913452"></a>
+
+## Events
+
+| Name | Bubble&nbsp;Supported | Description |
+| -------- | -------- | -------- |
+| onKeyEvent(event:&nbsp;(event?:&nbsp;KeyEvent)&nbsp;=&gt;&nbsp;void) | Yes | Called&nbsp;when&nbsp;a&nbsp;key&nbsp;event&nbsp;occurs.&nbsp;For&nbsp;details&nbsp;about&nbsp;the&nbsp;event&nbsp;parameters,&nbsp;see&nbsp;[KeyEvent&nbsp;Object](#KeyEvent Object). |
+
+
+### KeyEvent Object
+
+- Attributes
+    | Name | Type | Description | 
+  | -------- | -------- | -------- |
+  | type | KeyType | Type&nbsp;of&nbsp;a&nbsp;key. | 
+  | keyCode | number | Key&nbsp;code. | 
+  | keyText | string | Key&nbsp;value. | 
+  | keySource | KeySource | Type&nbsp;of&nbsp;the&nbsp;input&nbsp;device&nbsp;that&nbsp;triggers&nbsp;the&nbsp;key&nbsp;event. | 
+  | deviceId | number | ID&nbsp;of&nbsp;the&nbsp;input&nbsp;device&nbsp;that&nbsp;triggers&nbsp;the&nbsp;key&nbsp;event. | 
+  | metaKey | number | State&nbsp;of&nbsp;the&nbsp;metakey&nbsp;when&nbsp;the&nbsp;key&nbsp;is&nbsp;pressed.&nbsp;The&nbsp;value&nbsp;**1**&nbsp;means&nbsp;the&nbsp;pressed&nbsp;state,&nbsp;and&nbsp;**0**&nbsp;means&nbsp;the&nbsp;unpressed&nbsp;state. | 
+  | timestamp | number | Timestamp&nbsp;when&nbsp;the&nbsp;key&nbsp;is&nbsp;pressed. | 
+
+- APIs
+    | Name | Description | 
+  | -------- | -------- |
+  | stopPropagation():&nbsp;void | Stops&nbsp;the&nbsp;event&nbsp;from&nbsp;bubbling&nbsp;upwards&nbsp;or&nbsp;downwards. | 
+
+- KeyType enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Down | The&nbsp;key&nbsp;is&nbsp;pressed. | 
+  | Up | The&nbsp;key&nbsp;is&nbsp;released. | 
+
+
+- KeySource enums
+    | Name | Description | 
+  | -------- | -------- |
+  | Unknown | Unknown&nbsp;input&nbsp;device. | 
+  | Keyboard | The&nbsp;input&nbsp;device&nbsp;is&nbsp;a&nbsp;keyboard. | 
+
+- Common KeyCode description
+    | Value | Behavior | Physical&nbsp;Button | 
+  | -------- | -------- | -------- |
+  | 19 | Upward | Up&nbsp;button. | 
+  | 20 | Downward | Down&nbsp;button. | 
+  | 21 | Leftward | Left&nbsp;button. | 
+  | 22 | Rightward | Right&nbsp;button. | 
+  | 23 | OK | **OK**&nbsp;key&nbsp;on&nbsp;a&nbsp;remote&nbsp;control. | 
+  | 66 | OK | **Enter**&nbsp;key&nbsp;on&nbsp;a&nbsp;keyboard. | 
+  | 160 | OK | **Enter**&nbsp;button&nbsp;on&nbsp;the&nbsp;numeric&nbsp;keypad. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -247,5 +88,4 @@ struct KeyEventExample {
 }
 ```
 
-![](figures/keyevent.gif)
-
+![en-us_image_0000001257058433](figures/en-us_image_0000001257058433.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md b/en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
index f2daec1a857375a1126a4894e3cc63b1f81fd721..52a99183757e86f8d1ca0abb41c89a2288dda87b 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
@@ -1,41 +1,25 @@
-# Show/Hide Event<a name="EN-US_TOPIC_0000001192595164"></a>
+# Show/Hide Event
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## Events<a name="section12538399584"></a>
 
-<a name="table16415124565812"></a>
-<table><thead align="left"><tr id="row441584595812"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.5.1.1"><p id="p13416845125811"><a name="p13416845125811"></a><a name="p13416845125811"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.5.1.2"><p id="p154161545155815"><a name="p154161545155815"></a><a name="p154161545155815"></a>Bubble Supported</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.5.1.3"><p id="p24161645165818"><a name="p24161645165818"></a><a name="p24161645165818"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row6416164515584"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.5.1.1 "><p id="p2416154545811"><a name="p2416154545811"></a><a name="p2416154545811"></a>onAppear(callback: () =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.5.1.2 "><p id="p7416204565810"><a name="p7416204565810"></a><a name="p7416204565810"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.5.1.3 "><p id="p14161645135813"><a name="p14161645135813"></a><a name="p14161645135813"></a>Called when the component is displayed.</p>
-</td>
-</tr>
-<tr id="row124161145145820"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.5.1.1 "><p id="p941664515582"><a name="p941664515582"></a><a name="p941664515582"></a>onDisappear(callback: () =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.5.1.2 "><p id="p2416045145816"><a name="p2416045145816"></a><a name="p2416045145816"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.5.1.3 "><p id="p1541634516585"><a name="p1541634516585"></a><a name="p1541634516585"></a>Called when the component disappears.</p>
-</td>
-</tr>
-</tbody>
-</table>
+## Events
+
+  | Name | Bubble&nbsp;Supported | Description | 
+| -------- | -------- | -------- |
+| onAppear(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | No | Called&nbsp;when&nbsp;the&nbsp;component&nbsp;is&nbsp;displayed. | 
+| onDisappear(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | No | Called&nbsp;when&nbsp;the&nbsp;component&nbsp;disappears. | 
+
+
+## Example
 
-## Example<a name="section13817013123017"></a>
 
 ```
 import prompt from '@system.prompt'
@@ -69,5 +53,4 @@ struct AppearExample {
 }
 ```
 
-![](figures/appear.gif)
-
+![en-us_image_0000001211898468](figures/en-us_image_0000001211898468.gif)
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 5059fd0c0ae60c3653d810120962b6ef0d895dcf..b6945b816e3d27db7e556a0132e709d0698bf60e 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
@@ -1,194 +1,61 @@
-# Touch<a name="EN-US_TOPIC_0000001237475045"></a>
+# Touch Event
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section781125411508"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## Events<a name="section18817111365714"></a>
-
-<a name="table2154mcpsimp"></a>
-<table><thead align="left"><tr id="row2160mcpsimp"><th class="cellrowborder" colspan="2" valign="top" id="mcps1.1.5.1.1"><p id="p2164mcpsimp"><a name="p2164mcpsimp"></a><a name="p2164mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.5.1.2"><p id="p8337105413110"><a name="p8337105413110"></a><a name="p8337105413110"></a>Pop-up</p>
-</th>
-<th class="cellrowborder" valign="top" id="mcps1.1.5.1.3"><p id="p2166mcpsimp"><a name="p2166mcpsimp"></a><a name="p2166mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row2167mcpsimp"><td class="cellrowborder" colspan="2" valign="top" headers="mcps1.1.5.1.1 "><p id="p2169mcpsimp"><a name="p2169mcpsimp"></a><a name="p2169mcpsimp"></a>onTouch(callback: (event?: TouchEvent) =&gt; void)</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.5.1.2 "><p id="p93371254153112"><a name="p93371254153112"></a><a name="p93371254153112"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" headers="mcps1.1.5.1.3 "><p id="p2173mcpsimp"><a name="p2173mcpsimp"></a><a name="p2173mcpsimp"></a>Invoked when a touch action is triggered. For details about the event parameters, see <a href="#section454663343911">TouchEvent</a>.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## TouchEvent<a name="section454663343911"></a>
-
--   Attributes
-
-    <a name="table898410720260"></a>
-    <table><thead align="left"><tr id="row18984147112612"><th class="cellrowborder" valign="top" width="22.509999999999998%" id="mcps1.1.4.1.1"><p id="p9984973264"><a name="p9984973264"></a><a name="p9984973264"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="22.7%" id="mcps1.1.4.1.2"><p id="p1984773265"><a name="p1984773265"></a><a name="p1984773265"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="54.790000000000006%" id="mcps1.1.4.1.3"><p id="p16984207122611"><a name="p16984207122611"></a><a name="p16984207122611"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row298417792614"><td class="cellrowborder" valign="top" width="22.509999999999998%" headers="mcps1.1.4.1.1 "><p id="p139841278263"><a name="p139841278263"></a><a name="p139841278263"></a>type</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="22.7%" headers="mcps1.1.4.1.2 "><p id="p1498417711267"><a name="p1498417711267"></a><a name="p1498417711267"></a><a href="#li16235181314454">TouchType</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="54.790000000000006%" headers="mcps1.1.4.1.3 "><p id="p298418717261"><a name="p298418717261"></a><a name="p298418717261"></a>Type of a touch event.</p>
-    </td>
-    </tr>
-    <tr id="row998410782614"><td class="cellrowborder" valign="top" width="22.509999999999998%" headers="mcps1.1.4.1.1 "><p id="p1498467172613"><a name="p1498467172613"></a><a name="p1498467172613"></a>touches</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="22.7%" headers="mcps1.1.4.1.2 "><p id="p298416711269"><a name="p298416711269"></a><a name="p298416711269"></a>Array&lt;<a href="#li1783344810442">TouchObject</a>&gt;</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="54.790000000000006%" headers="mcps1.1.4.1.3 "><p id="p59841077265"><a name="p59841077265"></a><a name="p59841077265"></a>All finger information.</p>
-    </td>
-    </tr>
-    <tr id="row20984107182618"><td class="cellrowborder" valign="top" width="22.509999999999998%" headers="mcps1.1.4.1.1 "><p id="p1698413710263"><a name="p1698413710263"></a><a name="p1698413710263"></a>changedTouches</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="22.7%" headers="mcps1.1.4.1.2 "><p id="p1798467132615"><a name="p1798467132615"></a><a name="p1798467132615"></a>Array&lt;<a href="#li1783344810442">TouchObject</a>&gt;</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="54.790000000000006%" headers="mcps1.1.4.1.3 "><p id="p189847762616"><a name="p189847762616"></a><a name="p189847762616"></a>Finger information changed.</p>
-    </td>
-    </tr>
-    <tr id="row89849792613"><td class="cellrowborder" valign="top" width="22.509999999999998%" headers="mcps1.1.4.1.1 "><p id="p1098416792611"><a name="p1098416792611"></a><a name="p1098416792611"></a>timestamp</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="22.7%" headers="mcps1.1.4.1.2 "><p id="p49841971263"><a name="p49841971263"></a><a name="p49841971263"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="54.790000000000006%" headers="mcps1.1.4.1.3 "><p id="p1698467192611"><a name="p1698467192611"></a><a name="p1698467192611"></a>Timestamp of the event.</p>
-    </td>
-    </tr>
-    <tr id="row1669891720345"><td class="cellrowborder" valign="top" width="22.509999999999998%" headers="mcps1.1.4.1.1 "><p id="p56981817163417"><a name="p56981817163417"></a><a name="p56981817163417"></a>target<sup id="sup16492175317358"><a name="sup16492175317358"></a><a name="sup16492175317358"></a>8+</sup></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="22.7%" headers="mcps1.1.4.1.2 "><p id="p86981717143411"><a name="p86981717143411"></a><a name="p86981717143411"></a><a href="ts-universal-events-click.md#li552912253714">EventTarget</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="54.790000000000006%" headers="mcps1.1.4.1.3 "><p id="p136981217193414"><a name="p136981217193414"></a><a name="p136981217193414"></a>Target of the event.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   APIs
-
-    <a name="table268mcpsimp"></a>
-    <table><thead align="left"><tr id="row274mcpsimp"><th class="cellrowborder" valign="top" width="39.26%" id="mcps1.1.3.1.1"><p id="p276mcpsimp"><a name="p276mcpsimp"></a><a name="p276mcpsimp"></a>API</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="60.74%" id="mcps1.1.3.1.2"><p id="p280mcpsimp"><a name="p280mcpsimp"></a><a name="p280mcpsimp"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row281mcpsimp"><td class="cellrowborder" valign="top" width="39.26%" headers="mcps1.1.3.1.1 "><p id="p283mcpsimp"><a name="p283mcpsimp"></a><a name="p283mcpsimp"></a>stopPropagation(): void</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="60.74%" headers="mcps1.1.3.1.2 "><p id="p163641244113119"><a name="p163641244113119"></a><a name="p163641244113119"></a>Pop-up of the stop event.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   <a name="li1783344810442"></a>TouchObject
-
-    <a name="table154425195577"></a>
-    <table><thead align="left"><tr id="row5442519165712"><th class="cellrowborder" valign="top" width="21%" id="mcps1.1.4.1.1"><p id="p544211995710"><a name="p544211995710"></a><a name="p544211995710"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="23%" id="mcps1.1.4.1.2"><p id="p34421419185718"><a name="p34421419185718"></a><a name="p34421419185718"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="56.00000000000001%" id="mcps1.1.4.1.3"><p id="p104421619205712"><a name="p104421619205712"></a><a name="p104421619205712"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row12442161916572"><td class="cellrowborder" valign="top" width="21%" headers="mcps1.1.4.1.1 "><p id="p2442819125714"><a name="p2442819125714"></a><a name="p2442819125714"></a>type</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23%" headers="mcps1.1.4.1.2 "><p id="p9442171935714"><a name="p9442171935714"></a><a name="p9442171935714"></a><a href="#li16235181314454">TouchType</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.00000000000001%" headers="mcps1.1.4.1.3 "><p id="p6442519185717"><a name="p6442519185717"></a><a name="p6442519185717"></a>Type of a touch event.</p>
-    </td>
-    </tr>
-    <tr id="row114421819145710"><td class="cellrowborder" valign="top" width="21%" headers="mcps1.1.4.1.1 "><p id="p9442319195714"><a name="p9442319195714"></a><a name="p9442319195714"></a>id</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23%" headers="mcps1.1.4.1.2 "><p id="p1442919115710"><a name="p1442919115710"></a><a name="p1442919115710"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.00000000000001%" headers="mcps1.1.4.1.3 "><p id="p2997174914575"><a name="p2997174914575"></a><a name="p2997174914575"></a>Unique identifier of a finger.</p>
-    </td>
-    </tr>
-    <tr id="row124431019165720"><td class="cellrowborder" valign="top" width="21%" headers="mcps1.1.4.1.1 "><p id="p12443519105713"><a name="p12443519105713"></a><a name="p12443519105713"></a>screenX</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23%" headers="mcps1.1.4.1.2 "><p id="p44431219165710"><a name="p44431219165710"></a><a name="p44431219165710"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.00000000000001%" headers="mcps1.1.4.1.3 "><p id="p1044311192574"><a name="p1044311192574"></a><a name="p1044311192574"></a>X coordinate of the touch point relative to the left edge of the screen.</p>
-    </td>
-    </tr>
-    <tr id="row94431119135719"><td class="cellrowborder" valign="top" width="21%" headers="mcps1.1.4.1.1 "><p id="p164437198572"><a name="p164437198572"></a><a name="p164437198572"></a>screenY</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23%" headers="mcps1.1.4.1.2 "><p id="p344317198579"><a name="p344317198579"></a><a name="p344317198579"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.00000000000001%" headers="mcps1.1.4.1.3 "><p id="p174432193577"><a name="p174432193577"></a><a name="p174432193577"></a>Y coordinate of the touch point relative to the upper edge of the device screen.</p>
-    </td>
-    </tr>
-    <tr id="row1544341911577"><td class="cellrowborder" valign="top" width="21%" headers="mcps1.1.4.1.1 "><p id="p94431719205712"><a name="p94431719205712"></a><a name="p94431719205712"></a>x</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23%" headers="mcps1.1.4.1.2 "><p id="p7443171975716"><a name="p7443171975716"></a><a name="p7443171975716"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.00000000000001%" headers="mcps1.1.4.1.3 "><p id="p744361916578"><a name="p744361916578"></a><a name="p744361916578"></a>X coordinate of the touch point relative to the left edge of the element to touch.</p>
-    </td>
-    </tr>
-    <tr id="row1144331985713"><td class="cellrowborder" valign="top" width="21%" headers="mcps1.1.4.1.1 "><p id="p144381919573"><a name="p144381919573"></a><a name="p144381919573"></a>y</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23%" headers="mcps1.1.4.1.2 "><p id="p15443191915572"><a name="p15443191915572"></a><a name="p15443191915572"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="56.00000000000001%" headers="mcps1.1.4.1.3 "><p id="p444371917576"><a name="p444371917576"></a><a name="p444371917576"></a>Y coordinate of the touch point relative to the upper edge of the element to touch.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
--   <a name="li16235181314454"></a>TouchType
-
-    <a name="table3452114216394"></a>
-    <table><thead align="left"><tr id="row245219426397"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p545244283914"><a name="p545244283914"></a><a name="p545244283914"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p2452114203917"><a name="p2452114203917"></a><a name="p2452114203917"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row6452144218390"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p34529427398"><a name="p34529427398"></a><a name="p34529427398"></a>Down</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245211421393"><a name="p1245211421393"></a><a name="p1245211421393"></a>Trigger a touch event when a finger is pressed.</p>
-    </td>
-    </tr>
-    <tr id="row12452184217398"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p54523425398"><a name="p54523425398"></a><a name="p54523425398"></a>Up</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p745215426391"><a name="p745215426391"></a><a name="p745215426391"></a>Trigger a touch event when a finger is lifted.</p>
-    </td>
-    </tr>
-    <tr id="row9452134213392"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p510719111403"><a name="p510719111403"></a><a name="p510719111403"></a>Move</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p154533425394"><a name="p154533425394"></a><a name="p154533425394"></a>Trigger a touch event when a finger moves on the screen in pressed state.</p>
-    </td>
-    </tr>
-    <tr id="row1345313424399"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p1766215124010"><a name="p1766215124010"></a><a name="p1766215124010"></a>Cancel</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245319426394"><a name="p1245319426394"></a><a name="p1245319426394"></a>Trigger an event when a touch event is canceled.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Example<a name="section13817013123017"></a>
+
+## Events
+
+| Name | Pop-up | Description |
+| -------- | -------- | -------- |
+| onTouch(callback:&nbsp;(event?:&nbsp;TouchEvent)&nbsp;=&gt;&nbsp;void) | Yes | Invoked&nbsp;when&nbsp;a&nbsp;touch&nbsp;action&nbsp;is&nbsp;triggered.&nbsp;For&nbsp;details&nbsp;about&nbsp;the&nbsp;event&nbsp;parameters,&nbsp;see&nbsp;[TouchEvent](#touchevent). |
+
+
+### TouchEvent
+
+- Attributes
+    | Name | Type | Description | 
+  | -------- | -------- | -------- |
+  | type | TouchType | Type&nbsp;of&nbsp;a&nbsp;touch&nbsp;event. | 
+  | touches | Array&lt;TouchObject&gt; | All&nbsp;finger&nbsp;information. | 
+  | changedTouches | Array&lt;TouchObject&gt; | Finger&nbsp;information&nbsp;changed. | 
+  | timestamp | number | Timestamp&nbsp;of&nbsp;the&nbsp;event. | 
+  | target<sup>8+</sup> | EventTarget | Target&nbsp;of&nbsp;the&nbsp;event. | 
+
+- APIs
+    | API | Description | 
+  | -------- | -------- |
+  | stopPropagation():&nbsp;void | Pop-up&nbsp;of&nbsp;the&nbsp;stop&nbsp;event. | 
+
+
+- TouchObject
+    | Name | Type | Description | 
+  | -------- | -------- | -------- |
+  | type | TouchType | Type&nbsp;of&nbsp;a&nbsp;touch&nbsp;event. | 
+  | id | number | Unique&nbsp;identifier&nbsp;of&nbsp;a&nbsp;finger. | 
+  | screenX | number | X&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;touch&nbsp;point&nbsp;relative&nbsp;to&nbsp;the&nbsp;left&nbsp;edge&nbsp;of&nbsp;the&nbsp;screen. | 
+  | screenY | number | Y&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;touch&nbsp;point&nbsp;relative&nbsp;to&nbsp;the&nbsp;upper&nbsp;edge&nbsp;of&nbsp;the&nbsp;device&nbsp;screen. | 
+  | x | number | X&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;touch&nbsp;point&nbsp;relative&nbsp;to&nbsp;the&nbsp;left&nbsp;edge&nbsp;of&nbsp;the&nbsp;element&nbsp;to&nbsp;touch. | 
+  | y | number | Y&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;touch&nbsp;point&nbsp;relative&nbsp;to&nbsp;the&nbsp;upper&nbsp;edge&nbsp;of&nbsp;the&nbsp;element&nbsp;to&nbsp;touch. | 
+
+
+- TouchType
+    | Name | Description | 
+  | -------- | -------- |
+  | Down | Trigger&nbsp;a&nbsp;touch&nbsp;event&nbsp;when&nbsp;a&nbsp;finger&nbsp;is&nbsp;pressed. | 
+  | Up | Trigger&nbsp;a&nbsp;touch&nbsp;event&nbsp;when&nbsp;a&nbsp;finger&nbsp;is&nbsp;lifted. | 
+  | Move | Trigger&nbsp;a&nbsp;touch&nbsp;event&nbsp;when&nbsp;a&nbsp;finger&nbsp;moves&nbsp;on&nbsp;the&nbsp;screen&nbsp;in&nbsp;pressed&nbsp;state. | 
+  | Cancel | Trigger&nbsp;an&nbsp;event&nbsp;when&nbsp;a&nbsp;touch&nbsp;event&nbsp;is&nbsp;canceled. | 
+
+
+## Example
+
 
 ```
 @Entry
@@ -211,9 +78,9 @@ struct TouchExample {
             this.eventType = 'Move'
           }
           console.info(this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
-+ event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\ncomponent globalPos: ('
-          + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + '）\nwidth:'
-          + event.target.area.width + '\nheight：' + event.target.area.height)
+          + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\ncomponent globalPos:('
+          + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\nwidth:'
+          + event.target.area.width + '\nheight:' + event.target.area.height)
         })
       Text(this.text)
     }.height(200).width(350).padding({ left: 35, right: 35, top: 35 })
@@ -221,5 +88,4 @@ struct TouchExample {
 }
 ```
 
-![](figures/en-us_image_0000001192915178.gif)
-
+![en-us_image_0000001212058464](figures/en-us_image_0000001212058464.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events.md b/en/application-dev/reference/arkui-ts/ts-universal-events.md
index 3fd64c2747e5457ef0dbfb6a2dbc8118b98e0c70..fd2340deb9b335116650a2c24ce3b84469143ab3 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-events.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-events.md
@@ -1,13 +1,19 @@
-# Universal Events<a name="EN-US_TOPIC_0000001237715071"></a>
+# Universal Events
 
--   **[Click Event](ts-universal-events-click.md)**  
 
--   **[Touch](ts-universal-events-touch.md)**  
 
--   **[Show/Hide Event](ts-universal-events-show-hide.md)**  
+- **[Click Event](ts-universal-events-click.md)**
 
--   **[Key Event](ts-universal-events-key.md)**  
+- **[Touch Event](ts-universal-events-touch.md)**
 
--   **[Component Area Change Event](ts-universal-events-component-area-change.md)**  
+- **[Show/Hide Event](ts-universal-events-show-hide.md)**
 
+- **[Drag/Drop Event](ts-universal-events-drag-drop.md)**
 
+- **[Key Event](ts-universal-events-key.md)**
+
+- **[Focus Event](ts-universal-focus-event.md)**
+
+- **[Mouse Event](ts-universal-mouse-key.md)**
+
+- **[Component Area Change Event](ts-universal-component-area-change-event.md)**
\ No newline at end of file
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-focus-event.md b/en/application-dev/reference/arkui-ts/ts-universal-focus-event.md
new file mode 100644
index 0000000000000000000000000000000000000000..eb5281c52794e2604c06c38be51f76a6e0494d7d
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-universal-focus-event.md
@@ -0,0 +1,71 @@
+# Focus Event
+
+
+> ![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.
+
+
+## Required Permissions
+
+None
+
+
+## Events
+
+  | **Name** | **Bubble&nbsp;Supported** | **Description** | 
+| -------- | -------- | -------- |
+| onFocus(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | No | Triggered&nbsp;when&nbsp;the&nbsp;current&nbsp;component&nbsp;obtains&nbsp;focus. | 
+| onBlur(callback:()&nbsp;=&gt;&nbsp;void) | No | Triggered&nbsp;when&nbsp;the&nbsp;current&nbsp;component&nbsp;loses&nbsp;focus. | 
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE：**
+> The following components support focus events: **&lt;Button&gt;**, **&lt;Text&gt;**, **&lt;Image&gt;**, **&lt;List&gt;**, and **&lt;Grid&gt;**.
+
+
+## Example
+
+  
+```
+@Entry
+@Component
+struct FocusEventExample {
+  @State textOne: string = ''
+  @State textTwo: string = ''
+  @State textThree: string = ''
+  @State oneButtonColor: string = '#FF0000'
+  @State twoButtonColor: string = '#87CEFA'
+  @State threeButtonColor: string = '#90EE90'
+
+  build() {
+    Column({ space:20 }){
+      Button(this.textOne)
+        .backgroundColor(this.oneButtonColor)
+        .width(260).height(70).fontColor(Color.Black)
+        .focusable(true)
+        .onFocus(() => {
+          this.textOne = 'First Button onFocus'
+          this.oneButtonColor = '#AFEEEE'
+        })
+        .onBlur(() => {
+          this.textOne = 'First Button onBlur'
+          this.oneButtonColor = '#FFC0CB'
+        })
+      Button(this.textTwo)
+        .backgroundColor(this.twoButtonColor)
+        .width(260).height(70).fontColor(Color.Black)
+        .focusable(true)
+      Button(this.textThree)
+        .backgroundColor(this.threeButtonColor)
+        .width(260).height(70).fontColor(Color.Black)
+        .focusable(true)
+        .onFocus(() => {
+          this.textThree = 'Third Button onFocus'
+          this.threeButtonColor = '#AFEEEE'
+        })
+        .onBlur(() => {
+          this.textThree = 'Third Button onBlur'
+          this.threeButtonColor = '#FFC0CB'
+        })
+    }.width('100%').margin({ top:20 })
+  }
+}
+```
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
new file mode 100644
index 0000000000000000000000000000000000000000..c256a22f9f83c094be8a30b736d05609e8d2a486
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
@@ -0,0 +1,87 @@
+# Mouse Event
+
+
+> ![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.
+
+
+## Required Permissions
+
+None
+
+
+## Events
+
+  | Name | Bubble&nbsp;Supported | Description | 
+| -------- | -------- | -------- |
+| onHover(callback:&nbsp;(isHover:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | No | Triggered&nbsp;when&nbsp;the&nbsp;mouse&nbsp;cursor&nbsp;enters&nbsp;or&nbsp;leaves&nbsp;the&nbsp;component.<br/>**isHover**:&nbsp;whether&nbsp;the&nbsp;mouse&nbsp;cursor&nbsp;hovers&nbsp;over&nbsp;the&nbsp;component.&nbsp;The&nbsp;value&nbsp;**true**&nbsp;means&nbsp;that&nbsp;the&nbsp;mouse&nbsp;cursor&nbsp;enters&nbsp;the&nbsp;component,&nbsp;and&nbsp;the&nbsp;value&nbsp;**false**&nbsp;means&nbsp;that&nbsp;the&nbsp;mouse&nbsp;cursor&nbsp;leaves&nbsp;the&nbsp;component. | 
+| onMouse(callback:&nbsp;(event?:&nbsp;MouseEvent)&nbsp;=&gt;&nbsp;void) | Yes | Triggered&nbsp;when&nbsp;the&nbsp;component&nbsp;is&nbsp;clicked&nbsp;by&nbsp;a&nbsp;mouse&nbsp;button&nbsp;or&nbsp;the&nbsp;mouse&nbsp;cursor&nbsp;moves&nbsp;on&nbsp;the&nbsp;component.&nbsp;The&nbsp;**event**&nbsp;parameter&nbsp;indicates&nbsp;the&nbsp;timestamp,&nbsp;mouse&nbsp;button,&nbsp;action,&nbsp;coordinates&nbsp;of&nbsp;the&nbsp;clicked&nbsp;point&nbsp;on&nbsp;the&nbsp;entire&nbsp;screen,&nbsp;and&nbsp;coordinates&nbsp;of&nbsp;the&nbsp;clicked&nbsp;point&nbsp;relative&nbsp;to&nbsp;the&nbsp;component&nbsp;when&nbsp;the&nbsp;event&nbsp;is&nbsp;triggered. | 
+
+
+### MouseEvent
+
+- Attributes
+    | Name | Type | Description | 
+  | -------- | -------- | -------- |
+  | timestamp | number | Timestamp&nbsp;when&nbsp;the&nbsp;event&nbsp;is&nbsp;triggered. | 
+  | screenX | number | X-coordinate&nbsp;of&nbsp;the&nbsp;clicked&nbsp;point&nbsp;relative&nbsp;to&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;screen. | 
+  | screenY | number | Y-coordinate&nbsp;of&nbsp;the&nbsp;clicked&nbsp;point&nbsp;relative&nbsp;to&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;screen. | 
+  | x | number | X-coordinate&nbsp;of&nbsp;the&nbsp;clicked&nbsp;point&nbsp;relative&nbsp;to&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;component. | 
+  | y | number | Y-coordinate&nbsp;of&nbsp;the&nbsp;clicked&nbsp;point&nbsp;relative&nbsp;to&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;component. | 
+  | button | MouseButton | Mouse&nbsp;button. | 
+  | action | MouseAction | Event&nbsp;action. | 
+
+
+- MouseButton attributes
+    | Name | Type | Description | 
+  | -------- | -------- | -------- |
+  | Left | number | Left&nbsp;mouse&nbsp;button. | 
+  | Right | number | Right&nbsp;mouse&nbsp;button. | 
+  | Middle | number | Middle&nbsp;mouse&nbsp;button. | 
+  | Back | number | Back&nbsp;button&nbsp;on&nbsp;the&nbsp;left&nbsp;of&nbsp;the&nbsp;mouse. | 
+  | Forward | number | Forward&nbsp;button&nbsp;on&nbsp;the&nbsp;left&nbsp;of&nbsp;the&nbsp;mouse. | 
+  | None | number | No&nbsp;button. | 
+
+- MouseAction attributes
+    | Name | Type | Description | 
+  | -------- | -------- | -------- |
+  | Press | number | The&nbsp;mouse&nbsp;button&nbsp;is&nbsp;pressed. | 
+  | Release | number | The&nbsp;mouse&nbsp;button&nbsp;is&nbsp;released. | 
+  | Move | number | The&nbsp;mouse&nbsp;cursor&nbsp;moves. | 
+
+
+## Example
+
+  
+```
+@Entry
+@Component
+struct MouseEventExample {
+  @State hoverText: string = 'no hover'
+  @State mouseText: string = 'MouseText'
+  @State color: Color = Color.Blue
+
+  build() {
+    Column({ space:20 }) {
+      Button(this.hoverText)
+        .onHover((isHover: boolean) => {
+          if (isHover) {
+            this.hoverText = 'on hover'
+            this.color = Color.Pink
+          } else {
+            this.hoverText = 'no hover'
+            this.color = Color.Blue
+          }
+        })
+        .backgroundColor(this.color)
+      Button('onMouse')
+        .onMouse((event: MouseEvent) => {
+          console.log(this.mouseText = 'onMouse:\nButton = ' + event.button + 
+          '\nAction = ' + event.action + '\nlocalXY=(' + event.x + ',' + event.y + ')' + 
+          '\nscreenXY=(' + event.screenX + ',' + event.screenY + ')')
+        })
+      Text(this.mouseText)
+    }.padding({ top: 20 }).width('100%')
+  }
+}
+```
diff --git a/zh-cn/application-dev/Readme-CN.md b/zh-cn/application-dev/Readme-CN.md
index 81c318bb63b1bf39f2be220f8587d77a13f61074..29c190d3fc62cba8415a36339d3dcb828f2931d2 100644
--- a/zh-cn/application-dev/Readme-CN.md
+++ b/zh-cn/application-dev/Readme-CN.md
@@ -3,7 +3,6 @@
 - [应用开发导读](application-dev-guide.md)
 - 了解OpenHarmony
     - [了解OpenHarmony开源项目](../OpenHarmony-Overview_zh.md)
-    - [了解OpenHarmony系统](../readme)
     - [术语](../device-dev/glossary/glossary.md)
     - [版本说明](../release-notes/Readme.md)
 - 快速开始
diff --git a/zh-cn/application-dev/ability/ability-assistant-guidelines.md b/zh-cn/application-dev/ability/ability-assistant-guidelines.md
index c21e2c78174f9ab5c068e1cff88e89d160a54ce2..2c7ad62bc8b8af6639c9cfe31185ef60eca31dcf 100644
--- a/zh-cn/application-dev/ability/ability-assistant-guidelines.md
+++ b/zh-cn/application-dev/ability/ability-assistant-guidelines.md
@@ -71,23 +71,23 @@ Ability assistant（Ability助手，简称为aa）是实现应用、原子化服
 
   用于打印Ability的相关信息。
 
-  | 参数              | 二级参数             | 参数说明                                                     |
-  | ----------------- | -------------------- | ------------------------------------------------------------ |
-  | -h/--help         | -                    | 帮助信息。                                                   |
-  | -a/--all          | -                    | 打印所有mission内的Ability。                                 |
-  | -l/--mission-list | type（缺省打印全部） | 打印任务栈信息。<br />type：<br />NORMAL <br />DEFAULT_STANDARD<br />DEFAULT_SINGLE<br />LAUNCHER |
-  | -e/--extension    | elementName          | 打印扩展组件信息。                                           |
-  | -u/--userId       | UserId               | 打印指定UserId的栈信息，需要和其他参数组合使用，例如 aa dump -a -u 100、aa dump -d -u 100、 |
-  | -d/--data         |                      | 打印Data Ability。                                           |
-  | -i/--ability      | AbilityRecord ID     | 打印指定Ability详细信息                                      |
-  | -c/--client       |                      | 打印Ability详细信息，需要和其他参数组合使用，例如 aa dump -a -c、aa dump -i 21 -c、 |
-  
-**使用方法：**
-  
-```
+  | 参数                   | 参数说明                               |
+  | ---------------------- | -------------------------------------- |
+  | -h/--help              | 帮助信息。                             |
+  | -a/--all               | 打印所有mission内的Ability。           |
+  | -s/--stack \<number>   | 打印指定mission stack内的Ability。     |
+  | -m/--mission \<number> | 打印指定mission内的Ability。           |
+  | -l/--stack-list        | 打印每个mission stack内的mission列表。 |
+  | -u/--ui                | 打印system ui Ability。                |
+  | -e/--serv              | 打印Service Ability。                  |
+  | -d/--data              | 打印Data Ability。                     |
+
+  **使用方法：**
+
+  ```
   aa dump -a
   ```
-  
+
 - **force-stop**
 
   通过bundle name强制停止一个进程。
diff --git a/zh-cn/application-dev/ability/fa-brief.md b/zh-cn/application-dev/ability/fa-brief.md
index d377c532dbefd29b349be06a239e0f7ce1e6d719..5fcef0a959160ad924f1fe4b5589b094e3837f1a 100644
--- a/zh-cn/application-dev/ability/fa-brief.md
+++ b/zh-cn/application-dev/ability/fa-brief.md
@@ -1,22 +1 @@
-# FA模型综述
-
-## 整体架构
-鸿蒙用户程序的开发本质上就是开发Ability，OpenHarmony系统也是通过调度Ability，通过系统提供的一致性调度契约对Ability进行生命周期管理，从而实现对用户程序的调度。FA模型中Ability分为PageAbility、ServiceAbility和DataAbility三种类型。其中PageAbility具备ArkUI的Ability，是用户具体可见并可以交互的Ability实例；ServiceAbility也是Ability一种，但是没有UI，提供其他Ability调用自定义的服务，在后台运行；DataAbility也是没有UI，提供其他Ability进行数据的增删查服务，在后台运行。
-
-## 应用包结构
-**应用包结构如下图所示：**
-![fa-package-info](figures/fa-package-info.png)
-
-## 生命周期
-
-**pageAbility生命周期回调如下图所示：**
-
-![fa-pageAbility-lifecycle](figures/fa-pageAbility-lifecycle.png)
-
-开发者可以在 app.js/app.ets 中重写生命周期函数，在对应的生命周期函数内处理应用相应逻辑。
-
-
-## 进程线程模型
-应用独享独立进程，Ability独享独立线程，应用进程在Ability第一次启动时创建，并为启动的Ability创建线程，应用启动后再启动应用内其他Ability，会为每一个Ability创建相应的线程。每个Ability绑定一个独立的JSRuntime实例，因此Ability之间是隔离的。
-
-![fa-threading-nodel](figures/fa-threading-model.png)
\ No newline at end of file
+# FA模型综述
\ No newline at end of file
diff --git a/zh-cn/application-dev/ability/fa-pageability.md b/zh-cn/application-dev/ability/fa-pageability.md
index 8433c7604ef2fd9250d976c972a0bdaa431c8f2e..ba42ed13dcbd273b82aa6d3bd5b00d19f94a20f1 100644
--- a/zh-cn/application-dev/ability/fa-pageability.md
+++ b/zh-cn/application-dev/ability/fa-pageability.md
@@ -27,19 +27,19 @@ Page模板（以下简称“Page”）是FA唯一支持的模板，用于提供
 
 **PageAbility类型Ability生命周期回调如下图所示：**
 
-![fa-pageAbility-lifecycle](figures/fa-pageAbility-lifecycle.png)
+![PageAbility-Lifecycel-Callbacks](figures/page-ability-lifecycle-callbacks.png)
 
   
 
 ## 启动本地PageAbility
 
- * 导入模块
+ 导入模块
 
 ```
 import featureAbility from '@ohos.ability.featureAbility'
 ```
 ```
- featureAbility.startAbility(parameter: StartAbilityParameter, callback: AsyncCallback<number>)
+ FeatureAbility.startAbility(parameter: StartAbilityParameter, callback: AsyncCallback<number>)
 ```
 
 * 接口说明
@@ -50,75 +50,61 @@ import featureAbility from '@ohos.ability.featureAbility'
 
 ```javascript
 import featureAbility from '@ohos.ability.featureAbility'
-featureAbility.startAbility({
-  want:
-  {
-    action: "",
-    entities: [""],
-    type: "",
-    options: {
-      // indicates the grant to perform read operations on the URI
-      authReadUriPermission: true,
-      // indicates the grant to perform write operations on the URI
-      authWriteUriPermission: true,
-      // support forward intent result to origin ability
-      abilityForwardResult: true,
-      // used for marking the ability start-up is triggered by continuation
-      abilityContinuation: true,
-      // specifies whether a component does not belong to ohos
-      notOhosComponent: true,
-      // specifies whether an ability is started
-      abilityFormEnabled: true,
-      // indicates the grant for possible persisting on the URI.
-      authPersistableUriPermission: true,
-      // indicates the grant for possible persisting on the URI.
-      authPrefixUriPermission: true,
-      // support distributed scheduling system start up multiple devices
-      abilitySliceMultiDevice: true,
-      // indicates that an ability using the service template is started regardless of whether the
-      // host application has been started.
-      startForegroundAbility: true,
-      // install the specified ability if it's not installed.
-      installOnDemand: true,
-      // return result to origin ability slice
-      abilitySliceForwardResult: true,
-      // install the specified ability with background mode if it's not installed.
-      installWithBackgroundMode: true
+featureAbility.startAbility(
+        {
+        want:
+        {
+            action: "",
+            entities: [""],
+            type: "",
+            options: {
+                // indicates the grant to perform read operations on the URI
+                authReadUriPermission: true,
+                // indicates the grant to perform write operations on the URI
+                authWriteUriPermission: true,
+                // support forward intent result to origin ability
+                abilityForwardResult: true,
+                // used for marking the ability start-up is triggered by continuation
+                abilityContinuation: true,
+                // specifies whether a component does not belong to ohos
+                notOhosComponent: true,
+                // specifies whether an ability is started
+                abilityFormEnabled: true,
+                // indicates the grant for possible persisting on the URI.
+                authPersistableUriPermission: true,
+                // indicates the grant for possible persisting on the URI.
+                authPrefixUriPermission: true,
+                // support distributed scheduling system start up multiple devices
+                abilitySliceMultiDevice: true,
+                // indicates that an ability using the service template is started regardless of whether the
+                // host application has been started.
+                startForegroundAbility: true,
+                // install the specified ability if it's not installed.
+                installOnDemand: true,
+                // return result to origin ability slice
+                abilitySliceForwardResult: true,
+                // install the specified ability with background mode if it's not installed.
+                installWithBackgroundMode: true
+            },
+            deviceId: "",
+            bundleName: "com.example.startability",
+            abilityName: "com.example.startability.MainAbility",
+            uri: ""
+        },
     },
-    deviceId: "",
-    bundleName: "com.example.startability",
-    abilityName: "com.example.startability.MainAbility",
-    uri: ""
-  },
-},
-);
-```
-want参数也可以使用parameters参数，使用key-value的方式输入。
-* 示例
-```javascript
-import featureAbility from '@ohos.ability.featureAbility'
-featureAbility.startAbility({
-    want:
-    {
-        bundleName: "com.example.startability",
-        uri: "",
-        parameters: {
-            abilityName: "com.example.startability.MainAbility"
-        }
-    },
-},
-);
+  );
+)
 ```
 ## 启动远程PageAbility
 
-* 导入模块
+ 导入模块
 
 ```
 import featureAbility from '@ohos.ability.featureAbility'
 ```
 
 ```
-featureAbility.startAbility(parameter: StartAbilityParameter)
+FeatureAbility.startAbility(parameter: StartAbilityParameter)
 ```
 * 接口说明
 
@@ -128,13 +114,14 @@ featureAbility.startAbility(parameter: StartAbilityParameter)
 * 示例
 
 ```javascript
-var promise = await featureAbility.startAbility({
-    want:
-    {
-        deviceId: this.deviceId,
-        bundleName: "com.example.test",
-        abilityName: "com.example.test.MainAbility",
-    },
-}
-);
+        var promise = await ability.startAbility(
+            {
+                want:
+                {
+                    deviceId: this.deviceId,
+                    bundleName: "com.example.test",
+                    abilityName: "com.example.test.MainAbility",
+                },
+            }
+        );
 ```
\ No newline at end of file
diff --git a/zh-cn/application-dev/ability/figures/fa-package-info.png b/zh-cn/application-dev/ability/figures/fa-package-info.png
deleted file mode 100755
index 7b660dce47e3873279f9bdf587b1bd290384843b..0000000000000000000000000000000000000000
Binary files a/zh-cn/application-dev/ability/figures/fa-package-info.png and /dev/null differ
diff --git a/zh-cn/application-dev/ability/figures/fa-pageAbility-lifecycle.png b/zh-cn/application-dev/ability/figures/fa-pageAbility-lifecycle.png
deleted file mode 100755
index 269d06b73dde7c952b56cd76f1842a856dde3c01..0000000000000000000000000000000000000000
Binary files a/zh-cn/application-dev/ability/figures/fa-pageAbility-lifecycle.png and /dev/null differ
diff --git a/zh-cn/application-dev/ability/figures/fa-threading-model.png b/zh-cn/application-dev/ability/figures/fa-threading-model.png
deleted file mode 100755
index db1102837790330e536bd43062852bf04d505ee1..0000000000000000000000000000000000000000
Binary files a/zh-cn/application-dev/ability/figures/fa-threading-model.png and /dev/null differ
diff --git a/zh-cn/application-dev/quick-start/basic-resource-file-categories.md b/zh-cn/application-dev/quick-start/basic-resource-file-categories.md
new file mode 100644
index 0000000000000000000000000000000000000000..97cdaa0ab35c5fed21c5b15950530cdca098fedb
--- /dev/null
+++ b/zh-cn/application-dev/quick-start/basic-resource-file-categories.md
@@ -0,0 +1,79 @@
+# 资源文件的分类
+
+
+## resources目录
+
+应用的资源文件（字符串、图片、音频等）统一存放于resources目录下，便于开发者使用和维护。resources目录包括两大类目录，一类为base目录与限定词目录，另一类为rawfile目录，详见resources目录分类。
+
+  资源目录示例：
+
+```
+resources
+|---base  // 默认存在的目录
+|   |---element
+|   |   |---string.json
+|   |---media
+|   |   |---icon.png
+|---en_GB-vertical-car-mdpi // 限定词目录示例，需要开发者自行创建   
+|   |---element
+|   |   |---string.json
+|   |---media
+|   |   |---icon.png
+|---rawfile  // 默认存在的目录
+```
+
+  **表1** resources目录分类
+
+| 分类 | base目录与限定词目录 | rawfile目录 |
+| -------- | -------- | -------- |
+| 组织形式 | 按照两级目录形式来组织，目录命名必须符合规范，以便根据设备状态去匹配相应目录下的资源文件。<br/>&nbsp;&nbsp;一级子目录为**base目录**和**限定词目录**。<br/>-&nbsp;base目录是默认存在的目录。当应用的resources资源目录中没有与设备状态匹配的限定词目录时，会自动引用该目录中的资源文件。<br/>-&nbsp;限定词目录需要开发者自行创建。目录名称由一个或多个表征应用场景或设备特征的限定词组合而成，具体要求参见[限定词目录](#限定词目录)。<br/>二级子目录为**资源目录**，用于存放字符串、颜色、布尔值等基础元素，以及媒体、动画、布局等资源文件，具体要求参见[资源组目录](#资源组目录)。 | 支持创建多层子目录，目录名称可以自定义，文件夹内可以自由放置各类资源文件。<br/>rawfile目录的文件不会根据设备状态去匹配不同的资源。 |
+| 编译方式 | 目录中的资源文件会被编译成二进制文件，并赋予资源文件ID。 | 目录中的资源文件会被直接打包进应用，不经过编译，也不会被赋予资源文件ID。 |
+| 引用方式 | 通过指定资源类型（type）和资源名称（name）来引用。 | 通过指定文件路径和文件名来引用。 |
+
+
+## 限定词目录
+
+限定词目录可以由一个或多个表征应用场景或设备特征的限定词组合而成，包括移动国家码和移动网络码、语言、文字、国家或地区、横竖屏、设备类型、颜色模式和屏幕密度等维度，限定词之间通过下划线（_）或者中划线（-）连接。开发者在创建限定词目录时，需要掌握限定词目录的命名要求，以及限定词目录与设备状态的匹配规则。
+
+**限定词目录的命名要求**
+
+- 限定词的组合顺序：_移动国家码_移动网络码-语言_文字_国家或地区-横竖屏-设备类型-颜色模式-屏幕密度_。开发者可以根据应用的使用场景和设备特征，选择其中的一类或几类限定词组成目录名称。
+
+- 限定词的连接方式：语言、文字、国家或地区之间采用下划线（_）连接，移动国家码和移动网络码之间也采用下划线（_）连接，除此之外的其他限定词之间均采用中划线（-）连接。例如：**zh_Hant_CN**、**zh_CN-car-ldpi**。
+
+- 限定词的取值范围：每类限定词的取值必须符合限定词取值要求表中的条件，否则，将无法匹配目录中的资源文件。
+    **表2** 限定词取值要求
+  
+  | 限定词类型 | 含义与取值说明 | 
+  | -------- | -------- |
+  | 移动国家码和移动网络码 | 移动国家码（MCC）和移动网络码（MNC）的值取自设备注册的网络。MCC后面可以跟随MNC，使用下划线（_）连接，也可以单独使用。例如：mcc460表示中国，mcc460_mnc00表示中国_中国移动。<br/>详细取值范围，请查阅**ITU-T&nbsp;E.212**（国际电联相关标准）。 | 
+  | 语言 | 表示设备使用的语言类型，由2~3个小写字母组成。例如：zh表示中文，en表示英语，mai表示迈蒂利语。<br/>详细取值范围，请查阅**ISO&nbsp;639**（ISO制定的语言编码标准）。 | 
+  | 文字 | 表示设备使用的文字类型，由1个大写字母（首字母）和3个小写字母组成。例如：Hans表示简体中文，Hant表示繁体中文。<br/>详细取值范围，请查阅**ISO&nbsp;15924**（ISO制定的文字编码标准）。 | 
+  | 国家或地区 | 表示用户所在的国家或地区，由2~3个大写字母或者3个数字组成。例如：CN表示中国，GB表示英国。<br/>详细取值范围，请查阅**ISO&nbsp;3166-1**（ISO制定的国家和地区编码标准）。 | 
+  | 横竖屏 | 表示设备的屏幕方向，取值如下：<br/>-&nbsp;vertical：竖屏<br/>-&nbsp;horizontal：横屏 | 
+  | 设备类型 | 表示设备的类型，取值如下：<br/>-&nbsp;phone：手机<br/>-&nbsp;tablet：平板<br/>-&nbsp;car：车机<br/>-&nbsp;tv：智慧屏<br/>-&nbsp;wearable：智能穿戴 | 
+  | 颜色模式 | 表示设备的颜色模式，取值如下：<br/>-&nbsp;dark：深色模式<br/>-&nbsp;light：浅色模式 | 
+  | 屏幕密度 | 表示设备的屏幕密度（单位为dpi），取值如下：<br/>-&nbsp;sdpi：表示小规模的屏幕密度（Small-scale&nbsp;Dots&nbsp;Per&nbsp;Inch），适用于dpi取值为(0,&nbsp;120]的设备。<br/>-&nbsp;mdpi：表示中规模的屏幕密度（Medium-scale&nbsp;Dots&nbsp;Per&nbsp;Inch），适用于dpi取值为(120,&nbsp;160]的设备。<br/>-&nbsp;ldpi：表示大规模的屏幕密度（Large-scale&nbsp;Dots&nbsp;Per&nbsp;Inch），适用于dpi取值为(160,&nbsp;240]的设备。<br/>-&nbsp;xldpi：表示特大规模的屏幕密度（Extra&nbsp;Large-scale&nbsp;Dots&nbsp;Per&nbsp;Inch），适用于dpi取值为(240,&nbsp;320]的设备。<br/>-&nbsp;xxldpi：表示超大规模的屏幕密度（Extra&nbsp;Extra&nbsp;Large-scale&nbsp;Dots&nbsp;Per&nbsp;Inch），适用于dpi取值为(320,&nbsp;480]的设备。<br/>-&nbsp;xxxldpi：表示超特大规模的屏幕密度（Extra&nbsp;Extra&nbsp;Extra&nbsp;Large-scale&nbsp;Dots&nbsp;Per&nbsp;Inch），适用于dpi取值为(480,&nbsp;640]的设备。 | 
+
+**限定词目录与设备状态的匹配规则**
+
+- 在为设备匹配对应的资源文件时，限定词目录匹配的优先级从高到低依次为：移动国家码和移动网络码 &gt; 区域（可选组合：语言、语言_文字、语言_国家或地区、语言_文字_国家或地区）&gt; 横竖屏 &gt; 设备类型 &gt; 颜色模式 &gt; 屏幕密度。
+
+- 如果限定词目录中包含**移动国家码和移动网络码、语言、文字、横竖屏、设备类型、颜色模式**限定词，则对应限定词的取值必须与当前的设备状态完全一致，该目录才能够参与设备的资源匹配。例如，限定词目录“zh_CN-car-ldpi”不能参与“en_US”设备的资源匹配。
+
+
+## 资源组目录
+
+base目录与限定词目录下面可以创建资源组目录（包括element、media、animation、layout、graphic、profile），用于存放特定类型的资源文件，详见资源组目录说明。
+
+
+  **表3** **资源组目录说明**
+
+| 资源组目录 | 目录说明 | 资源文件 | 
+| -------- | -------- | -------- |
+| element | 表示元素资源，以下每一类数据都采用相应的JSON文件来表征。<br/>-&nbsp;boolean，布尔型<br/>-&nbsp;color，颜色<br/>-&nbsp;float，浮点型<br/>-&nbsp;intarray，整型数组<br/>-&nbsp;integer，整型<br/>-&nbsp;pattern，样式<br/>-&nbsp;plural，复数形式<br/>-&nbsp;strarray，字符串数组<br/>-&nbsp;string，字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。<br/>-&nbsp;boolean.json<br/>-&nbsp;color.json<br/>-&nbsp;float.json<br/>-&nbsp;intarray.json<br/>-&nbsp;integer.json<br/>-&nbsp;pattern.json<br/>-&nbsp;plural.json<br/>-&nbsp;strarray.json<br/>-&nbsp;string.json | 
+| media | 表示媒体资源，包括图片、音频、视频等非文本格式的文件。 | 文件名可自定义，例如：icon.png。 | 
+| animation | 表示动画资源，采用XML文件格式。 | 文件名可自定义，例如：zoom_in.xml。 | 
+| layout | 表示布局资源，采用XML文件格式。 | 文件名可自定义，例如：home_layout.xml。 | 
+| graphic | 表示可绘制资源，采用XML文件格式。 | 文件名可自定义，例如：notifications_dark.xml。 | 
+| profile | 表示其他类型文件，以原始文件形式保存。 | 文件名可自定义。 |
diff --git a/zh-cn/application-dev/reference/apis/Readme-CN.md b/zh-cn/application-dev/reference/apis/Readme-CN.md
index ff67949950f6b13b004b7be97cb5da316b074f49..698d8fdaeb8b9ab83941265d765b6cf9b7e31b83 100644
--- a/zh-cn/application-dev/reference/apis/Readme-CN.md
+++ b/zh-cn/application-dev/reference/apis/Readme-CN.md
@@ -25,7 +25,8 @@
     - [访问控制](js-apis-abilityAccessCtrl.md)
     - [通用密钥库系统](js-apis-huks.md)
 - 数据管理
-    - [轻量级存储](js-apis-data-preferences.md)
+    - [轻量级存储<sup>9+</sup>](js-apis-data-preferences.md)
+    - [轻量级存储](js-apis-data-storage.md)
     - [分布式数据管理](js-apis-distributed-data.md)
     - [关系型数据库](js-apis-data-rdb.md)
     - [结果集](js-apis-data-resultset.md)
@@ -76,17 +77,15 @@
     - [USB管理](js-apis-usb.md)
     - [位置服务](js-apis-geolocation.md)
 - 基本功能
-    - [应用上下文](js-apis-basic-features-app-context.md)
-    - [日志打印](js-apis-basic-features-logs.md)
     - [页面路由](js-apis-basic-features-routes.md)
     - [弹窗](js-apis-basic-features-pop-up.md)
-    - [应用配置](js-apis-basic-features-configuration.md)
     - [定时器](js-apis-basic-features-timer.md)
     - [锁屏管理](js-apis-screen-lock.md)
     - [设置系统时间](js-apis-system-time.md)
     - [壁纸](js-apis-wallpaper.md)
     - [剪贴板](js-apis-pasteboard.md)
     - [动画](js-apis-basic-features-animator.md)
+    - [媒体查询](js-apis-mediaquery.md)
     - [WebGL](js-apis-webgl.md)
     - [WebGL2](js-apis-webgl2.md)
     - [屏幕截图](js-apis-screenshot.md)
diff --git a/zh-cn/application-dev/reference/apis/js-apis-ability-context.md b/zh-cn/application-dev/reference/apis/js-apis-ability-context.md
index e1ab57aed3064d616732a18fc49d5e6b22670e8a..bf66918245d740b1e39604bb5c7c76d99e043660 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-ability-context.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-ability-context.md
@@ -10,10 +10,10 @@ Ability的上下文环境，继承自Context。
 ## 使用说明
 
 
-​在使用AbilityContext的功能前，需要通过Ability子类实例获取。
+在使用AbilityContext的功能前，需要通过Ability子类实例获取。
+
 
 
-  
 ```js
 import Ability from '@ohos.application.Ability'
 class MainAbility extends Ability {
@@ -42,10 +42,10 @@ startAbility(want: Want, callback: AsyncCallback&lt;void&gt;): void
 
 **参数：**
 
-  | 参数名 | 类型 | 必填 | 说明 | 
-  | -------- | -------- | -------- | -------- |
-  | want | [Want](js-apis-featureAbility.md#Want类型说明) | 是 | 启动Ability的want信息。 | 
-  | callback | AsyncCallback&lt;void&gt; | 是 | callback形式返回启动结果 | 
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| want | [Want](js-apis-featureAbility.md#want) | 是 | 启动Ability的want信息。 |
+| callback | AsyncCallback&lt;void&gt; | 是 | callback形式返回启动结果 |
 
 **示例：**
 
@@ -71,11 +71,11 @@ startAbility(want: Want, options: StartOptions, callback: AsyncCallback&lt;void&
 
 **参数：**
 
-  | 参数名 | 类型 | 必填 | 说明 | 
-  | -------- | -------- | -------- | -------- |
-  | want | [Want](js-apis-featureAbility.md#Want类型说明)  | 是 | 启动Ability的want信息。 | 
-  | options | StartOptions | 是 | 启动Ability所携带的参数。 |
-  | callback | AsyncCallback&lt;void&gt; | 是 | callback形式返回启动结果。 | 
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| want | [Want](js-apis-featureAbility.md#want) | 是 | 启动Ability的want信息。 |
+| options | StartOptions | 是 | 启动Ability所携带的参数。 |
+| callback | AsyncCallback&lt;void&gt; | 是 | callback形式返回启动结果。 |
 
 **示例：**
     
@@ -96,7 +96,7 @@ startAbility(want: Want, options: StartOptions, callback: AsyncCallback&lt;void&
 
 ## AbilityContext.startAbility
 
-startAbility(want: Want, options: StartOptions): Promise&lt;void&gt;;
+startAbility(want: Want, options: StartOptions): Promise&lt;void>
 
 启动Ability。通过Promise返回结果。
 
@@ -104,10 +104,10 @@ startAbility(want: Want, options: StartOptions): Promise&lt;void&gt;;
 
 **参数：**
 
-  | 参数名 | 类型 | 必填 | 说明 | 
-  | -------- | -------- | -------- | -------- |
-  | want | [Want](js-apis-featureAbility.md#Want类型说明) | 是 | 启动Ability的want信息。 | 
-  | options | StartOptions | 是 | 启动Ability所携带的参数。 |
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| want | [Want](js-apis-featureAbility.md#want) | 是 | 启动Ability的want信息。 |
+| options | StartOptions | 是 | 启动Ability所携带的参数。 |
 
 **返回值：**
 
@@ -145,10 +145,10 @@ startAbilityForResult(want: Want, callback: AsyncCallback&lt;AbilityResult&gt;):
 
 **参数：**
 
-  | 参数名 | 类型 | 必填 | 说明 |
-  | -------- | -------- | -------- | -------- |
-  | want |[Want](js-apis-featureAbility.md#Want类型说明) | 是 | 启动Ability的want信息。 |
-  | callback | AsyncCallback&lt;[AbilityResult](js-apis-featureAbility.md#abilityresult)&gt; | 是 | 执行结果回调函数。 |
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| want |[Want](js-apis-featureAbility.md#want) | 是 | 启动Ability的want信息。 |
+| callback | AsyncCallback&lt;[AbilityResult](js-apis-featureAbility.md#abilityresult)&gt; | 是 | 执行结果回调函数。 |
 
 
 **示例：**
@@ -173,11 +173,11 @@ startAbilityForResult(want: Want, options: StartOptions, callback: AsyncCallback
 
 **参数：**
 
-  | 参数名 | 类型 | 必填 | 说明 |
-  | -------- | -------- | -------- | -------- |
-  | want |[Want](js-apis-featureAbility.md#Want类型说明) | 是 | 启动Ability的want信息。 |
-  | options | StartOptions | 是 | 启动Ability所携带的参数。 |
-  | callback | AsyncCallback&lt;[AbilityResult](js-apis-featureAbility.md#abilityresult)&gt; | 是 | 执行结果回调函数。 |
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| want |[Want](js-apis-featureAbility.md#want) | 是 | 启动Ability的want信息。 |
+| options | StartOptions | 是 | 启动Ability所携带的参数。 |
+| callback | AsyncCallback&lt;[AbilityResult](js-apis-featureAbility.md#abilityresult)&gt; | 是 | 执行结果回调函数。 |
 
 
 **示例：**
@@ -206,10 +206,10 @@ startAbilityForResult(want: Want, options: StartOptions): Promise&lt;AbilityResu
 
 **参数：**
 
-  | 参数名 | 类型 | 必填 | 说明 | 
-  | -------- | -------- | -------- | -------- |
-  | want | [Want](js-apis-featureAbility.md#Want类型说明) | 是 | 启动Ability的want信息。 |
-  | options | StartOptions | 是 | 启动Ability所携带的参数。 |
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| want | [Want](js-apis-featureAbility.md#want) | 是 | 启动Ability的want信息。 |
+| options | StartOptions | 是 | 启动Ability所携带的参数。 |
 
 
 **返回值：**
@@ -353,9 +353,9 @@ startAbilityByCall(want: Want): Promise&lt;Caller&gt;;
 
 **参数：**
 
-  | 参数名 | 类型 | 必填 | 说明 | 
-  | -------- | -------- | -------- | -------- |
-  | want | [Want](js-apis-featureAbility.md#Want类型说明) | 是 | 传入需要启动的ability的信息，包含ability名称、包名、设备ID，设备ID缺省或为空表示启动本地ability。 | 
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| want | [Want](js-apis-featureAbility.md#want) | 是 | 传入需要启动的ability的信息，包含ability名称、包名、设备ID，设备ID缺省或为空表示启动本地ability。 |
 
 **返回值：**
 
diff --git a/zh-cn/application-dev/reference/apis/js-apis-basic-features-app-context.md b/zh-cn/application-dev/reference/apis/js-apis-basic-features-app-context.md
deleted file mode 100644
index be16b12372a636aa23a991b595c4a800f1c4261f..0000000000000000000000000000000000000000
--- a/zh-cn/application-dev/reference/apis/js-apis-basic-features-app-context.md
+++ /dev/null
@@ -1,79 +0,0 @@
-# 应用上下文
-
-
-## 导入模块
-
-```
-import app from '@system.app';
-```
-
-## 权限列表
-
-无
-
-
-## app.getInfo
-
-getInfo(): &lt;AppResponse&gt;
-
-获取当前应用配置文件中声明的信息。
-
-- 返回值
-  **表1** AppResponse
-  
-  | | | |
-  | -------- | -------- | -------- |
-  | 参数名 | 类型 | 说明 |
-  | appID<sup>6+</sup> | string | 表示应用的包名，用于标识应用的唯一性。 |
-  | appName | string | 表示应用的名称。 |
-  | versionName | string | 表示应用的版本名称。 |
-  | versionCode | number | 表示应用的版本号。 |
-
-- 示例
-  ```
-  export default {    
-    getInfo(){        
-      var info = app.getInfo();        
-        console.log(JSON.stringify(info));    
-    } 
-  }
-  ```
-
-
-## app.terminate
-
-terminate(): void
-
-退出当前Ability
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 从API Version 7 开始，推荐使用新接口['@ohos.ability.featureAbility'](js-apis-featureAbility.md)。
-
-- 示例
-  ```
-  export default {    
-    terminate(){        
-      app.terminate();    
-    }}
-  ```
-
-## app.requestFullWindow
-
-requestFullWindow(duration: number): void
-
-请求应用以全窗口运行，FA在某些场景下（如半模态FA）会以非全窗口运行，调用该接口会从非全窗口切换为全窗口运行，如果已经以全窗口运行则该接口调用无效。
-
-- 参数
-  | 参数名 | 类型 | 必填 | 说明 |
-  | -------- | -------- | -------- | -------- |
-  | duration | number | 否 | 请求全屏时，设定非全屏到全屏的过渡时间，单位为毫秒，默认时间与非全屏到全屏的距离成正比。 |
-
-- 示例
-  ```
-  export default {    
-    requestFullWindow(){        
-      app.requestFullWindow({            
-        duration: 200});    
-    }
-  }
-  ```
diff --git a/zh-cn/application-dev/reference/apis/js-apis-basic-features-configuration.md b/zh-cn/application-dev/reference/apis/js-apis-basic-features-configuration.md
deleted file mode 100644
index d9602902ca3e575a737f08f4edc22f30ef61f06b..0000000000000000000000000000000000000000
--- a/zh-cn/application-dev/reference/apis/js-apis-basic-features-configuration.md
+++ /dev/null
@@ -1,44 +0,0 @@
-# 应用配置
-
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> - 从API Version 7 开始，该接口不再维护，推荐使用新接口['@ohos.i18n'](js-apis-i18n.md)和['@ohos.intl'](js-apis-intl.md)。
->
-
-
-## 导入模块
-
-```
-import configuration from '@system.configuration';
-```
-
-## 权限列表
-
-无
-
-
-## configuration.getLocale
-
-getLocale(): &lt;LocaleResponse&gt;
-
-获取应用当前的语言和地区。默认与系统的语言和地区同步。
-
-- 返回值
-  **表1** LocaleResponse
-  
-  | 参数名 | 类型 | 说明 |
-  | -------- | -------- | -------- |
-  | language | string | 语言。例如：zh。 |
-  | countryOrRegion | string | 国家或地区。例如：CN。 |
-  | dir | string | 文字布局方向。取值范围：<br/>-&nbsp;ltr：从左到右；<br/>-&nbsp;rtl：从右到左。 |
-  | $unicodeSetting^{5+}$ | string | 语言环境定义的Unicode语言环境键集，如果此语言环境没有特定键集，则返回空集。<br/>例如：{"nu":"arab"}，表示当前环境下的数字采用阿拉伯语的数字。 |
-
-- 示例
-  ```
-  export default {    
-    getLocale() {        
-      const localeInfo = configuration.getLocale();        
-      console.info(localeInfo.language);    
-    }
-  }
-  ```
diff --git a/zh-cn/application-dev/reference/apis/js-apis-basic-features-logs.md b/zh-cn/application-dev/reference/apis/js-apis-basic-features-logs.md
index 0c6afae60d9aed4e0b2e8873510279255bb25928..00ecf318420eda9d2d11734b638e4518ecef5771 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-basic-features-logs.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-basic-features-logs.md
@@ -5,10 +5,6 @@
 
 无需导入。
 
-## 权限列表
-
-无
-
 
 ## console.debug
 
diff --git a/zh-cn/application-dev/reference/apis/js-apis-commonEvent.md b/zh-cn/application-dev/reference/apis/js-apis-commonEvent.md
index c244934d6de61e238ede1f5b41a98c18574c55a2..8ad8d1f219e7d96340052dd5f0068dfc4329d7aa 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-commonEvent.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-commonEvent.md
@@ -168,7 +168,7 @@ publish(event: string, callback: AsyncCallback\<void>): void
 
 发布公共事件（callback形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -201,7 +201,7 @@ publish(event: string, options: CommonEventPublishData, callback: AsyncCallback\
 
 发布公共事件指定发布信息（callback形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -243,7 +243,7 @@ publishAsUser(event: string, userId: number, callback: AsyncCallback\<void>): vo
 
 向指定用户发布公共事件（callback形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -280,7 +280,7 @@ publishAsUser(event: string, userId: number, options: CommonEventPublishData, ca
 
 向指定用户发布公共事件并指定发布信息（callback形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -325,7 +325,7 @@ createSubscriber(subscribeInfo: CommonEventSubscribeInfo, callback: AsyncCallbac
 
 创建订阅者（callback形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -367,7 +367,7 @@ createSubscriber(subscribeInfo: CommonEventSubscribeInfo): Promise\<CommonEventS
 
 创建订阅者（Promise形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -407,7 +407,7 @@ subscribe(subscriber: CommonEventSubscriber, callback: AsyncCallback\<CommonEven
 
 订阅公共事件（callback形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -418,6 +418,43 @@ subscribe(subscriber: CommonEventSubscriber, callback: AsyncCallback\<CommonEven
 
 **示例：**
 
+无序事件：
+
+```js
+var subscriber; //用于保存创建成功的订阅者对象，后续使用其完成订阅及退订的动作
+
+//订阅者信息
+var subscribeInfo = {
+    events: ["event"]
+};
+
+//订阅公共事件回调
+function SubscribeCallBack(err, data) {
+    if (err.code) {
+        console.error("subscribe failed " + JSON.stringify(err));
+    } else {
+        console.info("subscribe " + JSON.stringify(data));
+    }
+}
+
+//创建订阅者回调
+function CreateSubscriberCallBack(err, commonEventSubscriber) {
+    if (err.code) {
+        console.error("createSubscriber failed " + JSON.stringify(err));
+    } else {
+        console.info("createSubscriber");
+        subscriber = commonEventSubscriber;
+        //订阅公共事件
+        CommonEvent.subscribe(subscriber, SubscribeCallBack);
+    }
+}
+
+//创建订阅者
+CommonEvent.createSubscriber(subscribeInfo, CreateSubscriberCallBack);
+```
+
+ 有序事件：
+
 ```js
 var subscriber; //用于保存创建成功的订阅者对象，后续使用其完成订阅及退订的动作
 
@@ -426,12 +463,45 @@ var subscribeInfo = {
     events: ["event"]
 };
 
+//设置有序公共事件的结果代码回调
+function SetCodeCallBack(err) {
+    if (err.code) {
+        console.error("setCode failed " + JSON.stringify(err));
+    } else {
+        console.info("setCode");
+    }
+}
+
+//设置有序公共事件的结果数据回调
+function SetDataCallBack(err) {
+    if (err.code) {
+        console.error("setData failed " + JSON.stringify(err));
+    } else {
+        console.info("setData");
+    }
+}
+
+//完成本次有序公共事件处理回调
+function FinishCommonEventCallBack(err) {
+    if (err.code) {
+        console.error("finishCommonEvent failed " + JSON.stringify(err));
+    } else {
+        console.info("finishCommonEvent");
+    }
+}
+
 //订阅公共事件回调
 function SubscribeCallBack(err, data) {
     if (err.code) {
         console.error("subscribe failed " + JSON.stringify(err));
     } else {
         console.info("subscribe " + JSON.stringify(data));
+        //设置有序公共事件的结果代码
+        subscriber.setCode(0, SetCodeCallBack);
+        //设置有序公共事件的结果数据
+        subscriber.setData("publish_data_changed", SetDataCallBack);
+        //完成本次有序公共事件处理
+        subscriber.finishCommonEvent(FinishCommonEventCallBack)
     }
 }
 
@@ -451,7 +521,7 @@ function CreateSubscriberCallBack(err, commonEventSubscriber) {
 CommonEvent.createSubscriber(subscribeInfo, CreateSubscriberCallBack);
 ```
 
- 
+
 
 ## CommonEvent.unsubscribe
 
@@ -459,7 +529,7 @@ unsubscribe(subscriber: CommonEventSubscriber, callback?: AsyncCallback\<void>):
 
 取消订阅公共事件（callback形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -517,7 +587,7 @@ CommonEvent.unsubscribe(subscriber, UnsubscribeCallBack);
 
 ## CommonEventPublishData
 
-**系统能力：** 以下各项对应的系统能力均为SystemCapability.Notification.CommonEvent
+**系统能力：**以下各项对应的系统能力均为SystemCapability.Notification.CommonEvent
 
 | 名称                  | 读写属性 | 类型                 | 必填 | 描述                         |
 | --------------------- | -------- | -------------------- | ---- | ---------------------------- |
@@ -530,7 +600,7 @@ CommonEvent.unsubscribe(subscriber, UnsubscribeCallBack);
 
 ## CommonEventSubscribeInfo
 
-**系统能力：** 以下各项对应的系统能力均为SystemCapability.Notification.CommonEvent
+**系统能力：**以下各项对应的系统能力均为SystemCapability.Notification.CommonEvent
 
 | 名称                | 读写属性 | 类型           | 必填 | 描述                                                         |
 | ------------------- | -------- | -------------- | ---- | ------------------------------------------------------------ |
@@ -542,7 +612,7 @@ CommonEvent.unsubscribe(subscriber, UnsubscribeCallBack);
 
 ## CommonEventData
 
-**系统能力：** 以下各项对应的系统能力均为SystemCapability.Notification.CommonEvent
+**系统能力：**以下各项对应的系统能力均为SystemCapability.Notification.CommonEvent
 
 | 名称       | 读写属性 | 类型                 | 必填 | 描述                                                    |
 | ---------- | -------- | -------------------- | ---- | ------------------------------------------------------- |
@@ -560,7 +630,7 @@ getCode(callback: AsyncCallback\<number>): void
 
 获取公共事件的结果代码（callback形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -591,7 +661,7 @@ getCode(): Promise\<number>
 
 获取公共事件的结果代码（Promise形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **返回值：**
 
@@ -617,7 +687,7 @@ setCode(code: number, callback: AsyncCallback\<void>): void
 
 设置公共事件的结果代码（callback形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -648,7 +718,7 @@ setCode(code: number): Promise\<void>
 
 设置公共事件的结果代码（Promise形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -674,7 +744,7 @@ getData(callback: AsyncCallback\<string>): void
 
 获取公共事件的结果数据（callback形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -704,7 +774,7 @@ getData(): Promise\<string>
 
 获取公共事件的结果数据（Promise形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **返回值：**
 
@@ -730,7 +800,7 @@ setData(data: string, callback: AsyncCallback\<void>): void
 
 设置公共事件的结果数据（callback形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -761,7 +831,7 @@ setData(data: string): Promise\<void>
 
 设置公共事件的结果数据（Promise形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -787,7 +857,7 @@ setCodeAndData(code: number, data: string, callback:AsyncCallback\<void>): void
 
 设置公共事件的结果代码和结果数据（callback形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -819,7 +889,7 @@ setCodeAndData(code: number, data: string): Promise\<void>
 
 设置公共事件的结果代码和结果数据（Promise形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -848,7 +918,7 @@ isOrderedCommonEvent(callback: AsyncCallback\<boolean>): void
 
 返回true代表是有序公共事件，false代表不是有序公共事件。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -880,7 +950,7 @@ isOrderedCommonEvent(): Promise\<boolean>
 
 返回true代表是有序公共事件，false代表不是有序公共事件。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **返回值：**
 
@@ -906,7 +976,7 @@ abortCommonEvent(callback: AsyncCallback\<void>): void
 
 取消当前的公共事件，仅对有序公共事件有效，取消后，公共事件不再向下一个订阅者传递（callback形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -936,7 +1006,7 @@ abortCommonEvent(): Promise\<void>
 
 取消当前的公共事件，仅对有序公共事件有效，取消后，公共事件不再向下一个订阅者传递（Promise形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **示例：**
 
@@ -956,7 +1026,7 @@ clearAbortCommonEvent(callback: AsyncCallback\<void>): void
 
 清除当前公共事件的取消状态，仅对有序公共事件有效（callback形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -986,7 +1056,7 @@ clearAbortCommonEvent(): Promise\<void>
 
 清除当前公共事件的取消状态，仅对有序公共事件有效（Promise形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **示例：**
 
@@ -1006,7 +1076,7 @@ getAbortCommonEvent(callback: AsyncCallback\<boolean>): void
 
 获取当前有序公共事件是否取消的状态（callback形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -1036,7 +1106,7 @@ getAbortCommonEvent(): Promise\<void>
 
 获取当前有序公共事件是否取消的状态（Promise形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **返回值：**
 
@@ -1062,7 +1132,7 @@ getSubscribeInfo(callback: AsyncCallback\<CommonEventSubscribeInfo>): void
 
 获取订阅者的订阅信息（callback形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **参数：**
 
@@ -1092,7 +1162,7 @@ getSubscribeInfo(): Promise\<CommonEventSubscribeInfo>
 
 获取订阅者的订阅信息（Promise形式）。
 
-**系统能力：** SystemCapability.Notification.CommonEvent
+**系统能力**：SystemCapability.Notification.CommonEvent
 
 **返回值：**
 
diff --git a/zh-cn/application-dev/reference/apis/js-apis-fileio.md b/zh-cn/application-dev/reference/apis/js-apis-fileio.md
index 1e6def6533c67181588eed4a966acda87a8f4311..b01a673db10bf796345bfd13f374f06bab9e7c34 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-fileio.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-fileio.md
@@ -1432,7 +1432,7 @@ lstat(path:string, callback:AsyncCallback&lt;Stat&gt;): void
   ```js
   fileio.lstat(path, function (err, stat) {
       // do something
-  });
+  ));
   ```
 
 
@@ -1827,7 +1827,7 @@ chown(path: string, uid: number, gid: number): Promise&lt;void&gt;
 - 示例：
   ```js
   let stat = fileio.statSync(path);
-  fileio.chown(path, stat.uid, stat.gid).then(function(){
+  fileio.chown(path, stat.uid, stat.gid)).then(function(){
       console.info("chown successfully");
   }).catch(function(err){
       console.info("chown failed with error:"+ err);
@@ -2127,7 +2127,7 @@ fdopenStream(fd: number, mode: string): Promise&lt;Stream&gt;
 - 示例：
   ```js
   fileio.fdopenStream(fd, mode).then(function(stream){
-      console.info("openStream successfully");
+      console.info("openStream successfully"+);
   }).catch(function(err){
       console.info("openStream failed with error:"+ err);
   });
diff --git a/zh-cn/application-dev/reference/apis/js-apis-formprovider.md b/zh-cn/application-dev/reference/apis/js-apis-formprovider.md
deleted file mode 100644
index b6f721e33bb056b29d08d0cd45e6d36dd32a4000..0000000000000000000000000000000000000000
--- a/zh-cn/application-dev/reference/apis/js-apis-formprovider.md
+++ /dev/null
@@ -1,128 +0,0 @@
-# FormProvider
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 本模块首批接口从API version 8开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
-
-卡片提供方相关接口。
-
-## 导入模块
-
-```
-import formProvider from '@ohos.application.formProvider';
-```
-
-## 权限
-
-无
-
-## setFormNextRefreshTime
-
-setFormNextRefreshTime(formId: string, minute: number, callback: AsyncCallback<void>): void;
-
-设置指定卡片的下一次更新时间。
-
-**系统能力：**
-
-SystemCapability.Ability.Form
-
-**参数：**
-
-  | 参数名 | 类型    | 必填 | 说明                                   |
-  | ------ | ------ | ---- | ------------------------------------- |
-  | formId | string | 是   | 卡片标识                               |
-  | minute | number | 是   | 指定多久之后更新，单位分钟，大于等于5     |
-
-**示例：**
-
-  ```js
-  var formId = "12400633174999288";
-  formProvider.setFormNextRefreshTime(formId, 5, (error, data) => {
-      if (error) {
-          console.log('formProvider setFormNextRefreshTime, error:' + error.code);
-      }
-  });
-  ```
-
-## setFormNextRefreshTime
-
-setFormNextRefreshTime(formId: string, minute: number): Promise<void>;
-
-设置指定卡片的下一次更新时间，以promise方式返回。
-
-**系统能力：**
-
-SystemCapability.Ability.Form
-
-**参数：**
-
-  | 参数名 | 类型    | 必填 | 说明                                   |
-  | ------ | ------ | ---- | ------------------------------------- |
-  | formId | string | 是   | 卡片标识                               |
-  | minute | number | 是   | 指定多久之后更新，单位分钟，大于等于5     |
-
-**示例：**
-
-  ```js
-  var formId = "12400633174999288";
-  formProvider.setFormNextRefreshTime(formId, 5).catch((error) => {
-      console.log('formProvider setFormNextRefreshTime, error:' + JSON.stringify(error));
-  });
-  ```
-
-## updateForm
-
-updateForm(formId: string, formBindingData: formBindingData.FormBindingData, callback: AsyncCallback<void>): void;
-
-更新指定的卡片。
-
-**系统能力：**
-
-SystemCapability.Ability.Form
-
-**参数：**
-
-  | 参数名 | 类型                                                                    | 必填 | 说明             |
-  | ------ | ---------------------------------------------------------------------- | ---- | ---------------- |
-  | formId | string                                                                 | 是   | 请求更新的卡片标识 |
-  | formBindingData | [FormBindingData](js-apis-formbindingdata.md#formbindingdata) | 是   | 用于更新的数据    |
-
-**示例：**
-
-  ```js
-  import formBindingData from '@ohos.application.formBindingData';
-  var formId = "12400633174999288";
-  let obj = formBindingData.createFormBindingData({temperature:"22c", time:"22:00"});
-  formProvider.updateForm(formId, obj, (error, data) => {
-      if (error) {
-          console.log('formProvider updateForm, error:' + error.code);
-      }
-  });
-  ```
-
-## updateForm
-
-updateForm(formId: string, formBindingData: formBindingData.FormBindingData): Promise<void>;
-
-更新指定的卡片，以promise方式返回。
-
-**系统能力：**
-
-SystemCapability.Ability.Form
-
-**参数：**
-
-  | 参数名 | 类型                                                                    | 必填 | 说明             |
-  | ------ | ---------------------------------------------------------------------- | ---- | ---------------- |
-  | formId | string                                                                 | 是   | 请求更新的卡片标识 |
-  | formBindingData | [FormBindingData](js-apis-formbindingdata.md#formbindingdata) | 是   | 用于更新的数据    |
-
-**示例：**
-
-  ```js
-  import formBindingData from '@ohos.application.formBindingData';
-  var formId = "12400633174999288";
-  let obj = formBindingData.createFormBindingData({temperature:"22c", time:"22:00"});
-  formProvider.updateForm(formId, obj).catch((error) => {
-      console.log('formProvider updateForm, error:' + JSON.stringify(error));
-  });
-  ```
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/apis/js-apis-geolocation.md b/zh-cn/application-dev/reference/apis/js-apis-geolocation.md
index 6dd2b097b525559b8820532fe4ab4c97d5e8303b..bbb22b733f8579c06149cd6f9bd32f54a480f306 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-geolocation.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-geolocation.md
@@ -1,4 +1,4 @@
-# 位置服务(新)
+# 位置服务
 
 
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
@@ -7,7 +7,7 @@
 
 ## 导入模块
 
-  
+
 ```
 import geolocation from '@ohos.geolocation';
 ```
@@ -34,7 +34,7 @@ on(type: 'locationChange', request: LocationRequest, callback: Callback&lt;Locat
   | callback | Callback&lt;[Location](#location)&gt; | 是 | 接收位置变化状态变化监听。 | 
 
 - 示例：
-    
+  
   ```
   var requestInfo = {'priority': 0x203, 'scenario': 0x300, 'timeInterval': 0, 'distanceInterval': 0, 'maxAccuracy': 0};
   var locationChange = (location) => {
@@ -57,7 +57,7 @@ off(type: 'locationChange', callback?: Callback&lt;Location&gt;) : void
   | callback | Callback&lt;[Location](#location)&gt; | 否 | 接收位置变化状态变化监听。 | 
 
 - 示例：
-    
+  
   ```
   var requestInfo = {'priority': 0x203, 'scenario': 0x300, 'timeInterval': 0, 'distanceInterval': 0, 'maxAccuracy': 0};
   var locationChange = (location) => {
@@ -81,7 +81,7 @@ on(type: 'locationServiceState', callback: Callback&lt;boolean&gt;) : void
   | callback | Callback&lt;boolean&gt; | 是 | 接收位置服务状态变化监听。 | 
 
 - 示例：
-    
+  
   ```
   var locationServiceState = (state) => {
       console.log('locationServiceState: ' + state);
@@ -103,7 +103,7 @@ off(type: 'locationServiceState', callback?: Callback&lt;boolean&gt;) : void;
   | callback | Callback&lt;boolean&gt; | 否 | 接收位置服务状态变化监听。 | 
 
 - 示例：
-    
+  
   ```
   var locationServiceState = (state) => {
       console.log('locationServiceState: state: ' + state);
@@ -127,7 +127,7 @@ on(type: 'cachedGnssLocationsReporting', request: CachedGnssLocationsRequest, ca
   | callback | Callback&lt;boolean&gt; | 是 | 接收GNSS缓存位置上报。 | 
 
 - 示例：
-    
+  
   ```
   var cachedLocationsCb = (locations) => {
       console.log('cachedGnssLocationsReporting: locations: ' + locations);
@@ -150,7 +150,7 @@ off(type: 'cachedGnssLocationsReporting', callback?: Callback&lt;Array&lt;Locati
   | callback | Callback&lt;boolean&gt; | 否 | 接收GNSS缓存位置上报。 | 
 
 - 示例：
-    
+  
   ```
   var cachedLocationsCb = (locations) => {
       console.log('cachedGnssLocationsReporting: locations: ' + locations);
@@ -174,7 +174,7 @@ on(type: 'gnssStatusChange', callback: Callback&lt;SatelliteStatusInfo&gt;) : vo
   | callback | Callback&lt;SatelliteStatusInfo&gt; | 是 | 接收GNSS卫星状态信息上报。 | 
 
 - 示例：
-    
+  
   ```
   var gnssStatusCb = (satelliteStatusInfo) => {
       console.log('gnssStatusChange: ' + satelliteStatusInfo);
@@ -196,7 +196,7 @@ off(type: 'gnssStatusChange', callback?: Callback&lt;SatelliteStatusInfo&gt;) :
   | callback | Callback&lt;SatelliteStatusInfo&gt; | 否 | 接收GNSS卫星状态信息上报。 | 
 
 - 示例：
-    
+  
   ```
   var gnssStatusCb = (satelliteStatusInfo) => {
       console.log('gnssStatusChange: ' + satelliteStatusInfo);
@@ -219,7 +219,7 @@ on(type: 'nmeaMessageChange', callback: Callback&lt;string&gt;) : void;
   | callback | Callback&lt;string&gt; | 是 | 接收GNSS&nbsp;NMEA信息上报。 | 
 
 - 示例：
-    
+  
   ```
   var nmeaCb = (str) => {
       console.log('nmeaMessageChange: ' + str);
@@ -241,7 +241,7 @@ off(type: 'nmeaMessageChange', callback?: Callback&lt;string&gt;) : void;
   | callback | Callback&lt;string&gt; | 否 | 接收GNSS&nbsp;NMEA信息上报。 | 
 
 - 示例：
-    
+  
   ```
   var nmeaCb = (str) => {
       console.log('nmeaMessageChange: ' + str);
@@ -265,7 +265,7 @@ on(type: 'fenceStatusChange', request: GeofenceRequest, want: WantAgent) : void;
   | want | WantAgent | 是 | 用于接收地理围栏事件上报（进出围栏）。 | 
 
 - 示例：
-    
+  
   ```
   import WantAgent from '@ohos.wantAgent';
   import { OperationType, WantAgentFlags } from '@ohos.wantagent';
@@ -327,7 +327,7 @@ off(type: 'fenceStatusChange', request: GeofenceRequest, want: WantAgent) : void
   | want | WantAgent | 是 | 用于接收地理围栏事件上报（进出围栏）。 | 
 
 - 示例：
-    
+  
   ```
   import WantAgent from '@ohos.wantAgent';
   import { OperationType, WantAgentFlags } from '@ohos.wantagent';
@@ -391,7 +391,7 @@ getCurrentLocation(request: CurrentLocationRequest, callback: AsyncCallback&lt;L
   | callback | AsyncCallback&lt;[Location](#location)&gt; | 是 | 用来接收位置信息的回调。 | 
 
 - 示例：
-    
+  
   ```
   var requestInfo = {'priority': 0x203, 'scenario': 0x300,'maxAccuracy': 0};
   var locationChange = (err, location) => {
@@ -421,7 +421,7 @@ getCurrentLocation(request?: CurrentLocationRequest) : Promise&lt;Location&gt;
   | Promise&lt;[Location](#location)&gt; | 返回位置信息。 | 
 
 - 示例：
-    
+  
   ```
   var requestInfo = {'priority': 0x203, 'scenario': 0x300,'maxAccuracy': 0};
   locationEventListener.getCurrentLocation(requestInfo).then((result) => {
@@ -442,7 +442,7 @@ getLastLocation(callback: AsyncCallback&lt;Location&gt;) : void
   | callback | AsyncCallback&lt;[Location](#location)&gt; | 是 | 用来接收上次位置的回调。 | 
 
 - 示例：
-    
+  
   ```
   geolocation.getLastLocation((err, data) => {
       console.log('getLastLocation: ' + err + " data: " + JSON.stringify(data));
@@ -462,7 +462,7 @@ getLastLocation() : Promise&lt;Location&gt;
   | Promise&lt;[Location](#location)&gt; | 返回上次位置信息。 | 
 
 - 示例：
-    
+  
   ```
   geolocation.getLastLocation().then((result) => {
       console.log('getLastLocation: result: ' + JSON.stringify(result));
@@ -484,7 +484,7 @@ isLocationEnabled(callback: AsyncCallback&lt;boolean&gt;) : void
   | callback | AsyncCallback&lt;boolean&gt; | 是 | 用来接收位置服务状态的回调。 | 
 
 - 示例：
-    
+  
   ```
   geolocation.isLocationEnabled((err, data) => {
       console.log('isLocationEnabled: ' + err + " data: " + data);
@@ -504,7 +504,7 @@ isLocationEnabled() : Promise&lt;boolean&gt;
   | Promise&lt;boolean&gt; | 返回位置服务是否可用的状态。 | 
 
 - 示例：
-    
+  
   ```
   geolocation.isLocationEnabled().then((result) => {
       console.log('promise, isLocationEnabled: ' + result);
@@ -526,7 +526,7 @@ requestEnableLocation(callback: AsyncCallback&lt;boolean&gt;) : void
   | callback | AsyncCallback&lt;boolean&gt; | 是 | 用来接收位置服务状态的回调。 | 
 
 - 示例：
-    
+  
   ```
   geolocation.requestEnableLocation((err, data) => {
       console.log('requestEnableLocation: ' + err + " data: " + data);
@@ -546,7 +546,7 @@ requestEnableLocation() : Promise&lt;boolean&gt;
   | Promise&lt;boolean&gt; | 返回位置服务是否可用。 | 
 
 - 示例：
-    
+  
   ```
   geolocation.requestEnableLocation().then((result) => {
       console.log('promise, requestEnableLocation: ' + result);
@@ -566,7 +566,7 @@ isGeoServiceAvailable(callback: AsyncCallback&lt;boolean&gt;) : void
   | callback | AsyncCallback&lt;boolean&gt; | 是 | 用来接收地理编码服务状态的回调。 | 
 
 - 示例：
-    
+  
   ```
   geolocation.isGeoServiceAvailable((err, data) => {
       console.log('isGeoServiceAvailable: ' + err + " data: " + data);
@@ -586,7 +586,7 @@ isGeoServiceAvailable() : Promise&lt;boolean&gt;
   | Promise&lt;boolean&gt; | 返回地理编码服务是否可用的状态。 | 
 
 - 示例：
-    
+  
   ```
   geolocation.isGeoServiceAvailable().then((result) => {
       console.log('promise, isGeoServiceAvailable: ' + result);
@@ -608,7 +608,7 @@ getAddressesFromLocation(request: ReverseGeoCodeRequest, callback: AsyncCallback
   | callback | AsyncCallback&lt;Array&lt;[GeoAddress](#geoaddress)&gt;&gt; | 是 | 设置接收逆地理编码请求的回调参数。 | 
 
 - 示例：
-    
+  
   ```
   var reverseGeocodeRequest = {"latitude": 31.12, "longitude": 121.11, "maxItems": 1};
   geolocation.getAddressesFromLocation(reverseGeocodeRequest, (err, data) => {
@@ -634,7 +634,7 @@ getAddressesFromLocation(request: ReverseGeoCodeRequest) : Promise&lt;Array&lt;G
   | Promise&lt;Array&lt;[GeoAddress](#geoaddress)&gt;&gt; | 返回地理描述信息。 | 
 
 - 示例：
-    
+  
   ```
   var reverseGeocodeRequest = {"latitude": 31.12, "longitude": 121.11, "maxItems": 1};
   geolocation.getAddressesFromLocation(reverseGeocodeRequest).then((data) => {
@@ -656,7 +656,7 @@ getAddressesFromLocationName(request: GeoCodeRequest, callback: AsyncCallback&lt
   | callback | AsyncCallback&lt;Array&lt;[GeoAddress](#geoaddress)&gt;&gt; | 是 | 设置接收地理编码请求的回调参数。 | 
 
 - 示例：
-    
+  
   ```
   var geocodeRequest = {"description": "上海市浦东新区xx路xx号", "maxItems": 1};
   geolocation.getAddressesFromLocationName(geocodeRequest, (err, data) => {
@@ -682,7 +682,7 @@ getAddressesFromLocationName(request: GeoCodeRequest) : Promise&lt;Array&lt;GeoA
   | Promise&lt;Array&lt;[GeoAddress](#geoaddress)&gt;&gt; | 设置接收地理编码请求的回调参数。 | 
 
 - 示例：
-    
+  
   ```
   var geocodeRequest = {"description": "上海市浦东新区xx路xx号", "maxItems": 1};
   geolocation.getAddressesFromLocationName(geocodeRequest).then((result) => {
@@ -704,7 +704,7 @@ getCachedGnssLocationsSize(callback: AsyncCallback&lt;number&gt;) : void;
   | callback | AsyncCallback&lt;number&gt; | 是 | 用来接收GNSS芯片缓存位置个数的回调。 | 
 
 - 示例：
-    
+  
   ```
   geolocation.getCachedGnssLocationsSize((err, size) => {
       console.log('getCachedGnssLocationsSize: err:' + err + " size: " + size);
@@ -724,7 +724,7 @@ getCachedGnssLocationsSize() : Promise&lt;number&gt;;
   | Promise&lt;number&gt; | 返回GNSS缓存位置的个数。 | 
 
 - 示例：
-    
+  
   ```
   geolocation.getCachedGnssLocationsSize().then((result) => {
       console.log('promise, getCachedGnssLocationsSize: ' + result);
@@ -744,7 +744,7 @@ flushCachedGnssLocations(callback: AsyncCallback&lt;boolean&gt;) : void;
   | callback | AsyncCallback&lt;boolean&gt; | 是 | 用来接收清空GNSS芯片缓存位置操作的结果。 | 
 
 - 示例：
-    
+  
   ```
   geolocation.flushCachedGnssLocations((err, result) => {
       console.log('flushCachedGnssLocations: err:' + err + " result: " + result);
@@ -764,7 +764,7 @@ flushCachedGnssLocations() : Promise&lt;boolean&gt;;
   | Promise&lt;boolean&gt; | 清空所有GNSS缓存位置是否成功。 | 
 
 - 示例：
-    
+  
   ```
   geolocation.flushCachedGnssLocations().then((result) => {
       console.log('promise, flushCachedGnssLocations: ' + result);
@@ -785,7 +785,7 @@ sendCommand(command: LocationCommand, callback: AsyncCallback&lt;boolean&gt;) :
   | callback | AsyncCallback&lt;boolean&gt; | 是 | 用来接收命令发送的结果。 | 
 
 - 示例：
-    
+  
   ```
   var requestInfo = {'scenario': 0x301, 'command': "command_1"};
   geolocation.sendCommand(requestInfo, (err, result) => {
@@ -811,7 +811,7 @@ sendCommand(command: LocationCommand) : Promise&lt;boolean&gt;;
   | Promise&lt;boolean&gt; | 表示命令发送成功或失败。 | 
 
 - 示例：
-    
+  
   ```
   var requestInfo = {'scenario': 0x301, 'command': "command_1"};
   geolocation.sendCommand(requestInfo).then((result) => {
@@ -833,7 +833,7 @@ isLocationPrivacyConfirmed(type : LocationPrivacyType, callback: AsyncCallback&l
   | callback | AsyncCallback&lt;boolean&gt; | 是 | 表示用户是否同意定位服务隐私申明。 | 
 
 - 示例：
-    
+  
   ```
   geolocation.isLocationPrivacyConfirmed(1, (err, result) => {
       console.log('isLocationPrivacyConfirmed: err:' + err + " result: " + result);
@@ -858,7 +858,7 @@ isLocationPrivacyConfirmed(type : LocationPrivacyType,) : Promise&lt;boolean&gt;
   | Promise&lt;boolean&gt; | 表示用户是否同意定位服务隐私申明。 | 
 
 - 示例：
-    
+  
   ```
   geolocation.isLocationPrivacyConfirmed(1).then((result) => {
       console.log('promise, isLocationPrivacyConfirmed: ' + result);
@@ -880,7 +880,7 @@ setLocationPrivacyConfirmStatus(type : LocationPrivacyType, isConfirmed: boolean
   | callback | AsyncCallback&lt;boolean&gt; | 是 | 表示操作是否成功。 | 
 
 - 示例：
-    
+  
   ```
   geolocation.setLocationPrivacyConfirmStatus(1, true, (err, result) => {
       console.log('isLocationPrivacyConfirmed: err:' + err + " result: " + result);
@@ -906,7 +906,7 @@ setLocationPrivacyConfirmStatus(type : LocationPrivacyType, isConfirmed : boolea
   | Promise&lt;boolean&gt; | 表示操作是否成功。 | 
 
 - 示例：
-    
+  
   ```
   geolocation.setLocationPrivacyConfirmStatus(1, true).then((result) => {
       console.log('promise, setLocationPrivacyConfirmStatus: ' + result);
diff --git a/zh-cn/application-dev/reference/apis/js-apis-media.md b/zh-cn/application-dev/reference/apis/js-apis-media.md
index 74a1d0b8f40b304115e2cf22f1de6520f76c4a9a..6a4e22478e61f31526cfd26beb260a035ec33e5a 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-media.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-media.md
@@ -1,5 +1,8 @@
 # 媒体服务
 
+> **说明：**
+> 本模块首批接口从API version 6开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+
 媒体子系统为开发者提供一套简单且易于理解的接口，使得开发者能够方便接入系统并使用系统的媒体资源。
 
 媒体子系统包含了音视频相关媒体业务，提供以下常用功能：
@@ -23,7 +26,7 @@ createAudioPlayer(): [AudioPlayer](#audioplayer)
 
 同步方式创建音频播放实例。
 
-
+**系统能力：** SystemCapability.Multimedia.Media.AudioPlayer
 
 **返回值：**
 
@@ -34,64 +37,7 @@ createAudioPlayer(): [AudioPlayer](#audioplayer)
 **示例：**
 
 ```js
-var audioPlayer = media.createAudioPlayer();
-```
-
-## media.createAudioPlayerAsync<sup>8+</sup>
-
-createAudioPlayerAsync(callback: AsyncCallback\<[AudioPlayer](#audioplayer)>): void
-
-异步方式创建音频播放实例。通过注册回调函数获取返回值。
-
-**参数：**
-
-| 参数名   | 类型                                       | 必填 | 说明                           |
-| -------- | ------------------------------------------ | ---- | ------------------------------ |
-| callback | AsyncCallback<[AudioPlayer](#audioplayer)> | 是   | 异步创建音频播放实例回调方法。 |
-
-**示例：**
-
-```js
-media.createAudioPlayerAsync((error, audio) => {
-   if (typeof(audio) != 'undefined') {
-       audioPlayer = audio;
-       console.info('audio createAudioPlayerAsync success');
-   } else {
-       console.info(`audio createAudioPlayerAsync fail, error:${error.message}`);
-   }
-});
-```
-
-## media.createAudioPlayerAsync<sup>8+</sup>
-
-createAudioPlayerAsync: Promise<[AudioPlayer](#audioplayer)>
-
-异步方式创建音频播放实例。通过Promise获取返回值。
-
-**返回值：**
-
-| 类型                                 | 说明                                |
-| ------------------------------------ | ----------------------------------- |
-| Promise<[AudioPlayer](#audioplayer)> | 异步创建音频播放实例Promise返回值。 |
-
-**示例：**
-
-```js
-function failureCallback(error) {
-    console.info(`audio failureCallback, error:${error.message}`);
-}
-function catchCallback(error) {
-    console.info(`audio catchCallback, error:${error.message}`);
-}
-
-await media.createAudioPlayerAsync.then((audio) => {
-    if (typeof(audio) != 'undefined') {
-       audioPlayer = audio;
-       console.info('audio createAudioPlayerAsync success');
-   } else {
-       console.info('audio createAudioPlayerAsync fail');
-   }
-}, failureCallback).catch(catchCallback);
+let audioPlayer = media.createAudioPlayer();
 ```
 
 ## media.createVideoPlayer<sup>8+</sup>
@@ -100,6 +46,8 @@ createVideoPlayer(callback: AsyncCallback\<[VideoPlayer](#videoplayer8)>): void
 
 异步方式创建视频播放实例，通过注册回调函数获取返回值。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名   | 类型                                        | 必填 | 说明                           |
@@ -109,6 +57,8 @@ createVideoPlayer(callback: AsyncCallback\<[VideoPlayer](#videoplayer8)>): void
 **示例：**
 
 ```js
+let videoPlayer
+
 media.createVideoPlayer((error, video) => {
    if (typeof(video) != 'undefined') {
        videoPlayer = video;
@@ -121,10 +71,12 @@ media.createVideoPlayer((error, video) => {
 
 ## media.createVideoPlayer<sup>8+</sup>
 
-createVideoPlayer: Promise<[VideoPlayer](#videoplayer8)>
+createVideoPlayer(): Promise<[VideoPlayer](#videoplayer8)>
 
 异步方式创建视频播放实例，通过Promise获取返回值。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **返回值：**
 
 | 类型                                  | 说明                                |
@@ -134,6 +86,8 @@ createVideoPlayer: Promise<[VideoPlayer](#videoplayer8)>
 **示例：**
 
 ```js
+let videoPlayer
+
 function failureCallback(error) {
     console.info(`video failureCallback, error:${error.message}`);
 }
@@ -157,6 +111,8 @@ createAudioRecorder(): AudioRecorder
 
 创建音频录制的实例来控制音频的录制。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioRecorder
+
 **返回值:**
 
 | 类型                            | 说明                                      |
@@ -169,103 +125,54 @@ createAudioRecorder(): AudioRecorder
 let audiorecorder = media.createAudioRecorder(); 
 ```
 
-## media.createAudioRecorderAsync<sup>8+</sup>
-
-createAudioRecorderAsync(callback: AsyncCallback\<[AudioRecorder](#audiorecorder)>): void
-
-异步方式创建音频录制实例。通过注册回调函数获取返回值。
-
-**参数：**
+## media.createVideoRecorder<sup>8+</sup>
 
-| 参数名   | 类型                                           | 必填 | 说明                           |
-| -------- | ---------------------------------------------- | ---- | ------------------------------ |
-| callback | AsyncCallback<[AudioRecorder](#audiorecorder)> | 是   | 异步创建音频录制实例回调方法。 |
-
-**示例：**
-
-```js
-media.createAudioRecorderAsync((error, audio) => {
-   if (typeof(audio) != 'undefined') {
-       audioRecorder = audio;
-       console.info('audio createAudioRecorderAsync success');
-   } else {
-       console.info(`audio createAudioRecorderAsync fail, error:${error.message}`);
-   }
-});
-```
-
-## media.createAudioRecorderAsync<sup>8+</sup>
-
-createAudioRecorderAsync: Promise<[AudioRecorder](#audiorecorder)>
-
-异步方式创建音频录制实例。通过Promise获取返回值。
-
-**返回值：**
-
-| 类型                                     | 说明                                |
-| ---------------------------------------- | ----------------------------------- |
-| Promise<[AudioRecorder](#audiorecorder)> | 异步创建音频录制实例Promise返回值。 |
-
-**示例：**
-
-```js
-function failureCallback(error) {
-    console.info(`audio failureCallback, error:${error.message}`);
-}
-function catchCallback(error) {
-    console.info(`audio catchCallback, error:${error.message}`);
-}
-
-await media.createAudioRecorderAsync.then((audio) => {
-    if (typeof(audio) != 'undefined') {
-       audioRecorder = audio;
-       console.info('audio createAudioRecorderAsync success');
-   } else {
-       console.info('audio createAudioRecorderAsync fail');
-   }
-}, failureCallback).catch(catchCallback);
-```
-
-## media.createVideoRecorderAsync<sup>8+</sup>
-
-createVideoRecorderAsync(callback: AsyncCallback\<[VideoRecorder](#videorecorder8)>): void
+createVideoRecorder(callback: AsyncCallback\<[VideoRecorder](#videorecorder8)>): void
 
 异步方式创建视频录制实例。通过注册回调函数获取返回值。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoRecorder
+
 **参数：**
 
-| 参数名   | 类型                                                        | 必填 | 说明                           |
-| -------- | ----------------------------------------------------------- | ---- | ------------------------------ |
+| 参数名   | 类型                                            | 必填 | 说明                           |
+| -------- | ----------------------------------------------- | ---- | ------------------------------ |
 | callback | AsyncCallback<[VideoRecorder](#videorecorder8)> | 是   | 异步创建视频录制实例回调方法。 |
 
 **示例：**
 
 ```js
-media.createVideoRecorderAsync((error, video) => {
+let videoRecorder
+
+media.createVideoRecorder((error, video) => {
    if (typeof(video) != 'undefined') {
        videoRecorder = video;
-       console.info('video createVideoRecorderAsync success');
+       console.info('video createVideoRecorder success');
    } else {
-       console.info(`video createVideoRecorderAsync fail, error:${error.message}`);
+       console.info(`video createVideoRecorder fail, error:${error.message}`);
    }
 });
 ```
 
-## media.createVideoRecorderAsync<sup>8+</sup>
+## media.createVideoRecorder<sup>8+</sup>
 
-createVideoRecorderAsync: Promise<[VideoRecorder](#videorecorder8)>
+createVideoRecorder(): Promise<[VideoRecorder](#videorecorder8)>
 
 异步方式创建视频录制实例。通过Promise获取返回值。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoRecorder
+
 **返回值：**
 
-| 类型                                                  | 说明                                |
-| ----------------------------------------------------- | ----------------------------------- |
+| 类型                                      | 说明                                |
+| ----------------------------------------- | ----------------------------------- |
 | Promise<[VideoRecorder](#videorecorder8)> | 异步创建视频录制实例Promise返回值。 |
 
 **示例：**
 
 ```js
+let videoRecorder
+
 function failureCallback(error) {
     console.info(`video failureCallback, error:${error.message}`);
 }
@@ -273,12 +180,12 @@ function catchCallback(error) {
     console.info(`video catchCallback, error:${error.message}`);
 }
 
-await media.createVideoRecorderAsync.then((video) => {
+await media.createVideoRecorder.then((video) => {
     if (typeof(video) != 'undefined') {
        videoRecorder = video;
-       console.info('video createVideoRecorderAsync success');
+       console.info('video createVideoRecorder success');
    } else {
-       console.info('video createVideoRecorderAsync fail');
+       console.info('video createVideoRecorder fail');
    }
 }, failureCallback).catch(catchCallback);
 ```
@@ -287,7 +194,9 @@ await media.createVideoRecorderAsync.then((video) => {
 
 ## MediaErrorCode<sup>8+</sup>
 
-媒体服务错误类型枚举
+媒体服务错误类型枚举。
+
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.Core。
 
 | 名称                       | 值   | 说明                                   |
 | -------------------------- | ---- | -------------------------------------- |
@@ -304,29 +213,33 @@ await media.createVideoRecorderAsync.then((video) => {
 
 ## MediaType<sup>8+</sup>
 
-媒体类型枚举
+媒体类型枚举。
+
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.Core。
 
-| 名称                | 值   | 说明               |
-| ------------------- | ---- | ------------------ |
-| MEDIA_TYPE_AUD      | 0    | 表示音频。         |
-| MEDIA_TYPE_VID      | 1    | 表示视频。         |
-| MEDIA_TYPE_SUBTITLE | 2    | 表示字幕：开发中。 |
+| 名称           | 值   | 说明       |
+| -------------- | ---- | ---------- |
+| MEDIA_TYPE_AUD | 0    | 表示音频。 |
+| MEDIA_TYPE_VID | 1    | 表示视频。 |
 
 ## CodecMimeType<sup>8+</sup>
 
-Codec MIME类型枚举
+Codec MIME类型枚举。
+
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.Core。
 
 | 名称         | 值                | 说明                     |
 | ------------ | ----------------- | ------------------------ |
 | VIDEO_MPEG4  | ”video/mp4v-es“   | 表示视频/mpeg4类型。     |
-| AUDIO_MPEG   | "audio/mpeg"      | 表示音频/mpeg类型。      |
 | AUDIO_AAC    | "audio/mp4a-latm" | 表示音频/mp4a-latm类型。 |
 | AUDIO_VORBIS | "audio/vorbis"    | 表示音频/vorbis类型。    |
 | AUDIO_FLAC   | "audio/flac"      | 表示音频/flac类型。      |
 
 ## MediaDescriptionKey<sup>8+</sup>
 
-媒体信息描述枚举
+媒体信息描述枚举。
+
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.Core。
 
 | 名称                     | 值              | 说明                                                         |
 | ------------------------ | --------------- | ------------------------------------------------------------ |
@@ -343,7 +256,9 @@ Codec MIME类型枚举
 
 ## BufferingInfoType<sup>8+</sup>
 
-缓存事件类型枚举
+缓存事件类型枚举。
+
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.Core。
 
 | 名称              | 值   | 说明                       |
 | ----------------- | ---- | -------------------------- |
@@ -354,15 +269,17 @@ Codec MIME类型枚举
 
 ## AudioPlayer
 
-音频播放管理类，用于管理和播放音频媒体。在调用AudioPlayer的方法前，需要先通过[createAudioPlayer()](#media.createaudioplayer)或[createAudioPlayerAsync()](#media.createaudioplayerasync8)构建一个[AudioPlayer](#audioplayer)实例。
+音频播放管理类，用于管理和播放音频媒体。在调用AudioPlayer的方法前，需要先通过[createAudioPlayer()](#mediacreateaudioplayer)构建一个[AudioPlayer](#audioplayer)实例。
 
 音频播放demo可参考：[音频播放开发指导](../../media/audio-playback.md)
 
 ### 属性<a name=audioplayer_属性></a>
 
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.AudioPlayer。
+
 | 名称        | 类型                      | 可读 | 可写 | 说明                                                         |
 | ----------- | ------------------------- | ---- | ---- | ------------------------------------------------------------ |
-| src         | string                    | 是   | 是   | 音频媒体URI，支持当前主流的音频格式(mp4、aac、mp3、ogg)。<br>**支持路径示例**：<br>1、本地绝对路径：file:///data/data/ohos.xxx.xxx/files/test.mp4<br>![zh-cn_image_0000001164217678](figures/zh-cn_image_0000001164217678.png)<br>2、http网络播放路径：开发中<br>3、hls网络播放路径：开发中<br>4、fd类型播放：开发中<br>**注意事项**：<br>媒体素材需至少赋予读权限后，才可正常播放 |
+| src         | string                    | 是   | 是   | 音频媒体URI，支持当前主流的音频格式(mp4、aac、mp3、ogg)。<br>**支持路径示例**：<br>1. fd类型播放：fd://xxx<br>![zh-cn_image_0000001164217678](figures/zh-cn_image_url.png)<br>2. http网络播放路径：开发中<br>3. hls网络播放路径：开发中<br>**注意事项**：<br>使用媒体素材需要获取读权限，否则无法正常播放。 |
 | loop        | boolean                   | 是   | 是   | 音频循环播放属性，设置为'true'表示循环播放。                 |
 | currentTime | number                    | 是   | 否   | 音频的当前播放位置。                                         |
 | duration    | number                    | 是   | 否   | 音频时长。                                                   |
@@ -374,6 +291,8 @@ play(): void
 
 开始播放音频资源，需在[dataLoad](#on('play' | 'pause' | 'stop' | 'reset' | 'dataload' | 'finish' | 'volumechange'))事件成功触发后，才能调用play方法。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioPlayer
+
 **示例：**
 
 ```js
@@ -389,6 +308,8 @@ pause(): void
 
 暂停播放音频资源。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioPlayer
+
 **示例：**
 
 ```js
@@ -404,6 +325,8 @@ stop(): void
 
 停止播放音频资源。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioPlayer
+
 **示例：**
 
 ```js
@@ -419,6 +342,8 @@ reset(): void
 
 切换播放音频资源。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioPlayer
+
 **示例：**
 
 ```js
@@ -434,6 +359,8 @@ seek(timeMs: number): void
 
 跳转到指定播放位置。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioPlayer
+
 **参数：**
 
 | 参数名 | 类型   | 必填 | 说明                           |
@@ -459,6 +386,8 @@ setVolume(vol: number): void
 
 设置音量。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioPlayer
+
 **参数：**
 
 | 参数名 | 类型   | 必填 | 说明                                                         |
@@ -480,6 +409,8 @@ release(): void
 
 释放音频资源。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioPlayer
+
 **示例：**
 
 ```js
@@ -493,6 +424,8 @@ getTrackDescription(callback: AsyncCallback<Array<[MediaDescription](#mediadescr
 
 通过回调方式获取音频轨道信息。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioPlayer
+
 **参数：**
 
 | 参数名   | 类型                                                         | 必填 | 说明                       |
@@ -527,6 +460,8 @@ getTrackDescription(): Promise<Array<[MediaDescription](#mediadescription8)>>
 
 通过Promise方式获取音频轨道信息。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioPlayer
+
 **返回值：**
 
 | 类型                                                   | 说明                            |
@@ -568,6 +503,8 @@ on(type: 'bufferingUpdate', callback: (infoType: [BufferingInfoType](#bufferingi
 
 开始订阅音频缓存更新事件。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioPlayer
+
 **参数：**
 
 | 参数名   | 类型                                                         | 必填 | 说明                                                         |
@@ -590,6 +527,8 @@ on(type: 'play' | 'pause' | 'stop' | 'reset' | 'dataLoad' | 'finish' | 'volumeCh
 
 开始订阅音频播放事件。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioPlayer
+
 **参数：**
 
 | 参数名   | 类型       | 必填 | 说明                                                         |
@@ -639,7 +578,19 @@ audioPlayer.on('error', (error) => {           //设置'error'事件回调
     console.info(`audio error called, errCode is ${error.code}`);
     console.info(`audio error called, errMessage is ${error.message}`);
 });
-audioPlayer.src = 'file:///data/data/ohos.xxx.xxx/files/test.mp4';  //设置src属性，并触发'dataLoad'事件回调
+
+// 用户选择视频设置fd(本地播放)
+let fdPath = 'fd://'
+let path = 'data/accounts/account_0/appdata/ohos.xxx.xxx.xxx/01.mp3';
+await fileIO.open(path).then(fdNumber) => {
+   fdPath = fdPath + '' + fdNumber;
+   console.info('open fd sucess fd is' + fdPath);
+}, (err) => {
+   console.info('open fd failed err is' + err);
+}),catch((err) => {
+   console.info('open fd failed err is' + err);
+});
+audioPlayer.src = fdPath;  //设置src属性，并触发'dataLoad'事件回调
 ```
 
 ### on('timeUpdate')
@@ -648,6 +599,8 @@ on(type: 'timeUpdate', callback: Callback\<number>): void
 
 开始订阅音频播放[seek()](#seek)时间更新事件。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioPlayer
+
 **参数：**
 
 | 参数名   | 类型              | 必填 | 说明                                                         |
@@ -674,6 +627,8 @@ on(type: 'error', callback: ErrorCallback): void
 
 开始订阅音频播放错误事件。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioPlayer
+
 **参数：**
 
 | 参数名   | 类型          | 必填 | 说明                                                         |
@@ -696,6 +651,8 @@ audioPlayer.setVolume(3);  //设置volume为无效值，触发'error'事件
 
 音频播放的状态机。可通过state属性获取当前状态。
 
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.AudioPlayer。
+
 | 名称               | 类型   | 描述           |
 | ------------------ | ------ | -------------- |
 | idle               | string | 音频播放空闲。 |
@@ -710,17 +667,19 @@ audioPlayer.setVolume(3);  //设置volume为无效值，触发'error'事件
 
 视频播放demo可参考：[视频播放开发指导](../../media/video-playback.md)
 
-### 属性<a name=videoplayer_属性></a><sup>8+</sup>
+### 属性<a name=videoplayer_属性></a>
+
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.VideoPlayer。
 
-| 名称        | 类型                               | 可读 | 可写 | 说明                                                         |
-| ----------- | ---------------------------------- | ---- | ---- | ------------------------------------------------------------ |
-| url         | string                             | 是   | 是   | 视频媒体URL，支持当前主流的视频格式(mp4、mpeg-ts、webm、mkv)。<br>**支持路径示例**：<br>1. 本地绝对路径：file:///data/data/ohos.xxx.xxx/files/test.mp4<br>![zh-cn_image_0000001164217678](figures/zh-cn_image_0000001164217678.png)<br>**注意事项**：<br>媒体素材需至少赋予读权限后，才可正常播放 |
-| loop        | boolean                            | 是   | 是   | 视频循环播放属性，设置为'true'表示循环播放。                 |
-| currentTime | number                             | 是   | 否   | 视频的当前播放位置。                                         |
-| duration    | number                             | 是   | 否   | 视频时长，返回-1表示直播模式                                 |
-| state       | [VideoPlayState](#videoplaystate8) | 是   | 否   | 视频播放的状态。                                             |
-| width       | number                             | 是   | 否   | 视频宽。                                                     |
-| height      | number                             | 是   | 否   | 视频高。                                                     |
+| 名称                     | 类型                               | 可读 | 可写 | 说明                                                         |
+| ------------------------ | ---------------------------------- | ---- | ---- | ------------------------------------------------------------ |
+| url<sup>8+</sup>         | string                             | 是   | 是   | 视频媒体URL，支持当前主流的视频格式(mp4、mpeg-ts、webm、mkv)。<br>**支持路径示例**：<br>1. fd类型播放：fd://xxx<br>![zh-cn_image_0000001164217678](figures/zh-cn_image_url.png)<br>**注意事项**：<br>使用媒体素材需要获取读权限，否则无法正常播放。 |
+| loop<sup>8+</sup>        | boolean                            | 是   | 是   | 视频循环播放属性，设置为'true'表示循环播放。                 |
+| currentTime<sup>8+</sup> | number                             | 是   | 否   | 视频的当前播放位置。                                         |
+| duration<sup>8+</sup>    | number                             | 是   | 否   | 视频时长，返回-1表示直播模式。                               |
+| state<sup>8+</sup>       | [VideoPlayState](#videoplaystate8) | 是   | 否   | 视频播放的状态。                                             |
+| width<sup>8+</sup>       | number                             | 是   | 否   | 视频宽。                                                     |
+| height<sup>8+</sup>      | number                             | 是   | 否   | 视频高。                                                     |
 
 ### setDisplaySurface<sup>8+</sup>
 
@@ -728,6 +687,8 @@ setDisplaySurface(surfaceId: string, callback: AsyncCallback\<void>): void
 
 通过回调方式设置SurfaceId。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名    | 类型     | 必填 | 说明                      |
@@ -753,6 +714,8 @@ setDisplaySurface(surfaceId: string): Promise\<void>
 
 通过Promise方式设置SurfaceId。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名    | 类型   | 必填 | 说明      |
@@ -785,6 +748,8 @@ prepare(callback: AsyncCallback\<void>): void
 
 通过回调方式准备播放视频。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名   | 类型     | 必填 | 说明                     |
@@ -809,6 +774,8 @@ prepare(): Promise\<void>
 
 通过Promise方式准备播放视频。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **返回值：**
 
 | 类型           | 说明                          |
@@ -835,6 +802,8 @@ play(callback: AsyncCallback\<void>): void;
 
 通过回调方式开始播放视频。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名   | 类型     | 必填 | 说明                     |
@@ -859,6 +828,8 @@ play(): Promise\<void>;
 
 通过Promise方式开始播放视频。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **返回值：**
 
 | 类型           | 说明                          |
@@ -885,6 +856,8 @@ pause(callback: AsyncCallback\<void>): void
 
 通过回调方式暂停播放视频。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名   | 类型     | 必填 | 说明                     |
@@ -909,6 +882,8 @@ pause(): Promise\<void>
 
 通过Promise方式暂停播放视频。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **返回值：**
 
 | 类型           | 说明                          |
@@ -935,6 +910,8 @@ stop(callback: AsyncCallback\<void>): void
 
 通过回调方式停止播放视频。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名   | 类型     | 必填 | 说明                     |
@@ -959,6 +936,8 @@ stop(): Promise\<void>
 
 通过Promise方式停止播放视频。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **返回值：**
 
 | 类型           | 说明                          |
@@ -985,6 +964,8 @@ reset(callback: AsyncCallback\<void>): void
 
 通过回调方式切换播放视频。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名   | 类型     | 必填 | 说明                     |
@@ -1009,6 +990,8 @@ reset(): Promise\<void>
 
 通过Promise方式切换播放视频。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **返回值：**
 
 | 类型           | 说明                          |
@@ -1035,6 +1018,8 @@ seek(timeMs: number, callback: AsyncCallback\<number>): void
 
 通过回调方式跳转到指定播放位置，默认跳转到指定时间点的下一个关键帧。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名   | 类型     | 必填 | 说明                           |
@@ -1060,6 +1045,8 @@ seek(timeMs: number, mode:SeekMode, callback: AsyncCallback\<number>): void
 
 通过回调方式跳转到指定播放位置。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名   | 类型     | 必填 | 说明                                     |
@@ -1086,6 +1073,8 @@ seek(timeMs: number, mode?:SeekMode): Promise\<number>
 
 通过Promise方式跳转到指定播放位置，如果没有设置mode则跳转到指定时间点的下一个关键帧。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名 | 类型     | 必填 | 说明                                   |
@@ -1123,6 +1112,8 @@ setVolume(vol: number, callback: AsyncCallback\<void>): void
 
 通过回调方式设置音量。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名   | 类型     | 必填 | 说明                                                         |
@@ -1148,6 +1139,8 @@ setVolume(vol: number): Promise\<void>
 
 通过Promise方式设置音量。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名 | 类型   | 必填 | 说明                                                         |
@@ -1180,6 +1173,8 @@ release(callback: AsyncCallback\<void>): void
 
 通过回调方式释放视频资源。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名   | 类型     | 必填 | 说明                     |
@@ -1204,6 +1199,8 @@ release(): Promise\<void>
 
 通过Promise方式释放视频资源。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **返回值：**
 
 | 类型           | 说明                          |
@@ -1226,10 +1223,12 @@ await videoPlayer.release().then() => {
 
 ### getTrackDescription<sup>8+</sup>
 
-getTrackDescription(callback: AsyncCallback<Array<[MediaDescription](#mediadescription8>>)>>): void
+getTrackDescription(callback: AsyncCallback<Array<[MediaDescription](#mediadescription8)>>): void
 
 通过回调方式获取视频轨道信息。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名   | 类型     | 必填 | 说明                       |
@@ -1260,15 +1259,17 @@ videoPlayer.getTrackDescription((error, arrlist) => {
 
 ### getTrackDescription<sup>8+</sup>
 
-getTrackDescription(): Promise<Array<[MediaDescription](#mediadescription8>>)>>
+getTrackDescription(): Promise<Array<[MediaDescription](#mediadescription8)>>
 
 通过Promise方式获取视频轨道信息。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **返回值：**
 
-| 类型                                                     | 说明                            |
-| -------------------------------------------------------- | ------------------------------- |
-| Promise<Array<[MediaDescription](#mediadescription8>>)>> | 获取视频轨道信息Promise返回值。 |
+| 类型                                                   | 说明                            |
+| ------------------------------------------------------ | ------------------------------- |
+| Promise<Array<[MediaDescription](#mediadescription8)>> | 获取视频轨道信息Promise返回值。 |
 
 **示例：**
 
@@ -1306,6 +1307,8 @@ setSpeed(speed:number, callback: AsyncCallback\<number>): void
 
 通过回调方式设置播放速度。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名   | 类型     | 必填 | 说明                                                       |
@@ -1331,6 +1334,8 @@ setSpeed(speed:number): Promise\<number>
 
 通过Promise方式设置播放速度。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名 | 类型   | 必填 | 说明                                                       |
@@ -1357,6 +1362,8 @@ on(type: 'playbackCompleted', callback: Callback\<void>): void
 
 开始监听视频播放完成事件。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名   | 类型     | 必填 | 说明                                                        |
@@ -1378,6 +1385,8 @@ on(type: 'bufferingUpdate', callback: (infoType: BufferingInfoType, value: numbe
 
 开始监听视频缓存更新事件。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名   | 类型     | 必填 | 说明                                                         |
@@ -1400,6 +1409,8 @@ on(type: 'startRenderFrame', callback: Callback\<void>): void
 
 开始监听视频播放首帧送显上报事件。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名   | 类型     | 必填 | 说明                                                         |
@@ -1421,6 +1432,8 @@ on(type: 'videoSizeChanged', callback: (width: number, height: number) => void):
 
 开始监听视频播放宽高变化事件。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名   | 类型     | 必填 | 说明                                                         |
@@ -1443,6 +1456,8 @@ on(type: 'error', callback: ErrorCallback): void
 
 开始监听视频播放错误事件。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoPlayer
+
 **参数：**
 
 | 参数名   | 类型     | 必填 | 说明                                                         |
@@ -1465,6 +1480,8 @@ videoPlayer.setVolume(3);  //设置volume为无效值，触发'error'事件
 
 视频播放的状态机，可通过state属性获取当前状态。
 
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.VideoPlayer。
+
 | 名称     | 类型   | 描述           |
 | -------- | ------ | -------------- |
 | idle     | string | 视频播放空闲。 |
@@ -1478,17 +1495,19 @@ videoPlayer.setVolume(3);  //设置volume为无效值，触发'error'事件
 
 视频播放的Seek模式枚举，可通过seek方法作为参数传递下去。
 
-| 名称              | 值   | 描述                                                         |
-| ----------------- | ---- | ------------------------------------------------------------ |
-| SEEK_NEXT_SYNC    | 0    | 表示跳转到指定时间点的下一个关键帧，建议向后快进的时候用这个枚举值 |
-| SEEK_PREV_SYNC    | 1    | 表示跳转到指定时间点的上一个关键帧，建议向前快进的时候用这个枚举值 |
-| SEEK_CLOSEST_SYNC | 2    | 表示跳转到指定时间点最近的关键帧。                           |
-| SEEK_CLOSEST      | 3    | 表示精确跳转到指定时间点。                                   |
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.Core。
+
+| 名称           | 值   | 描述                                                         |
+| -------------- | ---- | ------------------------------------------------------------ |
+| SEEK_NEXT_SYNC | 0    | 表示跳转到指定时间点的下一个关键帧，建议向后快进的时候用这个枚举值。 |
+| SEEK_PREV_SYNC | 1    | 表示跳转到指定时间点的上一个关键帧，建议向前快进的时候用这个枚举值。 |
 
 ## PlaybackSpeed<sup>8+</sup>
 
 视频播放的倍速枚举，可通过setSpeed方法作为参数传递下去。
 
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.VideoPlayer。
+
 | 名称                 | 值   | 描述                           |
 | -------------------- | ---- | ------------------------------ |
 | SPEED_FORWARD_0_75_X | 0    | 表示视频播放正常播速的0.75倍。 |
@@ -1499,9 +1518,11 @@ videoPlayer.setVolume(3);  //设置volume为无效值，触发'error'事件
 
 ## MediaDescription<sup>8+</sup>
 
-### [key : string] : any
+### [key : string] : Object
 
-通过key-value方式获取媒体信息
+通过key-value方式获取媒体信息。
+
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.Core。
 
 | 名称  | 类型   | 说明                                                         |
 | ----- | ------ | ------------------------------------------------------------ |
@@ -1530,7 +1551,7 @@ audioPlayer.getTrackDescription((error, arrlist) => {
 
 ## AudioRecorder
 
-音频录制管理类，用于录制音频媒体。在调用AudioRecorder的方法前，需要先通过[createAudioRecorder()](#media.createaudiorecorder) 或[createAudioRecorderAsync()](#media.createaudiorecorderasync8)构建一个[AudioRecorder](#audiorecorder)实例。
+音频录制管理类，用于录制音频媒体。在调用AudioRecorder的方法前，需要先通过[createAudioRecorder()](#media.createaudiorecorder) 构建一个[AudioRecorder](#audiorecorder)实例。
 
 音频录制demo可参考：[音频录制开发指导](../../media/audio-recorder.md)
 
@@ -1540,6 +1561,10 @@ prepare(config: AudioRecorderConfig): void
 
 录音准备。
 
+**需要权限：** ohos.permission.MICROPHONE
+
+**系统能力：** SystemCapability.Multimedia.Media.AudioRecorder
+
 **参数：**
 
 | 参数名 | 类型                                        | 必填 | 说明                                                         |
@@ -1555,7 +1580,7 @@ let audioRecorderConfig = {
     audioSampleRate : 22050,
     numberOfChannels : 2,
     format : media.AudioOutputFormat.AAC_ADTS,
-    uri : 'file:///data/accounts/account_0/appdata/appdata/recorder/test.m4a',       // 文件需先由调用者创建，并给予适当的权限
+    uri : 'fd://1',       // 文件需先由调用者创建，并给予适当的权限
     location : { latitude : 30, longitude : 130},
 }
 audioRecorder.on('prepare', () => {    //设置'prepare'事件回调
@@ -1571,6 +1596,8 @@ start(): void
 
 开始录制，需在[prepare](#audiorecorder_on)事件成功触发后，才能调用start方法。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioRecorder
+
 **示例：**
 
 ```js
@@ -1586,6 +1613,8 @@ pause():void
 
 暂停录制，需要在[start](#audiorecorder_on)事件成功触发后，才能调用pause方法。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioRecorder
+
 **示例：**
 
 ```js
@@ -1601,6 +1630,8 @@ resume():void
 
 暂停录制，需要在[pause](#audiorecorder_on)事件成功触发后，才能调用resume方法。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioRecorder
+
 **示例：**
 
 ```js
@@ -1616,6 +1647,8 @@ stop(): void
 
 停止录音。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioRecorder
+
 **示例：**
 
 ```js
@@ -1631,6 +1664,8 @@ release(): void
 
 释放录音资源。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioRecorder
+
 **示例：**
 
 ```js
@@ -1649,6 +1684,8 @@ reset(): void
 
 进行重置录音之前，需要先调用[stop()](#audiorecorder_stop)停止录音。重置录音之后，需要调用[prepare()](#audiorecorder_prepare)设置录音参数项，才能再次进行录音。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioRecorder
+
 **示例：**
 
 ```js
@@ -1664,6 +1701,8 @@ on(type: 'prepare' | 'start' | 'pause' | 'resume' | 'stop' | 'release' | 'reset'
 
 开始订阅音频录制事件。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioRecorder
+
 **参数：**
 
 | 参数名   | 类型     | 必填 | 说明                                                         |
@@ -1681,7 +1720,7 @@ let audioRecorderConfig = {
     audioSampleRate : 22050,
     numberOfChannels : 2,
     format : media.AudioOutputFormat.AAC_ADTS,
-    uri : 'file:///data/accounts/account_0/appdata/appdata/recorder/test.m4a',  // 文件需先由调用者创建，并给予适当的权限
+    uri : 'fd://xx',                                                            // 文件需先由调用者创建，并给予适当的权限
     location : { latitude : 30, longitude : 130},
 }
 audioRecorder.on('error', (error) => {             								// 设置'error'事件回调
@@ -1720,6 +1759,8 @@ on(type: 'error', callback: ErrorCallback): void
 
 开始订阅音频录制错误事件。
 
+**系统能力：** SystemCapability.Multimedia.Media.AudioRecorder
+
 **参数：**
 
 | 参数名   | 类型          | 必填 | 说明                                                         |
@@ -1742,6 +1783,8 @@ audioRecorder.prepare();  												// prepare不设置参数，触发'error'
 
 表示音频的录音配置。
 
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.AudioRecorder。
+
 | 名称                  | 参数类型                                | 必填 | 说明                                                         |
 | --------------------- | --------------------------------------- | ---- | ------------------------------------------------------------ |
 | audioEncoder          | [AudioEncoder](#audioencoder)           | 否   | 音频编码格式，默认设置为AAC_LC。                             |
@@ -1750,52 +1793,60 @@ audioRecorder.prepare();  												// prepare不设置参数，触发'error'
 | numberOfChannels      | number                                  | 否   | 音频采集声道数，默认值为2。                                  |
 | format                | [AudioOutputFormat](#audiooutputformat) | 否   | 音量输出封装格式，默认设置为MPEG_4。                         |
 | location<sup>8+</sup> | [Location](#location8)                  | 否   | 音频采集的地理位置。                                         |
-| uri                   | string                                  | 是   | 音频输出URI。支持：<br/>1.&nbsp;文件的绝对路径：file:///data/data/ohos.xxx.xxx/cache/test.mp4![zh-cn_image_0000001164217678](figures/zh-cn_image_0000001164217678.png)<br/>2.&nbsp;文件的fd路径：file://1&nbsp;(fd&nbsp;number)<br/> 文件需要由调用者创建，并赋予适当的权限。 |
+| uri                   | string                                  | 是   | 视频输出URI：fd://xx&nbsp;(fd&nbsp;number)<br/>![zh-cn_image_0000001164217678](figures/zh-cn_image_url.png) <br/>文件需要由调用者创建，并赋予适当的权限。 |
 
 
 ## AudioEncoder
 
 表示音频编码格式的枚举。
 
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.AudioRecorder。
+
 | 名称    | 默认值 | 说明                                                         |
 | ------- | ------ | ------------------------------------------------------------ |
-| DEFAULT | 0      | Default audio encoding format is AMR_NB。本接口在OpenHarmony 3.1 Release版本仅为接口定义，暂不支持使用。接口将在OpenHarmony 3.1 MR版本中提供使用支持。<br/>**系统能力：**SystemCapability.Multimedia.Media.AudioRecorder |
-| AMR_NB  | 1      | AMR-NB(Adaptive Multi Rate-Narrow Band Speech Codec) 编码格式。本接口在OpenHarmony 3.1 Release版本仅为接口定义，暂不支持使用。接口将在OpenHarmony 3.1 MR版本中提供使用支持。<br/>**系统能力：**SystemCapability.Multimedia.Media.AudioRecorder |
-| AMR_WB  | 2      | AMR-WB(Adaptive Multi Rate-Wide Band Speech Codec) 编码格式。本接口在OpenHarmony 3.1 Release版本仅为接口定义，暂不支持使用。接口将在OpenHarmony 3.1 MR版本中提供使用支持。<br/>**系统能力：**SystemCapability.Multimedia.Media.AudioRecorder |
-| AAC_LC  | 3      | AAC-LC（Advanced&nbsp;Audio&nbsp;Coding&nbsp;Low&nbsp;Complexity）编码格式。<br/>**系统能力：**SystemCapability.Multimedia.Media.AudioRecorder |
-| HE_AAC  | 4      | HE_AAC（High-Efficiency Advanced&nbsp;Audio&nbsp;Coding）编码格式。本接口在OpenHarmony 3.1 Release版本仅为接口定义，暂不支持使用。接口将在OpenHarmony 3.1 MR版本中提供使用支持。<br/>**系统能力：**SystemCapability.Multimedia.Media.AudioRecorder |
+| DEFAULT | 0      | Default audio encoding format is AMR_NB。<br/>本接口在OpenHarmony 3.1 Release版本仅为接口定义，暂不支持使用。接口将在OpenHarmony 3.1 MR版本中提供使用支持。 |
+| AMR_NB  | 1      | AMR-NB(Adaptive Multi Rate-Narrow Band Speech Codec) 编码格式。<br/>本接口在OpenHarmony 3.1 Release版本仅为接口定义，暂不支持使用。接口将在OpenHarmony 3.1 MR版本中提供使用支持。 |
+| AMR_WB  | 2      | AMR-WB(Adaptive Multi Rate-Wide Band Speech Codec) 编码格式。<br/>本接口在OpenHarmony 3.1 Release版本仅为接口定义，暂不支持使用。接口将在OpenHarmony 3.1 MR版本中提供使用支持。 |
+| AAC_LC  | 3      | AAC-LC（Advanced&nbsp;Audio&nbsp;Coding&nbsp;Low&nbsp;Complexity）编码格式。 |
+| HE_AAC  | 4      | HE_AAC（High-Efficiency Advanced&nbsp;Audio&nbsp;Coding）编码格式。<br/>本接口在OpenHarmony 3.1 Release版本仅为接口定义，暂不支持使用。接口将在OpenHarmony 3.1 MR版本中提供使用支持。 |
 
 
 ## AudioOutputFormat
 
 表示音频封装格式的枚举。
 
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.AudioRecorder。
+
 | 名称     | 默认值 | 说明                                                         |
 | -------- | ------ | ------------------------------------------------------------ |
-| DEFAULT  | 0      | 默认封装格式为MPEG-4。本接口在OpenHarmony 3.1 Release版本仅为接口定义，暂不支持使用。接口将在OpenHarmony 3.1 MR版本中提供使用支持。<br/>**系统能力：**SystemCapability.Multimedia.Media.AudioRecorder |
-| MPEG_4   | 2      | 封装为MPEG-4格式。<br/>**系统能力：**SystemCapability.Multimedia.Media.AudioRecorder |
-| AMR_NB   | 3      | 封装为AMR_NB格式。本接口在OpenHarmony 3.1 Release版本仅为接口定义，暂不支持使用。接口将在OpenHarmony 3.1 MR版本中提供使用支持。<br/>**系统能力：**SystemCapability.Multimedia.Media.AudioRecorder |
-| AMR_WB   | 4      | 封装为AMR_WB格式。本接口在OpenHarmony 3.1 Release版本仅为接口定义，暂不支持使用。接口将在OpenHarmony 3.1 MR版本中提供使用支持。<br/>**系统能力：**SystemCapability.Multimedia.Media.AudioRecorder |
-| AAC_ADTS | 6      | 封装为ADTS（Audio&nbsp;Data&nbsp;Transport&nbsp;Stream）格式，是AAC音频的传输流格式。<br/>**系统能力：**SystemCapability.Multimedia.Media.AudioRecorder |
+| DEFAULT  | 0      | 默认封装格式为MPEG-4。<br/>本接口在OpenHarmony 3.1 Release版本仅为接口定义，暂不支持使用。接口将在OpenHarmony 3.1 MR版本中提供使用支持。 |
+| MPEG_4   | 2      | 封装为MPEG-4格式。                                           |
+| AMR_NB   | 3      | 封装为AMR_NB格式。<br/>本接口在OpenHarmony 3.1 Release版本仅为接口定义，暂不支持使用。接口将在OpenHarmony 3.1 MR版本中提供使用支持。 |
+| AMR_WB   | 4      | 封装为AMR_WB格式。<br/>本接口在OpenHarmony 3.1 Release版本仅为接口定义，暂不支持使用。接口将在OpenHarmony 3.1 MR版本中提供使用支持。 |
+| AAC_ADTS | 6      | 封装为ADTS（Audio&nbsp;Data&nbsp;Transport&nbsp;Stream）格式，是AAC音频的传输流格式。 |
 
 ## VideoRecorder<sup>8+</sup>
 
-视频录制管理类，用于录制视频媒体。在调用VideoRecorder的方法前，需要先通过[createVideoRecorderAsync()](#media.createvideorecorderasync8)构建一个[VideoRecorder](#videorecorder8)实例。
+视频录制管理类，用于录制视频媒体。在调用VideoRecorder的方法前，需要先通过[createVideoRecorder()](#media.createvideorecorder8)构建一个[VideoRecorder](#videorecorder8)实例。
 
 视频录制demo可参考：[视频录制开发指导](../../media/video-recorder.md)
 
 ### 属性
 
-| 名称  | 类型                                  | 可读 | 可写 | 说明             |
-| ----- | ------------------------------------- | ---- | ---- | ---------------- |
-| state | [VideoRecordState](#videorecordstate) | 是   | 否   | 视频录制的状态。 |
+| 名称               | 类型                                  | 可读 | 可写 | 说明             |
+| ------------------ | ------------------------------------- | ---- | ---- | ---------------- |
+| state<sup>8+</sup> | [VideoRecordState](#videorecordstate) | 是   | 否   | 视频录制的状态。 |
 
-### prepare<a name=videorecorder_prepare1></a>
+### prepare<sup>8+</sup><a name=videorecorder_prepare1></a>
 
 prepare(config: VideoRecorderConfig, callback: AsyncCallback\<void>): void;
 
 异步方式进行视频录制的参数设置。通过注册回调函数获取返回值。
 
+**需要权限：** ohos.permission.MICROPHONE ohos.permission.CAMERA
+
+**系统能力：** SystemCapability.Multimedia.Media.VideoRecorder
+
 **参数：**
 
 | 参数名   | 类型                                        | 必填 | 说明                                |
@@ -1823,7 +1874,7 @@ let videoConfig = {
     audioSourceType : 1,
     videoSourceType : 0,
     profile : videoProfile,
-    url : 'file:///data/accounts/account_0/appdata/appdata/recorder/test.mp4',   // 文件需先由调用者创建，并给予适当的权限
+    url : 'fd://xx',   // 文件需先由调用者创建，并给予适当的权限
     orientationHint : 0,
     location : { latitude : 30, longitude : 130 },
 }
@@ -1854,12 +1905,16 @@ media.createVideoRecorder((err, recorder) => {
 });
 ```
 
-### prepare<a name=videorecorder_prepare2></a>
+### prepare<sup>8+</sup><a name=videorecorder_prepare2></a>
 
 prepare(config: VideoRecorderConfig): Promise\<void>;
 
 异步方式进行视频录制的参数设置。通过Promise获取返回值。
 
+**需要权限：** ohos.permission.MICROPHONE ohos.permission.CAMERA
+
+**系统能力：** SystemCapability.Multimedia.Media.VideoRecorder
+
 **参数：**
 
 | 参数名 | 类型                                        | 必填 | 说明                     |
@@ -1892,7 +1947,7 @@ let videoConfig = {
     audioSourceType : 1,
     videoSourceType : 0,
     profile : videoProfile,
-    url : 'file:///data/accounts/account_0/appdata/appdata/recorder/test.mp4',   // 文件需先由调用者创建，并给予适当的权限
+    url : 'fd://xx',   // 文件需先由调用者创建，并给予适当的权限
     orientationHint : 0,
     location : { latitude : 30, longitude : 130 },
 }
@@ -1921,7 +1976,7 @@ await videoRecorder.prepare(videoConfig).then(() => {
 });
 ```
 
-### getInputSurface
+### getInputSurface<sup>8+</sup>
 
 getInputSurface(callback: AsyncCallback\<string>): void;
 
@@ -1931,6 +1986,8 @@ getInputSurface(callback: AsyncCallback\<string>): void;
 
 只能在[prepare()](#videorecorder_prepare1)接口调用后调用。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoRecorder
+
 **参数：**
 
 | 参数名   | 类型                   | 必填 | 说明                        |
@@ -1952,7 +2009,7 @@ videoRecorder.getInputSurface((err, surfaceId) => {
 });
 ```
 
-### getInputSurface
+### getInputSurface<sup>8+</sup>
 
 getInputSurface(): Promise\<string>;
 
@@ -1962,6 +2019,8 @@ getInputSurface(): Promise\<string>;
 
 只能在[prepare()](#videorecorder_prepare1)接口调用后调用。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoRecorder
+
 **返回值：**
 
 | 类型             | 说明                             |
@@ -1983,13 +2042,15 @@ await videoRecorder.getInputSurface().then((surfaceId) => {
 });
 ```
 
-### start<a name=videorecorder_start1></a>
+### start<sup>8+</sup><a name=videorecorder_start1></a>
 
 start(callback: AsyncCallback\<void>): void;
 
 异步方式开始视频录制。通过注册回调函数获取返回值。
 
-在[prepare()](#videorecorder_prepare1)和[getInputSurface()](#getinputsurface)后调用，需要依赖数据源先给surface传递数据。
+在[prepare()](#videorecorder_prepare1)和[getInputSurface()](#getinputsurface8)后调用，需要依赖数据源先给surface传递数据。
+
+**系统能力：** SystemCapability.Multimedia.Media.VideoRecorder
 
 **参数：**
 
@@ -2010,13 +2071,15 @@ videoRecorder.start((err) => {
 });
 ```
 
-### start<a name=videorecorder_start2></a>
+### start<sup>8+</sup><a name=videorecorder_start2></a>
 
 start(): Promise\<void>;
 
 异步方式开始视频录制。通过Promise获取返回值。
 
-在[prepare()](#videorecorder_prepare1)和[getInputSurface()](#getinputsurface)后调用，需要依赖数据源先给surface传递数据。
+在[prepare()](#videorecorder_prepare1)和[getInputSurface()](#getinputsurface8)后调用，需要依赖数据源先给surface传递数据。
+
+**系统能力：** SystemCapability.Multimedia.Media.VideoRecorder
 
 **返回值：**
 
@@ -2037,7 +2100,7 @@ await videoRecorder.start().then(() => {
 });
 ```
 
-### pause<a name=videorecorder_pause1></a>
+### pause<sup>8+</sup><a name=videorecorder_pause1></a>
 
 pause(callback: AsyncCallback\<void>): void;
 
@@ -2045,6 +2108,8 @@ pause(callback: AsyncCallback\<void>): void;
 
 在[start()](#videorecorder_start1)后调用。可以通过调用[resume()](#videorecorder_resume1)接口来恢复录制。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoRecorder
+
 **参数：**
 
 | 参数名   | 类型                 | 必填 | 说明                         |
@@ -2064,7 +2129,7 @@ videoRecorder.pause((err) => {
 });
 ```
 
-### pause<a name=videorecorder_pause2></a>
+### pause<sup>8+</sup><a name=videorecorder_pause2></a>
 
 pause(): Promise\<void>;
 
@@ -2072,6 +2137,8 @@ pause(): Promise\<void>;
 
 在[start()](#videorecorder_start1)后调用。可以通过调用[resume()](#videorecorder_resume1)接口来恢复录制。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoRecorder
+
 **返回值：**
 
 | 类型           | 说明                                  |
@@ -2091,12 +2158,14 @@ await videoRecorder.pause().then(() => {
 });
 ```
 
-### resume<a name=videorecorder_resume1></a>
+### resume<sup>8+</sup><a name=videorecorder_resume1></a>
 
 resume(callback: AsyncCallback\<void>): void;
 
 异步方式恢复视频录制。通过注册回调函数获取返回值。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoRecorder
+
 **参数：**
 
 | 参数名   | 类型                 | 必填 | 说明                         |
@@ -2116,12 +2185,14 @@ videoRecorder.resume((err) => {
 });
 ```
 
-### resume<a name=videorecorder_resume2></a>
+### resume<sup>8+</sup><a name=videorecorder_resume2></a>
 
 resume(): Promise\<void>;
 
 异步方式恢复视频录制。通过Promise获取返回值。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoRecorder
+
 **返回值：**
 
 | 类型           | 说明                                  |
@@ -2141,13 +2212,15 @@ await videoRecorder.resume().then(() => {
 });
 ```
 
-### stop<a name=videorecorder_stop1></a>
+### stop<sup>8+</sup><a name=videorecorder_stop1></a>
 
 stop(callback: AsyncCallback\<void>): void;
 
 异步方式停止视频录制。通过注册回调函数获取返回值。
 
-需要重新调用[prepare()](#videorecorder_prepare1)和[getInputSurface()](#getinputsurface)接口才能重新录制。
+需要重新调用[prepare()](#videorecorder_prepare1)和[getInputSurface()](#getinputsurface8)接口才能重新录制。
+
+**系统能力：** SystemCapability.Multimedia.Media.VideoRecorder
 
 **参数：**
 
@@ -2168,13 +2241,15 @@ videoRecorder.stop((err) => {
 });
 ```
 
-### stop<a name=videorecorder_stop2></a>
+### stop<sup>8+</sup><a name=videorecorder_stop2></a>
 
 stop(): Promise\<void>;
 
 异步方式停止视频录制。通过Promise获取返回值。
 
-需要重新调用[prepare()](#videorecorder_prepare1)和[getInputSurface()](#getinputsurface)接口才能重新录制。
+需要重新调用[prepare()](#videorecorder_prepare1)和[getInputSurface()](#getinputsurface8)接口才能重新录制。
+
+**系统能力：** SystemCapability.Multimedia.Media.VideoRecorder
 
 **返回值：**
 
@@ -2195,12 +2270,14 @@ await videoRecorder.stop().then(() => {
 });
 ```
 
-### release<a name=videorecorder_release1></a>
+### release<sup>8+</sup><a name=videorecorder_release1></a>
 
 release(callback: AsyncCallback\<void>): void;
 
 异步方式释放视频录制资源。通过注册回调函数获取返回值。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoRecorder
+
 **参数：**
 
 | 参数名   | 类型                 | 必填 | 说明                             |
@@ -2220,12 +2297,14 @@ videoRecorder.release((err) => {
 });
 ```
 
-### release<a name=videorecorder_release2></a>
+### release<sup>8+</sup><a name=videorecorder_release2></a>
 
 release(): Promise\<void>;
 
 异步方式释放视频录制资源。通过Promise获取返回值。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoRecorder
+
 **返回值：**
 
 | 类型           | 说明                                      |
@@ -2245,13 +2324,15 @@ await videoRecorder.release().then(() => {
 });
 ```
 
-### reset<a name=videorecorder_reset1></a>
+### reset<sup>8+</sup><a name=videorecorder_reset1></a>
 
 reset(callback: AsyncCallback\<void>): void;
 
 异步方式重置视频录制。通过注册回调函数获取返回值。
 
-需要重新调用[prepare()](#videorecorder_prepare1)和[getInputSurface()](#getinputsurface)接口才能重新录制。
+需要重新调用[prepare()](#videorecorder_prepare1)和[getInputSurface()](#getinputsurface8)接口才能重新录制。
+
+**系统能力：** SystemCapability.Multimedia.Media.VideoRecorder
 
 **参数：**
 
@@ -2272,13 +2353,15 @@ videoRecorder.reset((err) => {
 });
 ```
 
-### reset<a name=videorecorder_reset2></a>
+### reset<sup>8+</sup><a name=videorecorder_reset2></a>
 
 reset(): Promise\<void>;
 
 异步方式重置视频录制。通过Promise获取返回值。
 
-需要重新调用[prepare()](#videorecorder_prepare1)和[getInputSurface()](#getinputsurface)接口才能重新录制。
+需要重新调用[prepare()](#videorecorder_prepare1)和[getInputSurface()](#getinputsurface8)接口才能重新录制。
+
+**系统能力：** SystemCapability.Multimedia.Media.VideoRecorder
 
 **返回值：**
 
@@ -2299,12 +2382,14 @@ await videoRecorder.reset().then(() => {
 });
 ```
 
-### on('error')
+### on('error')<sup>8+</sup>
 
 on(type: 'error', callback: ErrorCallback): void
 
 开始订阅视频录制错误事件。
 
+**系统能力：** SystemCapability.Multimedia.Media.VideoRecorder
+
 **参数：**
 
 | 参数名   | 类型          | 必填 | 说明                                                         |
@@ -2327,6 +2412,8 @@ videoRecorder.on('error', (error) => {      							// 设置'error'事件回调
 
 视频录制的状态机。可通过state属性获取当前状态。
 
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.VideoRecorder。
+
 | 名称     | 类型   | 描述                   |
 | -------- | ------ | ---------------------- |
 | idle     | string | 视频录制空闲。         |
@@ -2340,6 +2427,8 @@ videoRecorder.on('error', (error) => {      							// 设置'error'事件回调
 
 表示视频录制的参数设置。
 
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.VideoRecorder。
+
 | 名称            | 参数类型                                                   | 必填 | 说明                                                         |
 | --------------- | ---------------------------------------------------------- | ---- | ------------------------------------------------------------ |
 | audioSourceType | [AudioSourceType](#audiosourcetype<sup>8+</sup>)           | 是   | 视频录制的音频源类型。                                       |
@@ -2347,21 +2436,25 @@ videoRecorder.on('error', (error) => {      							// 设置'error'事件回调
 | profile         | [VideoRecorderProfile](#videorecorderprofile<sup>8+</sup>) | 是   | 视频录制的profile。                                          |
 | orientationHint | number                                                     | 否   | 录制视频的旋转角度。                                         |
 | location        | [Location](#location8)                                     | 否   | 录制视频的地理位置。                                         |
-| uri             | string                                                     | 是   | 视频输出URI。支持：<br/>1.&nbsp;文件的绝对路径：file:///data/data/ohos.xxx.xxx/cache/test.mp4![zh-cn_image_0000001164217678](figures/zh-cn_image_0000001164217678.png)<br/>2.&nbsp;文件的fd路径：file://1&nbsp;(fd&nbsp;number)<br/> 文件需要由调用者创建，并赋予适当的权限。 |
+| url             | string                                                     | 是   | 视频输出URL：fd://xx&nbsp;(fd&nbsp;number)<br/>![zh-cn_image_0000001164217678](figures/zh-cn_image_url.png) <br/>文件需要由调用者创建，并赋予适当的权限。 |
 
 ## AudioSourceType<sup>8+</sup>
 
 表示视频录制中音频源类型的枚举。
 
-| 名称                       | 值   | 说明                   |
-| -------------------------- | ---- | ---------------------- |
-| AUDIO_SOURCE_TYPE_DEFAULT0 | 0    | 默认的音频输入源类型。 |
-| AUDIO_SOURCE_TYPE_MIC      | 1    | 表示MIC的音频输入源。  |
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.VideoRecorder。
+
+| 名称                      | 值   | 说明                   |
+| ------------------------- | ---- | ---------------------- |
+| AUDIO_SOURCE_TYPE_DEFAULT | 0    | 默认的音频输入源类型。 |
+| AUDIO_SOURCE_TYPE_MIC     | 1    | 表示MIC的音频输入源。  |
 
 ## VideoSourceType<sup>8+</sup>
 
 表示视频录制中视频源类型的枚举。
 
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.VideoRecorder。
+
 | 名称                          | 值   | 说明                            |
 | ----------------------------- | ---- | ------------------------------- |
 | VIDEO_SOURCE_TYPE_SURFACE_YUV | 0    | 输入surface中携带的是raw data。 |
@@ -2371,6 +2464,8 @@ videoRecorder.on('error', (error) => {      							// 设置'error'事件回调
 
 视频录制的配置文件。
 
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.VideoRecorder。
+
 | 名称             | 参数类型                                     | 必填 | 说明             |
 | ---------------- | -------------------------------------------- | ---- | ---------------- |
 | audioBitrate     | number                                       | 是   | 音频编码比特率。 |
@@ -2386,6 +2481,8 @@ videoRecorder.on('error', (error) => {      							// 设置'error'事件回调
 
 表示容器格式类型的枚举，缩写为CFT。
 
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.Core。
+
 | 名称        | 值    | 说明                  |
 | ----------- | ----- | --------------------- |
 | CFT_MPEG_4  | "mp4" | 视频的容器格式，MP4。 |
@@ -2395,6 +2492,8 @@ videoRecorder.on('error', (error) => {      							// 设置'error'事件回调
 
 视频录制的地理位置。
 
+**系统能力：** 以下各项对应的系统能力均为 SystemCapability.Multimedia.Media.Core。
+
 | 名称      | 参数类型 | 必填 | 说明             |
 | --------- | -------- | ---- | ---------------- |
 | latitude  | number   | 是   | 地理位置的纬度。 |
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-media-query.md b/zh-cn/application-dev/reference/apis/js-apis-mediaquery.md
similarity index 100%
rename from zh-cn/application-dev/reference/arkui-ts/ts-methods-media-query.md
rename to zh-cn/application-dev/reference/apis/js-apis-mediaquery.md
diff --git a/zh-cn/application-dev/reference/apis/js-apis-pasteboard.md b/zh-cn/application-dev/reference/apis/js-apis-pasteboard.md
index 169bf06fbf0abf04280616413e06f33a643d633e..1cd00410265aa0edcc88b26d4d335c38c5e8944c 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-pasteboard.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-pasteboard.md
@@ -86,9 +86,9 @@ createWantData(want:Want): PasteData
 **系统能力**: SystemCapability.Miscservices.Pasteboard
 
 - 参数
-    | 参数名 | 类型 | 必填 | 说明 | 
+    | 参数名 | 类型 | 必填 | 说明 |
   | -------- | -------- | -------- | -------- |
-  | want | [ERROR:Invalid&nbsp;link:zh-cn_topic_0000001153972080.xml#xref16101652152415,link:zh-cn_topic_0000001153498376.xml#section249133711278](zh-cn_topic_0000001153498376.xml#section249133711278) | 是 | 待保存的Want内容。 | 
+  | want | [Want](js-apis-featureAbility.md#want) | 是 | 待保存的Want内容。 |
 
 - 返回值
     | 类型 | 说明 | 
@@ -191,9 +191,9 @@ createWantRecord(want:Want): PasteDataRecord
 **系统能力**: SystemCapability.Miscservices.Pasteboard
 
 - 参数
-    | 参数名 | 类型 | 必填 | 说明 | 
+    | 参数名 | 类型 | 必填 | 说明 |
   | -------- | -------- | -------- | -------- |
-  | want | [ERROR:Invalid&nbsp;link:zh-cn_topic_0000001153972080.xml#xref1929278214,link:zh-cn_topic_0000001153498376.xml#section249133711278](zh-cn_topic_0000001153498376.xml#section249133711278) | 是 | Want类型数据。 | 
+  | want | [Want](js-apis-featureAbility.md#want) | 是 | Want类型数据。 |
 
 - 返回值
     | 类型 | 说明 |
@@ -263,7 +263,7 @@ createUriRecord(uri:string): PasteDataRecord
 | 名称 | 参数类型 | 可读 | 可写 | 说明 |
 | -------- | -------- | -------- | -------- | -------- |
 | htmlText<sup>7+</sup> | string | 是 | 否 | HTML文本内容。 |
-| want<sup>7+</sup> | [ERROR:Invalid&nbsp;link:zh-cn_topic_0000001153972080.xml#xref97376211378,link:zh-cn_topic_0000001153498376.xml#section249133711278](zh-cn_topic_0000001153498376.xml#section249133711278) | 是 | 否 | Want文本内容。 |
+| want<sup>7+</sup> | [Want](js-apis-featureAbility.md#want) | 是 | 否 | Want文本内容。 |
 | mimeType<sup>7+</sup> | string | 是 | 否 | 数据类型。 |
 | plainText<sup>7+</sup> | string | 是 | 否 | 文本内容。 |
 | uri<sup>7+</sup> | string | 是 | 否 | URI内容。 |
@@ -388,9 +388,9 @@ getPrimaryWant(): Want
 **系统能力**: SystemCapability.Miscservices.Pasteboard
 
 - 返回值
-    | 类型 | 说明 | 
+    | 类型 | 说明 |
   | -------- | -------- |
-  | [ERROR:Invalid&nbsp;link:zh-cn_topic_0000001153972080.xml#xref731715497254,link:zh-cn_topic_0000001153498376.xml#section249133711278](zh-cn_topic_0000001153498376.xml#section249133711278) | Want对象内容。 | 
+  | [Want](js-apis-featureAbility.md#want) | Want对象内容。 |
 
 - 示例
   
@@ -474,7 +474,7 @@ addHtmlRecord(htmlText: string): void
 
 ### addWantRecord<sup>7+</sup>
 
-addWantRecord(want: [ERROR:Invalid link:zh-cn_topic_0000001153972080.xml#xref13369155013717,link:zh-cn_topic_0000001153498376.xml#section249133711278](zh-cn_topic_0000001153498376.xml#section249133711278)): void
+addWantRecord(want: Want): void
 
 向当前剪贴板内容中添加一条Want条目，并将MIMETYPE_TEXT_INTENT添加到[PasteDataProperty](#pastedataproperty7)的mimeTypes中。入参均不能为空，否则添加失败。
 
@@ -483,9 +483,9 @@ addWantRecord(want: [ERROR:Invalid link:zh-cn_topic_0000001153972080.xml#xref133
 **系统能力**: SystemCapability.Miscservices.Pasteboard
 
 - 参数
-    | 参数名 | 类型 | 必填 | 说明 | 
+    | 参数名 | 类型 | 必填 | 说明 |
   | -------- | -------- | -------- | -------- |
-  | want | [ERROR:Invalid&nbsp;link:zh-cn_topic_0000001153972080.xml#xref179262227253,link:zh-cn_topic_0000001153498376.xml#section249133711278](zh-cn_topic_0000001153498376.xml#section249133711278) | 是 | Want对象内容。 | 
+  | want | [Want](js-apis-featureAbility.md#want) | 是 | Want对象内容。 |
 
 - 示例
   
diff --git a/zh-cn/application-dev/reference/apis/js-apis-request.md b/zh-cn/application-dev/reference/apis/js-apis-request.md
index b853b07257218d22fba3b6b2067109942c6b5dc5..4a7f928077f178e713b4b021975780efad122e5f 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-request.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-request.md
@@ -1,4 +1,4 @@
-# 上传下载(新)
+# 上传下载
 
 
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-app.md b/zh-cn/application-dev/reference/apis/js-apis-system-app.md
new file mode 100644
index 0000000000000000000000000000000000000000..6ceb384650f9b4c8bd8526fb198bc86788f36474
--- /dev/null
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-app.md
@@ -0,0 +1,122 @@
+# 应用上下文
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> - 从API Version 7 开始，该接口不再维护，推荐使用新接口。具体新接口在接口描述中说明。
+> 
+> - 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+
+
+## 导入模块
+
+
+```
+import app from '@system.app';
+```
+
+
+## app.getInfo
+
+getInfo(): &lt;AppResponse&gt;
+
+获取当前应用配置文件中声明的信息。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Lite
+
+**返回值：**
+**表1** AppResponse
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| appID<sup>6+</sup> | string | 表示应用的包名，用于标识应用的唯一性。 |
+| appName | string | 表示应用的名称。 |
+| versionName | string | 表示应用的版本名称。 |
+| versionCode | number | 表示应用的版本号。 |
+
+**示例：**
+
+  ```
+  export default {    
+    getInfo(){        
+      var info = app.getInfo();        
+        console.log(JSON.stringify(info));    
+    } 
+  }
+  ```
+
+## app.screenOnVisible
+
+screenOnVisible(Object): void
+
+应用申请息屏不返回主表盘，再次亮屏依旧显示应用界面。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**参数：**
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| visible | boolean | 否 | 是否启动保活，默认值false。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+**示例：**
+
+  ```
+  export default {    
+    screenOnVisible(){        
+      app.screenOnVisible({            
+        visible: true,            
+          success() {                
+            console.log('call app.keepVisible success');            
+          },            
+          fail(data, code) {                
+            console.log('call app.keepVisible fail');            
+          },
+      });    
+    }
+  }
+  ```
+
+
+## app.terminate
+
+terminate(): void
+
+退出当前Ability。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Lite
+
+**示例：**
+
+  ```
+  export default {    
+    terminate(){        
+      app.terminate();    
+    }}
+  ```
+
+## app.requestFullWindow
+
+requestFullWindow(duration: number): void
+
+请求应用以全窗口运行，FA在某些场景下（如半模态FA）会以非全窗口运行，调用该接口会从非全窗口切换为全窗口运行，如果已经以全窗口运行则该接口调用无效。
+
+此接口为系统接口，三方应用不支持调用。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**参数：**
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| duration | number | 否 | 请求全屏时，设定非全屏到全屏的过渡时间，单位为毫秒，默认时间与非全屏到全屏的距离成正比。 |
+
+**示例：**
+
+  ```
+  export default {    
+    requestFullWindow(){        
+      app.requestFullWindow({            
+        duration: 200});    
+    }
+  }
+  ```
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-battery.md b/zh-cn/application-dev/reference/apis/js-apis-system-battery.md
new file mode 100644
index 0000000000000000000000000000000000000000..0370a7b99e3d4ca3127f3dcaf2583861da416a58
--- /dev/null
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-battery.md
@@ -0,0 +1,55 @@
+# 电量信息
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> - 从API Version 6开始，该接口不再维护，推荐使用新接口['@ohos.batteryInfo'](js-apis-battery-info.md)。
+> 
+> - 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+
+
+## 导入模块
+
+
+```
+import battery from '@system.battery';
+```
+
+
+## battery.getStatus
+
+getStatus(Object): void
+
+获取设备当前的充电状态及剩余电量。
+
+**系统能力：** SystemCapability.PowerManager.BatteryManager.Core
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+success返回值：
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| charging | boolean | 当前电池是否在充电中。 |
+| level | number | 当前电池的电量，取值范围：0.00&nbsp;-&nbsp;1.00&nbsp;。 |
+
+**示例：**
+
+```
+export default {    
+  getStatus() {       
+    battery.getStatus({           
+      success: function(data) {               
+        console.log('success get battery level:' + data.level);           
+      },            
+      fail: function(data, code) {                
+        console.log('fail to get battery level code:' + code + ', data: ' + data);            
+      },        
+    });    
+  },
+}
+```
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-bluetooth.md b/zh-cn/application-dev/reference/apis/js-apis-system-bluetooth.md
new file mode 100644
index 0000000000000000000000000000000000000000..78d6b4aaed60883daa60aeb7f9919a2dfb88b062
--- /dev/null
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-bluetooth.md
@@ -0,0 +1,175 @@
+# 蓝牙
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 本模块首批接口从API version 6开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+
+
+## 导入模块
+
+
+```
+import bluetooth from '@system.bluetooth';
+```
+
+
+## 权限列表
+
+ohos.permission.USE_BLUETOOTH
+
+ohos.permission.DISCOVER_BLUETOOTH
+
+ohos.permission.MANAGE_BLUETOOTH
+
+
+## bluetooth.startBLEScan(OBJECT)
+
+开始搜寻附近的低功耗蓝牙外围设备。此操作比较耗费系统资源，请在搜索并连接到设备后调用[bluetooth.stopBLEScan](#bluetoothstopblescanobject)方法停止搜索。
+
+**需要权限：** ohos.permission.DISCOVER_BLUETOOTH、ohos.permission.LOCATION
+
+**系统能力：** SystemCapability.Communication.Bluetooth.Lite
+
+**参数：**
+**表1** StartBLEScanOptions
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| interval | number | 否 | 上报设备的间隔，单位毫秒，默认值为0。0表示找到新设备立即上报，其他数值根据传入的间隔上报。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+**示例：**
+
+  ```
+  bluetooth.startBLEScan({
+    success() {
+      console.log('call bluetooth.startBLEScan success.');
+    },
+    fail(code, data) {
+      console.log('call bluetooth.startBLEScan failed, code: ${code}, data: ${data}.`);
+    },
+    complete() {
+      console.log('call bluetooth.startBLEScan complete.');
+    }
+  });
+  ```
+
+
+## bluetooth.stopBLEScan(OBJECT)
+
+停止搜寻附近的低功耗蓝牙外围设备。与[bluetooth.startBLEScan(OBJECT)](#bluetoothstartblescanobject)接口配套使用。
+
+**需要权限：** ohos.permission.DISCOVER_BLUETOOTH、ohos.permission.LOCATION
+
+**系统能力：** SystemCapability.Communication.Bluetooth.Lite
+
+**参数：**
+**表2** StopBLEScanOptions
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+**示例：**
+
+  ```
+  bluetooth.stopBLEScan({
+    success() {
+      console.log('call bluetooth.stopBLEScan success.');
+    },
+    fail(data, code) {
+      console.log(`call bluethooth.stopBLEScan fail, code: ${code}, data: ${data}.`);
+    },
+    complete() {
+      console.log('call bluethooth.stopBLEScan complete.');
+    }
+  });
+  ```
+
+
+## bluetooth.subscribeBLEFound(OBJECT)
+
+订阅寻找到新设备。再次调用时，会覆盖前一次调用效果，即仅最后一次调用生效。
+
+**需要权限：**  ohos.permission.DISCOVER_BLUETOOTH、ohos.permission.LOCATION
+
+**系统能力：** SystemCapability.Communication.Bluetooth.Lite
+
+**参数：**
+**表3** SubscribeBLEFoundOptions
+
+| 参数 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| success | Function | 是 | 寻找到新设备上报时调用的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+
+**表4** success返回值：
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| devices | Array&lt;BluetoothDevice&gt; | 新搜索到的设备列表。 |
+
+**表5** BluethoothDevice
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| addrType | string | 设备地址类型，可能值有：<br/>-&nbsp;public:&nbsp;公共地址<br/>-&nbsp;random:&nbsp;随机地址 |
+| addr | string | 设备MAC地址。 |
+| rssi | number | 设备蓝牙的信号强弱指标。 |
+| txpower | string | 广播数据中的txpower字段。 |
+| data | hex&nbsp;string | 广播数据（包含广播数据和扫描响应数据），十六进制字符串。 |
+
+**示例：**
+
+  ```
+  bluetooth.startaBLEScan({
+    success() {
+      bluetooth.subscribeBLEFound({
+        success(data) {
+          const [device] = data.devices;
+          if (!!device) {
+            bluetooth.stopBLEScan();
+          }
+        }
+      });
+    },
+    fail(code, data) {
+      console.log('Failed to start BLE device scan, code: ${code}, data: ${data}`);
+    }
+  });
+  ```
+
+
+## bluetooth.unsubscribeBLEFound()
+
+解除订阅寻找到新设备。
+
+**需要权限：**  ohos.permission.DISCOVER_BLUETOOTH、ohos.permission.LOCATION
+
+**系统能力：** SystemCapability.Communication.Bluetooth.Lite
+
+**示例：**
+
+  ```
+  bluetooth.unsubscribeBLEFound();
+  ```
+
+
+## 常见错误码
+
+| 错误码 | 说明 |
+| -------- | -------- |
+| 1100 | 是否处于已连接状态。 |
+| 1101 | 当前蓝牙适配器不可用。 |
+| 1102 | 没有找到指定设备。 |
+| 1103 | 连接失败。 |
+| 1104 | 没有找到指定服务。 |
+| 1105 | 没有找到指定特征值。 |
+| 1106 | 当前连接已断开。 |
+| 1107 | 当前特征值不支持此操作。 |
+| 1108 | 其余所有系统上报的异常。 |
+| 1109 | 系统版本不支持&nbsp;BLE。 |
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-brightness.md b/zh-cn/application-dev/reference/apis/js-apis-system-brightness.md
new file mode 100644
index 0000000000000000000000000000000000000000..eadac91a5945fcedb9cd37bf9b17746f32b21438
--- /dev/null
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-brightness.md
@@ -0,0 +1,197 @@
+# 屏幕亮度
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> - 从API Version 7 开始，该接口不再维护，推荐使用新接口['@ohos.brightness'](js-apis-brightness.md)。
+> 
+> - 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+
+
+## 导入模块
+
+
+```
+import brightness from '@system.brightness';
+```
+
+
+## brightness.getValue
+
+getValue(Object): void
+
+获得设备当前的屏幕亮度值。
+
+**系统能力：** SystemCapability.PowerManager.DisplayPowerManager
+
+**参数：**
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+success返回值：
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| value | number | 屏幕亮度，取值为1-255之间的整数。 |
+
+**示例：**
+
+  ```
+  export default {    
+    getValue() {        
+      brightness.getValue({            
+        success: function(data){                
+          console.log('success get brightness value:' + data.value);            
+        },            
+        fail: function(data, code) {                
+          console.log('get brightness fail, code: ' + code + ', data: ' + data);            
+        },
+      });    
+    },
+  }
+  ```
+
+
+## brightness.setValue
+
+setValue(Object): void
+
+设置设备当前的屏幕亮度值。
+
+**系统能力：** SystemCapability.PowerManager.DisplayPowerManager
+
+**参数：**
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| value | number | 是 | 屏幕亮度，值为1-255之间的整数。<br/>-&nbsp;如果值小于等于0，系统按1处理。<br/>-&nbsp;如果值大于255，系统按255处理。<br/>-&nbsp;如果值为小数，系统将处理为整数。例如设置为8.1，系统按8处理。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+**示例：**
+
+  ```
+  export default {    
+    setValue() {        
+      brightness.setValue({            
+        value: 100,            
+        success: function(){                
+          console.log('handling set brightness success.');            
+        },            
+        fail: function(data, code){                
+          console.log('handling set brightness value fail, code:' + code + ', data: ' + data);            
+        },        
+      });    
+    },
+  }
+  ```
+
+
+## brightness.getMode
+
+getMode(Object): void
+
+获得当前屏幕亮度模式。
+
+**系统能力：** SystemCapability.PowerManager.DisplayPowerManager
+
+**参数：**
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+  success返回值：
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| mode | number | 值为0或1：<br/>-&nbsp;0为手动调节屏幕亮度模式<br/>-&nbsp;1为自动调节屏幕亮度模式 |
+
+**示例：**
+
+  ```
+  export default {    
+    getMode() {        
+      brightness.getMode({            
+        success: function(data){                
+          console.log('success get mode:' + data.mode);            
+        },            
+        fail: function(data, code){                
+          console.log('handling get mode fail, code:' + code + ', data: ' + data);            
+        },
+      });    
+    },
+  }
+  ```
+
+
+## brightness.setMode
+
+setMode(Object): void
+
+设置设备当前的屏幕亮度模式。
+
+**系统能力：** SystemCapability.PowerManager.DisplayPowerManager
+
+**参数：**
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| mode | number | 是 | 值为0或1<br/>-&nbsp;0为手动调节屏幕亮度<br/>-&nbsp;1为自动调节屏幕亮度 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+**示例：**
+
+  ```
+  export default {    
+    setMode() {        
+      brightness.setMode({            
+        mode: 1,            
+        success: function(){                
+        console.log('handling set mode success.');            
+      },            
+       fail: function(data, code){                
+         console.log('handling set mode fail, code:' + code + ', data: ' + data);            
+       },
+      });    
+    },
+  }
+  ```
+
+
+## brightness.setKeepScreenOn
+
+setKeepScreenOn(Object): void
+
+设置屏幕是否保持常亮状态，开启常亮模式推荐在onShow()阶段调用。
+
+**系统能力：** SystemCapability.PowerManager.DisplayPowerManager
+
+**参数：**
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| keepScreenOn | boolean | 是 | 是否保持屏幕常亮。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+**示例：**
+
+  ```
+  export default {    
+    setKeepScreenOn() {        
+      brightness.setKeepScreenOn({            
+        keepScreenOn: true,            
+        success: function () {                
+          console.log('handling set keep screen on success.')            
+        },            
+        fail: function (data, code) {                
+          console.log('handling set keep screen on fail, code:' + code + ', data: ' + data);            
+        },        
+      });    
+    },
+  }
+  ```
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-cipher.md b/zh-cn/application-dev/reference/apis/js-apis-system-cipher.md
new file mode 100644
index 0000000000000000000000000000000000000000..7d434d3c98c0aee4fc813b56899448136a1ad920
--- /dev/null
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-cipher.md
@@ -0,0 +1,164 @@
+# 加密算法
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>
+> 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+
+
+## 导入模块
+
+
+```
+import cipher from '@system.cipher'
+```
+
+
+## cipher.rsa
+
+rsa(Object): void
+
+RSA 算法加解密。
+
+**系统能力：** SystemCapability.Security.Cipher
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| action | string | 是 | 加密类型，可选项有：<br/>1.&nbsp;encrypt&nbsp;加密<br/>2.&nbsp;decrypt&nbsp;解密 |
+| text | string | 是 | 待加密或解密的文本内容。待加密的文本内容应该是一段普通文本，长度不能超过&nbsp;keySize&nbsp;/&nbsp;8&nbsp;-&nbsp;66，其中&nbsp;keySize&nbsp;是密钥的长度（例如密钥长度为&nbsp;1024&nbsp;时，text&nbsp;不能超过&nbsp;62&nbsp;个字节）。待解密的文本内容应该是经过&nbsp;base64&nbsp;编码的一段二进制值。base64&nbsp;编码使用默认风格。 |
+| key | string | 是 | 加密的密钥，RSA的密钥。加密时key为公钥，解密时key为私钥 |
+| transformation | string | 否 | RSA算法的填充项，默认为RSA/None/OAEPWithSHA256AndMGF1Padding |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+**示例：**
+
+```
+export default {    
+  rsa() {        
+    cipher.rsa({            
+      //加密            
+      action: 'encrypt',            
+      //待加密的文本内容            
+      text: 'hello',            
+      //base64编码后的加密公钥            
+      key:            
+        'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDc7GR2MrfAoefES+wrs1ns2afT\n' +            
+        'eJXSfIkEHfPXG9fVFjaws1ho4KcZfsxlA0+SXvc83f2SVGCuzULmM2lxxRCtcUN/\n' +            
+        'h7SoaYEeluhqFimL2AEjfSwINHCLqObJkcjCfoZpE1JCehPiDOJsyT50Auc08h/4\n' +            
+        'jHQfanyC1nc62LqUCQIDAQAB',            
+        success: function(data) {                
+          console.log('handling success: ${data.text}');            
+        },            
+        fail: function(data, code) {               
+          console.log(`### cipher.rsa encrypt fail ### ${code}: ${data}`);           
+        }       
+      });        
+      cipher.rsa({            
+        //解密：            
+        action: 'decrypt',            
+        //待解密的内容，是base64编码后的一段二进制值，解密后是文本内容“hello”            
+        text:            
+          'CUg3tTxTIdpCfreIxIBdws3uhd5qXLwcrVl3XDnQzZFVHyjVVCDHS16rjopaZ4C5xU2Tc8mSDzt7\n' +            
+          'gp9vBfSwi7bMtSUvXG18DlncsKJFDkJpS5t0PkpS9YrJXrY80Gpe+ME6+6dN9bjgqMljbitDdBRf\n' +            
+          'S/ZWNI4Q8Q0suNjNkGU=',            
+         //base64编码后的解密私钥            
+         key:            
+           'MIICdwIBADANBgkqhkiG9w0BAQEFAASCAmEwggJdAgEAAoGBANzsZHYyt8Ch58RL\n' +            
+           '7CuzWezZp9N4ldJ8iQQd89cb19UWNrCzWGjgpxl+zGUDT5Je9zzd/ZJUYK7NQuYz\n' +            
+           'aXHFEK1xQ3+HtKhpgR6W6GoWKYvYASN9LAg0cIuo5smRyMJ+hmkTUkJ6E+IM4mzJ\n' +            
+           'PnQC5zTyH/iMdB9qfILWdzrYupQJAgMBAAECgYEAkibhH0DWR13U0gvYJeD08Lfd\n' +            
+           'Sw1PMHyquEqIcho9Yv7bF3LOXjOg2EEGPx09mvuwXFgP1Kp1e67XPytr6pQQPzK7\n' +            
+           'XAPcLPx80R/ZjZs8vNFndDOd1HgD3vSVmYQarNzmKi72tOUWMPevsaFXPHo6Xx3X\n' +            
+           '8x0wYb7XuBsQguRctTECQQD7GWX3JUiyo562iVrpTDPOXsrUxmzCrgz2OZildxMd\n' +            
+           'Pp/PkyDrx7mEXTpk4K/XnQJ3GpJNi2iDSxDuPSAeJ/aPAkEA4Tw4+1Z43S/xH3C3\n' +            
+           'nfulYBNyB4si6KEUuC0krcC1pDJ21Gd12efKo5VF8SaJI1ZUQOzguV+dqNsB/JUY\n' +            
+           'OFfX5wJAB1dKv9r7MR3Peg6x9bggm5vx2h6i914XSuuMJupASM6X5X2rrLj+F3yS\n' +            
+           'RHi9K1SPyeOg+1tkBtKfABgRZFBOyQJAbuTivUSe73AqTKuHjB4ZF0ubqgEkJ9sf\n' +            
+           'Q2rekzm9dOFvxjZGPQo1qALX09qATMi1ZN376ukby8ZAnSafLSZ64wJBAM2V37go\n' +            
+           'Sj44HF76ksRow8gecuQm48NCTGAGTicXg8riKog2GC9y8pMNHAezoR9wXJF7kk+k\n' +            
+           'lz5cHyoMZ9mcd30=',            
+           success: function(data) {                
+             console.log('handling success: ${data.text}');            
+           },            
+           fail: function(data, code) {                
+             console.log(`### cipher.rsa decrypt fail ### ${code}: ${data}`);            
+           },        
+       });    
+   }
+}
+```
+
+
+## cipher.aes
+
+aes(Object): void
+
+AES 算法加解密。
+
+**系统能力：** SystemCapability.Security.Cipher
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| action | string | 是 | 加密类型，可选项有：<br/>1.&nbsp;encrypt&nbsp;加密<br/>2.&nbsp;decrypt&nbsp;解密 |
+| text | string | 是 | 待加密或解密的文本内容。待加密的文本内容应该是一段普通文本。待解密的文本内容应该是经过&nbsp;base64&nbsp;编码的一段二进制值。base64&nbsp;编码使用默认风格 |
+| key | string | 是 | 加密或解密使用到的密钥，经过&nbsp;base64&nbsp;编码后生成的字符串 |
+| transformation | string | 否 | AES算法的加密模式和填充项，默认AES/CBC/PKCS5Padding |
+| iv | string | 否 | AES加解密的初始向量，经过base64编码后的字符串，默认值为key值 |
+| ivOffset | string | 否 | AES加解密的初始向量偏移，默认值0 |
+| ivLen | string | 否 | AES加解密的初始向量字节长度，默认值16 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+**示例：**
+
+```
+export default {    
+  aes() {        
+    cipher.aes({            
+      //加密            
+      action: 'encrypt',            
+      //待加密的文本内容            
+      text: 'hello',            
+      //base64编码后的密钥            
+      key: 'NDM5Qjk2UjAzMEE0NzVCRjlFMkQwQkVGOFc1NkM1QkQ=',            
+      transformation: 'AES/CBC/PKCS5Padding',            
+      ivOffset: 0,            
+      ivLen: 16,            
+      success: (data) => {                
+        console.log('handling success: ${data.text}');            
+      },            
+      fail: (data, code) => {                
+        console.log(`### cipher.aes encrypt fail ### ${code}: ${data}`);            
+      }        
+    });        
+    cipher.aes({            
+      //解密：            
+      action: 'decrypt',            
+      //待解密的内容，是base64编码后的一段二进制值            
+      text: 'CUg3tTxTIdpCfreIxIBdws3uhd5qXLwcrVl3XDnQzZFVHyjVVCDHS16rjopaZ4C5xU2Tc8mSDzt7\n' +            
+      'gp9vBfSwi7bMtSUvXG18DlncsKJFDkJpS5t0PkpS9YrJXrY80Gpe+ME6+6dN9bjgqMljbitDdBRf\n' +            
+      'S/ZWNI4Q8Q0suNjNkGU=',            
+       //base64编码后的密钥            
+       key: 'NDM5Qjk2UjAzMEE0NzVCRjlFMkQwQkVGOFc1NkM1QkQ=',            
+       transformation: 'AES/CBC/PKCS5Padding',            
+       ivOffset: 0,            
+       ivLen: 16,            
+       success: (data) => {                
+         this.dealTxt = data.text;            
+       },            
+       fail: (data, code) => {               
+         prompt.showToast({                    
+           message: (`### cipher.aes decrypt fail ### code = ${code}: ${data}`)                
+         })            
+       },        
+    });    
+  }
+}
+
+```
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-configuration.md b/zh-cn/application-dev/reference/apis/js-apis-system-configuration.md
new file mode 100644
index 0000000000000000000000000000000000000000..d7543663552ae46b61a584e939b6a426253e5795
--- /dev/null
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-configuration.md
@@ -0,0 +1,45 @@
+# 应用配置
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> - 从API Version 7 开始，该接口不再维护，推荐使用新接口['@ohos.i18n'](js-apis-i18n.md)和['@ohos.intl'](js-apis-intl.md)。
+>
+> 
+> - 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+
+
+## 导入模块
+
+
+```
+import configuration from '@system.configuration';
+```
+
+
+## configuration.getLocale
+
+getLocale(): &lt;LocaleResponse&gt;
+
+获取应用当前的语言和地区。默认与系统的语言和地区同步。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Lite
+
+**返回值：**
+**表1** LocaleResponse
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| language | string | 语言。例如：zh。 |
+| countryOrRegion | string | 国家或地区。例如：CN。 |
+| dir | string | 文字布局方向。取值范围：<br/>-&nbsp;ltr：从左到右；<br/>-&nbsp;rtl：从右到左。 |
+| unicodeSetting<sup>5+</sup> | string | 语言环境定义的Unicode语言环境键集，如果此语言环境没有特定键集，则返回空集。<br/>例如：{"nu":"arab"}，表示当前环境下的数字采用阿拉伯语的数字。 |
+
+**示例：**
+
+```
+export default {    
+  getLocale() {        
+    const localeInfo = configuration.getLocale();        
+    console.info(localeInfo.language);    
+  }
+}
+```
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-deviceinfo.md b/zh-cn/application-dev/reference/apis/js-apis-system-deviceinfo.md
new file mode 100644
index 0000000000000000000000000000000000000000..7deaf91a5aff0bb44547b14ed282159dd7a36697
--- /dev/null
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-deviceinfo.md
@@ -0,0 +1,75 @@
+# 设备信息
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> - 从API Version 6开始，该接口不再维护，推荐使用新接口['@ohos.deviceInfo'](js-apis-device-info.md)进行设备信息查询。
+> 
+> - 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+
+
+## 导入模块
+
+
+```
+import device from '@system.device';
+```
+
+
+## device.getInfo
+
+getInfo(Object): void
+
+获取当前设备的信息。
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 在首页的onShow生命周期之前不建议调用device.getInfo接口。
+
+**系统能力：** SystemCapability.Startup.SysInfo
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+success返回值：
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| brand | string | 品牌。 |
+| manufacturer | string | 生产商。 |
+| model | string | 型号。 |
+| product | string | 代号。 |
+| language<sup>4+</sup> | string | 系统语言。 |
+| region<sup>4+</sup> | string | 系统地区。 |
+| windowWidth | number | 可使用的窗口宽度。 |
+| windowHeight | number | 可使用的窗口高度。 |
+| screenDensity<sup>4+</sup> | number | 屏幕密度。 |
+| screenShape<sup>4+</sup> | string | 屏幕形状。可取值：<br/>-&nbsp;rect：方形屏；<br/>-&nbsp;circle：圆形屏。 |
+| apiVersion<sup>4+</sup> | number | 系统API版本号。 |
+| releaseType<sup>4+</sup> | string | 版本发布类型，值为类型+版本号，如Beta1。<br/>类型可能值有：<br/>-&nbsp;Canary：同一apiVersion下，canary版本之间保持API兼容，beta版本不对canary版本兼容。<br/>-&nbsp;Beta：同一apiVersion下，beta版本之间保持API兼容，release版本不对beta版本兼容。<br/>-&nbsp;Release：release版本会保持5个API版本兼容。 |
+| deviceType<sup>4+</sup> | string | 设备类型，可能值有：<br/>-&nbsp;phone：智能手机<br/>-&nbsp;tablet：平板<br/>-&nbsp;tv：智慧屏<br/>-&nbsp;wearable：智能穿戴<br/>-&nbsp;liteWearable：轻量级智能穿戴<br/>-&nbsp;ar：增强现实<br/>-&nbsp;vr：虚拟现实<br/>-&nbsp;earphones：耳机<br/>-&nbsp;pc：个人计算机<br/>-&nbsp;speaker：音箱<br/>-&nbsp;smartVision：智能视觉设备<br/>-&nbsp;linkIoT：联接类模组 |
+
+fail返回错误代码：
+
+| 错误码 | 说明 |
+| -------- | -------- |
+| 200 | 返回结果中存在无法获得的信息。 |
+
+**示例：**
+
+```
+export default {    
+  getInfo() {        
+    device.getInfo({            
+      success: function(data) {                
+        console.log('Device information obtained successfully. Device brand:' + data.brand);            
+      },            
+      fail: function(data, code) {                
+        console.log('Failed to obtain device information. Error code:'+ code + '; Error information: ' + data);            
+      },        
+    });    
+  },
+}
+```
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-fetch.md b/zh-cn/application-dev/reference/apis/js-apis-system-fetch.md
new file mode 100644
index 0000000000000000000000000000000000000000..678ead5ffacc1f0d304197f0256f4ca5e80ff671
--- /dev/null
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-fetch.md
@@ -0,0 +1,104 @@
+# 数据请求
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> - 从API Version 6开始，该接口不再维护，推荐使用新接口['@ohos.net.http'](js-apis-http.md)。
+> 
+> - 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+
+
+## 导入模块
+
+
+```
+import fetch from '@system.fetch';
+```
+
+
+## fetch.fetch
+
+fetch(Object): void
+
+通过网络获取数据。
+
+**需要权限：** ohos.permission.INTERNET
+
+**系统能力：** SystemCapability.Communication.NetStack 
+
+**参数：**
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| url | string | 是 | 资源地址。 |
+| data | string \| Object | 否 | 请求的参数，可选类型是字符串或者json对象。详见表 data与Content-Type关系。 |
+| header | Object | 否 | 设置请求的header。 |
+| method | string | 否 | 请求方法默认为GET，可选值为：OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE。 |
+| responseType | string | 否 | 默认会根据服务器返回header中的Content-Type确定返回类型，支持文本和json格式。详见success返回值。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+**表1** data与Content-Type关系
+
+| data | Content-Type | 说明 |
+| -------- | -------- | -------- |
+| string | 不设置 | Content-Type默认为&nbsp;text/plain，data值作为请求的body。 |
+| string | 任意&nbsp;Type | data值作为请求的body。 |
+| Object | 不设置 | Content-Type默认为application/x-www-form-urlencoded，data按照资源地址规则进行encode拼接作为请求的body。 |
+| Object | application/x-www-form-urlencoded | data按照资源地址规则进行encode拼接作为请求的body。 |
+
+success返回值：
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| code | number | 表示服务器的状态code。 |
+| data | string \| Object | 返回数据类型由responseType确定，详见表 responseType与success中data关系。 |
+| headers | Object | 表示服务器response的所有header。 |
+
+**表2** responseType与success中data关系
+
+| responseType | data | 说明 |
+| -------- | -------- | -------- |
+| 无 | string | 服务器返回的header中的type如果是text/\*或application/json、application/javascript、application/xml，值为文本内容。 |
+| text | string | 返回文本内容。 |
+| json | Object | 返回json格式的对象。 |
+
+**示例：**
+
+```
+export default {
+  data: {
+    responseData: 'NA',
+    url: "test_url",
+  },
+  fetch: function () {
+    var that = this;
+    fetch.fetch({
+      url: that.url,
+      success: function(response) {
+        console.info("fetch success");
+        that.responseData = JSON.stringify(response);
+      },
+      fail: function() {
+        console.info("fetch fail");
+      }
+    });
+  }
+}
+```
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>   默认支持https，如果要支持http，需要在config.json里增加network标签，属性标识 "cleartextTraffic":  true。即：
+>   
+> ```
+> {
+>   "deviceConfig": {
+>     "default": {
+>       "network": {
+>         "cleartextTraffic": true
+>       }
+>       ...
+>     }
+>   }
+>   ...
+> }
+> ```
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-file.md b/zh-cn/application-dev/reference/apis/js-apis-system-file.md
new file mode 100644
index 0000000000000000000000000000000000000000..f43e669498d9835069440988fa646b8560a4d7f2
--- /dev/null
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-file.md
@@ -0,0 +1,599 @@
+# 文件存储
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> - 从API Version 6开始，该接口不再维护，推荐使用新接口['@ohos.fileio'](js-apis-fileio.md)。
+> 
+> - 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+
+
+## 导入模块
+
+
+```
+import file from '@system.file';
+```
+
+
+## file.move
+
+move(Object): void
+
+将指定文件移动到其他指定位置。
+
+**系统能力：** SystemCapability.FileManagement.File.FileIO
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| srcUri | string | 是 | 要移动的文件的uri。字符串最大长度为128，且不能包含“"\*+,:;&lt;=&gt;?[]\|\x7F”等特殊符号。 |
+| dstUri | string | 是 | 文件要移动到的位置的uri。字符串最大长度为128，且不能包含“"\*+,:;&lt;=&gt;?[]\|\x7F”等特殊符号。 |
+| success | Function | 否 | 接口调用成功的回调函数，返回文件要移动到的位置的uri。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+fail返回错误代码：
+
+| 错误码 | 说明 |
+| -------- | -------- |
+| 202 | 出现参数错误。 |
+| 300 | 出现I/O错误。 |
+| 301 | 文件或目录不存在。 |
+
+**示例：**
+
+```
+export default {    
+  move() {        
+    file.move({            
+      srcUri: 'internal://app/myfiles1',            
+      dstUri: 'internal://app/myfiles2',            
+      success: function(uri) {                
+        console.log('call success callback success');            
+      },            
+      fail: function(data, code) {                
+        console.error('call fail callback fail, code: ' + code + ', data: ' + data);            
+      },        
+    });    
+  }
+}
+```
+
+
+## file.copy
+
+copy(Object): void
+
+将指定文件拷贝并存储到指定位置。
+
+**系统能力：** SystemCapability.FileManagement.File.FileIO
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| srcUri | string | 是 | 要拷贝的文件的uri。 |
+| dstUri | string | 是 | 文件要拷贝到的位置的uri。<br/>不支持用应用资源路径或tmp类型的uri。 |
+| success | Function | 否 | 接口调用成功的回调函数，返回文件要拷贝到的位置的uri。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+fail返回错误代码：
+
+| 错误码 | 说明 |
+| -------- | -------- |
+| 202 | 出现参数错误。 |
+| 300 | 出现I/O错误。 |
+| 301 | 文件或目录不存在。 |
+
+**示例：**
+
+```
+export default {    
+  copy() {        
+    file.copy({            
+      srcUri: 'internal://app/file.txt',            
+      dstUri: 'internal://app/file_copy.txt',            
+      success: function(uri) {                
+        console.log('call success callback success');            
+      },            
+      fail: function(data, code) {                
+        console.error('call fail callback fail, code: ' + code + ', data: ' + data);            
+      },
+    });    
+  }
+}
+```
+
+
+## file.list
+
+list(Object): void
+
+获取指定路径下全部文件的列表。
+
+**系统能力：** SystemCapability.FileManagement.File.FileIO
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| uri | string | 是 | 目录uri。字符串最大长度为128，且不能包含“"\*+,:;&lt;=&gt;?[]\|\x7F”等特殊符号。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+success返回值：
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| fileList | Array&lt;FileInfo&gt; | 获取的文件列表，其中每个文件的信息的格式为：<br/>{<br/>uri:'file1',<br/>lastModifiedTime:1589965924479,<br/>length:10240,<br/>type:&nbsp;'file'<br/>} |
+
+**表1** FileInfo
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| uri | string | 文件的&nbsp;uri。 |
+| lastModifiedTime | number | 文件上一次保存时的时间戳，显示从1970/01/01&nbsp;00:00:00&nbsp;GMT到当前时间的毫秒数。 |
+| length | number | 文件的大小，单位为字节。 |
+| type | string | 文件的类型，可选值为：<br/>-&nbsp;dir：目录；<br/>-&nbsp;file：文件。 |
+
+fail返回错误代码：
+
+| 错误码 | 说明 |
+| -------- | -------- |
+| 202 | 出现参数错误。 |
+| 300 | 出现I/O错误。 |
+| 301 | 文件或目录不存在。 |
+
+**示例：**
+
+```
+export default {    
+  list() {        
+    file.list({            
+      uri: 'internal://app/pic',            
+      success: function(data) {                
+        console.log(data.fileList);            
+      },            
+      fail: function(data, code) {                
+        console.error('call fail callback fail, code: ' + code + ', data: ' + data);            
+      },        
+    });    
+  }
+}
+```
+
+
+## file.get
+
+get(Object): void
+
+获取指定本地文件的信息。
+
+**系统能力：** SystemCapability.FileManagement.File.FileIO
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| uri | string | 是 | 文件的uri。 |
+| recursive | boolean | 否 | 是否进行递归获取子目录文件列表，缺省为false。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+success返回值：
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| uri | string | 文件的uri。 |
+| length | number | 文件字节长。 |
+| lastModifiedTime | number | 文件保存时的时间戳，从1970/01/01&nbsp;00:00:00到当前时间的毫秒数。 |
+| type | string | 文件类型，可选值为：<br/>-&nbsp;dir：目录；<br/>-&nbsp;file：文件。 |
+| subFiles | Array | 文件列表。 |
+
+fail返回错误代码：
+
+| 错误码 | 说明 |
+| -------- | -------- |
+| 202 | 出现参数错误。 |
+| 300 | 出现I/O错误。 |
+| 301 | 文件或目录不存在。 |
+
+**示例：**
+
+```
+export default {    
+  get() {        
+    file.get({            
+      uri: 'internal://app/file',            
+      success: function(data) {                
+        console.log(data.uri);            
+      },            
+      fail: function(data, code) {                
+        console.error('call fail callback fail, code: ' + code + ', data: ' + data);            
+      },
+    });    
+  }
+}
+```
+
+
+## file.delete
+
+delete(Object): void
+
+删除本地文件。
+
+**系统能力：** SystemCapability.FileManagement.File.FileIO
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| uri | string | 是 | 删除文件的uri，不能是应用资源路径。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+fail返回错误代码：
+
+| 错误码 | 说明 |
+| -------- | -------- |
+| 202 | 参数错误。 |
+| 300 | I/O错误。 |
+| 301 | 文件或目录不存在。 |
+
+**示例：**
+
+```
+export default {    
+  delete() {        
+    file.delete({            
+      uri: 'internal://app/my_file',            
+      success: function() {                
+        console.log('call delete success.');            
+      },            
+      fail: function(data, code) {                
+        console.error('call fail callback fail, code: ' + code + ', data: ' + data);            
+      },
+    });    
+  }
+}
+```
+
+
+## file.writeText
+
+writeText(Object): void
+
+写文本内容到指定文件。仅支持文本文档读写。
+
+**系统能力：** SystemCapability.FileManagement.File.FileIO
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| uri | string | 是 | 本地文件uri，如果文件不存在会创建文件。 |
+| text | string | 是 | 写入的字符串。 |
+| encoding | string | 否 | 编码格式，默认为UTF-8。 |
+| append | boolean | 否 | 是否追加模式，默认为false。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+fail返回错误代码：
+
+| 错误码 | 说明 |
+| -------- | -------- |
+| 202 | 参数错误。 |
+| 300 | I/O错误。 |
+
+**示例：**
+
+```
+export default {    
+  writeText() {        
+    file.writeText({            
+      uri: 'internal://app/test.txt',            
+      text: 'Text that just for test.',            
+      success: function() {                
+        console.log('call writeText success.');            
+      },            
+      fail: function(data, code) {                
+        console.error('call fail callback fail, code: ' + code + ', data: ' + data);            
+      },        
+    });    
+  }
+}
+```
+
+
+## file.writeArrayBuffer
+
+writeArrayBuffer(Object): void
+
+写Buffer内容到指定文件。仅支持文本文档读写。
+
+**系统能力：** SystemCapability.FileManagement.File.FileIO
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| uri | string | 是 | 本地文件uri，如果文件不存在会创建文件。 |
+| buffer | Uint8Array | 是 | 写入的Buffer。 |
+| position | number | 否 | 文件开始写入数据的位置的偏移量，默认为0。 |
+| append | boolean | 否 | 是否追加模式，默认为false。当设置为true时，position参数无效。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+fail返回错误代码：
+
+| 错误码 | 说明 |
+| -------- | -------- |
+| 202 | 出现参数错误。 |
+| 300 | 出现I/O错误。 |
+
+**示例：**
+
+```
+export default {    
+  writeArrayBuffer() {       
+    file.writeArrayBuffer({           
+      uri: 'internal://app/test',           
+      buffer: new Uint8Array(8), //buffer为Uint8Array类型           
+      success: function() {                
+        console.log('call writeArrayBuffer success.');            
+      },           
+      fail: function(data, code) {                
+        console.error('call fail callback fail, code: ' + code + ', data: ' + data);            
+      },
+    });    
+  }
+}
+```
+
+
+## file.readText
+
+readText(Object): void
+
+从指定文件中读取文本内容。仅支持文本文档读写。
+
+**系统能力：** SystemCapability.FileManagement.File.FileIO
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| uri | string | 是 | 本地文件uri。 |
+| encoding | string | 否 | 编码格式，缺省为UTF-8。 |
+| position | number | 否 | 读取的起始位置，默认值为文件的起始位置。 |
+| length | number | 否 | 读取的长度，默认值为4096。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+success返回值：
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| text | string | 读取到的文本内容。 |
+
+fail返回错误代码：
+
+| 错误码 | 说明 |
+| -------- | -------- |
+| 202 | 出现参数错误。 |
+| 300 | 出现I/O错误。 |
+| 301 | 文件或目录不存在。 |
+| 302 | 要读取的文件内容超过4KB。 |
+
+**示例：**
+
+```
+export default {    
+  readText() {        
+    file.readText({            
+      uri: 'internal://app/text.txt',            
+      success: function(data) {                
+        console.log('call readText success: ' + data.text);            
+      },            
+      fail: function(data, code) {                
+        console.error('call fail callback fail, code: ' + code + ', data: ' + data);            
+      },        
+    });    
+  }
+}
+```
+
+
+## file.readArrayBuffer
+
+readArrayBuffer(Object): void
+
+从指定文件中读取Buffer内容。仅支持文本文档读写。
+
+**系统能力：** SystemCapability.FileManagement.File.FileIO
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| uri | string | 是 | 本地文件uri。 |
+| position | number | 否 | 读取的起始位置，缺省为文件的起始位置。 |
+| length | number | 否 | 需要读取的长度，缺省则读取到文件结尾。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+success返回值：
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| buffer | Uint8Array | 读取到的文件内容。 |
+
+fail返回错误代码：
+
+| 错误码 | 说明 |
+| -------- | -------- |
+| 202 | 出现参数错误。 |
+| 300 | 出现I/O错误。 |
+| 301 | 文件或目录不存在。 |
+
+**示例：**
+
+```
+export default {    
+  readArrayBuffer() {        
+    file.readArrayBuffer({            
+      uri: 'internal://app/test',            
+      position: 10,            
+      length: 200,            
+      success: function(data) {                
+        console.log('call readArrayBuffer success: ' + data.buffer);            
+      },            
+      fail: function(data, code) {                
+        console.error('call fail callback fail, code: ' + code + ', data: ' + data);            
+      },
+    });    
+  }
+}
+```
+
+
+## file.access
+
+access(Object): void
+
+判断指定文件或目录是否存在。
+
+**系统能力：** SystemCapability.FileManagement.File.FileIO
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| uri | string | 是 | 目录或文件uri。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+fail返回错误代码：
+
+| 错误码 | 说明 |
+| -------- | -------- |
+| 202 | 出现参数错误。 |
+| 300 | 出现I/O&nbsp;错误。 |
+| 301 | 文件或目录不存在。 |
+
+**示例：**
+
+```
+export default {    
+  access() {        
+    file.access({            
+      uri: 'internal://app/test',            
+      success: function() {                
+        console.log('call access success.');            
+      },            
+      fail: function(data, code) {                
+        console.error('call fail callback fail, code: ' + code + ', data: ' + data);            
+      },        
+    });    
+  }
+}
+```
+
+
+## file.mkdir
+
+mkdir(Object): void
+
+创建指定目录。
+
+**系统能力：** SystemCapability.FileManagement.File.FileIO
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| uri | string | 是 | 目录的uri路径。 |
+| recursive | boolean | 否 | 是否递归创建该目录的上级目录，缺省为false。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+fail返回错误代码：
+
+| 错误码 | 说明 |
+| -------- | -------- |
+| 202 | 出现参数错误。 |
+| 300 | 出现I/O&nbsp;错误。 |
+
+**示例：**
+
+```
+export default {    
+  mkdir() {        
+    file.mkdir({            
+      uri: 'internal://app/test_directory',            
+      success: function() {                
+        console.log('call mkdir success.');            
+      },            
+      fail: function(data, code) {                
+        console.error('call fail callback fail, code: ' + code + ', data: ' + data);            
+      },
+    });    
+  }
+}
+```
+
+
+## file.rmdir
+
+rmdir(Object): void
+
+删除指定目录。
+
+**系统能力：** SystemCapability.FileManagement.File.FileIO
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| uri | string | 是 | 目录的uri路径。 |
+| recursive | boolean | 否 | 是否递归删除子文件和子目录，缺省为false。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+fail返回错误代码：
+
+| 错误码 | 说明 |
+| -------- | -------- |
+| 202 | 出现参数错误。 |
+| 300 | 出现I/O&nbsp;错误。 |
+| 301 | 文件或目录不存在。 |
+
+**示例：**
+
+```
+export default {    
+  rmdir() {        
+    file.rmdir({            
+      uri: 'internal://app/test_directory',            
+      success: function() {                
+        console.log('call rmdir success.');            
+      },            
+      fail: function(data, code) {                
+        console.error('call fail callback fail, code: ' + code + ', data: ' + data);            
+      },
+    });    
+  }
+}
+```
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-location.md b/zh-cn/application-dev/reference/apis/js-apis-system-location.md
new file mode 100644
index 0000000000000000000000000000000000000000..0c5e8bde4c074f0ad3c43eeb86f53b8cb6286521
--- /dev/null
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-location.md
@@ -0,0 +1,211 @@
+# 地理位置
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> - 从API Version 7 开始，该接口不再维护，推荐使用新接口['@ohos.geolocation'](js-apis-geolocation.md)。
+> 
+> - 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+
+
+## 导入模块
+
+
+```
+import geolocation from '@system.geolocation';
+```
+
+
+## 权限列表
+
+ohos.permission.LOCATION
+
+
+## geolocation.getLocation
+
+getLocation(Object): void
+
+获取设备的地理位置。
+
+**系统能力：** SystemCapability.Location.Location.Lite
+
+**参数:**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| timeout | number | 否 | 超时时间，单位为ms，默认值为30000。<br/>设置超时，是为了防止出现权限被系统拒绝、定位信号弱或者定位设置不当，导致请求阻塞的情况。超时后会使用fail回调函数。<br/>取值范围为32位正整数。如果设置值小于等于0，系统按默认值处理。 |
+| coordType | string | 否 | 坐标系的类型，可通过getSupportedCoordTypes获取可选值，缺省值为wgs84。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+success返回值：
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| longitude | number | 设备位置信息：经度。 |
+| latitude | number | 设备位置信息：纬度。 |
+| altitude | number | 设备位置信息：海拔。 |
+| accuracy | number | 设备位置信息：精确度。 |
+| time | number | 设备位置信息：时间。 |
+
+fail返回错误代码：
+
+| 错误码 | 说明 |
+| -------- | -------- |
+| 601 | 获取定位权限失败，失败原因：用户拒绝。 |
+| 602 | 权限未声明。 |
+| 800 | 超时，失败原因：网络状况不佳或GPS不可用。 |
+| 801 | 系统位置开关未打开。 |
+| 802 | 该次调用结果未返回前接口又被重新调用，该次调用失败返回错误码。 |
+
+**示例：**
+
+```
+export default {    
+  getLocation() {        
+    geolocation.getLocation({            
+      success: function(data) {                
+        console.log('success get location data. latitude:' + data.latitude);            
+      },            
+      fail: function(data, code) {                
+        console.log('fail to get location. code:' + code + ', data:' + data);            
+      },
+    });    
+  },
+}
+```
+
+
+## geolocation.getLocationType
+
+getLocationType(Object): void
+
+获取当前设备支持的定位类型。
+
+**系统能力：** SystemCapability.Location.Location.Lite
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+success返回值：
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| types | Array&lt;string&gt; | 可选的定位类型['gps',&nbsp;'network']。 |
+
+**示例：**
+
+```
+export default {    
+  getLocationType() {        
+    geolocation.getLocationType({            
+      success: function(data) {                
+        console.log('success get location type:' + data.types[0]);            
+      },            
+      fail: function(data, code) {                
+        console.log('fail to get location. code:' + code + ', data:' + data);            
+       },        
+     });    
+  },
+}
+```
+
+
+## geolocation.subscribe
+
+subscribe(Object): void
+
+订阅设备的地理位置信息。多次调用的话，只有最后一次的调用生效。
+
+**系统能力：** SystemCapability.Location.Location.Lite
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| coordType | string | 否 | 坐标系的类型，可通过getSupportedCoordTypes获取可选值，默认值为wgs84。 |
+| success | Function | 是 | 位置信息发生变化的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+
+success返回值：
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| longitude | number | 设备位置信息：经度。 |
+| latitude | number | 设备位置信息：纬度。 |
+| altitude | number | 设备位置信息：海拔。 |
+| accuracy | number | 设备位置信息：精确度。 |
+| time | number | 设备位置信息：时间。 |
+
+fail返回错误代码：
+
+| 错误码 | 说明 |
+| -------- | -------- |
+| 601 | 获取定位权限失败，失败原因：用户拒绝。 |
+| 602 | 权限未声明。 |
+| 801 | 系统位置开关未打开。 |
+
+**示例：**
+
+```
+export default {    
+  subscribe() {        
+    geolocation.subscribe({            
+      success: function(data) {                
+        console.log('get location. latitude:' + data.latitude);            
+      },            
+      fail: function(data, code) {                
+        console.log('fail to get location. code:' + code + ', data:' + data);            
+      },        
+    });    
+  },
+}
+```
+
+
+## geolocation.unsubscribe
+
+unsubscribe(): void
+
+取消订阅设备的地理位置信息。
+
+**系统能力：** SystemCapability.Location.Location.Lite
+
+**示例：**
+
+```
+export default {    
+  unsubscribe() {        
+    geolocation.unsubscribe();    
+  },
+}
+```
+
+
+## geolocation.getSupportedCoordTypes
+
+getSupportedCoordTypes(): Array&lt;string&gt;
+
+获取设备支持的坐标系类型。
+
+**系统能力：** SystemCapability.Location.Location.Lite
+
+**返回值：**
+
+| 类型 | 非空 | 说明 |
+| -------- | -------- | -------- |
+| Array&lt;string&gt; | 是 | 表示坐标系类型，如[wgs84,&nbsp;gcj02]。 |
+
+**示例：**
+
+```
+export default {    
+  getSupportedCoordTypes() {       
+    var types = geolocation.getSupportedCoordTypes();    
+  },
+}
+```
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-mediaquery.md b/zh-cn/application-dev/reference/apis/js-apis-system-mediaquery.md
new file mode 100644
index 0000000000000000000000000000000000000000..08ca1c593baa21327cd0ce4bf589c16fe1413025
--- /dev/null
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-mediaquery.md
@@ -0,0 +1,105 @@
+# 媒体查询
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+
+
+## 导入模块
+
+
+```
+import mediaquery from '@system.mediaquery';
+```
+
+
+## mediaquery.matchMedia
+
+matchMedia(condition: string): &lt;MediaQueryList&gt;
+
+根据媒体查询条件，创建MediaQueryList对象。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**参数：** 
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| condition | string | 是 | 用于查询的条件。 |
+
+**返回值：**
+**表1** MediaQueryList
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| MediaQueryList | Object | 表示创建MediaQueryList对象的属性，详情见下表 MediaQueryList说明。 |
+
+**示例：**
+
+```
+export default {    
+  matchMedia() {        
+    var mMediaQueryList = mediaquery.matchMedia('(max-width: 466)');    
+  },
+}
+```
+
+  **表2** MediaQueryList说明
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| matches | boolean | 如果查询条件匹配成功则返回true，否则返回值为false。只读。 |
+| media | string | 序列化的媒体查询条件，只读。 |
+| onchange | Function | matches状态变化时的执行函数。 |
+
+
+## MediaQueryList.addListener
+
+addListener(Object): void
+
+给MediaQueryList添加回调函数，回调函数应在onShow生命周期之前添加，即需要在onInit或onReady生命周期里添加。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| callback | Function | 是 | 匹配条件发生变化的响应函数。 |
+
+**示例：**
+
+```
+export default {
+  onReady() {
+    var mMediaQueryList = mediaquery.matchMedia('(max-width: 466)');
+    function maxWidthMatch(e) {
+      if (e.matches) {
+        // do something
+      }
+    }
+    mMediaQueryList.addListener(maxWidthMatch);
+  },
+}
+```
+
+
+## MediaQueryList.removeListener
+
+removeListener(Object): void
+
+移除MediaQueryList中的回调函数。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| callback | Function | 是 | 匹配条件发生变化的响应函数。 |
+
+**示例：**
+
+```
+query.removeListener(minWidthMatch);
+```
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-network.md b/zh-cn/application-dev/reference/apis/js-apis-system-network.md
new file mode 100644
index 0000000000000000000000000000000000000000..fa0b34f7a17543ffc32bbedfb21ac56445a2c113
--- /dev/null
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-network.md
@@ -0,0 +1,134 @@
+# 网络状态
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> - 从API Version 7 开始，该接口不再维护，推荐使用新接口['@ohos.telephony.observer'](js-apis-observer.md)。
+> 
+> - 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+
+
+## 导入模块
+
+
+```
+import network from '@system.network';
+```
+
+
+## 权限列表
+
+ohos.permission.GET_WIFI_INFO
+
+ohos.permission.GET_NETWORK_INFO
+
+
+## network.getType
+
+getType(Object): void
+
+获取当前设备的网络类型。
+
+**系统能力：** SystemCapability.Communication.NetManager.Core
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+success返回值：
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| metered | boolean | 是否按照流量计费。 |
+| type | string | 网络类型，可能的值有2g，3g，4g，5g，wifi，none等。 |
+
+fail返回值：
+
+| 错误码 | 说明 |
+| -------- | -------- |
+| 602 | 当前权限未声明。 |
+
+**示例：**
+
+```
+export default {    
+  getType() {        
+    network.getType({            
+      success: function(data) {                
+        console.log('success get network type:' + data.type);            
+      },            
+      fail: function(data, code) {                
+        console.log('fail to get network type code:' + code + ', data:' + data);            
+      },
+    });    
+  },
+}
+```
+
+
+## network.subscribe
+
+subscribe(Object): void
+
+订阅当前设备的网络连接状态。如果多次调用，会覆盖前一次调用。
+
+**系统能力：** SystemCapability.Communication.NetManager.Core
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| success | Function | 否 | 网络发生变化的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+
+success返回值：
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| metered | boolean | 是否按照流量计费。 |
+| type | string | 网络类型，可能的值为2g，3g，4g，5g，wifi，none。 |
+
+fail返回值：
+
+| 错误码 | 说明 |
+| -------- | -------- |
+| 602 | 当前权限未声明。 |
+| 200 | 订阅失败。 |
+
+**示例：**
+
+```
+export default {    
+  subscribe() {        
+    network.subscribe({            
+      success: function(data) {                
+        console.log('network type change type:' + data.type);            
+      },            
+      fail: function(data, code) {                
+        console.log('fail to subscribe network, code:' + code + ', data:' + data);            
+      },
+    });    
+  },
+}
+```
+
+
+## network.unsubscribe
+
+unsubscribe(): void
+
+取消订阅设备的网络连接状态。
+
+**系统能力：** SystemCapability.Communication.NetManager.Core
+
+**示例：**
+
+```
+export default {    
+  unsubscribe() {        
+    network.unsubscribe();    
+  },
+}
+```
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-notification.md b/zh-cn/application-dev/reference/apis/js-apis-system-notification.md
new file mode 100644
index 0000000000000000000000000000000000000000..e0fac1ec7e40cf7d7f7256648e9003f05cbefc9a
--- /dev/null
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-notification.md
@@ -0,0 +1,58 @@
+# 通知消息
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> - 从API Version 7 开始，该接口不再维护，推荐使用新接口['@ohos.notification'](js-apis-notification.md)。
+> 
+> - 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+
+
+## 导入模块
+
+
+```
+import notification from '@system.notification';
+```
+
+
+## notification.show
+
+show(contentTitle: string, contentText: string, clickAction: ActionInfo): void
+
+显示通知。
+
+**系统能力：** SystemCapability.Notification.Notification
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| contentTitle | string | 否 | 通知标题。 |
+| contentText | string | 否 | 通知内容。 |
+| clickAction | ActionInfo | 否 | 通知点击后触发的动作。 |
+
+  **表1** ActionInfo
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| bundleName | string | 是 | 点击通知后要跳转到的应用的bundleName |
+| abilityName | string | 是 | 点击通知后要跳转到的应用的abilityName |
+| uri | string | 是 | 要跳转到的uri，可以是下面的两种格式：<br/>-&nbsp;页面绝对路径，由配置文件中pages列表提供，例如：<br/>&nbsp;&nbsp;-&nbsp;pages/index/index<br/>&nbsp;&nbsp;-&nbsp;pages/detail/detail<br/>-&nbsp;特殊的，如果uri的值是"/"，则跳转到首页。 |
+
+**示例：**
+
+```
+export default {    
+  show() {        
+    notification.show({            
+      contentTitle: 'title info',            
+        contentText: 'text',            
+        clickAction: {                
+          bundleName: 'com.example.testapp',                
+          abilityName: 'notificationDemo',                
+          uri: '/path/to/notification',            
+         },
+     });    
+  },
+}
+;
+```
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-package.md b/zh-cn/application-dev/reference/apis/js-apis-system-package.md
new file mode 100644
index 0000000000000000000000000000000000000000..5572556897c3208026f16fc57c2b8175e67c48e4
--- /dev/null
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-package.md
@@ -0,0 +1,57 @@
+# 应用管理
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+
+
+## 导入模块
+
+
+```
+import pkg from '@system.package';
+```
+
+
+## package.hasInstalled
+
+hasInstalled(Object): void
+
+查询指定应用是否存在，或者原生应用是否安装。
+
+**需要权限：** ohos.permission.GET_BUNDLE_INFO
+
+**系统能力：** SystemCapability.BundleManager.BundleFramework
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| bundleName | string | 是 | 应用包名。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+success返回值：
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| result | boolean | 表示查询的应用是否存在，或者原生应用是否安装。 |
+
+**示例：**
+
+```
+export default {    
+  hasInstalled() {        
+    pkg.hasInstalled({            
+      bundleName: 'com.example.bundlename',            
+      success: function(data) {                
+        console.log('package has installed: ' + data);            
+      },            
+      fail: function(data, code) {               
+        console.log('query package fail, code: ' + code + ', data: ' + data);            
+      },        
+    });    
+  },
+}
+```
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-prompt.md b/zh-cn/application-dev/reference/apis/js-apis-system-prompt.md
new file mode 100644
index 0000000000000000000000000000000000000000..be6c4bf4cba3de8f1a0ce1b9b87a20fd601d0f42
--- /dev/null
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-prompt.md
@@ -0,0 +1,144 @@
+# 弹窗
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+
+
+## 导入模块
+
+
+```
+import prompt from '@system.prompt';
+```
+
+## prompt.showToast
+
+showToast(Object): void
+
+显示文本弹窗。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| message | string | 是 | 显示的文本信息。 |
+| duration | number | 否 | 默认值1500ms，建议区间：1500ms-10000ms。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;若小于1500ms则取默认值，最大取值为10000ms。 |
+| [bottom]<sup>5+</sup> | &lt;length&gt; | 否 | 设置弹窗边框距离屏幕底部的位置。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅手机和平板设备支持。 |
+
+**示例：** 
+
+```
+export default {    
+  showToast() {        
+    prompt.showToast({            
+      message: 'Message Info',            
+      duration: 2000,        
+    });    
+  }
+}
+```
+
+
+## prompt.showDialog
+
+showDialog(): void
+
+在页面内显示对话框。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| title | string | 否 | 标题文本。 |
+| message | string | 否 | 内容文本。 |
+| buttons | Array | 否 | 对话框中按钮的数组，结构为：{text:'button',&nbsp;color:&nbsp;'\#666666'}，支持1-3个按钮。其中第一个为positiveButton；第二个为negativeButton；第三个为neutralButton。 |
+| success | Function | 否 | 接口调用成功的回调函数，返回值如success返回值所示。 |
+| cancel | Function | 否 | 取消调用此接口的回调函数。 |
+| complete | Function | 否 | 弹框退出时的回调函数。 |
+
+success返回值：
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| index | number | 选中按钮在buttons数组中的索引。 |
+
+**示例：**
+
+```
+export default {    
+  showDialog() {       
+    prompt.showDialog({           
+      title: 'Title Info',            
+      message: 'Message Info',           
+      buttons: [                
+        {                    
+           text: 'button',                   
+           color: '#666666',                
+         },            
+       ],            
+       success: function(data) {                
+         console.log('dialog success callback，click button : ' + data.index);            
+       },            
+       cancel: function() {                
+         console.log('dialog cancel callback');            
+       },
+     });    
+  }
+}
+```
+
+## prompt.showActionMenu<sup>6+</sup>
+
+showActionMenu(Object): void
+
+显示操作菜单。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| title | string | 否 | 标题文本。 |
+| buttons | Array | 是 | 对话框中按钮的数组，结构为：{text:'button',&nbsp;color:&nbsp;'\#666666'}，支持1-6个按钮。大于6个按钮时弹窗不显示。 |
+| success | (data: TapIndex)&nbsp;=&gt;&nbsp;void | 否 | 接口调用成功的回调函数。 |
+| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | 接口调用失败的回调函数。 |
+| complete | ()&nbsp;=&gt;&nbsp;void | 否 | 接口调用结束的回调函数。 |
+
+  **表1** TapIndex
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| tapIndex | number | 选中按钮在buttons数组中的索引，从0开始。 |
+
+**示例：**
+
+```
+export default {    
+  showActionMenu() {        
+    prompt.showActionMenu({            
+      title: 'Title Info',            
+      buttons: [                
+        {                    
+          text: 'item1',                    
+          color: '#666666',                
+        },                
+        {                    
+           text: 'item2',                    
+           color: '#000000',                
+        },            
+      ],            
+      success: function(data) {                
+        console.log('dialog success callback，click button : ' + data.tapIndex);            
+      },            
+      fail: function(data) {                
+        console.log('dialog fail callback' + data.errMsg);            
+      },       
+    });    
+  }
+}
+```
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-request.md b/zh-cn/application-dev/reference/apis/js-apis-system-request.md
new file mode 100644
index 0000000000000000000000000000000000000000..35832ab5a7a476bca68b2394b5e8fbbdc599cee1
--- /dev/null
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-request.md
@@ -0,0 +1,191 @@
+# 上传下载
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> - 从API Version 6开始，该接口不再维护，推荐使用新接口['@ohos.request'](https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-request-0000001123753962)。
+> 
+> - 本模块首批接口从API version 4开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+
+
+## 导入模块
+
+
+```
+import request from '@system.request';
+```
+
+## 权限列表
+
+ohos.permission.INTERNET。
+
+
+## request.upload
+
+upload(Object): void
+
+上传文件。
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| url | string | 是 | 上传服务器地址。 |
+| header | Object | 否 | 请求头。 |
+| method | string | 否 | 请求方法：POST、PUT。缺省POST。 |
+| files | Array&lt;File&gt; | 是 | 待上传文件列表。请使用multipart/form-data进行提交。 |
+| data | Array&lt;RequestData&gt; | 否 | 请求的表单数据。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+**表1** File
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| filename | string | 否 | multipart&nbsp;提交时，请求头中的文件名。 |
+| name | string | 否 | multipart&nbsp;提交时，表单项目的名称，缺省为file。 |
+| uri | string | 是 | 文件的本地存储路径。 |
+| type | string | 否 | 文件的内容类型，默认根据文件名或路径的后缀获取。 |
+
+**表2** RequestData
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| name | string | 是 | 表示form&nbsp;元素的名称。 |
+| value | string | 是 | 表示form&nbsp;元素的值。 |
+
+success返回值：
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| code | number | 服务器返回的HTTP状态码。 |
+| data | string | 服务器返回的内容。根据返回头内容中的type决定该值的类型。 |
+| headers | Object | 服务器返回的返回头内容。 |
+
+fail返回值中的data中的code为HTTP状态码。
+
+**示例：**
+
+```
+export default {    
+  upLoad() {
+    request.upload({
+      url: 'http://www.path.com',
+      files: [
+        {
+           uri: 'internal://cache/path/to/file.txt',
+           name: 'file',
+           filename: 'file.txt',
+        },
+      ],
+      data:[
+        {
+          name: 'name1',
+          value: 'value',
+         },
+       ],
+       success: function(data) {
+         console.log('upload success, code:' + data.code);
+       },
+       fail: function() {
+         console.log('upload fail');
+       },
+     });
+  }
+}
+```
+
+
+## request.download
+
+download(Object): void
+
+下载文件。
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| url | string | 是 | 资源地址。 |
+| header | Object | 否 | 请求头。 |
+| description | string | 否 | 资源地址的下载描述，默认为文件名称。 |
+| filename | string | 否 | 本次下载文件的名称。默认从本次请求或资源地址中获取。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+success返回值：
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| token | string | 表示下载的&nbsp;token，获取下载状态的依据。 |
+
+fail返回错误代码：
+
+| 错误码 | 说明 |
+| -------- | -------- |
+| 400 | 表示下载任务失败。 |
+
+**示例：**
+
+```
+export default {    
+  downLoad() {        
+    request.download({            
+      url: 'http://www.path.com',            
+      success: function(data) {                
+        console.log('call success callback success: ' + data.token);            
+      },            
+      fail: function(data, code) {                
+        console.log('handling fail');            
+      },        
+    });    
+  }
+}
+```
+
+
+## request.onDownloadComplete
+
+onDownloadComplete(Object): void
+
+获取下载任务状态。
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| token | string | 是 | download&nbsp;接口返回的结果&nbsp;token。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+success返回值：
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| uri | string | 表示下载文件的uri。 |
+
+fail返回错误代码：
+
+| 错误码 | 说明 |
+| -------- | -------- |
+| 400 | 表示下载任务失败。 |
+| 401 | 表示不存在该下载任务。 |
+
+**示例：**
+
+```
+export default {    
+  onDownloadComplete() {        
+    request.onDownloadComplete({            
+      token: 'token-index',            
+      success: function(data) {                
+        console.log('download success, uri:' + data.uri);            
+      },            
+      fail: function(data, code) {                
+        console.log('download fail');            
+      },
+    });    
+  }
+}
+```
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-router.md b/zh-cn/application-dev/reference/apis/js-apis-system-router.md
new file mode 100644
index 0000000000000000000000000000000000000000..a6264dc54e263d4a3f1223736463d624c95d31de
--- /dev/null
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-router.md
@@ -0,0 +1,326 @@
+# 页面路由
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+
+
+## 导入模块
+
+
+```
+import router from '@system.router';
+```
+
+## router.push
+
+push(Object): void
+
+跳转到应用内的指定页面。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| uri | string | 是 | 表示目标页面的uri，可以用以下两种格式：<br/>-&nbsp;页面绝对路径，由配置文件中pages列表提供，例如：<br/>&nbsp;&nbsp;-&nbsp;pages/index/index<br/>&nbsp;&nbsp;-&nbsp;pages/detail/detail<br/>-&nbsp;特殊值，如果uri的值是"/"，则跳转到首页。 |
+| params | Object | 否 | 跳转时要同时传递到目标页面的数据，跳转到目标页面后，参数可以在页面中直接使用，如this.data1(data1为跳转时params参数中的key值)。如果目标页面中已有该字段，则其值会被传入的字段值覆盖。 |
+
+**示例：**
+
+```
+// 在当前页面中
+export default {
+  pushPage() {
+    router.push({
+      uri: 'pages/routerpage2/routerpage2',
+      params: {
+        data1: 'message',
+        data2: {
+          data3: [123, 456, 789]
+	},
+      },
+    });
+  }
+}
+```
+
+
+```
+// 在routerpage2页面中
+export default {
+  data: {
+    data1: 'default',
+    data2: {
+      data3: [1, 2, 3]
+    }
+  },
+  onInit() {
+    console.info('showData1:' + this.data1);
+    console.info('showData3:' + this.data2.data3);
+  }
+}
+```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 页面路由栈支持的最大Page数量为32。
+
+
+## router.replace
+
+replace(Object): void
+
+用应用内的某个页面替换当前页面，并销毁被替换的页面。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Lite
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| uri | string | 是 | 目标页面的uri，可以是以下的两种格式：<br/>-&nbsp;页面绝对路径，由配置文件中pages列表提供，例如：<br/>&nbsp;&nbsp;-&nbsp;pages/index/index<br/>&nbsp;&nbsp;-&nbsp;pages/detail/detail<br/>-&nbsp;特殊值，如果uri的值是"/"，则跳转到首页。 |
+| params | Object | 否 | 跳转时要同时传递到目标页面的数据，跳转到目标页面后，参数可以在页面中直接使用，如this.data1(data1为跳转时params参数中的key值)。如果目标页面中已有该字段，则其值会被传入的字段值覆盖。 |
+
+**示例：**
+
+```
+// 在当前页面中
+export default {
+  replacePage() {
+    router.replace({
+      uri: 'pages/detail/detail',
+      params: {
+        data1: 'message',
+      },
+    });
+  }
+}
+```
+
+
+```
+// 在detail页面中
+export default {
+  data: {
+    data1: 'default'
+  },
+  onInit() {
+    console.info('showData1:' + this.data1)
+  }
+}
+```
+
+## router.back
+
+back(Object): void
+
+返回上一页面或指定的页面。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| uri | string | 否 | 返回到指定uri的界面，如果页面栈上没有uri页面，则不响应该情况。如果uri未设置，则返回上一页。 |
+| params | Object | 否 | 跳转时要同时传递到目标页面的数据 |
+
+**示例：**
+
+```
+// index页面
+export default {    
+  indexPushPage() {        
+    router.push({            
+      uri: 'pages/detail/detail',        
+    });        
+  }
+}
+```
+
+
+```
+// detail页面
+export default {    
+  detailPushPage() {        
+    router.push({            
+      uri: 'pages/mall/mall',        
+    });    
+  }
+}
+```
+
+
+```
+// mall页面通过back，将返回detail页面
+export default {    
+  mallBackPage() {        
+    router.back();    
+  }
+}
+```
+
+
+```
+// detail页面通过back，将返回index页面
+export default {    
+  defaultBack() {        
+    router.back();    
+  }
+}
+```
+
+
+```
+// 通过back，返回到detail页面
+export default {    
+  backToDetail() {        
+    router.back({uri:'pages/detail/detail'});    
+  }
+}
+```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 示例中的uri字段是页面路由，由配置文件中的pages列表指定。
+
+## router.clear
+
+clear(): void
+
+清空页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**示例：**
+
+```
+export default {    
+  clearPage() {        
+    router.clear();    
+  }
+}
+```
+
+## router.getLength
+
+getLength(): string
+
+获取当前在页面栈内的页面数量。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**返回值：**
+
+| 类型 | 说明 |
+| -------- | -------- |
+| string | 页面数量，页面栈支持最大数值是32。 |
+
+**示例：**
+
+```
+export default {     
+  getLength() {        
+    var size = router.getLength();        
+    console.log('pages stack size = ' + size);    
+  }
+}
+```
+
+## router.getState
+
+getState(): &lt;RouterState&gt;
+
+获取当前页面的状态信息。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**返回值：**
+**表1** RouterState
+
+| 参数名 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| index | number | 表示当前页面在页面栈中的索引。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;从栈底到栈顶，index从1开始递增。 |
+| name | string | 表示当前页面的名称，即对应文件名。 |
+| path | string | 表示当前页面的路径。 |
+
+**示例：**
+
+```
+export default {     
+  getState() {        
+    var page = router.getState();
+    console.log('current index = ' + page.index);
+    console.log('current name = ' + page.name);
+    console.log('current path = ' + page.path);
+  }
+}
+```
+
+## router.enableAlertBeforeBackPage<sup>6+</sup>
+
+enableAlertBeforeBackPage(Object): void
+
+开启页面返回询问对话框。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| message | string | 是 | 询问对话框内容。 |
+| success | ()&nbsp;=&gt;&nbsp;void | 否 | 接口调用成功的回调函数。 |
+| fail | ()&nbsp;=&gt;&nbsp;void | 否 | 接口调用失败的回调函数。 |
+| complete | ()&nbsp;=&gt;&nbsp;void | 否 | 接口调用结束的回调函数。 |
+
+**示例：**
+
+```
+export default {    
+  enableAlertBeforeBackPage() {        
+    router.enableAlertBeforeBackPage({            
+      message: 'Message Info',            
+      success: function() {                
+        console.log('success');            
+      },            
+      fail: function() {                
+        console.log('fail');            
+      },        
+    });    
+  }
+}
+```
+
+## router.disableAlertBeforeBackPage<sup>6+</sup>
+
+disableAlertBeforeBackPage(Object): void
+
+禁用页面返回询问对话框。
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| success | ()&nbsp;=&gt;&nbsp;void | 否 | 接口调用成功的回调函数。 |
+| fail | ()&nbsp;=&gt;&nbsp;void | 否 | 接口调用失败的回调函数。 |
+| complete | ()&nbsp;=&gt;&nbsp;void | 否 | 接口调用结束的回调函数。 |
+
+**示例：**
+
+```
+export default {    
+  disableAlertBeforeBackPage() {        
+    router.disableAlertBeforeBackPage({            
+      success: function() {                
+        console.log('success');            
+      },            
+      fail: function() {                
+        console.log('fail');            
+      },        
+    });    
+  }
+}
+```
+
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-sensor.md b/zh-cn/application-dev/reference/apis/js-apis-system-sensor.md
new file mode 100644
index 0000000000000000000000000000000000000000..498ba951ea8b663862f0535392956fa8f02364db
--- /dev/null
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-sensor.md
@@ -0,0 +1,561 @@
+# 传感器
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> - 本模块首批接口从API version 4开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+> - 从API Version 8开始，该接口不再维护，推荐使用新接口[sensor](js-apis-sensor.md)。
+> - 该功能使用需要对应硬件支持，仅支持真机调试。
+
+
+## 导入模块
+
+
+```
+import sensor from '@system.sensor';
+```
+
+
+## 权限列表
+
+计步器：ohos.permission.ACTIVITY_MOTION
+
+心率：ohos.permission.READ_HEALTH_DATA
+
+加速度：ohos.permission.ACCELEROMETER
+
+陀螺仪：ohos.permission.GYROSCOPE
+
+
+## 传感器错误码列表
+
+  | 错误码 | 说明 | 
+| -------- | -------- |
+| 900 | 当前设备不支持相应的传感器。 |
+
+## sensor.subscribeAccelerometer
+
+subscribeAccelerometer(Object): void
+
+观察加速度数据变化。针对同一个应用，多次点击调用时，会覆盖前面的调用效果，即仅最后一次调用生效。
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 | 
+| -------- | -------- | -------- | -------- |
+| interval | string | 是 | 频率参数，加速度的回调函数执行频率。<br/>默认为normal，可选值有：<br/>-&nbsp;game：极高的回调频率，20ms/次，适用于游戏。<br/>-&nbsp;ui：较高的回调频率，60ms/次，适用于UI更新。<br/>-&nbsp;normal：普通的回调频率，200ms/次，低功耗。 | 
+| success | Function | 是 | 感应到加速度数据变化后的回调函数。 | 
+| fail | Function | 否 | 接口调用失败的回调函数。 | 
+
+success返回值：
+
+  | 参数名 | 类型 | 说明 | 
+| -------- | -------- | -------- |
+| x | number | x轴的加速度。 | 
+| y | number | y轴的加速度。 | 
+| z | number | z轴的加速度。 | 
+
+**示例：**
+
+```
+sensor.subscribeAccelerometer({
+  interval: 'normal',
+  success: function(ret) {
+    console.log('X-axis data: ' + ret.x);
+    console.log('Y-axis data: ' + ret.y);
+    console.log('Z-axis data: ' + ret.z);
+  },
+  fail: function(data, code) {
+    console.error('Subscription failed. Code: ' + code + '; Data: ' + data);
+  },
+});
+```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 建议在页面销毁时，即onDestory回调中，取消数据订阅，避免不必要的性能开销。
+
+## sensor.unsubscribeAccelerometer
+
+unsubscribeAccelerometer(): void
+
+取消订阅加速度数据。
+
+**示例：**
+
+```
+sensor.unsubscribeAccelerometer();
+```
+
+## sensor.subscribeCompass
+
+subscribeCompass(Object): void
+
+订阅罗盘数据变化。针对同一个应用，多次点击调用时，会覆盖前面的调用效果，即仅最后一次调用生效。
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 | 
+| -------- | -------- | -------- | -------- |
+| success | Function | 是 | 罗盘数据改变后触发的回调函数。 | 
+| fail | Function | 否 | 接口调用失败的回调函数。 | 
+
+success返回值：
+
+  | 参数名 | 类型 | 说明 | 
+| -------- | -------- | -------- |
+| direction | number | 设备面对的方向度数。 | 
+
+**示例：**
+
+```
+sensor.subscribeCompass({
+  success: function(ret) {
+    console.log('get data direction:' + ret.direction);
+  },
+  fail: function(data, code) {
+    console.error('Subscription failed. Code: ' + code + '; Data: ' + data);
+  },
+});
+```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 建议在页面销毁时，即onDestory回调中，取消数据订阅，避免不必要的性能开销。
+
+## sensor.unsubscribeCompass
+
+unsubscribeCompass(): void
+
+取消订阅罗盘。
+
+**示例：**
+
+```
+sensor.unsubscribeCompass();
+```
+
+## sensor.subscribeProximity
+
+subscribeProximity(Object): void
+
+订阅距离感应数据变化。针对同一个应用，多次点击调用时，会覆盖前面的调用效果，即仅最后一次调用生效。
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 | 
+| -------- | -------- | -------- | -------- |
+| success | Function | 是 | 距离感应数据改变后调用的回调函数。 | 
+| fail | Function | 否 | 接口调用失败的回调函数。 | 
+
+success返回值：
+
+  | 参数名 | 类型 | 说明 | 
+| -------- | -------- | -------- |
+| distance | number | 可见物体相对于设备显示屏的接近或远离状态。 | 
+
+**示例：**
+
+```
+sensor.subscribeProximity({
+  success: function(ret) {
+    console.log('get data distance:' + ret.distance);
+  },
+  fail: function(data, code) {
+    console.error('Subscription failed. Code: ' + code + '; Data: ' + data);
+  },
+});
+```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 建议在页面销毁时，即onDestory回调中，取消数据订阅，避免不必要的性能开销。
+
+## sensor.unsubscribeProximity
+
+unsubscribeProximity(): void
+
+取消订阅距离感应。
+
+**示例：**
+
+```
+sensor.unsubscribeProximity();
+```
+
+## sensor.subscribeLight
+
+sensor.subscribeLight(Object): void
+
+订阅环境光线感应数据变化。再次调用时，会覆盖前一次调用效果，即仅最后一次调用生效。
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 | 
+| -------- | -------- | -------- | -------- |
+| success | Function | 是 | 光线感应数据改变后的回调函数。 | 
+| fail | Function | 否 | 接口调用失败的回调函数。 | 
+
+success返回值：
+
+  | 参数名 | 类型 | 说明 | 
+| -------- | -------- | -------- |
+| intensity | number | 光线强度，单位为lux。 | 
+
+**示例：**
+
+```
+sensor.subscribeLight({
+  success: function(ret) {
+    console.log('get data intensity:' + ret.intensity);
+  },
+  fail: function(data, code) {
+    console.error('Subscription failed. Code: ' + code + '; Data: ' + data);
+  },
+});
+```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 建议在页面销毁时，即onDestory回调中，取消数据订阅，避免不必要的性能开销。
+
+## sensor.unsubscribeLight
+
+unsubscribeLight(): void
+
+取消订阅环境光线感应。
+
+**示例：**
+
+```
+sensor.unsubscribeLight();
+```
+
+## sensor.subscribeStepCounter
+
+subscribeStepCounter(Object): void
+
+订阅计步传感器数据变化。针对同一个应用，多次点击调用时，会覆盖前面的调用效果，即仅最后一次调用生效。
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 | 
+| -------- | -------- | -------- | -------- |
+| success | Function | 是 | 计步传感器数据改变后的回调函数。 | 
+| fail | Function | 否 | 接口调用失败的回调函数。 | 
+
+success返回值：
+
+  | 参数名 | 类型 | 说明 | 
+| -------- | -------- | -------- |
+| steps | number | 计步传感器重启后累计记录的步数。<br/> | 
+
+**示例：**
+
+```
+sensor.subscribeStepCounter({
+  success: function(ret) {
+    console.log('get step value:' + ret.steps);
+  },
+  fail: function(data, code) {
+    console.log('Subscription failed. Code: ' + code + '; Data: ' + data);
+  },
+});
+```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 建议在页面销毁时，即onDestory回调中，取消数据订阅，避免不必要的性能开销。
+
+## sensor.unsubscribeStepCounter
+
+unsubscribeStepCounter(): void
+
+取消订阅计步传感器。
+
+**示例：**
+
+```
+sensor.unsubscribeStepCounter();
+```
+
+
+## sensor.subscribeBarometer
+
+subcribeBarometer(Object): void
+
+订阅气压传感器数据变化。针对同一个应用，多次点击调用时，会覆盖前面的调用效果，即仅最后一次调用生效。
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 | 
+| -------- | -------- | -------- | -------- |
+| success | Function | 是 | 气压传感器数据改变后的回调函数。 | 
+| fail | Function | 否 | 接口调用失败的回调函数。 | 
+
+success返回值：
+
+  | 参数名 | 类型 | 说明 | 
+| -------- | -------- | -------- |
+| pressure | number | 气压值，单位：帕斯卡。 | 
+
+**示例：**
+
+```
+sensor.subscribeBarometer({
+  success: function(ret) {
+    console.log('get data value:' + ret.pressure);
+  },
+  fail: function(data, code) {
+    console.log('Subscription failed. Code: ' + code + '; Data: ' + data);
+  },
+});
+```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 建议在页面销毁时，即onDestory回调中，取消数据订阅，避免不必要的性能开销。
+
+
+## sensor.unsubscribeBarometer
+
+unsubscribeBarometer(): void
+
+取消订阅气压传感器。
+
+**示例：**
+
+```
+sensor.unsubscribeBarometer();
+```
+
+
+## sensor.subscribeHeartRate
+
+subscribeHeartRate(Object): void
+
+订阅心率传感器数据变化。针对同一个应用，多次点击调用时，会覆盖前面的调用效果，即仅最后一次调用生效。
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 | 
+| -------- | -------- | -------- | -------- |
+| success | Function | 是 | 心率传感器数据改变后的回调函数，默认频率5s/次。 | 
+| fail | Function | 否 | 接口调用失败的回调函数。 | 
+
+success返回值：
+
+  | 参数名 | 类型 | 说明 | 
+| -------- | -------- | -------- |
+| heartRate | number | 心率值。 | 
+
+**示例：**
+
+```
+sensor.subscribeHeartRate({
+  success: function(ret) {
+    console.log('get heartrate value:' + ret.heartRate);
+  },
+  fail: function(data, code) {
+    console.log('Subscription failed. Code: ' + code + '; Data: ' + data);
+  },
+});
+```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 建议在页面销毁时，即onDestory回调中，取消数据订阅，避免不必要的性能开销。
+
+
+## sensor.unsubscribeHeartRate
+
+unsubscribeHeartRate(): void
+
+取消订阅心率。
+
+**示例：**
+
+```
+sensor.unsubscribeHeartRate();
+```
+
+## sensor.subscribeOnBodyState
+
+subscribeOnBodyState(Object): void
+
+订阅设备佩戴状态。针对同一个应用，多次点击调用时，会覆盖前面的调用效果，即仅最后一次调用生效。
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 | 
+| -------- | -------- | -------- | -------- |
+| success | Function | 是 | 穿戴状态改变后的回调函数。 | 
+| fail | Function | 否 | 接口调用失败的回调函数。 | 
+
+success返回值：
+
+  | 参数名 | 类型 | 说明 | 
+| -------- | -------- | -------- |
+| value | boolean | 是否已佩戴。 | 
+
+**示例：**
+
+```
+sensor.subscribeOnBodyState({
+  success: function(ret) {
+    console.log('get on-body state value:' + ret.value);
+  },
+  fail: function(data, code) {
+    console.log('Subscription failed. Code: ' + code + '; Data: ' + data);
+  },
+});
+```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 建议在页面销毁时，即onDestory回调中，取消数据订阅，避免不必要的性能开销。
+
+## sensor.unsubscribeOnBodyState
+
+unsubscribeOnBodyState(): void
+
+取消订阅设备佩戴状态。
+
+**示例：**
+
+```
+sensor.unsubscribeOnBodyState();
+```
+
+## sensor.getOnBodyState
+
+getOnBodyState(Object): void
+
+获取设备佩戴状态。
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 | 
+| -------- | -------- | -------- | -------- |
+| success | Function | 否 | 接口调用成功的回调函数。 | 
+| fail | Function | 否 | 接口调用失败的回调函数。 | 
+| complete | Function | 否 | 接口调用结束的回调函数。 | 
+
+success返回值：
+
+  | 参数名 | 类型 | 说明 | 
+| -------- | -------- | -------- |
+| value | boolean | 是否已佩戴。 | 
+
+**示例：**
+
+```
+sensor.getOnBodyState({
+  success: function(ret) {
+    console.log('on body state: ' + ret.value);
+  },
+  fail: function(data, code) {
+    console.log('Subscription failed. Code: ' + code + '; Data: ' + data);
+  },
+});
+```
+
+## sensor.subscribeDeviceOrientation<sup>6+</sup>
+
+subscribeDeviceOrientation(interval: string, success: (data: DeviceOrientationResponse), fail?: (data: string, code: number)): void
+
+观察设备方向传感器数据变化。
+
+针对同一个应用，多次点击调用时，会覆盖前面的调用效果，即仅最后一次调用生效；针对同一个方法内，不支持多次调用。
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 | 
+| -------- | -------- | -------- | -------- |
+| interval | string | 是 | 频率参数，设备方向传感器的回调函数执行频率。<br/>默认为normal，可选值有：<br/>-&nbsp;game：极高的回调频率，20ms/次，适用于游戏。<br/>-&nbsp;ui：较高的回调频率，60ms/次，适用于UI更新。<br/>-&nbsp;normal：普通的回调频率，200ms/次，低功耗。 | 
+| success | Function | 是 | 感应到设备方向传感器数据变化后的回调函数。 | 
+| fail | Function | 否 | 接口调用失败的回调函数。 | 
+
+ success返回值：
+  | 参数名 | 类型 | 说明 | 
+| -------- | -------- | -------- |
+| alpha | number | 当手机坐标&nbsp;X/Y&nbsp;和地球&nbsp;X/Y&nbsp;重合时，绕着&nbsp;Z&nbsp;轴转动的夹角为&nbsp;alpha。 | 
+| beta | number | 当手机坐标&nbsp;Y/Z&nbsp;和地球&nbsp;Y/Z&nbsp;重合时，绕着&nbsp;X&nbsp;轴转动的夹角为&nbsp;beta。 | 
+| gamma | number | 当手机&nbsp;X/Z&nbsp;和地球&nbsp;X/Z&nbsp;重合时，绕着&nbsp;Y&nbsp;轴转动的夹角为&nbsp;gamma。 | 
+
+**示例：**
+
+```
+sensor.subscribeDeviceOrientation({
+  interval: 'normal',
+  success: function(ret) {
+    console.log('Alpha data: ' + ret.alpha);
+    console.log('Beta data: ' + ret.beta);
+    console.log('Gamma data: ' + ret.gamma);
+  },
+  fail: function(data, code) {
+    console.error('Subscription failed. Code: ' + code + '; Data: ' + data);
+  }
+});
+```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 建议在页面销毁时，即onDestory回调中，取消数据订阅，避免不必要的性能开销。
+
+## sensor.unsubscribeDeviceOrientation<sup>6+</sup>
+
+unsubscribeDeviceOrientation(): void
+
+取消订阅设备方向传感器数据。
+
+**示例：**
+
+```
+sensor.unsubscribeDeviceOrientation();
+```
+
+## sensor.subscribeGyroscope<sup>6+</sup>
+
+subscribeGyroscope(interval: string, success: (data: GyroscopeResponse), fail?: (data: string, code: number)): void
+
+观察陀螺仪数据变化。
+
+针对同一个应用，多次点击调用时，会覆盖前面的调用效果，即仅最后一次调用生效；针对同一个方法内，不支持多次调用。
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 | 
+| -------- | -------- | -------- | -------- |
+| interval | string | 是 | 频率参数，陀螺仪的回调函数执行频率。<br/>默认为normal，可选值有：<br/>-&nbsp;game：极高的回调频率，20ms/次，适用于游戏。<br/>-&nbsp;ui：较高的回调频率，60ms/次，适用于UI更新。<br/>-&nbsp;normal：普通的回调频率，200ms/次，低功耗。 | 
+| success | Function | 是 | 感应到陀螺仪数据变化后的回调函数。 | 
+| fail | Function | 否 | 接口调用失败的回调函数。 | 
+
+success返回值：
+
+  | 参数名 | 类型 | 说明 | 
+| -------- | -------- | -------- |
+| x | number | x轴的旋转角速度。 | 
+| y | number | y轴的旋转角速度。 | 
+| z | number | z轴的旋转角速度。 | 
+
+**示例：**
+
+```
+sensor.subscribeGyroscope({
+  interval: 'normal',
+  success: function(ret) {
+    console.log('X-axis data: ' + ret.x);
+    console.log('Y-axis data: ' + ret.y);
+    console.log('Z-axis data: ' + ret.z);
+  },
+  fail: function(data, code) {
+    console.error('Subscription failed. Code: ' + code + '; data: ' + data);
+  }
+});
+```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 建议在页面销毁时，即onDestory回调中，取消数据订阅，避免不必要的性能开销。
+
+## sensor.unsubscribeGyroscope<sup>6+</sup>
+
+unsubscribeGyroscope(): void
+
+取消订阅陀螺仪数据。
+
+**示例：**
+
+```
+sensor.unsubscribeGyroscope();
+```
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-storage.md b/zh-cn/application-dev/reference/apis/js-apis-system-storage.md
new file mode 100644
index 0000000000000000000000000000000000000000..eed952738cdff3a792fe7a86c5f3f94d4f523832
--- /dev/null
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-storage.md
@@ -0,0 +1,163 @@
+# 数据存储
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>
+> - 从API Version 6开始，该接口不再维护，可以使用接口['@ohos.data.storage'](js-apis-data-storage.md)。在API Version 9后，推荐使用新接口 ['@ohos.data.preferences'](js-apis-data-preferences.md)。
+>
+> - 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+
+
+## 导入模块
+
+
+```
+import storage from '@system.storage';
+```
+
+
+## storage.get
+
+get(Object): void
+
+读取存储的内容。
+
+**系统能力：** SystemCapability.DistributedDataManager.Preferences.Core
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| key | string | 是 | 内容索引。 |
+| default | string | 否 | key不存在则返回的默认值。 |
+| success | Function | 否 | 接口调用成功的回调函数，返回存储的内容。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+**示例：**
+
+```
+export default {    
+  storageGet() {        
+    storage.get({            
+      key: 'storage_key',            
+      success: function(data) {                
+        console.log('call storage.get success: ' + data);            
+      },            
+      fail: function(data, code) {                
+        console.log('call storage.get fail, code: ' + code + ', data: ' + data);            
+      },            
+      complete: function() {                
+        console.log('call complete');            
+      },
+    });    
+  }
+}
+```
+
+
+## storage.set
+
+set(Object): void
+
+修改存储的内容。
+
+**系统能力：** SystemCapability.DistributedDataManager.Preferences.Core
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| key | string | 是 | 要修改的存储内容的索引。 |
+| value | string | 否 | 新值。最大长度128。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+**示例：**
+
+```
+export default {    
+  storageSet() {        
+    storage.set({            
+      key: 'storage_key',            
+      value: 'storage value',            
+      success: function() {                
+        console.log('call storage.set success.');            
+      },            
+      fail: function(data, code) {                
+        console.log('call storage.set fail, code: ' + code + ', data: ' + data);            
+      },        
+    });    
+  }
+}
+```
+
+
+## storage.clear
+
+clear(Object): void
+
+清空存储的内容。
+
+**系统能力：** SystemCapability.DistributedDataManager.Preferences.Core
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+**示例：**
+
+```
+export default {    
+  storageClear() {        
+    storage.clear({            
+      success: function() {                
+        console.log('call storage.clear success.');            
+      },            
+      fail: function(data, code) {                
+        console.log('call storage.clear fail, code: ' + code + ', data: ' + data);            
+      },        
+    });    
+  }
+}
+```
+
+
+## storage.delete
+
+delete(Object): void
+
+删除存储的内容。
+
+**系统能力：** SystemCapability.DistributedDataManager.Preferences.Core
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------- | -------- | -------- |
+| key | string | 是 | 内容索引。 |
+| success | Function | 否 | 接口调用成功的回调函数。 |
+| fail | Function | 否 | 接口调用失败的回调函数。 |
+| complete | Function | 否 | 接口调用结束的回调函数。 |
+
+**示例：**
+
+```
+export default {    
+  storageDelete() {        
+    storage.delete({            
+      key: 'Storage1',            
+      success: function() {                
+        console.log('call storage.delete success.');            
+      },            
+      fail: function(data, code) {                
+        console.log('call storage.delete fail, code: ' + code + ', data: ' + data);            
+      },        
+    });    
+  }
+}
+```
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-time.md b/zh-cn/application-dev/reference/apis/js-apis-system-time.md
index b2389c5b57ddc4471e5c53894b49eb2771fef593..f19a8fb1cfb80abbf91af7a5e1721cc7a7f563f3 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-system-time.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-time.md
@@ -6,7 +6,7 @@
 
 ## 导入模块
 
-  
+
 ```
 import systemTime from '@ohos.systemTime';
 ```
@@ -29,7 +29,7 @@ setTime(time : number, callback : AsyncCallback&lt;void&gt;) : void
   | callback | AsyncCallback&lt;void&gt; | 是 | 回调函数，可以在回调函数中处理接口返回值。 | 
 
 - 示例：
-    
+  
   ```
   // time对应的时间为2021-01-20 02:36:25
   var time = 1611081385000;
@@ -64,7 +64,7 @@ setTime(time : number) : Promise&lt;void&gt;
   | Promise&lt;void&gt; | 返回的异步回调函数。 | 
 
 - 示例：
-    
+  
   ```
   // time对应的时间为2021-01-20 02:36:25
   var time = 1611081385000;
@@ -91,7 +91,7 @@ getCurrentTime(isNano?: boolean, callback: AsyncCallback&lt;number&gt;): void
   | callback | AsyncCallback&lt;number&gt; | 是 | 回调函数，返回自&nbsp;Unix&nbsp;纪元以来经过的时间。 | 
 
 - 示例：
-    
+  
   ```
   systemTime.getCurrentTime(true, (error, data) => {
       if (error) {
@@ -122,7 +122,7 @@ getCurrentTime(isNano?: boolean): Promise&lt;number&gt;
   | Promise&lt;number&gt; | 以Promise形式返回结果，返回自&nbsp;Unix&nbsp;纪元以来经过的时间。 | 
 
 - 示例：
-    
+  
   ```
   systemTime.getCurrentTime().then((data) => {
       console.log(`systemTime.getCurrentTime success data : ` + JSON.stringify(data));
@@ -147,7 +147,7 @@ getRealActiveTime(isNano?: boolean, callback: AsyncCallback&lt;number&gt;): void
   | callback | AsyncCallback&lt;number&gt; | 是 | 回调函数，返回自系统启动以来但不包括度睡眠时间经过的时间。 | 
 
 - 示例：
-    
+  
   ```
   systemTime.getRealActiveTime(true, (error, data) => {
       if (error) {
@@ -178,7 +178,7 @@ getRealActiveTime(isNano?: boolean): Promise&lt;number&gt;
   | Promise&lt;number&gt; | 以Promise形式返回结果，返回自系统启动以来但不包括度睡眠时间经过的时间。 | 
 
 - 示例：
-    
+  
   ```
   systemTime.getCurrentTime().then((data) => {
       console.log(`systemTime.getRealActiveTime success data : ` + JSON.stringify(data));
@@ -203,7 +203,7 @@ getRealTime(callback: AsyncCallback&lt;number&gt;): void
   | callback | AsyncCallback&lt;number&gt; | 是 | 回调函数，返回自系统启动以来包括深度睡眠时间经过的毫秒数。 | 
 
 - 示例：
-    
+  
   ```
   systemTime.getRealTime(true, (error, data) => {
       if (error) {
@@ -234,7 +234,7 @@ getRealTime(): Promise&lt;number&gt;
   | Promise&lt;number&gt; | 以Promise形式返回结果，返回自系统启动以来包括深度睡眠时间经过的时间。 | 
 
 - 示例：
-    
+  
   ```
   systemTime.getRealTime().then((data) => {
       console.log(`systemTime.getRealTime success data: ` + JSON.stringify(data));
@@ -261,7 +261,7 @@ setDate(date: Date, callback: AsyncCallback&lt;void&gt;): void
   | callback | AsyncCallback&lt;void&gt; | 是 | 回调函数，可以在回调函数中处理接口返回值。 | 
 
 - 示例：
-    
+  
   ```
   var data = new Date("October 13, 2020 11:13:00");
   systemTime.setDate(data,(error, data) => {       
@@ -295,7 +295,7 @@ setDate(date: Date): Promise&lt;void&gt;
   | Promise&lt;void&gt; | 返回的异步回调函数。 | 
 
 - 示例：
-    
+  
   ```
   var data = new Date("October 13, 2020 11:13:00"); 
   systemTime.setDate(data).then((value) => {        
@@ -320,7 +320,7 @@ getDate(callback: AsyncCallback&lt;Date&gt;): void
   | callback | AsyncCallback&lt;Date&gt; | 是 | 回调函数，返回当前系统日期。 | 
 
 - 示例：
-    
+  
   ```
   systemTime.getDate((error, data) => {
       if (error) {
@@ -346,7 +346,7 @@ getDate(): Promise&lt;Date&gt;
   | Promise&lt;Date&gt; | 以Promise形式返回结果，返回当前系统日期。 | 
 
 - 示例：
-    
+  
   ```
   systemTime.getDate().then((data) => {
       console.log(`systemTime.getDate success data : ` + JSON.stringify(data));
@@ -373,7 +373,7 @@ setTimezone(timezone: string, callback: AsyncCallback&lt;void&gt;): void
   | callback | AsyncCallback&lt;void&gt; | 是 | 回调函数，可以在回调函数中处理接口返回值。 | 
 
 - 示例：
-    
+  
   ```
   systemTime.setTimezone('Asia/Shanghai', (error, data) => {       
       if (error) {          
@@ -406,7 +406,7 @@ setTimezone(timezone: string): Promise&lt;void&gt;
   | Promise&lt;void&gt; | 返回的异步回调函数。 | 
 
 - 示例：
-    
+  
   ```
   systemTime.setTimezone('Asia/Shanghai').then((data) => {        
       console.log(`systemTime.setTimezone success data : ` + JSON.stringify(data));     
@@ -430,7 +430,7 @@ getTimeZone(callback: AsyncCallback&lt;string&gt;): void
   | callback | AsyncCallback&lt;string&gt; | 是 | 回调函数，返回系统时区。 | 
 
 - 示例：
-    
+  
   ```
   systemTime.getTimeZone((error, data) => {
       if (error) {
@@ -456,7 +456,7 @@ getTimeZone(): Promise&lt;string&gt;
   | Promise&lt;string&gt; | 以Promise形式返回结果，返回系统时区。 | 
 
 - 示例：
-    
+  
   ```
   systemTime.getDate().then((data) => {
       console.log(`systemTime.getTimeZone success data : ` + JSON.stringify(data));
diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-vibrate.md b/zh-cn/application-dev/reference/apis/js-apis-system-vibrate.md
new file mode 100644
index 0000000000000000000000000000000000000000..b30152d767b1b7216700bd3f11a4811500307512
--- /dev/null
+++ b/zh-cn/application-dev/reference/apis/js-apis-system-vibrate.md
@@ -0,0 +1,46 @@
+# 振动
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> - 本模块首批接口从API version 4开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+> - 从API Version 8开始，该接口不再维护，推荐使用新接口[vibrator](js-apis-vibrator.md)。
+> - 该功能使用需要对应硬件支持，仅支持真机调试。
+
+
+## 导入模块
+
+
+```
+import vibrator from '@system.vibrator';
+```
+
+
+## vibrator.vibrate
+
+vibrate(Object): void
+
+触发设备振动。
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明 | 
+| -------- | -------- | -------- | -------- |
+| mode | string | 否 | 振动的模式，其中long表示长振动，short表示短振动，默认值为long。 |
+
+**示例：**
+
+```
+vibrator.vibrate({
+  mode: 'short',
+  success: function(ret) {
+    console.log('vibrate is successful');
+  },
+  fail: function(ret) {
+    console.log('vibrate is failed');
+  },
+  complete: function(ret) {
+    console.log('vibrate is completed');
+  }
+});
+```
+
diff --git a/zh-cn/application-dev/reference/apis/js-apis-volumemanager.md b/zh-cn/application-dev/reference/apis/js-apis-volumemanager.md
index 55913343e0462c816c5592d07d09cc5b5d78cff5..a11bb17eb929dde989a6f221f364ba9fcbb25e7c 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-volumemanager.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-volumemanager.md
@@ -174,6 +174,6 @@ unmount(volumeId: string, callback:AsyncCallback&lt;boolean&gt;):void
 | id<sup>9+</sup>          | number  | 卷id                 |
 | uuid<sup>9+</sup>        | string  | 卷uuid               |
 | description<sup>9+</sup> | string  | 卷相关描述           |
-| removable<sup>9+</sup> | boolean | 是否为可移动存储设备 |
+| removeAble<sup>9+</sup>  | boolean | 是否为可移动存储设备 |
 | state<sup>9+</sup>       | int     | 当前卷状态           |
 | path<sup>9+</sup>        | string  | 卷的挂载地址         |
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/apis/js-apis-wallpaper.md b/zh-cn/application-dev/reference/apis/js-apis-wallpaper.md
index 754db5beae525718482eb88dd5c2950bfcbf8898..212f15f2fe30dbd7c7c6ef209606bf7ec6d2dc0e 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-wallpaper.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-wallpaper.md
@@ -6,7 +6,7 @@
 
 ## 导入模块
 
-  
+
 ```
 import wallpaper from '@ohos.wallpaper';
 ```
@@ -39,7 +39,7 @@ getColors(wallpaperType: WallpaperType, callback: AsyncCallback&lt;Array&lt;Rgba
   | callback | AsyncCallback&lt;Array&lt;[RgbaColor](#rgbacolor)&gt;&gt; | 是 | 回调函数，返回壁纸的主要颜色信息。 | 
 
 - 示例：
-    
+  
   ```
   wallpaper.getColors(wallpaper.WallpaperType.WALLPAPER_SYSTEM, (error, data) => {
       if (error) {
@@ -70,7 +70,7 @@ getColors(wallpaperType: WallpaperType): Promise&lt;Array&lt;RgbaColor&gt;&gt;
   | Promise&lt;Array&lt;[RgbaColor](#rgbacolor)&gt;&gt; | 返回壁纸的主要颜色信息。 | 
 
 - 示例：
-    
+  
   ```
   wallpaper.getColors(wallpaper.WallpaperType.WALLPAPER_SYSTEM).then((data) => {
       console.log(`success to getColors.`);
@@ -95,7 +95,7 @@ getId(wallpaperType: WallpaperType, callback: AsyncCallback&lt;number&gt;): void
   | callback | AsyncCallback&lt;number&gt; | 是 | 回调函数，返回壁纸的ID。如果配置了指定类型的壁纸就返回一个大于等于0的数，否则返回-1。取值范围是-1~2^31-1。 | 
 
 - 示例：
-    
+  
   ```
   wallpaper.getId(wallpaper.WallpaperType.WALLPAPER_SYSTEM, (error, data) => {
       if (error) {
@@ -127,7 +127,7 @@ getId(wallpaperType: WallpaperType): Promise&lt;number&gt;
   | Promise&lt;number&gt; | 壁纸的ID。如果配置了这种壁纸类型的壁纸就返回一个大于等于0的数，否则返回-1。取值范围是-1~2^31-1。 | 
 
 - 示例：
-    
+  
   ```
   wallpaper.getId(wallpaper.WallpaperType.WALLPAPER_SYSTEM).then((data) => {
       console.log(`success to getId: ` + JSON.stringify(data));
@@ -151,7 +151,7 @@ getMinHeight(callback: AsyncCallback&lt;number&gt;): void
   | callback | AsyncCallback&lt;number&gt; | 是 | 回调函数，返回壁纸的最小高度值，单位是像素。如果返回值等于0，说明没有设置壁纸，调用者应该使用默认显示的高度值代替。 | 
 
 - 示例：
-    
+  
   ```
   wallpaper.getMinHeight((error, data) => {
       if (error) {
@@ -178,7 +178,7 @@ getMinHeight(): Promise&lt;number&gt;
   | Promise&lt;number&gt; | 返回壁纸的最小高度值，单位是像素。如果返回值等于0，说明没有设置壁纸，调用者应该使用默认显示的高度值代替。 | 
 
 - 示例：
-    
+  
   ```
   wallpaper.getMinHeight().then((data) => {
       console.log(`success to getMinHeight: ` + JSON.stringify(data));
@@ -203,7 +203,7 @@ getMinWidth(callback: AsyncCallback&lt;number&gt;): void
   | callback | AsyncCallback&lt;number&gt; | 是 | 回调函数，壁纸的最小宽度值，单位是像素。如果返回值等于0，说明没有设置壁纸，调用者应该使用默认显示的宽度值代替。 | 
 
 - 示例：
-    
+  
   ```
   wallpaper.getMinWidth((error, data) => {
       if (error) {
@@ -229,7 +229,7 @@ getMinWidth(): Promise&lt;number&gt;
   | Promise&lt;number&gt; | 壁纸的最小宽度值，单位是像素。如果返回值等于0，说明没有设置壁纸，调用者应该使用默认显示的宽度值代替。 | 
 
 - 示例：
-    
+  
   ```
   wallpaper.getMinWidth().then((data) => {
       console.log(`success to getMinWidth: ` + JSON.stringify(data));
@@ -253,7 +253,7 @@ isChangePermitted(callback: AsyncCallback&lt;boolean&gt;): void
   | callback | AsyncCallback&lt;boolean&gt; | 是 | 回调函数，返回是否允许应用改变当前用户的壁纸。如果允许返回true，否则返回false。 | 
 
 - 示例：
-    
+  
   ```
   wallpaper.isChangePermitted((error, data) => {
       if (error) {
@@ -279,7 +279,7 @@ isChangePermitted(): Promise&lt;boolean&gt;
   | Promise&lt;boolean&gt; | 返回是否允许应用改变当前用户的壁纸。如果允许返回true，否则返回false。 | 
 
 - 示例：
-    
+  
   ```
   wallpaper.isChangePermitted().then((data) => {
       console.log(`success to isChangePermitted: ` + JSON.stringify(data));
@@ -303,7 +303,7 @@ isOperationAllowed(callback: AsyncCallback&lt;boolean&gt;): void
   | callback | AsyncCallback&lt;boolean&gt; | 是 | 回调函数，返回是否允许用户设置壁纸。如果允许返回true，否则返回false。 | 
 
 - 示例：
-    
+  
   ```
   wallpaper.isOperationAllowed((error, data) => {
       if (error) {
@@ -329,7 +329,7 @@ isOperationAllowed(): Promise&lt;boolean&gt;
   | Promise&lt;boolean&gt; | 异步回调函数，返回是否允许用户设置壁纸。如果允许返回true，否则返回false。 | 
 
 - 示例：
-    
+  
   ```
   wallpaper.isOperationAllowed().then((data) => {
       console.log(`success to isOperationAllowed: ` + JSON.stringify(data));
@@ -356,7 +356,7 @@ reset(wallpaperType: WallpaperType, callback: AsyncCallback&lt;void&gt;): void
   | callback | AsyncCallback&lt;void&gt; | 是 | 回调函数，调用成功则返回是否移除成功的结果，调用失败则返回error信息。 | 
 
 - 示例：
-    
+  
   ```
   wallpaper.reset((error, data) => {
       if (error) {
@@ -389,7 +389,7 @@ reset(wallpaperType: WallpaperType): Promise&lt;void&gt;
   | Promise&lt;void&gt; | 调用成功则返回是否移除成功的结果，调用失败则返回error信息。 | 
 
 - 示例：
-    
+  
   ```
   wallpaper.reset(wallpaper.WALLPAPER_SYSTEM).then((data) => {
       console.log(`success to reset.`);
@@ -410,14 +410,14 @@ setWallpaper(uriOrPixelMap: string | image.PixelMap, wallpaperType: WallpaperTyp
 **系统能力**: SystemCapability.Miscservices.Wallpaper
 
 - 参数：
-    | 参数名 | 类型 | 必填 | 说明 | 
+    | 参数名 | 类型 | 必填 | 说明 |
   | -------- | -------- | -------- | -------- |
-  | uriOrPixelMap | string&nbsp;\|&nbsp;[ERROR:Invalid&nbsp;link:zh-cn_topic_0000001154665636.xml#xref134981523104113,link:zh-cn_topic_0000001122977382.xml#section160331714124](zh-cn_topic_0000001122977382.xml#section160331714124) | 是 | JPEG或PNG文件的Uri路径，或者PNG格式文件的位图。 | 
-  | wallpaperType | [WallpaperType](#wallpapertype) | 是 | 壁纸类型。 | 
-  | callback | AsyncCallback&lt;void&gt; | 是 | 回调函数，调用成功则返回是返回设置的结果，调用失败则返回error信息。 | 
+  | uriOrPixelMap | string&nbsp;\|[PixelMap](js-apis-image.md#pixelmap7) |  | JPEG或PNG文件的Uri路径，或者PNG格式文件的位图。 |
+  | wallpaperType | [WallpaperType](#wallpapertype) | 是 | 壁纸类型。 |
+  | callback | AsyncCallback&lt;void&gt; | 是 | 回调函数，调用成功则返回是返回设置的结果，调用失败则返回error信息。 |
 
 - 示例：
-    
+  
   ```
   // uriOrPixelMap类型为string
   let wallpaperPath = "/data/data/ohos.acts.aafwk.plrdtest.form/files/Cup_ic.jpg";
@@ -463,10 +463,10 @@ setWallpaper(uriOrPixelMap: string | image.PixelMap, wallpaperType: WallpaperTyp
 **系统能力**: SystemCapability.Miscservices.Wallpaper
 
 - 参数：
-    | 参数名 | 类型 | 必填 | 说明 | 
+    | 参数名 | 类型 | 必填 | 说明 |
   | -------- | -------- | -------- | -------- |
-  | uriOrPixelMap | string&nbsp;\|&nbsp;[ERROR:Invalid&nbsp;link:zh-cn_topic_0000001154665636.xml#xref2071734616,link:zh-cn_topic_0000001122977382.xml#section160331714124](zh-cn_topic_0000001122977382.xml#section160331714124) | 是 | JPEG或PNG文件的Uri路径，或者PNG格式文件的位图。 | 
-  | wallpaperType | [WallpaperType](#wallpapertype) | 是 | 壁纸类型。 | 
+  | uriOrPixelMap | string&nbsp;\|[PixelMap](js-apis-image.md#pixelmap7) | 是 | JPEG或PNG文件的Uri路径，或者PNG格式文件的位图。 |
+  | wallpaperType | [WallpaperType](#wallpapertype) | 是 | 壁纸类型。 |
 
 - 返回值：
     | 类型 | 说明 | 
@@ -474,7 +474,7 @@ setWallpaper(uriOrPixelMap: string | image.PixelMap, wallpaperType: WallpaperTyp
   | Promise&lt;void&gt; | 调用成功则返回是返回设置的结果，调用失败则返回error信息。 | 
 
 - 示例：
-    
+  
   ```
   // uriOrPixelMap类型为string
   let wallpaperPath = "/data/data/ohos.acts.aafwk.plrdtest.form/files/Cup_ic.jpg";
@@ -514,13 +514,13 @@ on(type: 'colorChange', callback: (colors: Array&lt;RgbaColor&gt;, wallpaperType
 **系统能力**: SystemCapability.Miscservices.Wallpaper
 
 - 参数：
-    | 参数名 | 类型 | 必填 | 说明 | 
+    | 参数名 | 类型 | 必填 | 说明 |
   | -------- | -------- | -------- | -------- |
-  | type | string | 是 | 取值为'colorChange'，表示壁纸颜色变化结果上报事件。 | 
-  | callback | function | 是 | 壁纸颜色变化触发该回调方法，返回壁纸类型和壁纸的主要颜色信息。<br/>-&nbsp;colors<br/>&nbsp;&nbsp;壁纸的主要颜色信息，其类型见[RgbaColor](#rgbacolor)。<br/>-&nbsp;wallpaperType<br/>&nbsp;&nbsp;壁纸类型。 | 
+  | type | string | 是 | 取值为'colorChange'，表示壁纸颜色变化结果上报事件。 |
+  | callback | function | 是 | 壁纸颜色变化触发该回调方法，返回壁纸类型和壁纸的主要颜色信息。<br/>-&nbsp;colors<br/>&nbsp;&nbsp;壁纸的主要颜色信息，其类型见[RgbaColor](#rgbacolor)。<br/>-&nbsp;wallpaperType<br/>&nbsp;&nbsp;壁纸类型。 |
 
 - 示例:
-    
+  
   ```
   let listener = (colors, wallpaperType) => {
       console.log(`wallpaper color changed.`);
@@ -544,7 +544,7 @@ off(type: 'colorChange', callback?: (colors: Array&lt;RgbaColor&gt;, wallpaperTy
   | callback | function | 否 | &nbsp;&nbsp;表示取消壁纸颜色变化结果上报，不填写该参数则取消订阅该type对应的所有回调。<br/>-&nbsp;colors<br/>&nbsp;&nbsp;壁纸的主要颜色信息，其类型见[RgbaColor](#rgbacolor)。<br/>-&nbsp;wallpaperType<br/>&nbsp;&nbsp;壁纸类型。 | 
 
 - 示例:
-    
+  
   ```
   let listener = (colors, wallpaperType) => {
       console.log(`wallpaper color changed.`);
diff --git a/zh-cn/application-dev/reference/apis/js-apis-workScheduler.md b/zh-cn/application-dev/reference/apis/js-apis-workScheduler.md
index b2b623dc6f9c8018aeabb4528af605b5fb96730c..8224175b470f7c8538e2975274aa4c2a5a91046a 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-workScheduler.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-workScheduler.md
@@ -269,6 +269,7 @@ isLastWorkTimeOut(workId: number): Promise\<boolean>
     .catch(err =>  {
       console.info('workschedulerLog isLastWorkTimeOut failed, because:' + err.data);
     });
+  })
 ```
 
 ## WorkInfo
diff --git a/zh-cn/application-dev/reference/arkui-js/figures/transition.gif b/zh-cn/application-dev/reference/arkui-js/figures/transition.gif
deleted file mode 100644
index 1b1aacbf3092a0ed946ce477251e60a41b365774..0000000000000000000000000000000000000000
Binary files a/zh-cn/application-dev/reference/arkui-js/figures/transition.gif and /dev/null differ
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md
index 8aefd3c4353327c655fe5bd0adcfa1ef8b5c32a9..bbf7ca807f64b5a8206a8f865dd8dcdda7bf6b06 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md
@@ -48,8 +48,10 @@ PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage
 <div>
   <list>
     <list-item type="description">
-      <image src="item.jpg" shareid="shareImage" onclick="jump" class="shared-transition-style"></image>
-      <text onclick="jump">Click on picture to Jump to ths details</text>
+      <div>
+        <image src="item.jpg" shareid="shareImage" onclick="jump" class="shared-transition-style"></image>
+        <text onclick="jump">Click on picture to Jump to ths details</text>
+      </div>
     </list-item>
   </list>
 </div>
@@ -235,145 +237,3 @@ export default {
 
    b. back场景下：退出页面栈的Page2.js应用transition-enter描述的动画配置，并进行倒播；从页面栈第二位置进入栈顶位置的Page1.js应用transition-exit描述的动画配置，并进行倒播。
    ![zh-cn_image_0000001238184345](figures/zh-cn_image_0000001238184345.png)
-
-### 示例
-
-Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2中的盒子，会回退到Page1页面。
-
-1. Page1
-
-   ```
-   <!-- xxx.hml -->
-   <div class="container">
-       <text>index</text>
-       <div class="move_page" onclick="jump"></div>
-   </div>
-   ```
-
-   ```
-   <!-- xxx.js -->
-   import router from '@system.router';
-   export default {
-       data: {
-   
-       },
-       jump() {
-           router.push({
-               uri:'pages/transition2/transition2'
-           })
-       }
-   }
-   ```
-
-   ```
-   <!-- xxx.css -->
-   .container {
-       flex-direction: column;
-       justify-content: center;
-       align-items: center;
-       width: 100%;
-       height: 100%;
-   }
-   .move_page {
-       width: 100px;
-       height: 100px;
-       background-color: #72d3fa;
-       transition-enter: go_page;
-       transition-exit: exit_page;
-       transition-duration: 5s;
-       transition-timing-function: friction;
-   }
-   
-   @keyframes go_page {
-       from {
-           opacity: 0;
-           transform: translate(0px) rotate(60deg) scale(1.0);
-       }
-   
-       to {
-           opacity: 1;
-           transform: translate(100px) rotate(360deg) scale(1.0);
-       }
-   }
-   @keyframes exit_page {
-       from {
-           opacity: 1;
-           transform: translate(200px) rotate(60deg) scale(2);
-       }
-   
-       to {
-           opacity: 0;
-           transform: translate(200px) rotate(360deg) scale(2);
-       }
-   }
-   ```
-
-   
-
-2. Page2
-
-   ```
-   <!-- xxx.hml -->
-   <div class="container">
-       <text>transition</text>
-       <div class="move_page" onclick="jumpBack"></div>
-   </div
-   ```
-
-   ```
-   <!-- xxx.js -->
-   import router from '@system.router';
-   export default {
-       data: {
-   
-       },
-       jumpBack() {
-           router.back()
-       }
-   }
-   ```
-
-   ```
-   <!-- xxx.css -->
-   .container {
-       flex-direction: column;
-       justify-content: center;
-       align-items: center;
-       width: 100%;
-       height: 100%;
-   }
-   
-   .move_page {
-       width: 100px;
-       height: 100px;
-       background-color: #f172fa;
-       transition-enter: go_page;
-       transition-exit: exit_page;
-       transition-duration: 5s;
-       transition-timing-function: ease;
-   }
-   
-   @keyframes go_page {
-       from {
-           opacity: 0;
-           transform:translate(100px) rotate(0deg) scale(1.0);
-       }
-       to {
-           opacity: 1;
-           transform:translate(100px) rotate(180deg) scale(2.0);
-       }
-   }
-   
-   @keyframes exit_page {
-       from {
-           opacity: 1;
-           transform: translate(0px) rotate(60deg) scale(1);
-       }
-       to {
-           opacity: 0;
-           transform: translate(0px) rotate(360deg) scale(1);
-       }
-   }
-   ```
-   
-   ![transition](figures/transition.gif)
diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
index fac811e748ba045bd78f38a530618f3aa24c10df..cfd6f34071a5c5a828d3c26f2f358292132103f1 100644
--- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
+++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
@@ -132,7 +132,6 @@
     - [插值计算](ts-interpolation-calculation.md)
 - 全局UI方法
     - [图片缓存](ts-methods-image-cache.md)
-    - [媒体查询](ts-methods-media-query.md)
     - 弹窗
         - [警告弹窗](ts-methods-alert-dialog-box.md)
         - [列表选择弹窗](ts-methods-action-sheet.md)
diff --git a/en/application-dev/reference/arkui-ts/figures/gauge.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422916.png
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/gauge.png
rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422916.png
diff --git a/en/application-dev/reference/arkui-ts/figures/gif-1.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193499234.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/gif-1.gif
rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193499234.gif
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239788885.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001250678457.gif
similarity index 100%
rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239788885.gif
rename to zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001250678457.gif
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
new file mode 100644
index 0000000000000000000000000000000000000000..aa5ea7c36ac30a12089ed39f237887c94fbb5f51
--- /dev/null
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
@@ -0,0 +1,63 @@
+# Gauge
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+
+数据量规图表组件，用于将数据展示为环形图表。
+
+
+## 权限列表
+
+无
+
+
+## 子组件
+
+无
+
+
+## 接口
+
+Gauge(value:{value: number, min?: number, max?: number})
+
+- 参数
+    | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | value | number | 是 | - | 当前数据值。 | 
+  | min | number | 否 | 0 | 当前数据段最小值。 | 
+  | max | number | 否 | 100 | 当前数据段最大值。 | 
+
+
+## 属性
+
+  | 名称 | 参数类型 | 默认值 | 描述 | 
+| -------- | -------- | -------- | -------- |
+| value | number | 0 | 设置当前数据图表的值。 | 
+| startAngle | Angle | -150 | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。 | 
+| endAngle | Angle | 150 | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。 | 
+| colors | Color&nbsp;\|&nbsp;Array&lt;ColorStop&gt; | - | 设置图表的颜色，支持纯色和分段渐变色设置。 | 
+| strokeWidth | Length | - | 设置环形图表的环形厚度。 |
+
+
+## 示例
+
+  
+```
+@Entry
+@Component
+struct GaugeExample {
+  build() {
+    Column() {
+      Gauge({ value: 50, min: 0, max: 100 })
+        .startAngle(210).endAngle(150)
+        .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1], [0xD94838, 1]])
+        .strokeWidth(20)
+        .width(200).height(200)
+    }.width('100%').margin({ top: 5 })
+  }
+}
+```
+
+![zh-cn_image_0000001174422916](figures/zh-cn_image_0000001174422916.png)
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md
new file mode 100644
index 0000000000000000000000000000000000000000..9ae0bffa885e09a41b855dd084545073432d39af
--- /dev/null
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md
@@ -0,0 +1,95 @@
+# Marquee
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+
+跑马灯组件，用于滚动展示一段单行文本。
+
+
+## 权限列表
+
+无
+
+
+## 子组件
+
+无
+
+
+## 接口
+
+Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })
+
+- 参数
+    | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | start | boolean | 是 | - | 控制是否进入播放状态。 | 
+  | step | number | 否 | 6 | 滚动动画文本滚动步长。 | 
+  | loop | number | 否 | -1 | 设置重复滚动的次数，小于等于零时无限循环。 | 
+  | fromStart | boolean | 否 | true | 设置文本从头开始滚动或反向滚动。 | 
+  | src | string | 是 | - | 需要滚动的文本。 | 
+
+
+## 事件
+
+  | 名称 | 功能描述 | 
+| -------- | -------- |
+| onStart(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 开始滚动时触发回调。 | 
+| onBounce(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 滚动到底时触发回调。 | 
+| onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 滚动完成时触发回调。 | 
+
+
+## 示例
+
+
+```
+@Entry
+@Component
+struct MarqueeExample {
+  @State start: boolean = false
+  @State fromStart: boolean = true
+  @State step: number = 50
+  @State loop: number = 3
+  @State src: string = "Running Marquee starts rolling"
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Marquee({
+        start: this.start,
+        step: this.step,
+        loop: this.loop,
+        fromStart: this.fromStart,
+        src: this.src
+      })
+        .fontColor(Color.White)
+        .fontSize(50)
+        .allowScale(false)
+        .fontWeight(FontWeight.Bold)
+        .backgroundColor(Color.Black)
+        .margin({bottom:40})
+        .onStart(() => {
+          console.log('Marquee animation complete onStart')
+        })
+        .onBounce(() => {
+          console.log('Marquee animation complete onBounce')
+        })
+        .onFinish(() => {
+          console.log('Marquee animation complete onFinish')
+        })
+        Button('start')
+          .onClick(() => {
+            this.start = true
+             })
+          .width(200)
+          .height(60)
+          .margin({bottom:20})
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+```
+
+![zh-cn_image_0000001193499234](figures/zh-cn_image_0000001193499234.gif)
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md
new file mode 100644
index 0000000000000000000000000000000000000000..7707e68d943582a05fe4c4d86183830b5a5a6224
--- /dev/null
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md
@@ -0,0 +1,318 @@
+# PluginComponent
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> - 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+> 
+> - 本组件均为系统接口，三方应用不支持调用。
+
+
+提供外部应用组件嵌入式显示功能，即外部应用提供的UI可在本应用内显示。
+
+
+## 权限列表
+
+无
+
+
+## 子组件
+
+无
+
+
+## 接口
+
+PluginComponent(value: { template: PluginComponentTemplate, data: any })
+
+创建插件组件，用于显示外部应用提供的UI。
+
+- 参数
+    | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+  | -------- | -------- | -------- | -------- | -------- |
+  | value | {<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject<br/>} | 是 | - | template:&nbsp;&nbsp;组件模板，用于跟提供者定义的组件绑定。<br/>data:&nbsp;传给插件组件提供者使用的数据。 |
+
+- PluginComponentTemplate类型说明
+    | 参数 | 类型 | 描述 | 
+  | -------- | -------- | -------- |
+  | source | string | 组件模板名。 | 
+  | ability | string | 提供者Ability的abilityname。 | 
+
+
+## 事件
+
+  | 名称 | 功能描述 | 
+| -------- | -------- |
+| onComplete(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 组件加载完成回调。 | 
+| onError(callback:&nbsp;(info:&nbsp;{&nbsp;errcode:&nbsp;number,&nbsp;msg:&nbsp;string&nbsp;})&nbsp;=&gt;&nbsp;void) | 组件加载错误回调。<br/>errcode:&nbsp;错误码。<br/>msg:&nbsp;错误信息。 | 
+
+
+## PluginComponentManager
+
+提供配套插件组件使用的相关接口，用于给插件组件的使用者请求组件与数据，使用者发送组件模板和数据。
+
+
+## 导入模块
+
+
+```
+import pluginComponentManager from '@ohos.plugincomponent'
+```
+
+
+## push
+
+push(param: PushParameters, callback: AsyncCallback&lt;void&gt;): void
+
+组件提供者向组件使用者主动发送组件与数据。
+
+
+- 参数
+    | 参数名 | 类型 | 必填 | 说明 |
+  | -------- | -------- | -------- | -------- |
+  | param | PushParameters | 是 | 组件使用者的详细信息，详见PushParameters参数说明。 |
+  | callback | AsyncCallback&lt;void&gt; | 是 | 此次接口调用的异步回调。 |
+
+- PushParameters参数说明
+    | 参数名 | 类型 | 必填 | 说明 |
+  | -------- | -------- | -------- | -------- |
+  | want | Want | 是 | 组件使用者Ability信息。 |
+  | name | string | 是 | 组件名称。 |
+  | data | KVObject | 否 | 组件数据值。 |
+  | extraData | KVObject | 否 | 附加数据值。 |
+
+- 示例
+  见[组件使用者调用接口](#组件使用者调用接口)示例。
+
+
+## request
+
+request(param: RequestParameters, callback: AsyncCallback&lt;RequestCallbackParameters&gt;): void
+
+组件使用者向组件提供者主动请求组件。
+
+- 参数
+    | 参数名 | 类型 | 必填 | 说明 |
+  | -------- | -------- | -------- | -------- |
+  | param | RequestParameters | 是 | 组件模板的详细请求信息，详见RequestParameters参数说明。 |
+  | callback | AsyncCallback<RequestCallbackParameters&nbsp;\|&nbsp;void&gt; | 是 | 此次请求的异步回调，&nbsp;通过回调接口的参数返回接受请求的数据。 |
+
+- RequestParameters参数说明
+    | 参数名 | 类型 | 必填 | 说明 |
+  | -------- | -------- | -------- | -------- |
+  | want | Want | 是 | 组件提供者Ability信息。 |
+  | name | string | 是 | 请求组件名称。 |
+  | data | KVObject | 是 | 附加数据。 |
+
+- RequestCallbackParameters说明
+    | 名称 | 类型 | 说明 |
+  | -------- | -------- | -------- |
+  | componentTemplate | PluginComponentTemplate | 组件模板。 |
+  | data | KVObject | 组件数据。 |
+  | extraData | KVObject | 附加数据。 |
+
+- KVObject类型说明
+    | 参数 | 类型 | 说明 | 
+  | -------- | -------- | -------- |
+  | key | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;boolean&nbsp;\|&nbsp;Array&nbsp;\|&nbsp;KVObject | KVObject用[key，value]来存储数据，key是string类型的，value可以是number，string，boolean，数组或者另外的一个KVObject。 | 
+
+
+- 示例
+  见[组件使用者调用接口](#组件使用者调用接口)示例。
+
+
+## on
+
+on(eventType: string, callback: OnPushEventCallback | OnRequestEventCallback): void
+
+提供者监听"request"类型的事件，给使用者返回通过request接口主动请求的数据；使用者监听"push"类型的事件，接收提供者通过push接口主动推送的数据。
+
+- 参数
+    | 参数名 | 类型 | 必填 | 说明 |
+  | -------- | -------- | -------- | -------- |
+  | eventType | string | 是 | 监听的事件类型，&nbsp;可选值为："push"&nbsp;、"request"。<br/>"push”：指组件提供者向使用者主动推送数据。<br/>"request”：指组件使用者向提供者主动请求数据。 |
+  | callback | OnPushEventCallback&nbsp;\|&nbsp;OnRequestEventCallback | 是 | 见callback事件说明。 |
+
+- callback事件说明
+    | 参数名 | 类型 | 说明 |
+  | -------- | -------- | -------- |
+  | OnRequestEventCallback | (source:&nbsp;Want,<br/>name:&nbsp;string,<br/>data:&nbsp;KVObject&nbsp;)&nbsp;=>RequestEventResult | 数据请求事件的回调。<br/>source:&nbsp;组件请求方Ability信息。<br/>name:&nbsp;请求组件名称。<br/>data:&nbsp;附加数据。<br/>返回值：&nbsp;请求数据结果。 |
+  | OnPushEventCallback | (source:&nbsp;Want,<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject,<br/>extraData:&nbsp;KVObject<br/>)&nbsp;=&gt;&nbsp;void | 接收提供者主动推送的数据。<br/>source:&nbsp;组件提供者Ability信息。<br/>template:&nbsp;组件模板。<br/>data:&nbsp;组件更新数据。<br/>extraData:&nbsp;附加数据。 |
+
+- RequestEventResult类型说明
+    | 参数 | 类型 | 说明 |
+  | -------- | -------- | -------- |
+  | template | string | 组件名称。 |
+  | data | KVObject | 组件数据。 |
+  | extraData | KVObjec | 附加数据。 |
+
+- 示例
+  见[组件使用者调用接口](#组件使用者调用接口)示例。
+
+
+## 示例
+
+
+### 使用PluginComponent组件
+
+
+```
+import plugin from "../../test/plugin_component.js"
+import plugincomponent from '@ohos.plugincomponent'
+
+@Entry
+@Component
+struct PluginComponentExample {
+  @StorageLink("plugincount") plugincount: Object[] = [
+    { source: 'plugincomponent1', ability: 'com.example.plugin' },
+    { source: 'plugintemplate', ability: 'com.example.myapplication' },
+    { source: 'plugintemplate', ability: 'com.example.myapplication' }]
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Text('Hello World')
+        .fontSize(50)
+        .fontWeight(FontWeight.Bold)
+      Button('Push')
+        .fontSize(50)
+        .width(400)
+        .height(100)
+        .onClick(() => {
+          plugin.Push()
+          console.log("Button('Push')")
+        })
+        .margin({ top: 20 })
+      Button('Request1')
+        .fontSize(50)
+        .width(400)
+        .height(100)
+        .margin({ top: 20 })
+        .onClick(() => {
+          plugin.Request1()
+          console.log("Button('Request1')")
+        })
+      Button('Request2')
+        .fontSize(50)
+        .width(400)
+        .height(100)
+        .margin({ top: 20 })
+        .onClick(() => {
+          plugin.Request2()
+          console.log("Button('Request2')")
+        })
+      ForEach(this.plugincount, item => {
+        PluginComponent({
+          template: { source: 'plugincomponent1', ability: 'com.example.plugin' },
+          data: { 'countDownStartValue': 'new countDownStartValue' }
+        }).size({ width: 500, height: 100 })
+          .onComplete(() => {
+            console.log("onComplete")
+          })
+          .onError(({errcode, msg}) => {
+            console.log("onComplete" + errcode + ":" + msg)
+          })
+      })
+    }
+    .width('100%')
+    .height('100%')
+}
+```
+
+
+### 组件使用者调用接口
+
+
+```
+import pluginComponentManager from '@ohos.plugincomponent'
+
+function onPushListener(source, template, data, extraData) {
+  console.log("onPushListener template.source=" + template.source)
+  var jsonObject = JSON.parse(data.componentTemplate.source)
+  console.log("request_callback1:source json object" + jsonObject)
+  var jsonArry = jsonObject.ExternalComponent
+  for (var i in jsonArry) {
+    console.log(jsonArry[i])
+  }
+  console.log("onPushListener:source json object" + jsonObject)
+  console.log("onPushListener:source json string" + JSON.stringify(jsonObject))
+  console.log("onPushListener template.ability=" + template.ability)
+  console.log("onPushListener data=" + JSON.stringify(data))
+  console.log("onPushListener extraData=" + JSON.stringify(extraData))
+}
+
+export default {
+  //register listener
+  onListener() {
+    pluginComponentManager.on("push", onPushListener)
+  },
+  Request() {
+    // 组件使用者主动发送事件
+    pluginComponentManager.request({
+        want: {
+          bundleName: "com.example.myapplication",
+          abilityName: "com.example.myapplication.MainAbility",
+        },
+        name: "plugintemplate",
+        data: {
+          "key_1": "plugin component test",
+          "key_2": 34234
+        },
+        jsonPath: "assets/js",
+      },
+      (err, data) => {
+        console.log("request_callback1: componentTemplate.ability=" + data.componentTemplate.ability)
+        console.log("request_callback1: componentTemplate.source=" + data.componentTemplate.source)
+        var jsonObject = JSON.parse(data.componentTemplate.source)
+        console.log("request_callback1:source json object" + jsonObject)
+        var jsonArry = jsonObject.ExternalComponent
+        for (var i in jsonArry) {
+          console.log(jsonArry[i])
+        }
+        console.log("request_callback1:source json string" + JSON.stringify(jsonObject))
+        console.log("request_callback1: data=" + JSON.stringify(data.data))
+        console.log("request_callback1: extraData=" + JSON.stringify(data.extraData))
+      }
+    )
+  }
+}
+
+// 组件提供者使用接口示例
+import pluginComponentManager from '@ohos.plugincomponent'
+
+function onRequestListener(source, name, data) {
+  console.log("onRequestListener name=" + name)
+  console.log("onRequestListener data=" + JSON.stringify(data))
+  return { template: "plugintemplate", data: data }
+}
+
+export default {
+  //register listener
+  onListener() {
+    pluginComponentManager.on("request", onRequestListener)
+  },
+  Push() {
+    // 组件提供者主动发送事件
+    pluginComponentManager.push(
+      {
+        want: {
+          bundleName: "com.example.myapplication",
+          abilityName: "com.example.myapplication.MainAbility",
+        },
+        name: "plugintemplate",
+        data: {
+          "key_1": "plugin component test",
+          "key_2": 34234
+        },
+        extraData: {
+          "extra_str": "this is push event"
+        },
+        jsonPath: "assets/js",
+      },
+      (err, data) => {
+        console.log("push_callback1: componentTemplate.ability=" + data.componentTemplate.ability)
+        console.log("push_callback1: componentTemplate.source=" + data.componentTemplate.source)
+        console.log("push ok!")
+      }
+    )
+  },
+}
+```
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md
new file mode 100644
index 0000000000000000000000000000000000000000..9899f76f8d5abdaed32be48cc45a80bed4e3c2c3
--- /dev/null
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md
@@ -0,0 +1,125 @@
+# Stepper
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+
+步骤导航器。
+
+
+## 权限列表
+
+无
+
+
+## 子组件
+
+仅能包含子组件[StepperItem](ts-basic-components-stepperitem.md)。
+
+
+## 接口
+
+Stepper(value?: { index?: number })
+
+
+- 参数
+    | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | index | number | 否 | 0 | 设置步骤导航器显示第几个StepperItem。 | 
+
+
+## 属性
+
+无
+
+
+## 事件
+
+  | 名称 | 描述 | 
+| -------- | -------- |
+| onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 步骤导航器最后一个StepperItem的nextLabel被点击时触发该回调&nbsp;。 | 
+| onSkip(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。 | 
+| onChange(callback:&nbsp;(prevIndex?:&nbsp;number,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击左边或者右边文本按钮进行步骤切换时触发该事件。<br/>-&nbsp;prevIndex：切换前的步骤页索引值。<br/>-&nbsp;index：切换后的步骤页（前一页或者下一页）索引值。 | 
+
+
+## 示例
+
+```
+@Entry
+@Component
+struct StepperExample {
+  @State currentIndex: number = 0
+  @State firstState: ItemState = ItemState.Normal
+  @State secondState: ItemState = ItemState.Normal
+
+  build() {
+    Stepper({
+      index: this.currentIndex
+    }) {
+      StepperItem() {
+        Text('Page One')
+          .fontSize(35)
+          .fontColor(Color.Blue)
+          .width(200)
+          .lineHeight(50)
+          .margin({top:250})
+      }
+      .nextLabel('')
+      .position({x: '35%', y: 0})
+      StepperItem() {
+        Text('Page Two')
+          .fontSize(35)
+          .fontColor(Color.Blue)
+          .width(200)
+          .lineHeight(50)
+          .margin({top:250})
+          .onClick(()=>{
+            this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip
+          })
+      }
+      .nextLabel('Next')
+      .prevLabel('Previous')
+      .status(this.firstState)
+      .position({x: '35%', y: 0})
+      StepperItem() {
+        Text('Page Three')
+          .fontSize(35)
+          .fontColor(Color.Blue)
+          .width(200)
+          .lineHeight(50)
+          .margin({top:250})
+          .onClick(()=>{
+            this.secondState = this.secondState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting
+          })
+      }
+      .position({x: '35%', y: 0})
+      .status(this.secondState)
+      StepperItem() {
+        Text('Page four')
+          .fontSize(35)
+          .fontColor(Color.Blue)
+          .width(200)
+          .lineHeight(50)
+          .margin({top:250})
+      }
+      .position({x: '35%', y: 0})
+      .nextLabel('Finish')
+    }
+    .onFinish(() => {
+      console.log('onFinish')
+    })
+    .onSkip(() => {
+      console.log('onSkip')
+    })
+    .onChange((prevIndex: number, index: number) => {
+      this.currentIndex = index
+    })
+    .align(Alignment.Center)
+  }
+}
+```
+
+
+![zh-cn_image_0000001250678457](figures/zh-cn_image_0000001250678457.gif)
+
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md
new file mode 100644
index 0000000000000000000000000000000000000000..223996522947d688231c451884b81f258f80d0b8
--- /dev/null
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md
@@ -0,0 +1,46 @@
+# StepperItem
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+
+步骤导航器元素。
+
+
+## 权限列表
+
+无
+
+
+## 子组件
+
+支持单个子组件。
+
+
+## 接口
+
+StepperItem()
+
+
+## 属性
+
+| 参数名 | 参数类型 | 默认值 | 参数描述 |
+| -------- | -------- | -------- | -------- |
+| prevLabel | string | - | 当步骤导航器大于一页，除第一页默认值都为"返回"。 |
+| nextLabel | string | - | 步骤导航器大于一页时，最后一页默认值为"开始"，其余页默认值为"下一步"。 |
+| status | ItemState | ItemState.Normal | 步骤导航器元素的状态。 |
+
+- ItemState枚举说明
+    | 名称 | 描述 | 
+  | -------- | -------- |
+  | Normal | 正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。 | 
+  | Disabled | 不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。 | 
+  | Waiting | 等待状态，右侧文本按钮不显示，使用等待进度条，不可点击进入下一个StepperItem。 | 
+  | Skip | 跳过状态，表示跳过当前步骤,&nbsp;进入下一个StepperItem。 | 
+
+
+## 示例
+
+见[Stepper](ts-basic-components-stepper.md)。
+
diff --git a/zh-cn/application-dev/ui/ts-application-resource-access.md b/zh-cn/application-dev/ui/ts-application-resource-access.md
new file mode 100644
index 0000000000000000000000000000000000000000..61bf3d3a3c0d8f6d6ce913deb80f6987ca78e03e
--- /dev/null
+++ b/zh-cn/application-dev/ui/ts-application-resource-access.md
@@ -0,0 +1,164 @@
+# 访问应用资源
+
+
+## 资源定义
+
+应用资源由开发者在工程的resources目录中定义，resources目录按照两级目录的形式来组织：
+
+- 一级目录为base目录、限定词目录以及rawfile目录
+  - base目录是默认存在的目录。当应用的resources资源目录中没有与设备状态匹配的限定词目录时，会自动引用该目录中的资源文件。
+  - 限定词目录需要开发者自行创建，其可以由一个或多个表征应用场景或设备特征的限定词组合而成，包括移动国家码和移动网络码、语言、文字、国家或地区、横竖屏、设备类型、颜色模式和屏幕密度等维度，限定词之间通过下划线（_）或者中划线（-）连接。
+  - 在引用rawfile中的资源时，不会根据系统的状态去匹配，rawfile目录中可以直接存放资源文件。
+
+- 二级目录为资源目录
+  - 用于存放字符串、颜色、浮点数等基础元素，以及媒体等资源文件。
+  - 当前支持的文件和资源类型如下：
+       | 文件名 | 资源类型 | 
+     | -------- | -------- |
+     | color.json | 颜色资源。 | 
+     | float.json | 间距、圆角、字体等资源。 | 
+     | string.json | 字符串资源。 | 
+     | plural.json | 字符串资源。 | 
+     | media目录 | 图片资源。 |
+
+
+## 资源引用
+
+在工程中，通过**“$r('app.type.name')”**的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表资源命名，由开发者定义资源时确定。
+
+引用rawfile下资源时使用**“$rawfile('filename')”**的形式**，**当前$rawfile仅支持Image控件引用图片资源，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 资源描述符不能拼接使用。
+
+
+## 示例
+
+base目录中部分自定义资源如下所示：
+
+
+```
+    resources
+      ├─ base 
+      │    ├─ element 
+      │    │   ├─ color.json
+      │    │   ├─ string.json
+      │    │   └─ float.json
+      │    └─ media
+      │       └─ my_background_image.png
+      └─ rawfile
+           ├─ test.png
+           └─ newDir
+               └─ newTest.png  
+```
+
+color.json文件的内容如下：
+
+
+```
+{
+    "color": [
+        {
+            "name": "color_hello",
+            "value": "#ffff0000"
+        },
+        {
+            "name": "color_world",
+            "value": "#ff0000ff"
+        }
+    ]
+}
+```
+
+float.json文件的内容如下：
+
+
+```
+{
+    "float":[
+        {
+            "name":"font_hello",
+            "value":"28.0fp"
+        },
+	{
+            "name":"font_world",
+            "value":"20.0fp"
+        }
+    ]
+}
+```
+
+string.json文件的内容如下：
+
+
+```
+{
+    "string":[
+        {
+            "name":"string_hello",
+            "value":"Hello"
+        },
+	{
+            "name":"string_world",
+            "value":"World"
+        },
+	{
+            "name":"message_arrive",
+            "value":"We will arrive at %s."
+        }
+    ]
+}
+```
+
+plural.json文件的内容如下：
+
+
+```
+{
+    "plural":[
+        {
+            "name":"eat_apple",
+            "value":[
+                {
+                    "quantity":"one",
+                    "value":"%d apple"
+                },
+                {
+                    "quantity":"other",
+                    "value":"%d apples"
+                }
+            ]
+        }
+    ]
+}
+```
+
+  在ets文件中，可以使用在resources目录中定义的资源。
+
+```
+Text($r('app.string.string_hello'))
+    .fontColor($r('app.color.color_hello'))
+    .fontSize($r('app.float.font_hello'))
+}
+
+Text($r('app.string.string_world'))
+    .fontColor($r('app.color.color_world'))
+    .fontSize($r('app.float.font_world'))
+}
+
+Text($r('app.string.message_arrive', "five of the clock")) //引用string资源，$r的第二个参数用于替换%s
+    .fontColor($r('app.color.color_hello'))
+    .fontSize($r('app.float.font_hello'))
+}
+
+Text($r('app.plural.eat_apple', 5, 5)) //plural$r引用，第一个指定plural资源，第二个参数指定单复数的数量，此处第三个数字为对%d的替换
+    .fontColor($r('app.color.color_world'))
+    .fontSize($r('app.float.font_world'))
+}
+
+Image($r('app.media.my_background_image')) //media资源的$r引用
+
+Image($rawfile('test.png')) //rawfile$r引用rawfile目录下图片
+
+Image($rawfile('newDir/newTest.png')) //rawfile$r引用rawfile目录下图片
+```
diff --git a/zh-cn/application-dev/ui/ts-system-resource-access.md b/zh-cn/application-dev/ui/ts-system-resource-access.md
new file mode 100644
index 0000000000000000000000000000000000000000..f888038883c1530f03c09c342919b9abfec10ef0
--- /dev/null
+++ b/zh-cn/application-dev/ui/ts-system-resource-access.md
@@ -0,0 +1,20 @@
+# 访问系统资源
+
+
+系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源，不同的开发者可以开发出具有相同视觉风格的应用。
+
+
+开发者可以通过**“$r('sys.type.resource_id')”**的形式引用系统资源。sys代表是系统资源；type代表资源类型，可以取“color”、“float”、“string”、“media”；resource_id代表资源id。
+
+```
+Text('Hello')
+    .fontColor($r('sys.color.id_color_emphasize'))
+    .fontSize($r('sys.float.id_text_size_headline1'))
+    .fontFamily($r('sys.string.id_text_font_family_medium'))
+    .backgroundColor($r('sys.color.id_color_palette_aux1'))
+Image($r('sys.media.ic_app'))
+    .border({color: $r('sys.color.id_color_palette_aux1'), radius: $r('sys.float.id_corner_radius_button'), width: 2})
+    .margin({top: $r('sys.float.id_elements_margin_horizontal_m'), bottom: $r('sys.float.id_elements_margin_horizontal_l')})
+    .height(200)
+    .width(300)
+```