diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125174.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125174.png new file mode 100644 index 0000000000000000000000000000000000000000..f1abe2afcb7902557ac3c4f58abfdf333af03121 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125174.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125178.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125178.png new file mode 100644 index 0000000000000000000000000000000000000000..6064f64867e3aca621244e1e6fdb16d3ab2ed748 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125178.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125180.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125180.png new file mode 100644 index 0000000000000000000000000000000000000000..7cc96f8f6364b93923f0a88b895fe6b151080932 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125180.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125184.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125184.png new file mode 100644 index 0000000000000000000000000000000000000000..ecf361e4c749446160da1e8a07169b21d99f362a Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125184.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125188.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125188.png new file mode 100644 index 0000000000000000000000000000000000000000..44e4d991524bd0ef88a0dd10f204e022dd9d0621 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125188.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125190.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125190.png new file mode 100644 index 0000000000000000000000000000000000000000..5e23c304c4911dc0ef487dfeb8d7820aea5fb44b Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125190.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125194.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125194.png new file mode 100644 index 0000000000000000000000000000000000000000..e370a44cf043fc34bd8891f57faad2cd2ca05707 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125194.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125210.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125210.png new file mode 100644 index 0000000000000000000000000000000000000000..a59bc9cdb0f75ad79e4714d3593216021369c862 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125210.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125214.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125214.png new file mode 100644 index 0000000000000000000000000000000000000000..b3c353b6a872d3597b767f4c216b2d16bfc2139b Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125214.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125216.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125216.png new file mode 100644 index 0000000000000000000000000000000000000000..664d13c38389361e61a45870899e2a6f0bfc835f Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125216.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125218.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125218.png new file mode 100644 index 0000000000000000000000000000000000000000..1b0ed50716d897398c1e9a741e08ff5f1b9fd9de Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125218.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125222.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125222.png new file mode 100644 index 0000000000000000000000000000000000000000..2dadb92ce56793e2dd693bfa7d99b0c1168130dc Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125222.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125224.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125224.png new file mode 100644 index 0000000000000000000000000000000000000000..41be1a646e14511b5d177d11a7bce10deaee5bc9 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125224.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125226.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125226.png new file mode 100644 index 0000000000000000000000000000000000000000..2dadb92ce56793e2dd693bfa7d99b0c1168130dc Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125226.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125228.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125228.png new file mode 100644 index 0000000000000000000000000000000000000000..515185ab1b3cf9aaba1204760dae19ab3c112b42 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125228.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125230.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125230.png new file mode 100644 index 0000000000000000000000000000000000000000..984e7a561e661ecefca8b60d5ac239b67f96c98c Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125230.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125232.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125232.png new file mode 100644 index 0000000000000000000000000000000000000000..115cb4c96382681743381aeba099549dc24c2ae5 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125232.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125234.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125234.png new file mode 100644 index 0000000000000000000000000000000000000000..af32ecea68c1cef693bcfa379af5ac28f66c1e14 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125234.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125236.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125236.png new file mode 100644 index 0000000000000000000000000000000000000000..63a8c6adc29d340634ed06a1006a0fb56c991a9d Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125236.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125238.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125238.png new file mode 100644 index 0000000000000000000000000000000000000000..dfcb0c5e259b3f8d7375c21712249c1e847edd67 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125238.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125240.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125240.png new file mode 100644 index 0000000000000000000000000000000000000000..a9aba5f67b94427168fade014542532431e28a2e Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125240.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125242.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125242.png new file mode 100644 index 0000000000000000000000000000000000000000..5c5e360f249a2002ba68ad9b94bd7f66f5d6aab1 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125242.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125244.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125244.png new file mode 100644 index 0000000000000000000000000000000000000000..0d386fef5c4fa9faf1b29c7667c7392db250f2eb Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125244.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125246.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125246.png new file mode 100644 index 0000000000000000000000000000000000000000..7dfc7ee8793298d19c939369ba980abd547982ff Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125246.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125248.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125248.png new file mode 100644 index 0000000000000000000000000000000000000000..4b1948de8581602c6c5879c03d68c14f06eccd00 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125248.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125250.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125250.png new file mode 100644 index 0000000000000000000000000000000000000000..5d0ae86ad14ff863511a10ecc1a85b273e826dfc Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125250.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125254.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125254.png new file mode 100644 index 0000000000000000000000000000000000000000..309d1c46f8bc396df5eaed381a5ffa2f0389d602 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125254.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125256.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125256.png new file mode 100644 index 0000000000000000000000000000000000000000..02d5f4e31b020ea9f64e36a7b7cd50299cf3d7f2 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125256.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125258.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125258.png new file mode 100644 index 0000000000000000000000000000000000000000..e9a0799a203fdd7bd41fa5175585dc170a20156e Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125258.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125260.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125260.png new file mode 100644 index 0000000000000000000000000000000000000000..ac66614c0f277cd722b3d090cb10efb973152b0f Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125260.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125262.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125262.png new file mode 100644 index 0000000000000000000000000000000000000000..131584c72c082f40e2b466e2706c86a05df375e0 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125262.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284968.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284968.png new file mode 100644 index 0000000000000000000000000000000000000000..c0df3f4f7d99f0b8c39995133c71d944bc07ea4b Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284968.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284970.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284970.png new file mode 100644 index 0000000000000000000000000000000000000000..1c4f9ae52153198f8690a1066fe66ba8c7bd1ee1 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284970.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284972.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284972.png new file mode 100644 index 0000000000000000000000000000000000000000..69cb300d4bc8decee06c7fb64b03a24287865a8f Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284972.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284974.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284974.png new file mode 100644 index 0000000000000000000000000000000000000000..0a5eb251a8d731dc6a9d8b1f31f904c42fd372c3 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284974.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284976.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284976.png new file mode 100644 index 0000000000000000000000000000000000000000..ac0521001d2513fd69e48ce61e1d1128b9d3a6dd Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284976.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284980.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284980.png new file mode 100644 index 0000000000000000000000000000000000000000..4e41450db5d70f6d10d6d7bf59daba33085c177e Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284980.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284982.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284982.png new file mode 100644 index 0000000000000000000000000000000000000000..6e4476c4791e37d4681f8e12313ae1cad0887c1b Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284982.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284990.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284990.png new file mode 100644 index 0000000000000000000000000000000000000000..4c4c304b67c398f32c5fff516cdde377ca39c73d Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284990.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284992.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284992.png new file mode 100644 index 0000000000000000000000000000000000000000..6dc88e656c293c2e65939e4a793684488dfc81be Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284992.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284996.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284996.png new file mode 100644 index 0000000000000000000000000000000000000000..e72165fdf1b24d80f0abde742ad3d848497c6ea7 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284996.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284998.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284998.png new file mode 100644 index 0000000000000000000000000000000000000000..57594c6855d4cdf1b37cc3e5354374c9dae0823b Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127284998.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285000.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285000.png new file mode 100644 index 0000000000000000000000000000000000000000..c89f746719790333bce2bde8c5b8d86102fdfc33 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285000.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285002.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285002.png new file mode 100644 index 0000000000000000000000000000000000000000..8bc3583f82d21c8bec0c70b2da36ed05723fd9a7 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285002.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285006.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285006.png new file mode 100644 index 0000000000000000000000000000000000000000..891d52276622fd51893634ce26e08bd56f62b782 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285006.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285010.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285010.png new file mode 100644 index 0000000000000000000000000000000000000000..8b3eec4e46f6a29dc47694940ceaef1cfa1314af Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285010.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285012.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285012.png new file mode 100644 index 0000000000000000000000000000000000000000..45467f3e6fc0866b6da0521911bdb5e7d740df29 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285012.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285014.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285014.png new file mode 100644 index 0000000000000000000000000000000000000000..8e195633945b3387c46a7d295862351d4ff1fc64 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285014.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285016.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285016.png new file mode 100644 index 0000000000000000000000000000000000000000..cbc1d312680f479e8c443476ea39eaf1e8a16e55 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285016.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285018.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285018.png new file mode 100644 index 0000000000000000000000000000000000000000..1324b43b3f5b8dd0548cf2069c4c532c5284c445 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285018.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285020.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285020.png new file mode 100644 index 0000000000000000000000000000000000000000..481c833482d38c5f564127c8f412fe3c0275fd24 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285020.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285022.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285022.png new file mode 100644 index 0000000000000000000000000000000000000000..1072a50f468dda3c90c889c31424b7c290eb1a13 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285022.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285026.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285026.png new file mode 100644 index 0000000000000000000000000000000000000000..0d53a47b7eace81d5c7da88c59fee61e30c89681 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285026.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285028.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285028.png new file mode 100644 index 0000000000000000000000000000000000000000..f1abe2afcb7902557ac3c4f58abfdf333af03121 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285028.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285030.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285030.png new file mode 100644 index 0000000000000000000000000000000000000000..64fdda07447707816e8a6238939169f58a4ce58f Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285030.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285032.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285032.png new file mode 100644 index 0000000000000000000000000000000000000000..4e41c2cd90ba17798448d70b493ccceb3ac960f0 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285032.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285038.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285038.png new file mode 100644 index 0000000000000000000000000000000000000000..6eb2d41877c85cccfb918b042bc13c81c58ec191 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285038.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285040.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285040.png new file mode 100644 index 0000000000000000000000000000000000000000..2e7cec00f9d186d76ff5cb12d47811084217cc1c Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285040.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285042.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285042.png new file mode 100644 index 0000000000000000000000000000000000000000..daa035cea33b810571c18de67e4ac887eeb11850 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285042.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285044.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285044.png new file mode 100644 index 0000000000000000000000000000000000000000..6823cbc9203b07abae455b4ee5c7692878c4be72 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285044.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285046.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285046.png new file mode 100644 index 0000000000000000000000000000000000000000..ca1edf2219980ab9c8533b9fda3219521c50533d Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285046.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285048.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285048.png new file mode 100644 index 0000000000000000000000000000000000000000..bf38fe45eaf254939b88b9d2a66635408060acf7 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285048.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285050.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285050.png new file mode 100644 index 0000000000000000000000000000000000000000..3e6aaacfe1c26157294e6dedfeaa1488aeed12a3 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285050.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285052.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285052.png new file mode 100644 index 0000000000000000000000000000000000000000..6823cbc9203b07abae455b4ee5c7692878c4be72 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285052.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285054.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285054.png new file mode 100644 index 0000000000000000000000000000000000000000..dfcb0c5e259b3f8d7375c21712249c1e847edd67 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285054.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285056.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285056.png new file mode 100644 index 0000000000000000000000000000000000000000..9114031e04fc28be59e8c9567c0fcfe81a9cc5cb Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285056.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285058.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285058.png new file mode 100644 index 0000000000000000000000000000000000000000..6f085565bd8c64d44bf58ce0969557515ec7ab97 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285058.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285060.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285060.png new file mode 100644 index 0000000000000000000000000000000000000000..93825b7fe53a0794751ee4aa3ca46300c404835e Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285060.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285062.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285062.png new file mode 100644 index 0000000000000000000000000000000000000000..c0b21ed6b44c2f756458137f931873f540c16e5f Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285062.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285064.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285064.png new file mode 100644 index 0000000000000000000000000000000000000000..b80a6c31cdb287c35965c7841aa97711d79b371c Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285064.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285066.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285066.png new file mode 100644 index 0000000000000000000000000000000000000000..bca655617699ef8dc1265bf692a3170c7effe15b Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285066.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285068.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285068.png new file mode 100644 index 0000000000000000000000000000000000000000..8a5c7039b580128e75299672dc5438151dcf3572 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285068.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285070.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285070.png new file mode 100644 index 0000000000000000000000000000000000000000..12085848c0f6472d53f7e6504c1924ea6f5a44c1 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127285070.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164835.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164835.png new file mode 100644 index 0000000000000000000000000000000000000000..53081e06f458cfc1772de30f669180333b8d783d Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164835.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164837.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164837.png new file mode 100644 index 0000000000000000000000000000000000000000..a33c4fce8448e2127b21e277437195ce0002766b Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164837.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164841.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164841.png new file mode 100644 index 0000000000000000000000000000000000000000..b234a769d1a9f1f30c4d2127160cf067e9f71ad6 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164841.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164843.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164843.png new file mode 100644 index 0000000000000000000000000000000000000000..3ca3e045717379bb09fa8d13ea0d42019bf546f2 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164843.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164849.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164849.png new file mode 100644 index 0000000000000000000000000000000000000000..069f570291be858a1768b75719a4a6adbd1bdef8 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164849.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164851.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164851.png new file mode 100644 index 0000000000000000000000000000000000000000..c33d763d18f5108bf0eedba19c662d05af397ee9 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164851.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164855.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164855.png new file mode 100644 index 0000000000000000000000000000000000000000..fe422eecde9ec9f1fcac762bd81a23b3fa3abde7 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164855.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164865.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164865.png new file mode 100644 index 0000000000000000000000000000000000000000..bc28f5056c679e189543c8ad6fba67fb56db7655 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164865.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164875.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164875.png new file mode 100644 index 0000000000000000000000000000000000000000..9ed54c6c5c5186fb43f24dab24f7689ae0d14a12 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164875.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164877.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164877.png new file mode 100644 index 0000000000000000000000000000000000000000..8442c9b2258c79ee6b6a3d5963df5b792bbb1a16 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164877.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164879.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164879.png new file mode 100644 index 0000000000000000000000000000000000000000..d77ed21418dc3035feb9f9c8e15815e577d71a90 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164879.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164885.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164885.png new file mode 100644 index 0000000000000000000000000000000000000000..9c43caf5fdfd466eafc37b793f509a6bde2b885d Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164885.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164887.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164887.png new file mode 100644 index 0000000000000000000000000000000000000000..ff0aa71de78cb461a6602398ee915c677efdf3d4 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164887.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164889.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164889.png new file mode 100644 index 0000000000000000000000000000000000000000..04bcf099edface801be6074a33ff33a980c9b606 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164889.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164893.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164893.png new file mode 100644 index 0000000000000000000000000000000000000000..00767e63c899eec52c2c732e834bca8d26d348ce Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164893.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164895.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164895.png new file mode 100644 index 0000000000000000000000000000000000000000..7983d590a2c617c6cad68c90af6b12aa17518810 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164895.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164897.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164897.png new file mode 100644 index 0000000000000000000000000000000000000000..0ac129028e67b43fcae8e3d5c1a539cc45ba6d21 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164897.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164899.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164899.png new file mode 100644 index 0000000000000000000000000000000000000000..800bf296338fd01962f16a8863c37bfe515ce3be Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164899.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164901.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164901.png new file mode 100644 index 0000000000000000000000000000000000000000..d1d37504e15eb6fccd6b1c8e985d37fcc8ba9875 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164901.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164905.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164905.png new file mode 100644 index 0000000000000000000000000000000000000000..c88212b6818d6d18c77ee497cfcafaf661a70d52 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164905.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164907.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164907.png new file mode 100644 index 0000000000000000000000000000000000000000..6a64534a0a867d44cf81c8a34c9981b5fbaf5faf Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164907.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164909.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164909.png new file mode 100644 index 0000000000000000000000000000000000000000..6d795f1618b1546c94266548069eccf9e9af2e01 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164909.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164911.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164911.png new file mode 100644 index 0000000000000000000000000000000000000000..1072a50f468dda3c90c889c31424b7c290eb1a13 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164911.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164913.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164913.png new file mode 100644 index 0000000000000000000000000000000000000000..d62fc7767f7b2e0e8d0d7fed57e30bdf6a6a332f Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164913.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164915.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164915.png new file mode 100644 index 0000000000000000000000000000000000000000..87915df37741dacfe9448bfebccf5a88d3ca2a76 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164915.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164917.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164917.png new file mode 100644 index 0000000000000000000000000000000000000000..bdb02fdda28a155e2f622eeea2ff820144780e50 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164917.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164921.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164921.png new file mode 100644 index 0000000000000000000000000000000000000000..39cf9d01563cf63bee003a47cd88258e860a0757 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164921.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164923.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164923.png new file mode 100644 index 0000000000000000000000000000000000000000..f89e20a55ba1e81f2cbda2bd0241edefadbe7149 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164923.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164925.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164925.png new file mode 100644 index 0000000000000000000000000000000000000000..a68e61ab120651294310c5e3632ce22d71917a52 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164925.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324729.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324729.png new file mode 100644 index 0000000000000000000000000000000000000000..c25a692065d473ccf9f5b6d36254787e2497fad6 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324729.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324731.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324731.png new file mode 100644 index 0000000000000000000000000000000000000000..283cf90b3828b36af6fb3a746e806f6715053310 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324731.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324733.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324733.png new file mode 100644 index 0000000000000000000000000000000000000000..858c4187d3a2874f651adc09dcae9a32f8407d86 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324733.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324735.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324735.png new file mode 100644 index 0000000000000000000000000000000000000000..58293d5e874f2aa36ecaf7282ca9e4736318092f Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324735.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324737.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324737.png new file mode 100644 index 0000000000000000000000000000000000000000..e863d7a1c3b9c1ca08bd182dce43c55a4866d59b Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324737.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324739.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324739.png new file mode 100644 index 0000000000000000000000000000000000000000..486baf6be50982404fd1c68a5bc51db45c62046a Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324739.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324741.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324741.png new file mode 100644 index 0000000000000000000000000000000000000000..93299fc38d761e5251673210c364f6825e319153 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324741.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324743.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324743.png new file mode 100644 index 0000000000000000000000000000000000000000..0491d350277cd67d7774e3761164b9dd7038a117 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324743.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324745.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324745.png new file mode 100644 index 0000000000000000000000000000000000000000..b780eb08852e8916ec6ff1a401ea6946c8d727cf Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324745.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324747.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324747.png new file mode 100644 index 0000000000000000000000000000000000000000..b162dbf0a6c890a03ea1aa0b28bdb454651b697c Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324747.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324755.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324755.png new file mode 100644 index 0000000000000000000000000000000000000000..454b1796715794d51e2a1a4649bfafa1bfde80f0 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324755.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324757.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324757.png new file mode 100644 index 0000000000000000000000000000000000000000..a618da21cf6c6d32066286e594921c0fc75b5dba Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324757.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324759.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324759.png new file mode 100644 index 0000000000000000000000000000000000000000..5e23c304c4911dc0ef487dfeb8d7820aea5fb44b Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324759.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324761.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324761.png new file mode 100644 index 0000000000000000000000000000000000000000..91a276a7dffb4d98c507e9af6afa1912cca1fed2 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324761.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324767.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324767.png new file mode 100644 index 0000000000000000000000000000000000000000..6348bb2b6ee281976f7d58159e4c33db29f542ad Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324767.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324769.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324769.png new file mode 100644 index 0000000000000000000000000000000000000000..1821f9c40ad9d24dc10dc662ecbe7936c9e10633 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324769.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324771.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324771.png new file mode 100644 index 0000000000000000000000000000000000000000..5ee9f7e893611dce988b8aa7ccfe3fab4b9d912f Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324771.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324773.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324773.png new file mode 100644 index 0000000000000000000000000000000000000000..21f20a4220aabf9449c707291633e7b3723fe378 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324773.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324775.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324775.png new file mode 100644 index 0000000000000000000000000000000000000000..adca00e684afb79ff4f21313d0586025576a8be1 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324775.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324777.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324777.png new file mode 100644 index 0000000000000000000000000000000000000000..c952585d8032733700b57ce1a919d71ce9a4b58b Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324777.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324779.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324779.png new file mode 100644 index 0000000000000000000000000000000000000000..848454297b67eb73ab641424badc438433e24479 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324779.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324781.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324781.png new file mode 100644 index 0000000000000000000000000000000000000000..3621ef6876dbd1103487aed8ff190e6a0204ffde Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324781.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324785.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324785.png new file mode 100644 index 0000000000000000000000000000000000000000..6f5fe69b5a5a62b2d2b719b2be0a17a501363918 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324785.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324789.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324789.png new file mode 100644 index 0000000000000000000000000000000000000000..3e6aaacfe1c26157294e6dedfeaa1488aeed12a3 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324789.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324793.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324793.png new file mode 100644 index 0000000000000000000000000000000000000000..56db1024a714f821528656c64e12520311bae8f5 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324793.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324795.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324795.png new file mode 100644 index 0000000000000000000000000000000000000000..d87462d1cdc9410e91ee050a53d58e71d1c5f312 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324795.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324799.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324799.png new file mode 100644 index 0000000000000000000000000000000000000000..6f929d8ab35b708978d8053047cb56bec4fa83bc Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324799.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324801.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324801.png new file mode 100644 index 0000000000000000000000000000000000000000..3fca22c329e9dc9ef73eee20757eac4ce7386842 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324801.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324803.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324803.png new file mode 100644 index 0000000000000000000000000000000000000000..378000d344e90ab4db41869a4612daf6b60d66ab Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324803.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324805.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324805.png new file mode 100644 index 0000000000000000000000000000000000000000..f89943fc98661a6d2b78b5659c41483308a0c54b Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324805.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324807.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324807.png new file mode 100644 index 0000000000000000000000000000000000000000..d1ca7dd07fe7812ec1f87bf748595174569a5672 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324807.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324809.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324809.png new file mode 100644 index 0000000000000000000000000000000000000000..5b22707e37ec772dc08a961e557a937862210167 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324809.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324811.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324811.png new file mode 100644 index 0000000000000000000000000000000000000000..3026d3c195598159232b4b1f08e9f198f4b4fa2c Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324811.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324813.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324813.png new file mode 100644 index 0000000000000000000000000000000000000000..51fb00e10bb5c167506ddfae1689b58e368df340 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324813.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324815.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324815.png new file mode 100644 index 0000000000000000000000000000000000000000..6e4476c4791e37d4681f8e12313ae1cad0887c1b Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324815.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324817.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324817.png new file mode 100644 index 0000000000000000000000000000000000000000..04ab7decab16cb7341665c2a67e8d5655a7eed6a Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324817.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324821.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324821.png new file mode 100644 index 0000000000000000000000000000000000000000..db83d39f98583ee653ee39b0237eb55961e539c7 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324821.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324823.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324823.png new file mode 100644 index 0000000000000000000000000000000000000000..56d32d4cd371c5374b133cb81c9c077aaf7b110d Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324823.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324825.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324825.png new file mode 100644 index 0000000000000000000000000000000000000000..7cfd4846ca697424582edbfed23ed93ef9e98138 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324825.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324829.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324829.png new file mode 100644 index 0000000000000000000000000000000000000000..6315d4654d04dd6b9b295fa1f8b37e8c550b17cf Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324829.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324831.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324831.png new file mode 100644 index 0000000000000000000000000000000000000000..1e0bad2b2bfed2559e53a8bc21162e6163ec8434 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324831.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324833.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324833.png new file mode 100644 index 0000000000000000000000000000000000000000..0d22570503febc7a7dcba0d1e870f49f32fe489a Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324833.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324835.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324835.png new file mode 100644 index 0000000000000000000000000000000000000000..26f2f228b47b8acb8adcddc3abf9156d6c29364e Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324835.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324837.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324837.png new file mode 100644 index 0000000000000000000000000000000000000000..b54dbc2391d1a8f16312dd02dc3d65a35ea2626f Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324837.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324839.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324839.png new file mode 100644 index 0000000000000000000000000000000000000000..639f16f8aaf261176b3bc760c2eb616ad2f4aa28 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324839.png differ diff --git a/en/application-dev/reference/arkui-js/js-appendix-types.md b/en/application-dev/reference/arkui-js/js-appendix-types.md index 83e657a7e233893f13b5b11e0be51b2a3f581e95..66b9939d938719f5b5178d347309e58c9dd5c764 100644 --- a/en/application-dev/reference/arkui-js/js-appendix-types.md +++ b/en/application-dev/reference/arkui-js/js-appendix-types.md @@ -1,1098 +1,169 @@ -# Type Attributes +# Type Attributes -## Length Type +## Length Type - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

