diff --git a/zh-cn/application-dev/application-dev-guide.md b/zh-cn/application-dev/application-dev-guide.md index 15439726df413f25a8d3612e0b10ca9868ca322c..4febc5121809eda48ffcb612229db596840f0907 100644 --- a/zh-cn/application-dev/application-dev-guide.md +++ b/zh-cn/application-dev/application-dev-guide.md @@ -60,13 +60,10 @@ API参考提供了OpenHarmony全量组件和接口的参考文档，可以帮助 内容包括： - [组件参考（基于TS扩展的声明式开发范式）](reference/arkui-ts/Readme-CN.md) - -- [组件参考（基于JS扩展的类Web开发范式）](reference/arkui-js/Readme-CN.md) - +- [组件参考（兼容JS的类Web开发范式-ArkUI.Full）](reference/arkui-js/Readme-CN.md) +- [组件参考（兼容JS的类Web开发范式-ArkUI.Lite）](reference/arkui-js-lite/Readme-CN.md) - [JS服务卡片UI组件参考](reference/js-service-widget-ui/Readme-CN.md) - - [接口参考（JS及TS API）](reference/apis/js-apis-ability-dataUriUtils.md) - - 接口参考（Native API） - [OpenHarmony Native API](reference/native-apis/_o_h___native_x_component.md) - [Native API标准库](reference/native-lib/third_party_libc/musl.md) diff --git a/zh-cn/application-dev/reference/Readme-CN.md b/zh-cn/application-dev/reference/Readme-CN.md index 88fa07c730e4774e12236232947abd162cc77a0a..6253620ea55348d7cb196bfaa0b3958e7e46a3b1 100644 --- a/zh-cn/application-dev/reference/Readme-CN.md +++ b/zh-cn/application-dev/reference/Readme-CN.md @@ -3,7 +3,8 @@ - [系统能力SystemCapability使用指南](syscap.md) - [系统能力SystemCapability列表](syscap-list.md) - [组件参考（基于ArkTS的声明式开发范式）](arkui-ts/Readme-CN.md) -- [组件参考（兼容JS的类Web开发范式）](arkui-js/Readme-CN.md) +- [组件参考（兼容JS的类Web开发范式-ArkUI.Full）](arkui-js/Readme-CN.md) +- [组件参考（兼容JS的类Web开发范式-ArkUI.Lite）](arkui-js-lite/Readme-CN.md) - [JS服务卡片UI组件参考](js-service-widget-ui/Readme-CN.md) - [接口参考（ArkTS及JS API）](apis/Readme-CN.md) - [错误码参考](errorcodes/Readme-CN.md) diff --git a/zh-cn/application-dev/reference/arkui-js-lite/Readme-CN.md b/zh-cn/application-dev/reference/arkui-js-lite/Readme-CN.md new file mode 100644 index 0000000000000000000000000000000000000000..97ab611a3ea96ba21772559e381dd225b2e8020c --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/Readme-CN.md @@ -0,0 +1,36 @@ +# 兼容JS的类Web开发范式（ArkUI.Lite） + +- 框架说明 + - [文件组织](js-framework-file.md) + - [js标签配置](js-framework-js-tag.md) + - [app.js](js-framework-js-file.md) + - 语法 + - [HML语法参考](js-framework-syntax-hml.md) + - [CSS语法参考](js-framework-syntax-css.md) + - [JS语法参考](js-framework-syntax-js.md) +- 组件通用信息 + - [通用事件](js-common-events.md) + - [通用属性](js-common-attributes.md) + - [通用样式](js-common-styles.md) + - [动画样式](js-components-common-animation.md) +- 容器组件 + - [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) +- 基础组件 + - [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组件](js-components-canvas-canvas.md) + - [CanvasRenderingContext2D对象](js-components-canvas-canvasrenderingcontext2d.md) diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/#000000.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/#000000.png new file mode 100644 index 0000000000000000000000000000000000000000..58293d5e874f2aa36ecaf7282ca9e4736318092f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/#000000.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/GIF.gif b/zh-cn/application-dev/reference/arkui-js-lite/figures/GIF.gif new file mode 100644 index 0000000000000000000000000000000000000000..fa77bb91654623c2de68a19e7f9f95bbd1d029bc Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/GIF.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/aliceblue.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/aliceblue.png new file mode 100644 index 0000000000000000000000000000000000000000..378000d344e90ab4db41869a4612daf6b60d66ab Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/aliceblue.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/antiquewhite.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/antiquewhite.png new file mode 100644 index 0000000000000000000000000000000000000000..8e195633945b3387c46a7d295862351d4ff1fc64 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/antiquewhite.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/aqua.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/aqua.png new file mode 100644 index 0000000000000000000000000000000000000000..3e6aaacfe1c26157294e6dedfeaa1488aeed12a3 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/aqua.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/aquamarine.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/aquamarine.png new file mode 100644 index 0000000000000000000000000000000000000000..c25a692065d473ccf9f5b6d36254787e2497fad6 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/aquamarine.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/azure.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/azure.png new file mode 100644 index 0000000000000000000000000000000000000000..2e7cec00f9d186d76ff5cb12d47811084217cc1c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/azure.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/barchart.PNG b/zh-cn/application-dev/reference/arkui-js-lite/figures/barchart.PNG new file mode 100644 index 0000000000000000000000000000000000000000..aa4ba3f9fa64250b1b86bd6d39b6a8071d3de1c3 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/barchart.PNG differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/beige.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/beige.png new file mode 100644 index 0000000000000000000000000000000000000000..21f20a4220aabf9449c707291633e7b3723fe378 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/beige.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/bisque.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/bisque.png new file mode 100644 index 0000000000000000000000000000000000000000..7983d590a2c617c6cad68c90af6b12aa17518810 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/bisque.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/blanchedalmond.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/blanchedalmond.png new file mode 100644 index 0000000000000000000000000000000000000000..04bcf099edface801be6074a33ff33a980c9b606 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/blanchedalmond.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/blue.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/blue.png new file mode 100644 index 0000000000000000000000000000000000000000..e370a44cf043fc34bd8891f57faad2cd2ca05707 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/blue.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/blueviolet.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/blueviolet.png new file mode 100644 index 0000000000000000000000000000000000000000..ca1edf2219980ab9c8533b9fda3219521c50533d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/blueviolet.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/brown.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/brown.png new file mode 100644 index 0000000000000000000000000000000000000000..0d22570503febc7a7dcba0d1e870f49f32fe489a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/brown.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/burlywood.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/burlywood.png new file mode 100644 index 0000000000000000000000000000000000000000..0d53a47b7eace81d5c7da88c59fee61e30c89681 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/burlywood.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/cadetblue.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/cadetblue.png new file mode 100644 index 0000000000000000000000000000000000000000..a59bc9cdb0f75ad79e4714d3593216021369c862 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/cadetblue.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/chartreuse.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/chartreuse.png new file mode 100644 index 0000000000000000000000000000000000000000..3026d3c195598159232b4b1f08e9f198f4b4fa2c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/chartreuse.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/chocolate.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/chocolate.png new file mode 100644 index 0000000000000000000000000000000000000000..02d5f4e31b020ea9f64e36a7b7cd50299cf3d7f2 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/chocolate.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/coral.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/coral.png new file mode 100644 index 0000000000000000000000000000000000000000..8442c9b2258c79ee6b6a3d5963df5b792bbb1a16 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/coral.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/cornflowerblue.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/cornflowerblue.png new file mode 100644 index 0000000000000000000000000000000000000000..3621ef6876dbd1103487aed8ff190e6a0204ffde Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/cornflowerblue.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/cornsilk.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/cornsilk.png new file mode 100644 index 0000000000000000000000000000000000000000..bf38fe45eaf254939b88b9d2a66635408060acf7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/cornsilk.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/crimson.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/crimson.png new file mode 100644 index 0000000000000000000000000000000000000000..bca655617699ef8dc1265bf692a3170c7effe15b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/crimson.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/cyan.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/cyan.png new file mode 100644 index 0000000000000000000000000000000000000000..3e6aaacfe1c26157294e6dedfeaa1488aeed12a3 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/cyan.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/darkblue.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkblue.png new file mode 100644 index 0000000000000000000000000000000000000000..b234a769d1a9f1f30c4d2127160cf067e9f71ad6 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkblue.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/darkcyan.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkcyan.png new file mode 100644 index 0000000000000000000000000000000000000000..b780eb08852e8916ec6ff1a401ea6946c8d727cf Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkcyan.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/darkgoldenrod.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkgoldenrod.png new file mode 100644 index 0000000000000000000000000000000000000000..26f2f228b47b8acb8adcddc3abf9156d6c29364e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkgoldenrod.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/darkgray.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkgray.png new file mode 100644 index 0000000000000000000000000000000000000000..f1abe2afcb7902557ac3c4f58abfdf333af03121 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkgray.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/darkgreen.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkgreen.png new file mode 100644 index 0000000000000000000000000000000000000000..4c4c304b67c398f32c5fff516cdde377ca39c73d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkgreen.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/darkgrey.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkgrey.png new file mode 100644 index 0000000000000000000000000000000000000000..f1abe2afcb7902557ac3c4f58abfdf333af03121 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkgrey.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/darkkhaki.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkkhaki.png new file mode 100644 index 0000000000000000000000000000000000000000..12085848c0f6472d53f7e6504c1924ea6f5a44c1 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkkhaki.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/darkmagenta.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkmagenta.png new file mode 100644 index 0000000000000000000000000000000000000000..9ed54c6c5c5186fb43f24dab24f7689ae0d14a12 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkmagenta.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/darkolivegreen.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkolivegreen.png new file mode 100644 index 0000000000000000000000000000000000000000..53081e06f458cfc1772de30f669180333b8d783d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkolivegreen.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/darkorange.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkorange.png new file mode 100644 index 0000000000000000000000000000000000000000..6064f64867e3aca621244e1e6fdb16d3ab2ed748 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkorange.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/darkorchid.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkorchid.png new file mode 100644 index 0000000000000000000000000000000000000000..6315d4654d04dd6b9b295fa1f8b37e8c550b17cf Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkorchid.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/darkred.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkred.png new file mode 100644 index 0000000000000000000000000000000000000000..c33d763d18f5108bf0eedba19c662d05af397ee9 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkred.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/darksalmon.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/darksalmon.png new file mode 100644 index 0000000000000000000000000000000000000000..57594c6855d4cdf1b37cc3e5354374c9dae0823b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/darksalmon.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/darkseagreen.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkseagreen.png new file mode 100644 index 0000000000000000000000000000000000000000..454b1796715794d51e2a1a4649bfafa1bfde80f0 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkseagreen.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/darkslateblue.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkslateblue.png new file mode 100644 index 0000000000000000000000000000000000000000..7dfc7ee8793298d19c939369ba980abd547982ff Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkslateblue.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/darkslategray.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkslategray.png new file mode 100644 index 0000000000000000000000000000000000000000..5e23c304c4911dc0ef487dfeb8d7820aea5fb44b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkslategray.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/darkslategrey.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkslategrey.png new file mode 100644 index 0000000000000000000000000000000000000000..5e23c304c4911dc0ef487dfeb8d7820aea5fb44b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkslategrey.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/darkturquoise.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkturquoise.png new file mode 100644 index 0000000000000000000000000000000000000000..4e41450db5d70f6d10d6d7bf59daba33085c177e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkturquoise.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/darkviolet.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkviolet.png new file mode 100644 index 0000000000000000000000000000000000000000..6f085565bd8c64d44bf58ce0969557515ec7ab97 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/darkviolet.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/deeppink.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/deeppink.png new file mode 100644 index 0000000000000000000000000000000000000000..6348bb2b6ee281976f7d58159e4c33db29f542ad Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/deeppink.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/deepskyblue.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/deepskyblue.png new file mode 100644 index 0000000000000000000000000000000000000000..0ac129028e67b43fcae8e3d5c1a539cc45ba6d21 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/deepskyblue.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/default.PNG b/zh-cn/application-dev/reference/arkui-js-lite/figures/default.PNG new file mode 100644 index 0000000000000000000000000000000000000000..5e4322d20ad887573ad85958bc181a1be0f85f1c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/default.PNG differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/dimgray.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/dimgray.png new file mode 100644 index 0000000000000000000000000000000000000000..1072a50f468dda3c90c889c31424b7c290eb1a13 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/dimgray.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/dimgrey.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/dimgrey.png new file mode 100644 index 0000000000000000000000000000000000000000..1072a50f468dda3c90c889c31424b7c290eb1a13 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/dimgrey.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/dodgerblue.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/dodgerblue.png new file mode 100644 index 0000000000000000000000000000000000000000..fe422eecde9ec9f1fcac762bd81a23b3fa3abde7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/dodgerblue.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/ellipse.PNG b/zh-cn/application-dev/reference/arkui-js-lite/figures/ellipse.PNG new file mode 100644 index 0000000000000000000000000000000000000000..d0379dfc66b4d2151dae49beeb8af38c774381aa Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/ellipse.PNG differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/firebrick.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/firebrick.png new file mode 100644 index 0000000000000000000000000000000000000000..af32ecea68c1cef693bcfa379af5ac28f66c1e14 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/firebrick.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/floralwhite.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/floralwhite.png new file mode 100644 index 0000000000000000000000000000000000000000..5ee9f7e893611dce988b8aa7ccfe3fab4b9d912f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/floralwhite.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/forestgreen.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/forestgreen.png new file mode 100644 index 0000000000000000000000000000000000000000..7cfd4846ca697424582edbfed23ed93ef9e98138 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/forestgreen.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/fuchsia.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/fuchsia.png new file mode 100644 index 0000000000000000000000000000000000000000..6823cbc9203b07abae455b4ee5c7692878c4be72 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/fuchsia.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/gainsboro.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/gainsboro.png new file mode 100644 index 0000000000000000000000000000000000000000..d1d37504e15eb6fccd6b1c8e985d37fcc8ba9875 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/gainsboro.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/gauge.PNG b/zh-cn/application-dev/reference/arkui-js-lite/figures/gauge.PNG new file mode 100644 index 0000000000000000000000000000000000000000..31c0141d716059519377e1f39b9b8305370f239a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/gauge.PNG differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/ghostwhite.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/ghostwhite.png new file mode 100644 index 0000000000000000000000000000000000000000..45467f3e6fc0866b6da0521911bdb5e7d740df29 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/ghostwhite.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/gold.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/gold.png new file mode 100644 index 0000000000000000000000000000000000000000..91a276a7dffb4d98c507e9af6afa1912cca1fed2 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/gold.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/goldenrod.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/goldenrod.png new file mode 100644 index 0000000000000000000000000000000000000000..04ab7decab16cb7341665c2a67e8d5655a7eed6a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/goldenrod.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/gray.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/gray.png new file mode 100644 index 0000000000000000000000000000000000000000..dfcb0c5e259b3f8d7375c21712249c1e847edd67 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/gray.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/green.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/green.png new file mode 100644 index 0000000000000000000000000000000000000000..bc28f5056c679e189543c8ad6fba67fb56db7655 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/green.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/greenyellow.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/greenyellow.png new file mode 100644 index 0000000000000000000000000000000000000000..c89f746719790333bce2bde8c5b8d86102fdfc33 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/greenyellow.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/grey.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/grey.png new file mode 100644 index 0000000000000000000000000000000000000000..dfcb0c5e259b3f8d7375c21712249c1e847edd67 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/grey.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/honeydew.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/honeydew.png new file mode 100644 index 0000000000000000000000000000000000000000..51fb00e10bb5c167506ddfae1689b58e368df340 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/honeydew.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/hotpink.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/hotpink.png new file mode 100644 index 0000000000000000000000000000000000000000..cbc1d312680f479e8c443476ea39eaf1e8a16e55 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/hotpink.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/image-animator.gif b/zh-cn/application-dev/reference/arkui-js-lite/figures/image-animator.gif new file mode 100644 index 0000000000000000000000000000000000000000..8321366bdb79b9e6530d53b0f45a6465ae7b967d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/image-animator.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/indianred.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/indianred.png new file mode 100644 index 0000000000000000000000000000000000000000..069f570291be858a1768b75719a4a6adbd1bdef8 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/indianred.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/indigo.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/indigo.png new file mode 100644 index 0000000000000000000000000000000000000000..db83d39f98583ee653ee39b0237eb55961e539c7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/indigo.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/ivory.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/ivory.png new file mode 100644 index 0000000000000000000000000000000000000000..ff0aa71de78cb461a6602398ee915c677efdf3d4 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/ivory.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/khaki.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/khaki.png new file mode 100644 index 0000000000000000000000000000000000000000..3fca22c329e9dc9ef73eee20757eac4ce7386842 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/khaki.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lavender.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/lavender.png new file mode 100644 index 0000000000000000000000000000000000000000..44e4d991524bd0ef88a0dd10f204e022dd9d0621 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lavender.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lavenderblush.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/lavenderblush.png new file mode 100644 index 0000000000000000000000000000000000000000..5b22707e37ec772dc08a961e557a937862210167 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lavenderblush.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lawngreen.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/lawngreen.png new file mode 100644 index 0000000000000000000000000000000000000000..41be1a646e14511b5d177d11a7bce10deaee5bc9 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lawngreen.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lemonchiffon.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/lemonchiffon.png new file mode 100644 index 0000000000000000000000000000000000000000..d77ed21418dc3035feb9f9c8e15815e577d71a90 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lemonchiffon.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lightblue.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightblue.png new file mode 100644 index 0000000000000000000000000000000000000000..7cc96f8f6364b93923f0a88b895fe6b151080932 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightblue.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lightcoral.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightcoral.png new file mode 100644 index 0000000000000000000000000000000000000000..515185ab1b3cf9aaba1204760dae19ab3c112b42 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightcoral.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lightcyan.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightcyan.png new file mode 100644 index 0000000000000000000000000000000000000000..6f929d8ab35b708978d8053047cb56bec4fa83bc Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightcyan.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lightgoldenrodyellow.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightgoldenrodyellow.png new file mode 100644 index 0000000000000000000000000000000000000000..1b0ed50716d897398c1e9a741e08ff5f1b9fd9de Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightgoldenrodyellow.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lightgray.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightgray.png new file mode 100644 index 0000000000000000000000000000000000000000..0a5eb251a8d731dc6a9d8b1f31f904c42fd372c3 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightgray.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lightgreen.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightgreen.png new file mode 100644 index 0000000000000000000000000000000000000000..f89943fc98661a6d2b78b5659c41483308a0c54b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightgreen.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lightpink.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightpink.png new file mode 100644 index 0000000000000000000000000000000000000000..6eb2d41877c85cccfb918b042bc13c81c58ec191 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightpink.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lightsalmon.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightsalmon.png new file mode 100644 index 0000000000000000000000000000000000000000..d87462d1cdc9410e91ee050a53d58e71d1c5f312 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightsalmon.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lightseagreen.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightseagreen.png new file mode 100644 index 0000000000000000000000000000000000000000..e863d7a1c3b9c1ca08bd182dce43c55a4866d59b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightseagreen.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lightskyblue.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightskyblue.png new file mode 100644 index 0000000000000000000000000000000000000000..daa035cea33b810571c18de67e4ac887eeb11850 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightskyblue.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lightslategray.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightslategray.png new file mode 100644 index 0000000000000000000000000000000000000000..2dadb92ce56793e2dd693bfa7d99b0c1168130dc Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightslategray.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lightslategrey.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightslategrey.png new file mode 100644 index 0000000000000000000000000000000000000000..2dadb92ce56793e2dd693bfa7d99b0c1168130dc Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightslategrey.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lightsteelblue.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightsteelblue.png new file mode 100644 index 0000000000000000000000000000000000000000..ac0521001d2513fd69e48ce61e1d1128b9d3a6dd Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightsteelblue.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lightyellow.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightyellow.png new file mode 100644 index 0000000000000000000000000000000000000000..d1ca7dd07fe7812ec1f87bf748595174569a5672 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lightyellow.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lime.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/lime.png new file mode 100644 index 0000000000000000000000000000000000000000..481c833482d38c5f564127c8f412fe3c0275fd24 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lime.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/limegreen.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/limegreen.png new file mode 100644 index 0000000000000000000000000000000000000000..63a8c6adc29d340634ed06a1006a0fb56c991a9d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/limegreen.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/linen.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/linen.png new file mode 100644 index 0000000000000000000000000000000000000000..486baf6be50982404fd1c68a5bc51db45c62046a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/linen.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lite_bar.PNG b/zh-cn/application-dev/reference/arkui-js-lite/figures/lite_bar.PNG new file mode 100644 index 0000000000000000000000000000000000000000..a180cd74fb6455adb495cf0d8471b34c93a9415e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lite_bar.PNG differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/lite_line.PNG b/zh-cn/application-dev/reference/arkui-js-lite/figures/lite_line.PNG new file mode 100644 index 0000000000000000000000000000000000000000..664ade98b38a3b6ac2b3e96dc4af8b75b6749a72 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/lite_line.PNG differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/magenta.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/magenta.png new file mode 100644 index 0000000000000000000000000000000000000000..6823cbc9203b07abae455b4ee5c7692878c4be72 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/magenta.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/maroon.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/maroon.png new file mode 100644 index 0000000000000000000000000000000000000000..1324b43b3f5b8dd0548cf2069c4c532c5284c445 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/maroon.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumaquamarine.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumaquamarine.png new file mode 100644 index 0000000000000000000000000000000000000000..800bf296338fd01962f16a8863c37bfe515ce3be Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumaquamarine.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumblue.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumblue.png new file mode 100644 index 0000000000000000000000000000000000000000..c0df3f4f7d99f0b8c39995133c71d944bc07ea4b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumblue.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumorchid.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumorchid.png new file mode 100644 index 0000000000000000000000000000000000000000..664d13c38389361e61a45870899e2a6f0bfc835f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumorchid.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumpurple.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumpurple.png new file mode 100644 index 0000000000000000000000000000000000000000..848454297b67eb73ab641424badc438433e24479 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumpurple.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumseagreen.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumseagreen.png new file mode 100644 index 0000000000000000000000000000000000000000..984e7a561e661ecefca8b60d5ac239b67f96c98c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumseagreen.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumslateblue.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumslateblue.png new file mode 100644 index 0000000000000000000000000000000000000000..39cf9d01563cf63bee003a47cd88258e860a0757 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumslateblue.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumspringgreen.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumspringgreen.png new file mode 100644 index 0000000000000000000000000000000000000000..56db1024a714f821528656c64e12520311bae8f5 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumspringgreen.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumturquoise.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumturquoise.png new file mode 100644 index 0000000000000000000000000000000000000000..b3c353b6a872d3597b767f4c216b2d16bfc2139b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumturquoise.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumvioletred.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumvioletred.png new file mode 100644 index 0000000000000000000000000000000000000000..00767e63c899eec52c2c732e834bca8d26d348ce Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/mediumvioletred.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/midnightblue.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/midnightblue.png new file mode 100644 index 0000000000000000000000000000000000000000..ac66614c0f277cd722b3d090cb10efb973152b0f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/midnightblue.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/mintcream.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/mintcream.png new file mode 100644 index 0000000000000000000000000000000000000000..64fdda07447707816e8a6238939169f58a4ce58f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/mintcream.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/mistyrose.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/mistyrose.png new file mode 100644 index 0000000000000000000000000000000000000000..6f5fe69b5a5a62b2d2b719b2be0a17a501363918 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/mistyrose.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/moccasin.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/moccasin.png new file mode 100644 index 0000000000000000000000000000000000000000..115cb4c96382681743381aeba099549dc24c2ae5 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/moccasin.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/navajowhite.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/navajowhite.png new file mode 100644 index 0000000000000000000000000000000000000000..a68e61ab120651294310c5e3632ce22d71917a52 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/navajowhite.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/navy.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/navy.png new file mode 100644 index 0000000000000000000000000000000000000000..4e41c2cd90ba17798448d70b493ccceb3ac960f0 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/navy.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/oldlace.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/oldlace.png new file mode 100644 index 0000000000000000000000000000000000000000..ecf361e4c749446160da1e8a07169b21d99f362a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/oldlace.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/olive.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/olive.png new file mode 100644 index 0000000000000000000000000000000000000000..0d386fef5c4fa9faf1b29c7667c7392db250f2eb Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/olive.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/olivedrab.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/olivedrab.png new file mode 100644 index 0000000000000000000000000000000000000000..639f16f8aaf261176b3bc760c2eb616ad2f4aa28 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/olivedrab.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/orange.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/orange.png new file mode 100644 index 0000000000000000000000000000000000000000..9c43caf5fdfd466eafc37b793f509a6bde2b885d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/orange.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/orangered.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/orangered.png new file mode 100644 index 0000000000000000000000000000000000000000..e72165fdf1b24d80f0abde742ad3d848497c6ea7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/orangered.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/orchid.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/orchid.png new file mode 100644 index 0000000000000000000000000000000000000000..9114031e04fc28be59e8c9567c0fcfe81a9cc5cb Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/orchid.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/palegoldenrod.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/palegoldenrod.png new file mode 100644 index 0000000000000000000000000000000000000000..131584c72c082f40e2b466e2706c86a05df375e0 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/palegoldenrod.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/palegreen.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/palegreen.png new file mode 100644 index 0000000000000000000000000000000000000000..891d52276622fd51893634ce26e08bd56f62b782 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/palegreen.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/paleturquoise.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/paleturquoise.png new file mode 100644 index 0000000000000000000000000000000000000000..a618da21cf6c6d32066286e594921c0fc75b5dba Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/paleturquoise.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/palevioletred.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/palevioletred.png new file mode 100644 index 0000000000000000000000000000000000000000..c88212b6818d6d18c77ee497cfcafaf661a70d52 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/palevioletred.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/papayawhip.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/papayawhip.png new file mode 100644 index 0000000000000000000000000000000000000000..4b1948de8581602c6c5879c03d68c14f06eccd00 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/papayawhip.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/peachpuff.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/peachpuff.png new file mode 100644 index 0000000000000000000000000000000000000000..1821f9c40ad9d24dc10dc662ecbe7936c9e10633 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/peachpuff.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/peru.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/peru.png new file mode 100644 index 0000000000000000000000000000000000000000..3ca3e045717379bb09fa8d13ea0d42019bf546f2 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/peru.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/pink.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/pink.png new file mode 100644 index 0000000000000000000000000000000000000000..5c5e360f249a2002ba68ad9b94bd7f66f5d6aab1 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/pink.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/plum.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/plum.png new file mode 100644 index 0000000000000000000000000000000000000000..1e0bad2b2bfed2559e53a8bc21162e6163ec8434 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/plum.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/powderblue.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/powderblue.png new file mode 100644 index 0000000000000000000000000000000000000000..8b3eec4e46f6a29dc47694940ceaef1cfa1314af Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/powderblue.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/progress.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/progress.png new file mode 100644 index 0000000000000000000000000000000000000000..7edb3bedb97ee4b203cd35a6ef6642740f410846 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/progress.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/purple.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/purple.png new file mode 100644 index 0000000000000000000000000000000000000000..8bc3583f82d21c8bec0c70b2da36ed05723fd9a7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/purple.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/rebeccapurple.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/rebeccapurple.png new file mode 100644 index 0000000000000000000000000000000000000000..6a64534a0a867d44cf81c8a34c9981b5fbaf5faf Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/rebeccapurple.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/red.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/red.png new file mode 100644 index 0000000000000000000000000000000000000000..309d1c46f8bc396df5eaed381a5ffa2f0389d602 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/red.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/rosybrown.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/rosybrown.png new file mode 100644 index 0000000000000000000000000000000000000000..adca00e684afb79ff4f21313d0586025576a8be1 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/rosybrown.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/royalblue.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/royalblue.png new file mode 100644 index 0000000000000000000000000000000000000000..69cb300d4bc8decee06c7fb64b03a24287865a8f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/royalblue.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/saddlebrown.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/saddlebrown.png new file mode 100644 index 0000000000000000000000000000000000000000..5d0ae86ad14ff863511a10ecc1a85b273e826dfc Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/saddlebrown.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/salmon.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/salmon.png new file mode 100644 index 0000000000000000000000000000000000000000..b80a6c31cdb287c35965c7841aa97711d79b371c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/salmon.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/sample1.gif b/zh-cn/application-dev/reference/arkui-js-lite/figures/sample1.gif new file mode 100644 index 0000000000000000000000000000000000000000..6168a14aa67c866abf6185ba3a3c2ae9f595153c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/sample1.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/sample_css.PNG b/zh-cn/application-dev/reference/arkui-js-lite/figures/sample_css.PNG new file mode 100644 index 0000000000000000000000000000000000000000..43c345e521bd9c87a9fb6da469548716cd20f918 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/sample_css.PNG differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/sandybrown.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/sandybrown.png new file mode 100644 index 0000000000000000000000000000000000000000..c952585d8032733700b57ce1a919d71ce9a4b58b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/sandybrown.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/seagreen.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/seagreen.png new file mode 100644 index 0000000000000000000000000000000000000000..858c4187d3a2874f651adc09dcae9a32f8407d86 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/seagreen.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/seashell.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/seashell.png new file mode 100644 index 0000000000000000000000000000000000000000..c0b21ed6b44c2f756458137f931873f540c16e5f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/seashell.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/sienna.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/sienna.png new file mode 100644 index 0000000000000000000000000000000000000000..bdb02fdda28a155e2f622eeea2ff820144780e50 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/sienna.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/silver.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/silver.png new file mode 100644 index 0000000000000000000000000000000000000000..0491d350277cd67d7774e3761164b9dd7038a117 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/silver.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/skyblue.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/skyblue.png new file mode 100644 index 0000000000000000000000000000000000000000..1c4f9ae52153198f8690a1066fe66ba8c7bd1ee1 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/skyblue.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/slateblue.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/slateblue.png new file mode 100644 index 0000000000000000000000000000000000000000..87915df37741dacfe9448bfebccf5a88d3ca2a76 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/slateblue.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/slategray.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/slategray.png new file mode 100644 index 0000000000000000000000000000000000000000..6e4476c4791e37d4681f8e12313ae1cad0887c1b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/slategray.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/slider.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/slider.png new file mode 100644 index 0000000000000000000000000000000000000000..d0167fe6773371fa70d8bf32c3a3953ed1e1455b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/slider.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/smoothOff.PNG b/zh-cn/application-dev/reference/arkui-js-lite/figures/smoothOff.PNG new file mode 100644 index 0000000000000000000000000000000000000000..c699e78774fadbd8da8c0cc290e88294d445aa6f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/smoothOff.PNG differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/smoothOn.PNG b/zh-cn/application-dev/reference/arkui-js-lite/figures/smoothOn.PNG new file mode 100644 index 0000000000000000000000000000000000000000..b7a5a2a819eeafeb000c00bd7009a02e5fe1bbe5 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/smoothOn.PNG differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/snow.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/snow.png new file mode 100644 index 0000000000000000000000000000000000000000..283cf90b3828b36af6fb3a746e806f6715053310 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/snow.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/springgreen.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/springgreen.png new file mode 100644 index 0000000000000000000000000000000000000000..93825b7fe53a0794751ee4aa3ca46300c404835e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/springgreen.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/sssssss.PNG b/zh-cn/application-dev/reference/arkui-js-lite/figures/sssssss.PNG new file mode 100644 index 0000000000000000000000000000000000000000..e108f5f8f2e096b319ef5097145ab43f2ad97594 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/sssssss.PNG differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/steelblue.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/steelblue.png new file mode 100644 index 0000000000000000000000000000000000000000..a9aba5f67b94427168fade014542532431e28a2e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/steelblue.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/swiper.gif b/zh-cn/application-dev/reference/arkui-js-lite/figures/swiper.gif new file mode 100644 index 0000000000000000000000000000000000000000..2ec52b162dcfdd39c2d2f5a7be4106321935b010 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/swiper.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/tan.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/tan.png new file mode 100644 index 0000000000000000000000000000000000000000..b162dbf0a6c890a03ea1aa0b28bdb454651b697c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/tan.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/teal.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/teal.png new file mode 100644 index 0000000000000000000000000000000000000000..93299fc38d761e5251673210c364f6825e319153 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/teal.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/thistle.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/thistle.png new file mode 100644 index 0000000000000000000000000000000000000000..d62fc7767f7b2e0e8d0d7fed57e30bdf6a6a332f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/thistle.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/tomato.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/tomato.png new file mode 100644 index 0000000000000000000000000000000000000000..6d795f1618b1546c94266548069eccf9e9af2e01 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/tomato.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/turquoise.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/turquoise.png new file mode 100644 index 0000000000000000000000000000000000000000..a33c4fce8448e2127b21e277437195ce0002766b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/turquoise.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/violet.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/violet.png new file mode 100644 index 0000000000000000000000000000000000000000..e9a0799a203fdd7bd41fa5175585dc170a20156e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/violet.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/wheat.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/wheat.png new file mode 100644 index 0000000000000000000000000000000000000000..8a5c7039b580128e75299672dc5438151dcf3572 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/wheat.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/white.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/white.png new file mode 100644 index 0000000000000000000000000000000000000000..56d32d4cd371c5374b133cb81c9c077aaf7b110d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/white.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/whitesmoke.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/whitesmoke.png new file mode 100644 index 0000000000000000000000000000000000000000..6dc88e656c293c2e65939e4a793684488dfc81be Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/whitesmoke.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/yellow.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/yellow.png new file mode 100644 index 0000000000000000000000000000000000000000..b54dbc2391d1a8f16312dd02dc3d65a35ea2626f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/yellow.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/yellowgreen.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/yellowgreen.png new file mode 100644 index 0000000000000000000000000000000000000000..f89e20a55ba1e81f2cbda2bd0241edefadbe7149 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/yellowgreen.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789168.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789168.png new file mode 100644 index 0000000000000000000000000000000000000000..4481b08ab897619b408425f9bfe0fd5b1fcb6ef0 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789168.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789172.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789172.png new file mode 100644 index 0000000000000000000000000000000000000000..9a73bd33782f06a704ed9b288226dfa381d1d57c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789172.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789180.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789180.png new file mode 100644 index 0000000000000000000000000000000000000000..6e58c669a2976297f71d35c304e988c2884e7dc0 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789180.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789184.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789184.png new file mode 100644 index 0000000000000000000000000000000000000000..5113bc6bad4f88bc2558aae304394e00e107ce88 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789184.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789188.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789188.png new file mode 100644 index 0000000000000000000000000000000000000000..4d0696a9ade017acbbdfb8812dafdec5d715cac5 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789188.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789196.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789196.png new file mode 100644 index 0000000000000000000000000000000000000000..ee003430ca365892a94c0dbe3e7ba0879f83059d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789196.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789296.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789296.png new file mode 100644 index 0000000000000000000000000000000000000000..f627659cef03f443e01fb28b44ceb9363369b8d8 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380789296.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948700.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948700.png new file mode 100644 index 0000000000000000000000000000000000000000..8f6b4abcc27039c624bd21aad775db7c47a22dea Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948700.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948704.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948704.png new file mode 100644 index 0000000000000000000000000000000000000000..151ef990edbb33e1f54632609990f6c540149a5e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948704.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948708.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948708.png new file mode 100644 index 0000000000000000000000000000000000000000..e061801d6eeb27d7fee0b287414e512559a87ea9 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948708.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948712.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948712.png new file mode 100644 index 0000000000000000000000000000000000000000..56c65edbcd66a2ebe9d8ef35c55eba90652bca0f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948712.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948716.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948716.png new file mode 100644 index 0000000000000000000000000000000000000000..db54e678d8c42daca3e56dd85567c9978a9657c8 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948716.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948720.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948720.png new file mode 100644 index 0000000000000000000000000000000000000000..f59a10b44b9e9793bc3a9134f6c4633c8cfb49ce Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948720.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948828.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948828.png new file mode 100644 index 0000000000000000000000000000000000000000..f304daf1f80c86ca6f415e4f7a49b17ca20dae04 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001380948828.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108312.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108312.png new file mode 100644 index 0000000000000000000000000000000000000000..3917378fdcb47448e7daf8ae197e6d033fd345e9 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108312.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108316.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108316.png new file mode 100644 index 0000000000000000000000000000000000000000..4c8300af3bdf43e4d2192699b5ed4065fef451c0 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108316.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108320.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108320.png new file mode 100644 index 0000000000000000000000000000000000000000..3404b29dff12b910ae1be71ebf762252895468a8 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108320.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108324.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108324.png new file mode 100644 index 0000000000000000000000000000000000000000..dfee4f8cddcddd2ada89cb6d7e812fd0739d9cb8 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108324.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108328.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108328.png new file mode 100644 index 0000000000000000000000000000000000000000..33787429dd3205f9faac254950e95c097bd63b21 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108328.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108332.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108332.png new file mode 100644 index 0000000000000000000000000000000000000000..67959174e9b810b9278a7940bc097ac0c0738c7e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108332.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108420.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108420.png new file mode 100644 index 0000000000000000000000000000000000000000..3ecdf0c714fa633f03db339626f51e62318cbf82 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108420.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108436.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108436.png new file mode 100644 index 0000000000000000000000000000000000000000..f6288a0361793fbbce554fd293831fae4bcefc9d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381108436.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268264.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268264.png new file mode 100644 index 0000000000000000000000000000000000000000..0c8973bcb7d55910c6702fe6b9b54506ad3b3727 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268264.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268268.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268268.png new file mode 100644 index 0000000000000000000000000000000000000000..3cc02a6196604a6a3d64b9961c04aaaa51dc829e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268268.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268272.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268272.png new file mode 100644 index 0000000000000000000000000000000000000000..658dca4b52032016c15f77a94b3ef76c093b1d2c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268272.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268276.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268276.png new file mode 100644 index 0000000000000000000000000000000000000000..8192453ec25d486b3923da4a25b0a6fe5034d869 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268276.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268280.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268280.png new file mode 100644 index 0000000000000000000000000000000000000000..2f786e33181995c2b5bf5f835df4557ff3f7e9b4 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268280.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268284.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268284.png new file mode 100644 index 0000000000000000000000000000000000000000..9ac4a39e925322831752617b71a77d040626d251 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268284.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268388.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268388.png new file mode 100644 index 0000000000000000000000000000000000000000..366ab30f3e3f9f4b7e8b579b06cd84a76b2bfabc Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001381268388.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431148353.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431148353.png new file mode 100644 index 0000000000000000000000000000000000000000..e89a1b24da145cf480cceb28ed7249b717e614bf Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431148353.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431148357.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431148357.png new file mode 100644 index 0000000000000000000000000000000000000000..68562c1006ec7c61c49c24aec99ecfd173ca055a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431148357.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431148361.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431148361.png new file mode 100644 index 0000000000000000000000000000000000000000..bd4f47314f89fa4bbbd2d14527dd250b5e3e141b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431148361.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431148365.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431148365.png new file mode 100644 index 0000000000000000000000000000000000000000..42efd9018bc05408596a768cbbe309f1e46273d7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431148365.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431148369.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431148369.png new file mode 100644 index 0000000000000000000000000000000000000000..3108e0436219c1c3a7335679cdfea962c49f454d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431148369.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431148457.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431148457.png new file mode 100644 index 0000000000000000000000000000000000000000..91c55d3677922b76ac78c4e56c87ef90b5b31fc2 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431148457.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308057.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308057.png new file mode 100644 index 0000000000000000000000000000000000000000..cc1dc87c79f827c8bb5be3f3771c37f4cb8b214e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308057.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308061.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308061.png new file mode 100644 index 0000000000000000000000000000000000000000..1362b8a3d98f4edf36420d3799f01476817e43d4 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308061.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308065.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308065.png new file mode 100644 index 0000000000000000000000000000000000000000..2f9a8bacc0f78cb141820e8188d4ae5ef03dc7c1 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308065.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308073.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308073.png new file mode 100644 index 0000000000000000000000000000000000000000..44ae627d6e40dd4b297eccdcf1c5dceef5a08d82 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308073.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308077.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308077.png new file mode 100644 index 0000000000000000000000000000000000000000..f4e18dbe51e815ccdfc6f594e3424850c3b93a12 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308077.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308169.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308169.png new file mode 100644 index 0000000000000000000000000000000000000000..612bc55f4aa5e832133801edf61cef01ffd1bc64 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308169.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308185.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308185.png new file mode 100644 index 0000000000000000000000000000000000000000..3dccd46b21e76a7bbbaabc1ab77a29bd72ae850d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431308185.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388505.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388505.png new file mode 100644 index 0000000000000000000000000000000000000000..47f90714bcb37e4df1b698503db6893d6c2a98c4 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388505.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388513.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388513.png new file mode 100644 index 0000000000000000000000000000000000000000..072d846a3cd629316cd0dcf25d5e9e1e1d3e0dc4 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388513.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388517.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388517.png new file mode 100644 index 0000000000000000000000000000000000000000..5b526bdf7cd539297715bbcddbbd505b7c683695 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388517.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388521.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388521.png new file mode 100644 index 0000000000000000000000000000000000000000..1d5aedb22cb51d00b176f44c5ac5f3ad29d843f2 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388521.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388525.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388525.png new file mode 100644 index 0000000000000000000000000000000000000000..1d71cee4618f1f2822cea1031c9b0e5d602e0a9b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388525.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388529.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388529.png new file mode 100644 index 0000000000000000000000000000000000000000..8253c65764c8d74e0a25404aa62fdd69d43f3c26 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388529.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388581.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388581.png new file mode 100644 index 0000000000000000000000000000000000000000..5ccdc532cb219f1175708b11241a37d912e2ec2e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388581.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388637.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388637.png new file mode 100644 index 0000000000000000000000000000000000000000..f9db5c31c8eae66244cd3f6e11336f72284bb2a6 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431388637.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548105.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548105.png new file mode 100644 index 0000000000000000000000000000000000000000..5da42e3e14d601745274cb62d914c6600620bb25 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548105.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548109.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548109.png new file mode 100644 index 0000000000000000000000000000000000000000..63b480df9e9700601da85abef015c8326095851f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548109.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548113.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548113.png new file mode 100644 index 0000000000000000000000000000000000000000..63f343e89f62b15c117e0148c87ac049308c3117 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548113.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548117.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548117.png new file mode 100644 index 0000000000000000000000000000000000000000..6afdd1b39e4bcb3664c7664a55b47b8537f4aeaa Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548117.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548121.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548121.png new file mode 100644 index 0000000000000000000000000000000000000000..d6bbab16659f4b34b38a714510665ea7fd309055 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548121.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548125.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548125.png new file mode 100644 index 0000000000000000000000000000000000000000..fea0122d3ef81899a02199c6cb265a099ad6c44f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548125.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548233.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548233.png new file mode 100644 index 0000000000000000000000000000000000000000..4cef59797fd8b9650c398562ac0b473485a9274b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/zh-cn_image_0000001431548233.png differ diff --git "a/zh-cn/application-dev/reference/arkui-js-lite/figures/\345\212\250\347\224\273\346\240\267\345\274\217demo1.gif" "b/zh-cn/application-dev/reference/arkui-js-lite/figures/\345\212\250\347\224\273\346\240\267\345\274\217demo1.gif" new file mode 100644 index 0000000000000000000000000000000000000000..fc1eadbb05520daa6d79779683db96d0afe7cbdd Binary files /dev/null and "b/zh-cn/application-dev/reference/arkui-js-lite/figures/\345\212\250\347\224\273\346\240\267\345\274\217demo1.gif" differ diff --git "a/zh-cn/application-dev/reference/arkui-js-lite/figures/\345\212\250\347\224\273\346\240\267\345\274\217demo2.gif" "b/zh-cn/application-dev/reference/arkui-js-lite/figures/\345\212\250\347\224\273\346\240\267\345\274\217demo2.gif" new file mode 100644 index 0000000000000000000000000000000000000000..c3d337edf8e35352dcc9d9b9919019e1f7ec4d96 Binary files /dev/null and "b/zh-cn/application-dev/reference/arkui-js-lite/figures/\345\212\250\347\224\273\346\240\267\345\274\217demo2.gif" differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-common-attributes.md b/zh-cn/application-dev/reference/arkui-js-lite/js-common-attributes.md new file mode 100644 index 0000000000000000000000000000000000000000..36637b58e4af2013c749aadb93fc173bcfada4d7 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-common-attributes.md @@ -0,0 +1,28 @@ +# 通用属性 + + +## 常规属性 + +常规属性指的是组件普遍支持的用来设置组件基本标识和外观显示特征的属性。 + +| 名称 | 类型 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | +| id | string | 否 | 组件的唯一标识。 | +| style | string | 否 | 组件的样式声明。 | +| class | string | 否 | 组件的样式类，用于引用样式表。 | +| ref | string | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | + + +## 渲染属性 + +组件普遍支持的用来设置组件是否渲染的属性。 + +| 名称 | 类型 | 描述 | +| -------- | -------- | -------- | +| for | Array | 根据设置的数据列表，展开当前元素。 | +| if | boolean | 根据设置的boolean值，添加或移除当前元素。 | +| show | boolean | 根据设置的boolean值，显示或隐藏当前元素。 | + +> **说明：** +> +> 属性和样式不能混用，不能在属性字段中进行样式设置。 diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-common-events.md b/zh-cn/application-dev/reference/arkui-js-lite/js-common-events.md new file mode 100644 index 0000000000000000000000000000000000000000..b97c3cc525ce41b8bc8a1a9f4d1e3ecc1b13e743 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-common-events.md @@ -0,0 +1,18 @@ +# 通用事件 + + +相对于私有事件，大部分组件都可以绑定如下事件。 + + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| click | - | 点击动作触发该事件。 | +| longpress | - | 长按动作触发该事件。 | +| swipe5+ | SwipeEvent | 组件上快速滑动后触发。 | + + + **表6** SwipeEvent 基础事件对象属性列表（继承BaseEvent） + +| 属性 | 类型 | 说明 | +| -------- | -------- | -------- | +| direction | string | 滑动方向，可能值有：
1. left：向左滑动；
2. right：向右滑动；
3. up：向上滑动；
4. down：向下滑动。 | diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-common-styles.md b/zh-cn/application-dev/reference/arkui-js-lite/js-common-styles.md new file mode 100644 index 0000000000000000000000000000000000000000..48e1311e360318cab2a240d45d8e7075c5c5605b --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-common-styles.md @@ -0,0 +1,187 @@ +# 通用样式 + + +组件普遍支持的可以在style或css中设置组件外观样式。 + + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | <length> \| <percentage>5+ | - | 否 | 设置组件自身的宽度。

