diff --git a/en/application-dev/reference/arkui-js-lite/Readme-EN.md b/en/application-dev/reference/arkui-js-lite/Readme-EN.md new file mode 100644 index 0000000000000000000000000000000000000000..4dbc7b08dbed8356f7cb907c3dbebff5c5b09bf5 --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/Readme-EN.md @@ -0,0 +1,37 @@ +# 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) diff --git a/en/application-dev/reference/arkui-js-lite/figures/#000000.png b/en/application-dev/reference/arkui-js-lite/figures/#000000.png new file mode 100644 index 0000000000000000000000000000000000000000..58293d5e874f2aa36ecaf7282ca9e4736318092f Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/#000000.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/GIF.gif b/en/application-dev/reference/arkui-js-lite/figures/GIF.gif new file mode 100644 index 0000000000000000000000000000000000000000..fa77bb91654623c2de68a19e7f9f95bbd1d029bc Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/GIF.gif differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/aliceblue.png b/en/application-dev/reference/arkui-js-lite/figures/aliceblue.png new file mode 100644 index 0000000000000000000000000000000000000000..378000d344e90ab4db41869a4612daf6b60d66ab Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/aliceblue.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/animation-demo1.gif b/en/application-dev/reference/arkui-js-lite/figures/animation-demo1.gif new file mode 100644 index 0000000000000000000000000000000000000000..fc1eadbb05520daa6d79779683db96d0afe7cbdd Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/animation-demo1.gif differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/animation-demo2.gif b/en/application-dev/reference/arkui-js-lite/figures/animation-demo2.gif new file mode 100644 index 0000000000000000000000000000000000000000..c3d337edf8e35352dcc9d9b9919019e1f7ec4d96 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/animation-demo2.gif differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/antiquewhite.png b/en/application-dev/reference/arkui-js-lite/figures/antiquewhite.png new file mode 100644 index 0000000000000000000000000000000000000000..8e195633945b3387c46a7d295862351d4ff1fc64 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/antiquewhite.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/aqua.png b/en/application-dev/reference/arkui-js-lite/figures/aqua.png new file mode 100644 index 0000000000000000000000000000000000000000..3e6aaacfe1c26157294e6dedfeaa1488aeed12a3 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/aqua.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/aquamarine.png b/en/application-dev/reference/arkui-js-lite/figures/aquamarine.png new file mode 100644 index 0000000000000000000000000000000000000000..c25a692065d473ccf9f5b6d36254787e2497fad6 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/aquamarine.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/azure.png b/en/application-dev/reference/arkui-js-lite/figures/azure.png new file mode 100644 index 0000000000000000000000000000000000000000..2e7cec00f9d186d76ff5cb12d47811084217cc1c Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/azure.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/barchart.PNG b/en/application-dev/reference/arkui-js-lite/figures/barchart.PNG new file mode 100644 index 0000000000000000000000000000000000000000..aa4ba3f9fa64250b1b86bd6d39b6a8071d3de1c3 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/barchart.PNG differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/beige.png b/en/application-dev/reference/arkui-js-lite/figures/beige.png new file mode 100644 index 0000000000000000000000000000000000000000..21f20a4220aabf9449c707291633e7b3723fe378 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/beige.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/bisque.png b/en/application-dev/reference/arkui-js-lite/figures/bisque.png new file mode 100644 index 0000000000000000000000000000000000000000..7983d590a2c617c6cad68c90af6b12aa17518810 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/bisque.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/blanchedalmond.png b/en/application-dev/reference/arkui-js-lite/figures/blanchedalmond.png new file mode 100644 index 0000000000000000000000000000000000000000..04bcf099edface801be6074a33ff33a980c9b606 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/blanchedalmond.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/blue.png b/en/application-dev/reference/arkui-js-lite/figures/blue.png new file mode 100644 index 0000000000000000000000000000000000000000..e370a44cf043fc34bd8891f57faad2cd2ca05707 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/blue.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/blueviolet.png b/en/application-dev/reference/arkui-js-lite/figures/blueviolet.png new file mode 100644 index 0000000000000000000000000000000000000000..ca1edf2219980ab9c8533b9fda3219521c50533d Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/blueviolet.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/brown.png b/en/application-dev/reference/arkui-js-lite/figures/brown.png new file mode 100644 index 0000000000000000000000000000000000000000..0d22570503febc7a7dcba0d1e870f49f32fe489a Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/brown.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/burlywood.png b/en/application-dev/reference/arkui-js-lite/figures/burlywood.png new file mode 100644 index 0000000000000000000000000000000000000000..0d53a47b7eace81d5c7da88c59fee61e30c89681 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/burlywood.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/cadetblue.png b/en/application-dev/reference/arkui-js-lite/figures/cadetblue.png new file mode 100644 index 0000000000000000000000000000000000000000..a59bc9cdb0f75ad79e4714d3593216021369c862 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/cadetblue.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/chartreuse.png b/en/application-dev/reference/arkui-js-lite/figures/chartreuse.png new file mode 100644 index 0000000000000000000000000000000000000000..3026d3c195598159232b4b1f08e9f198f4b4fa2c Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/chartreuse.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/chocolate.png b/en/application-dev/reference/arkui-js-lite/figures/chocolate.png new file mode 100644 index 0000000000000000000000000000000000000000..02d5f4e31b020ea9f64e36a7b7cd50299cf3d7f2 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/chocolate.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/coral.png b/en/application-dev/reference/arkui-js-lite/figures/coral.png new file mode 100644 index 0000000000000000000000000000000000000000..8442c9b2258c79ee6b6a3d5963df5b792bbb1a16 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/coral.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/cornflowerblue.png b/en/application-dev/reference/arkui-js-lite/figures/cornflowerblue.png new file mode 100644 index 0000000000000000000000000000000000000000..3621ef6876dbd1103487aed8ff190e6a0204ffde Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/cornflowerblue.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/cornsilk.png b/en/application-dev/reference/arkui-js-lite/figures/cornsilk.png new file mode 100644 index 0000000000000000000000000000000000000000..bf38fe45eaf254939b88b9d2a66635408060acf7 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/cornsilk.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/crimson.png b/en/application-dev/reference/arkui-js-lite/figures/crimson.png new file mode 100644 index 0000000000000000000000000000000000000000..bca655617699ef8dc1265bf692a3170c7effe15b Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/crimson.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/cyan.png b/en/application-dev/reference/arkui-js-lite/figures/cyan.png new file mode 100644 index 0000000000000000000000000000000000000000..3e6aaacfe1c26157294e6dedfeaa1488aeed12a3 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/cyan.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkblue.png b/en/application-dev/reference/arkui-js-lite/figures/darkblue.png new file mode 100644 index 0000000000000000000000000000000000000000..b234a769d1a9f1f30c4d2127160cf067e9f71ad6 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkblue.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkcyan.png b/en/application-dev/reference/arkui-js-lite/figures/darkcyan.png new file mode 100644 index 0000000000000000000000000000000000000000..b780eb08852e8916ec6ff1a401ea6946c8d727cf Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkcyan.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkgoldenrod.png b/en/application-dev/reference/arkui-js-lite/figures/darkgoldenrod.png new file mode 100644 index 0000000000000000000000000000000000000000..26f2f228b47b8acb8adcddc3abf9156d6c29364e Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkgoldenrod.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkgray.png b/en/application-dev/reference/arkui-js-lite/figures/darkgray.png new file mode 100644 index 0000000000000000000000000000000000000000..f1abe2afcb7902557ac3c4f58abfdf333af03121 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkgray.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkgreen.png b/en/application-dev/reference/arkui-js-lite/figures/darkgreen.png new file mode 100644 index 0000000000000000000000000000000000000000..4c4c304b67c398f32c5fff516cdde377ca39c73d Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkgreen.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkgrey.png b/en/application-dev/reference/arkui-js-lite/figures/darkgrey.png new file mode 100644 index 0000000000000000000000000000000000000000..f1abe2afcb7902557ac3c4f58abfdf333af03121 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkgrey.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkkhaki.png b/en/application-dev/reference/arkui-js-lite/figures/darkkhaki.png new file mode 100644 index 0000000000000000000000000000000000000000..12085848c0f6472d53f7e6504c1924ea6f5a44c1 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkkhaki.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkmagenta.png b/en/application-dev/reference/arkui-js-lite/figures/darkmagenta.png new file mode 100644 index 0000000000000000000000000000000000000000..9ed54c6c5c5186fb43f24dab24f7689ae0d14a12 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkmagenta.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkolivegreen.png b/en/application-dev/reference/arkui-js-lite/figures/darkolivegreen.png new file mode 100644 index 0000000000000000000000000000000000000000..53081e06f458cfc1772de30f669180333b8d783d Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkolivegreen.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkorange.png b/en/application-dev/reference/arkui-js-lite/figures/darkorange.png new file mode 100644 index 0000000000000000000000000000000000000000..6064f64867e3aca621244e1e6fdb16d3ab2ed748 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkorange.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkorchid.png b/en/application-dev/reference/arkui-js-lite/figures/darkorchid.png new file mode 100644 index 0000000000000000000000000000000000000000..6315d4654d04dd6b9b295fa1f8b37e8c550b17cf Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkorchid.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkred.png b/en/application-dev/reference/arkui-js-lite/figures/darkred.png new file mode 100644 index 0000000000000000000000000000000000000000..c33d763d18f5108bf0eedba19c662d05af397ee9 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkred.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/darksalmon.png b/en/application-dev/reference/arkui-js-lite/figures/darksalmon.png new file mode 100644 index 0000000000000000000000000000000000000000..57594c6855d4cdf1b37cc3e5354374c9dae0823b Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darksalmon.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkseagreen.png b/en/application-dev/reference/arkui-js-lite/figures/darkseagreen.png new file mode 100644 index 0000000000000000000000000000000000000000..454b1796715794d51e2a1a4649bfafa1bfde80f0 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkseagreen.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkslateblue.png b/en/application-dev/reference/arkui-js-lite/figures/darkslateblue.png new file mode 100644 index 0000000000000000000000000000000000000000..7dfc7ee8793298d19c939369ba980abd547982ff Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkslateblue.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkslategray.png b/en/application-dev/reference/arkui-js-lite/figures/darkslategray.png new file mode 100644 index 0000000000000000000000000000000000000000..5e23c304c4911dc0ef487dfeb8d7820aea5fb44b Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkslategray.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkslategrey.png b/en/application-dev/reference/arkui-js-lite/figures/darkslategrey.png new file mode 100644 index 0000000000000000000000000000000000000000..5e23c304c4911dc0ef487dfeb8d7820aea5fb44b Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkslategrey.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkturquoise.png b/en/application-dev/reference/arkui-js-lite/figures/darkturquoise.png new file mode 100644 index 0000000000000000000000000000000000000000..4e41450db5d70f6d10d6d7bf59daba33085c177e Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkturquoise.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/darkviolet.png b/en/application-dev/reference/arkui-js-lite/figures/darkviolet.png new file mode 100644 index 0000000000000000000000000000000000000000..6f085565bd8c64d44bf58ce0969557515ec7ab97 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/darkviolet.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/deeppink.png b/en/application-dev/reference/arkui-js-lite/figures/deeppink.png new file mode 100644 index 0000000000000000000000000000000000000000..6348bb2b6ee281976f7d58159e4c33db29f542ad Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/deeppink.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/deepskyblue.png b/en/application-dev/reference/arkui-js-lite/figures/deepskyblue.png new file mode 100644 index 0000000000000000000000000000000000000000..0ac129028e67b43fcae8e3d5c1a539cc45ba6d21 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/deepskyblue.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/default.PNG b/en/application-dev/reference/arkui-js-lite/figures/default.PNG new file mode 100644 index 0000000000000000000000000000000000000000..5e4322d20ad887573ad85958bc181a1be0f85f1c Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/default.PNG differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/dimgray.png b/en/application-dev/reference/arkui-js-lite/figures/dimgray.png new file mode 100644 index 0000000000000000000000000000000000000000..1072a50f468dda3c90c889c31424b7c290eb1a13 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/dimgray.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/dimgrey.png b/en/application-dev/reference/arkui-js-lite/figures/dimgrey.png new file mode 100644 index 0000000000000000000000000000000000000000..1072a50f468dda3c90c889c31424b7c290eb1a13 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/dimgrey.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/dodgerblue.png b/en/application-dev/reference/arkui-js-lite/figures/dodgerblue.png new file mode 100644 index 0000000000000000000000000000000000000000..fe422eecde9ec9f1fcac762bd81a23b3fa3abde7 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/dodgerblue.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/ellipse.PNG b/en/application-dev/reference/arkui-js-lite/figures/ellipse.PNG new file mode 100644 index 0000000000000000000000000000000000000000..d0379dfc66b4d2151dae49beeb8af38c774381aa Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/ellipse.PNG differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..4481b08ab897619b408425f9bfe0fd5b1fcb6ef0 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789168.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..9a73bd33782f06a704ed9b288226dfa381d1d57c Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789172.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..6e58c669a2976297f71d35c304e988c2884e7dc0 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789180.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..5113bc6bad4f88bc2558aae304394e00e107ce88 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789184.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..4d0696a9ade017acbbdfb8812dafdec5d715cac5 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789188.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..f627659cef03f443e01fb28b44ceb9363369b8d8 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380789296.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..8f6b4abcc27039c624bd21aad775db7c47a22dea Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948700.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..151ef990edbb33e1f54632609990f6c540149a5e Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948704.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..e061801d6eeb27d7fee0b287414e512559a87ea9 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948708.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..56c65edbcd66a2ebe9d8ef35c55eba90652bca0f Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948712.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..db54e678d8c42daca3e56dd85567c9978a9657c8 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948716.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..f59a10b44b9e9793bc3a9134f6c4633c8cfb49ce Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948720.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..f304daf1f80c86ca6f415e4f7a49b17ca20dae04 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001380948828.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..3917378fdcb47448e7daf8ae197e6d033fd345e9 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108312.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..4c8300af3bdf43e4d2192699b5ed4065fef451c0 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108316.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..3404b29dff12b910ae1be71ebf762252895468a8 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108320.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..dfee4f8cddcddd2ada89cb6d7e812fd0739d9cb8 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108324.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..33787429dd3205f9faac254950e95c097bd63b21 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108328.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..67959174e9b810b9278a7940bc097ac0c0738c7e Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108332.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..3ecdf0c714fa633f03db339626f51e62318cbf82 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108420.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..f6288a0361793fbbce554fd293831fae4bcefc9d Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381108436.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..0c8973bcb7d55910c6702fe6b9b54506ad3b3727 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268264.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..3cc02a6196604a6a3d64b9961c04aaaa51dc829e Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268268.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..658dca4b52032016c15f77a94b3ef76c093b1d2c Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268272.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..8192453ec25d486b3923da4a25b0a6fe5034d869 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268276.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..2f786e33181995c2b5bf5f835df4557ff3f7e9b4 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268280.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..9ac4a39e925322831752617b71a77d040626d251 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268284.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..366ab30f3e3f9f4b7e8b579b06cd84a76b2bfabc Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001381268388.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..e89a1b24da145cf480cceb28ed7249b717e614bf Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148353.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..68562c1006ec7c61c49c24aec99ecfd173ca055a Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148357.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..bd4f47314f89fa4bbbd2d14527dd250b5e3e141b Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148361.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..42efd9018bc05408596a768cbbe309f1e46273d7 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148365.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..3108e0436219c1c3a7335679cdfea962c49f454d Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148369.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..91c55d3677922b76ac78c4e56c87ef90b5b31fc2 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431148457.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..cc1dc87c79f827c8bb5be3f3771c37f4cb8b214e Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308057.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..1362b8a3d98f4edf36420d3799f01476817e43d4 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308061.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..2f9a8bacc0f78cb141820e8188d4ae5ef03dc7c1 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308065.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..44ae627d6e40dd4b297eccdcf1c5dceef5a08d82 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308073.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..f4e18dbe51e815ccdfc6f594e3424850c3b93a12 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308077.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..612bc55f4aa5e832133801edf61cef01ffd1bc64 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308169.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..3dccd46b21e76a7bbbaabc1ab77a29bd72ae850d Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431308185.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..47f90714bcb37e4df1b698503db6893d6c2a98c4 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388505.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..072d846a3cd629316cd0dcf25d5e9e1e1d3e0dc4 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388513.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..5b526bdf7cd539297715bbcddbbd505b7c683695 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388517.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..1d5aedb22cb51d00b176f44c5ac5f3ad29d843f2 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388521.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..1d71cee4618f1f2822cea1031c9b0e5d602e0a9b Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388525.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..8253c65764c8d74e0a25404aa62fdd69d43f3c26 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388529.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..bf5ef1c99e764de0e3a0fb0d5e68dc7722f1c0aa Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388581.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..f9db5c31c8eae66244cd3f6e11336f72284bb2a6 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431388637.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..5da42e3e14d601745274cb62d914c6600620bb25 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548105.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..63b480df9e9700601da85abef015c8326095851f Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548109.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..63f343e89f62b15c117e0148c87ac049308c3117 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548113.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..6afdd1b39e4bcb3664c7664a55b47b8537f4aeaa Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548117.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..d6bbab16659f4b34b38a714510665ea7fd309055 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548121.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..fea0122d3ef81899a02199c6cb265a099ad6c44f Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548125.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..4cef59797fd8b9650c398562ac0b473485a9274b Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/en-us_image_0000001431548233.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/firebrick.png b/en/application-dev/reference/arkui-js-lite/figures/firebrick.png new file mode 100644 index 0000000000000000000000000000000000000000..af32ecea68c1cef693bcfa379af5ac28f66c1e14 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/firebrick.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/floralwhite.png b/en/application-dev/reference/arkui-js-lite/figures/floralwhite.png new file mode 100644 index 0000000000000000000000000000000000000000..5ee9f7e893611dce988b8aa7ccfe3fab4b9d912f Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/floralwhite.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/forestgreen.png b/en/application-dev/reference/arkui-js-lite/figures/forestgreen.png new file mode 100644 index 0000000000000000000000000000000000000000..7cfd4846ca697424582edbfed23ed93ef9e98138 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/forestgreen.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/fuchsia.png b/en/application-dev/reference/arkui-js-lite/figures/fuchsia.png new file mode 100644 index 0000000000000000000000000000000000000000..6823cbc9203b07abae455b4ee5c7692878c4be72 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/fuchsia.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/gainsboro.png b/en/application-dev/reference/arkui-js-lite/figures/gainsboro.png new file mode 100644 index 0000000000000000000000000000000000000000..d1d37504e15eb6fccd6b1c8e985d37fcc8ba9875 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/gainsboro.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/gauge.PNG b/en/application-dev/reference/arkui-js-lite/figures/gauge.PNG new file mode 100644 index 0000000000000000000000000000000000000000..31c0141d716059519377e1f39b9b8305370f239a Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/gauge.PNG differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/ghostwhite.png b/en/application-dev/reference/arkui-js-lite/figures/ghostwhite.png new file mode 100644 index 0000000000000000000000000000000000000000..45467f3e6fc0866b6da0521911bdb5e7d740df29 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/ghostwhite.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/gold.png b/en/application-dev/reference/arkui-js-lite/figures/gold.png new file mode 100644 index 0000000000000000000000000000000000000000..91a276a7dffb4d98c507e9af6afa1912cca1fed2 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/gold.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/goldenrod.png b/en/application-dev/reference/arkui-js-lite/figures/goldenrod.png new file mode 100644 index 0000000000000000000000000000000000000000..04ab7decab16cb7341665c2a67e8d5655a7eed6a Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/goldenrod.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/gray.png b/en/application-dev/reference/arkui-js-lite/figures/gray.png new file mode 100644 index 0000000000000000000000000000000000000000..dfcb0c5e259b3f8d7375c21712249c1e847edd67 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/gray.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/green.png b/en/application-dev/reference/arkui-js-lite/figures/green.png new file mode 100644 index 0000000000000000000000000000000000000000..bc28f5056c679e189543c8ad6fba67fb56db7655 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/green.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/greenyellow.png b/en/application-dev/reference/arkui-js-lite/figures/greenyellow.png new file mode 100644 index 0000000000000000000000000000000000000000..c89f746719790333bce2bde8c5b8d86102fdfc33 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/greenyellow.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/grey.png b/en/application-dev/reference/arkui-js-lite/figures/grey.png new file mode 100644 index 0000000000000000000000000000000000000000..dfcb0c5e259b3f8d7375c21712249c1e847edd67 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/grey.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/honeydew.png b/en/application-dev/reference/arkui-js-lite/figures/honeydew.png new file mode 100644 index 0000000000000000000000000000000000000000..51fb00e10bb5c167506ddfae1689b58e368df340 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/honeydew.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/hotpink.png b/en/application-dev/reference/arkui-js-lite/figures/hotpink.png new file mode 100644 index 0000000000000000000000000000000000000000..cbc1d312680f479e8c443476ea39eaf1e8a16e55 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/hotpink.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/image-animator.gif b/en/application-dev/reference/arkui-js-lite/figures/image-animator.gif new file mode 100644 index 0000000000000000000000000000000000000000..8321366bdb79b9e6530d53b0f45a6465ae7b967d Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/image-animator.gif differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/image.png b/en/application-dev/reference/arkui-js-lite/figures/image.png new file mode 100644 index 0000000000000000000000000000000000000000..79db22cd94523a8854562e4c8b45ee22d8b45e90 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/image.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/indianred.png b/en/application-dev/reference/arkui-js-lite/figures/indianred.png new file mode 100644 index 0000000000000000000000000000000000000000..069f570291be858a1768b75719a4a6adbd1bdef8 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/indianred.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/indigo.png b/en/application-dev/reference/arkui-js-lite/figures/indigo.png new file mode 100644 index 0000000000000000000000000000000000000000..db83d39f98583ee653ee39b0237eb55961e539c7 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/indigo.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..247fed609d862aa73184f3428486ab62e82bf897 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/input-type-button.png differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..2215e5cfa56f533c6b4d1318b2fa1fb07093dfaa Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/input-type-checkbox.gif differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..bd5fea51c64deb1268793f3a3f70a2c379aebfda Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/input-type-radio.gif differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/ivory.png b/en/application-dev/reference/arkui-js-lite/figures/ivory.png new file mode 100644 index 0000000000000000000000000000000000000000..ff0aa71de78cb461a6602398ee915c677efdf3d4 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/ivory.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/khaki.png b/en/application-dev/reference/arkui-js-lite/figures/khaki.png new file mode 100644 index 0000000000000000000000000000000000000000..3fca22c329e9dc9ef73eee20757eac4ce7386842 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/khaki.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lavender.png b/en/application-dev/reference/arkui-js-lite/figures/lavender.png new file mode 100644 index 0000000000000000000000000000000000000000..44e4d991524bd0ef88a0dd10f204e022dd9d0621 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lavender.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lavenderblush.png b/en/application-dev/reference/arkui-js-lite/figures/lavenderblush.png new file mode 100644 index 0000000000000000000000000000000000000000..5b22707e37ec772dc08a961e557a937862210167 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lavenderblush.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lawngreen.png b/en/application-dev/reference/arkui-js-lite/figures/lawngreen.png new file mode 100644 index 0000000000000000000000000000000000000000..41be1a646e14511b5d177d11a7bce10deaee5bc9 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lawngreen.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lemonchiffon.png b/en/application-dev/reference/arkui-js-lite/figures/lemonchiffon.png new file mode 100644 index 0000000000000000000000000000000000000000..d77ed21418dc3035feb9f9c8e15815e577d71a90 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lemonchiffon.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightblue.png b/en/application-dev/reference/arkui-js-lite/figures/lightblue.png new file mode 100644 index 0000000000000000000000000000000000000000..7cc96f8f6364b93923f0a88b895fe6b151080932 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightblue.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightcoral.png b/en/application-dev/reference/arkui-js-lite/figures/lightcoral.png new file mode 100644 index 0000000000000000000000000000000000000000..515185ab1b3cf9aaba1204760dae19ab3c112b42 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightcoral.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightcyan.png b/en/application-dev/reference/arkui-js-lite/figures/lightcyan.png new file mode 100644 index 0000000000000000000000000000000000000000..6f929d8ab35b708978d8053047cb56bec4fa83bc Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightcyan.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightgoldenrodyellow.png b/en/application-dev/reference/arkui-js-lite/figures/lightgoldenrodyellow.png new file mode 100644 index 0000000000000000000000000000000000000000..1b0ed50716d897398c1e9a741e08ff5f1b9fd9de Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightgoldenrodyellow.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightgray.png b/en/application-dev/reference/arkui-js-lite/figures/lightgray.png new file mode 100644 index 0000000000000000000000000000000000000000..0a5eb251a8d731dc6a9d8b1f31f904c42fd372c3 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightgray.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightgreen.png b/en/application-dev/reference/arkui-js-lite/figures/lightgreen.png new file mode 100644 index 0000000000000000000000000000000000000000..f89943fc98661a6d2b78b5659c41483308a0c54b Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightgreen.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightpink.png b/en/application-dev/reference/arkui-js-lite/figures/lightpink.png new file mode 100644 index 0000000000000000000000000000000000000000..6eb2d41877c85cccfb918b042bc13c81c58ec191 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightpink.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightsalmon.png b/en/application-dev/reference/arkui-js-lite/figures/lightsalmon.png new file mode 100644 index 0000000000000000000000000000000000000000..d87462d1cdc9410e91ee050a53d58e71d1c5f312 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightsalmon.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightseagreen.png b/en/application-dev/reference/arkui-js-lite/figures/lightseagreen.png new file mode 100644 index 0000000000000000000000000000000000000000..e863d7a1c3b9c1ca08bd182dce43c55a4866d59b Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightseagreen.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightskyblue.png b/en/application-dev/reference/arkui-js-lite/figures/lightskyblue.png new file mode 100644 index 0000000000000000000000000000000000000000..daa035cea33b810571c18de67e4ac887eeb11850 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightskyblue.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightslategray.png b/en/application-dev/reference/arkui-js-lite/figures/lightslategray.png new file mode 100644 index 0000000000000000000000000000000000000000..2dadb92ce56793e2dd693bfa7d99b0c1168130dc Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightslategray.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightslategrey.png b/en/application-dev/reference/arkui-js-lite/figures/lightslategrey.png new file mode 100644 index 0000000000000000000000000000000000000000..2dadb92ce56793e2dd693bfa7d99b0c1168130dc Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightslategrey.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightsteelblue.png b/en/application-dev/reference/arkui-js-lite/figures/lightsteelblue.png new file mode 100644 index 0000000000000000000000000000000000000000..ac0521001d2513fd69e48ce61e1d1128b9d3a6dd Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightsteelblue.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lightyellow.png b/en/application-dev/reference/arkui-js-lite/figures/lightyellow.png new file mode 100644 index 0000000000000000000000000000000000000000..d1ca7dd07fe7812ec1f87bf748595174569a5672 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lightyellow.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lime.png b/en/application-dev/reference/arkui-js-lite/figures/lime.png new file mode 100644 index 0000000000000000000000000000000000000000..481c833482d38c5f564127c8f412fe3c0275fd24 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lime.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/limegreen.png b/en/application-dev/reference/arkui-js-lite/figures/limegreen.png new file mode 100644 index 0000000000000000000000000000000000000000..63a8c6adc29d340634ed06a1006a0fb56c991a9d Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/limegreen.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/linen.png b/en/application-dev/reference/arkui-js-lite/figures/linen.png new file mode 100644 index 0000000000000000000000000000000000000000..486baf6be50982404fd1c68a5bc51db45c62046a Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/linen.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/list.png b/en/application-dev/reference/arkui-js-lite/figures/list.png new file mode 100644 index 0000000000000000000000000000000000000000..969473b2307ce6b0528459d5e2b71b0baef4f733 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/list.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lite_bar.PNG b/en/application-dev/reference/arkui-js-lite/figures/lite_bar.PNG new file mode 100644 index 0000000000000000000000000000000000000000..a180cd74fb6455adb495cf0d8471b34c93a9415e Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lite_bar.PNG differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/lite_line.PNG b/en/application-dev/reference/arkui-js-lite/figures/lite_line.PNG new file mode 100644 index 0000000000000000000000000000000000000000..664ade98b38a3b6ac2b3e96dc4af8b75b6749a72 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/lite_line.PNG differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/magenta.png b/en/application-dev/reference/arkui-js-lite/figures/magenta.png new file mode 100644 index 0000000000000000000000000000000000000000..6823cbc9203b07abae455b4ee5c7692878c4be72 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/magenta.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/maroon.png b/en/application-dev/reference/arkui-js-lite/figures/maroon.png new file mode 100644 index 0000000000000000000000000000000000000000..1324b43b3f5b8dd0548cf2069c4c532c5284c445 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/maroon.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/marquee.gif b/en/application-dev/reference/arkui-js-lite/figures/marquee.gif new file mode 100644 index 0000000000000000000000000000000000000000..3b6df4b26274fdf5c3e6e1fab2423400455b7050 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/marquee.gif differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/mediumaquamarine.png b/en/application-dev/reference/arkui-js-lite/figures/mediumaquamarine.png new file mode 100644 index 0000000000000000000000000000000000000000..800bf296338fd01962f16a8863c37bfe515ce3be Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mediumaquamarine.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/mediumblue.png b/en/application-dev/reference/arkui-js-lite/figures/mediumblue.png new file mode 100644 index 0000000000000000000000000000000000000000..c0df3f4f7d99f0b8c39995133c71d944bc07ea4b Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mediumblue.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/mediumorchid.png b/en/application-dev/reference/arkui-js-lite/figures/mediumorchid.png new file mode 100644 index 0000000000000000000000000000000000000000..664d13c38389361e61a45870899e2a6f0bfc835f Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mediumorchid.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/mediumpurple.png b/en/application-dev/reference/arkui-js-lite/figures/mediumpurple.png new file mode 100644 index 0000000000000000000000000000000000000000..848454297b67eb73ab641424badc438433e24479 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mediumpurple.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/mediumseagreen.png b/en/application-dev/reference/arkui-js-lite/figures/mediumseagreen.png new file mode 100644 index 0000000000000000000000000000000000000000..984e7a561e661ecefca8b60d5ac239b67f96c98c Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mediumseagreen.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/mediumslateblue.png b/en/application-dev/reference/arkui-js-lite/figures/mediumslateblue.png new file mode 100644 index 0000000000000000000000000000000000000000..39cf9d01563cf63bee003a47cd88258e860a0757 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mediumslateblue.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/mediumspringgreen.png b/en/application-dev/reference/arkui-js-lite/figures/mediumspringgreen.png new file mode 100644 index 0000000000000000000000000000000000000000..56db1024a714f821528656c64e12520311bae8f5 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mediumspringgreen.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/mediumturquoise.png b/en/application-dev/reference/arkui-js-lite/figures/mediumturquoise.png new file mode 100644 index 0000000000000000000000000000000000000000..b3c353b6a872d3597b767f4c216b2d16bfc2139b Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mediumturquoise.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/mediumvioletred.png b/en/application-dev/reference/arkui-js-lite/figures/mediumvioletred.png new file mode 100644 index 0000000000000000000000000000000000000000..00767e63c899eec52c2c732e834bca8d26d348ce Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mediumvioletred.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/midnightblue.png b/en/application-dev/reference/arkui-js-lite/figures/midnightblue.png new file mode 100644 index 0000000000000000000000000000000000000000..ac66614c0f277cd722b3d090cb10efb973152b0f Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/midnightblue.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/mintcream.png b/en/application-dev/reference/arkui-js-lite/figures/mintcream.png new file mode 100644 index 0000000000000000000000000000000000000000..64fdda07447707816e8a6238939169f58a4ce58f Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mintcream.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/mistyrose.png b/en/application-dev/reference/arkui-js-lite/figures/mistyrose.png new file mode 100644 index 0000000000000000000000000000000000000000..6f5fe69b5a5a62b2d2b719b2be0a17a501363918 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/mistyrose.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/moccasin.png b/en/application-dev/reference/arkui-js-lite/figures/moccasin.png new file mode 100644 index 0000000000000000000000000000000000000000..115cb4c96382681743381aeba099549dc24c2ae5 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/moccasin.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/navajowhite.png b/en/application-dev/reference/arkui-js-lite/figures/navajowhite.png new file mode 100644 index 0000000000000000000000000000000000000000..a68e61ab120651294310c5e3632ce22d71917a52 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/navajowhite.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/navy.png b/en/application-dev/reference/arkui-js-lite/figures/navy.png new file mode 100644 index 0000000000000000000000000000000000000000..4e41c2cd90ba17798448d70b493ccceb3ac960f0 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/navy.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/oldlace.png b/en/application-dev/reference/arkui-js-lite/figures/oldlace.png new file mode 100644 index 0000000000000000000000000000000000000000..ecf361e4c749446160da1e8a07169b21d99f362a Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/oldlace.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/olive.png b/en/application-dev/reference/arkui-js-lite/figures/olive.png new file mode 100644 index 0000000000000000000000000000000000000000..0d386fef5c4fa9faf1b29c7667c7392db250f2eb Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/olive.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/olivedrab.png b/en/application-dev/reference/arkui-js-lite/figures/olivedrab.png new file mode 100644 index 0000000000000000000000000000000000000000..639f16f8aaf261176b3bc760c2eb616ad2f4aa28 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/olivedrab.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/orange.png b/en/application-dev/reference/arkui-js-lite/figures/orange.png new file mode 100644 index 0000000000000000000000000000000000000000..9c43caf5fdfd466eafc37b793f509a6bde2b885d Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/orange.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/orangered.png b/en/application-dev/reference/arkui-js-lite/figures/orangered.png new file mode 100644 index 0000000000000000000000000000000000000000..e72165fdf1b24d80f0abde742ad3d848497c6ea7 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/orangered.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/orchid.png b/en/application-dev/reference/arkui-js-lite/figures/orchid.png new file mode 100644 index 0000000000000000000000000000000000000000..9114031e04fc28be59e8c9567c0fcfe81a9cc5cb Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/orchid.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/palegoldenrod.png b/en/application-dev/reference/arkui-js-lite/figures/palegoldenrod.png new file mode 100644 index 0000000000000000000000000000000000000000..131584c72c082f40e2b466e2706c86a05df375e0 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/palegoldenrod.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/palegreen.png b/en/application-dev/reference/arkui-js-lite/figures/palegreen.png new file mode 100644 index 0000000000000000000000000000000000000000..891d52276622fd51893634ce26e08bd56f62b782 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/palegreen.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/paleturquoise.png b/en/application-dev/reference/arkui-js-lite/figures/paleturquoise.png new file mode 100644 index 0000000000000000000000000000000000000000..a618da21cf6c6d32066286e594921c0fc75b5dba Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/paleturquoise.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/palevioletred.png b/en/application-dev/reference/arkui-js-lite/figures/palevioletred.png new file mode 100644 index 0000000000000000000000000000000000000000..c88212b6818d6d18c77ee497cfcafaf661a70d52 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/palevioletred.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/papayawhip.png b/en/application-dev/reference/arkui-js-lite/figures/papayawhip.png new file mode 100644 index 0000000000000000000000000000000000000000..4b1948de8581602c6c5879c03d68c14f06eccd00 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/papayawhip.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/peachpuff.png b/en/application-dev/reference/arkui-js-lite/figures/peachpuff.png new file mode 100644 index 0000000000000000000000000000000000000000..1821f9c40ad9d24dc10dc662ecbe7936c9e10633 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/peachpuff.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/peru.png b/en/application-dev/reference/arkui-js-lite/figures/peru.png new file mode 100644 index 0000000000000000000000000000000000000000..3ca3e045717379bb09fa8d13ea0d42019bf546f2 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/peru.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/picker-view.png b/en/application-dev/reference/arkui-js-lite/figures/picker-view.png new file mode 100644 index 0000000000000000000000000000000000000000..3e5375876c6c7403b254df56c75d08031ad9801d Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/picker-view.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/pink.png b/en/application-dev/reference/arkui-js-lite/figures/pink.png new file mode 100644 index 0000000000000000000000000000000000000000..5c5e360f249a2002ba68ad9b94bd7f66f5d6aab1 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/pink.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/plum.png b/en/application-dev/reference/arkui-js-lite/figures/plum.png new file mode 100644 index 0000000000000000000000000000000000000000..1e0bad2b2bfed2559e53a8bc21162e6163ec8434 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/plum.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/powderblue.png b/en/application-dev/reference/arkui-js-lite/figures/powderblue.png new file mode 100644 index 0000000000000000000000000000000000000000..8b3eec4e46f6a29dc47694940ceaef1cfa1314af Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/powderblue.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/progress.png b/en/application-dev/reference/arkui-js-lite/figures/progress.png new file mode 100644 index 0000000000000000000000000000000000000000..fb9170121d950b8d8b5a4a5a209c25b452791d25 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/progress.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/purple.png b/en/application-dev/reference/arkui-js-lite/figures/purple.png new file mode 100644 index 0000000000000000000000000000000000000000..8bc3583f82d21c8bec0c70b2da36ed05723fd9a7 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/purple.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/qrcode.gif b/en/application-dev/reference/arkui-js-lite/figures/qrcode.gif new file mode 100644 index 0000000000000000000000000000000000000000..53e718c2879554c82d4a3d9800507a00e37613dc Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/qrcode.gif differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/rebeccapurple.png b/en/application-dev/reference/arkui-js-lite/figures/rebeccapurple.png new file mode 100644 index 0000000000000000000000000000000000000000..6a64534a0a867d44cf81c8a34c9981b5fbaf5faf Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/rebeccapurple.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/red.png b/en/application-dev/reference/arkui-js-lite/figures/red.png new file mode 100644 index 0000000000000000000000000000000000000000..309d1c46f8bc396df5eaed381a5ffa2f0389d602 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/red.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/rosybrown.png b/en/application-dev/reference/arkui-js-lite/figures/rosybrown.png new file mode 100644 index 0000000000000000000000000000000000000000..adca00e684afb79ff4f21313d0586025576a8be1 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/rosybrown.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/royalblue.png b/en/application-dev/reference/arkui-js-lite/figures/royalblue.png new file mode 100644 index 0000000000000000000000000000000000000000..69cb300d4bc8decee06c7fb64b03a24287865a8f Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/royalblue.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/saddlebrown.png b/en/application-dev/reference/arkui-js-lite/figures/saddlebrown.png new file mode 100644 index 0000000000000000000000000000000000000000..5d0ae86ad14ff863511a10ecc1a85b273e826dfc Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/saddlebrown.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/salmon.png b/en/application-dev/reference/arkui-js-lite/figures/salmon.png new file mode 100644 index 0000000000000000000000000000000000000000..b80a6c31cdb287c35965c7841aa97711d79b371c Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/salmon.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/sample1.gif b/en/application-dev/reference/arkui-js-lite/figures/sample1.gif new file mode 100644 index 0000000000000000000000000000000000000000..6168a14aa67c866abf6185ba3a3c2ae9f595153c Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/sample1.gif differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/sandybrown.png b/en/application-dev/reference/arkui-js-lite/figures/sandybrown.png new file mode 100644 index 0000000000000000000000000000000000000000..c952585d8032733700b57ce1a919d71ce9a4b58b Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/sandybrown.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/seagreen.png b/en/application-dev/reference/arkui-js-lite/figures/seagreen.png new file mode 100644 index 0000000000000000000000000000000000000000..858c4187d3a2874f651adc09dcae9a32f8407d86 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/seagreen.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/seashell.png b/en/application-dev/reference/arkui-js-lite/figures/seashell.png new file mode 100644 index 0000000000000000000000000000000000000000..c0b21ed6b44c2f756458137f931873f540c16e5f Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/seashell.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/sienna.png b/en/application-dev/reference/arkui-js-lite/figures/sienna.png new file mode 100644 index 0000000000000000000000000000000000000000..bdb02fdda28a155e2f622eeea2ff820144780e50 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/sienna.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/silver.png b/en/application-dev/reference/arkui-js-lite/figures/silver.png new file mode 100644 index 0000000000000000000000000000000000000000..0491d350277cd67d7774e3761164b9dd7038a117 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/silver.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/skyblue.png b/en/application-dev/reference/arkui-js-lite/figures/skyblue.png new file mode 100644 index 0000000000000000000000000000000000000000..1c4f9ae52153198f8690a1066fe66ba8c7bd1ee1 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/skyblue.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/slateblue.png b/en/application-dev/reference/arkui-js-lite/figures/slateblue.png new file mode 100644 index 0000000000000000000000000000000000000000..87915df37741dacfe9448bfebccf5a88d3ca2a76 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/slateblue.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/slategray.png b/en/application-dev/reference/arkui-js-lite/figures/slategray.png new file mode 100644 index 0000000000000000000000000000000000000000..6e4476c4791e37d4681f8e12313ae1cad0887c1b Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/slategray.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/slider.png b/en/application-dev/reference/arkui-js-lite/figures/slider.png new file mode 100644 index 0000000000000000000000000000000000000000..b72ed8404c613ec9283d7be1f56071d70fcbbc1f Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/slider.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/smoothOff.PNG b/en/application-dev/reference/arkui-js-lite/figures/smoothOff.PNG new file mode 100644 index 0000000000000000000000000000000000000000..c699e78774fadbd8da8c0cc290e88294d445aa6f Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/smoothOff.PNG differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/smoothOn.PNG b/en/application-dev/reference/arkui-js-lite/figures/smoothOn.PNG new file mode 100644 index 0000000000000000000000000000000000000000..b7a5a2a819eeafeb000c00bd7009a02e5fe1bbe5 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/smoothOn.PNG differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/snow.png b/en/application-dev/reference/arkui-js-lite/figures/snow.png new file mode 100644 index 0000000000000000000000000000000000000000..283cf90b3828b36af6fb3a746e806f6715053310 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/snow.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/springgreen.png b/en/application-dev/reference/arkui-js-lite/figures/springgreen.png new file mode 100644 index 0000000000000000000000000000000000000000..93825b7fe53a0794751ee4aa3ca46300c404835e Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/springgreen.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/steelblue.png b/en/application-dev/reference/arkui-js-lite/figures/steelblue.png new file mode 100644 index 0000000000000000000000000000000000000000..a9aba5f67b94427168fade014542532431e28a2e Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/steelblue.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/swiper.gif b/en/application-dev/reference/arkui-js-lite/figures/swiper.gif new file mode 100644 index 0000000000000000000000000000000000000000..2ec52b162dcfdd39c2d2f5a7be4106321935b010 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/swiper.gif differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/switch.gif b/en/application-dev/reference/arkui-js-lite/figures/switch.gif new file mode 100644 index 0000000000000000000000000000000000000000..64f8c8eb0c1ecf13e8b91f291782d825ce9f0076 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/switch.gif differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/tan.png b/en/application-dev/reference/arkui-js-lite/figures/tan.png new file mode 100644 index 0000000000000000000000000000000000000000..b162dbf0a6c890a03ea1aa0b28bdb454651b697c Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/tan.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/teal.png b/en/application-dev/reference/arkui-js-lite/figures/teal.png new file mode 100644 index 0000000000000000000000000000000000000000..93299fc38d761e5251673210c364f6825e319153 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/teal.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/text.png b/en/application-dev/reference/arkui-js-lite/figures/text.png new file mode 100644 index 0000000000000000000000000000000000000000..d3a79bc7ae959d16d1eb4b915fa9040f00996b16 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/text.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/thistle.png b/en/application-dev/reference/arkui-js-lite/figures/thistle.png new file mode 100644 index 0000000000000000000000000000000000000000..d62fc7767f7b2e0e8d0d7fed57e30bdf6a6a332f Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/thistle.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/tomato.png b/en/application-dev/reference/arkui-js-lite/figures/tomato.png new file mode 100644 index 0000000000000000000000000000000000000000..6d795f1618b1546c94266548069eccf9e9af2e01 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/tomato.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/turquoise.png b/en/application-dev/reference/arkui-js-lite/figures/turquoise.png new file mode 100644 index 0000000000000000000000000000000000000000..a33c4fce8448e2127b21e277437195ce0002766b Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/turquoise.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/violet.png b/en/application-dev/reference/arkui-js-lite/figures/violet.png new file mode 100644 index 0000000000000000000000000000000000000000..e9a0799a203fdd7bd41fa5175585dc170a20156e Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/violet.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/wheat.png b/en/application-dev/reference/arkui-js-lite/figures/wheat.png new file mode 100644 index 0000000000000000000000000000000000000000..8a5c7039b580128e75299672dc5438151dcf3572 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/wheat.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/white.png b/en/application-dev/reference/arkui-js-lite/figures/white.png new file mode 100644 index 0000000000000000000000000000000000000000..56d32d4cd371c5374b133cb81c9c077aaf7b110d Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/white.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/whitesmoke.png b/en/application-dev/reference/arkui-js-lite/figures/whitesmoke.png new file mode 100644 index 0000000000000000000000000000000000000000..6dc88e656c293c2e65939e4a793684488dfc81be Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/whitesmoke.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/yellow.png b/en/application-dev/reference/arkui-js-lite/figures/yellow.png new file mode 100644 index 0000000000000000000000000000000000000000..b54dbc2391d1a8f16312dd02dc3d65a35ea2626f Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/yellow.png differ diff --git a/en/application-dev/reference/arkui-js-lite/figures/yellowgreen.png b/en/application-dev/reference/arkui-js-lite/figures/yellowgreen.png new file mode 100644 index 0000000000000000000000000000000000000000..f89e20a55ba1e81f2cbda2bd0241edefadbe7149 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/figures/yellowgreen.png differ diff --git a/en/application-dev/reference/arkui-js-lite/js-common-attributes.md b/en/application-dev/reference/arkui-js-lite/js-common-attributes.md new file mode 100644 index 0000000000000000000000000000000000000000..d91f720d4e8d718abae2a45f4d99d245d46f4815 --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-common-attributes.md @@ -0,0 +1,28 @@ +# 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. diff --git a/en/application-dev/reference/arkui-js-lite/js-common-events.md b/en/application-dev/reference/arkui-js-lite/js-common-events.md new file mode 100644 index 0000000000000000000000000000000000000000..93022870c037ef7424eb4a752d4b0e8ee87cda41 --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-common-events.md @@ -0,0 +1,19 @@ +# 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. | +| swipe5+ | 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:
- **left**: Swipe left.
- **right**: Swipe right.
- **up**: Swipe up.
- **down**: Swipe down. | + diff --git a/en/application-dev/reference/arkui-js-lite/js-common-styles.md b/en/application-dev/reference/arkui-js-lite/js-common-styles.md new file mode 100644 index 0000000000000000000000000000000000000000..15d76dc7b93a04aa82644b52f3a69f834d9aa1c8 --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-common-styles.md @@ -0,0 +1,188 @@ +# Universal Styles + + +You can set universal styles for components in the **style** attribute or **.css** files. + + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| width | <length> \| <percentage>5+ | - | No| Component width.