length

-

string | number

-

Size unit. When the type is number, the unit is px. When the type is string, the pixel unit needs to be explicitly specified. Currently, the following pixel units are supported:

-
  • px: logical size unit.
  • fp6+: font size unit, which varies according to the system font size. Only text components support the setting of the font size.
-

percentage

-

string

-

Unit in percentage, for example, 50%.

-
+| Name | Type | Description | +| ---------- | ---------------- | ------------------------------------------------------------ | +| length | string \| number | Size unit. When the type is **number**, the unit is px. When the type is **string**, the pixel unit needs to be explicitly specified. Currently, the following pixel units are supported:
- **px**: logical size unit.
- **fp**6+: font size unit, which varies according to the system font size. Only text components support the setting of the font size. | +| percentage | string | Unit in percentage, for example, **50%**. | -## Color Type +## Color Type - - - - - - - - - - - -

Name

-

Type

-

Description

-

color

-

string | Color enumeration values

-

Color information.

-
The String format is as follows:
  • 'rgb(255, 255, 255)'
  • 'rgba(255, 255, 255, 1.0)'
  • HEX formats: #rrggbb and #aarrggbb
  • Enumeration format: 'black' and 'white'
    NOTE:

    The enumeration format is not supported in the JS script.

    -
    -
-
-
+| Name | Type | Description | +| ----- | ---------------------------------- | ------------------------------------------------------------ | +| color | string \| Color enumeration values | Color information.
The String format is as follows:
- 'rgb(255, 255, 255)'
- 'rgba(255, 255, 255, 1.0)'
- HEX formats: #rrggbb and #aarrggbb
- Enumeration format: 'black' and 'white'
NOTE:
The enumeration format is not supported in the JS script. | **Table 1** Currently supported colors - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Hexadecimal Code

-

Color

-

aliceblue

-

#f0f8ff

-

-

antiquewhite

-

#faebd7

-

-

aqua

-

#00ffff

-

-

aquamarine

-

#7fffd4

-

-

azure

-

#f0ffff

-

-

beige

-

#f5f5dc

-

-

bisque

-

#ffe4c4

-

-

black

-

#000000

-

-

blanchedalmond

-

#ffebcd

-

-

blue

-

#0000ff

-

-

blueviolet

-

#8a2be2

-

-

brown

-

#a52a2a

-

-

burlywood

-

#deB887

-

-

cadetblue

-

#5f9ea0

-

-

chartreuse

-

#7fff00

-

-

chocolate

-

#d2691e

-

-

coral

-

#ff7f50

-

-

cornflowerblue

-

#6495ed

-

-

cornsilk

-

#fff8dc

-

-

crimson

-

#dc143c

-

-

cyan

-

#00ffff

-

-

darkblue

-

#00008b

-

-

darkcyan

-

#008b8b

-

-

darkgoldenrod

-

#b8860b

-

-

darkgray

-

#a9a9a9

-

-

darkgreen

-

#006400

-

-

darkgrey

-

#a9a9a9

-

-

darkkhaki

-

#bdb76b

-

-

darkmagenta

-

#8b008b

-

-

darkolivegreen

-

#556b2f

-

-

darkorange

-

#ff8c00

-

-

darkorchid

-

#9932cc

-

-

darkred

-

#8b0000

-

-

darksalmon

-

#e9967a

-

-

darkseagreen

-

#8fbc8f

-

-

darkslateblue

-

#483d8b

-

-

darkslategray

-

#2f4f4f

-

-

darkslategrey

-

#2f4f4f

-

-

darkturquoise

-

#00ced1

-

-

darkviolet

-

#9400d3

-

-

deeppink

-

#ff1493

-

-

deepskyblue

-

#00bfff

-

-

dimgray

-

#696969

-

-

dimgrey

-

#696969

-

-

dodgerblue

-

#1e90ff

-

-

firebrick

-

#b22222

-

-

floralwhite

-

#fffaf0

-

-

forestgreen

-

#228b22

-

-

fuchsia

-

#ff00ff

-

-

gainsboro

-

#dcdcdc

-

-

ghostwhite

-

#f8f8ff

-

-

gold

-

#ffd700

-