未设置时组件宽度默认为0。 | +| height | <length> \| <percentage>5+ | - | 否 | 设置组件自身的高度。

未设置时组件高度默认为0。 | +| padding | <length> | 0 | 否 | 使用简写属性设置所有的内边距属性。
  该属性可以有1到4个值：
- 指定一个值时，该值指定四个边的内边距。
- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。
- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | +| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | +| margin | <length> \| <percentage>5+ | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
- 只有一个值时，这个值会被指定给全部的四个边。
- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | +| margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | 否 | 设置左、上、右、下外边距属性。 | +| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | +| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | +| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | +| background-color | <color> | - | 否 | 设置背景颜色。 | +| opacity5+ | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | +| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | +| [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | + + +> **说明：** +> 通用样式都不是必填项。 +> +> 目前，样式支持的颜色格式如下： +> - rgb(255, 255, 255) +> +> - rgba(255, 255, 255, 1.0) +> +> - HEX格式：\#rrggbb，\#aarrggbb +> +> - 枚举格式：black，white等，详见 **表1** 当前支持的颜色枚举。Script脚本中不支持枚举格式。 + + + **表1** 当前支持的颜色枚举 + +| 枚举名称 | 对应颜色 | 颜色 | +| -------- | -------- | -------- | +| 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/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-chart.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-chart.md new file mode 100644 index 0000000000000000000000000000000000000000..20bed6b363ea29e67f3229d0890ef2188f0417ed --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-chart.md @@ -0,0 +1,272 @@ +# chart + + +图表组件，用于呈现线形图、柱状图界面。 + + +## 子组件 + +不支持。 + + +## 属性 + +| 名称 | 类型 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | +| type | string | 否 | 设置图表类型（不支持动态修改），可选项有：
- bar：柱状图。
- line：线形图。
默认值：line | +| options | ChartOptions | 是 | 图表参数设置，柱状图和线形图必须设置参数设置。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改） | +| datasets | Array<ChartDataset> | 是 | 数据集合，柱状图和线形图必须设置数据集合。可以设置多条数据集及其背景色。 | +| id | string | 否 | 组件的唯一标识。 | +| style | string | 否 | 组件的样式声明。 | +| class | string | 否 | 组件的样式类，用于引用样式表。 | +| ref | string | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | + + **表2** ChartOptions + +| 名称 | 类型 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | +| xAxis | ChartAxis | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。 | +| yAxis | ChartAxis | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。 | +| series | ChartSeries | 否 | 数据序列参数设置。可以设置：
1. 线的样式，如线宽、是否平滑；
2. 设置线最前端位置白点的样式和大小。
**说明：**
仅线形图支持。 | + + **表3** ChartDataset + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| backgroundColor(deprecated) | <color> | \#ff6384 | 否 | 设置线或柱的颜色（不推荐使用）。 | +| strokeColor | <color> | \#ff6384 | 否 | 线条颜色。仅线形图支持。 | +| fillColor | <color> | \#ff6384 | 否 | 填充颜色。线形图表示填充的渐变颜色。 | +| data | Array<number> | - | 是 | 设置绘制线或柱中的点集。 | +| gradient | boolean | false | 否 | 设置是否显示填充渐变颜色。仅线形图支持。 | + + **表4** ChartAxis + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| min | number | 0 | 否 | 轴的最小值。
不支持负数。仅线形图支持。 | +| max | number | 100 | 否 | 轴的最大值。
不支持负数。仅线形图支持。 | +| axisTick | number | 10 | 否 | 轴显示的刻度数量。
**说明：**
仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。
因轻量级智能穿戴为整型运行，在除不尽的情况下会有误差产生，具体的表现形式是x轴末尾可能会空出一段。
在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。 | +| display | boolean | false | 否 | 是否显示轴。 | +| color | <color> | \#c0c0c0 | 否 | 轴颜色。 | + + **表5** ChartSeries + +| 名称 | 类型 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | +| lineStyle | ChartLineStyle | 否 | 线样式设置，如线宽、是否平滑。 | +| headPoint | PointStyle | 否 | 线最前端位置白点的样式和大小。 | +| topPoint | PointStyle | 否 | 最高点的样式和大小。 | +| bottomPoint | PointStyle | 否 | 最低点的样式和大小。 | +| loop | ChartLoop | 否 | 设置屏幕显示满时，是否需要重头开始绘制。 | + + **表6** ChartLineStyle + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | <length> | 1px | 否 | 线宽设置。 | +| smooth | boolean | false | 否 | 是否平滑。 | + + **表7** PointStyle + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| shape | string | circle | 否 | 高亮点的形状。可选值为：
- circle：圆形。 | +| size | <length> | 5px | 否 | 高亮点的大小。 | +| strokeWidth | <length> | 1px | 否 | 边框宽度 | +| strokeColor | <color> | \#ff0000 | 否 | 边框颜色。 | +| fillColor | <color> | \#ff0000 | 否 | 填充颜色。 | +| display | boolean | true | 否 | 是否高亮显示。 | + + **表8** ChartLoop + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| margin | <length> | 1 | 否 | 擦除点的个数（最新绘制的点与最老的点之间的横向距离）。注意：轻量设备margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。 | + + + + +## 方法 + +| 方法 | 参数 | 描述 | +| -------- | -------- | -------- | +| append | {
serial: number, // 设置要更新的线形图数据下标
data: Array<number>, // 设置新增的数据
} | 往已有的数据序列中动态添加数据，根据serial指定目标序列，serial为datasets数组的下标，从0开始。注意：不会更新datasets[index].data。仅线形图支持，按横坐标加1递增（与xAxis min/max设置相关）。 | + + +## 事件 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| click | - | 点击动作触发该事件。 | +| longpress | - | 长按动作触发该事件。 | +| swipe5+ | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | + + +## 样式 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | <length> \| <percentage>5+ | - | 否 | 设置组件自身的宽度。