If this attribute is not set, the default value **0** is used.| +| height | <length> \| <percentage>5+ | - | No| Component height.

If this attribute is not set, the default value **0** is used.| +| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides in a declaration.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- 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] | <length> | 0 | No| Left, top, right, and bottom padding.| +| margin | <length> \| <percentage>5+ | 0 | No| Shorthand attribute to set the margin for all sides in a declaration. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- 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.
- 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] | <length> \| <percentage>5+ | 0 | No| Left, top, right, and bottom margins.| +| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| +| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| +| border-radius | <length> | - | No| Radius of round-corner borders. | +| background-color | <color> | - | No| Background color.| +| opacity5+ | 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:
- **flex**: flexible layout
- **none**: not rendered| +| [left\|top] | <length> \| <percentage>6+ | - | No| Edge of the element.
- **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.
- **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) | diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..7a0a07fe1bee64329c6fe292f881856b941e6ee1 --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-chart.md @@ -0,0 +1,275 @@ +# chart + +The **\** 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:
- **bar**: bar chart
- **line**: line chart
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<ChartDataset> | 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:
- Line style, such as the line width and whether the line is smooth.
- Style and size of the white point at the start of the line.
**NOTE**
Only line charts support this attribute. | + + **Table 2** ChartDataset + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| backgroundColor(deprecated) | <color> | \#ff6384 | No| Color of a line or bar. This attribute is not recommended.| +| strokeColor | <color> | \#ff6384 | No| Line color. Only line charts support this attribute.| +| fillColor | <color> | \#ff6384 | No| Fill color. For line charts, the value indicates the gradient color to fill.| +| data | Array<number> | - | 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.
Negative numbers are not supported. Only line charts support this attribute.| +| max | number | 100 | No| Maximum value of the axis.
Negative numbers are not supported. Only line charts support this attribute.| +| axisTick | number | 10 | No| Number of scales displayed on the axis.
**NOTE**
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**).
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.
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 | <color> | \#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 | <length> | 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:
- circle| +| size | <length> | 5px | No| Size of the highlight point.| +| strokeWidth | <length> | 1px | No| Stroke width.| +| strokeColor | <color> | \#ff0000 | No| Stroke color.| +| fillColor | <color> | \#ff0000 | No| Fill color.| +| display | boolean | true | No| Whether to display the highlight spot.| + + **Table 7** ChartLoop + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| margin | <length> | 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 | {
serial: number, // Set the data subscript of the line chart to be updated.
data: Array<number>, // Set the new data.
} | 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. | +| swipe5+ | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. | + + +## Styles + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| width | <length> \| <percentage>5+ | - | No| Component width.
If this attribute is not set, the default value **0** is used. | +| height | <length> \| <percentage>5+ | - | No| Component height.
If this attribute is not set, the default value **0** is used. | +| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- 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] | <length> | 0 | No| Left, top, right, and bottom padding.| +| margin | <length> \| <percentage>5+ | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- 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.
- 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] | <length> \| <percentage>5+ | 0 | No| Left, top, right, and bottom margins.| +| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| +| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| +| border-radius | <length> | - | No| Radius of round-corner borders. | +| background-color | <color> | - | No| Background color.| +| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:
- **flex**: flexible layout
- **none**: not rendered| +| [left\|top] | <length> \| <percentage>6+ | - | No| Edge of the element.
- **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.
- **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 + +
+ + +
+ ``` + + + ```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 + +
+ +
+ ``` + + + ```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) diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..97383611f9b1228304aa47ebe97a5d0610f18ee8 --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md @@ -0,0 +1,207 @@ +# image-animator + +The **\** 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<ImageFrame> | - | 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.
**NOTE**
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.
- **true**: Images are played from the last one to the first one.
- **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.
- **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.
- **false**: The 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. | +| fillmode5+ | string | forwards | No| Status of the frame animation after its playback is complete. Available values are as follows:
- **none**: restores to the initial status.
- **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 | <uri> | - | Yes| Image path.| +| width | <length> | 0 | No| Image width.| +| height | <length> | 0 | No| Image height.| +| top | <length> | 0 | No| Vertical coordinate of the image relative to the upper left corner of the component.| +| left | <length> | 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. | +| swipe5+ | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. | + + +## Styles + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| width | <length> \| <percentage>5+ | - | No| Component width.