-

goldenrod

-

#daa520

-

-

gray

-

#808080

-

-

green

-

#008000

-

-

greenyellow

-

#adff2f

-

-

grey

-

#808080

-

-

honeydew

-

#f0fff0

-

-

hotpink

-

#ff69b4

-

-

indianred

-

#cd5c5c

-

-

indigo

-

#4b0082

-

-

ivory

-

#fffff0

-

-

khaki

-

#f0e68c

-

-

lavender

-

#e6e6fa

-

-

lavenderblush

-

#fff0f5

-

-

lawngreen

-

#7cfc00

-

-

lemonchiffon

-

#fffacd

-

-

lightblue

-

#add8e6

-

-

lightcoral

-

#f08080

-

-

lightcyan

-

#e0ffff

-

-

lightgoldenrodyellow

-

#fafad2

-

-

lightgray

-

#d3d3d3

-

-

lightgreen

-

#90ee90

-

-

lightpink

-

#ffb6c1

-

-

lightsalmon

-

#ffa07a

-

-

lightseagreen

-

#20b2aa

-

-

lightskyblue

-

#87cefa

-

-

lightslategray

-

#778899

-

-

lightslategrey

-

#778899

-

-

lightsteelblue

-

#b0c4de

-

-

lightyellow

-

#ffffe0

-

-

lime

-

#00ff00

-

-

limegreen

-

#32cd32

-

-

linen

-

#faf0e6

-

-

magenta

-

#ff00ff

-

-

maroon

-

#800000

-

-

mediumaquamarine

-

#66cdaa

-

-

mediumblue

-

#0000cd

-

-

mediumorchid

-

#ba55d3

-

-

mediumpurple

-

#9370db

-

-

mediumseagreen

-

#3cb371

-

-

mediumslateblue

-

#7b68ee

-

-

mediumspringgreen

-

#00fa9a

-

-

mediumturquoise

-

#48d1cc

-

-

mediumvioletred

-

#c71585

-

-

midnightblue

-

#191970

-

-

mintcream

-

#f5fffa

-

-

mistyrose

-

#ffe4e1

-

-

moccasin

-

#ffe4b5

-

-

navajowhite

-

#ffdead

-

-

navy

-

#000080

-

-

oldlace

-

#fdf5e6

-

-

olive

-

#808000

-

-

olivedrab

-

#6b8e23

-

-

orange

-

#ffa500

-

-

orangered

-

#ff4500

-

-

orchid

-

#da70d6

-

-

palegoldenrod

-

#eee8aa

-

-

palegreen

-

#98fb98

-

-

paleturquoise

-

#afeeee

-

-

palevioletred

-

#db7093

-

-

papayawhip

-

#ffefd5

-

-

peachpuff

-

#ffdab9

-

-

peru

-

#cd853f

-

-

pink

-

#ffc0cb

-

-

plum

-

#dda0dd

-

-

powderblue

-

#b0e0e6

-

-

purple

-

#800080

-

-

rebeccapurple

-

#663399

-

-

red

-

#ff0000

-

-

rosybrown

-

#bc8f8f

-

-

royalblue

-

#4169e1

-

-

saddlebrown

-

#8b4513

-

-

salmon

-

#fa8072

-

-

sandybrown

-

#f4a460

-

-

seagreen

-

#2e8b57

-

-

seashell

-

#fff5ee

-

-

sienna

-

#a0522d

-

-

silver

-

#c0c0c0

-

-

skyblue

-

#87ceeb

-

-

slateblue

-

#6a5acd

-

-

slategray

-

#708090

-

-

slategrey

-

#708090

-

-

snow

-

#fffafa

-

-

springgreen

-

#00ff7f

-

-

steelblue

-

#4682b4

-

-

tan

-

#d2b48c

-

-

teal

-

#008080

-

-

thistle

-

#d8Bfd8

-

-

tomato

-

#ff6347

-

-

turquoise

-

#40e0d0

-

-

violet

-

#ee82ee

-

-

wheat

-

#f5deb3

-

-

white

-

#ffffff

-

-

whitesmoke

-

#f5f5f5

-

-

yellow

-

#ffff00

-

-

yellowgreen

-

#9acd32

-

-
+| Name | Hexadecimal Code | Color | +| -------------------- | ---------------- | ------------------------------------------------------------ | +| aliceblue | \#f0f8ff | ![en-us_image_0000001173324803](figures/en-us_image_0000001173324803.png) | +| antiquewhite | \#faebd7 | ![en-us_image_0000001127285014](figures/en-us_image_0000001127285014.png) | +| aqua | \#00ffff | ![en-us_image_0000001127285050](figures/en-us_image_0000001127285050.png) | +| aquamarine | \#7fffd4 | ![en-us_image_0000001173324729](figures/en-us_image_0000001173324729.png) | +| azure | \#f0ffff | ![en-us_image_0000001127285040](figures/en-us_image_0000001127285040.png) | +| beige | \#f5f5dc | ![en-us_image_0000001173324773](figures/en-us_image_0000001173324773.png) | +| bisque | \#ffe4c4 | ![en-us_image_0000001173164895](figures/en-us_image_0000001173164895.png) | +| black | \#000000 | ![en-us_image_0000001173324735](figures/en-us_image_0000001173324735.png) | +| blanchedalmond | \#ffebcd | ![en-us_image_0000001173164889](figures/en-us_image_0000001173164889.png) | +| blue | \#0000ff | ![en-us_image_0000001127125194](figures/en-us_image_0000001127125194.png) | +| blueviolet | \#8a2be2 | ![en-us_image_0000001127285046](figures/en-us_image_0000001127285046.png) | +| brown | \#a52a2a | ![en-us_image_0000001173324833](figures/en-us_image_0000001173324833.png) | +| burlywood | \#deB887 | ![en-us_image_0000001127285026](figures/en-us_image_0000001127285026.png) | +| cadetblue | \#5f9ea0 | ![en-us_image_0000001127125210](figures/en-us_image_0000001127125210.png) | +| chartreuse | \#7fff00 | ![en-us_image_0000001173324811](figures/en-us_image_0000001173324811.png) | +| chocolate | \#d2691e | ![en-us_image_0000001127125256](figures/en-us_image_0000001127125256.png) | +| coral | \#ff7f50 | ![en-us_image_0000001173164877](figures/en-us_image_0000001173164877.png) | +| cornflowerblue | \#6495ed | ![en-us_image_0000001173324781](figures/en-us_image_0000001173324781.png) | +| cornsilk | \#fff8dc | ![en-us_image_0000001127285048](figures/en-us_image_0000001127285048.png) | +| crimson | \#dc143c | ![en-us_image_0000001127285066](figures/en-us_image_0000001127285066.png) | +| cyan | \#00ffff | ![en-us_image_0000001173324789](figures/en-us_image_0000001173324789.png) | +| darkblue | \#00008b | ![en-us_image_0000001173164841](figures/en-us_image_0000001173164841.png) | +| darkcyan | \#008b8b | ![en-us_image_0000001173324745](figures/en-us_image_0000001173324745.png) | +| darkgoldenrod | \#b8860b | ![en-us_image_0000001173324835](figures/en-us_image_0000001173324835.png) | +| darkgray | \#a9a9a9 | ![en-us_image_0000001127285028](figures/en-us_image_0000001127285028.png) | +| darkgreen | \#006400 | ![en-us_image_0000001127284990](figures/en-us_image_0000001127284990.png) | +| darkgrey | \#a9a9a9 | ![en-us_image_0000001127125174](figures/en-us_image_0000001127125174.png) | +| darkkhaki | \#bdb76b | ![en-us_image_0000001127285070](figures/en-us_image_0000001127285070.png) | +| darkmagenta | \#8b008b | ![en-us_image_0000001173164875](figures/en-us_image_0000001173164875.png) | +| darkolivegreen | \#556b2f | ![en-us_image_0000001173164835](figures/en-us_image_0000001173164835.png) | +| darkorange | \#ff8c00 | ![en-us_image_0000001127125178](figures/en-us_image_0000001127125178.png) | +| darkorchid | \#9932cc | ![en-us_image_0000001173324829](figures/en-us_image_0000001173324829.png) | +| darkred | \#8b0000 | ![en-us_image_0000001173164851](figures/en-us_image_0000001173164851.png) | +| darksalmon | \#e9967a | ![en-us_image_0000001127284998](figures/en-us_image_0000001127284998.png) | +| darkseagreen | \#8fbc8f | ![en-us_image_0000001173324755](figures/en-us_image_0000001173324755.png) | +| darkslateblue | \#483d8b | ![en-us_image_0000001127125246](figures/en-us_image_0000001127125246.png) | +| darkslategray | \#2f4f4f | ![en-us_image_0000001127125190](figures/en-us_image_0000001127125190.png) | +| darkslategrey | \#2f4f4f | ![en-us_image_0000001173324759](figures/en-us_image_0000001173324759.png) | +| darkturquoise | \#00ced1 | ![en-us_image_0000001127284980](figures/en-us_image_0000001127284980.png) | +| darkviolet | \#9400d3 | ![en-us_image_0000001127285058](figures/en-us_image_0000001127285058.png) | +| deeppink | \#ff1493 | ![en-us_image_0000001173324767](figures/en-us_image_0000001173324767.png) | +| deepskyblue | \#00bfff | ![en-us_image_0000001173164897](figures/en-us_image_0000001173164897.png) | +| dimgray | \#696969 | ![en-us_image_0000001127285022](figures/en-us_image_0000001127285022.png) | +| dimgrey | \#696969 | ![en-us_image_0000001173164911](figures/en-us_image_0000001173164911.png) | +| dodgerblue | \#1e90ff | ![en-us_image_0000001173164855](figures/en-us_image_0000001173164855.png) | +| firebrick | \#b22222 | ![en-us_image_0000001127125234](figures/en-us_image_0000001127125234.png) | +| floralwhite | \#fffaf0 | ![en-us_image_0000001173324771](figures/en-us_image_0000001173324771.png) | +| forestgreen | \#228b22 | ![en-us_image_0000001173324825](figures/en-us_image_0000001173324825.png) | +| fuchsia | \#ff00ff | ![en-us_image_0000001127285052](figures/en-us_image_0000001127285052.png) | +| gainsboro | \#dcdcdc | ![en-us_image_0000001173164901](figures/en-us_image_0000001173164901.png) | +| ghostwhite | \#f8f8ff | ![en-us_image_0000001127285012](figures/en-us_image_0000001127285012.png) | +| gold | \#ffd700 | ![en-us_image_0000001173324761](figures/en-us_image_0000001173324761.png) | +| goldenrod | \#daa520 | ![en-us_image_0000001173324817](figures/en-us_image_0000001173324817.png) | +| gray | \#808080 | ![en-us_image_0000001127125238](figures/en-us_image_0000001127125238.png) | +| green | \#008000 | ![en-us_image_0000001173164865](figures/en-us_image_0000001173164865.png) | +| greenyellow | \#adff2f | ![en-us_image_0000001127285000](figures/en-us_image_0000001127285000.png) | +| grey | \#808080 | ![en-us_image_0000001127285054](figures/en-us_image_0000001127285054.png) | +| honeydew | \#f0fff0 | ![en-us_image_0000001173324813](figures/en-us_image_0000001173324813.png) | +| hotpink | \#ff69b4 | ![en-us_image_0000001127285016](figures/en-us_image_0000001127285016.png) | +| indianred | \#cd5c5c | ![en-us_image_0000001173164849](figures/en-us_image_0000001173164849.png) | +| indigo | \#4b0082 | ![en-us_image_0000001173324821](figures/en-us_image_0000001173324821.png) | +| ivory | \#fffff0 | ![en-us_image_0000001173164887](figures/en-us_image_0000001173164887.png) | +| khaki | \#f0e68c | ![en-us_image_0000001173324801](figures/en-us_image_0000001173324801.png) | +| lavender | \#e6e6fa | ![en-us_image_0000001127125188](figures/en-us_image_0000001127125188.png) | +| lavenderblush | \#fff0f5 | ![en-us_image_0000001173324809](figures/en-us_image_0000001173324809.png) | +| lawngreen | \#7cfc00 | ![en-us_image_0000001127125224](figures/en-us_image_0000001127125224.png) | +| lemonchiffon | \#fffacd | ![en-us_image_0000001173164879](figures/en-us_image_0000001173164879.png) | +| lightblue | \#add8e6 | ![en-us_image_0000001127125180](figures/en-us_image_0000001127125180.png) | +| lightcoral | \#f08080 | ![en-us_image_0000001127125228](figures/en-us_image_0000001127125228.png) | +| lightcyan | \#e0ffff | ![en-us_image_0000001173324799](figures/en-us_image_0000001173324799.png) | +| lightgoldenrodyellow | \#fafad2 | ![en-us_image_0000001127125218](figures/en-us_image_0000001127125218.png) | +| lightgray | \#d3d3d3 | ![en-us_image_0000001127284974](figures/en-us_image_0000001127284974.png) | +| lightgreen | \#90ee90 | ![en-us_image_0000001173324805](figures/en-us_image_0000001173324805.png) | +| lightpink | \#ffb6c1 | ![en-us_image_0000001127285038](figures/en-us_image_0000001127285038.png) | +| lightsalmon | \#ffa07a | ![en-us_image_0000001173324795](figures/en-us_image_0000001173324795.png) | +| lightseagreen | \#20b2aa | ![en-us_image_0000001173324737](figures/en-us_image_0000001173324737.png) | +| lightskyblue | \#87cefa | ![en-us_image_0000001127285042](figures/en-us_image_0000001127285042.png) | +| lightslategray | \#778899 | ![en-us_image_0000001127125226](figures/en-us_image_0000001127125226.png) | +| lightslategrey | \#778899 | ![en-us_image_0000001127125222](figures/en-us_image_0000001127125222.png) | +| lightsteelblue | \#b0c4de | ![en-us_image_0000001127284976](figures/en-us_image_0000001127284976.png) | +| lightyellow | \#ffffe0 | ![en-us_image_0000001173324807](figures/en-us_image_0000001173324807.png) | +| lime | \#00ff00 | ![en-us_image_0000001127285020](figures/en-us_image_0000001127285020.png) | +| limegreen | \#32cd32 | ![en-us_image_0000001127125236](figures/en-us_image_0000001127125236.png) | +| linen | \#faf0e6 | ![en-us_image_0000001173324739](figures/en-us_image_0000001173324739.png) | +| magenta | \#ff00ff | ![en-us_image_0000001127285044](figures/en-us_image_0000001127285044.png) | +| maroon | \#800000 | ![en-us_image_0000001127285018](figures/en-us_image_0000001127285018.png) | +| mediumaquamarine | \#66cdaa | ![en-us_image_0000001173164899](figures/en-us_image_0000001173164899.png) | +| mediumblue | \#0000cd | ![en-us_image_0000001127284968](figures/en-us_image_0000001127284968.png) | +| mediumorchid | \#ba55d3 | ![en-us_image_0000001127125216](figures/en-us_image_0000001127125216.png) | +| mediumpurple | \#9370db | ![en-us_image_0000001173324779](figures/en-us_image_0000001173324779.png) | +| mediumseagreen | \#3cb371 | ![en-us_image_0000001127125230](figures/en-us_image_0000001127125230.png) | +| mediumslateblue | \#7b68ee | ![en-us_image_0000001173164921](figures/en-us_image_0000001173164921.png) | +| mediumspringgreen | \#00fa9a | ![en-us_image_0000001173324793](figures/en-us_image_0000001173324793.png) | +| mediumturquoise | \#48d1cc | ![en-us_image_0000001127125214](figures/en-us_image_0000001127125214.png) | +| mediumvioletred | \#c71585 | ![en-us_image_0000001173164893](figures/en-us_image_0000001173164893.png) | +| midnightblue | \#191970 | ![en-us_image_0000001127125260](figures/en-us_image_0000001127125260.png) | +| mintcream | \#f5fffa | ![en-us_image_0000001127285030](figures/en-us_image_0000001127285030.png) | +| mistyrose | \#ffe4e1 | ![en-us_image_0000001173324785](figures/en-us_image_0000001173324785.png) | +| moccasin | \#ffe4b5 | ![en-us_image_0000001127125232](figures/en-us_image_0000001127125232.png) | +| navajowhite | \#ffdead | ![en-us_image_0000001173164925](figures/en-us_image_0000001173164925.png) | +| navy | \#000080 | ![en-us_image_0000001127285032](figures/en-us_image_0000001127285032.png) | +| oldlace | \#fdf5e6 | ![en-us_image_0000001127125184](figures/en-us_image_0000001127125184.png) | +| olive | \#808000 | ![en-us_image_0000001127125244](figures/en-us_image_0000001127125244.png) | +| olivedrab | \#6b8e23 | ![en-us_image_0000001173324839](figures/en-us_image_0000001173324839.png) | +| orange | \#ffa500 | ![en-us_image_0000001173164885](figures/en-us_image_0000001173164885.png) | +| orangered | \#ff4500 | ![en-us_image_0000001127284996](figures/en-us_image_0000001127284996.png) | +| orchid | \#da70d6 | ![en-us_image_0000001127285056](figures/en-us_image_0000001127285056.png) | +| palegoldenrod | \#eee8aa | ![en-us_image_0000001127125262](figures/en-us_image_0000001127125262.png) | +| palegreen | \#98fb98 | ![en-us_image_0000001127285006](figures/en-us_image_0000001127285006.png) | +| paleturquoise | \#afeeee | ![en-us_image_0000001173324757](figures/en-us_image_0000001173324757.png) | +| palevioletred | \#db7093 | ![en-us_image_0000001173164905](figures/en-us_image_0000001173164905.png) | +| papayawhip | \#ffefd5 | ![en-us_image_0000001127125248](figures/en-us_image_0000001127125248.png) | +| peachpuff | \#ffdab9 | ![en-us_image_0000001173324769](figures/en-us_image_0000001173324769.png) | +| peru | \#cd853f | ![en-us_image_0000001173164843](figures/en-us_image_0000001173164843.png) | +| pink | \#ffc0cb | ![en-us_image_0000001127125242](figures/en-us_image_0000001127125242.png) | +| plum | \#dda0dd | ![en-us_image_0000001173324831](figures/en-us_image_0000001173324831.png) | +| powderblue | \#b0e0e6 | ![en-us_image_0000001127285010](figures/en-us_image_0000001127285010.png) | +| purple | \#800080 | ![en-us_image_0000001127285002](figures/en-us_image_0000001127285002.png) | +| rebeccapurple | \#663399 | ![en-us_image_0000001173164907](figures/en-us_image_0000001173164907.png) | +| red | \#ff0000 | ![en-us_image_0000001127125254](figures/en-us_image_0000001127125254.png) | +| rosybrown | \#bc8f8f | ![en-us_image_0000001173324775](figures/en-us_image_0000001173324775.png) | +| royalblue | \#4169e1 | ![en-us_image_0000001127284972](figures/en-us_image_0000001127284972.png) | +| saddlebrown | \#8b4513 | ![en-us_image_0000001127125250](figures/en-us_image_0000001127125250.png) | +| salmon | \#fa8072 | ![en-us_image_0000001127285064](figures/en-us_image_0000001127285064.png) | +| sandybrown | \#f4a460 | ![en-us_image_0000001173324777](figures/en-us_image_0000001173324777.png) | +| seagreen | \#2e8b57 | ![en-us_image_0000001173324733](figures/en-us_image_0000001173324733.png) | +| seashell | \#fff5ee | ![en-us_image_0000001127285062](figures/en-us_image_0000001127285062.png) | +| sienna | \#a0522d | ![en-us_image_0000001173164917](figures/en-us_image_0000001173164917.png) | +| silver | \#c0c0c0 | ![en-us_image_0000001173324743](figures/en-us_image_0000001173324743.png) | +| skyblue | \#87ceeb | ![en-us_image_0000001127284970](figures/en-us_image_0000001127284970.png) | +| slateblue | \#6a5acd | ![en-us_image_0000001173164915](figures/en-us_image_0000001173164915.png) | +| slategray | \#708090 | ![en-us_image_0000001173324815](figures/en-us_image_0000001173324815.png) | +| slategrey | \#708090 | ![en-us_image_0000001127284982](figures/en-us_image_0000001127284982.png) | +| snow | \#fffafa | ![en-us_image_0000001173324731](figures/en-us_image_0000001173324731.png) | +| springgreen | \#00ff7f | ![en-us_image_0000001127285060](figures/en-us_image_0000001127285060.png) | +| steelblue | \#4682b4 | ![en-us_image_0000001127125240](figures/en-us_image_0000001127125240.png) | +| tan | \#d2b48c | ![en-us_image_0000001173324747](figures/en-us_image_0000001173324747.png) | +| teal | \#008080 | ![en-us_image_0000001173324741](figures/en-us_image_0000001173324741.png) | +| thistle | \#d8Bfd8 | ![en-us_image_0000001173164913](figures/en-us_image_0000001173164913.png) | +| tomato | \#ff6347 | ![en-us_image_0000001173164909](figures/en-us_image_0000001173164909.png) | +| turquoise | \#40e0d0 | ![en-us_image_0000001173164837](figures/en-us_image_0000001173164837.png) | +| violet | \#ee82ee | ![en-us_image_0000001127125258](figures/en-us_image_0000001127125258.png) | +| wheat | \#f5deb3 | ![en-us_image_0000001127285068](figures/en-us_image_0000001127285068.png) | +| white | \#ffffff | ![en-us_image_0000001173324823](figures/en-us_image_0000001173324823.png) | +| whitesmoke | \#f5f5f5 | ![en-us_image_0000001127284992](figures/en-us_image_0000001127284992.png) | +| yellow | \#ffff00 | ![en-us_image_0000001173324837](figures/en-us_image_0000001173324837.png) | +| yellowgreen | \#9acd32 | ![en-us_image_0000001173164923](figures/en-us_image_0000001173164923.png) | + + + diff --git a/en/application-dev/reference/arkui-js/js-components-basic-button.md b/en/application-dev/reference/arkui-js/js-components-basic-button.md index 771a5a55404f5bccfab8350837e74dc049bdc298..fcd20d610e482f7c58859e9d14702f9b15507be6 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-button.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-button.md @@ -1,338 +1,83 @@ -# button +# button -The **** component includes capsule, circle, text, arc, and download buttons. +The **\ -``` - -``` /* xxx.css */ .div-button { flex-direction: column; @@ -387,9 +129,6 @@ When the button type is **download**, the following methods are supported. text-color: white; background-color: #007dff; } -``` - -``` // xxx.js export default { data: { @@ -407,5 +146,4 @@ export default { } ``` -![](figures/1.png) - +![img](figures/1.png) \ No newline at end of file diff --git a/en/application-dev/reference/arkui-js/js-components-basic-chart.md b/en/application-dev/reference/arkui-js/js-components-basic-chart.md index c635eb624433b2333a8a912a531cf457912c8f9e..ebab10a944e177004cc4e3cac1b24cbb0eed802e 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-chart.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-chart.md @@ -1,1158 +1,375 @@ -# chart +# chart -The **** component displays line charts, gauge charts, and bar charts. +The **\** component displays line charts, gauge charts, and bar charts. -## Required Permissions +## Required Permissions None -## Child Component +## Child Component Not supported -## Attributes - -In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