未设置时组件宽度默认为0。 | +| height | <length> \| <percentage>5+ | - | 否 | 设置组件自身的高度。

未设置时组件高度默认为0。 | +| padding | <length> | 0 | 否 | 使用简写属性设置所有的内边距属性。
  该属性可以有1到4个值：
- 指定一个值时，该值指定四个边的内边距。
- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。
- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | +| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | +| margin | <length> \| <percentage>5+ | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
- 只有一个值时，这个值会被指定给全部的四个边。
- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | +| margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | 否 | 设置左、上、右、下外边距属性。 | +| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | +| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | +| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | +| background-color | <color> | - | 否 | 设置背景颜色。 | +| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | +| [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | + +## 示例 + +1. 线形图 + + ```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. 柱状图 + + ```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/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md new file mode 100644 index 0000000000000000000000000000000000000000..4ec840daf2d2d4ecb42929108bba84eccb4edddc --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md @@ -0,0 +1,204 @@ +# image-animator + + +图片帧动画播放器。 + + +## 子组件 + +不支持。 + + +## 属性 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| images | Array<ImageFrame> | - | 是 | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg和bmp。ImageFrame的详细说明请见表1。
**说明：**
使用时需要使用数据绑定的方式，如images = {{images}}，js中声明相应变量：images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]。 | +| iteration | number \| string | infinite | 否 | 设置帧动画播放次数。number表示固定次数，infinite枚举表示无限次数播放。 | +| reverse | boolean | false | 否 | 设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。 | +| fixedsize | boolean | true | 否 | 设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。 | +| duration | string | - | 是 | 设置单次播放时长。单位支持[s(秒)\|ms(毫秒)]，默认单位为ms。 duration为0时，不播放图片。 值改变只会在下一次循环开始时生效。 | +| fillmode5+ | string | forwards | 否 | 指定帧动画执行结束后的状态。可选项有：
- none：恢复初始状态。
- forwards：保持帧动画结束时的状态（在最后一个关键帧中定义）。 | +| id | string | - | 否 | 组件的唯一标识。 | +| style | string | - | 否 | 组件的样式声明。 | +| class | string | - | 否 | 组件的样式类，用于引用样式表。 | +| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | + + **表2** ImageFrame说明 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| src | <uri> | - | 是 | 图片路径。 | +| width | <length> | 0 | 否 | 图片宽度。 | +| height | <length> | 0 | 否 | 图片高度。 | +| top | <length> | 0 | 否 | 图片相对于组件左上角的纵向坐标。 | +| left | <length> | 0 | 否 | 图片相对于组件左上角的横向坐标。 | + + +## 事件 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| stop | - | 帧动画结束时触发。 | +| click | - | 点击动作触发该事件。 | +| longpress | - | 长按动作触发该事件。 | +| swipe5+ | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | + + +## 样式 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | <length> \| <percentage>5+ | - | 否 | 设置组件自身的宽度。

