!17229 翻译完成 16392+16438+16917：新增组件参考（兼容JS的类Web开发范式-ArkUI.Lite）

Merge pull request !17229 from ester.zhou/TR-16392

!17229 翻译完成 16392+16438+16917：新增组件参考（兼容JS的类Web开发范式-ArkUI.Lite）
Merge pull request !17229 from ester.zhou/TR-16392
b538f6ba · openharmony_ci · Gitee · 11da45af · 6686bb4a · b538f6ba
264 changed file
--- a/en/application-dev/reference/arkui-js-lite/Readme-EN.md
+++ b/en/application-dev/reference/arkui-js-lite/Readme-EN.md
+# JavaScript-compatible Web-like Development Paradigm (ArkUI.Lite)
+
+- Framework Overview
+    - [File Organization](js-framework-file.md)
+    - ["js" Tag](js-framework-js-tag.md)
+    - [app.js](js-framework-js-file.md)
+    - Syntax
+        - [HML](js-framework-syntax-hml.md)
+        - [CSS](js-framework-syntax-css.md)
+        - [JavaScript](js-framework-syntax-js.md)
+- Universal Component Information
+    - [Universal Events](js-common-events.md)
+    - [Universal Attributes](js-common-attributes.md)
+    - [Universal Styles](js-common-styles.md)
+    - [Animation Styles](js-components-common-animation.md)
+    - [Media Query](js-components-common-mediaquery.md)
+- Container Components
+    - [div](js-components-container-div.md)
+    - [list](js-components-container-list.md)
+    - [list-item](js-components-container-list-item.md)
+    - [stack](js-components-container-stack.md)
+    - [swiper](js-components-container-swiper.md)
+- Basic Components
+    - [chart](js-components-basic-chart.md)
+    - [image](js-components-basic-image.md)
+    - [image-animator](js-components-basic-image-animator.md)
+    - [input](js-components-basic-input.md)
+    - [marquee](js-components-basic-marquee.md)
+    - [picker-view](js-components-basic-picker-view.md)
+    - [progress](js-components-basic-progress.md)
+    - [qrcode](js-components-basic-qrcode.md)
+    - [slider](js-components-basic-slider.md)
+    - [switch](js-components-basic-switch.md)
+    - [text](js-components-basic-text.md)
+- Canvas Components
+    - [canvas](js-components-canvas-canvas.md)
+    - [CanvasRenderingContext2D](js-components-canvas-canvasrenderingcontext2d.md)
--- a/en/application-dev/reference/arkui-js-lite/figures/#000000.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/#000000.png
--- a/en/application-dev/reference/arkui-js-lite/figures/GIF.gif
+++ b/en/application-dev/reference/arkui-js-lite/figures/GIF.gif
--- a/en/application-dev/reference/arkui-js-lite/figures/aliceblue.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/aliceblue.png
--- a/en/application-dev/reference/arkui-js-lite/figures/animation-demo1.gif
+++ b/en/application-dev/reference/arkui-js-lite/figures/animation-demo1.gif
--- a/en/application-dev/reference/arkui-js-lite/figures/animation-demo2.gif
+++ b/en/application-dev/reference/arkui-js-lite/figures/animation-demo2.gif
--- a/en/application-dev/reference/arkui-js-lite/figures/antiquewhite.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/antiquewhite.png
--- a/en/application-dev/reference/arkui-js-lite/figures/aqua.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/aqua.png
--- a/en/application-dev/reference/arkui-js-lite/figures/aquamarine.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/aquamarine.png
--- a/en/application-dev/reference/arkui-js-lite/figures/azure.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/azure.png
--- a/en/application-dev/reference/arkui-js-lite/figures/barchart.PNG
+++ b/en/application-dev/reference/arkui-js-lite/figures/barchart.PNG
--- a/en/application-dev/reference/arkui-js-lite/figures/beige.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/beige.png
--- a/en/application-dev/reference/arkui-js-lite/figures/bisque.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/bisque.png
--- a/en/application-dev/reference/arkui-js-lite/figures/blanchedalmond.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/blanchedalmond.png
--- a/en/application-dev/reference/arkui-js-lite/figures/blue.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/blue.png
--- a/en/application-dev/reference/arkui-js-lite/figures/blueviolet.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/blueviolet.png
--- a/en/application-dev/reference/arkui-js-lite/figures/brown.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/brown.png
--- a/en/application-dev/reference/arkui-js-lite/figures/burlywood.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/burlywood.png
--- a/en/application-dev/reference/arkui-js-lite/figures/cadetblue.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/cadetblue.png
--- a/en/application-dev/reference/arkui-js-lite/figures/chartreuse.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/chartreuse.png
--- a/en/application-dev/reference/arkui-js-lite/figures/chocolate.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/chocolate.png
--- a/en/application-dev/reference/arkui-js-lite/figures/coral.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/coral.png
--- a/en/application-dev/reference/arkui-js-lite/figures/cornflowerblue.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/cornflowerblue.png
--- a/en/application-dev/reference/arkui-js-lite/figures/cornsilk.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/cornsilk.png
--- a/en/application-dev/reference/arkui-js-lite/figures/crimson.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/crimson.png
--- a/en/application-dev/reference/arkui-js-lite/figures/cyan.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/cyan.png
--- a/en/application-dev/reference/arkui-js-lite/figures/darkblue.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/darkblue.png
--- a/en/application-dev/reference/arkui-js-lite/figures/darkcyan.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/darkcyan.png
--- a/en/application-dev/reference/arkui-js-lite/figures/darkgoldenrod.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/darkgoldenrod.png
--- a/en/application-dev/reference/arkui-js-lite/figures/darkgray.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/darkgray.png
--- a/en/application-dev/reference/arkui-js-lite/figures/darkgreen.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/darkgreen.png
--- a/en/application-dev/reference/arkui-js-lite/figures/darkgrey.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/darkgrey.png
--- a/en/application-dev/reference/arkui-js-lite/figures/darkkhaki.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/darkkhaki.png
--- a/en/application-dev/reference/arkui-js-lite/figures/darkmagenta.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/darkmagenta.png
--- a/en/application-dev/reference/arkui-js-lite/figures/darkolivegreen.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/darkolivegreen.png
--- a/en/application-dev/reference/arkui-js-lite/figures/darkorange.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/darkorange.png
--- a/en/application-dev/reference/arkui-js-lite/figures/darkorchid.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/darkorchid.png
--- a/en/application-dev/reference/arkui-js-lite/figures/darkred.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/darkred.png
--- a/en/application-dev/reference/arkui-js-lite/figures/darksalmon.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/darksalmon.png
--- a/en/application-dev/reference/arkui-js-lite/figures/darkseagreen.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/darkseagreen.png
--- a/en/application-dev/reference/arkui-js-lite/figures/darkslateblue.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/darkslateblue.png
--- a/en/application-dev/reference/arkui-js-lite/figures/darkslategray.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/darkslategray.png
--- a/en/application-dev/reference/arkui-js-lite/figures/darkslategrey.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/darkslategrey.png
--- a/en/application-dev/reference/arkui-js-lite/figures/darkturquoise.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/darkturquoise.png
--- a/en/application-dev/reference/arkui-js-lite/figures/darkviolet.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/darkviolet.png
--- a/en/application-dev/reference/arkui-js-lite/figures/deeppink.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/deeppink.png
--- a/en/application-dev/reference/arkui-js-lite/figures/deepskyblue.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/deepskyblue.png
--- a/en/application-dev/reference/arkui-js-lite/figures/default.PNG
+++ b/en/application-dev/reference/arkui-js-lite/figures/default.PNG
--- a/en/application-dev/reference/arkui-js-lite/figures/dimgray.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/dimgray.png
--- a/en/application-dev/reference/arkui-js-lite/figures/dimgrey.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/dimgrey.png
--- a/en/application-dev/reference/arkui-js-lite/figures/dodgerblue.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/dodgerblue.png
--- a/en/application-dev/reference/arkui-js-lite/figures/ellipse.PNG
+++ b/en/application-dev/reference/arkui-js-lite/figures/ellipse.PNG
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789168.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789168.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789172.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789172.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789180.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789180.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789184.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789184.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789188.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789188.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789296.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789296.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948700.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948700.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948704.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948704.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948708.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948708.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948712.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948712.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948716.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948716.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948720.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948720.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948828.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948828.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108312.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108312.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108316.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108316.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108320.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108320.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108324.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108324.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108328.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108328.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108332.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108332.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108420.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108420.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108436.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108436.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268264.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268264.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268268.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268268.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268272.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268272.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268276.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268276.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268280.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268280.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268284.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268284.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268388.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268388.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148353.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148353.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148357.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148357.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148361.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148361.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148365.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148365.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148369.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148369.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148457.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148457.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308057.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308057.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308061.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308061.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308065.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308065.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308073.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308073.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308077.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308077.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308169.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308169.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308185.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308185.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388505.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388505.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388513.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388513.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388517.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388517.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388521.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388521.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388525.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388525.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388529.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388529.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388581.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388581.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388637.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388637.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548105.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548105.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548109.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548109.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548113.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548113.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548117.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548117.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548121.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548121.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548125.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548125.png
--- a/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548233.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548233.png
--- a/en/application-dev/reference/arkui-js-lite/figures/firebrick.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/firebrick.png
--- a/en/application-dev/reference/arkui-js-lite/figures/floralwhite.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/floralwhite.png
--- a/en/application-dev/reference/arkui-js-lite/figures/forestgreen.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/forestgreen.png
--- a/en/application-dev/reference/arkui-js-lite/figures/fuchsia.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/fuchsia.png
--- a/en/application-dev/reference/arkui-js-lite/figures/gainsboro.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/gainsboro.png
--- a/en/application-dev/reference/arkui-js-lite/figures/gauge.PNG
+++ b/en/application-dev/reference/arkui-js-lite/figures/gauge.PNG
--- a/en/application-dev/reference/arkui-js-lite/figures/ghostwhite.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/ghostwhite.png
--- a/en/application-dev/reference/arkui-js-lite/figures/gold.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/gold.png
--- a/en/application-dev/reference/arkui-js-lite/figures/goldenrod.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/goldenrod.png
--- a/en/application-dev/reference/arkui-js-lite/figures/gray.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/gray.png
--- a/en/application-dev/reference/arkui-js-lite/figures/green.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/green.png
--- a/en/application-dev/reference/arkui-js-lite/figures/greenyellow.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/greenyellow.png
--- a/en/application-dev/reference/arkui-js-lite/figures/grey.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/grey.png
--- a/en/application-dev/reference/arkui-js-lite/figures/honeydew.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/honeydew.png
--- a/en/application-dev/reference/arkui-js-lite/figures/hotpink.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/hotpink.png
--- a/en/application-dev/reference/arkui-js-lite/figures/image-animator.gif
+++ b/en/application-dev/reference/arkui-js-lite/figures/image-animator.gif
--- a/en/application-dev/reference/arkui-js-lite/figures/image.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/image.png
--- a/en/application-dev/reference/arkui-js-lite/figures/indianred.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/indianred.png
--- a/en/application-dev/reference/arkui-js-lite/figures/indigo.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/indigo.png
--- a/en/application-dev/reference/arkui-js-lite/figures/input-type-button.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/input-type-button.png
--- a/en/application-dev/reference/arkui-js-lite/figures/input-type-checkbox.gif
+++ b/en/application-dev/reference/arkui-js-lite/figures/input-type-checkbox.gif
--- a/en/application-dev/reference/arkui-js-lite/figures/input-type-radio.gif
+++ b/en/application-dev/reference/arkui-js-lite/figures/input-type-radio.gif
--- a/en/application-dev/reference/arkui-js-lite/figures/ivory.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/ivory.png
--- a/en/application-dev/reference/arkui-js-lite/figures/khaki.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/khaki.png
--- a/en/application-dev/reference/arkui-js-lite/figures/lavender.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/lavender.png
--- a/en/application-dev/reference/arkui-js-lite/figures/lavenderblush.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/lavenderblush.png
--- a/en/application-dev/reference/arkui-js-lite/figures/lawngreen.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/lawngreen.png
--- a/en/application-dev/reference/arkui-js-lite/figures/lemonchiffon.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/lemonchiffon.png
--- a/en/application-dev/reference/arkui-js-lite/figures/lightblue.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/lightblue.png
--- a/en/application-dev/reference/arkui-js-lite/figures/lightcoral.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/lightcoral.png
--- a/en/application-dev/reference/arkui-js-lite/figures/lightcyan.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/lightcyan.png
--- a/en/application-dev/reference/arkui-js-lite/figures/lightgoldenrodyellow.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/lightgoldenrodyellow.png
--- a/en/application-dev/reference/arkui-js-lite/figures/lightgray.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/lightgray.png
--- a/en/application-dev/reference/arkui-js-lite/figures/lightgreen.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/lightgreen.png
--- a/en/application-dev/reference/arkui-js-lite/figures/lightpink.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/lightpink.png
--- a/en/application-dev/reference/arkui-js-lite/figures/lightsalmon.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/lightsalmon.png
--- a/en/application-dev/reference/arkui-js-lite/figures/lightseagreen.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/lightseagreen.png
--- a/en/application-dev/reference/arkui-js-lite/figures/lightskyblue.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/lightskyblue.png
--- a/en/application-dev/reference/arkui-js-lite/figures/lightslategray.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/lightslategray.png
--- a/en/application-dev/reference/arkui-js-lite/figures/lightslategrey.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/lightslategrey.png
--- a/en/application-dev/reference/arkui-js-lite/figures/lightsteelblue.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/lightsteelblue.png
--- a/en/application-dev/reference/arkui-js-lite/figures/lightyellow.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/lightyellow.png
--- a/en/application-dev/reference/arkui-js-lite/figures/lime.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/lime.png
--- a/en/application-dev/reference/arkui-js-lite/figures/limegreen.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/limegreen.png
--- a/en/application-dev/reference/arkui-js-lite/figures/linen.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/linen.png
--- a/en/application-dev/reference/arkui-js-lite/figures/list.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/list.png
--- a/en/application-dev/reference/arkui-js-lite/figures/lite_bar.PNG
+++ b/en/application-dev/reference/arkui-js-lite/figures/lite_bar.PNG
--- a/en/application-dev/reference/arkui-js-lite/figures/lite_line.PNG
+++ b/en/application-dev/reference/arkui-js-lite/figures/lite_line.PNG
--- a/en/application-dev/reference/arkui-js-lite/figures/magenta.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/magenta.png
--- a/en/application-dev/reference/arkui-js-lite/figures/maroon.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/maroon.png
--- a/en/application-dev/reference/arkui-js-lite/figures/marquee.gif
+++ b/en/application-dev/reference/arkui-js-lite/figures/marquee.gif
--- a/en/application-dev/reference/arkui-js-lite/figures/mediumaquamarine.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/mediumaquamarine.png
--- a/en/application-dev/reference/arkui-js-lite/figures/mediumblue.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/mediumblue.png
--- a/en/application-dev/reference/arkui-js-lite/figures/mediumorchid.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/mediumorchid.png
--- a/en/application-dev/reference/arkui-js-lite/figures/mediumpurple.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/mediumpurple.png
--- a/en/application-dev/reference/arkui-js-lite/figures/mediumseagreen.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/mediumseagreen.png
--- a/en/application-dev/reference/arkui-js-lite/figures/mediumslateblue.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/mediumslateblue.png
--- a/en/application-dev/reference/arkui-js-lite/figures/mediumspringgreen.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/mediumspringgreen.png
--- a/en/application-dev/reference/arkui-js-lite/figures/mediumturquoise.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/mediumturquoise.png
--- a/en/application-dev/reference/arkui-js-lite/figures/mediumvioletred.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/mediumvioletred.png
--- a/en/application-dev/reference/arkui-js-lite/figures/midnightblue.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/midnightblue.png
--- a/en/application-dev/reference/arkui-js-lite/figures/mintcream.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/mintcream.png
--- a/en/application-dev/reference/arkui-js-lite/figures/mistyrose.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/mistyrose.png
--- a/en/application-dev/reference/arkui-js-lite/figures/moccasin.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/moccasin.png
--- a/en/application-dev/reference/arkui-js-lite/figures/navajowhite.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/navajowhite.png
--- a/en/application-dev/reference/arkui-js-lite/figures/navy.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/navy.png
--- a/en/application-dev/reference/arkui-js-lite/figures/oldlace.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/oldlace.png
--- a/en/application-dev/reference/arkui-js-lite/figures/olive.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/olive.png
--- a/en/application-dev/reference/arkui-js-lite/figures/olivedrab.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/olivedrab.png
--- a/en/application-dev/reference/arkui-js-lite/figures/orange.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/orange.png
--- a/en/application-dev/reference/arkui-js-lite/figures/orangered.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/orangered.png
--- a/en/application-dev/reference/arkui-js-lite/figures/orchid.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/orchid.png
--- a/en/application-dev/reference/arkui-js-lite/figures/palegoldenrod.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/palegoldenrod.png
--- a/en/application-dev/reference/arkui-js-lite/figures/palegreen.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/palegreen.png
--- a/en/application-dev/reference/arkui-js-lite/figures/paleturquoise.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/paleturquoise.png
--- a/en/application-dev/reference/arkui-js-lite/figures/palevioletred.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/palevioletred.png
--- a/en/application-dev/reference/arkui-js-lite/figures/papayawhip.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/papayawhip.png
--- a/en/application-dev/reference/arkui-js-lite/figures/peachpuff.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/peachpuff.png
--- a/en/application-dev/reference/arkui-js-lite/figures/peru.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/peru.png
--- a/en/application-dev/reference/arkui-js-lite/figures/picker-view.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/picker-view.png
--- a/en/application-dev/reference/arkui-js-lite/figures/pink.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/pink.png
--- a/en/application-dev/reference/arkui-js-lite/figures/plum.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/plum.png
--- a/en/application-dev/reference/arkui-js-lite/figures/powderblue.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/powderblue.png
--- a/en/application-dev/reference/arkui-js-lite/figures/progress.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/progress.png
--- a/en/application-dev/reference/arkui-js-lite/figures/purple.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/purple.png
--- a/en/application-dev/reference/arkui-js-lite/figures/qrcode.gif
+++ b/en/application-dev/reference/arkui-js-lite/figures/qrcode.gif
--- a/en/application-dev/reference/arkui-js-lite/figures/rebeccapurple.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/rebeccapurple.png
--- a/en/application-dev/reference/arkui-js-lite/figures/red.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/red.png
--- a/en/application-dev/reference/arkui-js-lite/figures/rosybrown.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/rosybrown.png
--- a/en/application-dev/reference/arkui-js-lite/figures/royalblue.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/royalblue.png
--- a/en/application-dev/reference/arkui-js-lite/figures/saddlebrown.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/saddlebrown.png
--- a/en/application-dev/reference/arkui-js-lite/figures/salmon.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/salmon.png
--- a/en/application-dev/reference/arkui-js-lite/figures/sample1.gif
+++ b/en/application-dev/reference/arkui-js-lite/figures/sample1.gif
--- a/en/application-dev/reference/arkui-js-lite/figures/sandybrown.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/sandybrown.png
--- a/en/application-dev/reference/arkui-js-lite/figures/seagreen.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/seagreen.png
--- a/en/application-dev/reference/arkui-js-lite/figures/seashell.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/seashell.png
--- a/en/application-dev/reference/arkui-js-lite/figures/sienna.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/sienna.png
--- a/en/application-dev/reference/arkui-js-lite/figures/silver.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/silver.png
--- a/en/application-dev/reference/arkui-js-lite/figures/skyblue.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/skyblue.png
--- a/en/application-dev/reference/arkui-js-lite/figures/slateblue.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/slateblue.png
--- a/en/application-dev/reference/arkui-js-lite/figures/slategray.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/slategray.png
--- a/en/application-dev/reference/arkui-js-lite/figures/slider.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/slider.png
--- a/en/application-dev/reference/arkui-js-lite/figures/smoothOff.PNG
+++ b/en/application-dev/reference/arkui-js-lite/figures/smoothOff.PNG
--- a/en/application-dev/reference/arkui-js-lite/figures/smoothOn.PNG
+++ b/en/application-dev/reference/arkui-js-lite/figures/smoothOn.PNG
--- a/en/application-dev/reference/arkui-js-lite/figures/snow.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/snow.png
--- a/en/application-dev/reference/arkui-js-lite/figures/springgreen.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/springgreen.png
--- a/en/application-dev/reference/arkui-js-lite/figures/steelblue.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/steelblue.png
--- a/en/application-dev/reference/arkui-js-lite/figures/swiper.gif
+++ b/en/application-dev/reference/arkui-js-lite/figures/swiper.gif
--- a/en/application-dev/reference/arkui-js-lite/figures/switch.gif
+++ b/en/application-dev/reference/arkui-js-lite/figures/switch.gif
--- a/en/application-dev/reference/arkui-js-lite/figures/tan.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/tan.png
--- a/en/application-dev/reference/arkui-js-lite/figures/teal.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/teal.png
--- a/en/application-dev/reference/arkui-js-lite/figures/text.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/text.png
--- a/en/application-dev/reference/arkui-js-lite/figures/thistle.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/thistle.png
--- a/en/application-dev/reference/arkui-js-lite/figures/tomato.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/tomato.png
--- a/en/application-dev/reference/arkui-js-lite/figures/turquoise.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/turquoise.png
--- a/en/application-dev/reference/arkui-js-lite/figures/violet.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/violet.png
--- a/en/application-dev/reference/arkui-js-lite/figures/wheat.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/wheat.png
--- a/en/application-dev/reference/arkui-js-lite/figures/white.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/white.png
--- a/en/application-dev/reference/arkui-js-lite/figures/whitesmoke.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/whitesmoke.png
--- a/en/application-dev/reference/arkui-js-lite/figures/yellow.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/yellow.png
--- a/en/application-dev/reference/arkui-js-lite/figures/yellowgreen.png
+++ b/en/application-dev/reference/arkui-js-lite/figures/yellowgreen.png
--- a/en/application-dev/reference/arkui-js-lite/js-common-attributes.md
+++ b/en/application-dev/reference/arkui-js-lite/js-common-attributes.md
+# Universal Attributes
+
+
+## Common Attributes
+
+Common attributes are used to set component identities and appearance.
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| id | string | No| Unique ID of the component.|
+| style | string | No| Style declaration of the component.|
+| class | string | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Rendering Attributes
+
+Rendering attributes are used to set whether a component is rendered.
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| for | Array | Expands the current element based on the configured data list.|
+| if | boolean | Whether the element is added or removed.|
+| show | boolean | Whether the element is displayed or hidden.|
+
+> **NOTE**
+>
+> Do not set styles in attribute fields.
--- a/en/application-dev/reference/arkui-js-lite/js-common-events.md
+++ b/en/application-dev/reference/arkui-js-lite/js-common-events.md
+# Universal Events
+
+
+Different from private events, universal events can be bound to most components.
+
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| click | - | Triggered when the component is clicked. |
+| longpress | - | Triggered when the component is long pressed. |
+| swipe<sup>5+</sup> | SwipeEvent | Triggered when a user quickly swipes on the component. |
+
+
+  **Table 1** SwipeEvent (inherited from BaseEvent)
+
+| Attribute| Type| Description |
+| -------- | -------- | -------- |
+| direction | string | Swiping direction. The value can be one of the following:<br>- **left**: Swipe left.<br>- **right**: Swipe right.<br>- **up**: Swipe up.<br>- **down**: Swipe down. |
+
--- a/en/application-dev/reference/arkui-js-lite/js-common-styles.md
+++ b/en/application-dev/reference/arkui-js-lite/js-common-styles.md
+# Universal Styles
+
+
+You can set universal styles for components in the **style** attribute or **.css** files.
+
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br><br>If this attribute is not set, the default value **0** is used.|
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br><br>If this attribute is not set, the default value **0** is used.|
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides in a declaration.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides in a declaration. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders. |
+| background-color | &lt;color&gt; | - | No| Background color.|
+| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
+| display | string | flex | No| Type of the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+
+> **NOTE**
+>
+> The aforementioned universal styles are not mandatory.
+>
+> Currently, the following color formats are supported:
+> - rgb(255, 255, 255)
+>
+> - rgba(255, 255, 255, 1.0)
+>
+> - HEX formats: \#rrggbb and \#aarrggbb
+>
+> - Enumeration format: as listed in Table 1. The enumeration format is not supported in the script.
+
+
+  **Table 1** Color enums
+
+| Name| Hexadecimal Code| Color|
+| -------- | -------- | -------- |
+| aliceblue | \#f0f8ff | ![aliceblue](figures/aliceblue.png) |
+| antiquewhite | \#faebd7 | ![antiquewhite](figures/antiquewhite.png) |
+| aqua | \#00ffff | ![aqua](figures/aqua.png) |
+| aquamarine | \#7fffd4 | ![aquamarine](figures/aquamarine.png) |
+| azure | \#f0ffff | ![azure](figures/azure.png) |
+| beige | \#f5f5dc | ![beige](figures/beige.png) |
+| bisque | \#ffe4c4 | ![bisque](figures/bisque.png) |
+| black | \#000000 | ![#000000](figures/#000000.png) |
+| blanchedalmond | \#ffebcd | ![blanchedalmond](figures/blanchedalmond.png) |
+| blue | \#0000ff | ![blue](figures/blue.png) |
+| blueviolet | \#8a2be2 | ![blueviolet](figures/blueviolet.png) |
+| brown | \#a52a2a | ![brown](figures/brown.png) |
+| burlywood | \#deB887 | ![burlywood](figures/burlywood.png) |
+| cadetblue | \#5f9ea0 | ![cadetblue](figures/cadetblue.png) |
+| chartreuse | \#7fff00 | ![chartreuse](figures/chartreuse.png) |
+| chocolate | \#d2691e | ![chocolate](figures/chocolate.png) |
+| coral | \#ff7f50 | ![coral](figures/coral.png) |
+| cornflowerblue | \#6495ed | ![cornflowerblue](figures/cornflowerblue.png) |
+| cornsilk | \#fff8dc | ![cornsilk](figures/cornsilk.png) |
+| crimson | \#dc143c | ![crimson](figures/crimson.png) |
+| cyan | \#00ffff | ![cyan](figures/cyan.png) |
+| darkblue | \#00008b | ![darkblue](figures/darkblue.png) |
+| darkcyan | \#008b8b | ![darkcyan](figures/darkcyan.png) |
+| darkgoldenrod | \#b8860b | ![darkgoldenrod](figures/darkgoldenrod.png) |
+| darkgray | \#a9a9a9 | ![darkgray](figures/darkgray.png) |
+| darkgreen | \#006400 | ![darkgreen](figures/darkgreen.png) |
+| darkgrey | \#a9a9a9 | ![darkgrey](figures/darkgrey.png) |
+| darkkhaki | \#bdb76b | ![darkkhaki](figures/darkkhaki.png) |
+| darkmagenta | \#8b008b | ![darkmagenta](figures/darkmagenta.png) |
+| darkolivegreen | \#556b2f | ![darkolivegreen](figures/darkolivegreen.png) |
+| darkorange | \#ff8c00 | ![darkorange](figures/darkorange.png) |
+| darkorchid | \#9932cc | ![darkorchid](figures/darkorchid.png) |
+| darkred | \#8b0000 | ![darkred](figures/darkred.png) |
+| darksalmon | \#e9967a | ![darksalmon](figures/darksalmon.png) |
+| darkseagreen | \#8fbc8f | ![darkseagreen](figures/darkseagreen.png) |
+| darkslateblue | \#483d8b | ![darkslateblue](figures/darkslateblue.png) |
+| darkslategray | \#2f4f4f | ![darkslategray](figures/darkslategray.png) |
+| darkslategrey | \#2f4f4f | ![darkslategrey](figures/darkslategrey.png) |
+| darkturquoise | \#00ced1 | ![darkturquoise](figures/darkturquoise.png) |
+| darkviolet | \#9400d3 | ![darkviolet](figures/darkviolet.png) |
+| deeppink | \#ff1493 | ![deeppink](figures/deeppink.png) |
+| deepskyblue | \#00bfff | ![deepskyblue](figures/deepskyblue.png) |
+| dimgray | \#696969 | ![dimgray](figures/dimgray.png) |
+| dimgrey | \#696969 | ![dimgrey](figures/dimgrey.png) |
+| dodgerblue | \#1e90ff | ![dodgerblue](figures/dodgerblue.png) |
+| firebrick | \#b22222 | ![firebrick](figures/firebrick.png) |
+| floralwhite | \#fffaf0 | ![floralwhite](figures/floralwhite.png) |
+| forestgreen | \#228b22 | ![forestgreen](figures/forestgreen.png) |
+| fuchsia | \#ff00ff | ![fuchsia](figures/fuchsia.png) |
+| gainsboro | \#dcdcdc | ![gainsboro](figures/gainsboro.png) |
+| ghostwhite | \#f8f8ff | ![ghostwhite](figures/ghostwhite.png) |
+| gold | \#ffd700 | ![gold](figures/gold.png) |
+| goldenrod | \#daa520 | ![goldenrod](figures/goldenrod.png) |
+| gray | \#808080 | ![gray](figures/gray.png) |
+| green | \#008000 | ![green](figures/green.png) |
+| greenyellow | \#adff2f | ![greenyellow](figures/greenyellow.png) |
+| grey | \#808080 | ![grey](figures/grey.png) |
+| honeydew | \#f0fff0 | ![honeydew](figures/honeydew.png) |
+| hotpink | \#ff69b4 | ![hotpink](figures/hotpink.png) |
+| indianred | \#cd5c5c | ![indianred](figures/indianred.png) |
+| indigo | \#4b0082 | ![indigo](figures/indigo.png) |
+| ivory | \#fffff0 | ![ivory](figures/ivory.png) |
+| khaki | \#f0e68c | ![khaki](figures/khaki.png) |
+| lavender | \#e6e6fa | ![lavender](figures/lavender.png) |
+| lavenderblush | \#fff0f5 | ![lavenderblush](figures/lavenderblush.png) |
+| lawngreen | \#7cfc00 | ![lawngreen](figures/lawngreen.png) |
+| lemonchiffon | \#fffacd | ![lemonchiffon](figures/lemonchiffon.png) |
+| lightblue | \#add8e6 | ![lightblue](figures/lightblue.png) |
+| lightcoral | \#f08080 | ![lightcoral](figures/lightcoral.png) |
+| lightcyan | \#e0ffff | ![lightcyan](figures/lightcyan.png) |
+| lightgoldenrodyellow | \#fafad2 | ![lightgoldenrodyellow](figures/lightgoldenrodyellow.png) |
+| lightgray | \#d3d3d3 | ![lightgray](figures/lightgray.png) |
+| lightgreen | \#90ee90 | ![lightgreen](figures/lightgreen.png) |
+| lightpink | \#ffb6c1 | ![lightpink](figures/lightpink.png) |
+| lightsalmon | \#ffa07a | ![lightsalmon](figures/lightsalmon.png) |
+| lightseagreen | \#20b2aa | ![lightseagreen](figures/lightseagreen.png) |
+| lightskyblue | \#87cefa | ![lightskyblue](figures/lightskyblue.png) |
+| lightslategray | \#778899 | ![lightslategray](figures/lightslategray.png) |
+| lightslategrey | \#778899 | ![lightslategrey](figures/lightslategrey.png) |
+| lightsteelblue | \#b0c4de | ![lightsteelblue](figures/lightsteelblue.png) |
+| lightyellow | \#ffffe0 | ![lightyellow](figures/lightyellow.png) |
+| lime | \#00ff00 | ![lime](figures/lime.png) |
+| limegreen | \#32cd32 | ![limegreen](figures/limegreen.png) |
+| linen | \#faf0e6 | ![linen](figures/linen.png) |
+| magenta | \#ff00ff | ![magenta](figures/magenta.png) |
+| maroon | \#800000 | ![maroon](figures/maroon.png) |
+| mediumaquamarine | \#66cdaa | ![mediumaquamarine](figures/mediumaquamarine.png) |
+| mediumblue | \#0000cd | ![mediumblue](figures/mediumblue.png) |
+| mediumorchid | \#ba55d3 | ![mediumorchid](figures/mediumorchid.png) |
+| mediumpurple | \#9370db | ![mediumpurple](figures/mediumpurple.png) |
+| mediumseagreen | \#3cb371 | ![mediumseagreen](figures/mediumseagreen.png) |
+| mediumslateblue | \#7b68ee | ![mediumslateblue](figures/mediumslateblue.png) |
+| mediumspringgreen | \#00fa9a | ![mediumspringgreen](figures/mediumspringgreen.png) |
+| mediumturquoise | \#48d1cc | ![mediumturquoise](figures/mediumturquoise.png) |
+| mediumvioletred | \#c71585 | ![mediumvioletred](figures/mediumvioletred.png) |
+| midnightblue | \#191970 | ![midnightblue](figures/midnightblue.png) |
+| mintcream | \#f5fffa | ![mintcream](figures/mintcream.png) |
+| mistyrose | \#ffe4e1 | ![mistyrose](figures/mistyrose.png) |
+| moccasin | \#ffe4b5 | ![moccasin](figures/moccasin.png) |
+| navajowhite | \#ffdead | ![navajowhite](figures/navajowhite.png) |
+| navy | \#000080 | ![navy](figures/navy.png) |
+| oldlace | \#fdf5e6 | ![oldlace](figures/oldlace.png) |
+| olive | \#808000 | ![olive](figures/olive.png) |
+| olivedrab | \#6b8e23 | ![olivedrab](figures/olivedrab.png) |
+| orange | \#ffa500 | ![orange](figures/orange.png) |
+| orangered | \#ff4500 | ![orangered](figures/orangered.png) |
+| orchid | \#da70d6 | ![orchid](figures/orchid.png) |
+| palegoldenrod | \#eee8aa | ![palegoldenrod](figures/palegoldenrod.png) |
+| palegreen | \#98fb98 | ![palegreen](figures/palegreen.png) |
+| paleturquoise | \#afeeee | ![paleturquoise](figures/paleturquoise.png) |
+| palevioletred | \#db7093 | ![palevioletred](figures/palevioletred.png) |
+| papayawhip | \#ffefd5 | ![papayawhip](figures/papayawhip.png) |
+| peachpuff | \#ffdab9 | ![peachpuff](figures/peachpuff.png) |
+| peru | \#cd853f | ![peru](figures/peru.png) |
+| pink | \#ffc0cb | ![pink](figures/pink.png) |
+| plum | \#dda0dd | ![plum](figures/plum.png) |
+| powderblue | \#b0e0e6 | ![powderblue](figures/powderblue.png) |
+| purple | \#800080 | ![purple](figures/purple.png) |
+| rebeccapurple | \#663399 | ![rebeccapurple](figures/rebeccapurple.png) |
+| red | \#ff0000 | ![red](figures/red.png) |
+| rosybrown | \#bc8f8f | ![rosybrown](figures/rosybrown.png) |
+| royalblue | \#4169e1 | ![royalblue](figures/royalblue.png) |
+| saddlebrown | \#8b4513 | ![saddlebrown](figures/saddlebrown.png) |
+| salmon | \#fa8072 | ![salmon](figures/salmon.png) |
+| sandybrown | \#f4a460 | ![sandybrown](figures/sandybrown.png) |
+| seagreen | \#2e8b57 | ![seagreen](figures/seagreen.png) |
+| seashell | \#fff5ee | ![seashell](figures/seashell.png) |
+| sienna | \#a0522d | ![sienna](figures/sienna.png) |
+| silver | \#c0c0c0 | ![silver](figures/silver.png) |
+| skyblue | \#87ceeb | ![skyblue](figures/skyblue.png) |
+| slateblue | \#6a5acd | ![slateblue](figures/slateblue.png) |
+| slategray | \#708090 | ![slategray](figures/slategray.png) |
+| slategrey | \#708090 | ![slategray](figures/slategray.png) |
+| snow | \#fffafa | ![snow](figures/snow.png) |
+| springgreen | \#00ff7f | ![springgreen](figures/springgreen.png) |
+| steelblue | \#4682b4 | ![steelblue](figures/steelblue.png) |
+| tan | \#d2b48c | ![tan](figures/tan.png) |
+| teal | \#008080 | ![teal](figures/teal.png) |
+| thistle | \#d8Bfd8 | ![thistle](figures/thistle.png) |
+| tomato | \#ff6347 | ![tomato](figures/tomato.png) |
+| turquoise | \#40e0d0 | ![turquoise](figures/turquoise.png) |
+| violet | \#ee82ee | ![violet](figures/violet.png) |
+| wheat | \#f5deb3 | ![wheat](figures/wheat.png) |
+| white | \#ffffff | ![white](figures/white.png) |
+| whitesmoke | \#f5f5f5 | ![whitesmoke](figures/whitesmoke.png) |
+| yellow | \#ffff00 | ![yellow](figures/yellow.png) |
+| yellowgreen | \#9acd32 | ![yellowgreen](figures/yellowgreen.png) |
--- a/en/application-dev/reference/arkui-js-lite/js-components-basic-chart.md
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-chart.md
+# chart
+
+The **\<chart>** component displays line charts and bar charts.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| type | string | No| Chart type. Dynamic modification is not supported. Available values include:<br>- **bar**: bar chart<br>- **line**: line chart<br>Default value: **line**|
+| options | ChartOptions | Yes| Chart parameters. You can set the minimum value, maximum value, scale, and line width of the x-axis or y-axis, whether to display the x-axis and y-axis, and whether the line is smooth. Dynamic modification is not supported.|
+| datasets | Array&lt;ChartDataset&gt; | Yes| Data sets. You can set multiple datasets and their background colors.|
+| id | string | No| Unique ID of the component.|
+| style | string | No| Style declaration of the component.|
+| class | string | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+  **Table 1** ChartOptions
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| xAxis | ChartAxis | Yes| X-axis parameters. You can set the minimum value, maximum value, and scale of the x-axis, and whether to display the x-axis.|
+| yAxis | ChartAxis   | Yes| Y-axis parameters. You can set the minimum value, maximum value, and scale of the y-axis, and whether to display the y-axis.|
+| series | ChartSeries | No| Data series parameters which cover the following:<br>- Line style, such as the line width and whether the line is smooth.<br>- Style and size of the white point at the start of the line.<br>**NOTE**<br>Only line charts support this attribute. |
+
+  **Table 2** ChartDataset
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| backgroundColor(deprecated) | &lt;color&gt; | \#ff6384 | No| Color of a line or bar. This attribute is not recommended.|
+| strokeColor | &lt;color&gt; | \#ff6384 | No| Line color. Only line charts support this attribute.|
+| fillColor | &lt;color&gt; | \#ff6384 | No| Fill color. For line charts, the value indicates the gradient color to fill.|
+| data | Array&lt;number&gt; | - | Yes| Data of the drawn line or bar.|
+| gradient | boolean | false | No| Whether to display the gradient color. Only line charts support this attribute.|
+
+  **Table 3** ChartAxis
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| min | number | 0 | No| Minimum value of the axis.<br>Negative numbers are not supported. Only line charts support this attribute.|
+| max | number | 100 | No| Maximum value of the axis.<br>Negative numbers are not supported. Only line charts support this attribute.|
+| axisTick | number | 10 | No| Number of scales displayed on the axis.<br>**NOTE**<br>The value ranges from 1 to 20. The display effect depends on the calculation result of Number of pixels occupied by the image width/(**max**-**min**).<br>Lite wearables support integer calculation, and an error may occur in the case of inexhaustible division. Specifically, a segment of space may be left at the end of the x-axis.<br>In the bar chart, the number of bars in each group of data is the same as the number of scales, and the bars are displayed at the scales.|
+| display | boolean | false | No| Whether to display the axis.|
+| color | &lt;color&gt; | \#c0c0c0 | No| Axis color.|
+
+  **Table 4** ChartSeries
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| lineStyle | ChartLineStyle | No| Line style, such as the line width and whether the line is smooth.|
+| headPoint | PointStyle     | No| Style and size of the white point at the start of the line.|
+| topPoint | PointStyle | No| Style and size of the top point.|
+| bottomPoint | PointStyle | No| Style and size of the bottom point.|
+| loop | ChartLoop | No| Whether to start drawing again when the screen is looped.|
+
+  **Table 5** ChartLineStyle
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| width | &lt;length&gt; | 1px | No| Line width.|
+| smooth | boolean | false | No| Whether the line is smooth.|
+
+  **Table 6** PointStyle
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| shape | string | circle | No| Shape of the highlight point. Available values are as follows:<br>- circle|
+| size | &lt;length&gt; | 5px | No| Size of the highlight point.|
+| strokeWidth | &lt;length&gt; | 1px | No| Stroke width.|
+| strokeColor | &lt;color&gt; | \#ff0000 | No| Stroke color.|
+| fillColor | &lt;color&gt; | \#ff0000 | No| Fill color.|
+| display | boolean | true | No| Whether to display the highlight spot.|
+
+  **Table 7** ChartLoop
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| margin | &lt;length&gt; | 1 | No| Number of erased points (horizontal distance between the latest drawn point and the earliest point). You are not advised to use **margin** together with **topPoint**, **bottomPoint**, or **headPoint** for mini-, small- and standard-system devices. If you do so, there is a possibility that the point is in the erase area and invisible.|
+
+
+
+
+## Methods
+
+| Methods| Parameter| Description|
+| -------- | -------- | -------- |
+| append | {<br>serial: number, // Set the data subscript of the line chart to be updated.<br>data: Array&lt;number&gt;, // Set the new data.<br>} | Dynamically add data to an existing data series. The target series is specified based on **serial**, which is the subscript of the datasets array and starts from 0. **datasets[index].data** is not updated. Only line charts support this attribute. The value is incremented by 1 based on the horizontal coordinate and is related to the **xAxis min/max** setting.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| click | - | Triggered when the component is clicked. |
+| longpress | - | Triggered when the component is long pressed. |
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. |
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. |
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders. |
+| background-color | &lt;color&gt; | - | No| Background color.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+## Example
+
+1. Line chart
+  
+   ```html
+   <!-- xxx.hml -->
+   <div class="container">
+     <chart class="chart" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart>
+     <input class="button" type="button" value="Add data" onclick="addData"/>
+   </div>
+   ```
+
+   
+   ```css
+   /* xxx.css */
+   .container {
+     flex-direction: column;
+     justify-content: center;
+     align-items: center;
+     width: 454px;
+     height: 454px;
+     background-color: white;
+   }
+   .chart {
+     width: 300px;
+     height: 300px;
+   }
+   .button {
+     width: 280px;
+     border-radius: 0px;
+   }
+   ```
+
+   
+   ```js
+   // xxx.js
+   export default {
+     data: {
+       lineData: [
+         {
+           strokeColor: '#0081ff',
+           fillColor: '#cce5ff',
+           data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
+           gradient: true,
+         }
+       ],
+       lineOps: {
+         xAxis: {
+           min: 0,
+           max: 20,
+           display: false,
+         },
+         yAxis: {
+           min: 0,
+           max: 1000,
+           display: false,
+         },
+         series: {
+           lineStyle: {
+             width: "5px",
+             smooth: true,
+           },
+           headPoint: {
+             shape: "circle",
+             size: 10,
+             strokeWidth: 5,
+             fillColor: '#ffffff',
+             strokeColor: '#007aff',
+             display: true,
+           },
+           loop: {
+             margin: 2,
+             gradient: true,
+           }
+         }
+       },
+     },
+     addData() {
+       this.$refs.linechart.append({
+         serial: 0,
+         data: [Math.floor(Math.random() * 400) + 400]
+       })
+     }
+   }
+   ```
+
+   ![lite_line](figures/lite_line.PNG)
+
+2. Bar chart
+  
+   ```html
+   <!-- xxx.hml -->
+   <div class="container">
+     <chart class="chart" type="bar" id="bar-chart" options="{{barOps}}" datasets="{{barData}}"></chart>
+   </div>
+   ```
+
+   
+   ```css
+   /* xxx.css */
+   .container {
+     flex-direction: column;
+     justify-content: center;
+     align-items: center;
+     width: 454px;
+     height: 454px;
+     background-color: white;
+   }
+   .chart {
+     width: 300px;
+     height: 300px;
+   }
+   ```
+
+   
+   ```js
+   // xxx.js
+   export default {
+     data: {
+       barData: [
+         {
+           fillColor: '#f07826',
+           data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628],
+         },
+         {
+           fillColor: '#cce5ff',
+           data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410],
+         },
+         {
+           fillColor: '#ff88bb',
+           data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657],
+         },
+       ],
+       barOps: {
+         xAxis: {
+           min: 0,
+           max: 20,
+           display: false,
+           axisTick: 10
+         },
+         yAxis: {
+           min: 0,
+           max: 1000,
+           display: false,
+         },
+       },
+     }
+   }
+   ```
+
+   ![lite_bar](figures/lite_bar.PNG)
--- a/en/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md
+# image-animator
+
+The **\<image-animator>** component is used to provide an image frame animator.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| images | Array&lt;ImageFrame&gt; | - | Yes| Image frame information. The frame information includes the image path, size, and location. The supported image formats include PNG, JPG, and BMP. For details about **ImageFrame**, see Table 1.<br>**NOTE**<br>Use data binding, for example, **images = {{images}}**, to specify the image. Declare the corresponding variable in the JavaScript: **images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]**. |
+| iteration | number \| string | infinite | No| Number of times that the frame animation is played. **number** indicates a fixed number of playback operations, and **infinite** indicates an unlimited number of playback operations.|
+| reverse | boolean | false | No| Playback sequence.<br/>- **true**: Images are played from the last one to the first one.<br/>- **false**: Images are played from the first one to the last one. |
+| fixedsize | boolean | true | No| Whether the image size is the same as the component size.<br>- **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.<br>- **false**: The image size is different from the component size. In this case, the width, height, top, and left attributes of each image must be set separately. |
+| duration | string | - | Yes| Single video playback duration, in seconds (s) or milliseconds (ms). The default unit is ms. If the value is **0**, no image is played. The value change takes effect only at the start of the next cycle. |
+| fillmode<sup>5+</sup> | string | forwards | No| Status of the frame animation after its playback is complete. Available values are as follows:<br>- **none**: restores to the initial status.<br>- **forwards**: retains the ending status defined for the last key frame.|
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+  **Table 1** ImageFrame
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| src | &lt;uri&gt; | - | Yes| Image path.|
+| width | &lt;length&gt; | 0 | No| Image width.|
+| height | &lt;length&gt; | 0 | No| Image height.|
+| top | &lt;length&gt; | 0 | No| Vertical coordinate of the image relative to the upper left corner of the component.|
+| left | &lt;length&gt; | 0 | No| Horizontal coordinate of the image relative to the upper left corner of the component.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| stop | - | Triggered when the frame animation stops|
+| click | - | Triggered when the component is clicked. |
+| longpress | - | Triggered when the component is long pressed. |
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. |
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br><br>If this attribute is not set, the default value **0** is used.|
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br><br>If this attribute is not set, the default value **0** is used.|
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| left\|Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
+
+
+## Methods
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| start | - | Starts to play the frame animation of an image. If this method is called again, the playback starts from the first frame.|
+| pause | - | Pauses the frame animation playback of an image.|
+| stop | - | Stops the frame animation playback of an image.|
+| resume | - | Resumes the frame animation playback of an image.|
+| getState | - | Obtains the playback state. Available values are as follows:<br>- playing<br>- paused<br>- stopped|
+
+
+## Example
+
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <image-animator class="animator" ref="animator" images="{{frames}}" duration="1s" />
+  <div class="btn-box">
+    <input class="btn" type="button" value="start" @click="handleStart" />
+    <input class="btn" type="button" value="stop" @click="handleStop" />
+    <input class="btn" type="button" value="pause" @click="handlePause" />
+    <input class="btn" type="button" value="resume" @click="handleResume" />
+  </div>
+</div>
+```
+
+
+```css
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+.animator {
+  width: 70px;
+  height: 70px;
+}
+.btn-box {
+  width: 264px;
+  height: 120px;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+.btn {
+  border-radius: 8px;
+  width: 120px;
+  margin-top: 8px;
+}
+```
+
+
+```js
+//xxx.js
+export default {
+  data: {
+    frames: [
+      {
+        src: "/common/asserts/heart78.png",
+      },
+      {
+        src: "/common/asserts/heart79.png",
+      },
+      {
+        src: "/common/asserts/heart80.png",
+      },
+      {
+        src: "/common/asserts/heart81.png",
+      },
+      {
+        src: "/common/asserts/heart82.png",
+      },
+      {
+        src: "/common/asserts/heart83.png",
+      },
+      {
+        src: "/common/asserts/heart84.png",
+      },
+      {
+        src: "/common/asserts/heart85.png",
+      },
+      {
+        src: "/common/asserts/heart86.png",
+      },
+      {
+        src: "/common/asserts/heart87.png",
+      },
+      {
+        src: "/common/asserts/heart88.png",
+      },
+      {
+        src: "/common/asserts/heart89.png",
+      },
+      {
+        src: "/common/asserts/heart90.png",
+      },
+      {
+        src: "/common/asserts/heart91.png",
+      },
+      {
+        src: "/common/asserts/heart92.png",
+      },
+      {
+        src: "/common/asserts/heart93.png",
+      },
+      {
+        src: "/common/asserts/heart94.png",
+      },
+      {
+        src: "/common/asserts/heart95.png",
+      },
+      {
+        src: "/common/asserts/heart96.png",
+      },
+    ],
+  },
+  handleStart() {
+    this.$refs.animator.start();
+  },
+  handlePause() {
+    this.$refs.animator.pause();
+  },
+  handleResume() {
+    this.$refs.animator.resume();
+  },
+  handleStop() {
+    this.$refs.animator.stop();
+  },
+};
+```
+
+![image-animator](figures/image-animator.gif)
--- a/en/application-dev/reference/arkui-js-lite/js-components-basic-image.md
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-image.md
+# image
+
+The **\<image>** component is used to render and display images.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| src | string | No| <br>Image path. The supported image formats include PNG and JPG.|
+| id | string | No| Unique ID of the component.|
+| style | string | No| Style declaration of the component.|
+| class | string | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| click | - | Triggered when the component is clicked. |
+| longpress | - | Triggered when the component is long pressed. |
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. |
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br><br>If this attribute is not set, the default value **0** is used.|
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br><br>If this attribute is not set, the default value **0** is used.|
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders. |
+| background-color | &lt;color&gt; | - | No| Background color.|
+| opacity | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| left\|Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
+
+## Example
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <image src="common/images/hw_right.png" style="width: 300px; height: 300px; border-color: red; border-width: 2px;">
+  </image>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+```
+
+![image](figures/image.png)
--- a/en/application-dev/reference/arkui-js-lite/js-components-basic-input.md
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-input.md
+# input
+
+The **\<input>** component provides an interactive interface to receive user input. It can be a radio button, check box, or button.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| type | string | <br>button | No| Type of the component, which cannot be dynamically modified. The options are as follows:<br>- **button**: a button that can be clicked.<br>- **checkbox**: a check box.<br>- **radio**: a radio button that allows users to select one from multiple others with the same name. |
+| checked | boolean | false | No| Whether the component is selected. This attribute is valid only when **type** is set to **checkbox** or **radio**.|
+| name | string | - | No| Name of the component.|
+| value | string | - | No| Value of the component. When **type** is **radio**, this attribute is mandatory and the value must be unique for radio buttons with the same name.|
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+- When **type** is set to **checkbox** or **radio**, the following events are supported.
+    | Name| Parameter| Description|
+  | -------- | -------- | -------- |
+  | change | { checked:true \| false } | Triggered when the checked status of the **checkbox** or **radio** button changes.|
+  | click | - | Triggered when the component is clicked. |
+  | longpress | - | Triggered when the component is long pressed. |
+  | swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. |
+
+- When **type** is set to **button**, the following events are supported.
+    | Name| Parameter| Description|
+  | -------- | -------- | -------- |
+  | click | - | Triggered when the component is clicked. |
+  | longpress | - | Triggered when the component is long pressed. |
+  | swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. |
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| color | &lt;color&gt; | \#ffffff | No| Text color of the component.|
+| font-size | &lt;length&gt; | 30px | No| Font size of the component.|
+| width | &lt;length&gt; | - | No| Width of the component. The default value for a button is **100px**.|
+| height | &lt;length&gt; | - | No| Height of the component. The default value for a button is **50px**.|
+| font-family | string | SourceHanSansSC-Regular | No| Font. Only the **SourceHanSansSC-Regular** font is supported.|
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders. |
+| background-color | &lt;color&gt; | - | No| Background color.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+## Example
+
+1. Common button
+
+   ```html
+   <!-- xxx.hml -->
+   <div class="div-button">
+     <input class="button" type="button" value="Input-Button"></input>
+   </div>
+   ```
+
+   ```css
+   /* xxx.css */
+   .div-button {
+     flex-direction: column;
+     align-items: center;
+     width: 100%;
+     height: 100%;
+   }
+   .button {
+     margin-top: 30px;
+     width: 280px;
+   }
+   ```
+
+   ![input-type-button](figures/input-type-button.png)
+
+   
+
+2. Check box
+
+   ```html
+   <!-- xxx.hml -->
+   <div class="content">
+     <input onchange="checkboxOnChange" checked="true" type="checkbox"></input>
+     <text class="text">{{text}}</text>
+   </div>
+   ```
+
+   ```css
+   /* xxx.css */
+   .content{
+     width: 100%;
+     height: 100%;
+     flex-direction: column;
+     align-items: center; 
+     justify-content: center;   
+   }
+   .text{
+     font-size: 30px;
+     text-align: center;
+     width: 200px;
+     margin-top: 20px;
+     height: 100px;
+   }
+   ```
+
+   ```javascript
+   // xxx.js
+   export default {
+     data: {
+       text: "text"
+     },
+     checkboxOnChange(e) {
+       this.text = e.checked;
+     }
+   }
+   ```
+
+   ![input-type-checkbox](figures/input-type-checkbox.gif)
+
+3. Radio button
+
+   ```html
+   <!-- xxx.hml -->
+   <div class="container">
+     <div class="item">
+       <input type="radio" checked="true" name="radioSample" value="radio1" onchange="onRadioChange"></input>
+       <text class="text">radio1</text>
+     </div>
+     <div class="item">
+       <input type="radio" checked="false" name="radioSample" value="radio2" onchange="onRadioChange"></input>
+       <text class="text">radio2</text>
+     </div>
+     <div class="item">
+       <input type="radio" checked="false" name="radioSample" value="radio3" onchange="onRadioChange"></input>
+       <text class="text">radio3</text>
+     </div>
+   </div>
+   ```
+
+   ```css
+   /* xxx.css */
+   .container {
+     width: 100%;
+     height: 100%;
+     justify-content: center;
+     align-items: center;
+     flex-direction: column;
+   }
+   .item {
+     width: 50%;
+     height: 30%;
+     justify-content: center;
+   }
+   .text {
+     margin-top: 25%;
+     font-size: 30px;
+     text-align: center;
+     width: 200px;
+     height: 100px;
+   }
+   ```
+
+   ![input-type-radio](figures/input-type-radio.gif)
--- a/en/application-dev/reference/arkui-js-lite/js-components-basic-marquee.md
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-marquee.md
+# marquee
+
+The **\<marquee>** component is used to display a scrolling piece of text.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| scrollamount | number | 6 | No| Maximum length of each scroll.|
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| click | - | Triggered when the component is clicked. |
+| longpress | - | Triggered when the component is long pressed. |
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. |
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| color | &lt;color&gt; | \#ffffff<br><br><br>| No| Font color of the scrolling text.|
+| font-size | &lt;length&gt; | <br>30 | No| Font size of the scrolling text.|
+| font-family | string | <br><br>SourceHanSansSC-Regular | No| <br><br>Font. Only the **SourceHanSansSC-Regular** font is supported.|
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br><br>If this attribute is not set, the default value **0** is used.|
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br><br>If this attribute is not set, the default value **0** is used.|
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| left\|Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
+
+## Example
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <marquee class="customMarquee" scrollamount="{{scrollAmount}}">{{marqueeCustomData}}</marquee>
+  <text class="text" onclick="addSpeed">speed+</text>
+  <text class="text" onclick="downSpeed">speed-</text>
+  <text class="text" onclick="changeData">changeData</text>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+}
+.customMarquee {
+  width: 50%;
+  height: 80px;
+  padding: 10px;
+  margin: 20px;
+  border-width: 4px;
+  border-color: #ffffff;
+  border-radius: 20px;
+  font-size: 38px;
+}
+.text {
+  font-size: 30px;
+  text-align: center;
+  width: 30%;
+  height: 10%;
+  margin-top: 5%;
+  background-color: #f2f2f2;
+  border-radius: 40px;
+  color: #0d81f2;
+}
+```
+
+```javascript
+// xxx.js
+export default {
+  data: {
+    scrollAmount: 30,
+    marqueeCustomData: 'Custom marquee Custom marquee Custom marquee'
+  },
+  addSpeed() {
+    this.scrollAmount++;
+  },
+  downSpeed() {
+    this.scrollAmount--;
+  },
+  changeData() {
+    this.marqueeCustomData = 'Change Data Change Data Change Data';
+  }
+}
+```
+
+![marquee](figures/marquee.gif)
--- a/en/application-dev/reference/arkui-js-lite/js-components-basic-picker-view.md
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-picker-view.md
+# picker-view
+
+The **\<picker-view>** component provides the view that shows an embedded scrollable selector on the screen.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| type | string | text | No| Type of the scrollable selector, which cannot be changed dynamically. Available values are as follows:<br>- **text**: text selector.<br>- **time**: time selector.|
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+Text selector (**type** is **text**)
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| range | Array | - | No| Value range of the text selector.<br>Use data binding, for example, **range = {{data}}**, to specify the range. Declare the corresponding variable in the JavaScript: **data: ["15", "20", "25"]**.|
+| selected | string | 0 | No| Default value of the text selector. The value is the index of **range**.|
+
+Time selector (**type** is **time**)
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| selected | string | 00:00 | No| Default value of the time selector, in the format of HH:mm.<br>|
+
+
+## Events
+
+Text selector (**type** is **text**)
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| change | { newValue: newValue, newSelected: newSelected } | Triggered when a value is specified for the text selector.|
+
+Time selector (**type** is **time**)
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| change | { hour: hour, minute: minute} | Triggered when a value is specified for the time selector. |
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| color | &lt;color&gt; | \#808080      | No| Font color of a candidate item.|
+| font-size | &lt;length&gt; | 30px | No| Font size of a candidate item. The value is of the length type, in pixels.|
+| selected-color | &lt;color&gt; | \#ffffff | No| Font color of the selected item.|
+| selected-font-size | &lt;length&gt; | 38px | No| Font size of the selected item. The value is of the length type, in pixels.|
+| selected-font-family | string | HYQiHei-65S | No| Font type of the selected item.|
+| font-family | string | HYQiHei-65S | No| Font type of an item.|
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. |
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+
+## Example
+
+
+```html
+<!-- xxx.hml -->
+<div class="container" @swipe="handleSwipe">
+  <text class="title">
+    Selected: {{time}}
+  </text>
+  <picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
+</div>
+```
+
+
+```css
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+.title {
+  font-size: 30px;
+  text-align: center;
+}
+.time-picker {
+  width: 500px;
+  height: 400px;
+  margin-top: 20px;
+}
+```
+
+
+```js
+/* xxx.js */
+export default {
+  data: {
+    defaultTime: "",
+    time: "",
+  },
+  onInit() {
+    this.defaultTime = this.now();
+  },
+  handleChange(data) {
+    this.time = this.concat(data.hour, data.minute);
+  },
+  now() {
+    const date = new Date();
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    return this.concat(hours, minutes);
+  },
+
+  fill(value) {
+    return (value > 9 ? "" : "0") + value;
+  },
+
+  concat(hours, minutes) {
+    return `${this.fill(hours)}:${this.fill(minutes)}`;
+  },
+}
+```
+
+![picker-view](figures/picker-view.png)
--- a/en/application-dev/reference/arkui-js-lite/js-components-basic-progress.md
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-progress.md
+# progress
+
+The **\<Progress>** component is used to provide a progress bar that displays the progress of content loading or an operation.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| type | string | horizontal | No| Type of the progress bar, which cannot be changed dynamically. Available values are as follows:<br>- **horizontal**: linear progress bar.<br>- **arc**: arc progress bar.|
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+Different types of progress bars support different attributes.
+
+- When **type** is set to **horizontal**, the following attributes are supported.
+    | Name| Type| Default Value| Mandatory| Description|
+  | -------- | -------- | -------- | -------- | -------- |
+  | percent | number | 0 | No| Current progress. The value ranges from 0 to 100.|
+
+- When **type** is set to **arc**, the following attributes are supported.
+    | Name| Type| Default Value| Mandatory| Description|
+  | -------- | -------- | -------- | -------- | -------- |
+  | percent | number | 0 | No| Current progress. The value ranges from 0 to 100.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| click | - | Triggered when the component is clicked. |
+| longpress | - | Triggered when the component is long pressed. |
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. |
+
+
+## Styles
+
+- When **type** is set to **horizontal**, the following styles are supported.
+
+  | Name        | Type          | Default Value                                        | Mandatory| Description              |
+  | ------------ | -------------- | ---------------------------------------------- | ---- | ------------------ |
+  | color        | &lt;color&gt;  | \#6b9ac7                                       | No  | Color of the progress bar.|
+  | stroke-width | &lt;length&gt; | 32<sup>1-4 </sup>\| 4<sup>5+</sup>px | No  | Stroke width of the progress bar.|
+
+- When **type** is set to **arc**, the following styles are supported.
+
+  | Name            | Type          | Default Value| Mandatory| Description                                                        |
+  | ---------------- | -------------- | ------ | ---- | ------------------------------------------------------------ |
+  | color            | &lt;color&gt;  | -      | No  | Color of the arc progress bar.                                          |
+  | background-color | &lt;color&gt;  | -      | No  | Background color of the arc progress bar.                                        |
+  | stroke-width     | &lt;length&gt; | -      | No  | Width of the arc progress bar.<br>A larger width value means that the progress bar is closer to the center of the circle. The width is always within the radius range.|
+  | start-angle      | &lt;deg&gt;    | 240    | No  | Start angle of the arc progress bar, which starts from the direction of zero o'clock. The value ranges from 0 to 360 degrees (clockwise).|
+  | total-angle      | &lt;deg&gt;    | 240    | No  | Total length of the arc progress bar. The value ranges from –360 to 360. A negative number indicates anticlockwise.|
+  | center-x         | &lt;length&gt; | -      | No  | Center of the arc progress bar (with the upper left corner of this widget as the coordinate origin). This style must be used together with **center-y** and **radius**.|
+  | center-y         | &lt;length&gt; | -      | No  | Center of the arc progress bar (with the upper left corner of this widget as the coordinate origin). This style must be used together with **center-x** and **radius**.|
+  | radius           | &lt;length&gt; | -      | No  | Radius of the arc progress bar. This style must be used together with **center-x** and **center-y**.        |
+
+In addition to the preceding styles, the following styles are supported.
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used.|
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used.|
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+## Example
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <progress type="horizontal" percent="{{horizontalVal}}" style="height: 10%;width: 40%;" onclick = "changeHorizontal"></progress>
+  <progress type="arc" class="min-progress" percent="{{arcVal}}" on:click="changeArc"></progress>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+}
+.min-progress {
+  width: 300px;
+  height: 300px;
+}
+```
+
+```javascript
+// xxx.js
+export default {
+  data: {
+    arcVal: 0,
+    horizontalVal: 0
+  },
+  changeArc() {
+    this.arcVal+= 10;
+  },
+  changeHorizontal() {
+    this.horizontalVal+= 10;
+  }
+}
+```
+
+![progress](figures/progress.png)
--- a/en/application-dev/reference/arkui-js-lite/js-components-basic-qrcode.md
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-qrcode.md
+# qrcode
+
+
+The **\<qrcode>** component is used to generate and display a QR code.
+
+> **NOTE**
+>
+> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| value | string | - | Yes| Content used to generate the QR code. The maximum length is 256.|
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| click | - | Triggered when the component is clicked. |
+| longpress | - | Triggered when the component is long pressed. |
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. |
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| color | &lt;color&gt; | \#000000 | No| Color of the QR code.|
+| background-color | &lt;color&gt; | \#ffffff | No| Background color of the QR code.|
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. |
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+>  **NOTE**
+> - If the values of **width** and **height** are different, the smaller value is used as the length of the QR code. The generated QR code is center displayed.
+>
+>- The minimum values of **width** and **height** are 200 px.
+
+
+## Example
+
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <qrcode value="{{qr_value}}" class="qrCode" style="color: {{qr_color}};background-color: {{qr_bcol}};"></qrcode>
+  <input type="button" onclick="changeColor" class="button">Color</input>
+  <input type="button" onclick="changeBackgroundColor" class="button">BackgroundColor</input>
+  <input type="button" onclick="changeColor" class="button">Value</input>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.qrCode {
+  width: 200px;
+  height: 200px;
+}
+.button {
+  width: 30%;
+  height: 10%;
+  margin-top: 5%;
+}
+```
+
+```javascript
+// xxx.js
+export default {
+  data: {
+    qr_col: '#87ceeb',
+    qr_bcol: '#f0ffff',
+    qr_value: 'value'
+  },
+  changeColor() {
+    if (this.qr_col == '#87ceeb') {
+      this.qr_col = '#fa8072';
+    } else {
+      this.qr_col = '#87ceeb';
+    }
+  },
+  changeBackgroundColor() {
+    if (this.qr_bcol == '#f0ffff') {
+      this.qr_bcol = '#ffffe0';
+    } else {
+      this.qr_bcol = '#f0ffff';
+    }
+  },
+  changeValue() {
+    if (this.qr_value == 'value') {
+      this.qr_value = 'change';
+    } else {
+      this.qr_value = 'value';
+    }
+  }
+}
+```
+
+![qrcode](figures/qrcode.gif)
--- a/en/application-dev/reference/arkui-js-lite/js-components-basic-slider.md
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-slider.md
+# slider
+
+The **\<Slider>** component is used to quickly adjust settings, such as the volume and brightness.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| min | number | 0 | No| Minimum value of the slider.|
+| max | number | 100 | No| Maximum value of the slider.|
+| value | number | 0 | No| Initial value of the slider.|
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| change | ChangeEvent | Triggered when the value changes.|
+| click | - | Triggered when the component is clicked. |
+| longpress | - | Triggered when the component is long pressed. |
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. |
+
+  **Table 2** ChangeEvent
+
+| Attribute| Type| Description|
+| -------- | -------- | -------- |
+| progress<sup>(deprecated<sup>5+</sup>)</sup> | string | Current value of the slider.|
+| value<sup>5+</sup> | number | Current value of the slider.|
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| color | &lt;color&gt; | \#000000 | No| Background color of the slider.|
+| selected-color | &lt;color&gt; | \#ffffff | No| Selected color of the slider.|
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. |
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+## Example
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <text>slider start value is {{startValue}}</text>
+  <text>slider current value is {{currentValue}}</text>
+  <text>slider end value is {{endValue}}</text>
+  <slider min="0" max="100" value="{{value}}" onchange="setvalue" style="width: 20%;height: 10%"></slider>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+```
+
+```javascript
+// xxx.js
+export default {
+  data: {
+    value: 0,
+    startValue: 0,
+    currentValue: 0,
+    endValue: 100,
+  },
+  setvalue(e) {
+    this.currentValue = e.value;
+  }
+}
+```
+
+![slider](figures/slider.png)
--- a/en/application-dev/reference/arkui-js-lite/js-components-basic-switch.md
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-switch.md
+# switch
+
+The **\<switch>** component is used to enable or disable a function.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| checked | boolean | false | No| Whether the component is checked or not.|
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| change | { checked: checkedValue } | Triggered when the **checked** state changes.|
+| click | - | Triggered when the component is clicked. |
+| longpress | - | Triggered when the component is long pressed. |
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. |
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br><br>If this attribute is not set, the default value **0** is used.|
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br><br>If this attribute is not set, the default value **0** is used.|
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| left\|Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
+
+## Example
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <div class="box">
+    <switch checked="true" @change="switchChange"></switch>
+    <text>{{title}}</text>
+  </div>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+.box{
+  width: 18%;
+  height: 25%;
+  flex-direction:column;
+  justify-content: center;
+  align-items: center;
+}
+```
+
+```javascript
+// xxx.js
+export default {
+  data: {
+      title: 'on'
+  },
+  switchChange(e){
+      console.log(e.checked);
+      if(e.checked){
+          this.title="on"
+      }else{
+          this.title="off"
+      }
+  }
+}
+```
+
+![switch](figures/switch.gif)
--- a/en/application-dev/reference/arkui-js-lite/js-components-basic-text.md
+++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-text.md
+# text
+
+The **\<text>** component is used to display a piece of textual information.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| click | - | Triggered when the component is clicked.|
+| longpress | - | Triggered when the component is long pressed.|
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.|
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| color | &lt;color&gt; | \#ffffff | No| Font color.|
+| font-size | &lt;length&gt; | 30px | No| Font size. |
+| letter-spacing | &lt;length&gt; | 2px | No| Character spacing (px).|
+| text-align | string | left | No| Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **center**: The text is center-aligned.<br>- **right**: The text is right-aligned.|
+| text-overflow | string | clip | No| Available values are as follows:<br>- **clip**: The text is clipped and displayed based on the size of the parent container.<br>- **ellipsis**: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis.|
+| font-family | string | SourceHanSansSC-Regular | No| Font. Only the **SourceHanSansSC-Regular** font is supported.|
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0px | No| Component width.<br>Unit: pixel<br>If this attribute is not set, the default value **0** is used.|
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0px | No| Component height.<br>Unit: pixel<br>If this attribute is not set, the default value **0** is used.|
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+| line-height<sup>10+</sup> | number | 0px | No| Text line height.<br>Unit: pixel<br>If this attribute is not set, the text line height is adaptive.|
+
+## Example
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+    <text class="title">
+        Hello {{ title }}
+    </text>
+</div>
+```
+
+```CSS
+/* xxx.css */
+.container {
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.title {
+    width: 100px;
+    font-size: 30px;
+    text-align: center;
+    color: red;
+}
+```
+
+```javascript
+// xxx.js
+export default {
+    data: {
+        title: ""
+    },
+    onInit() {
+        this.title = "World";
+    }
+}
+```
+
+![text](figures/text.png)
--- a/en/application-dev/reference/arkui-js-lite/js-components-canvas-canvas.md
+++ b/en/application-dev/reference/arkui-js-lite/js-components-canvas-canvas.md
+# canvas
+
+The **\<canvas>** component is used for customizing drawings.
+
+> **NOTE**
+>
+> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| click | - | Triggered when the component is clicked.|
+| longpress | - | Triggered when the component is long pressed.|
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.|
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. |
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+
+## Methods
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| getContext | string  | Obtains the context of the drawing on a canvas. The parameter can be set only to **2d**. The return value is a 2D drawing object that provides specific 2D drawing operations. For details, see [CanvasRenderingContext2D](js-components-canvas-canvasrenderingcontext2d.md).|
--- a/en/application-dev/reference/arkui-js-lite/js-components-canvas-canvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-js-lite/js-components-canvas-canvasrenderingcontext2d.md
+# CanvasRenderingContext2D
+
+
+**CanvasRenderingContext2D** allows you to draw rectangles and text on a canvas.
+
+**Example**
+
+```html
+<!-- xxx.hml -->
+<canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
+<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
+
+```
+
+
+```javascript
+// xxx.js
+export default {
+  handleClick() {
+    const el = this.$refs.canvas1;
+    const ctx = el.getContext('2d');
+    ctx.beginPath();
+    ctx.arc(100, 75, 50, 0, 6.28);
+    ctx.stroke();
+  },
+}
+```
+
+  ![en-us_image_0000001431548113](figures/en-us_image_0000001431548113.png)
+
+
+## fillRect()
+
+Fills a rectangle on the canvas.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| x | number | X-coordinate of the upper left corner of the rectangle.|
+| y | number | Y-coordinate of the upper left corner of the rectangle.|
+| width | number | Width of the rectangle.|
+| height | number | Height of the rectangle.|
+
+**Example**
+
+ ![en-us_image_0000001431388525](figures/en-us_image_0000001431388525.png)
+
+
+  ```javascript
+  ctx.fillRect(20, 20, 200, 150);
+  ```
+
+
+## fillStyle
+
+Sets the style to fill an area.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| color | &lt;color&gt; | Color used to fill the area|
+
+**Example**
+
+  ![en-us_image_0000001431388505](figures/en-us_image_0000001431388505.png)
+
+
+  ```javascript
+  ctx.fillStyle = '#0000ff';
+  ctx.fillRect(20, 20, 150, 100);
+  ```
+
+
+## strokeRect()
+
+Draws a rectangle stroke on the canvas.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| x | number | X-coordinate of the upper left corner of the rectangle.|
+| y | number | Y-coordinate of the upper left corner of the rectangle.|
+| width | number | Width of the rectangle.|
+| height | number | Height of the rectangle.|
+
+**Example**
+
+  ![en-us_image_0000001381268264](figures/en-us_image_0000001381268264.png)
+
+
+  ```javascript
+  ctx.strokeRect(30, 30, 200, 150);
+  ```
+
+
+## fillText()
+
+Draws filled text on the canvas.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| text | string | Text to draw.|
+| x | number | X-coordinate of the lower left corner of the text.|
+| y | number | Y-coordinate of the lower left corner of the text.|
+
+**Example**
+
+  ![en-us_image_0000001431548109](figures/en-us_image_0000001431548109.png)
+
+
+  ```javascript
+  ctx.font = '35px sans-serif';
+  ctx.fillText("Hello World!", 20, 60);
+  ```
+
+
+## lineWidth
+
+Sets the width of a line.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| lineWidth | number | Line width.|
+
+**Example**
+
+  ![en-us_image_0000001431548121](figures/en-us_image_0000001431548121.png)
+
+
+  ```javascript
+  ctx.lineWidth = 5;
+  ctx.strokeRect(25, 25, 85, 105);
+  ```
+
+
+## strokeStyle
+
+Sets the stroke style.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| color | &lt;color&gt; | Color of the stroke.|
+
+**Example**
+
+  ![en-us_image_0000001380789172](figures/en-us_image_0000001380789172.png)
+
+
+  ```javascript
+  ctx.lineWidth = 10;
+  ctx.strokeStyle = '#0000ff';
+  ctx.strokeRect(25, 25, 155, 105);
+  ```
+
+
+### stroke()<sup>5+</sup>
+
+Draws a stroke.
+
+**Example**
+
+![en-us_image_0000001431388513](figures/en-us_image_0000001431388513.png)
+
+  ```javascript
+  ctx.moveTo(25, 25);
+  ctx.lineTo(25, 105);
+  ctx.strokeStyle = 'rgb(0,0,255)';
+  ctx.stroke();
+  ```
+
+
+### beginPath()<sup>5+</sup>
+
+Creates a drawing path.
+
+**Example**
+
+  ![en-us_image_0000001431548125](figures/en-us_image_0000001431548125.png)
+
+
+  ```javascript
+  ctx.beginPath();              
+  ctx.lineWidth = '6';
+  ctx.strokeStyle = '#0000ff';
+  ctx.moveTo(15, 80); 
+  ctx.lineTo(280, 160);
+  ctx.stroke();
+  ```
+
+
+### moveTo()<sup>5+</sup>
+
+Moves a drawing path to a target position on the canvas.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| x | number | X-coordinate of the target position.|
+| y | number | Y-coordinate of the target position.|
+
+**Example**
+
+  ![en-us_image_0000001431388529](figures/en-us_image_0000001431388529.png)
+
+  ```javascript
+  ctx.beginPath();
+  ctx.moveTo(10, 10);
+  ctx.lineTo(280, 160);
+  ctx.stroke();
+  ```
+
+
+### lineTo()<sup>5+</sup>
+
+Connects the current point to a target position using a straight line.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| x | number | X-coordinate of the target position.|
+| y | number | Y-coordinate of the target position.|
+
+**Example**
+
+![en-us_image_0000001431148365](figures/en-us_image_0000001431148365.png)
+
+  ```javascript
+  ctx.beginPath();
+  ctx.moveTo(10, 10);
+  ctx.lineTo(280, 160);
+  ctx.stroke();
+  ```
+
+
+### closePath()<sup>5+</sup>
+
+Draws a closed path.
+
+**Example**
+
+  ![en-us_image_0000001381268284](figures/en-us_image_0000001381268284.png)
+
+
+  ```javascript
+  ctx.beginPath();
+  ctx.moveTo(30, 30);
+  ctx.lineTo(110, 30);
+  ctx.lineTo(70, 90);
+  ctx.closePath();
+  ctx.stroke();
+  ```
+
+
+## font
+
+Sets the font style.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| value | string | Font style. **sans-serif**, **serif**, and **monospace** are supported. The default value is **30px HYQiHei-65S**.|
+
+**Example**
+
+  ![en-us_image_0000001381108328](figures/en-us_image_0000001381108328.png)
+
+
+  ```javascript
+  ctx.font = '30px sans-serif';
+  ctx.fillText("Hello World", 20, 60);
+  ```
+
+
+## textAlign
+
+Sets the text alignment mode.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| align | string | Available values are as follows:<br>- **left** (default): The text is left-aligned.<br>- **right**: The text is right-aligned.<br>- **center**: The text is center-aligned.|
+
+**Example**
+
+  ![en-us_image_0000001431388517](figures/en-us_image_0000001431388517.png)
+
+
+  ```javascript
+  ctx.strokeStyle = '#0000ff';
+  ctx.moveTo(140, 10);
+  ctx.lineTo(140, 160);
+  ctx.stroke();
+  
+  ctx.font = '18px sans-serif';    
+  
+  // Show the different textAlign values
+  ctx.textAlign = 'left';      
+  ctx.fillText('textAlign=left', 140, 100);
+  ctx.textAlign = 'center';     
+  ctx.fillText('textAlign=center',140, 120);              
+  ctx.textAlign = 'right';      
+  ctx.fillText('textAlign=right',140, 140);
+  ```
+
+
+## arc()<sup>5+</sup>
+
+Draws an arc on the canvas.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| x | number | X-coordinate of the center point of the arc.|
+| y | number | Y-coordinate of the center point of the arc.|
+| radius | number | Radius of the arc.|
+| startAngle | number | Start radian of the arc.|
+| endAngle | number | End radian of the arc.|
+| anticlockwise | boolean | Whether to draw the arc counterclockwise.|
+
+**Example**
+
+![en-us_image_0000001381108320](figures/en-us_image_0000001381108320.png)
+
+  ```javascript
+  ctx.beginPath();
+  ctx.arc(100, 75, 50, 0, 6.28);
+  ctx.stroke();
+  ```
+
+
+### rect()<sup>5+</sup>
+
+Creates a rectangle on the canvas.
+
+**Parameters**
+
+| Parameter| Type| Description|
+| -------- | -------- | -------- |
+| x | number | X-coordinate of the upper left corner of the rectangle.|
+| y | number | Y-coordinate of the upper left corner of the rectangle.|
+| width | number | Width of the rectangle.|
+| height | number | Height of the rectangle.|
+
+**Example**
+
+![en-us_image_0000001381108312](figures/en-us_image_0000001381108312.png)
+
+  ```javascript
+  ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20)
+  ctx.stroke(); // Draw it
+  ```
--- a/en/application-dev/reference/arkui-js-lite/js-components-common-animation.md
+++ b/en/application-dev/reference/arkui-js-lite/js-components-common-animation.md
+# Animation Styles
+
+
+Components support dynamic rotation, translation, and scaling effects. These effects can be set in the **style** attribute or **.css** files.
+
+
+| Name| Type| Default Value| Description|
+| -------- | -------- | -------- | -------- |
+| transform | string | - | Translation, rotation, and scaling attributes. For details, see Table 1. |
+| animation-name | string | - | @keyframes rule. For details, see Table 2. |
+| animation-delay | &lt;time&gt; | 0 | Delay for playing the animation, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms. |
+| animation-duration | &lt;time&gt; | 0 | Animation duration, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms.<br>**NOTE**<br>**animation-duration** must be specified. Otherwise, the duration is **0**, which means the animation will not be played. |
+| animation-iteration-count | number  \| infinite | 1 | Number of times that an animation is played. The animation is played once by default. You can set the value to **infinite** to play the animation infinitely.|
+| animation-timing-function | string | <br>linear | Speed curve of an animation, which makes the animation more fluent.<br>- **linear**: The animation speed keeps unchanged.<br>- **ease-in**: The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used<br>- **ease-out**: The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.<br>- **ease-in-out**: The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used. |
+| animation-fill-mode | string | none | Start and end styles of the animation.<br>- **none**: No style is applied to the target before or after the animation is executed.<br>- **forwards**: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.|
+
+
+  **Table 1** transform
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| translateX | &lt;length&gt; | Moves an element along the x-axis.|
+| translateY | &lt;length&gt; | Moves an element along the y-axis.|
+| rotate | &lt;deg&gt; \| &lt;rad&gt; | Rotates an element.|
+
+>  **NOTE**
+>
+>  Only images of the original size can be rotated on lite wearables.
+
+
+  **Table 2** @keyframes
+
+| Name| Type| Default Value| Description|
+| -------- | -------- | -------- | -------- |
+| background-color | &lt;color&gt; | - | Background color applied to the component after the animation is played.|
+| width | &lt;length&gt; | - | Width value applied to the component after the animation is played.|
+| height | &lt;length&gt; | - | Height value applied to the component after the animation is played.|
+| transform | string | - | Transformation type applied to a component. For details, see Table 1.|
+
+
+If there is no default value for when an animation will start or end, use **from** and **to** to specify the start and end of the display. The following is an example:
+
+
+```
+@keyframes Go
+{
+   from {
+     background-color: #f76160;
+   }
+   to {
+     background-color: #09ba07;
+   }
+}
+```
+
+
+![animation-demo1](figures/animation-demo1.gif)
+
+
+
+
+
+>  **NOTE**
+>
+>  The \@keyframes rule with **from** and **to** defined cannot be dynamically bound to an element.
--- a/en/application-dev/reference/arkui-js-lite/js-components-common-mediaquery.md
+++ b/en/application-dev/reference/arkui-js-lite/js-components-common-mediaquery.md
+# Media Query
+
+>  **NOTE**
+>
+>  - This API is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+>
+>  - The **media** attribute uses the actual size, physical pixel, and screen resolution of the device by default.
+
+
+Media queries are widely used. You can use them to modify the application style based on the device type or specific features and device parameters (such as the screen resolution). Specifically, media queries allow you to design a layout style based on the device and application attributes.
+
+
+## CSS Syntax Rules
+
+Use **@media** to import query statements. The rule is as follows:
+
+```
+@media [media-type] [and|or] [(media-feature)] {
+  CSS-Code;
+}
+```
+
+**@media screen and (round-screen: true) { … }**: The condition is met when the device screen is round.
+
+**@media (max-height: 454) { … }**: Range query. CSS level 3 is used.
+
+>  **NOTE**
+>
+>  - The following operators are not supported: &lt;=, &gt;=, &lt;, and &gt;.
+>  - Nested parentheses are supported since API version 9.
+>  - A media query statement can contain a maximum of 512 characters.
+>  - A media query condition can contain a maximum of 32 characters.
+
+
+## Media Type
+
+| Type    | Description            |
+| ------ | -------------- |
+| screen | Media query based on screen-related parameters.|
+
+
+## Media Logical Operation
+
+You can use media logical operators to implement complex media query. The following table describes the available operators.
+
+**Table 1** Media logical operators
+
+| Type           | Description                                                        |
+| --------------- | ------------------------------------------------------------ |
+| and             | The **and** operator is used to combine multiple media features into one media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.<br>For example, **screen and (device-type: liteWearable) and (max-height: 454)** evaluates to **true** when the device type is wearable and the maximum height of the application is 454 pixel units.|
+| or<sup>9+</sup> | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.<br>For example, **screen and (max-height: 454) or (round-screen: true)** evaluates to **true** when the maximum height of the application is 454 pixel units or the device screen is round.|
+
+
+
+
+## Media Features
+
+| Type            | Description                                                        |
+| ---------------- | ------------------------------------------------------------ |
+| height           | Height of the display area on the application page.                                    |
+| min-height       | Minimum height of the display area on the application page.                                |
+| max-height       | Maximum height of the display area on the application page.                                |
+| width            | Width of the display area on the application page.                                    |
+| min-width        | Minimum width of the display area on the application page.                                |
+| max-width        | Maximum width of the display area on the application page.                                |
+| aspect-ratio     | Ratio of the width to the height of the display area on the application page.<br>Example: **aspect-ratio: 1/2**|
+| min-aspect-ratio | Minimum ratio of the width to the height of the display area on the application page.                    |
+| max-aspect-ratio | Maximum ratio of the width to the height of the display area on the application page.                    |
+| round-screen     | Screen type. The value **true** means that the screen is round, and **false** means the opposite.  |
+
+
+## Sample Code for the Common Media Feature
+
+The number and type of attributes must be the same among **.container** blocks. Otherwise, display errors will occur.
+
+```html
+<!-- xxx.hml -->
+<div>
+  <div class="container">
+    <text class="title">Hello World</text>
+  </div>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  width: 300px;
+  height: 600px;
+  background-color: #008000;
+}
+.title {
+    font-size: 30px;
+    text-align: center;
+}
+@media (device-type: samrtVision) {
+  .container {
+    width: 500px;
+    height: 500px;
+    background-color: #fa8072;
+  }
+} 
+@media (device-type: liteWearable) {
+  .container {
+    width: 300px;
+    height: 300px;
+    background-color: #008b8b;
+  }
+} 
+```
--- a/en/application-dev/reference/arkui-js-lite/js-components-container-div.md
+++ b/en/application-dev/reference/arkui-js-lite/js-components-container-div.md
+# div
+
+The **\<div>** component is a basic container that is used as the root node of the page structure or is used to group the content.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| click | - | Triggered when the component is clicked.|
+| longpress | - | Triggered when the component is long pressed.|
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.|
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| flex-direction | string | row | No| Main axis direction of the flex container, which defines how items are placed in the container. Available values are as follows:<br>- **column**: Items are placed vertically from top to bottom.<br>- **row**: Items are placed horizontally from left to right.|
+| flex-wrap | string | nowrap | No| Whether items in the flex container are displayed in a single line or multiple lines. The value cannot be dynamically updated. Available values are as follows:<br>- **nowrap**: Flex items are displayed in a single line.<br>- **wrap**: Flex items are displayed in multiple lines.|
+| justify-content | string | flex-start | No| How items are aligned along the main axis of the flex container. Available values are as follows:<br>- **flex-start**: Items are packed toward the start edge of the container along the main axis.<br>- **flex-end**: Items are packed toward the end edge of the container along the main axis.<br>- **center**: Items are packed toward the center of the container along the main axis.<br>- **space-between**: Items are positioned with space between the rows.<br>- **space-around**: Items are positioned with space before, between, and after the rows.|
+| align-items | string | stretch<sup>5+</sup><br>flex-start<sup>1-4</sup> | No| How items are aligned along the cross axis in a flex container. Available values are as follows:<br>- **stretch**: Items are stretched to the same height or width as the container along the cross axis.<sup>5+</sup><br>- **flex-start**: Items are packed toward the start edge of the cross axis.<br>- **flex-end**: Items are packed toward the end edge of the cross axis.<br>- **center**: Items are packed toward the center of the cross axis.|
+| display | string | flex | No| Type of the view box of the item. The value cannot be dynamically updated. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br><br>If this attribute is not set, the default value **0** is used.|
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+
+## Example
+
+1. Flex style
+  
+   ```html
+   <!-- xxx.hml -->
+   <div class="container">
+     <div class="flex-box">
+       <div class="flex-item color-primary"></div>
+       <div class="flex-item color-warning"></div>
+       <div class="flex-item color-success"></div>
+     </div>
+   </div>
+   ```
+
+   
+   ```css
+   /* xxx.css */
+   .container {
+     flex-direction: column;
+     justify-content: center;
+     align-items: center;
+     width: 454px;
+     height: 454px;
+   }
+   .flex-box {
+     justify-content: space-around;
+     align-items: center;
+     width: 400px;
+     height: 140px;
+     background-color: #ffffff;
+   }
+   .flex-item {
+     width: 120px;
+     height: 120px;
+     border-radius: 16px;
+   }
+   .color-primary {
+     background-color: #007dff;
+   }
+   .color-warning {
+     background-color: #ff7500;
+   }
+   .color-success {
+     background-color: #41ba41;
+   }
+   ```
+
+   ![en-us_image_0000001381108420](figures/en-us_image_0000001381108420.png)
+
+2. Flex wrap style
+  
+   ```html
+   <!-- xxx.hml -->
+   <div class="container">
+     <div class="flex-box">
+       <div class="flex-item color-primary"></div>
+       <div class="flex-item color-warning"></div>
+       <div class="flex-item color-success"></div>
+     </div>
+   </div>
+   ```
+
+   
+   ```css
+   /* xxx.css */
+   .container {
+     flex-direction: column;
+     justify-content: center;
+     align-items: center;
+     width: 454px;
+     height: 454px;
+   }
+   .flex-box {
+     justify-content: space-around;
+     align-items: center;
+     flex-wrap: wrap;
+     width: 300px;
+     height: 250px;
+     background-color: #ffffff;
+   }
+   .flex-item {
+     width: 120px;
+     height: 120px;
+     border-radius: 16px;
+   }
+   .color-primary {
+     background-color: #007dff;
+   }
+   .color-warning {
+     background-color: #ff7500;
+   }
+   .color-success {
+     background-color: #41ba41;
+   }
+   ```
+
+   ![en-us_image_0000001431148457](figures/en-us_image_0000001431148457.png)
--- a/en/application-dev/reference/arkui-js-lite/js-components-container-list-item.md
+++ b/en/application-dev/reference/arkui-js-lite/js-components-container-list-item.md
+# list-item
+
+**\<list-item>** is a child component of the **[\<list>](js-components-container-list.md)** component and is used to display items in a list.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| click | - | Triggered when the component is clicked.|
+| longpress | - | Triggered when the component is long pressed.|
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.|
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used.|
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used.|
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding. - If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding. - If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+
+
+
+## Example
+
+See **Example** in [list](js-components-container-list.md).
--- a/en/application-dev/reference/arkui-js-lite/js-components-container-list.md
+++ b/en/application-dev/reference/arkui-js-lite/js-components-container-list.md
+# list
+
+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.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Only [\<list-item>](js-components-container-list-item.md) is supported.
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| scrollend | - | Triggered when the list stops scrolling.|
+| click | - | Triggered when the list is clicked. |
+| longpress | - | Triggered when the list is long pressed. |
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the list. |
+| scrolltop<sup>8+</sup> | - | Triggered when the list is scrolled to the top.|
+| scrollbottom<sup>8+</sup> | - | Triggered when the list is scrolled to the bottom.|
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| flex-direction | string | column | No| Main axis direction of the flex container. It specifies how items are placed in the flex container.<br>- **column**: Items are placed vertically from top to bottom.<br>- **row**: Items are placed horizontally from left to right.<br>For the **\<list>** component, the default value is **column**. For other components, the default value is **row**. Dynamic modification is not supported.|
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. |
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+
+## Methods
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| scrollTo | { index: number(position) } | Scrolls the list to the position of the item at the specified index.|
+
+
+## Example
+
+
+```html
+<!-- index.hml -->
+<div class="container">
+  <list class="todo-wraper">
+    <list-item for="{{todolist}}" class="todo-item">
+      <text class="todo-title">{{$item.title}}</text>
+      <text class="todo-title">{{$item.date}}</text>
+    </list-item>
+  </list>
+</div>
+```
+
+
+```js
+// index.js
+export default {
+  data: {
+    todolist: [{
+      title: 'Prepare for the interview',
+      date: '2021-12-31 10:00:00',
+    }, {
+      title: 'Watch the movie',
+      date: '2021-12-31 20:00:00',
+    }],
+  },
+}
+```
+
+
+```css
+/* index.css */
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+.todo-wraper {
+  width: 454px;
+  height: 300px;
+}
+.todo-item {
+  width: 454px;
+  height: 80px;
+  flex-direction: column;
+}
+.todo-title {
+  width: 454px;
+  height: 40px;
+  text-align: center;
+}
+```
+
+![list](figures/list.png)
--- a/en/application-dev/reference/arkui-js-lite/js-components-container-stack.md
+++ b/en/application-dev/reference/arkui-js-lite/js-components-container-stack.md
+# stack
+
+The **\<stack>** component provides a stack container where child components are successively stacked and the latter one overwrites the previous one.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Supported
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| click | - | Triggered when the component is clicked.|
+| longpress | - | Triggered when the component is long pressed.|
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.|
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. |
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+> **NOTE**
+>
+> The absolute positioning does not support a percentage. Therefore, **margin** cannot be set for the child components of the **\<stack>** component.
+
+
+## Example
+
+
+```html
+<!-- xxx.hml -->
+<stack class="stack-parent">
+  <div class="back-child bd-radius"></div>
+  <div class="positioned-child bd-radius"></div>
+  <div class="front-child bd-radius"></div>
+</stack>
+```
+
+
+```css
+/* xxx.css */
+.stack-parent {
+  width: 400px;
+  height: 400px;
+  background-color: #ffffff;
+  border-width: 1px;
+  border-style: solid;
+}
+.back-child {
+  width: 300px;
+  height: 300px;
+  background-color: #3f56ea;
+}
+.front-child {
+  width: 100px;
+  height: 100px;
+  background-color: #00bfc9;
+}
+.positioned-child {
+  width: 100px;
+  height: 100px;
+  left: 50px;
+  top: 50px;
+  background-color: #47cc47;
+}
+.bd-radius {
+  border-radius: 16px;
+}
+```
+
+![en-us_image_0000001380789188](figures/en-us_image_0000001380789188.png)
--- a/en/application-dev/reference/arkui-js-lite/js-components-container-swiper.md
+++ b/en/application-dev/reference/arkui-js-lite/js-components-container-swiper.md
+# swiper
+
+The **\<swiper>** component provides a container that allows users to switch among child components using swipe gestures.
+
+> **NOTE**
+>
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+All child components except **\<list>** are supported.
+
+
+## Attributes
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| index | number | 0 | No| Index of the child component currently displayed in the container.|
+| loop | boolean | true | No| Whether to enable looping. |
+| duration | number | - | No| Duration of the autoplay for child component switching.|
+| vertical | boolean | false | No| Whether the swipe gesture is performed vertically. A vertical swipe uses the vertical indicator.<br>The value cannot be dynamically updated.|
+| id | string | - | No| Unique ID of the component.|
+| style | string | - | No| Style declaration of the component.|
+| class | string | - | No| Style class of the component, which is used to refer to a style table.|
+| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
+
+
+## Events
+
+| Name| Parameter| Description|
+| -------- | -------- | -------- |
+| change | { index: currentIndex } | Triggered when the index of the currently displayed component changes.|
+| click | - | Triggered when the component is clicked.|
+| longpress | - | Triggered when the component is long pressed.|
+| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.|
+
+
+## Styles
+
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. |
+| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
+| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
+| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
+| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
+| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
+| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
+| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
+| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
+| background-color | &lt;color&gt; | - | No| Background color.|
+| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
+| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
+
+
+## Example
+
+
+```html
+<!-- xxx.hml -->
+<swiper class="container" index="{{index}}">
+  <div class="swiper-item primary-item">
+    <text>1</text>
+  </div>
+  <div class="swiper-item warning-item">
+    <text>2</text>
+  </div>
+  <div class="swiper-item success-item">
+    <text>3</text>
+  </div>
+</swiper>
+```
+
+
+```css
+/* xxx.css */
+.container {
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+.swiper-item {
+  width: 454px;
+  height: 454px;
+  justify-content: center;
+  align-items: center;
+}
+.primary-item {
+  background-color: #007dff;
+}
+.warning-item {
+  background-color: #ff7500;
+}
+.success-item {
+  background-color: #41ba41;
+}
+```
+
+
+```js
+/* xxx.js */
+export default {
+  data: {
+    index: 1
+  }
+}
+```
+
+![swiper](figures/swiper.gif)
--- a/en/application-dev/reference/arkui-js-lite/js-framework-file.md
+++ b/en/application-dev/reference/arkui-js-lite/js-framework-file.md
+# File Organization
+
+
+## Directory structure
+
+The following figure shows the typical directory structure of the JavaScript module (**entry/src/main/js/module**) for an application with feature abilities (FA) using JavaScript APIs.
+
+  **Figure 1** Directory structure 
+
+![en-us_image_0000001431388581](figures/en-us_image_0000001431388581.png)
+
+Functions of the files are as follows:
+
+- **.hml** files describe the page layout.
+
+- **.css** files describe the page style.
+
+- **.js** files process the interactions between pages and users.
+
+Functions of the folders are as follows:
+
+- The **app.js** file manages global JS logics and application lifecycle.
+
+- The **pages** directory stores all component pages.
+
+- The **common** directory stores public resource files, such as media resources and JavaScript files.
+
+>  **NOTE**
+> - The following reserved folders cannot be renamed:
+>
+>
+>
+> 
+> - The folders marked as optional in the directory structure can be created as needed after you create the project in DevEco Studio.
+
+
+## File Access Rules
+
+Application resources can be accessed via an absolute or relative path. In this development framework, an absolute path starts with a slash (/), and a relative path starts with **./** or **../**. The rules are as follows:
+
+- To reference a code file, use a relative path, for example, **../common/utils.js**.
+
+- To reference a resource file, use an absolute path, for example: **/common/xxx.png**.
+
+- Store code files and resource files in the **common** directory and access the files in a required fashion.
+
+- In a **.css** file, use the **url()** function to create a URL, for example, **url(/common/xxx.png)**.
+
+>  **NOTE**
+>
+>  When code file A needs to reference code file B:
+>
+>  - If code files A and B are in the same directory, you can use either a relative or absolute path in code file B to reference resource files.
+>
+>  - If code files A and B are in different directories, you must use an absolute path in code file B to reference resource files. The reason is that the directory of code file B changes during Webpack packaging.
+>
+
+
+## Media File Formats
+
+  **Table 1** Supported image formats
+
+| Format| Supported Version| File Name Extension|
+| -------- | -------- | -------- |
+| BMP | API Version 3+ | .bmp |
+| JPEG | API Version 3+ | .jpg |
+| PNG | API Version 3+ | .png |
--- a/en/application-dev/reference/arkui-js-lite/js-framework-js-file.md
+++ b/en/application-dev/reference/arkui-js-lite/js-framework-js-file.md
+# app.js
+
+
+You can implement lifecycle logic specific to your application in the **app.js** file. Available application lifecycle functions are as follows:
+
+
+- **onCreate()**: called when an application is created
+
+- **onDestory()**: called when an application is destroyed
+
+
+In the following example, logs are printed only in the lifecycle functions.
+
+```
+// app.js
+export default {
+  onCreate() {
+    console.info('Application onCreate');
+  },
+  onDestroy() {
+    console.info('Application onDestroy');
+  },
+}
+```
--- a/en/application-dev/reference/arkui-js-lite/js-framework-js-tag.md
+++ b/en/application-dev/reference/arkui-js-lite/js-framework-js-tag.md
+# "js" Tag
+
+
+The "js" tag contains the instance name and page route information.
+
+
+| Tag| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| name | string | default | Yes| Name of the JavaScript instance.|
+| pages | Array | - | Yes| Route information. For details, see ["pages"](#pages).|
+
+
+>  **NOTE**
+>
+>  The "name" and "pages" tags are configured in the "js" tag of the **config.json** file.
+
+
+## pages
+
+The **"pages"** defines the route information of each page. Each page consists of the page path and page name. The following is an example:
+
+
+```
+{
+  ...
+  "pages": [
+    "pages/index/index",
+    "pages/detail/detail"
+  ]
+  ...
+}
+```
+
+
+>  **NOTE**
+>
+> 
+> - The application home page is fixed to **pages/index/index**.
+> 
+> - The page name should not be a component name, for example, **text.hml** or **button.hml**.
+
+
+## Example
+
+
+```
+{
+  "app": {
+    "bundleName": "com.huawei.player",
+    "version": {
+        "code": 1,
+        "name": "1.0"
+    },
+    "vendor": "example"
+  }
+  "module": {
+    ...
+    "js": [
+      {
+        "name": "default",
+        "pages": [
+          "pages/index/index",
+          "pages/detail/detail"
+        ]
+      }
+    ],
+    "abilities": [
+      {
+        ...
+      }
+    ]
+  }
+}
+```
--- a/en/application-dev/reference/arkui-js-lite/js-framework-syntax-css.md
+++ b/en/application-dev/reference/arkui-js-lite/js-framework-syntax-css.md
+# CSS
+
+
+Cascading Style Sheets (CSS) is a language used to describe the HML page structure. All HML components have default styles. You can customize styles for these components using CSS to design various pages.
+
+
+## Style Import
+
+CSS files can be imported using the **\@import** statement. This facilitates module management and code reuse.
+
+
+## Style Declaration
+
+The **.css** file with the same name as the **.hml** file in each page directory describes the styles of components on the HML page, determining how the components will be displayed.
+
+1. Internal style: The **style** and **class** attributes can be used to specify the component style. Sample code:
+  
+   ```
+   <!-- index.hml -->
+   <div class="container">
+     <text style="color: red">Hello World</text>
+   </div>
+   ```
+
+   
+   ```
+   /* index.css */
+   .container {
+     justify-content: center;
+   }
+   ```
+
+2. External style files: You need to import the files. For example, create a **style.css** file in the **common** directory and import the file at the beginning of **index.css**.
+  
+   ```
+   /* style.css */
+   .title {
+     font-size: 50px;
+   }
+   ```
+
+   
+   ```
+   /* index.css */
+   @import '../../common/style.css';
+   .container {
+     justify-content: center;
+   }
+   ```
+
+
+## Selectors
+
+A CSS selector is used to select elements for which styles need to be added to. The following table lists the supported selectors.
+
+| Selector| Example| Description|
+| -------- | -------- | -------- |
+| .class | .container | Selects all components whose **class** is **container**.|
+| \#id | \#titleId | Selects all components whose **id** is **titleId**.|
+| , | .title, .content | Selects all components whose **class** is **title** or **content**.|
+
+Example:
+
+
+```
+<!-- Pagelayoutexample.hml -->
+<div id="containerId" class="container">
+  <text id="titleId" class="title">Title</text>
+  <div class="content">
+    <text id="contentId">Content</text>
+  </div>
+</div>
+```
+
+
+```
+/* Page style xxx.css */
+/* Set the style for the components whose class is title. */
+.title {
+  font-size: 30px;
+}
+/* Set the style for the components whose id is contentId. */
+#contentId {
+  font-size: 20px;
+}
+/* Set padding for all components of the title or content class to 5 px. */
+.title, .content {
+  padding: 5px;
+}
+
+```
+
+
+## Pseudo-classes
+
+A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected elements.
+
+| Name| Available Components| Description|
+| -------- | -------- | -------- |
+| :active | <br>input[type="button"] | Selects the element activated by a user, for example, a pressed button. Only the **background-color** and **background-image** attributes can be set for the pseudo-class selector on lite wearables.|
+| :checked | input[type="checkbox", type="radio"]| Selects the element whose **checked** attribute is **true**. Only the **background-color** and **background-image** attributes can be set for the pseudo-class selector on lite wearables.|
+
+The following is an example for you to use the **:active** pseudo-class to control the style when a user presses the button. 
+
+
+```
+<!-- index.hml -->
+<div class="container">
+  <input type="button" class="button" value="Button"></input>
+</div>
+```
+
+
+```
+/* index.css */
+.button:active {
+  background-color: #888888;/* After the button is activated, the background color is changed to #888888. */
+}
+```
+
+
+## Precompiled Styles
+
+Precompilation is a program that uses specific syntax to generate CSS files. It provides variables and calculation, helping you define component styles more conveniently. Currently, Less, Sass, and Scss are supported. To use precompiled styles, change the suffix of the original **.css** file. For example, change **index.css** to **index.less**, **index.sass**, or **index.scss**.
+
+- The following **index.less** file is changed from **index.css**.
+  
+  ```
+  /* index.less */
+  /* Define a variable. */
+  @colorBackground: #000000;
+  .container {
+      background-color: @colorBackground; /* Use the variable defined in the .less file. */
+  }
+  ```
+
+- Reference a precompiled style file. For example, if the **style.scss** file is located in the **common** directory, change the original **index.css** file to **index.scss** and import **style.scss**.
+  
+  ```
+  /* style.scss */
+  /* Define a variable. */
+  $colorBackground: #000000;
+  ```
+
+  Reference the precompiled style file in **index.scss**:
+
+  
+  ```
+  /* index.scss */
+  /* Import style.scss. */
+  @import '../../common/style.scss';
+  .container {
+    background-color: $colorBackground; /* Use the variable defined in style.scss. */
+  }
+  ```
+
+  
+  >  **NOTE**
+  >
+  >  Place precompiled style files in the **common** directory.
--- a/en/application-dev/reference/arkui-js-lite/js-framework-syntax-hml.md
+++ b/en/application-dev/reference/arkui-js-lite/js-framework-syntax-hml.md
+# HML
+
+
+The OpenHarmony Markup Language (HML) is an HTML-like language that allows you to build pages based on components and events. Pages built using HML have advanced capabilities such as data binding, event binding, loop rendering, and conditional rendering.
+
+
+## HML Page Structure
+
+
+```
+<!-- xxx.hml -->
+<div class="item-container">
+  <text class="item-title">Image Show</text>
+  <div class="item-content">
+    <image src="/common/xxx.png" class="image"></image>
+  </div>
+</div>
+```
+
+
+## Data Binding
+
+
+```
+<!-- xxx.hml -->
+<div onclick="changeText">
+  <text> {{content[1]}} </text>
+</div>
+```
+
+
+```
+// xxx.js
+export default {
+  data: {
+    content: ['Hello World!', 'Welcome to my world!']
+  },
+  changeText: function() {
+    this.content.splice(1, 1, this.content[0]);
+  }
+}
+```
+
+>  **NOTE**
+> - To make the array data modification take effect, use the **splice** method to change array items.
+> 
+> - ECMAScript 6.0 syntax is not supported in HML.
+
+
+## Event Binding
+
+The callback bound to an event receives an event object parameter, which can be used to obtain the event information.
+
+
+```
+<!-- xxx.hml -->
+<div>
+  <!-- Bind an event using @. -->
+  <div @click="clickfunc"></div>
+  <!-- Bind an event using on. -->
+  <div onclick="clickfunc"></div>
+  <!--  Bind an event using on.<sup>5+</sup> This statement is not recommended. -->
+  <div onclick="clickfunc"></div>
+  <!-- Bind an event callback for event bubbling.<sup>5+</sup>-->
+  <div on:click.bubble="clickfunc"></div>
+  <!-- on:{event} is equivalent to on:{event}.bubble.<sup>5+</sup> -->
+  <div on:click="clickfunc"></div>
+  <!-- Bind an event callback, but stop the event from bubbling upwards.<sup>5+</sup> -->
+  <div grab:click.bubble="clickfunc"></div>
+  <!-- grab:{event} is equivalent to grab:{event}.bubble.<sup>5+</sup> -->
+  <div grab:click="clickfunc"></div>
+</div>
+```
+
+
+```
+// xxx.js
+export default {
+  data: {
+    obj: '',
+  },
+  clickfunc: function(e) {
+    this.obj = 'Hello World';
+    console.log(e);
+  },
+}
+```
+
+>  **NOTE**
+>
+> Event bubbling is supported since API version 5. After you upgrade the SDK and run an existing JavaScript application, events bound using a traditional statement (such as **onclick**) will not bubble. However, if you use the new SDK to repack the JavaScript application, such events will bubble. To avoid service logic errors, replace the traditional statement with one supported by the new SDK. For example, replace **onclick** with **grab:click**.
+
+**Example:**
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <text class="title">{{count}}</text>
+  <div class="box">
+    <input type="button" class="btn" value="increase" onclick="increase" />
+    <input type="button" class="btn" value="decrease" @click="decrease" />
+    <!-- Pass additional parameters. -->
+    <input type="button" class="btn" value="double" @click="multiply(2)" />
+    <input type="button" class="btn" value="decuple" @click="multiply(10)" />
+    <input type="button" class="btn" value="square" @click="multiply(count)" />
+  </div>
+</div>
+```
+
+
+```
+/* xxx.js */
+export default {
+  data: {
+    count: 0
+  },
+  increase() {
+    this.count++;
+  },
+  decrease() {
+    this.count--;
+  },
+  multiply(multiplier) {
+    this.count = multiplier * this.count;
+  }
+};
+```
+
+
+```
+/* xxx.css */
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    left: 0px;
+    top: 0px;
+    width: 454px;
+    height: 454px;
+}
+.title {
+    font-size: 30px;
+    text-align: center;
+    width: 200px;
+    height: 100px;
+}
+.box {
+    width: 454px;
+    height: 200px;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.btn {
+    width: 200px;
+    border-radius: 0;
+    margin-top: 10px;
+    margin-left: 10px;
+}
+```
+
+
+## Loop Rendering
+
+
+```
+<!-- xxx.hml -->
+<div class="array-container">
+  <!-- div loop rendering -->
+  <!-- By default, $item indicates the element in the array, and $idx indicates the index of the element in the array. -->
+  <div for="{{array}}" tid="id" onclick="changeText">
+    <text>{{$idx}}.{{$item.name}}</text>
+  </div>
+  <!-- Define the name for an element variable. -->
+  <div for="{{value in array}}" tid="id" onclick="changeText">    
+    <text>{{$idx}}.{{value.name}}</text>
+  </div>
+  <!-- Define an element variable and its index name. -->
+  <div for="{{(index, value) in array}}" tid="id" onclick="changeText">    
+    <text>{{index}}.{{value.name}}</text>
+  </div>
+</div>
+```
+
+
+```
+// xxx.js
+export default {
+  data: {
+    array: [
+      {id: 1, name: 'jack', age: 18}, 
+      {id: 2, name: 'tony', age: 18},
+    ],
+  },
+  changeText: function() {
+    if (this.array[1].name === "tony"){
+      this.array.splice(1, 1, {id:2, name: 'Isabella', age: 18});
+    } else {
+      this.array.splice(2, 1, {id:3, name: 'Bary', age: 18});
+    }
+  },
+}
+```
+
+The **tid** attribute accelerates the **for** loop and improves the re-rendering efficiency when data in a loop changes. The **tid** attribute specifies the unique ID of each element in the array. If it is not specified, the index of each element in the array is used as the ID. For example, **tid="id"** indicates that the **id** attribute of each element is its unique ID. The **for** loop supports the following statements:
+
+- for="array": **array** is an array object, whose element variable is **$item** by default.
+
+- for="v in array": **v** is a custom element variable, whose index is **$idx** by default.
+
+- for="(i, v) in array": **i** indicates the element index, and **v** indicates the element variable. All elements of the array object will be looped through.
+
+> **NOTE**
+> - Each element in the array must have the data attribute specified by **tid**. Otherwise, an exception may occur.
+> 
+> - The attribute specified by **tid** in the array must be unique. Otherwise, performance loss occurs. In the above example, only **id** and **name** can be used as **tid** because they are unique fields.
+> 
+> - The **tid** field does not support expressions.
+
+
+## Conditional Rendering
+
+There are two ways to implement conditional rendering: **if-elif-else** or **show**. In **if-elif-else**, when the **if** statement evaluates to **false**, the component is not built in the VDOM and is not rendered. For **show**, when show is **false**, the component is not rendered but is built in the VDOM. In addition, the **if-elif-else** statements must be used in sibling nodes. Otherwise, the compilation fails. The following example uses both ways to implement conditional rendering:
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <button class="btn" type="capsule" value="toggleShow" onclick="toggleShow"></button>
+  <button class="btn" type="capsule" value="toggleDisplay" onclick="toggleDisplay"></button>
+  <text if="{{show}}"> Hello-One </text>
+  <text elif="{{display}}"> Hello-Two </text>
+  <text else> Hello-World </text>
+</div>
+```
+
+
+```
+// xxx.css
+.container{
+  flex-direction: column;
+  align-items: center;
+}
+.btn{
+  width: 280px;
+  font-size: 26px;
+  margin: 10px 0;
+}
+```
+
+
+```
+// xxx.js
+export default {
+  data: {
+    show: false,
+    display: true,
+  },
+  toggleShow: function() {
+    this.show = !this.show;
+  },
+  toggleDisplay: function() {
+    this.display = !this.display;
+  }
+}
+```
+
+In the optimized rendering (**show**), if **show** is **true**, the node is rendered properly; if it is **false**, the display style will be **none**.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <button class="btn" type="capsule" value="toggle" onclick="toggle"></button>
+  <text show="{{visible}}" > Hello World </text>
+</div>
+```
+
+
+```
+// xxx.css
+.container{
+  flex-direction: column;
+  align-items: center;
+}
+.btn{
+  width: 280px;
+  font-size: 26px;
+  margin: 10px 0;
+}
+```
+
+
+```
+// xxx.js
+export default {
+  data: {
+    visible: false,
+  },
+  toggle: function() {
+    this.visible = !this.visible;
+  },
+}
+```
+
+>  **NOTE**
+> Do not use **for** and **if** attributes at the same time in an element.
--- a/en/application-dev/reference/arkui-js-lite/js-framework-syntax-js.md
+++ b/en/application-dev/reference/arkui-js-lite/js-framework-syntax-js.md
+# JavaScript
+
+
+You can use a **.js** file in the ECMAScript compliant JavaScript language to define the service logic of an HML page. With dynamic typing, JavaScript can make your application more expressive with a flexible design. The following describes the JavaScript compilation and running.
+
+
+## Syntax
+
+The ECMAScript 6.0 syntax is supported. Lite wearables only support the following ECMAScript 6.0 syntax:
+
+1. let/const
+
+2. arrow functions
+
+3. class
+
+4. default value
+
+5. destructuring assignment
+
+6. destructuring binding pattern
+
+7. enhanced object initializer
+
+8. for-of
+
+9. rest parameter
+
+10. template strings
+
+- Module declaration
+  Import functionality modules.
+
+  
+  ```
+  import router from '@system.router';
+  ```
+
+- Code reference
+  Import JavaScript code.
+
+  
+  ```
+  import utils from '../../common/utils.js';
+  ```
+
+
+## Objects
+
+- Page objects
+    | Attribute| Type| Description|
+  | -------- | -------- | -------- |
+  | data | Object/Function | Data model of the page. If the attribute is of the function type, the return value must be of the object type. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (**for**, **if**, **show**, and **tid**). |
+  | $refs | Object | DOM elements or child component instances that have registered the **ref** attribute. For an example, see [Obtaining a DOM Element](#obtaining-a-dom-element).|
+
+
+## Obtaining a DOM Element
+
+Use **$refs** to obtain a DOM element.
+
+```
+<!-- index.hml -->
+<div class="container">
+  <image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
+</div>
+```
+
+
+```
+// index.js
+export default {
+  data: {
+    images: [
+      { src: '/common/frame1.png' },
+      { src: '/common/frame2.png' },
+      { src: '/common/frame3.png' },
+    ],
+  },
+  handleClick() {
+    const animator = this.$refs.animator; // Obtain the DOM element whose $refs attribute is animator.
+    const state = animator.getState();
+    if (state === 'paused') {
+      animator.resume();
+    } else if (state === 'stopped') {
+      animator.start();
+    } else {
+      animator.pause();
+    }
+  },
+};
+```
+
+
+## Lifecycle APIs
+
+- Page lifecycle APIs
+    | Name | Type| Parameter| Return Value| Description| Triggered When|
+  | -------- | -------- | -------- | -------- | -------- | -------- |
+  | onInit | Function | N/A| N/A| Listens for page initialization.| Page initialization is complete. This API is called only once in the page lifecycle.|
+  | onReady | Function | N/A| N/A| Listens for page creation.| A page is created. This API is called only once in the page lifecycle.|
+  | onShow | Function | N/A| N/A| Listens for page display. | The page is displayed.|
+  | onHide | Function | N/A| N/A| Listens for page disappearance.| The page disappears.|
+  | onDestroy | Function | N/A| N/A| Listens for page destruction.| The page is destroyed.|
+  
+    The lifecycle APIs of page A are called in the following sequence:
+  - Open page A: onInit() -> onReady() -> onShow()
+  
+  - Open page B on page A: onHide() -> onDestroy()
+  
+  - Go back to page A from page B: onInit() -> onReady() -> onShow()
+  
+  - Exit page A: onHide() -> onDestroy()
+  
+  - Hide page A: onHide()
+  
+  - Show background page A on the foreground: onShow()
+
+- Application lifecycle APIs
+    | Name | Type| Parameter| Return Value| Description| Triggered When|
+  | -------- | -------- | -------- | -------- | -------- | -------- |
+  | onCreate | Function | N/A| N/A| Listens for application creation.| The application is created.|
+  | onDestroy | Function | N/A| N/A| Listens for application exit.| The application exits.|
--- a/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-caution.gif
+++ b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-caution.gif
--- a/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-danger.gif
+++ b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-danger.gif
--- a/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-note.gif
+++ b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-note.gif
--- a/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-notice.gif
+++ b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-notice.gif
--- a/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-tip.gif
+++ b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-tip.gif
--- a/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-warning.gif
+++ b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-warning.gif