type

-

string

-

line

-

No

-

Chart type. Dynamic modification is not supported. Available values include:

-
  • bar: bar chart
  • line: line chart
  • gauge: gauge chart
  • progress5+: circle chart of progresses
  • loading5+: circle chart of loading processes
  • rainbow5+: circle chart of proportions
-

options

-

ChartOptions

-

-

-

No

-

Chart parameters. You must set parameters for bar charts and line charts. Parameter settings for gauge charts do not take effect. You can set the minimum value, maximum value, scale, and line width of the x-axis or y-axis, whether to display the x-axis and y-axis, and whether the line is smooth. Dynamic modification is not supported.

-

datasets

-

Array<ChartDataset>

-

-

-

No

-

Data set. You must set data sets for bar charts and line charts. Data set for a gauge chart does not take effect. You can set multiple datasets and their background colors.

-

segments5+

-

DataSegment | Array<DataSegment>

-

-

-

No

-

Data structures used by progress, loading, and rainbow charts.

-

DataSegment is available for progress and loading charts.

-

Array<DataSegment> is available for rainbow charts. A maximum of nine DataSegment are supported in the array.

-

-
-

effects5+

-

boolean

-

true

-

No

-

Whether to enable the effects for progress and rainbow charts.

-

-
-

animationduration6+

-

number

-

3000

-

No

-

Animation duration for expanding a rainbow chart, in milliseconds.

-

-
-
- -**Table 1** ChartOptions - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

xAxis

-

ChartAxis

-

-

-

Yes

-

X-axis parameters. You can set the minimum value, maximum value, and scale of the x-axis, and whether to display the x-axis.

-

yAxis

-

ChartAxis

-

-

-

Yes

-

Y-axis parameters. You can set the minimum value, maximum value, and scale of the y-axis, and whether to display the y-axis.

-

series

-

ChartSeries

-

-

-

No

-

Data sequence parameters.

-
  • Line style, such as the line width and whether the line is smooth.
  • Style and size of the white point at the start of the line.
-
NOTE:

Only line charts support this attribute.

-
-
- -**Table 2** ChartDataset - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

strokeColor

-

<color>

-

#ff6384

-

No

-

Line color.

-
NOTE:

Only line charts support this attribute.

-
-

fillColor

-

<color>

-

#ff6384

-

No

-

Fill color. For line charts, the value indicates the gradient color to fill.

-

data

-

Array<number> | Array<Point>5+

-

-

-

Yes

-

Data of the drawn line or bar.

-

gradient

-

boolean

-

false

-

No

-

Whether to display the gradient color.

-
NOTE:

Only line charts support this attribute.

-
-
- -**Table 3** ChartAxis - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

min

-

number

-

0

-

No

-

Minimum value of the axis.

-
NOTE:

Only line charts support negative numbers.

-
-

max

-

number

-

100

-

No

-

Maximum value of the axis.

-
NOTE:

Only line charts support negative numbers.

-
-

axisTick

-

number

-

10

-

No

-

Number of scales displayed on the axis.

-
NOTE:

The value ranges from 1 to 20. The display effect depends on the calculation result of Number of pixels occupied by the image width/(max-min).

-

In the bar chart, the number of bars in each group of data is the same as the number of scales, and the bars are displayed at the scales.

-
-

display

-

boolean

-

false

-

No

-

Whether to display the axis.

-

color

-

<color>

-

#c0c0c0

-

No

-

Axis color.

-
- -**Table 4** ChartSeries - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

lineStyle

-

ChartLineStyle

-

-

-

No

-

Line style, such as the line width and whether the line is smooth.

-

headPoint

-

PointStyle

-

-

-

No

-

Style and size of the white point at the start of the line.

-

topPoint

-

PointStyle

-

-

-

No

-

Style and size of the top point.

-

bottomPoint

-

PointStyle

-

-

-

No

-

Style and size of the bottom point.

-

loop

-

ChartLoop

-

-

-

No

-

Whether to start drawing again when the screen is looped.

-
- -**Table 5** ChartLineStyle - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

width

-

<length>

-

1px

-

No

-

Line width.

-

smooth

-

boolean

-

false

-

No

-

Whether the line is smooth.

-
- -**Table 6** PointStyle - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

shape

-

string

-

circle

-

No

-

Shape of the highlight point. Available values are as follows:

-
  • Circle
  • Square
  • Triangle
-

size

-

<length>

-

5px

-

No

-

Size of the highlight point.

-

strokeWidth

-

<length>

-

1px

-

No

-

Stroke width.

-

strokeColor

-

<color>

-

#ff0000

-

No

-

Frame color.

-

fillColor

-

<color>

-

#ff0000