未设置时组件宽度默认为0。 | +| height | <length> \| <percentage>5+ | - | 否 | 设置组件自身的高度。

未设置时组件高度默认为0。 | +| padding | <length> | 0 | 否 | 使用简写属性设置所有的内边距属性。
  该属性可以有1到4个值：
- 指定一个值时，该值指定四个边的内边距。
- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。
- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | +| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | +| margin | <length> \| <percentage>5+ | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
- 只有一个值时，这个值会被指定给全部的四个边。
- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | +| margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | 否 | 设置左、上、右、下外边距属性。 | +| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | +| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | +| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | +| background-color | <color> | - | 否 | 设置背景颜色。 | +| opacity5+ | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | +| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | +| [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | + + +## 方法 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| start | - | 开始播放图片帧动画。再次调用，重新从第1帧开始播放。 | +| pause | - | 暂停播放图片帧动画。 | +| stop | - | 停止播放图片帧动画。 | +| resume | - | 继续播放图片帧。 | +| getState | - | 获取播放状态。可能值有：
- playing：播放中
- paused：已暂停
- stopped：已停止。 | + + +## 示例 + + +```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/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image.md new file mode 100644 index 0000000000000000000000000000000000000000..a44510bb870601a8110e6f0f861b2ccd4513ce7f --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image.md @@ -0,0 +1,48 @@ +# image + + +图片组件，用来渲染展示图片。 + + +## 子组件 + +不支持。 + + +## 属性 + +| 名称 | 类型 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | +| src | string | 否 |
图片的路径，支持的图片格式包括png、jpg。 | +| id | string | 否 | 组件的唯一标识。 | +| style | string | 否 | 组件的样式声明。 | +| class | string | 否 | 组件的样式类，用于引用样式表。 | +| ref | string | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | + + +## 事件 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| click | - | 点击动作触发该事件。 | +| longpress | - | 长按动作触发该事件。 | +| swipe5+ | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | + + +## 样式 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | <length> \| <percentage>5+ | - | 否 | 设置组件自身的宽度。

未设置时组件宽度默认为0。 | +| height | <length> \| <percentage>5+ | - | 否 | 设置组件自身的高度。

未设置时组件高度默认为0。 | +| padding | <length> | 0 | 否 | 使用简写属性设置所有的内边距属性。
  该属性可以有1到4个值：
- 指定一个值时，该值指定四个边的内边距。
- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。
- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | +| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | +| margin | <length> \| <percentage>5+ | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
- 只有一个值时，这个值会被指定给全部的四个边。
- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | +| margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | 否 | 设置左、上、右、下外边距属性。 | +| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | +| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | +| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | +| background-color | <color> | - | 否 | 设置背景颜色。 | +| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | +| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | +| [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-input.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-input.md new file mode 100644 index 0000000000000000000000000000000000000000..8a8a9cd2b5a68b295fb997761fd171b834606623 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-input.md @@ -0,0 +1,62 @@ +# input + + +交互式组件，包括单选框，多选框，按钮。 + + +## 子组件 + +不支持。 + + +## 属性 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| type | string |
button | 否 | input组件类型，可选值为button，checkbox，radio。

button，checkbox，radio不支持动态修改。可选值定义如下：
- button：定义可点击的按钮；
- checkbox：定义多选框；
- radio：定义单选按钮，允许在多个拥有相同name值的选项中选中其中一个； | +| checked | boolean | false | 否 | 当前组件是否选中，仅type为checkbox和radio生效。 | +| name | string | - | 否 | input组件的名称。 | +| value | string | - | 否 | input组件的value值，当类型为radio时必填且相同name值的选项该值唯一。 | +| id | string | - | 否 | 组件的唯一标识。 | +| style | string | - | 否 | 组件的样式声明。 | +| class | string | - | 否 | 组件的样式类，用于引用样式表。 | +| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | + + +## 事件 + +- 当input类型为checkbox、radio时，支持如下事件： + | 名称 | 参数 | 描述 | + | -------- | -------- | -------- | + | change | { checked:true \| false } | checkbox多选框或radio单选框的checked状态发生变化时触发该事件。 | + | click | - | 点击动作触发该事件。 | + | longpress | - | 长按动作触发该事件。 | + | swipe5+ | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | + +- 当input类型为button时，支持如下事件： + | 名称 | 参数 | 描述 | + | -------- | -------- | -------- | + | click | - | 点击动作触发该事件。 | + | longpress | - | 长按动作触发该事件。 | + | swipe5+ | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | + + +## 样式 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | \#ffffff | 否 | 按钮的文本颜色。 | +| font-size | <length> | 30px | 否 | 按钮的文本尺寸。 | +| width | <length> | - | 否 | type为button时，默认值为100px。 | +| height | <length> | - | 否 | type为button时，默认值为50px。 | +| font-family | string | SourceHanSansSC-Regular | 否 | 字体。目前仅支持SourceHanSansSC-Regular 字体。 | +| padding | <length> | 0 | 否 | 使用简写属性设置所有的内边距属性。
  该属性可以有1到4个值：
- 指定一个值时，该值指定四个边的内边距。
- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。
- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | +| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | +| margin | <length> \| <percentage>5+ | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
- 只有一个值时，这个值会被指定给全部的四个边。
- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | +| margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | 否 | 设置左、上、右、下外边距属性。 | +| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | +| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | +| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | +| background-color | <color> | - | 否 | 设置背景颜色。 | +| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | +| [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-marquee.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-marquee.md new file mode 100644 index 0000000000000000000000000000000000000000..a0c7f6b90114b6da59fa6a61394933cfaf9d9d2d --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-marquee.md @@ -0,0 +1,51 @@ +# marquee + + +跑马灯组件，用于展示一段单行滚动的文字。 + + +## 子组件 + +不支持。 + + +## 属性 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| scrollamount | number | 6 | 否 | 跑马灯每次滚动时移动的最大长度。 | +| id | string | - | 否 | 组件的唯一标识。 | +| style | string | - | 否 | 组件的样式声明。 | +| class | string | - | 否 | 组件的样式类，用于引用样式表。 | +| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | + + +## 事件 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| click | - | 点击动作触发该事件。 | +| longpress | - | 长按动作触发该事件。 | +| swipe5+ | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | + + +## 样式 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | \#ffffff


| 否 | 设置跑马灯中文字的文本颜色。 | +| font-size | <length> |
30 | 否 | 设置跑马灯中文字的文本尺寸。 | +| font-family | string |

SourceHanSansSC-Regular | 否 |

字体。目前仅支持SourceHanSansSC-Regular 字体。 | +| width | <length> \| <percentage>5+ | - | 否 | 设置组件自身的宽度。

未设置时组件宽度默认为0。 | +| height | <length> \| <percentage>5+ | - | 否 | 设置组件自身的高度。

未设置时组件高度默认为0。 | +| padding | <length> | 0 | 否 | 使用简写属性设置所有的内边距属性。
  该属性可以有1到4个值：
- 指定一个值时，该值指定四个边的内边距。
- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。
- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | +| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | +| margin | <length> \| <percentage>5+ | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
- 只有一个值时，这个值会被指定给全部的四个边。
- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | +| margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | 否 | 设置左、上、右、下外边距属性。 | +| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | +| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | +| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | +| background-color | <color> | - | 否 | 设置背景颜色。 | +| opacity5+ | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | +| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | +| [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-picker-view.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-picker-view.md new file mode 100644 index 0000000000000000000000000000000000000000..ba53345a62e8f6c0a0f7bf205793026838040dc0 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-picker-view.md @@ -0,0 +1,141 @@ +# picker-view + +嵌入页面的滑动选择器。 + + +## 子组件 + +不支持。 + + +## 属性 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| type | string | text | 否 | 设置滑动选择器的类型，该属性不支持动态修改，可选项有：
- text：文本选择器。
- time：时间选择器。 | +| id | string | - | 否 | 组件的唯一标识。 | +| style | string | - | 否 | 组件的样式声明。 | +| class | string | - | 否 | 组件的样式类，用于引用样式表。 | +| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | + +文本选择器：type=text + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| range | Array | - | 否 | 设置文本选择器的取值范围。
使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：["15", "20", "25"]。 | +| selected | string | 0 | 否 | 设置文本选择器的默认选择值，该值需要为range的索引。 | + +时间选择器：type=time + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| selected | string | 00:00 | 否 | 设置时间选择器的默认取值，格式为 HH:mm；
| + + +## 事件 + +type=text： + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | { newValue: newValue, newSelected: newSelected } | 文本选择器选定值后触发该事件。 | + +type=time： + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | { hour: hour, minute: minute} | 时间选择器选定值后触发该事件。
| + + +## 样式 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | \#808080
| 否 | 候选项字体颜色。 | +| font-size | <length> | 30px
| 否 | 候选项字体尺寸，类型length，单位px。 | +| selected-color | <color> | \#ffffff
| 否 | 选中项字体颜色。 | +| selected-font-size | <length> | 38px
| 否 | 选中项字体尺寸，类型length，单位px。 | +| selected-font-family | string | HYQiHei-65S | 否 | 选中项字体类型。 | +| font-family | string |
HYQiHei-65S | 否 | 选项字体类型。 | +| width | <length> \| <percentage>5+ | - | 否 | 设置组件自身的宽度。

未设置时组件宽度默认为0。 | +| height | <length> \| <percentage>5+ | - | 否 | 设置组件自身的高度。

未设置时组件高度默认为0。 | +| padding | <length> | 0 | 否 | 使用简写属性设置所有的内边距属性。
  该属性可以有1到4个值：
- 指定一个值时，该值指定四个边的内边距。
- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。
- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | +| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | +| margin | <length> \| <percentage>5+ | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
- 只有一个值时，这个值会被指定给全部的四个边。
- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | +| margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | 否 | 设置左、上、右、下外边距属性。 | +| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | +| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | +| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | +| background-color | <color> | - | 否 | 设置背景颜色。 | +| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | +| [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | + + +## 示例 + + +```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)}`; + }, +} +``` + +![sssssss](figures/sssssss.PNG) diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-progress.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-progress.md new file mode 100644 index 0000000000000000000000000000000000000000..3b9006219ce2622b38f89bb1663d9eedde661232 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-progress.md @@ -0,0 +1,80 @@ +# progress + + +进度条，用于显示内容加载或操作处理进度。 + + +## 子组件 + +不支持。 + + +## 属性 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| type | string | horizontal | 否 | 设置进度条的类型，该属性不支持动态修改，可选值为：
- horizontal：线性进度条；
- arc：弧形进度条。 | +| id | string | - | 否 | 组件的唯一标识。 | +| style | string | - | 否 | 组件的样式声明。 | +| class | string | - | 否 | 组件的样式类，用于引用样式表。 | +| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | + +不同类型的进度条还支持不同的属性： + +- 类型为horizontal时，支持如下属性： + | 名称 | 类型 | 默认值 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | percent | number | 0 | 否 | 当前进度。取值范围为0-100。 | + +- 类型为arc时，支持如下属性： + | 名称 | 类型 | 默认值 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | percent | number | 0 | 否 | 当前进度。取值范围为0-100。 | + + +## 事件 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| click | - | 点击动作触发该事件。 | +| longpress | - | 长按动作触发该事件。 | +| swipe5+ | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | + + +## 样式 + +- type为horizontal，支持如下样式： + + | 名称 | 类型 | 默认值 | 必填 | 描述 | + | ------------ | -------------- | ---------------------------------------------- | ---- | ------------------ | + | color | <color> | \#6b9ac7 | 否 | 设置进度条的颜色。 | + | stroke-width | <length> | 321-4 \| 45+px | 否 | 设置进度条的宽度。 | + +- type为arc，支持如下样式： + + | 名称 | 类型 | 默认值 | 必填 | 描述 | + | ---------------- | -------------- | ------ | ---- | ------------------------------------------------------------ | + | color | <color> | - | 否 | 弧形进度条的颜色。 | + | background-color | <color> | - | 否 | 弧形进度条的背景色。 | + | stroke-width | <length> | - | 否 | 弧形进度条的宽度。
进度条宽度越大，进度条越靠近圆心。即进度条始终在半径区域内。 | + | start-angle | <deg> | 240 | 否 | 弧形进度条起始角度，以时钟0点为基线。范围为0到360（顺时针）。 | + | total-angle | <deg> | 240 | 否 | 弧形进度条总长度，范围为-360到360，负数标识起点到终点为逆时针。 | + | center-x | <length> | - | 否 | 弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-y和radius一起。 | + | center-y | <length> | - | 否 | 弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-x和radius一起。 | + | radius | <length> | - | 否 | 弧形进度条半径，该样式需要和center-x和center-y一起。 | + +除上述样式之外，还支持如下样式： + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | <length> \| <percentage>5+ | - | 否 | 设置组件自身的宽度。
未设置时组件宽度默认为0。 | +| height | <length> \| <percentage>5+ | - | 否 | 设置组件自身的高度。
未设置时组件高度默认为0。 | +| padding | <length> | 0 | 否 | 使用简写属性设置所有的内边距属性。
  该属性可以有1到4个值：
- 指定一个值时，该值指定四个边的内边距。
- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。
- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | +| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | +| margin | <length> \| <percentage>5+ | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
- 只有一个值时，这个值会被指定给全部的四个边。
- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | +| margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | 否 | 设置左、上、右、下外边距属性。 | +| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | +| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | +| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | +| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | +| [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-qrcode.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-qrcode.md new file mode 100644 index 0000000000000000000000000000000000000000..4c1ce42fe498c6606926ee986e3958297ce4963c --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-qrcode.md @@ -0,0 +1,66 @@ +# qrcode + + +生成并显示二维码。 + + +> **说明：** +> +> 本组件从从API version 5 开始支持。 + + +## 子组件 + +不支持。 + + +## 属性 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| value | string | - | 是 | 用来生成二维码的内容。最大长度为256。 | +| id | string | - | 否 | 组件的唯一标识。 | +| style | string | - | 否 | 组件的样式声明。 | +| class | string | - | 否 | 组件的样式类，用于引用样式表。 | +| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | + + +## 事件 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| click | - | 点击动作触发该事件。 | +| longpress | - | 长按动作触发该事件。 | +| swipe5+ | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | + + +## 样式 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | \#000000 | 否 | 二维码颜色 | +| background-color | <color> | \#ffffff | 否 | 二维码背景颜色 | +| width | <length> \| <percentage>5+ | - | 否 | 设置组件自身的宽度。

未设置时组件宽度默认为0。 | +| height | <length> \| <percentage>5+ | - | 否 | 设置组件自身的高度。

未设置时组件高度默认为0。 | +| padding | <length> | 0 | 否 | 使用简写属性设置所有的内边距属性。
  该属性可以有1到4个值：
- 指定一个值时，该值指定四个边的内边距。
- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。
- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | +| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | +| margin | <length> \| <percentage>5+ | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
- 只有一个值时，这个值会被指定给全部的四个边。
- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | +| margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | 否 | 设置左、上、右、下外边距属性。 | +| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | +| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | +| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | +| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | +| [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | + +> **说明：** +> - width和height不一致时，以二者最小值作为二维码的边长。且最终生成的二维码居中显示； +> +>- width和height的最小值为200px。 + + +## 示例 + + +``` + +``` diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-slider.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-slider.md new file mode 100644 index 0000000000000000000000000000000000000000..1357ac470166f59764a6e423e8803fe3e1880224 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-slider.md @@ -0,0 +1,59 @@ +# slider + + +滑动条组件，用来快速调节设置值，如音量、亮度等。 + + +## 子组件 + +不支持。 + + +## 属性 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| min | number | 0 | 否 | 滑动选择器的最小值。 | +| max | number | 100 | 否 | 滑动选择器的最大值。 | +| value | number | 0 | 否 | 滑动选择器的初始值。 | +| id | string | - | 否 | 组件的唯一标识。 | +| style | string | - | 否 | 组件的样式声明。 | +| class | string | - | 否 | 组件的样式类，用于引用样式表。 | +| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | + + +## 事件 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | ChangeEvent | 选择值发生变化时触发该事件。 | +| click | - | 点击动作触发该事件。 | +| longpress | - | 长按动作触发该事件。 | +| swipe5+ | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | + + **表2** ChangeEvent + +| 属性 | 类型 | 说明 | +| -------- | -------- | -------- | +| progress(deprecated5+) | string | 当前slider的进度值。 | +| value5+ | number | 当前slider的进度值。 | + + +## 样式 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | \#000000 | 否 | 滑动条的背景颜色。 | +| selected-color | <color> | \#ffffff | 否 | 滑动条的已选择颜色。 | +| width | <length> \| <percentage>5+ | - | 否 | 设置组件自身的宽度。

未设置时组件宽度默认为0。 | +| height | <length> \| <percentage>5+ | - | 否 | 设置组件自身的高度。

未设置时组件高度默认为0。 | +| padding | <length> | 0 | 否 | 使用简写属性设置所有的内边距属性。
  该属性可以有1到4个值：
- 指定一个值时，该值指定四个边的内边距。
- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。
- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | +| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | +| margin | <length> \| <percentage>5+ | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
- 只有一个值时，这个值会被指定给全部的四个边。
- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | +| margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | 否 | 设置左、上、右、下外边距属性。 | +| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | +| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | +| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | +| background-color | <color> | - | 否 | 设置背景颜色。 | +| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | +| [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-switch.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-switch.md new file mode 100644 index 0000000000000000000000000000000000000000..bfd28ff1fca70f6f7b1049ac4d383e95ef9b3f42 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-switch.md @@ -0,0 +1,48 @@ +# switch + + +开关选择器，通过开关，开启或关闭某个功能。 + + +## 子组件 + +不支持。 + + +## 属性 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| checked | boolean | false | 否 | 是否选中。 | +| id | string | - | 否 | 组件的唯一标识。 | +| style | string | - | 否 | 组件的样式声明。 | +| class | string | - | 否 | 组件的样式类，用于引用样式表。 | +| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | + + +## 事件 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | { checked: checkedValue } | 选中状态改变时触发该事件。 | +| click | - | 点击动作触发该事件。 | +| longpress | - | 长按动作触发该事件。 | +| swipe5+ | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | + + +## 样式 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | <length> \| <percentage>5+ | - | 否 | 设置组件自身的宽度。

未设置时组件宽度默认为0。 | +| height | <length> \| <percentage>5+ | - | 否 | 设置组件自身的高度。

未设置时组件高度默认为0。 | +| padding | <length> | 0 | 否 | 使用简写属性设置所有的内边距属性。
  该属性可以有1到4个值：
- 指定一个值时，该值指定四个边的内边距。
- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。
- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | +| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | +| margin | <length> \| <percentage>5+ | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
- 只有一个值时，这个值会被指定给全部的四个边。
- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | +| margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | 否 | 设置左、上、右、下外边距属性。 | +| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | +| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | +| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | +| background-color | <color> | - | 否 | 设置背景颜色。 | +| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | +| [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-text.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-text.md new file mode 100644 index 0000000000000000000000000000000000000000..390070dcee280173cdc114228a1139089dd2b0a0 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-text.md @@ -0,0 +1,53 @@ +# text + + +文本，用于呈现一段信息。 + + +## 子组件 + +不支持。 + + +## 属性 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | 否 | 组件的唯一标识。 | +| style | string | - | 否 | 组件的样式声明。 | +| class | string | - | 否 | 组件的样式类，用于引用样式表。 | +| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | + + +## 事件 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| click | - | 点击动作触发该事件。 | +| longpress | - | 长按动作触发该事件。 | +| swipe5+ | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | + + +## 样式 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | \#ffffff | 否 | 设置文本的颜色。 | +| font-size | <length> | 30px | 否 | 设置文本的尺寸。
| +| letter-spacing | <length> | 2px | 否 | 设置文本的字符间距。 | +| text-align | string | left | 否 | 设置文本的文本对齐方式，可选值为：
- left：文本左对齐；
- center：文本居中对齐；
- right：文本右对齐； | +| text-overflow | string | clip | 否 | 可选值为：
- clip：将文本根据父容器大小进行裁剪显示；
- ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。 | +| font-family | string | SourceHanSansSC-Regular | 否 | 字体。目前仅支持SourceHanSansSC-Regular 字体。 | +| width | <length> \| <percentage>5+ | - | 否 | 设置组件自身的宽度。

未设置时组件宽度默认为0。 | +| height | <length> \| <percentage>5+ | - | 否 | 设置组件自身的高度。
未设置时组件高度默认为0。 | +| padding | <length> | 0 | 否 | 使用简写属性设置所有的内边距属性。
  该属性可以有1到4个值：
- 指定一个值时，该值指定四个边的内边距。
- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。
- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | +| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | +| margin | <length> \| <percentage>5+ | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
- 只有一个值时，这个值会被指定给全部的四个边。
- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | +| margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | 否 | 设置左、上、右、下外边距属性。 | +| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | +| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | +| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | +| background-color | <color> | - | 否 | 设置背景颜色。 | +| opacity5+ | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | +| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | +| [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-canvas-canvas.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-canvas-canvas.md new file mode 100644 index 0000000000000000000000000000000000000000..2375d62e5ed3e34ccde759bf6b4a7fdbf62a6fcc --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-canvas-canvas.md @@ -0,0 +1,52 @@ +# canvas组件 + + +提供画布组件。用于自定义绘制图形。 + + +## 子组件 + +不支持。 + + +## 属性 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | 否 | 组件的唯一标识。 | +| style | string | - | 否 | 组件的样式声明。 | +| class | string | - | 否 | 组件的样式类，用于引用样式表。 | +| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | + + +## 事件 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| click | - | 点击动作触发该事件。 | +| longpress | - | 长按动作触发该事件。 | +| swipe5+ | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | + + +## 样式 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | <length> \| <percentage>5+ | - | 否 | 设置组件自身的宽度。

未设置时组件宽度默认为0。 | +| height | <length> \| <percentage>5+ | - | 否 | 设置组件自身的高度。

未设置时组件高度默认为0。 | +| padding | <length> | 0 | 否 | 使用简写属性设置所有的内边距属性。
  该属性可以有1到4个值：
- 指定一个值时，该值指定四个边的内边距。
- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。
- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | +| margin | <length> \| <percentage>5+ | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
- 只有一个值时，这个值会被指定给全部的四个边。
- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | +| margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | 否 | 设置左、上、右、下外边距属性。 | +| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | +| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | +| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | +| background-color | <color> | - | 否 | 设置背景颜色。 | +| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | +| [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | + + +## 方法 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| getContext | string  | 获取canvas绘图上下文，参数仅支持“2d”，返回值为2D绘制对象，该对象提供具体的2D绘制操作。详见[CanvasRenderingContext2D对象](js-components-canvas-canvasrenderingcontext2d.md)章节。 | diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-canvas-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-canvas-canvasrenderingcontext2d.md new file mode 100644 index 0000000000000000000000000000000000000000..11681a4e57b8aa451c84a284649b58733f7c5cdc --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-canvas-canvasrenderingcontext2d.md @@ -0,0 +1,365 @@ +# CanvasRenderingContext2D对象 + + +使用CanvasRenderingContext2D在canvas画布组件上进行绘制，绘制对象可以是矩形、文本。 + +**示例：** + +``` + + + + +``` + + +``` +// 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(); + }, +} +``` + + ![zh-cn_image_0000001431548113](figures/zh-cn_image_0000001431548113.png) + + +## fillRect() + +填充一个矩形。 + +**参数：** + +| 参数 | 类型 | 描述 | +| -------- | -------- | -------- | +| x | number | 指定矩形左上角点的x坐标。 | +| y | number | 指定矩形左上角点的y坐标。 | +| width | number | 指定矩形的宽度。 | +| height | number | 指定矩形的高度。 | + +**示例：** + + ![zh-cn_image_0000001431388525](figures/zh-cn_image_0000001431388525.png) + + + ``` + ctx.fillRect(20, 20, 200, 150); + ``` + + +## fillStyle + +指定绘制的填充色。 + +**参数：** + +| 参数 | 类型 | 描述 | +| -------- | -------- | -------- | +| color | <color> | 设置填充区域的颜色。 | + +**示例：** + + ![zh-cn_image_0000001431388505](figures/zh-cn_image_0000001431388505.png) + + + ``` + ctx.fillStyle = '#0000ff'; + ctx.fillRect(20, 20, 150, 100); + ``` + + +## strokeRect() + +绘制具有边框的矩形，矩形内部不填充。 + +**参数：** + +| 参数 | 类型 | 描述 | +| -------- | -------- | -------- | +| x | number | 指定矩形的左上角x坐标。 | +| y | number | 指定矩形的左上角y坐标。 | +| width | number | 指定矩形的宽度。 | +| height | number | 指定矩形的高度。 | + +**示例：** + + ![zh-cn_image_0000001381268264](figures/zh-cn_image_0000001381268264.png) + + + ``` + ctx.strokeRect(30, 30, 200, 150); + ``` + + +## fillText() + +绘制填充类文本。 + +**参数：** + +| 参数 | 类型 | 描述 | +| -------- | -------- | -------- | +| text | string | 需要绘制的文本内容。 | +| x | number | 需要绘制的文本的左下角x坐标。 | +| y | number | 需要绘制的文本的左下角y坐标。 | + +**示例：** + + ![zh-cn_image_0000001431548109](figures/zh-cn_image_0000001431548109.png) + + + ``` + ctx.font = '35px sans-serif'; + ctx.fillText("Hello World!", 20, 60); + ``` + + +## lineWidth + +指定绘制线条的宽度值。 + +**参数：** + +| 参数 | 类型 | 描述 | +| -------- | -------- | -------- | +| lineWidth | number | 设置绘制线条的宽度。 | + +**示例：** + + ![zh-cn_image_0000001431548121](figures/zh-cn_image_0000001431548121.png) + + + ``` + ctx.lineWidth = 5; + ctx.strokeRect(25, 25, 85, 105); + ``` + + +## strokeStyle + +设置描边的颜色。 + +**参数：** + +| 参数 | 类型 | 描述 | +| -------- | -------- | -------- | +| color | <color> | 指定描边使用的颜色 | + +**示例：** + + ![zh-cn_image_0000001380789172](figures/zh-cn_image_0000001380789172.png) + + + ``` + ctx.lineWidth = 10; + ctx.strokeStyle = '#0000ff'; + ctx.strokeRect(25, 25, 155, 105); + ``` + + +### stroke()5+ + +进行边框绘制操作。 + +**示例：** + +![zh-cn_image_0000001431388513](figures/zh-cn_image_0000001431388513.png) + + ``` + ctx.moveTo(25, 25); + ctx.lineTo(25, 105); + ctx.strokeStyle = 'rgb(0,0,255)'; + ctx.stroke(); + ``` + + +### beginPath()5+ + +创建一个新的绘制路径。 + +**示例：** + + ![zh-cn_image_0000001431548125](figures/zh-cn_image_0000001431548125.png) + + + ``` + ctx.beginPath(); + ctx.lineWidth = '6'; + ctx.strokeStyle = '#0000ff'; + ctx.moveTo(15, 80); + ctx.lineTo(280, 160); + ctx.stroke(); + ``` + + +### moveTo()5+ + +路径从当前点移动到指定点。 + +**参数：** + +| 参数 | 类型 | 描述 | +| -------- | -------- | -------- | +| x | number | 指定位置的x坐标。 | +| y | number | 指定位置的y坐标。 | + +**示例：** + + ![zh-cn_image_0000001431388529](figures/zh-cn_image_0000001431388529.png) + + ``` + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.lineTo(280, 160); + ctx.stroke(); + ``` + + +### lineTo()5+ + +从当前点到指定点进行路径连接。 + +**参数：** + +| 参数 | 类型 | 描述 | +| -------- | -------- | -------- | +| x | number | 指定位置的x坐标。 | +| y | number | 指定位置的y坐标。 | + +**示例：** + +![zh-cn_image_0000001431148365](figures/zh-cn_image_0000001431148365.png) + + ``` + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.lineTo(280, 160); + ctx.stroke(); + ``` + + +### closePath()5+ + +结束当前路径形成一个封闭路径。 + +**示例：** + + ![zh-cn_image_0000001381268284](figures/zh-cn_image_0000001381268284.png) + + + ``` + ctx.beginPath(); + ctx.moveTo(30, 30); + ctx.lineTo(110, 30); + ctx.lineTo(70, 90); + ctx.closePath(); + ctx.stroke(); + ``` + + +## font + +设置文本绘制中的字体样式。 + +**参数：** + +| 参数 | 类型 | 描述 | +| -------- | -------- | -------- | +| value | string | 字体样式支持：sans-serif, serif, monospace，该属性默认值为30px HYQiHei-65S。 | + +**示例：** + + ![zh-cn_image_0000001381108328](figures/zh-cn_image_0000001381108328.png) + + + ``` + ctx.font = '30px sans-serif'; + ctx.fillText("Hello World", 20, 60); + ``` + + +## textAlign + +设置文本绘制中的文本对齐方式。 + +**参数：** + +| 参数 | 类型 | 描述 | +| -------- | -------- | -------- | +| align | string | 可选值为：
- left（默认）：文本左对齐；
- right：文本右对齐；
- center：文本居中对齐； | + +**示例：** + + ![zh-cn_image_0000001431388517](figures/zh-cn_image_0000001431388517.png) + + + ``` + 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+ + +绘制弧线路径。 + +**参数：** + +| 参数 | 类型 | 描述 | +| -------- | -------- | -------- | +| x | number | 弧线圆心的x坐标值。 | +| y | number | 弧线圆心的y坐标值。 | +| radius | number | 弧线的圆半径。 | +| startAngle | number | 弧线的起始弧度。 | +| endAngle | number | 弧线的终止弧度。 | +| anticlockwise | boolean | 是否逆时针绘制圆弧。 | + +**示例：** + +![zh-cn_image_0000001381108320](figures/zh-cn_image_0000001381108320.png) + + ``` + ctx.beginPath(); + ctx.arc(100, 75, 50, 0, 6.28); + ctx.stroke(); + ``` + + +### rect()5+ + +创建矩形路径。 + +**参数：** + +| 参数 | 类型 | 描述 | +| -------- | -------- | -------- | +| x | number | 指定矩形的左上角x坐标值。 | +| y | number | 指定矩形的左上角y坐标值。 | +| width | number | 指定矩形的宽度。 | +| height | number | 指定矩形的高度。 | + +**示例：** + +![zh-cn_image_0000001381108312](figures/zh-cn_image_0000001381108312.png) + + ``` + ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) + ctx.stroke(); // Draw it + ``` diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-common-animation.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-common-animation.md new file mode 100644 index 0000000000000000000000000000000000000000..14f9864dd0a2fd63a1ee158668d09b4191b5e626 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-common-animation.md @@ -0,0 +1,63 @@ +# 动画样式 + + +组件普遍支持的可以在style或css中设置的动态的旋转、平移、缩放效果。 + + +| 名称 | 类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| transform | string | - | 详见表1。 | +| animation-name | string | - | 指定\@keyframes，详见表2。 | +| animation-delay | <time> | 0 | 定义动画播放的延迟时间。支持的单位为[s(秒)\|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。 | +| animation-duration | <time> | 0 | 定义一个动画周期。支持的单位为[s(秒)\|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。
**说明：**
animation-duration 样式必须设置，否则时长为 0，则不会播放动画。 | +| animation-iteration-count | number  \| infinite | 1 | 定义动画播放的次数，默认播放一次，可通过设置为infinite无限次播放。 | +| animation-timing-function | string |
linear | 描述动画执行的速度曲线，用于使动画更为平滑。
可选项有：
- linear：表示动画从头到尾的速度都是相同的。
- ease-in：表示动画以低速开始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。
- ease-out：表示动画以低速结束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。
- ease-in-out：表示动画以低速开始和结束，cubic-bezier(0.42, 0.0, 0.58, 1.0)。 | +| animation-fill-mode | string | none | 指定动画开始和结束的状态：
- none：在动画执行之前和之后都不会应用任何样式到目标上。
- forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。 | + + + **表1** transform操作说明 + +| 名称 | 类型 | 描述 | +| -------- | -------- | -------- | +| translateX | <length> | X轴方向平移动画属性 | +| translateY | <length> | Y轴方向平移动画属性 | +| rotate | <deg> \| <rad> | 旋转动画属性 | + +> **说明：** +> 轻量级智能穿戴仅支持原始大小的图片进行旋转。 + + + **表2** \@keyframes属性说明 + +| 名称 | 类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| background-color | <color> | - | 动画执行后应用到组件上的背景颜色。 | +| width | <length> | - | 动画执行后应用到组件上的宽度值。 | +| height | <length> | - | 动画执行后应用到组件上的高度值。 | +| transform | string | - | 定义应用在组件上的变换类型，见表1。 | + + +对于不支持起始值或终止值缺省的情况，可以通过from和to显示指定起始和结束。示例： + + +``` +@keyframes Go +{ + from { + background-color: #f76160; + } + to { + background-color: #09ba07; + } +} +``` + + +![动画样式demo1](figures/动画样式demo1.gif) + + + + + +> **说明：** +> \@keyframes的from/to不支持动态绑定。 diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-div.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-div.md new file mode 100644 index 0000000000000000000000000000000000000000..b5ebdd4b8e12373e0a45e67c377af6cef3d79a85 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-div.md @@ -0,0 +1,151 @@ +# div + + +基础容器，用作页面结构的根节点或将内容进行分组。 + + +## 子组件 + +支持。 + + +## 属性 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | 否 | 组件的唯一标识。 | +| style | string | - | 否 | 组件的样式声明。 | +| class | string | - | 否 | 组件的样式类，用于引用样式表。 | +| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | + + +## 事件 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| click | - | 点击动作触发该事件。 | +| longpress | - | 长按动作触发该事件。 | +| swipe5+ | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | + + +## 样式 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| flex-direction | string | row | 否 | flex容器主轴方向。可选项有：
- column：垂直方向从上到下
- row：水平方向从左到右 | +| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：
- nowrap：不换行，单行显示。
- wrap：换行，多行显示。 | +| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有：
- flex-start：项目位于容器的开头。
- flex-end：项目位于容器的结尾。
- center：项目位于容器的中心。
- space-between：项目位于各行之间留有空白的容器内。
- space-around：项目位于各行之前、之间、之后都留有空白的容器内。 | +| align-items | string | stretch5+
flex-start1-4 | 否 | flex容器当前行的交叉轴对齐格式，可选值为：
- stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。5+
- flex-start：元素向交叉轴起点对齐。
- flex-end：元素向交叉轴终点对齐。
- center：元素在交叉轴居中。 | +| display | string | flex | 否 | 确定该元素视图框的类型，该值暂不支持动态修改。可选值为：
- flex：弹性布局
- none：不渲染此元素 | +| width | <length> \| <percentage>5+ | - | 否 | 设置组件自身的宽度。

未设置时组件宽度默认为0。 | +| height | <length> \| <percentage>5+ | - | 否 | 设置组件自身的高度。

未设置时组件高度默认为0。 | +| padding | <length> | 0 | 否 | 使用简写属性设置所有的内边距属性。
  该属性可以有1到4个值：
- 指定一个值时，该值指定四个边的内边距。
- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。
- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | +| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | +| margin | <length> \| <percentage>5+ | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
- 只有一个值时，这个值会被指定给全部的四个边。
- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | +| margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | 否 | 设置左、上、右、下外边距属性。 | +| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | +| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | +| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | +| background-color | <color> | - | 否 | 设置背景颜色。 | +| opacity5+ | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | +| [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | + + +## 示例 + +1. Flex样式 + + ``` + +
+
+
+
+
+
+
+ ``` + + + ``` + /* 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; + } + ``` + + ![zh-cn_image_0000001381108420](figures/zh-cn_image_0000001381108420.png) + +2. Flex Wrap样式 + + ``` + +
+
+
+
+
+
+
+ ``` + + + ``` + /* 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; + } + ``` + + ![zh-cn_image_0000001431148457](figures/zh-cn_image_0000001431148457.png) diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-list-item.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-list-item.md new file mode 100644 index 0000000000000000000000000000000000000000..902a04866d7d38025a8af5457fbe24b8d13be43e --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-list-item.md @@ -0,0 +1,44 @@ +# list-item + + +<[list](js-components-container-list.md)>的子组件，用来展示列表具体item。 + + +## 子组件 + +支持。 + + +## 属性 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | 否 | 组件的唯一标识。 | +| style | string | - | 否 | 组件的样式声明。 | +| class | string | - | 否 | 组件的样式类，用于引用样式表。 | +| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | + + +## 事件 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| click | - | 点击动作触发该事件。 | +| longpress | - | 长按动作触发该事件。 | +| swipe5+ | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | + + +## 样式 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | <length> \| <percentage>5+ | - | 否 | 设置组件自身的宽度。
未设置时组件宽度默认为0。 | +| height | <length> \| <percentage>5+ | - | 否 | 设置组件自身的高度。
未设置时组件高度默认为0。 | +| padding | <length> | 0 | 否 | 使用简写属性设置所有的内边距属性。
  该属性可以有1到4个值：
- 指定一个值时，该值指定四个边的内边距。
- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | +| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | +| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | +| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | +| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | +| background-color | <color> | - | 否 | 设置背景颜色。 | +| opacity5+ | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | +| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-list.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-list.md new file mode 100644 index 0000000000000000000000000000000000000000..291f725e7aadb9c8c2772d168aff675566607a26 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-list.md @@ -0,0 +1,118 @@ +# list + + +列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。 + + +## 子组件 + +仅支持<[list-item](js-components-container-list-item.md)>。 + + +## 属性 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | 否 | 组件的唯一标识。 | +| style | string | - | 否 | 组件的样式声明。 | +| class | string | - | 否 | 组件的样式类，用于引用样式表。 | +| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | + + +## 事件 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| scrollend | - | 列表滑动已经结束。 | +| click | - | 点击动作触发该事件。 | +| longpress | - | 长按动作触发该事件。 | +| swipe5+ | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | + + +## 样式 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| flex-direction | string | column | 否 | 设置flex容器主轴的方向，指定flex项如何放置在flex容器中，可选值为：
- column：主轴为纵向。
- row：主轴为横向。
其他组件默认值为row，在list组件中默认值为column。轻量级智能穿戴不支持动态修改。 | +| width | <length> \| <percentage>5+ | - | 否 | 设置组件自身的宽度。

未设置时组件宽度默认为0。 | +| height | <length> \| <percentage>5+ | - | 否 | 设置组件自身的高度。

未设置时组件高度默认为0。 | +| padding | <length> | 0 | 否 | 使用简写属性设置所有的内边距属性。
  该属性可以有1到4个值：
- 指定一个值时，该值指定四个边的内边距。
- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。
- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | +| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | +| margin | <length> \| <percentage>5+ | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
- 只有一个值时，这个值会被指定给全部的四个边。
- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | +| margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | 否 | 设置左、上、右、下外边距属性。 | +| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | +| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | +| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | +| background-color | <color> | - | 否 | 设置背景颜色。 | +| opacity5+ | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | +| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | +| [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | + + +## 方法 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| scrollTo | { index: number(指定位置) } | list滑动到指定index的item位置。 | + + +## 示例 + + +```html + +
+ + + {{$item.title}} + {{$item.date}} + + +
+``` + + +```js +// index.js +export default { + data: { + todolist: [{ + title: '刷题', + date: '2021-12-31 10:00:00', + }, { + title: '看电影', + 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; +} +``` + +![zh-cn_image_0000001380789196](figures/zh-cn_image_0000001380789196.png) diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-stack.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-stack.md new file mode 100644 index 0000000000000000000000000000000000000000..27167a410fdb4a8fa6fa202092242d8855c424c4 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-stack.md @@ -0,0 +1,97 @@ +# stack + + +堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。 + + +## 子组件 + +支持。 + + +## 属性 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | 否 | 组件的唯一标识。 | +| style | string | - | 否 | 组件的样式声明。 | +| class | string | - | 否 | 组件的样式类，用于引用样式表。 | +| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | + + +## 事件 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| click | - | 点击动作触发该事件。 | +| longpress | - | 长按动作触发该事件。 | +| swipe5+ | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | + + +## 样式 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | <length> \| <percentage>5+ | - | 否 | 设置组件自身的宽度。

未设置时组件宽度默认为0。 | +| height | <length> \| <percentage>5+ | - | 否 | 设置组件自身的高度。

未设置时组件高度默认为0。 | +| padding | <length> | 0 | 否 | 使用简写属性设置所有的内边距属性。
  该属性可以有1到4个值：
- 指定一个值时，该值指定四个边的内边距。
- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。
- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | +| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | +| margin | <length> \| <percentage>5+ | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
- 只有一个值时，这个值会被指定给全部的四个边。
- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | +| margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | 否 | 设置左、上、右、下外边距属性。 | +| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | +| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | +| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | +| background-color | <color> | - | 否 | 设置背景颜色。 | +| opacity5+ | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | +| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | +| [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 由于绝对定位不支持设置百分比，所以也不支持stack组件的子组件上设置margin。 + + +## 示例 + + +```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; +} +``` + +![zh-cn_image_0000001380789188](figures/zh-cn_image_0000001380789188.png) diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-swiper.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-swiper.md new file mode 100644 index 0000000000000000000000000000000000000000..e9274975dae24e07f80bdc66a98f99d313aa51fd --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-swiper.md @@ -0,0 +1,109 @@ +# swiper + + +滑动容器，提供切换子组件显示的能力。 + + +## 子组件 + +支持除<list>之外的子组件。 + + +## 属性 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| index | number | 0 | 否 | 当前在容器中显示的子组件的索引值。 | +| loop | boolean | true | 否 | 是否开启循环轮播。
| +| duration | number | - | 否 | 子组件切换的动画时长。 | +| vertical | boolean | false | 否 | 是否为纵向滑动，纵向滑动时采用纵向的指示器。
不支持动态修改。 | +| id | string | - | 否 | 组件的唯一标识。 | +| style | string | - | 否 | 组件的样式声明。 | +| class | string | - | 否 | 组件的样式类，用于引用样式表。 | +| ref | string | - | 否 | 用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 | + + +## 事件 + +| 名称 | 参数 | 描述 | +| -------- | -------- | -------- | +| change | { index: currentIndex } | 当前显示的组件索引变化时触发该事件。 | +| click | - | 点击动作触发该事件。 | +| longpress | - | 长按动作触发该事件。 | +| swipe5+ | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | + + +## 样式 + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | <length> \| <percentage>5+ | - | 否 | 设置组件自身的宽度。

未设置时组件宽度默认为0。 | +| height | <length> \| <percentage>5+ | - | 否 | 设置组件自身的高度。

未设置时组件高度默认为0。 | +| padding | <length> | 0 | 否 | 使用简写属性设置所有的内边距属性。
  该属性可以有1到4个值：
- 指定一个值时，该值指定四个边的内边距。
- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。
- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | +| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | +| margin | <length> \| <percentage>5+ | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
- 只有一个值时，这个值会被指定给全部的四个边。
- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | +| margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | 否 | 设置左、上、右、下外边距属性。 | +| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | +| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | +| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | +| background-color | <color> | - | 否 | 设置背景颜色。 | +| opacity5+ | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | +| display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | +| [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | + + +## 示例 + + +```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/zh-cn/application-dev/reference/arkui-js-lite/js-framework-file.md b/zh-cn/application-dev/reference/arkui-js-lite/js-framework-file.md new file mode 100644 index 0000000000000000000000000000000000000000..f79c583bd930c9ba0439b80bef36aadf96d60fc2 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-framework-file.md @@ -0,0 +1,67 @@ +# 文件组织 + + +## 目录结构 + +JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如下： + + **图2** 目录结构   + +![zh-cn_image_0000001431388581](figures/zh-cn_image_0000001431388581.png) + +目录结构中文件分类如下： + +- .hml结尾的HML模板文件，这个文件用来描述当前页面的文件布局结构。 + +- .css结尾的CSS样式文件，这个文件用于描述页面样式。 + +- .js结尾的JS文件，这个文件用于处理页面和用户的交互。 + +各个文件夹的作用： + +- app.js文件用于全局JavaScript逻辑和应用生命周期管理。 + +- pages目录用于存放所有组件页面。 + +- common目录用于存放公共资源文件，比如：媒体资源和JS文件。 + +> **说明：** +> - 如下文件夹是开发保留文件夹，不可重命名： +> +> +> +> +> - 在使用DevEco Studio进行应用开发时，目录结构中的可选文件夹需要开发者根据实际情况自行创建。 + + +## 文件访问规则 + +应用资源可通过绝对路径或相对路径的方式进行访问，本开发框架中绝对路径以"/"开头，相对路径以"./"或"../"。具体访问规则如下： + +- 引用代码文件，需使用相对路径，比如：../common/utils.js。 + +- 引用资源文件，推荐使用绝对路径。比如：/common/xxx.png。 + +- 公共代码文件和资源文件推荐放在common下，通过以上两条规则进行访问。 + +- CSS样式文件中通过url()函数创建<url>数据类型，如：url(/common/xxx.png)。 + +> **说明：** +> 当代码文件A需要引用代码文件B时： +> +> - 如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。 +> +> - 如果代码文件A和文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时，代码文件B的目录会发生变化。 +> +> + + +## 媒体文件格式 + + **表1** 支持的图片格式 + +| 格式 | 支持版本 | 支持的文件类型 | +| -------- | -------- | -------- | +| BMP | API Version 3+ | .bmp | +| JPEG | API Version 3+ | .jpg | +| PNG | API Version 3+ | .png | diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-framework-js-file.md b/zh-cn/application-dev/reference/arkui-js-lite/js-framework-js-file.md new file mode 100644 index 0000000000000000000000000000000000000000..15bd4ab324917fb730f0fb11876d0d0a6b3c4947 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-framework-js-file.md @@ -0,0 +1,26 @@ +# app.js + + +每个应用可以在app.js自定义应用级生命周期的实现逻辑，包括： + + +- onCreate：在应用生成时被调用的生命周期函数。 + +- onDestory：在应用销毁时被调用的生命周期函数。 + + +以下示例仅在生命周期函数中打印对应日志： + + + +``` +// app.js +export default { + onCreate() { + console.info('Application onCreate'); + }, + onDestroy() { + console.info('Application onDestroy'); + }, +} +``` diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-framework-js-tag.md b/zh-cn/application-dev/reference/arkui-js-lite/js-framework-js-tag.md new file mode 100644 index 0000000000000000000000000000000000000000..5866a02f7f613be4064058dbb94b82beb06fcd4a --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-framework-js-tag.md @@ -0,0 +1,73 @@ +# js标签配置 + + +js标签中包含了实例名称、页面路由信息。 + + +| 标签 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| name | string | default | 是 | 标识JS实例的名字。 | +| pages | Array | - | 是 | 路由信息，详见“**[pages](#pages)**”。 | + + +> **说明：** +> name、pages标签配置需在配置文件中的“js”标签中完成设置。 + + +## pages + +定义每个页面的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如： + + +``` +{ + ... + "pages": [ + "pages/index/index", + "pages/detail/detail" + ] + ... +} +``` + + +> **说明：** +> +> +> - 应用首页固定为"pages/index/index"。 +> +> - 页面文件名不能使用组件名称，比如：text.hml、button.hml等。 + + +## 示例 + + +``` +{ + "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/zh-cn/application-dev/reference/arkui-js-lite/js-framework-syntax-css.md b/zh-cn/application-dev/reference/arkui-js-lite/js-framework-syntax-css.md new file mode 100644 index 0000000000000000000000000000000000000000..b61f1a17c557b0871ce8caeb2cc85245edbb83af --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-framework-syntax-css.md @@ -0,0 +1,161 @@ +# CSS语法参考 + + +CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式，也可在页面CSS样式文件中对组件、页面自定义不同的样式。 + + +## 样式导入 + +为了模块化管理和代码复用，CSS样式文件支持 \@import 语句，导入 CSS 文件。 + + +## 声明样式 + +每个页面目录下存在一个与布局hml文件同名的css文件，用来描述该hml页面中组件的样式，决定组件应该如何显示。 + +1. 内部样式，支持使用style、class属性来控制组件的样式。例如： + + ``` + +
+ Hello World +
+ ``` + + + ``` + /* index.css */ + .container { + justify-content: center; + } + ``` + +2. 文件导入，合并外部样式文件。例如，在common目录中定义样式文件style.css，并在index.css文件首行中进行导入： + + ``` + /* style.css */ + .title { + font-size: 50px; + } + ``` + + + ``` + /* index.css */ + @import '../../common/style.css'; + .container { + justify-content: center; + } + ``` + + +## 选择器 + +css选择器用于选择需要添加样式的元素，支持的选择器如下表所示： + +| 选择器 | 样例 | 样例描述 | +| -------- | -------- | -------- | +| .class | .container | 用于选择class="container"的组件。 | +| \#id | \#titleId | 用于选择id="titleId"的组件。 | +| , | .title, .content | 用于选择class="title"和class="content"的组件。 | + +示例： + + +``` + +
+ 标题 +
+ 内容 +
+
+``` + + +``` +/* 页面样式xxx.css */ +/* 对class="title"的组件设置样式 */ +.title { + font-size: 30px; +} +/* 对id="contentId"的组件设置样式 */ +#contentId { + font-size: 20px; +} +/* 对所有class="title"以及class="content"的组件都设置padding为5px */ +.title, .content { + padding: 5px; +} + +``` + + +## 伪类 + +css伪类是选择器中的关键字，用于指定要选择元素的特殊状态。 + + + +| 名称 | 支持组件 | 描述 | +| -------- | -------- | -------- | +| :active |
input[type="button"] | 表示被用户激活的元素，如：被用户按下的按钮。轻量级智能穿戴上伪类选择器上仅支持background-color 和background-image 的样式设置。 | +| :checked | input[type="checkbox"、type="radio"] | 表示checked属性为true的元素。轻量级智能穿戴上伪类选择器上仅支持background-color 和background-image 的样式设置。 | + +伪类示例如下，设置按钮的:active伪类可以控制被用户按下时的样式： + + +``` + +
+ +
+``` + + +``` +/* index.css */ +.button:active { + background-color: #888888;/*按钮被激活时，背景颜色变为#888888 */ +} +``` + + +## 样式预编译 + +预编译提供了利用特有语法生成css的程序，可以提供变量、运算等功能，令开发者更便捷地定义组件样式，目前支持less、sass和scss的预编译。使用样式预编译时，需要将原css文件后缀改为less、sass或scss，如index.css改为index.less、index.sass或index.scss。 + +- 当前文件使用样式预编译，例如将原index.css改为index.less： + + ``` + /* index.less */ + /* 定义变量 */ + @colorBackground: #000000; + .container { + background-color: @colorBackground; /* 使用当前less文件中定义的变量 */ + } + ``` + +- 引用预编译文件，例如common中存在style.scss文件，将原index.css改为index.scss，并引入style.scss： + + ``` + /* style.scss */ + /* 定义变量 */ + $colorBackground: #000000; + ``` + + 在index.scss中引用： + + + ``` + /* index.scss */ + /* 引入外部scss文件 */ + @import '../../common/style.scss'; + .container { + background-color: $colorBackground; /* 使用style.scss中定义的变量 */ + } + ``` + + + > **说明：** + > 引用的预编译文件建议放在common目录进行管理。 diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-framework-syntax-hml.md b/zh-cn/application-dev/reference/arkui-js-lite/js-framework-syntax-hml.md new file mode 100644 index 0000000000000000000000000000000000000000..73ebc3421624f68c271b1bc3718136fc1a4b0556 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-framework-syntax-hml.md @@ -0,0 +1,308 @@ +# HML语法参考 + + +HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组件，事件构建出页面的内容。页面具备数据绑定、事件绑定、列表渲染、条件渲染等高级能力。 + + +## 页面结构 + + +``` + +
+ Image Show +
+ +
+
+``` + + +## 数据绑定 + + +``` + +
+ {{content[1]}} +
+``` + + +``` +// xxx.js +export default { + data: { + content: ['Hello World!', 'Welcome to my world!'] + }, + changeText: function() { + this.content.splice(1, 1, this.content[0]); + } +} +``` + +> **说明：** +> - 针对数组内的数据修改，请使用splice方法生效数据绑定变更。 +> +> - hml中的js表达式不支持ES6语法。 + + +## 事件绑定 + +事件绑定的回调函数接收一个事件对象参数，可以通过访问该事件对象获取事件信息。 + + +``` + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+``` + + +``` +// xxx.js +export default { + data: { + obj: '', + }, + clickfunc: function(e) { + this.obj = 'Hello World'; + console.log(e); + }, +} +``` + +> **说明：** +> +> 事件冒泡机制从API Version 5开始支持。升级SDK后，运行存量JS应用，采用旧写法（onclick）的事件绑定还是按事件不冒泡进行处理。但如果使用新版本SDK重新打包JS应用，将旧写法按事件冒泡进行处理。为了避免业务逻辑错误，建议将旧写法（如onclick）改成新写法（grab:click）。 + +**示例：** + +``` + +
+ {{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; +} +``` + + +## 列表渲染 + + +``` + +
+ + +
+ {{$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}); + } + }, +} +``` + +tid属性主要用来加速for循环的重渲染，旨在列表中的数据有变更时，提高重新渲染的效率。tid属性是用来指定数组中每个元素的唯一标识，如果未指定，数组中每个元素的索引为该元素的唯一id。例如上述tid="id"表示数组中的每个元素的id属性为该元素的唯一标识。for循环支持的写法如下： + +- for="array"：其中array为数组对象，array的元素变量默认为$item。 + +- for="v in array"：其中v为自定义的元素变量，元素索引默认为$idx。 + +- for="(i, v) in array"：其中元素索引为i，元素变量为v，遍历数组对象array。 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 数组中的每个元素必须存在tid指定的数据属性，否则运行时可能会导致异常。 +> +> - 数组中被tid指定的属性要保证唯一性，如果不是则会造成性能损耗。比如，示例中只有id和name可以作为tid字段，因为它们属于唯一字段。 +> +> - tid不支持表达式。 + + +## 条件渲染 + +条件渲染分为2种：if/elif/else和show。两种写法的区别在于：第一种写法里if为false时，组件不会在vdom中构建，也不会渲染，而第二种写法里show为false时虽然也不渲染，但会在vdom中构建；另外，当使用if/elif/else写法时，节点必须是兄弟节点，否则编译无法通过。实例如下： + + +``` + +
+ + + 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; + } +} +``` + +优化渲染优化：show方法。当show为真时，节点正常渲染；当为假时，仅仅设置display样式为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; + }, +} +``` + +> **说明：** +> 禁止在同一个元素上同时设置for和if属性。 diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-framework-syntax-js.md b/zh-cn/application-dev/reference/arkui-js-lite/js-framework-syntax-js.md new file mode 100644 index 0000000000000000000000000000000000000000..1a9c10683d0a75f0aab1997e49ada59b84a664c4 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-framework-syntax-js.md @@ -0,0 +1,122 @@ +# JS语法参考 + + +JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力，可以使应用更加富有表现力，具备更加灵活的设计。下面讲述JS文件的编译和运行的支持情况。 + + +## 语法 + +支持ES6语法。轻量级智能穿戴支持的ES6语法有限，仅支持以下ES6 语法： + +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 + +- 模块声明 + 使用import方法引入功能模块： + + + ``` + import router from '@system.router'; + ``` + +- 代码引用 + 使用import方法导入js代码： + + + ``` + import utils from '../../common/utils.js'; + ``` + + +## 对象 + +- 页面对象 + | 属性 | 类型 | 描述 | + | -------- | -------- | -------- | + | data | Object/Function | 页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。
| + | $refs | Object | 持有注册过ref 属性的DOM元素或子组件实例的对象。示例见[获取DOM元素](#获取dom元素)。 | + + +## 获取DOM元素 + +1. 通过$refs获取DOM元素 + + ``` + +
+ +
+ ``` + + + ``` + // index.js + export default { + data: { + images: [ + { src: '/common/frame1.png' }, + { src: '/common/frame2.png' }, + { src: '/common/frame3.png' }, + ], + }, + handleClick() { + const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素 + const state = animator.getState(); + if (state === 'paused') { + animator.resume(); + } else if (state === 'stopped') { + animator.start(); + } else { + animator.pause(); + } + }, + }; + ``` + + +## 生命周期接口 + +- 页面生命周期 + | 属性 | 类型 | 参数 | 返回值 | 描述 | 触发时机 | + | -------- | -------- | -------- | -------- | -------- | -------- | + | onInit | Function | 无 | 无 | 页面初始化 | 页面数据初始化完成时触发，只触发一次。 | + | onReady | Function | 无 | 无 | 页面创建完成 | 页面创建完成时触发，只触发一次。 | + | onShow | Function | 无 | 无 | 页面显示 | 页面显示时触发。 | + | onHide | Function | 无 | 无 | 页面消失 | 页面消失时触发。 | + | onDestroy | Function | 无 | 无 | 页面销毁 | 页面销毁时触发。 | + + 页面A的生命周期接口的调用顺序： + - 打开页面A：onInit() -> onReady() -> onShow() + + - 在页面A打开页面B：onHide() -> onDestroy() + + - 从页面B返回页面A：onInit() -> onReady() -> onShow() + + - 退出页面A：onHide() -> onDestroy() + + - 页面隐藏到后台运行：onHide() + + - 页面从后台运行恢复到前台：onShow() + +- 应用生命周期 + | 属性 | 类型 | 参数 | 返回值 | 描述 | 触发时机 | + | -------- | -------- | -------- | -------- | -------- | -------- | + | onCreate | Function | 无 | 无 | 应用创建 | 当应用创建时调用。 | + | onDestroy | Function | 无 | 无 | 应用退出 | 当应用退出时触发。 | diff --git a/zh-cn/application-dev/reference/arkui-js-lite/public_sys-resources/icon-caution.gif b/zh-cn/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/zh-cn/application-dev/reference/arkui-js-lite/public_sys-resources/icon-caution.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/public_sys-resources/icon-danger.gif b/zh-cn/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/zh-cn/application-dev/reference/arkui-js-lite/public_sys-resources/icon-danger.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/public_sys-resources/icon-note.gif b/zh-cn/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/zh-cn/application-dev/reference/arkui-js-lite/public_sys-resources/icon-note.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/public_sys-resources/icon-notice.gif b/zh-cn/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/zh-cn/application-dev/reference/arkui-js-lite/public_sys-resources/icon-notice.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/public_sys-resources/icon-tip.gif b/zh-cn/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/zh-cn/application-dev/reference/arkui-js-lite/public_sys-resources/icon-tip.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/public_sys-resources/icon-warning.gif b/zh-cn/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/zh-cn/application-dev/reference/arkui-js-lite/public_sys-resources/icon-warning.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/Readme-CN.md b/zh-cn/application-dev/reference/arkui-js/Readme-CN.md index a0f754de20cb86ba2ba7bd370e52c5162e7d8417..b4f136fbe25313fbb7925f96d35bed69c8511219 100644 --- a/zh-cn/application-dev/reference/arkui-js/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-js/Readme-CN.md @@ -1,4 +1,4 @@ -# 兼容JS的类Web开发范式 +# 兼容JS的类Web开发范式（ArkUI.Full） - 组件通用信息 - [通用属性](js-components-common-attributes.md) diff --git a/zh-cn/application-dev/website.md b/zh-cn/application-dev/website.md index 44a0cae7aee4f5bee0a29f4204b5abeca3521270..65030d6f11fb6d1f5f5f96b105c9b27e341020ac 100644 --- a/zh-cn/application-dev/website.md +++ b/zh-cn/application-dev/website.md @@ -667,7 +667,7 @@ - [类型说明](reference/arkui-ts/ts-types.md) - 已停止维护的组件 - [GridContainer](reference/arkui-ts/ts-container-gridcontainer.md) - - 组件参考（兼容JS的类Web开发范式） + - 组件参考（兼容JS的类Web开发范式-ArkUI.Full） - 组件通用信息 - [通用属性](reference/arkui-js/js-components-common-attributes.md) - [通用样式](reference/arkui-js/js-components-common-styles.md) @@ -768,6 +768,41 @@ - [生命周期定义](reference/arkui-js/js-components-custom-lifecycle.md) - [动态创建组件](reference/arkui-js/js-components-create-elements.md) - [数据类型说明](reference/arkui-js/js-appendix-types.md) + - 组件参考（兼容JS的类Web开发范式-ArkUI.Lite） + - 框架说明 + - [文件组织](js-framework-file.md) + - [js标签配置](js-framework-js-tag.md) + - [app.js](js-framework-js-file.md) + - 语法 + - [HML语法参考](js-framework-syntax-hml.md) + - [CSS语法参考](js-framework-syntax-css.md) + - [JS语法参考](js-framework-syntax-js.md) + - 组件通用信息 + - [通用事件](js-common-events.md) + - [通用属性](js-common-attributes.md) + - [通用样式](js-common-styles.md) + - [动画样式](js-components-common-animation.md) + - 容器组件 + - [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) + - 基础组件 + - [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组件](js-components-canvas-canvas.md) + - [CanvasRenderingContext2D对象](js-components-canvas-canvasrenderingcontext2d.md) - JS服务卡片UI组件参考 - JS服务卡片UI框架说明 - [文件组织](reference/js-service-widget-ui/js-service-widget-file.md)