If this attribute is not set, the default value **0** is used.| +| height | <length> \| <percentage>5+ | - | No| Component height.

If this attribute is not set, the default value **0** is used.| +| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- 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] | <length> | 0 | No| Left, top, right, and bottom padding.| +| margin | <length> \| <percentage>5+ | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- 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.
- 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] | <length> \| <percentage>5+ | 0 | No| Left, top, right, and bottom margins.| +| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| +| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| +| border-radius | <length> | - | No| Radius of round-corner borders.| +| background-color | <color> | - | No| Background color.| +| opacity5+ | 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:
- **flex**: flexible layout
- **none**: not rendered| +| [left\|top] | <length> \| <percentage>6+ | - | No| left\|Edge of the element.
- **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.
- **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:
- playing
- paused
- stopped| + + +## Example + + +```html + +
+ +
+ + + + +
+
+``` + + +```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) diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..9dd520dcdeed71f6de216e8d5337d54aec33668d --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-image.md @@ -0,0 +1,74 @@ +# image + +The **\** 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|
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. | +| swipe5+ | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. | + + +## Styles + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| width | <length> \| <percentage>5+ | - | No| Component width.

If this attribute is not set, the default value **0** is used.| +| height | <length> \| <percentage>5+ | - | No| Component height.

If this attribute is not set, the default value **0** is used.| +| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- 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] | <length> | 0 | No| Left, top, right, and bottom padding.| +| margin | <length> \| <percentage>5+ | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- 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.
- 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] | <length> \| <percentage>5+ | 0 | No| Left, top, right, and bottom margins.| +| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| +| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| +| border-radius | <length> | - | No| Radius of round-corner borders. | +| background-color | <color> | - | 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:
- **flex**: flexible layout
- **none**: not rendered| +| [left\|top] | <length> \| <percentage>6+ | - | No| left\|Edge of the element.
- **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.
- **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 + +
+ + +
+``` + +```css +/* xxx.css */ +.container { + justify-content: center; + align-items: center; + flex-direction: column; + width: 100%; + height: 100%; +} +``` + +![image](figures/image.png) diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..a5770bcd59af1727f250b53ac6f1fe1570b4ff14 --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-input.md @@ -0,0 +1,181 @@ +# input + +The **\** 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 |
button | No| Type of the component, which cannot be dynamically modified. The options are as follows:
- **button**: a button that can be clicked.
- **checkbox**: a check box.
- **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. | + | swipe5+ | [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. | + | swipe5+ | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. | + + +## Styles + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | \#ffffff | No| Text color of the component.| +| font-size | <length> | 30px | No| Font size of the component.| +| width | <length> | - | No| Width of the component. The default value for a button is **100px**.| +| height | <length> | - | 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 | <length> | 0 | No| Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- 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] | <length> | 0 | No| Left, top, right, and bottom padding.| +| margin | <length> \| <percentage>5+ | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- 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.
- 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] | <length> \| <percentage>5+ | 0 | No| Left, top, right, and bottom margins.| +| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| +| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| +| border-radius | <length> | - | No| Radius of round-corner borders. | +| background-color | <color> | - | No| Background color.| +| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:
- **flex**: flexible layout
- **none**: not rendered| +| [left\|top] | <length> \| <percentage>6+ | - | No| Edge of the element.
- **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.
- **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 + +
+ +
+ ``` + + ```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 + +
+ + {{text}} +
+ ``` + + ```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 + +
+
+ + radio1 +
+
+ + radio2 +
+
+ + radio3 +
+
+ ``` + + ```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) diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..8ecc7a2e41d301f03540320244425beacc39a884 --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-marquee.md @@ -0,0 +1,118 @@ +# marquee + +The **\** 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. | +| swipe5+ | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. | + + +## Styles + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | \#ffffff


| No| Font color of the scrolling text.| +| font-size | <length> |
30 | No| Font size of the scrolling text.| +| font-family | string |

SourceHanSansSC-Regular | No|

Font. Only the **SourceHanSansSC-Regular** font is supported.| +| width | <length> \| <percentage>5+ | - | No| Component width.

If this attribute is not set, the default value **0** is used.| +| height | <length> \| <percentage>5+ | - | No| Component height.

If this attribute is not set, the default value **0** is used.| +| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- 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] | <length> | 0 | No| Left, top, right, and bottom padding.| +| margin | <length> \| <percentage>5+ | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- 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.
- 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] | <length> \| <percentage>5+ | 0 | No| Left, top, right, and bottom margins.| +| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| +| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| +| border-radius | <length> | - | No| Radius of round-corner borders.| +| background-color | <color> | - | No| Background color.| +| opacity5+ | 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:
- **flex**: flexible layout
- **none**: not rendered| +| [left\|top] | <length> \| <percentage>6+ | - | No| left\|Edge of the element.
- **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.
- **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 + +
+ {{marqueeCustomData}} + speed+ + speed- + changeData +
+``` + +```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) diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..e9dacebc6c419bfaeca6c8aac9c1001e0725bd1f --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-picker-view.md @@ -0,0 +1,145 @@ +# picker-view + +The **\** 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:
- **text**: text selector.
- **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.
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.
| + + +## 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 | <color> | \#808080 | No| Font color of a candidate item.| +| font-size | <length> | 30px | No| Font size of a candidate item. The value is of the length type, in pixels.| +| selected-color | <color> | \#ffffff | No| Font color of the selected item.| +| selected-font-size | <length> | 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 | <length> \| <percentage>5+ | - | No| Component width.
If this attribute is not set, the default value **0** is used. | +| height | <length> \| <percentage>5+ | - | No| Component height.
If this attribute is not set, the default value **0** is used. | +| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- 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] | <length> | 0 | No| Left, top, right, and bottom padding.| +| margin | <length> \| <percentage>5+ | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- 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.
- 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] | <length> \| <percentage>5+ | 0 | No| Left, top, right, and bottom margins.| +| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| +| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| +| border-radius | <length> | - | No| Radius of round-corner borders.| +| background-color | <color> | - | No| Background color.| +| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:
- **flex**: flexible layout
- **none**: not rendered| +| [left\|top] | <length> \| <percentage>6+ | - | No| Edge of the element.
- **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.
- **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 + +
+ + Selected: {{time}} + + +
+``` + + +```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) diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..740bc136bc0a506cc6f28f883424fb2a62b15504 --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-progress.md @@ -0,0 +1,125 @@ +# progress + +The **\** 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:
- **horizontal**: linear progress bar.
- **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. | +| swipe5+ | [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 | <color> | \#6b9ac7 | No | Color of the progress bar.| + | stroke-width | <length> | 321-4 \| 45+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 | <color> | - | No | Color of the arc progress bar. | + | background-color | <color> | - | No | Background color of the arc progress bar. | + | stroke-width | <length> | - | No | Width of the arc progress bar.
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 | <deg> | 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 | <deg> | 240 | No | Total length of the arc progress bar. The value ranges from –360 to 360. A negative number indicates anticlockwise.| + | center-x | <length> | - | 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 | <length> | - | 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 | <length> | - | 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 | <length> \| <percentage>5+ | - | No| Component width.
If this attribute is not set, the default value **0** is used.| +| height | <length> \| <percentage>5+ | - | No| Component height.
If this attribute is not set, the default value **0** is used.| +| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- 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] | <length> | 0 | No| Left, top, right, and bottom padding.| +| margin | <length> \| <percentage>5+ | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- 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.
- 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] | <length> \| <percentage>5+ | 0 | No| Left, top, right, and bottom margins.| +| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| +| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| +| border-radius | <length> | - | 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:
- **flex**: flexible layout
- **none**: not rendered| +| [left\|top] | <length> \| <percentage>6+ | - | No| Edge of the element.
- **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.
- **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 + +
+ + +
+``` + +```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) diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..16ef26d1b4263b0217c9fedfc8f04016fe7175db --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-qrcode.md @@ -0,0 +1,125 @@ +# qrcode + + +The **\** 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. | +| swipe5+ | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. | + + +## Styles + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | \#000000 | No| Color of the QR code.| +| background-color | <color> | \#ffffff | No| Background color of the QR code.| +| width | <length> \| <percentage>5+ | - | No| Component width.
If this attribute is not set, the default value **0** is used. | +| height | <length> \| <percentage>5+ | - | No| Component height.
If this attribute is not set, the default value **0** is used. | +| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- 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] | <length> | 0 | No| Left, top, right, and bottom padding.| +| margin | <length> \| <percentage>5+ | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- 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.
- 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] | <length> \| <percentage>5+ | 0 | No| Left, top, right, and bottom margins.| +| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| +| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| +| border-radius | <length> | - | 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:
- **flex**: flexible layout
- **none**: not rendered| +| [left\|top] | <length> \| <percentage>6+ | - | No| Edge of the element.
- **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.
- **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 + +
+ + Color + BackgroundColor + Value +
+``` + +```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) diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..8e69b18afe816c1691743976bf7ab72c2b124a36 --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-slider.md @@ -0,0 +1,102 @@ +# slider + +The **\** 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. | +| swipe5+ | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. | + + **Table 2** ChangeEvent + +| Attribute| Type| Description| +| -------- | -------- | -------- | +| progress(deprecated5+) | string | Current value of the slider.| +| value5+ | number | Current value of the slider.| + + +## Styles + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | \#000000 | No| Background color of the slider.| +| selected-color | <color> | \#ffffff | No| Selected color of the slider.| +| width | <length> \| <percentage>5+ | - | No| Component width.
If this attribute is not set, the default value **0** is used. | +| height | <length> \| <percentage>5+ | - | No| Component height.
If this attribute is not set, the default value **0** is used. | +| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- 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] | <length> | 0 | No| Left, top, right, and bottom padding.| +| margin | <length> \| <percentage>5+ | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- 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.
- 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] | <length> \| <percentage>5+ | 0 | No| Left, top, right, and bottom margins.| +| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| +| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| +| border-radius | <length> | - | No| Radius of round-corner borders.| +| background-color | <color> | - | No| Background color.| +| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:
- **flex**: flexible layout
- **none**: not rendered| +| [left\|top] | <length> \| <percentage>6+ | - | No| Edge of the element.
- **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.
- **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 + +
+ slider start value is {{startValue}} + slider current value is {{currentValue}} + slider end value is {{endValue}} + +
+``` + +```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) diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..42b4bddc549dcda654c2925d164e2eada3190910 --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-switch.md @@ -0,0 +1,99 @@ +# switch + +The **\** 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. | +| swipe5+ | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component. | + + +## Styles + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| width | <length> \| <percentage>5+ | - | No| Component width.

If this attribute is not set, the default value **0** is used.| +| height | <length> \| <percentage>5+ | - | No| Component height.

If this attribute is not set, the default value **0** is used.| +| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- 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] | <length> | 0 | No| Left, top, right, and bottom padding.| +| margin | <length> \| <percentage>5+ | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- 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.
- 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] | <length> \| <percentage>5+ | 0 | No| Left, top, right, and bottom margins.| +| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| +| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| +| border-radius | <length> | - | No| Radius of round-corner borders.| +| background-color | <color> | - | No| Background color.| +| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:
- **flex**: flexible layout
- **none**: not rendered| +| [left\|top] | <length> \| <percentage>6+ | - | No| left\|Edge of the element.
- **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.
- **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 + +
+
+ + {{title}} +
+
+``` + +```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) diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..e5eab00c2eb0434932a0400d87f87f413d47c8ce --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-components-basic-text.md @@ -0,0 +1,99 @@ +# text + +The **\** 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.| +| swipe5+ | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.| + + +## Styles + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | \#ffffff | No| Font color.| +| font-size | <length> | 30px | No| Font size. | +| letter-spacing | <length> | 2px | No| Character spacing (px).| +| text-align | string | left | No| Text alignment mode. Available values are as follows:
- **left**: The text is left-aligned.
- **center**: The text is center-aligned.
- **right**: The text is right-aligned.| +| text-overflow | string | clip | No| Available values are as follows:
- **clip**: The text is clipped and displayed based on the size of the parent container.
- **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 | <length> \| <percentage>5+ | 0px | No| Component width.
Unit: pixel
If this attribute is not set, the default value **0** is used.| +| height | <length> \| <percentage>5+ | 0px | No| Component height.
Unit: pixel
If this attribute is not set, the default value **0** is used.| +| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- 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] | <length> | 0 | No| Left, top, right, and bottom padding.| +| margin | <length> \| <percentage>5+ | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- 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.
- 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] | <length> \| <percentage>5+ | 0 | No| Left, top, right, and bottom margins.| +| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| +| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| +| border-radius | <length> | - | No| Radius of round-corner borders.| +| background-color | <color> | - | No| Background color.| +| opacity5+ | 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:
- **flex**: flexible layout
- **none**: not rendered| +| [left\|top] | <length> \| <percentage>6+ | - | No| Edge of the element.
- **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.
- **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-height10+ | number | 0px | No| Text line height.
Unit: pixel
If this attribute is not set, the text line height is adaptive.| + +## Example + +```html + +
+ + Hello {{ title }} + +
+``` + +```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) diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..58b8642f8acb1adafb2a10242c8eee6ef850523b --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-components-canvas-canvas.md @@ -0,0 +1,55 @@ +# canvas + +The **\** 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.| +| swipe5+ | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.| + + +## Styles + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| width | <length> \| <percentage>5+ | - | No| Component width.
If this attribute is not set, the default value **0** is used. | +| height | <length> \| <percentage>5+ | - | No| Component height.
If this attribute is not set, the default value **0** is used. | +| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- 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).| +| margin | <length> \| <percentage>5+ | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- 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.
- 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] | <length> \| <percentage>5+ | 0 | No| Left, top, right, and bottom margins.| +| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| +| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| +| border-radius | <length> | - | No| Radius of round-corner borders.| +| background-color | <color> | - | No| Background color.| +| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:
- **flex**: flexible layout
- **none**: not rendered| +| [left\|top] | <length> \| <percentage>6+ | - | No| Edge of the element.
- **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.
- **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).| diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..1e5a349bff3f2fa7bf97fcefd67601a36bb3bb8a --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-components-canvas-canvasrenderingcontext2d.md @@ -0,0 +1,365 @@ +# CanvasRenderingContext2D + + +**CanvasRenderingContext2D** allows you to draw rectangles and text on a canvas. + +**Example** + +```html + + + + +``` + + +```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 | <color> | 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 | <color> | 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()5+ + +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()5+ + +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()5+ + +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()5+ + +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()5+ + +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:
- **left** (default): The text is left-aligned.
- **right**: The text is right-aligned.
- **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()5+ + +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()5+ + +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 + ``` diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..8533e8dd7830abc31d5bd362ed115b083161fb69 --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-components-common-animation.md @@ -0,0 +1,65 @@ +# 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 | <time> | 0 | Delay for playing the animation, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms. | +| animation-duration | <time> | 0 | Animation duration, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms.
**NOTE**
**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 |
linear | Speed curve of an animation, which makes the animation more fluent.
- **linear**: The animation speed keeps unchanged.
- **ease-in**: The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used
- **ease-out**: The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.
- **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.
- **none**: No style is applied to the target before or after the animation is executed.
- **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 | <length> | Moves an element along the x-axis.| +| translateY | <length> | Moves an element along the y-axis.| +| rotate | <deg> \| <rad> | 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 | <color> | - | Background color applied to the component after the animation is played.| +| width | <length> | - | Width value applied to the component after the animation is played.| +| height | <length> | - | 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. diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..c01a9c145991b2cf4eabc971d718cb8132c9ee97 --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-components-common-mediaquery.md @@ -0,0 +1,110 @@ +# 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: <=, >=, <, and >. +> - 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.
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.| +| or9+ | 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.
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.
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 + +
+
+ Hello World +
+
+``` + +```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; + } +} +``` diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..7f9321e0194dd7a6fbc81d476be45188d12cafbb --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-components-container-div.md @@ -0,0 +1,154 @@ +# div + +The **\
** 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.| +| swipe5+ | [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:
- **column**: Items are placed vertically from top to bottom.
- **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:
- **nowrap**: Flex items are displayed in a single line.
- **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:
- **flex-start**: Items are packed toward the start edge of the container along the main axis.
- **flex-end**: Items are packed toward the end edge of the container along the main axis.
- **center**: Items are packed toward the center of the container along the main axis.
- **space-between**: Items are positioned with space between the rows.
- **space-around**: Items are positioned with space before, between, and after the rows.| +| align-items | string | stretch5+
flex-start1-4 | No| How items are aligned along the cross axis in a flex container. Available values are as follows:
- **stretch**: Items are stretched to the same height or width as the container along the cross axis.5+
- **flex-start**: Items are packed toward the start edge of the cross axis.
- **flex-end**: Items are packed toward the end edge of the cross axis.
- **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:
- **flex**: flexible layout
- **none**: not rendered| +| width | <length> \| <percentage>5+ | - | No| Component width.

If this attribute is not set, the default value **0** is used.| +| height | <length> \| <percentage>5+ | - | No| Component height.
If this attribute is not set, the default value **0** is used. | +| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- 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] | <length> | 0 | No| Left, top, right, and bottom padding.| +| margin | <length> \| <percentage>5+ | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- 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.
- 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] | <length> \| <percentage>5+ | 0 | No| Left, top, right, and bottom margins.| +| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| +| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| +| border-radius | <length> | - | No| Radius of round-corner borders.| +| background-color | <color> | - | No| Background color.| +| opacity5+ | 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] | <length> \| <percentage>6+ | - | No| Edge of the element.
- **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.
- **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 + +
+
+
+
+
+
+
+ ``` + + + ```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 + +
+
+
+
+
+
+
+ ``` + + + ```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) diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..32855f3c9a0b62169e81fd2643c97afce58c5d3f --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-components-container-list-item.md @@ -0,0 +1,53 @@ +# list-item + +**\** is a child component of the **[\](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.| +| swipe5+ | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.| + + +## Styles + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| width | <length> \| <percentage>5+ | - | No| Component width.
If this attribute is not set, the default value **0** is used.| +| height | <length> \| <percentage>5+ | - | No| Component height.
If this attribute is not set, the default value **0** is used.| +| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- 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] | <length> | 0 | No| Left, top, right, and bottom padding.| +| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| +| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| +| border-radius | <length> | - | No| Radius of round-corner borders.| +| background-color | <color> | - | No| Background color.| +| opacity5+ | 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:
- **flex**: flexible layout
- **none**: not rendered| + + + +## Example + +See **Example** in [list](js-components-container-list.md). diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..6c256285ccf9894184218e179efd96089289d61d --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-components-container-list.md @@ -0,0 +1,123 @@ +# list + +The **\** 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 [\](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. | +| swipe5+ | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the list. | +| scrolltop8+ | - | Triggered when the list is scrolled to the top.| +| scrollbottom8+ | - | 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.
- **column**: Items are placed vertically from top to bottom.
- **row**: Items are placed horizontally from left to right.
For the **\** component, the default value is **column**. For other components, the default value is **row**. Dynamic modification is not supported.| +| width | <length> \| <percentage>5+ | - | No| Component width.
If this attribute is not set, the default value **0** is used. | +| height | <length> \| <percentage>5+ | - | No| Component height.
If this attribute is not set, the default value **0** is used. | +| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- 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] | <length> | 0 | No| Left, top, right, and bottom padding.| +| margin | <length> \| <percentage>5+ | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- 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.
- 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] | <length> \| <percentage>5+ | 0 | No| Left, top, right, and bottom margins.| +| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| +| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| +| border-radius | <length> | - | No| Radius of round-corner borders.| +| background-color | <color> | - | No| Background color.| +| opacity5+ | 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:
- **flex**: flexible layout
- **none**: not rendered| +| [left\|top] | <length> \| <percentage>6+ | - | No| Edge of the element.
- **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.
- **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 + +
+ + + {{$item.title}} + {{$item.date}} + + +
+``` + + +```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) diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..2ce76b90cf9ad62ad1b95c0e08af46ee79d7d096 --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-components-container-stack.md @@ -0,0 +1,101 @@ +# stack + +The **\** 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.| +| swipe5+ | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.| + + +## Styles + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| width | <length> \| <percentage>5+ | - | No| Component width.
If this attribute is not set, the default value **0** is used. | +| height | <length> \| <percentage>5+ | - | No| Component height.
If this attribute is not set, the default value **0** is used. | +| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- 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] | <length> | 0 | No| Left, top, right, and bottom padding.| +| margin | <length> \| <percentage>5+ | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- 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.
- 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] | <length> \| <percentage>5+ | 0 | No| Left, top, right, and bottom margins.| +| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| +| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| +| border-radius | <length> | - | No| Radius of round-corner borders.| +| background-color | <color> | - | No| Background color.| +| opacity5+ | 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:
- **flex**: flexible layout
- **none**: not rendered| +| [left\|top] | <length> \| <percentage>6+ | - | No| Edge of the element.
- **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.
- **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 **\** component. + + +## Example + + +```html + + +
+
+
+ +``` + + +```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) diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..34ad83a37b8d907b886427b183e99f4666e28327 --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-components-container-swiper.md @@ -0,0 +1,112 @@ +# swiper + +The **\** 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 **\** 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.
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.| +| swipe5+ | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.| + + +## Styles + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| width | <length> \| <percentage>5+ | - | No| Component width.
If this attribute is not set, the default value **0** is used. | +| height | <length> \| <percentage>5+ | - | No| Component height.
If this attribute is not set, the default value **0** is used. | +| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- 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] | <length> | 0 | No| Left, top, right, and bottom padding.| +| margin | <length> \| <percentage>5+ | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- 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.
- 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] | <length> \| <percentage>5+ | 0 | No| Left, top, right, and bottom margins.| +| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| +| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| +| border-radius | <length> | - | No| Radius of round-corner borders.| +| background-color | <color> | - | No| Background color.| +| opacity5+ | 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:
- **flex**: flexible layout
- **none**: not rendered| +| [left\|top] | <length> \| <percentage>6+ | - | No| Edge of the element.
- **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.
- **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 + + +
+ 1 +
+
+ 2 +
+
+ 3 +
+ +``` + + +```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) diff --git a/en/application-dev/reference/arkui-js-lite/js-framework-file.md b/en/application-dev/reference/arkui-js-lite/js-framework-file.md new file mode 100644 index 0000000000000000000000000000000000000000..2ea4d52d1334d3c9cbca4f836e8d4d0a4087f8f5 --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-framework-file.md @@ -0,0 +1,67 @@ +# 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 | diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..d22c607252dafd01ef58ddec221372e254ed79a4 --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-framework-js-file.md @@ -0,0 +1,24 @@ +# 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'); + }, +} +``` diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..37d08081341fb43d1228d2cd9b211b14cf39f35a --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-framework-js-tag.md @@ -0,0 +1,74 @@ +# "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": [ + { + ... + } + ] + } +} +``` diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..79b1d9938cac9f7f804a85407a74d6bd08931628 --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-framework-syntax-css.md @@ -0,0 +1,160 @@ +# 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: + + ``` + +
+ Hello World +
+ ``` + + + ``` + /* 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: + + +``` + +
+ Title +
+ Content +
+
+``` + + +``` +/* 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 |
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.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. diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..b9f5bec1e13aaf9bc2112fdee9e43cdcc322641d --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-framework-syntax-hml.md @@ -0,0 +1,308 @@ +# 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 + + +``` + +
+ Image Show +
+ +
+
+``` + + +## Data Binding + + +``` + +
+ {{content[1]}} +
+``` + + +``` +// 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.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:** + +``` + +
+ {{count}} +
+ + + + + + +
+
+``` + + +``` +/* 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 + + +``` + +
+ + +
+ {{$idx}}.{{$item.name}} +
+ +
+ {{$idx}}.{{value.name}} +
+ +
+ {{index}}.{{value.name}} +
+
+``` + + +``` +// 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: + + +``` + +
+ + + Hello-One + Hello-Two + Hello-World +
+``` + + +``` +// 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**. + + +``` + +
+ + Hello World +
+``` + + +``` +// 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. diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..3ce76d4463643c979cf619749b2a8a5c80dae1c1 --- /dev/null +++ b/en/application-dev/reference/arkui-js-lite/js-framework-syntax-js.md @@ -0,0 +1,122 @@ +# 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.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.| diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-caution.gif differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-danger.gif differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..6314297e45c1de184204098efd4814d6dc8b1cda Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-note.gif differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..86024f61b691400bea99e5b1f506d9d9aef36e27 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-notice.gif differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..93aa72053b510e456b149f36a0972703ea9999b7 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-tip.gif differ diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571 Binary files /dev/null and b/en/application-dev/reference/arkui-js-lite/public_sys-resources/icon-warning.gif differ