-

No

-

Fill color.

-
- -**Table 7** ChartLoop - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

margin

-

<length>

-

1

-

No

-

Number of erased points (horizontal distance between the latest drawn point and the earliest point). You are not advised to use margin together with topPoint, bottomPoint, or headPoint for lite devices. If you do so, there is a possibility that the point is in the erase area and invisible.

-

gradient

-

boolean

-

false

-

No

-

Whether to perform gradient erase.

-
- -**Table 8** Point5+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

value

-

number

-

0

-

Yes

-

Y coordinate of the point to draw.

-

pointStyle

-

PointStyle

-

-

-

No

-

Style of the point.

-

description

-

string

-

-

-

No

-

Description text of the point.

-

textLocation

-

string

-

-

-

No

-

Description text position relative to the point. Available values are as follows:

-

top: above the point

-

bottom: below the point

-

none: not displayed

-

textColor

-

<color>

-

#000000

-

No

-

Color of the description text.

-

lineDash

-

string

-

solid

-

No

-

Dashed line pattern. You can set the dash length and space length between the dashes. For example, "dashed, 5, 5" indicates a dashed line with each dash in 5 px and a 5 px space between each two dashes. Default value "solid" indicates a solid line.

-

lineColor

-

<color>

-

#000000

-

No

-

Line color. If this attribute is not set, the strokeColor is used by default.

-
- -**Table 9** DataSegment5+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

startColor

-

Color

-

-

-

No

-

Color of the start position. If this attribute is set, endColor must be set. If this attribute is not set, the default color array preset in the system is used. For details about the color values, see the next table.

-

endColor

-

Color

-

-

-

No

-

Color of the end position. If this attribute is set, startColor must be set.

-

If this attribute is not set, the default color array preset in the system is used.

-

value

-

number

-

0

-

Yes

-

Percentage for the current data segment. The maximum value is 100.

-

name

-

string

-

-

-

No

-

Name of this data segment.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Data Segment

-

Light Mode

-

Dark Mode

-

0

-

Start color: #f7ce00; end color: #f99b11

-

Start color: #d1a738; end color: #eb933d

-

1

-

Start color: #f76223; end color: #f2400a

-

Start color: #e67d50; end color: #d9542b

-

2

-

Start color: #f772ac; end color: #e65392

-

Start color: #d5749e; end color: #d6568d

-

3

-

Start color: #a575eb; end color: #a12df7

-

Start color: #9973d1; end color: #5552d9

-

4

-

Start color: #7b79f7; end color: #4b48f7

-

Start color: #7977d9; end color: #f99b11

-

5

-

Start color: #4b8af3; end color: #007dff

-

Start color: #4c81d9; end color: #217bd9

-

6

-

Start color: #73c1e6; end color: #4fb4e3

-

Start color: #5ea6d1; end color: #4895c2

-

7

-

Start color: #a5d61d; end color: #69d14f

-

Start color: #91c23a; end color: #70ba5d

-

8

-

Start color: #a2a2b0; end color: #8e8e93

-

Start color: #8c8c99; end color: #6b6b76

-
+## Attributes + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + +| Name | Type | Default Value | Mandatory | Description | +| ------------------- | ------------------------------------------------------------ | ------------- | --------- | ------------------------------------------------------------ | +| type | string | line | No | Chart type. Dynamic modification is not supported. Available values include:
-**bar**: bar chart
-**line**: line chart
-**gauge**: gauge chart
-**progress**5+: circle chart of progresses
-**loading**5+: circle chart of loading processes
-**rainbow**5+: circle chart of proportions | +| options | [ChartOptions](js-components-basic-chart.md) | - | No | Chart parameters. You must set parameters for bar charts and line charts. Parameter settings for gauge charts do not take effect. You can set the minimum value, maximum value, scale, and line width of the x-axis or y-axis, whether to display the x-axis and y-axis, and whether the line is smooth. Dynamic modification is not supported. | +| datasets | Array\<[ChartDataset](js-components-basic-chart.md)> | - | No | Data set. You must set data sets for bar charts and line charts. Data set for a gauge chart does not take effect. You can set multiple datasets and their background colors. | +| segments5+ | [DataSegment](js-components-basic-chart.md) \| Array\<[DataSegment](js-components-basic-chart.md)> | - | No | Data structures used by **progress**, **loading**, and **rainbow** charts.**DataSegment** is available for **progress** and **loading** charts.**Array\<[DataSegment](js-components-basic-chart.md)>** is available for **rainbow** charts. A maximum of nine **DataSegment** are supported in the array. | +| effects5+ | boolean | true | No | Whether to enable the effects for **progress** and **rainbow** charts. | +| animationduration6+ | number | 3000 | No | Animation duration for expanding a **rainbow** chart, in milliseconds. | + +**Table 1** ChartOptions + + + +| Name | Type | Default Value | Mandatory | Description | +| ------ | ------------------------------------------- | ------------- | --------- | ------------------------------------------------------------ | +| xAxis | [ChartAxis](js-components-basic-chart.md) | - | Yes | X-axis parameters. You can set the minimum value, maximum value, and scale of the x-axis, and whether to display the x-axis. | +| yAxis | [ChartAxis](js-components-basic-chart.md) | - | Yes | Y-axis parameters. You can set the minimum value, maximum value, and scale of the y-axis, and whether to display the y-axis. | +| series | [ChartSeries](js-components-basic-chart.md) | - | No | Data sequence parameters.
-Line style, such as the line width and whether the line is smooth.
-Style and size of the white point at the start of the line.NOTE:Only line charts support this attribute. | + +**Table 2** ChartDataset + + + +| Name | Type | Default Value | Mandatory | Description | +| ----------- | ------------------------------------------------------------ | ------------- | --------- | ------------------------------------------------------------ | +| strokeColor | \ | #ff6384 | No | Line color.NOTE:Only line charts support this attribute. | +| fillColor | \ | #ff6384 | No | Fill color. For line charts, the value indicates the gradient color to fill. | +| data | Array\ \| Array\<[Point](js-components-basic-chart.md)>5+ | - | Yes | Data of the drawn line or bar. | +| gradient | boolean | false | No | Whether to display the gradient color.NOTE:Only line charts support this attribute. | + +**Table 3** ChartAxis + + + +| Name | Type | Default Value | Mandatory | Description | +| -------- | ------- | ------------- | --------- | ------------------------------------------------------------ | +| min | number | 0 | No | Minimum value of the axis.NOTE:Only line charts support negative numbers. | +| max | number | 100 | No | Maximum value of the axis.NOTE:Only line charts support negative numbers. | +| axisTick | number | 10 | No | Number of scales displayed on the axis.NOTE:The value ranges from 1 to 20. The display effect depends on the calculation result of Number of pixels occupied by the image width/(**max**-**min**).In the bar chart, the number of bars in each group of data is the same as the number of scales, and the bars are displayed at the scales. | +| display | boolean | false | No | Whether to display the axis. | +| color | \ | #c0c0c0 | No | Axis color. | + +**Table 4** ChartSeries + + + +| Name | Type | Default Value | Mandatory | Description | +| ----------- | ---------------------------------------------- | ------------- | --------- | ------------------------------------------------------------ | +| lineStyle | [ChartLineStyle](js-components-basic-chart.md) | - | No | Line style, such as the line width and whether the line is smooth. | +| headPoint | [PointStyle](js-components-basic-chart.md) | - | No | Style and size of the white point at the start of the line. | +| topPoint | [PointStyle](js-components-basic-chart.md) | - | No | Style and size of the top point. | +| bottomPoint | [PointStyle](js-components-basic-chart.md) | - | No | Style and size of the bottom point. | +| loop | [ChartLoop](js-components-basic-chart.md) | - | No | Whether to start drawing again when the screen is looped. | + +**Table 5** ChartLineStyle + + + +| Name | Type | Default Value | Mandatory | Description | +| ------ | -------- | ------------- | --------- | --------------------------- | +| width | \ | 1px | No | Line width. | +| smooth | boolean | false | No | Whether the line is smooth. | + +**Table 6** PointStyle + + + +| Name | Type | Default Value | Mandatory | Description | +| ----------- | -------- | ------------- | --------- | ------------------------------------------------------------ | +| shape | string | circle | No | Shape of the highlight point. Available values are as follows:
-Circle
-Square
-Triangle | +| size | \ | 5px | No | Size of the highlight point. | +| strokeWidth | \ | 1px | No | Stroke width. | +| strokeColor | \ | #ff0000 | No | Frame color. | +| fillColor | \ | #ff0000 | No | Fill color. | + +**Table 7** ChartLoop + + + +| Name | Type | Default Value | Mandatory | Description | +| -------- | -------- | ------------- | --------- | ------------------------------------------------------------ | +| margin | \ | 1 | No | Number of erased points (horizontal distance between the latest drawn point and the earliest point). You are not advised to use **margin** together with **topPoint**, **bottomPoint**, or **headPoint** for lite devices. If you do so, there is a possibility that the point is in the erase area and invisible. | +| gradient | boolean | false | No | Whether to perform gradient erase. | + +**Table 8** Point5+ + + + +| Name | Type | Default Value | Mandatory | Description | +| ------------ | ------------------------------------------ | ------------- | --------- | ------------------------------------------------------------ | +| value | number | 0 | Yes | Y coordinate of the point to draw. | +| pointStyle | [PointStyle](js-components-basic-chart.md) | - | No | Style of the point. | +| description | string | - | No | Description text of the point. | +| textLocation | string | - | No | Description text position relative to the point. Available values are as follows:**top**: above the point**bottom**: below the point**none**: not displayed | +| textColor | \ | #000000 | No | Color of the description text. | +| lineDash | string | solid | No | Dashed line pattern. You can set the dash length and space length between the dashes. For example, **"dashed, 5, 5"** indicates a dashed line with each dash in 5 px and a 5 px space between each two dashes. Default value **"solid"** indicates a solid line. | +| lineColor | \ | #000000 | No | Line color. If this attribute is not set, the **strokeColor** is used by default. | + +**Table 9** DataSegment5+ + + + +| Name | Type | Default Value | Mandatory | Description | +| ---------- | ------ | ------------- | --------- | ------------------------------------------------------------ | +| startColor | Color | - | No | Color of the start position. If this attribute is set, **endColor** must be set. If this attribute is not set, the default color array preset in the system is used. For details about the color values, see the next table. | +| endColor | Color | - | No | Color of the end position. If this attribute is set, **startColor** must be set.If this attribute is not set, the default color array preset in the system is used. | +| value | number | 0 | Yes | Percentage for the current data segment. The maximum value is **100**. | +| name | string | - | No | Name of this data segment. | + + + +| Data Segment | Light Mode | Dark Mode | +| ------------ | ---------------------------------------- | ---------------------------------------- | +| 0 | Start color: #f7ce00; end color: #f99b11 | Start color: #d1a738; end color: #eb933d | +| 1 | Start color: #f76223; end color: #f2400a | Start color: #e67d50; end color: #d9542b | +| 2 | Start color: #f772ac; end color: #e65392 | Start color: #d5749e; end color: #d6568d | +| 3 | Start color: #a575eb; end color: #a12df7 | Start color: #9973d1; end color: #5552d9 | +| 4 | Start color: #7b79f7; end color: #4b48f7 | Start color: #7977d9; end color: #f99b11 | +| 5 | Start color: #4b8af3; end color: #007dff | Start color: #4c81d9; end color: #217bd9 | +| 6 | Start color: #73c1e6; end color: #4fb4e3 | Start color: #5ea6d1; end color: #4895c2 | +| 7 | Start color: #a5d61d; end color: #69d14f | Start color: #91c23a; end color: #70ba5d | +| 8 | Start color: #a2a2b0; end color: #8e8e93 | Start color: #8c8c99; end color: #6b6b76 | For gauge charts, the following attribute is supported. - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

percent

-

number

-

0

-

No

-

Percentage of the current value to the total value. The value ranges from 0 to 100.

-
- -## Styles - -In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

stroke-width

-

<length>

-

32px (gauge charts)

-

24px (rainbow charts)

-

No

-

Width of the scale bar for gaugeand rainbow charts.

-

start-angle

-

<deg>

-

240 (gauge charts)

-

0 (rainbow charts)

-

No

-

Start angle of the scale bar for gauge and rainbow charts, which starts from the direction of zero o'clock. The value ranges from 0 to 360.

-

total-angle

-

<deg>

-

240 (gauge charts)

-

360 (rainbow charts)

-

No

-

Total length of the scale bar for gauge and rainbow charts. The value ranges from –360 to 360. A negative number indicates the anticlockwise direction.

-

center-x

-

<length>

-

-

-

No

-

Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the position style in the common styles, and must be used together with center-y and radius. This style is supported by the gauge chart only.

-

center-y

-

<length>

-

-

-

No

-

Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the position style in the common styles, and must be used together with center-x and radius. This style is supported by the gauge chart only.

-

radius

-

<length>

-

-

-

No

-

Radius of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the width and height in the common styles, and must be used together with center-x and center-y. This style is supported by the gauge chart only.

-

colors

-

Array

-

-

-

No

-

Color of each section for the scale bar of the gauge component.

-

For example, colors: #ff0000, #00ff00. This style is supported by the gauge chart only.

-

weights

-

Array

-

-

-

No

-

Weight of each section for the scale bar of the gauge component.

-

For example, weights: 2, 2. This style is supported by the gauge chart only.

-

font-family5+

-

Array

-

-

-

No

-

Font style of the description text. You can use Custom Font Styles.

-

font-size5+

-

<length>

-

-

-

No

-

Font size of the description text.

-
- -## Events - -Events in [Universal Events](js-components-common-events.md) are supported. - -## Methods - -In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. - - - - - - - - - - - - -

Method

-

Parameter

-

Description

-

append

-

{

-

serial: number, // Set the data subscript of the line chart to be updated.

-

data: Array<number>, // Set the new data.

-

}

-

Data is dynamically added to an existing data sequence. The target sequence is specified based on serial, which is the subscript of the datasets array and starts from 0. datasets[index].data is not updated. Only line charts support this attribute. The value is incremented by 1 based on the horizontal coordinate and is related to the xAxis min/max setting.

-
- -## Example Code - -1. Line chart - - ``` - -
- - - - - -
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - } - .chart-region { - height: 400px; - width: 700px; - } - .chart-background { - object-fit: fill; - } - .chart-data { - width: 700px; - height: 600px; - } - button { - width: 100%; - height: 50px; - background-color: #F4F2F1; - text-color: #0C81F3; - } - ``` - - ``` - // 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: 20, - 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] - }) - } - } - ``` - - ![](figures/en-us_image_0000001173324843.png) - -2. Bar chart - - ``` - -
- - - - -
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - } - .data-region { - height: 400px; - width: 700px; - } - .data-background { - object-fit: fill; - } - .data-bar { - width: 700px; - height: 400px; - } - ``` - - ``` - // 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, - }, - }, - } - } - ``` - - ![](figures/en-us_image_0000001173164929.png) - -3. Gauge chart - - ``` - -
-
- -
-
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - } - .gauge-region { - height: 400px; - width: 400px; - } - .data-gauge { - colors: #83f115, #fd3636, #3bf8ff; - weights: 4, 2, 1; - } - ``` - - ![](figures/en-us_image_0000001127125264.png) + +| Name | Type | Default Value | Mandatory | Description | +| ------- | ------ | ------------- | --------- | ------------------------------------------------------------ | +| percent | number | 0 | No | Percentage of the current value to the total value. The value ranges from 0 to 100. | + +## Styles + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + +| Name | Type | Default Value | Mandatory | Description | +| ------------- | -------- | ------------------------------------------------ | --------- | ------------------------------------------------------------ | +| stroke-width | \ | 32px (**gauge** charts)24px (**rainbow** charts) | No | Width of the scale bar for **gauge**and **rainbow** charts. | +| start-angle | \ | 240 (**gauge** charts)0 (**rainbow** charts) | No | Start angle of the scale bar for **gauge** and **rainbow** charts, which starts from the direction of zero o'clock. The value ranges from 0 to 360. | +| total-angle | \ | 240 (**gauge** charts)360 (**rainbow** charts) | No | Total length of the scale bar for **gauge** and **rainbow** charts. The value ranges from –360 to 360. A negative number indicates the anticlockwise direction. | +| center-x | \ | - | No | Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the **position** style in the common styles, and must be used together with **center-y** and **radius**. This style is supported by the gauge chart only. | +| center-y | \ | - | No | Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the **position** style in the common styles, and must be used together with **center-x** and **radius**. This style is supported by the gauge chart only. | +| radius | \ | - | No | Radius of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the **width** and **height** in the common styles, and must be used together with **center-x** and **center-y**. This style is supported by the gauge chart only. | +| colors | Array | - | No | Color of each section for the scale bar of the gauge component.For example, **colors: #ff0000, #00ff00**. This style is supported by the gauge chart only. | +| weights | Array | - | No | Weight of each section for the scale bar of the gauge component.For example, weights: 2, 2. This style is supported by the gauge chart only. | +| font-family5+ | Array | - | No | Font style of the description text. You can use [Custom Font Styles](js-components-common-customizing-font.md). | +| font-size5+ | \ | - | No | Font size of the description text. | + +## Events + +Events in [Universal Events](js-components-common-events.md) are supported. + +## Methods + +In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. + + + +| Method | Parameter | Description | +| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | +| append | {serial: number, // Set the data subscript of the line chart to be updated.data: Array\, // Set the new data.} | Data is dynamically added to an existing data sequence. The target sequence is specified based on **serial**, which is the subscript of the datasets array and starts from 0. **datasets[index].data** is not updated. Only line charts support this attribute. The value is incremented by 1 based on the horizontal coordinate and is related to the **xAxis min/max** setting. | + +## Example Code + +1. Line chart + + ``` + +
+ + + + + +
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + } + .chart-region { + height: 400px; + width: 700px; + } + .chart-background { + object-fit: fill; + } + .chart-data { + width: 700px; + height: 600px; + } + button { + width: 100%; + height: 50px; + background-color: #F4F2F1; + text-color: #0C81F3; + } + ``` + + ``` + // 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: 20, + 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] + }) + } + } + ``` + + ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324843.png) + +2. Bar chart + + ``` + +
+ + + + +
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + } + .data-region { + height: 400px; + width: 700px; + } + .data-background { + object-fit: fill; + } + .data-bar { + width: 700px; + height: 400px; + } + ``` + + ``` + // 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, + }, + }, + } + } + ``` + + ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164929.png) + +3. Gauge chart + + ``` + +
+
+ +
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + } + .gauge-region { + height: 400px; + width: 400px; + } + .data-gauge { + colors: #83f115, #fd3636, #3bf8ff; + weights: 4, 2, 1; + } + ``` + + ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125264.png) \ No newline at end of file diff --git a/en/application-dev/reference/arkui-js/js-components-basic-divider.md b/en/application-dev/reference/arkui-js/js-components-basic-divider.md index c8bb190dbaeacebddbc1325c9ef0ff41b96124d5..c4c3567aed2a23bc53320830765024d62dfa5735 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-divider.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-divider.md @@ -1,212 +1,56 @@ -# divider +# divider -The **** component is used to separate content blocks and content elements. It can be used for the list or UI layout. +The **\** component is used to separate content blocks and content elements. It can be used for the list or UI layout. -## Required Permissions +## Required Permissions None -## Child Components +## Child Components Not supported -## Attributes - -In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

vertical

-

boolean

-

false

-

No

-

Whether to use the vertical divider. The default value is false, indicating that the horizontal divider is used.

-
- ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->The **focusable** and **disabled** attributes are not supported. - -## Styles +## Attributes + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + +| Name | Type | Default Value | Mandatory | Description | +| -------- | ------- | ------------- | --------- | ------------------------------------------------------------ | +| vertical | boolean | false | No | Whether to use the vertical divider. The default value is **false**, indicating that the horizontal divider is used. | + +> ![img](public_sys-resources/icon-note.gif) **NOTE:** The **focusable** and **disabled** attributes are not supported. + +## Styles Only the following style attributes are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

margin

-

<length>

-

0

-

No

-

Shorthand attribute to set all margins in a declaration. You can set 1 to 4 values.

-

margin-[left|top|right|bottom]

-

<length>

-

0

-

No

-

Shorthand attribute of the length type to set left, top, right, and bottom margins attributes. Its unit is px and default value is 0.

-

color

-

<color>

-

#08000000

-

No

-

Color of the divider.

-

stroke-width

-

<length>

-

1

-

No

-

Width of the divider.

-

display

-

string

-

flex

-

No

-

Type of the bounding box generated by the divider. The value can be flex or none. The default value is flex.

-

visibility

-

string

-

visible

-

No

-

Whether to display the divider. Invisible dividers also occupy space. visible indicates that the divider is displayed, and hidden indicates that the divider is not displayed.

-

line-cap

-

string

-

butt

-

No

-

Cap style of the divider. The default value is butt. Available values are as follows:

-
  • butt: The ends of the divider are squared off.
  • round: A rounded cap is added to each end of the divider.
  • square: A square cap is added to each end of the divider.
-
NOTE:

If the value is round or square, the line length increases by the line width.

-
-

flex

-

number

-

-

-

No

-

How to divide available space of the parent component for each child component. This is a shorthand attribute to set the flex-grow attribute.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value 0 indicates that the child component does not grow.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

-

flex-shrink

-

number

-

1

-

No

-

How much a child component will shrink. The shrink occurs only when the sum of default element widths is greater than that of the parent component. Value 0 indicates that the child component does not shrink.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of a child component on the main axis

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-
- -## Events + + +| Name | Type | Default Value | Mandatory | Description | +| --------------------------------- | -------- | ------------- | --------- | ------------------------------------------------------------ | +| margin | \ | 0 | No | Shorthand attribute to set all margins in a declaration. You can set 1 to 4 values. | +| margin-[left\|top\|right\|bottom] | \ | 0 | No | Shorthand attribute of the length type to set left, top, right, and bottom margins attributes. Its unit is px and default value is **0**. | +| color | \ | #08000000 | No | Color of the divider. | +| stroke-width | \ | 1 | No | Width of the divider. | +| display | string | flex | No | Type of the bounding box generated by the divider. The value can be **flex** or **none**. The default value is **flex**. | +| visibility | string | visible | No | Whether to display the divider. Invisible dividers also occupy space. **visible** indicates that the divider is displayed, and **hidden** indicates that the divider is not displayed. | +| line-cap | string | butt | No | Cap style of the divider. The default value is **butt**. Available values are as follows:
-**butt**: The ends of the divider are squared off.
-**round**: A rounded cap is added to each end of the divider.
-**square**: A square cap is added to each end of the divider.NOTE:If the value is **round** or **square**, the line length increases by the line width. | +| flex | number | - | No | How to divide available space of the parent component for each child component. This is a shorthand attribute to set the **flex-grow** attribute.NOTE:This attribute takes effect only when the parent component is **\
**, **\**, or **\**. | +| flex-grow | number | 0 | No | How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value **0** indicates that the child component does not grow.NOTE:This attribute takes effect only when the parent component is **\
**, **\**, or **\**. | +| flex-shrink | number | 1 | No | How much a child component will shrink. The shrink occurs only when the sum of default element widths is greater than that of the parent component. Value **0** indicates that the child component does not shrink.NOTE:This attribute takes effect only when the parent component is **\
**, **\**, or **\**. | +| flex-basis | \ | - | No | Initial length of a child component on the main axisNOTE:This attribute takes effect only when the parent component is **\
**, **\**, or **\**. | + +## Events Not supported -## Methods +## Methods Not supported -## Example +## Example ``` @@ -215,9 +59,6 @@ Not supported
-``` - -``` /* xxx.css */ .container { margin: 20px; @@ -242,5 +83,4 @@ Not supported } ``` -![](figures/1-1.jpg) - +![img](figures/1-1.jpg) \ No newline at end of file diff --git a/en/application-dev/reference/arkui-js/js-components-basic-image-animator.md b/en/application-dev/reference/arkui-js/js-components-basic-image-animator.md index 8dfd02bd6d6090751ae8b212c8762b9deda2a046..c17bef00354066d929d50f9e44b55041e3d6c2cf 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-image-animator.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-image-animator.md @@ -1,297 +1,72 @@ -# image-animator +# image-animator -The **** component is used to provide an image frame animator. +The **\** component is used to provide an image frame animator. -## Child Component +## Child Component Not supported -## Attributes +## Attributes -In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

images

-

Array<ImageFrame>

-

-

-

Yes

-

Image frame information. The frame information includes the image path, size, and location. Currently, the following image formats are supported: PNG and JPG. For details about ImageFrame, see Table 1.

-
NOTE:

Set this attribute using data binding, for example, images = {{images}}. Declare the corresponding variable images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}] in the JavaScript.

-

Declare the variable images: [{src: "/common/heart-rate01.png", duration: "100"}, {src: "/common/heart-rate02.png", duration: "200"}] in the JavaScript. You can set the duration (in milliseconds) of each image frame. 6+

-
-

predecode6+

-

number

-

0

-

No

-

Whether to enable pre-decoding. The default value is 0, indicating that pre-decoding is disabled. If this parameter is set to 2, the last two images are loaded to the cache in advance to improve the performance when the current page is played.

-

iteration

-

number | string

-

infinite

-

No

-

Number of times that the frame animation is played. number indicates a fixed number of playback operations, and infinite indicates an unlimited number of playback operations.

-

reverse

-

boolean

-

false

-

No

-

Playback sequence. The value false indicates that images are played from the first one to the last one, and true indicates that images are played from the last one to the first one.

-

fixedsize

-

boolean

-

true

-

No

-

Whether the image size is fixed to the widget size. true: The image size is the same as the widget size. In this case, the width, height, top, and left attributes of the image are invalid. false: The width, height, top, and left attributes of each image must be set separately.

-

duration

-

string

-

-

-

Yes

-

Single video playback duration. The unit can be s (standing for seconds) or ms. The default unit is ms. If the value is 0, no image is played. The value change takes effect only at the start of the next cycle. If image-specific durations have been set, the settings of this attribute do not take effect.

-

fillmode5+

-

string

-

forwards

-

No

-

Status of the frame animation after its playback is complete. Available values are as follows:

-
  • none: Restores to the initial status.
  • forwards: Retains the ending status defined for the last key frame.
-
-**Table 1** ImageFrame description - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

src

-

<uri>

-

-

-

Yes

-

Image path. The image format can be SVG, PNG, or JPG.

-

width

-

<length>

-

0

-

No

-

Image width

-

height

-

<length>

-

0

-

No

-

Image height

-

top

-

<length>

-

0

-

No

-

Vertical coordinate of the image relative to the upper left corner of the widget

-

left

-

<length>

-

0

-

No

-

Horizontal coordinate of the image relative to the upper left corner of the widget

-

duration6+

-

number

-

-

-

No

-

Playback duration of each image frame, in milliseconds.

-
+| Name | Type | Default Value | Mandatory | Description | +| ----------- | ----------------- | ------------- | --------- | ------------------------------------------------------------ | +| images | Array\ | - | Yes | Image frame information. The frame information includes the image path, size, and location. Currently, the following image formats are supported: PNG and JPG. For details about **ImageFrame**, see [Table 1](js-components-basic-image-animator.md#table67453165913).NOTE:Set this attribute using data binding, for example, **images = {{images}}**. Declare the corresponding variable **images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]** in the JavaScript.Declare the variable **images: [{src: "/common/heart-rate01.png", duration: "100"}, {src: "/common/heart-rate02.png", duration: "200"}]** in the JavaScript. You can set the duration (in milliseconds) of each image frame. 6+ | +| predecode6+ | number | 0 | No | Whether to enable pre-decoding. The default value is 0, indicating that pre-decoding is disabled. If this parameter is set to 2, the last two images are loaded to the cache in advance to improve the performance when the current page is played. | +| iteration | number \| string | infinite | No | Number of times that the frame animation is played. **number** indicates a fixed number of playback operations, and **infinite** indicates an unlimited number of playback operations. | +| reverse | boolean | false | No | Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one. | +| fixedsize | boolean | true | No | Whether the image size is fixed to the widget size. **true**: The image size is the same as the widget size. In this case, the width, height, top, and left attributes of the image are invalid. **false**: The width, height, top, and left attributes of each image must be set separately. | +| duration | string | - | Yes | Single video playback duration. The unit can be s (standing for seconds) or ms. The default unit is ms. If the value is **0**, no image is played. The value change takes effect only at the start of the next cycle. If image-specific durations have been set, the settings of this attribute do not take effect. | +| fillmode5+ | string | forwards | No | Status of the frame animation after its playback is complete. Available values are as follows:
-**none**: Restores to the initial status.
-**forwards**: Retains the ending status defined for the last key frame. | -## Styles +**Table 1** ImageFrame description -Styles in [Universal Styles](js-components-common-styles.md) are supported. -## Events -In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. +| Name | Type | Default Value | Mandatory | Description | +| ---------- | -------- | ------------- | --------- | ------------------------------------------------------------ | +| src | \ | - | Yes | Image path. The image format can be SVG, PNG, or JPG. | +| width | \ | 0 | No | Image width | +| height | \ | 0 | No | Image height | +| top | \ | 0 | No | Vertical coordinate of the image relative to the upper left corner of the widget | +| left | \ | 0 | No | Horizontal coordinate of the image relative to the upper left corner of the widget | +| duration6+ | number | - | No | Playback duration of each image frame, in milliseconds. | - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

start

-

-

-

Triggered when the frame animation starts

-

pause

-

-

-

Triggered when the frame animation pauses

-

stop

-

-

-

Triggered when the frame animation stops

-

resume

-

-

-

Triggered when the frame animation resumes

-
+## Styles -## Methods +Styles in [Universal Styles](js-components-common-styles.md) are supported. -In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. +## Events - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

start

-

-

-

Starts to play the frame animation of an image. If this method is called again, the playback starts from the first frame.

-

pause

-

-

-

Pauses the frame animation playback of an image.

-

stop

-

-

-

Stops the frame animation playback of an image.

-

resume

-

-

-

Resumes the frame animation playback of an image.

-

getState

-

-

-

Obtains the playback state. Available values are as follows:

-
  • Playing
  • Paused
  • Stopped
-
+In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. -## Example Code + + +| Name | Parameter | Description | +| ------ | --------- | ------------------------------------------ | +| start | - | Triggered when the frame animation starts | +| pause | - | Triggered when the frame animation pauses | +| stop | - | Triggered when the frame animation stops | +| resume | - | Triggered when the frame animation resumes | + +## Methods + +In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. + + + +| Name | Parameter | Description | +| -------- | --------- | ------------------------------------------------------------ | +| start | - | Starts to play the frame animation of an image. If this method is called again, the playback starts from the first frame. | +| pause | - | Pauses the frame animation playback of an image. | +| stop | - | Stops the frame animation playback of an image. | +| resume | - | Resumes the frame animation playback of an image. | +| getState | - | Obtains the playback state. Available values are as follows:
-Playing
-Paused
-Stopped | + +## Example Code ``` @@ -304,9 +79,6 @@ In addition to the methods in [Universal Methods](js-components-common-methods.
-``` - -``` /* xxx.css */ .container { flex-direction: column; @@ -333,9 +105,6 @@ In addition to the methods in [Universal Methods](js-components-common-methods. width: 120px; margin-top: 8px; } -``` - -``` //xxx.js export default { data: { @@ -414,5 +183,4 @@ export default { }; ``` -![](figures/image-animator.gif) - +![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/reference/arkui-js/figures/image-animator.gif) \ No newline at end of file diff --git a/en/application-dev/reference/arkui-js/js-components-basic-image.md b/en/application-dev/reference/arkui-js/js-components-basic-image.md index 2afd0a80fce71b2d7cbc3b8f756e57e3eb8ce303..6b73c08eac64d40a6884af868ea8a72aa0c96864 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-image.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-image.md @@ -1,203 +1,72 @@ -# image +# image -The **** component is used to render and display images. +The **\** component is used to render and display images. -## Child Component +## Child Component Not supported -## Attributes - -In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

src

-

string

-

-

-

No

-

Image path, which supports local paths. The supported image formats include PNG, JPG, BMP, SVG, and GIF.

-

Base64 string6+ is supported. The format is data:image/[png | jpeg | bmp | webp];base64, [base64 data],, where [base64 data] is a Base64 string.

-

The path prefix of dataability:// is supported, which allows access to the image path provided by the Data ability.

-

alt

-

string

-

-

-

No

-

Placeholder image displayed during image loading.

-
- -## Styles - -In addition to the styles in [Universal Styles](js-components-common-styles.md), the following style attributes are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

object-fit

-

string

-

cover

-

No

-

Image scale type. For details about available values, see Types of the object-fit style. The SVG format is not supported.

-

match-text-direction

-

boolean

-

false

-

No

-

Whether image orientation changes with the text direction. The SVG format is not supported.

-

fit-original-size

-

boolean

-

false

-

No

-

Whether the <image> component adapts to the image source size when the width and height are not set. If this attribute is set to true, the object-fit attribute does not take effect. SVG images do not support this attribute.

-

object-position7+

-

string

-

0px 0px

-

No

-

Position of an image in the component.

-

There are two setting types:

-

1. Pixels. For example, 15px 15px indicates the moving position along the x-axis or y-axis.

-

2. Characters. Optional values are as follows:

-
  • left: The image is displayed on the left of the component.
  • top The image is displayed on the top of the component.
  • right The image is displayed on the right of the component.
  • bottom The image is displayed at the bottom of the component.
-
- -**Table 1** Types of the object-fit style - - - - - - - - - - - - - - - - - - - - - - -

Type

-

Description

-

cover

-

The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries and displayed in the middle.

-

contain

-

The image is scaled with the aspect ratio retained for the image to be completely displayed within the display boundaries and displayed in the middle.

-

fill

-

The image is resized to fill the display area and its aspect ratio is not retained.

-

none

-

The image is displayed in the middle with its aspect ratio and size retained.

-

scale-down

-

The image is displayed in the middle with its aspect ratio retained. The size is equal to or smaller than the original size.

-
- ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->When using an SVG image, note that: ->- The SVG image will not be drawn if the length or width of the **** component is infinity. ->- If the image length and width are not specified in the SVG description, the SVG fills the **** component area. ->- If the image length and width are specified in the SVG description, the following rules are adopted to decide the final display effect: ->1. If the **** component is too small to afford the SVG image, the SVG image is cropped and only its upper left part is displayed in the component. ->2. If the **** component is big enough to afford the SVG image, this SVG image is displayed in the upper left corner of the component. - -## Events - -In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

complete(Rich)

-

{ width: width, height: height }

-

Triggered when an image is successfully loaded. The loaded image is returned.

-

error(Rich)

-

{ width: width, height: height }

-

Triggered when an exception occurs during image loading. In this case, the width and height are 0.

-
- -## Methods - -Methods in [Universal Methods](js-components-common-methods.md) are supported. - -## Example Code +## Attributes + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + +| Name | Type | Default Value | Mandatory | Description | +| ---- | ------ | ------------- | --------- | ------------------------------------------------------------ | +| src | string | - | No | Image path, which supports local paths. The supported image formats include PNG, JPG, BMP, SVG, and GIF.Base64 string6+ is supported. The format is data:image/[png \| jpeg \| bmp \| webp];base64, [base64 data],, where [base64 data] is a Base64 string.The path prefix of **dataability://** is supported, which allows access to the image path provided by the Data ability. | +| alt | string | - | No | Placeholder image displayed during image loading. | + +## Styles + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following style attributes are supported. + + + +| Name | Type | Default Value | Mandatory | Description | +| -------------------- | ------- | ------------- | --------- | ------------------------------------------------------------ | +| object-fit | string | cover | No | Image scale type. For details about available values, see [Types of the object-fit style](js-components-basic-image.md). The SVG format is not supported. | +| match-text-direction | boolean | false | No | Whether image orientation changes with the text direction. The SVG format is not supported. | +| fit-original-size | boolean | false | No | Whether the **\** component adapts to the image source size when the width and height are not set. If this attribute is set to **true**, the **object-fit** attribute does not take effect. SVG images do not support this attribute. | +| object-position7+ | string | 0px 0px | No | Position of an image in the component.There are two setting types:1. Pixels. For example, **15px 15px** indicates the moving position along the x-axis or y-axis.2. Characters. Optional values are as follows:
-**left**: The image is displayed on the left of the component.
-**top** The image is displayed on the top of the component.
-**right** The image is displayed on the right of the component.
-**bottom** The image is displayed at the bottom of the component. | + +**Table 1** Types of the object-fit style + + + +| Type | Description | +| ---------- | ------------------------------------------------------------ | +| cover | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries and displayed in the middle. | +| contain | The image is scaled with the aspect ratio retained for the image to be completely displayed within the display boundaries and displayed in the middle. | +| fill | The image is resized to fill the display area and its aspect ratio is not retained. | +| none | The image is displayed in the middle with its aspect ratio and size retained. | +| scale-down | The image is displayed in the middle with its aspect ratio retained. The size is equal to or smaller than the original size. | + +> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** When using an SVG image, note that: +> +> - The SVG image will not be drawn if the length or width of the **\** component is infinity. +> - If the image length and width are not specified in the SVG description, the SVG fills the **\** component area. +> - If the image length and width are specified in the SVG description, the following rules are adopted to decide the final display effect: +> +> 1. If the **\** component is too small to afford the SVG image, the SVG image is cropped and only its upper left part is displayed in the component. +> 2. If the **\** component is big enough to afford the SVG image, this SVG image is displayed in the upper left corner of the component. + +## Events + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + +| Name | Parameter | Description | +| -------------- | -------------------------------- | ------------------------------------------------------------ | +| complete(Rich) | { width: width, height: height } | Triggered when an image is successfully loaded. The loaded image is returned. | +| error(Rich) | { width: width, height: height } | Triggered when an exception occurs during image loading. In this case, the width and height are **0**. | + +## Methods + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +## Example Code ``` @@ -208,9 +77,6 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported. -``` - -``` /* xxx.css */ .container { justify-content: center; @@ -225,9 +91,6 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported. border:1px solid #808080; border-radius: 10px; } -``` - -``` // xxx.js export default { data: { @@ -240,5 +103,4 @@ export default { } ``` -![](figures/example.gif) - +![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/reference/arkui-js/figures/example.gif) \ No newline at end of file diff --git a/en/application-dev/reference/arkui-js/js-components-basic-input.md b/en/application-dev/reference/arkui-js/js-components-basic-input.md index 283e9aae6e5ad9a4e4cb72abf1e3cc716c1c40d0..aebb55dea7cb9aac7eb1bf801d49c908db639c36 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-input.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-input.md @@ -1,610 +1,254 @@ -# input +# input -The **** component provides an interactive interface to receive user input. It can be a radio button, check box, button, single-line text box, and more. +The **\** component provides an interactive interface to receive user input. It can be a radio button, check box, button, single-line text box, and more. -## Required Permissions +## Required Permissions None -## Child Component +## Child Component Not supported -## Attributes - -In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Triggered when

-

type

-

string

-

text

-

No

-

Type of the input component. Available values include text, email, date, time, number, password, button, checkbox, and radio.

-

The text, email, date, time, number, and password types can be dynamically switched and modified.

-

The button, checkbox, and radio types cannot be dynamically modified. Available values include:

-
  • button: a button that can be clicked
  • checkbox: a check box
  • radio: a radio button that allows users to select one from multiple others with the same name
  • text: a single-line text field
  • email: a field used for an email address
  • date: date control, including the year, month, and day, but excluding time
  • time: time control, without the time zone
  • number: field for entering digits
  • password: password field, in which characters will be shielded
    NOTE:

    For wearables, only button, radio, and checkbox types are supported.

    -
    -
-

checked

-

boolean

-

false

-

No

-

Whether the <input> component is selected. This attribute is valid only when type is set to checkbox or radio.

-

name

-

string

-

-

-

No

-

Name of the input component.

-

value

-

string

-

-

-

No

-

Value of the input component. When type is radio, this attribute is mandatory and the value must be unique for radio buttons with the same name.

-

placeholder

-

string

-

-

-

No

-

Content of the hint text. This attribute is available only when the component type is set to text, email, date, time, number, or password.

-

maxlength

-

number

-

-

-

No

-

Maximum number of characters that can be entered in the input box. If no value is specified, the number of characters is not limited.

-

enterkeytype

-

string

-

default

-

No

-

Dynamic modification is not supported.

-

Available values include:

-
  • default
  • next
  • go
  • done
  • send
  • Search
-
NOTE:

The soft keyboard is automatically collapsed after you click the Enter button, except when next is displayed for the button.

-
-

headericon

-

string

-

-

-

No

-

Icon resource path before text input. This icon does not support click events and is unavailable for button, checkbox, and radio types. The supported icon image formats are JPG, PNG, and SVG.

-

showcounter5+

-

boolean

-

false

-

No

-

Whether to display the character counter for an input box. This attribute takes effect only when maxlength is set.

-

menuoptions5+

-

Array<MenuOption>

-

-

-

No

-

Menu options displayed after users touch the More button.

-

autofocus6+

-

boolean

-

false

-

No

-

Whether to automatically obtain the focus.

-
NOTE:

This attribute setting does not take effect on the application home page. You can enable a text box on the home page to automatically obtain focus, by delaying the focus method call (for about 100–500 ms) in onActive.

-
-

selectedstart6+

-

number

-

-1

-

No

-

Start position for text selection.

-

selectedend6+

-

number

-

-1

-

No

-

End position for text selection.

-

softkeyboardenabled6+

-

boolean

-

true

-

No

-

Whether to display the soft keyboard during editing.

-

showpasswordicon6+

-

boolean

-

true

-

No

-

Whether to display the icon at the end of the password text box. The setting is valid only when type is set to password.

-
- -**Table 1** MenuOption5+ - - - - - - - - - - - - - - - - -

Name

-

Type

-

Triggered when

-

icon

-

string

-

Path of the icon for a menu option.

-

content

-

string

-

Text content of a menu option.

-
- -## Styles - -In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Triggered when

-

color

-

<color>

-

#e6000000

-

No

-

Font color of the single-line text box or button.

-

font-size

-

<length>

-

16px

-

No

-

Font size of the single-line text box or button.

-

allow-scale

-

boolean

-

true

-

No

-

Whether the font size changes with the system's font size settings.

-
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

-
-

placeholder-color

-

<color>

-

#99000000

-

No

-

Color of the hint text in the single-line text box. This attribute is available when the component type is set to text, email, date, time, number, or password.

-

font-weight

-

number | string

-

normal

-

No

-

Font weight of the single-line text box or button. For details, see font-weight of the text component.

-

caret-color6+

-

<color>

-

-

-

No

-

Color of the input cursor.

-
- -## Events - -In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. - -- When the input component type is set to **text**, **email**, **date**, **time**, **number**, or **password**, the following events are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

change

-

{ value:inputValue }

-

Triggered when the content entered in the text box changes. The most recent text entered by the user is returned.

-
NOTE:

If you change the value attribute directly, this event will not be triggered.

-
-

enterkeyclick

-

{ value:enterKey }

-

Triggered when the Enter key on a soft keyboard is pressed. The type of the Enter key is returned, which is of the number type. Available values are as follows:

-
  • 2: returned if enterkeytype is go.
  • 3: returned if enterkeytype is search.
  • 4: returned if enterkeytype is send.
  • 5: returned if enterkeytype is next.
  • 6: returned if enterkeytype is default, done, or is not set.
-

translate5+

-

{ value: selectedText }

-

Triggered when users click the translate button in the pop menu displayed after they select a text segment. The selected text content is returned.

-

share5+

-

{ value: selectedText }

-

Triggered when users click the share button in the pop menu displayed after they select a text segment. The selected text content is returned.

-

search5+

-

{ value: selectedText }

-

Triggered when users click the search button in the pop menu displayed after they select a text segment. The selected text content is returned.

-

optionselect5+

-

{ index:optionIndex, value: selectedText }

-

Triggered when users click a menu option in the pop menu displayed after they select a text segment. This event is valid only when the menuoptions attribute is set. The option index and selected text content are returned.

-

selectchange6+

-

{ start: number, end: number }

-

Triggered when the text selection changes.

-
- -- When the input component type is set to **checkbox** or **radio**, the following events are supported. - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

change

-

{ checked:true | false }

-

Triggered when the checked status of the checkbox or radio button changes.

-
- - -## Methods - -In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

focus

-

{focus:true|false}: If focus is not passed, the default value true is used.

-

Obtains or loses the focus of a component. When the component type is set to text, email, date, time, number, or password, the input method can be displayed or collapsed.

-

showError

-

{ error: string }

-

Displays the error message. This attribute is available when the component type is set to text, email, date, time, number, or password.

-

delete6+

-

-

-

Deletes the text content based on the current cursor position when the input component type is set to text, email, date, time, number, or password. If the current input component does not have a cursor, the last character is deleted and the cursor is displayed by default.

-
- -## Example Code - -1. Single-line text box - - ``` - -
- - - -
- ``` - - ``` - /* xxx.css */ - .content { - width: 60%; - flex-direction: column; - align-items: center; - } - .input { - placeholder-color: gray; - } - .button { - background-color: gray; - margin-top: 20px; - } - ``` - - ``` - // xxx.js - import prompt from '@system.prompt' - export default { - change(e){ - prompt.showToast({ - message: "value: " + e.value, - duration: 3000, - }); - }, - enterkeyClick(e){ - prompt.showToast({ - message: "enterkey clicked", - duration: 3000, - }); - }, - buttonClick(e){ - this.$element("input").showError({ - error: 'error text' - }); - }, - } - ``` - - ![](figures/1-2.png) - -2. Common button - - ``` - -
- -
- ``` - - ``` - /* xxx.css */ - .div-button { - flex-direction: column; - align-items: center; - - - } - .button { - margin-top: 30px; - width: 280px; - } - ``` - - ![](figures/en-us_image_0000001198898293.png) - -3. Check box - - ``` - -
- - -
- ``` - - ``` - /* xxx.css */ - .content{ - width: 100%; - height: 200px; - - - align-items: center; - justify-content: center; - } - ``` - - ``` - // xxx.js - import prompt from '@system.prompt' - export default { - checkboxOnChange(e) { - prompt.showToast({ - message:'checked: ' + e.checked, - duration: 3000, - }); - } - } - ``` - - ![](figures/en-us_image_0000001173324749.png) - -4. Radio button - - ``` - -
- - - -
- ``` - - ``` - /* xxx.css */ - .content{ - width: 100%; - height: 200px; - justify-content: center; - align-items: center; - } - ``` - - ``` - // xxx.js - import prompt from '@system.prompt' - export default { - onRadioChange(inputValue, e) { - if (inputValue === e.value) { - prompt.showToast({ - message: 'The chosen radio is ' + e.value, - duration: 3000, - }); - } - } - } - ``` - - ![](figures/1-3.png) +## Attributes +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + +| Name | Type | Default Value | Mandatory | Triggered when | +| --------------------- | -------------------------------------------------- | ------------- | --------- | ------------------------------------------------------------ | +| type | string | text | No | Type of the input component. Available values include **text**, **email**, **date**, **time**, **number**, **password**, **button**, **checkbox**, and **radio**.The **text**, **email**, **date**, **time**, **number**, and **password** types can be dynamically switched and modified.The **button**, **checkbox**, and **radio** types cannot be dynamically modified. Available values include:
-**button**: a button that can be clicked
-**checkbox**: a check box
-**radio**: a radio button that allows users to select one from multiple others with the same name
-**text**: a single-line text field
-**email**: a field used for an email address
-**date**: date control, including the year, month, and day, but excluding time
-**time**: time control, without the time zone
-**number**: field for entering digits
-**password**: password field, in which characters will be shieldedNOTE:For wearables, only **button**, **radio**, and **checkbox** types are supported. | +| checked | boolean | false | No | Whether the **\** component is selected. This attribute is valid only when **type** is set to **checkbox** or **radio**. | +| name | string | - | No | Name of the input component. | +| value | string | - | No | Value of the input component. When **type** is **radio**, this attribute is mandatory and the value must be unique for radio buttons with the same name. | +| placeholder | string | - | No | Content of the hint text. This attribute is available only when the component type is set to **text**, **email**, **date**, **time**, **number**, or **password**. | +| maxlength | number | - | No | Maximum number of characters that can be entered in the input box. If no value is specified, the number of characters is not limited. | +| enterkeytype | string | default | No | Dynamic modification is not supported.Available values include:
-default
-next
-go
-done
-send
-Search
NOTE:The soft keyboard is automatically collapsed after you click the **Enter** button, except when **next** is displayed for the button. | +| headericon | string | - | No | Icon resource path before text input. This icon does not support click events and is unavailable for **button**, **checkbox**, and **radio** types. The supported icon image formats are JPG, PNG, and SVG. | +| showcounter5+ | boolean | false | No | Whether to display the character counter for an input box. This attribute takes effect only when **maxlength** is set. | +| menuoptions5+ | Array\<[MenuOption](js-components-basic-input.md)> | - | No | Menu options displayed after users touch the **More** button. | +| autofocus6+ | boolean | false | No | Whether to automatically obtain the focus.NOTE:This attribute setting does not take effect on the application home page. You can enable a text box on the home page to automatically obtain focus, by delaying the **focus** method call (for about 100–500 ms) in **onActive**. | +| selectedstart6+ | number | -1 | No | Start position for text selection. | +| selectedend6+ | number | -1 | No | End position for text selection. | +| softkeyboardenabled6+ | boolean | true | No | Whether to display the soft keyboard during editing. | +| showpasswordicon6+ | boolean | true | No | Whether to display the icon at the end of the password text box. The setting is valid only when **type** is set to **password**. | + +**Table 1** MenuOption5+ + + + +| Name | Type | Triggered when | +| ------- | ------ | ----------------------------------- | +| icon | string | Path of the icon for a menu option. | +| content | string | Text content of a menu option. | + +## Styles + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + +| Name | Type | Default Value | Mandatory | Triggered when | +| ----------------- | ---------------- | ------------- | --------- | ------------------------------------------------------------ | +| color | \ | #e6000000 | No | Font color of the single-line text box or button. | +| font-size | \ | 16px | No | Font size of the single-line text box or button. | +| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.NOTE:If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart. | +| placeholder-color | \ | #99000000 | No | Color of the hint text in the single-line text box. This attribute is available when the component type is set to **text**, **email**, **date**, **time**, **number**, or **password**. | +| font-weight | number \| string | normal | No | Font weight of the single-line text box or button. For details, see [font-weight](js-components-basic-text.md) of the **text** component. | +| caret-color6+ | \ | - | No | Color of the input cursor. | + +## Events + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + +- When the input component type is set to **text**, **email**, **date**, **time**, **number**, or **password**, the following events are supported. + + + + | Name | Parameter | Triggered when | + | -------------- | ------------------------------------------ | ------------------------------------------------------------ | + | change | { value:inputValue } | Triggered when the content entered in the text box changes. The most recent text entered by the user is returned.NOTE:If you change the **value** attribute directly, this event will not be triggered. | + | enterkeyclick | { value:enterKey } | Triggered when the **Enter** key on a soft keyboard is pressed. The type of the **Enter** key is returned, which is of the number type. Available values are as follows:
-**2**: returned if **enterkeytype** is **go**.
-**3**: returned if **enterkeytype** is **search**.
-**4**: returned if **enterkeytype** is **send**.
-**5**: returned if **enterkeytype** is **next**.
-**6**: returned if **enterkeytype** is **default**, **done**, or is not set.
| + | translate5+ | { value: selectedText } | Triggered when users click the translate button in the pop menu displayed after they select a text segment. The selected text content is returned. | + | share5+ | { value: selectedText } | Triggered when users click the share button in the pop menu displayed after they select a text segment. The selected text content is returned. | + | search5+ | { value: selectedText } | Triggered when users click the search button in the pop menu displayed after they select a text segment. The selected text content is returned. | + | optionselect5+ | { index:optionIndex, value: selectedText } | Triggered when users click a menu option in the pop menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned. | + | selectchange6+ | { start: number, end: number } | Triggered when the text selection changes. | + +- When the input component type is set to **checkbox** or **radio**, the following events are supported. + + + + | Name | Parameter | Triggered when | + | ------ | ------------------------- | ------------------------------------------------------------ | + | change | { checked:true \| false } | Triggered when the checked status of the **checkbox** or **radio** button changes. | + +## Methods + +In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. + + + +| Name | Parameter | Triggered when | +| --------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| focus | {focus:true\|false}: If **focus** is not passed, the default value **true** is used. | Obtains or loses the focus of a component. When the component type is set to text, email, date, time, number, or password, the input method can be displayed or collapsed. | +| showError | { error: string } | Displays the error message. This attribute is available when the component type is set to text, email, date, time, number, or password. | +| delete6+ | - | Deletes the text content based on the current cursor position when the input component type is set to **text**, **email**, **date**, **time**, **number**, or **password**. If the current input component does not have a cursor, the last character is deleted and the cursor is displayed by default. | + +## Example Code + +1. Single-line text box + + ``` + +
+ + + +
+ ``` + + ``` + /* xxx.css */ + .content { + width: 60%; + flex-direction: column; + align-items: center; + } + .input { + placeholder-color: gray; + } + .button { + background-color: gray; + margin-top: 20px; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt' + export default { + change(e){ + prompt.showToast({ + message: "value: " + e.value, + duration: 3000, + }); + }, + enterkeyClick(e){ + prompt.showToast({ + message: "enterkey clicked", + duration: 3000, + }); + }, + buttonClick(e){ + this.$element("input").showError({ + error: 'error text' + }); + }, + } + ``` + + ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/reference/arkui-js/figures/1-2.png) + +2. Common button + + ``` + +
+ +
+ ``` + + ``` + /* xxx.css */ + .div-button { + flex-direction: column; + align-items: center; + + + } + .button { + margin-top: 30px; + width: 280px; + } + ``` + + ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/reference/arkui-js/figures/en-us_image_0000001198898293.png) + +3. Check box + + ``` + +
+ + +
+ ``` + + ``` + /* xxx.css */ + .content{ + width: 100%; + height: 200px; + + + align-items: center; + justify-content: center; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt' + export default { + checkboxOnChange(e) { + prompt.showToast({ + message:'checked: ' + e.checked, + duration: 3000, + }); + } + } + ``` + + ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173324749.png) + +4. Radio button + + ``` + +
+ + + +
+ ``` + + ``` + /* xxx.css */ + .content{ + width: 100%; + height: 200px; + justify-content: center; + align-items: center; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt' + export default { + onRadioChange(inputValue, e) { + if (inputValue === e.value) { + prompt.showToast({ + message: 'The chosen radio is ' + e.value, + duration: 3000, + }); + } + } + } + ``` + + ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/reference/arkui-js/figures/1-3.png) \ No newline at end of file diff --git a/en/application-dev/reference/arkui-js/js-components-basic-label.md b/en/application-dev/reference/arkui-js/js-components-basic-label.md index 5e80973d014fa5c07630312c3ab44efbef7dfa00..c11333a9fc94b423f81c6c5e1ed491c6e9cf69d5 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-label.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-label.md @@ -1,263 +1,59 @@ -# label +# label -The **** component defines labels for the ****, ****, and **** components. When a label is clicked, the click effect of the component associated with the label will be triggered. +The **\