diff --git a/en/application-dev/reference/arkui-ts/figures/animateTo.gif b/en/application-dev/reference/arkui-ts/figures/animateTo.gif new file mode 100644 index 0000000000000000000000000000000000000000..8755e2bc014f3843f8798acae725eeb0fee11f54 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/animateTo.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/checkboxgroup.gif b/en/application-dev/reference/arkui-ts/figures/checkboxgroup.gif index 27b1a29a14e3bfca893f853d1e185c7493afb366..1458d8a2c4069bcfabab2eefd6b0f6ffd57535d6 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/checkboxgroup.gif and b/en/application-dev/reference/arkui-ts/figures/checkboxgroup.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/dataPanel.PNG b/en/application-dev/reference/arkui-ts/figures/dataPanel.PNG new file mode 100644 index 0000000000000000000000000000000000000000..b360ca62d5d961ff107b2a703621123b3b48aa46 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/dataPanel.PNG differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192655288.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192655288.gif new file mode 100644 index 0000000000000000000000000000000000000000..bb7ff3b8360cc9a8a33b4c8e6d7a050846b05f69 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001192655288.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193499234.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193499234.gif deleted file mode 100644 index 15849e6bc210ed2bb7f7a798b145c9794972643c..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193499234.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872498.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872498.png new file mode 100644 index 0000000000000000000000000000000000000000..6c136313fe0c8774d1209a398d16ecc4b58c2bcd Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872498.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898510.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872516.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898510.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872516.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978375.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872518.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978375.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872518.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138385.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872520.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138385.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872520.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378440.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872522.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378440.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872522.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138383.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872524.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138383.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872524.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032458.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032458.png new file mode 100644 index 0000000000000000000000000000000000000000..a07986a04b7477eec14c81d08e442d7b332dab83 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032458.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032462.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032462.png new file mode 100644 index 0000000000000000000000000000000000000000..3d93b0a0a8f5d0b527d407e450a4a13a1de991ab Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032462.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898508.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032476.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898508.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032476.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138379.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032478.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138379.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032478.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032480.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032480.png new file mode 100644 index 0000000000000000000000000000000000000000..5c0a336a56d0e5a186bd235cd25f9f5e5e7e644f Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032480.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978383.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032482.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978383.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032482.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192436.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192436.png new file mode 100644 index 0000000000000000000000000000000000000000..27556ea43f7c2ecc65b9425e243ea593f02b08ec Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192436.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192440.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192440.png new file mode 100644 index 0000000000000000000000000000000000000000..2a5c5649cc0716abc024aa3656924a456216a4c2 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192440.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192454.PNG b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192454.PNG new file mode 100644 index 0000000000000000000000000000000000000000..45034a371010069dfb9bec4c5495ebe1b1417fa8 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192454.PNG differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218474.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192456.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218474.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192456.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058431.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192460.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058431.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192460.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858421.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192462.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858421.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192462.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058496.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192464.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058496.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192464.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352436.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352436.png new file mode 100644 index 0000000000000000000000000000000000000000..00097d258d585ec8ad981703c5b265679e867133 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352436.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858429.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352450.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858429.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352450.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898514.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352452.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898514.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352452.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138387.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352456.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138387.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352456.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378434.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352460.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378434.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352460.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898476.jpg b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898476.jpg deleted file mode 100644 index e5af4f50ebd9bdab6af30219f30fdf948a019a52..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898476.jpg and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898498.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898498.gif deleted file mode 100644 index dc802e8f3c4d0a865059697e615eac1cd52a337b..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898498.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898516.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898516.png deleted file mode 100644 index 801bf97495213f41c2b196b2f170af85b156dd5b..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898516.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898522.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898522.gif deleted file mode 100644 index f6b7ae5ac2bf443574de54cd4df472a8f0cd1aba..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898522.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058484.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058484.gif deleted file mode 100644 index 7ed4e908925042a11312dd27aa1c28e8c91d8d8c..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058484.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058500.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058500.png deleted file mode 100644 index 5da42e3e14d601745274cb62d914c6600620bb25..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058500.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058506.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058506.png deleted file mode 100644 index b2728fd1b4e050edddf499398b44a7e3aa634109..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058506.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218430.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218430.gif deleted file mode 100644 index 49a1503a776598da93f4089bb079c61125a71a2e..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218430.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378436.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378436.png deleted file mode 100644 index 4fb651372a67eca9de3848baa6b66cac0ee9f173..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378436.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058429.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712437.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058429.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712437.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712439.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712439.png new file mode 100644 index 0000000000000000000000000000000000000000..f1b942fee8437b1197ef3e9f40c98187a76f8c44 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712439.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058498.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712443.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058498.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712443.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138381.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712445.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138381.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712445.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978377.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712447.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978377.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712447.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238832389.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238832389.png new file mode 100644 index 0000000000000000000000000000000000000000..5c75654b85d596a346fa5d793ca84991fe859a86 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238832389.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058439.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238832403.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058439.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238832403.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898506.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238832405.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898506.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238832405.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058435.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238832409.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058435.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238832409.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952377.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952377.png new file mode 100644 index 0000000000000000000000000000000000000000..abc9a5667500a749dbceee88aef4caebf5d9df18 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952377.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218472.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952397.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218472.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952397.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058502.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952399.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058502.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952399.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218466.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952401.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218466.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952401.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378442.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952403.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378442.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952403.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218478.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952405.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218478.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952405.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218480.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952407.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218480.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952407.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138377.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239032423.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138377.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239032423.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058427.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239032425.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058427.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239032425.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378430.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239032429.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378430.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239032429.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378438.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239032431.png similarity index 100% rename from en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378438.png rename to en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239032431.png diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001250678457.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001250678457.gif deleted file mode 100644 index 3696c7f08f6c7ef551d16da53ca167ddb8b6a5fa..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001250678457.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858423.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858423.png deleted file mode 100644 index 138e011909c2d4738f3cd9671a79ea0c37cb5b87..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858423.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858427.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858427.png deleted file mode 100644 index 160278c82fcdf310c796609d5ee29a2a4869af9e..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858427.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858431.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858431.png deleted file mode 100644 index 5d649492978121a484c2a7a55d4548384c919149..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858431.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978331.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978331.gif deleted file mode 100644 index b26dc8bf409987fa624f6dc0cec1c56043e7b37a..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978331.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058423.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058423.gif deleted file mode 100644 index 49922f7f7d934216dcbf8837c697d13063d101a4..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058423.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058437.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058437.png deleted file mode 100644 index 50726d3e461d7a5dbfec674899fee603aaf41bee..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058437.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058441.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058441.png deleted file mode 100644 index d3db21e0e3da6d8663f59b2ddabd9e50d6eb1e6a..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058441.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138373.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138373.png deleted file mode 100644 index 2eed5759714b99dc039faab67acdfe6d67bfc6ac..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138373.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138375.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138375.png deleted file mode 100644 index e3b4b42aecaef72ed4a08b3566a895b3f9b12343..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138375.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777778.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777778.png index 19e99b9ef490fff79e64e33192c97c1a39c6edf9..d8b4daf029b147778486f659934b2ea67234924e 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777778.png and b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777778.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/marquee.gif b/en/application-dev/reference/arkui-ts/figures/marquee.gif new file mode 100644 index 0000000000000000000000000000000000000000..09dfce671ee1788ac1de7d629ae7fb2406b2ec3f Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/marquee.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/rating.gif b/en/application-dev/reference/arkui-ts/figures/rating.gif new file mode 100644 index 0000000000000000000000000000000000000000..58cab3e9455db71825d0533d5619a2e12f8b0975 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/rating.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/stepper.gif b/en/application-dev/reference/arkui-ts/figures/stepper.gif new file mode 100644 index 0000000000000000000000000000000000000000..a6a3b5669caa81d0665c40e2a31e2196c12165d7 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/stepper.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/tabContent1.gif b/en/application-dev/reference/arkui-ts/figures/tabContent1.gif new file mode 100644 index 0000000000000000000000000000000000000000..4a278ae098837a2d809b600dcd621ecf83085ede Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/tabContent1.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/tabContent2.gif b/en/application-dev/reference/arkui-ts/figures/tabContent2.gif new file mode 100644 index 0000000000000000000000000000000000000000..b88d171c0dcf285a40833b9cc73056def5fe3f8b Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/tabContent2.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/tabs2.gif b/en/application-dev/reference/arkui-ts/figures/tabs2.gif new file mode 100644 index 0000000000000000000000000000000000000000..2aff91bd668c3b444bd98089181d5af52e51d3d1 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/tabs2.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/textArea.gif b/en/application-dev/reference/arkui-ts/figures/textArea.gif index 52253c3693b7626a5959a2e88e4744d01b80d057..8755838d74172fea4d02464a9a78afcec4fd8ed7 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/textArea.gif and b/en/application-dev/reference/arkui-ts/figures/textArea.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/text_clock.gif b/en/application-dev/reference/arkui-ts/figures/text_clock.gif new file mode 100644 index 0000000000000000000000000000000000000000..e549561d3d8a1cf39cab3a115a7ffb064caab4bd Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/text_clock.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/toggle.gif b/en/application-dev/reference/arkui-ts/figures/toggle.gif new file mode 100644 index 0000000000000000000000000000000000000000..9e61885c0442bc826d0c7b5f95875eda4211d2aa Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/toggle.gif differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md b/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md index 575dce47f403d42683b3d0d2c7b2aa7d22ab10ab..95fa03d4b2f7f94a02c450e37fca071a8db47d11 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md @@ -37,7 +37,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi | Name | Description| | ----------| -------- | -|onChange(callback: (value: boolean) => void) | Triggered when the selection status of the check box changes.
- The value **true** means that the check box is selected.
- The value **false** means that the check box is not selected.| +|onChange(callback: (value: boolean) => void) | Triggered when the selected status of the check box changes due to a manual operation.
- The value **true** means that the check box is selected.
- The value **false** means that the check box is not selected. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md b/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md index deb88ab76fc047354169bbaadf95b225775335f0..6357355ed655ec3851c656481e5b471c9e1076b9 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md @@ -18,6 +18,8 @@ Creates a check box group so that you can select or deselect all check boxes in **Parameters** + + | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | | group | string | No| Group name.| @@ -28,7 +30,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| selectAll | boolean | Whether to select all.
Default value: **false**| +| selectAll | boolean | Whether to select all.
Default value: **false**
If **select** is explicitly set for check boxes in the group, the check box settings are prioritized.| | selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected check box.| ## Events @@ -37,13 +39,13 @@ In addition to the [universal events](ts-universal-events-click.md), the followi | Name| Description| | -------- | -------- | -| onChange (callback: (event: CheckboxGroupResult) => void ) |Triggered when the selection status of the check box group or any check box wherein changes.| +| onChange (callback: (event: [CheckboxGroupResult](#checkboxgroupresult)) => void ) |Triggered when the selected status of the check box group or any check box wherein changes due to a manual operation.| ## CheckboxGroupResult | Name | Type | Description | | ------ | ------ | ------- | | name | Array<string> | Names of all the selected check boxes in the group.| -| status | SelectStatus | Selected status.| +| status | [SelectStatus](#selectstatus) | Selected status.| ## SelectStatus @@ -64,47 +66,48 @@ struct CheckboxExample { build() { Scroll() { Column() { + // Select All button Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { CheckboxGroup({ group: 'checkboxGroup' }) - .selectedColor(0xed6f21) + .selectedColor('#007DFF') .onChange((itemName: CheckboxGroupResult) => { - console.info("TextPicker::dialogResult is" + JSON.stringify(itemName)) + console.info("checkbox group content" + JSON.stringify(itemName)) }) - Text('select all').fontSize(20) + Text('Select All').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) } + // Option 1 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) - .select(true) - .selectedColor(0x39a2db) + .selectedColor('#007DFF') .onChange((value: boolean) => { console.info('Checkbox1 change is' + value) }) - Text('Checkbox1').fontSize(20) - } + Text('Checkbox1').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) + }.margin({ left: 36 }) + // Option 2 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) - .select(false) - .selectedColor(0x39a2db) + .selectedColor('#007DFF') .onChange((value: boolean) => { console.info('Checkbox2 change is' + value) }) - Text('Checkbox2').fontSize(20) - } + Text('Checkbox2').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) + }.margin({ left: 36 }) + // Option 3 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { Checkbox({ name: 'checkbox3', group: 'checkboxGroup' }) - .select(true) - .selectedColor(0x39a2db) + .selectedColor('#007DFF') .onChange((value: boolean) => { console.info('Checkbox3 change is' + value) }) - Text('Checkbox3').fontSize(20) - } + Text('Checkbox3').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) + }.margin({ left: 36 }) } } } } ``` -![](figures/checkboxgroup.gif) +![checkboxGroup](figures/checkboxGroup.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md b/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md index d4811bfce02c4b1b65c8038cd990fb6ae02c31ae..8ee9c34e359dad14776f7fca6e55ec18d8381cc2 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md @@ -22,15 +22,15 @@ DataPanel(options:{values: number[], max?: number, type?: DataPanelType}) | Name | Type | Mandatory | Description| | ----------------- | -------- | ----- | -------- | -| values | number[] | Yes | Value list. A maximum of nine values are supported.| +| values | number[] | Yes | Data value list. A maximum of nine values are supported. If more than nine values are set, only the first nine ones are used. If the value is less than 0, the value 0 is used.| | max | number | No | - When set to a value greater than 0, this parameter indicates the maximum value in the **values** list.
- When set to a value equal to or smaller than 0, this parameter indicates the sum of values in the **values** list. The values are displayed in proportion.
Default value: **100**| -| type8+ | DataPanelType | No| Type of the data panel.
Default value: **DataPanelType.Circle**| +| type8+ | [DataPanelType](#datapaneltype) | No| Type of the data panel.
Default value: **DataPanelType.Circle**| -## DataPanelType enums -| Name| Description| +## DataPanelType +| Name| Description| | -------| ------------ | -| Line | Line data panel.| +| Line | Line data panel.| | Circle | Circle data panel.| @@ -41,18 +41,46 @@ DataPanel(options:{values: number[], max?: number, type?: DataPanelType}) @Entry @Component struct DataPanelExample { - public values1: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 10] + public valueArr: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 10] build() { Column({ space: 5 }) { - Text('Circle').fontSize(9).fontColor(0xCCCCCC).margin({ top: 20, right: '80%' }) - DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle }).width(200).height(200) - - Text('Line').fontSize(9).fontColor(0xCCCCCC).margin({ bottom: 20, right: '80%' }) - DataPanel({ values: this.values1, max: 100, type: DataPanelType.Line }).width(300).height(10) + Row() { + Stack() { + DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).width(168).height(168) + Column() { + Text('30').fontSize(35).fontColor('#182431') + Text('1.0.0').fontSize(9.33).lineHeight(12.83).fontWeight(500).opacity(0.6) + } + + Text('%') + .fontSize(9.33) + .lineHeight(12.83) + .fontWeight(500) + .opacity(0.6) + .position({ x: 104.42, y: 78.17 }) + }.margin({ right: 44 }) + + Stack() { + DataPanel({ values: [50, 12, 8, 5], max: 100, type: DataPanelType.Circle }).width(168).height(168) + Column() { + Text('75').fontSize(35).fontColor('#182431') + Text('Used: 98 GB/128 GB') .fontSize(8.17).lineHeight(11.08).fontWeight(500).opacity(0.6) + } + + Text('%') + .fontSize(9.33) + .lineHeight(12.83) + .fontWeight(500) + .opacity(0.6) + .position({ x: 104.42, y: 78.17 }) + } + }.margin({ bottom: 59 }) + + DataPanel({ values: this.valueArr, max: 100, type: DataPanelType.Line }).width(300).height(10) }.width('100%').margin({ top: 5 }) } } ``` -![en-us_image_0000001211898476](figures/en-us_image_0000001211898476.jpg) +![dataPanel](figures/dataPanel.PNG) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md index 8ae1b641b86f0946918759119ffc1cecfcd17d07..4bdc96f244d22a65d2689971492f84103f8f134e 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md @@ -27,7 +27,7 @@ Obtains an image from the specified source for subsequent rendering and display. | Name| Type | Mandatory| Description | | ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | -| src | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Yes | Image source. Both local and online images are supported.
When using an image referenced using a relative path, for example, `Image("common/test.jpg")`, the **\** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.
- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.
\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.
\- Strings with the **datashare://path** prefix are supported, which are used to access the image path provided by a data ability.
\- Strings with the `file:///data/storage` prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the application. Ensure that the files in the directory package path have the read permission.| +| src | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Yes | Image source. Both local and online images are supported.
When using an image referenced using a relative path, for example, **Image("common/test.jpg")**, the **\** component cannot be called across bundles or modules. Therefore, you are advised to use **$r** to reference image resources that need to be used globally.
- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.
\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.
\- Strings with the **datashare://path** prefix are supported, which are used to access the image path provided by a data ability.
\- Strings with the **file:///data/storage** prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the application. Ensure that the files in the directory package path have the read permission. | ## Attributes @@ -37,7 +37,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | --------------------- | ------------------------------------------------------- | ------------------------------------------------------------ | | alt | string \| [Resource](ts-types.md#resource)| Placeholder image displayed during loading. Local images are supported. | | objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Image scale mode.
Default value: **ImageFit.Cover** | -| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | Whether the image is repeated.
Default value: **NoRepeat**
**NOTE**
This attribute is not applicable to SVG images.| +| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | Whether the image is repeated.
Default value: **ImageRepeat.NoRepeat**
**NOTE**
This attribute is not applicable to SVG images.| | interpolation | [ImageInterpolation](#imageinterpolation) | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.
Default value: **ImageInterpolation.None**
**NOTE**
This attribute is not applicable to SVG images and **PixelMap** objects. | | renderMode | [ImageRenderMode](#imagerendermode) | Rendering mode of the image.
Default value: **ImageRenderMode.Original**
**NOTE**
This attribute is not applicable to SVG images.| | sourceSize | {
width: number,
height: number
} | Size of the decoded image. The original image is decoded into a **pixelMap** of the specified size, in px.
**NOTE**
This attribute is not applicable to **PixelMap** objects.| @@ -218,7 +218,7 @@ struct Index { > **NOTE** > -> For details about the request mode, timeout, and additional request parameters for loading online images, see [`request()`](../../reference/apis/js-apis-http.md) in the HTTP module. +> For details about the request mode, timeout, and additional request parameters for loading online images, see [request()](../../reference/apis/js-apis-http.md) in the HTTP module. ### Setting Attributes @@ -356,6 +356,7 @@ struct ImageExample3 { ```ts import fileio from '@ohos.fileio' +import fs from '@ohos.file.fs'; import context from '@ohos.application.context' @Entry @@ -376,7 +377,7 @@ struct LoadImageExample { .onClick(() => { this.sandboxPath = this.context.getApplicationContext().filesDir + '/icon.png' console.log(`Read the sandbox image=========>${this.sandboxPath}`) - let fd = fileio.openSync(this.sandboxPath, 0o100, 0o666) + let fd = fs.openSync(this.sandboxPath, 0o100) console.log(`create file========>${fd}`) let srcPath = this.context.bundleCodeDir + '/entry/resources/base/media/icon.png' console.log('mySrcpath' + srcPath) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md b/en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md index 2a5753700712ce0e9c4e8a02e77c800cc206f6ee..9d905a65b1736315055c4b4582a5fa7cf5e8d00e 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md @@ -51,10 +51,10 @@ Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boole @Component struct MarqueeExample { @State start: boolean = false - @State fromStart: boolean = true - @State step: number = 50 - @State loop: number = 3 - @State src: string = "Running Marquee starts rolling" + private fromStart: boolean = true + private step: number = 50 + private loop: number = Infinity + private src: string = "Running Marquee starts rolling" build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -65,29 +65,31 @@ struct MarqueeExample { fromStart: this.fromStart, src: this.src }) - .width(400) - .fontColor(Color.White) - .fontSize(50) - .allowScale(false) - .fontWeight(FontWeight.Bold) - .backgroundColor(Color.Black) - .margin({bottom:40}) + .width(360) + .height(80) + .fontColor('#FFFFFF') + .fontSize(48) + .fontWeight(700) + .backgroundColor('#182431') + .margin({ bottom: 40 }) .onStart(() => { - console.log('Marquee animation complete onStart') + console.info('Marquee animation complete onStart') }) .onBounce(() => { - console.log('Marquee animation complete onBounce') + console.info('Marquee animation complete onBounce') }) .onFinish(() => { - console.log('Marquee animation complete onFinish') + console.info('Marquee animation complete onFinish') }) - Button('start') - .onClick(() => { - this.start = true - }) - .width(200) - .height(60) - .margin({bottom:20}) + Button('Start') + .onClick(() => { + this.start = true + }) + .width(120) + .height(40) + .fontSize(16) + .fontWeight(500) + .backgroundColor('#007DFF') } .width('100%') .height('100%') @@ -95,4 +97,4 @@ struct MarqueeExample { } ``` -![en-us_image_0000001193499234](figures/en-us_image_0000001193499234.gif) +![marquee](figures/marquee.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md b/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md index c8b4684029267d1f95afbe3e9aaa9dfdb8f2ff93..0365224d576125c9af95fc0cf2531e963c5ff6b7 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md @@ -108,10 +108,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ## Events -| Name | Description | -| ------------------------------------------------------------ | ------------------------------------------------------------ | -| onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls. | -| onNavBarStateChange(callback: (isVisible: boolean) => void) | Triggered when the navigation bar visibility status changes. The value **true** means that the navigation bar is displayed, and **false** means the opposite. | +| Name | Description | +| ---------------------------------------- | ---------------------------------------- | +| onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls.| +| onNavBarStateChange(callback: (isVisible: boolean) => void) | Triggered when the navigation bar visibility status changes. The value **true** means that the navigation bar is displayed, and **false** means the opposite.| ## Example @@ -232,4 +232,4 @@ struct NavigationExample { } ``` -![en-us_image_0000001212058484](figures/en-us_image_0000001212058484.gif) +![en-us_image_0000001192655288](figures/en-us_image_0000001192655288.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md b/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md index 986aab0a555ddab557e8bb83e4f7ee3fda183a0c..6eba8d6890c9a809c9017942b91a8f62d878e381 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md @@ -21,7 +21,7 @@ Rating(options?: { rating: number, indicator?: boolean }) | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | | rating | number | Yes| Value to rate.
Default value: **0**| -| indicator | boolean | No| Used only as an indicator and cannot be operated.
Default value: **false**| +| indicator | boolean | No| Whether the component is used only as an indicator and cannot be operated.
Default value: **false**| ## Attributes @@ -47,21 +47,51 @@ Rating(options?: { rating: number, indicator?: boolean }) @Entry @Component struct RatingExample { - @State rating: number = 1 - @State indicator: boolean = false + @State rating: number = 3.5 build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { - Text('current score is ' + this.rating).fontSize(20) - Rating({ rating: this.rating, indicator: this.indicator }) - .stars(5) - .stepSize(0.5) - .onChange((value: number) => { - this.rating = value - }) - }.width(350).height(200).padding(35) + Column() { + Column() { + Rating({ rating: this.rating, indicator: false }) + .stars(5) + .stepSize(0.5) + .margin({ top: 24 }) + .onChange((value: number) => { + this.rating = value + }) + Text('current score is ' + this.rating) + .fontSize(16) + .fontColor('rgba(24,36,49,0.60)') + .margin({ top: 16 }) + }.width(360).height(113).backgroundColor('#FFFFFF').margin({ top: 68 }) + + Row() { + Image('common/testImage.jpg') + .width(40) + .height(40) + .borderRadius(20) + .margin({ left: 24 }) + Column() { + Text('Yue') + .fontSize(16) + .fontColor('#182431') + .fontWeight(500) + Row() { + Rating({ rating: 3.5, indicator: true }).margin({ top: 1, right: 8 }) + Text('2021/06/02') + .fontSize(10) + .fontColor('#182431') + } + }.margin({ left: 12 }).alignItems(HorizontalAlign.Start) + + Text('1st Floor') + .fontSize(10) + .fontColor('#182431') + .position({ x: 295, y: 8 }) + }.width(360).height(56).backgroundColor('#FFFFFF').margin({ top: 64 }) + }.width('100%').height('100%').backgroundColor('#F1F3F5') } } ``` -![en-us_image_0000001257058423](figures/en-us_image_0000001257058423.gif) +![rating](figures/rating.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-stepper.md b/en/application-dev/reference/arkui-ts/ts-basic-components-stepper.md index dbef74a15403423380bbebe4b5c2ad5a333ca2fb..99562b3a4e04b591889fcef3444ef0db82336e5e 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-stepper.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-stepper.md @@ -3,7 +3,7 @@ The **\** component provides a step navigator. -> **NOTE** +> **NOTE** > > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. @@ -45,6 +45,22 @@ None ```ts // xxx.ets +@Styles function itemStyle () { + .width(336) + .height(621) + .margin({ top: 48, left: 12 }) + .borderRadius(24) + .backgroundColor('#FFFFFF') +} + +@Extend(Text) function itemTextStyle () { + .fontColor('#182431') + .fontSize(36) + .fontWeight(500) + .opacity(0.4) + .margin({ top: 82, bottom: 40 }) +} + @Entry @Component struct StepperExample { @@ -61,15 +77,13 @@ struct StepperExample { StepperItem() { Column() { Text('Page One') - .fontSize(35) - .fontColor(Color.Blue) - .lineHeight(50) - .margin({ top: 250, bottom: 50 }) + .itemTextStyle() Button('change status:' + this.firstState) + .backgroundColor('#007dFF') .onClick(() => { this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip }) - }.width('100%') + }.itemStyle() } .nextLabel('Next') .status(this.firstState) @@ -77,15 +91,13 @@ struct StepperExample { StepperItem() { Column() { Text('Page Two') - .fontSize(35) - .fontColor(Color.Blue) - .lineHeight(50) - .margin({ top: 250, bottom: 50 }) + .itemTextStyle() Button('change status:' + this.secondState) + .backgroundColor('#007dFF') .onClick(() => { this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled }) - }.width('100%') + }.itemStyle() } .nextLabel('Next') .prevLabel('Previous') @@ -94,29 +106,25 @@ struct StepperExample { StepperItem() { Column() { Text('Page Three') - .fontSize(35) - .fontColor(Color.Blue) - .lineHeight(50) - .margin({ top: 250, bottom: 50 }) + .itemTextStyle() Button('change status:' + this.thirdState) + .backgroundColor('#007dFF') .onClick(() => { this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting }) - }.width('100%') + }.itemStyle() } .status(this.thirdState) // Fourth step page StepperItem() { - Text('Page four') - .fontSize(35) - .fontColor(Color.Blue) - .width('100%') - .textAlign(TextAlign.Center) - .lineHeight(50) - .margin({ top: 250 }) + Column() { + Text('Page Four') + .itemTextStyle() + }.itemStyle() } .nextLabel('Finish') } + .backgroundColor('#F1F3F5') .onFinish(() => { // Define the processing logic for when Finish on the last page is clicked, for example, redirection. console.info('onFinish') @@ -133,4 +141,4 @@ struct StepperExample { ``` -![en-us_image_0000001250678457](figures/en-us_image_0000001250678457.gif) +![stepper](figures/stepper.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md index 3f8454c1cb5fb6dc3f755e0102d5183ac2f19366..bc16a8dd1638b0ad7e1538891707422c60d7ad2b 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md @@ -85,23 +85,29 @@ struct TextAreaExample { build() { Column() { - TextArea({ placeholder: 'The text area can hold an unlimited amount of text. input your word', controller: this.controller }) - .placeholderFont({ size: 14, weight: 400 }) - .width(400) - .height(50) + TextArea({ + placeholder: 'The text area can hold an unlimited amount of text. input your word...', + controller: this.controller + }) + .placeholderFont({ size: 16, weight: 400 }) + .width(336) + .height(56) .margin(20) - .fontSize(14) + .fontSize(16) + .fontColor('#182431') + .backgroundColor('#FFFFFF') .onChange((value: string) => { this.text = value }) Text(this.text) Button('Set caretPosition 1') + .backgroundColor('#007DFF') .margin(15) .onClick(() => { // Move the caret to after the first entered character. this.controller.caretPosition(1) }) - }.width('100%') + }.width('100%').height('100%').backgroundColor('#F1F3F5') } } ``` diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md b/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md index 7a6d181ce02f74ab89517e131c52b80a0f44fe8d..12e1dd5287c21a12499361c6acae498ad11671f6 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md @@ -4,13 +4,7 @@ The **\** component provides a clickable element in the check box, butto > **NOTE** > -> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. - - -## Required Permissions - -None - +> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components @@ -21,27 +15,28 @@ This component can contain child components only when **ToggleType** is set to * Toggle(options: { type: ToggleType, isOn?: boolean }) -- Parameters - | Name| Type| Mandatory| Description| - | -------- | -------- | -------- | -------- | - | type | ToggleType | Yes| Type of the toggle.| - | isOn | boolean | No| Whether the toggle is turned on. The value **true** means that the toggle is turned on, and **false** means the opposite.
Default value: **false** | +**Parameters** + +| Name| Type| Mandatory | Description | +| ---- | ---------- | -----| -------------- | +| type | [ToggleType](#toggletype) | Yes | Type of the toggle.| +| isOn | boolean | No | Whether the toggle is turned on. The value **true** means that the toggle is turned on, and **false** means the opposite.
Default value: **false**| -- ToggleType enums - | Name| Description| - | -------- | -------- | - | Checkbox | Check box type.
> **NOTE**
> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:
{
top: 14 vp,
right: 6 vp,
bottom: 14 vp,
left: 6 vp
} | - | Button | Button type. The set string, if any, will be displayed inside the button. | - | Switch | Switch type.
> **NOTE**
> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:
{
top: 12 vp,
right: 12 vp,
bottom: 12 vp,
left: 12 vp
} | +## ToggleType +| Name | Description | +| -------- | ---------------- | +| Checkbox | Check box type.
> **NOTE**
> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:
{
top: 14 vp,
right: 6 vp,
bottom: 14 vp,
left: 6 vp
} | +| Button | Button type. The set string, if any, will be displayed inside the button. | +| Switch | Switch type.
> **NOTE**
> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:
{
top: 12 vp,
right: 12 vp,
bottom: 12 vp,
left: 12 vp
} | ## Attributes -| Name| Parameter| Default Value| Description| -| -------- | -------- | -------- | -------- | -| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | - | Background color of the component when it is turned on.| -| switchPointColor | [ResourceColor](ts-types.md#resourcecolor) | - | Color of the circular slider when the component is of the **Switch** type.
> **NOTE**
> This attribute is valid only when **type** is set to **ToggleType.Switch**.| +| Name | Parameter | Description | +| ---------------- | --------------------------- | ---------------------- | +| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the component when it is turned on.| +| switchPointColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the circular slider when the component is of the **Switch** type.
> **NOTE**
> This attribute is valid only when **type** is set to **ToggleType.Switch**.| ## Events @@ -58,21 +53,20 @@ Toggle(options: { type: ToggleType, isOn?: boolean }) @Entry @Component struct ToggleExample { - build() { Column({ space: 10 }) { Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%') Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { Toggle({ type: ToggleType.Switch, isOn: false }) - .selectedColor(0xed6f21) - .switchPointColor(0xe5ffffff) + .selectedColor('#007DFF') + .switchPointColor('#FFFFFF') .onChange((isOn: boolean) => { console.info('Component status:' + isOn) }) Toggle({ type: ToggleType.Switch, isOn: true }) - .selectedColor(0x39a2db) - .switchPointColor(0xe5ffffff) + .selectedColor('#007DFF') + .switchPointColor('#FFFFFF') .onChange((isOn: boolean) => { console.info('Component status:' + isOn) }) @@ -81,15 +75,15 @@ struct ToggleExample { Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%') Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { Toggle({ type: ToggleType.Checkbox, isOn: false }) - .size({ width: 28, height: 28 }) - .selectedColor(0xed6f21) + .size({ width: 20, height: 20 }) + .selectedColor('#007DFF') .onChange((isOn: boolean) => { console.info('Component status:' + isOn) }) Toggle({ type: ToggleType.Checkbox, isOn: true }) - .size({ width: 28, height: 28 }) - .selectedColor(0x39a2db) + .size({ width: 20, height: 20 }) + .selectedColor('#007DFF') .onChange((isOn: boolean) => { console.info('Component status:' + isOn) }) @@ -98,17 +92,17 @@ struct ToggleExample { Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%') Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { Toggle({ type: ToggleType.Button, isOn: false }) { - Text('status button').padding({ left: 12, right: 12 }) - } - .selectedColor(0xed6f21) + Text('status button').fontColor('#182431').fontSize(12) + }.width(106) + .selectedColor('rgba(0,125,255,0.20)') .onChange((isOn: boolean) => { console.info('Component status:' + isOn) }) Toggle({ type: ToggleType.Button, isOn: true }) { - Text('status button').padding({ left: 12, right: 12 }) - } - .selectedColor(0x39a2db) + Text('status button').fontColor('#182431').fontSize(12) + }.width(106) + .selectedColor('rgba(0,125,255,0.20)') .onChange((isOn: boolean) => { console.info('Component status:' + isOn) }) @@ -118,4 +112,4 @@ struct ToggleExample { } ``` -![en-us_image_0000001211898522](figures/en-us_image_0000001211898522.gif) +![toggle](figures/toggle.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md index b2ebc714ee127ede15141dffaac3b47914be80c8..d0c3c2e1860d77390c679134eefc540ddcae238d 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md @@ -17,40 +17,41 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse **Parameters** - | Name | Type | Mandatory | Default Value | Description | - | ------ | ------ | ---- | --------- | ---------------------------- | - | offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.| - | color | string | Yes | '#ffffff' | Gradient color to set. | +| Name | Type | Mandatory | Default Value | Description | +| ------ | ------ | ---- | --------- | ---------------------------- | +| offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.| +| color | string | Yes | '#ffffff' | Gradient color to set. | **Example** ```ts - // xxx.ets - @Entry - @Component - struct Page45 { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - var grad = this.context.createLinearGradient(50,0, 300,100) - grad.addColorStop(0.0, 'red') - grad.addColorStop(0.5, 'white') - grad.addColorStop(1.0, 'green') - this.context.fillStyle = grad - this.context.fillRect(0, 0, 500, 500) - }) - } - .width('100%') - .height('100%') - }} +// xxx.ets +@Entry +@Component +struct Page45 { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() => { + var grad = this.context.createLinearGradient(50, 0, 300, 100) + grad.addColorStop(0.0, 'red') + grad.addColorStop(0.5, 'white') + grad.addColorStop(1.0, 'green') + this.context.fillStyle = grad + this.context.fillRect(0, 0, 500, 500) + }) + } + .width('100%') + .height('100%') + } +} ``` ![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png) diff --git a/en/application-dev/reference/arkui-ts/ts-container-list.md b/en/application-dev/reference/arkui-ts/ts-container-list.md index a9c2acfc0db3b4157f56cd2736271e6e62a240f3..bc109daa464ac8f2ff0645885829d882922875c6 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-list.md +++ b/en/application-dev/reference/arkui-ts/ts-container-list.md @@ -10,7 +10,7 @@ The **\** component provides a list container that presents a series of li ## Child Components -This component supports the [\](ts-container-listitem.md) and [\](ts-container-listitemgroup.md) child components. +This component supports the **[\](ts-container-listitem.md)** and **[\](ts-container-listitemgroup.md)** child components. ## APIs @@ -34,14 +34,14 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | listDirection | [Axis](ts-appendix-enums.md#axis) | Direction in which the list items are arranged.
Default value: **Axis.Vertical**| | divider | {
strokeWidth: [Length](ts-types.md#length),
color?:[ResourceColor](ts-types.md),
startMargin?: Length,
endMargin?: Length
} \| null | Style of the divider for the list items. By default, there is no divider.
- **strokeWidth**: stroke width of the divider.
- **color**: color of the divider.
- **startMargin**: distance between the divider and the start edge of the list.
- **endMargin**: distance between the divider and the end edge of the list.| | scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.
Default value: **BarState.Off**| -| cachedCount | number | Number of list items to be preloaded. For details, see [Minimizing White Blocks During Swiping](../../ui/ui-ts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).
Default value: **1**| -| editMode | boolean | Whether to enter editing mode.
Default value: **false**| +| cachedCount | number | Number of list items or list item groups to be preloaded. A list item group is calculated as a whole, and all list items of the group are preloaded at the same time. For details, see [Minimizing White Blocks During Swiping](../../ui/ui-ts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).
Default value: **1**| +| editMode(deprecated) | boolean | Whether to enter editing mode.
This API is deprecated since API version 9.
Default value: **false**| | edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect.
Default value: **EdgeEffect.Spring**| | chainAnimation | boolean | Whether to display chained animations on this list when it slides or its top or bottom is dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.
Default value: **false**
- **false**: No chained animations are displayed.
- **true**: Chained animations are displayed.| | multiSelectable8+ | boolean | Whether to enable mouse frame selection.
Default value: **false**
- **false**: The mouse frame selection is disabled.
- **true**: The mouse frame selection is enabled.| | lanes9+ | number \| [LengthConstrain](ts-types.md#lengthconstrain) | In the following description, **listDirection** is set to **Axis.Vertical**:
Number of columns in which the list items are arranged along the cross axis.
Default value: **1**
The rules are as follows:
- If the value is set to a number, the column width is determined based on the specified number and the cross-axis width of the **\** component.
- If the value is set to {minLength, maxLength}, the number of columns is adjusted adaptively based on the width of the **\** component, ensuring that the width respects the {minLength, maxLength} constraints during adaptation. The **minLength** constraint is prioritized. For example, if **lanes** is set to **{minLength: 40vp, maxLength: 60vp}** and the width of the **\** component is 70 vp, the list items are arranged in one column with their alignment compliant with the **alignListItem** settings. If the width of the **\** component is changed to 80 vp, which is twice the value of **minLength**, the list items are arranged in two columns.| | alignListItem9+ | ListItemAlign | Alignment mode of list items along the cross axis when: Cross-axis width of the **\** component > Cross-axis width of list items x Value of **lanes**.
Default value: **ListItemAlign.Start**| -| sticky9+ | StickyStyle | Whether to pin the header to the top or the footer to the bottom in the **\** component. This attribute is used together with the **\** component.
Default value: **StickyStyle.None**
**NOTE**
The **sticky** attribute can be set to **StickyStyle.Header** or \| **StickyStyle.Footer** to support both the pin-to-top and pin-to-bottom features.| +| sticky9+ | StickyStyle | Whether to pin the header to the top or the footer to the bottom in the **\** component. This attribute is used together with the **[\](ts-container-listitemgroup.md)** component.
Default value: **StickyStyle.None**
**NOTE**
The **sticky** attribute can be set to **StickyStyle.Header** or \| **StickyStyle.Footer** to support both the pin-to-top and pin-to-bottom features.| ## ListItemAlign9+ @@ -65,13 +65,13 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Description| | -------- | -------- | -| onItemDelete(event: (index: number) => boolean) | Triggered when a list item is deleted.
- **index**: index of the deleted list item.| +| onItemDelete(deprecated)(event: (index: number) => boolean) | Triggered when a list item is deleted.
This API is deprecated since API version 9.
- **index**: index of the deleted list item.| | onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | Triggered when the list scrolls.
- **scrollOffset**: scroll offset.
- **[scrollState](#scrollstate)**: current scroll state.| | onScrollIndex(event: (start: number, end: number) => void) | Triggered when scrolling starts.
When calculating the index value, the **\** accounts for one index value as a whole, and the index values of the list items within are not calculated.
- **start**: index of the scroll start position.
- **end**: index of the scroll end position.| | onReachStart(event: () => void) | Triggered when the list reaches the start position.| | onReachEnd(event: () => void) | Triggered when the list reaches the end position.| -| onScrollBegin9+(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | Triggered when the list starts to scroll.
- **dx**: amount by which the list will scroll in the horizontal direction.
- **dy**: amount by which the list will scroll in the vertical direction.
- **dxRemain**: remaining amount by which the list can scroll in the horizontal direction.
- **dyRemain**: remaining amount by which the list can scroll in the vertical direction.| -| onScrollStop(event: () => void) | Triggered when the list stops scrolling.| +| onScrollBegin9+(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | Triggered when the list starts to scroll. The input parameters indicate the amount by which the list will scroll. The event handler then works out the amount by which the list needs to scroll based on the real-world situation and returns the result.
- **dx**: amount by which the list will scroll in the horizontal direction.
- **dy**: amount by which the list will scroll in the horizontal direction.
- **dxRemain**: amount by which the list actually scrolls in the horizontal direction.
- **dyRemain**: amount by which the list actually scrolls in the vertical direction.| +| onScrollStop(event: () => void) | Triggered when the list stops scrolling after the user's finger leaves the screen. This event will not be triggered if the scrolling is initiated by using [Scroller](ts-container-scroll.md#scroller).| | onItemMove(event: (from: number, to: number) => boolean) | Triggered when a list item moves.
- **from**: index of the item before moving.
- **to**: index of the item after moving.| | onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => ((() => any) \| void) | Triggered when a list element starts to be dragged.
- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).
- **itemIndex**: index of the dragged list element.| | onItemDragEnter(event: (event: ItemDragInfo) => void) | Triggered when the dragged item enters the drop target of the list.
- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).| @@ -84,12 +84,12 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Description | | ------ | ------------------------- | | Idle | Not scrolling. | -| Scroll | Inertial scrolling. | -| Fling | Finger dragging. | +| Scroll | Finger dragging. | +| Fling | Inertial scrolling. | > **NOTE** > -> To enable the editable mode for a list, the following conditions must be met: +> To enable the editable mode for a list, the following conditions must be met: (This feature is deprecated since API version 9.) > > - **editMode** is set to **true**. > @@ -99,7 +99,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the > > To enable dragging for a list item, the following conditions must be met: > -> - **editMode** is set to **true**. +> - **editMode** is set to **true**. (This is not required since API version 9.) > > - The list item is bound to the **onDragStart** event and the event returns a floating UI during event callback. @@ -112,43 +112,31 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the @Component struct ListExample { private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] - @State editFlag: boolean = false build() { - Stack({ alignContent: Alignment.TopStart }) { - Column() { - List({ space: 20, initialIndex: 0 }) { - ForEach(this.arr, (item) => { - ListItem() { - Text('' + item) - .width('100%').height(100).fontSize(16) - .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) - }.editable(true) - }, item => item) - } - .listDirection(Axis.Vertical) // Arrangement direction - .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // Divider - .edgeEffect(EdgeEffect.None) // No effect when the list scrolls to the edge. - .chainAnimation(false) // Chained animations are disabled. - .onScrollIndex((firstIndex: number, lastIndex: number) => { - console.info('first' + firstIndex) - console.info('last' + lastIndex) - }) - .editMode(this.editFlag) - .onItemDelete((index: number) => { - console.info(this.arr[index] + 'Delete') - this.arr.splice(index, 1) - console.info(JSON.stringify(this.arr)) - this.editFlag = false - return true - }).width('90%') - }.width('100%') - - Button('edit list') - .onClick(() => { - this.editFlag = !this.editFlag - }).margin({ top: 5, left: 20 }) - }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) + Column() { + List({ space: 20, initialIndex: 0 }) { + ForEach(this.arr, (item) => { + ListItem() { + Text('' + item) + .width('100%').height(100).fontSize(16) + .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) + } + }, item => item) + } + .listDirection(Axis.Vertical) // Arrangement direction + .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // Divider + .edgeEffect(EdgeEffect.Spring) // No effect when the list scrolls to the edge. + .onScrollIndex((firstIndex: number, lastIndex: number) => { + console.info('first' + firstIndex) + console.info('last' + lastIndex) + }) + .width('90%') + } + .width('100%') + .height('100%') + .backgroundColor(0xDCDCDC) + .padding({ top: 5 }) } } ``` diff --git a/en/application-dev/reference/arkui-ts/ts-container-scroll.md b/en/application-dev/reference/arkui-ts/ts-container-scroll.md index b16dc3fc8ac63474159227e2db13ad578429e33d..90d17f70d4fc01ef8e80d9f13069e6d08b5d02fd 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-scroll.md +++ b/en/application-dev/reference/arkui-ts/ts-container-scroll.md @@ -236,17 +236,21 @@ struct ScrollExample { struct NestedScroll { @State listPosition: number = 0; // 0 indicates scrolling to the top of the list, 1 indicates scrolling to the middle of the list, and 2 indicates scrolling to the bottom of the list. private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] - private scroller: Scroller = new Scroller() + private scrollerForScroll: Scroller = new Scroller() + private scrollerForList: Scroller = new Scroller() build() { Flex() { - Scroll(this.scroller) { + Scroll(this.scrollerForScroll) { Column() { Text("Scroll Area") .width("100%").height("40%").backgroundColor(0X330000FF) .fontSize(16).textAlign(TextAlign.Center) + .onClick(() => { + this.scrollerForList.scrollToIndex(5) + }) - List({ space: 20 }) { + List({ space: 20, scroller: this.scrollerForList }) { ForEach(this.arr, (item) => { ListItem() { Text("ListItem" + item) @@ -255,7 +259,9 @@ struct NestedScroll { }.width("100%").height(100) }, item => item) } - .width("100%").height("50%").edgeEffect(EdgeEffect.None) + .width("100%") + .height("50%") + .edgeEffect(EdgeEffect.None) .onReachStart(() => { this.listPosition = 0 }) @@ -264,7 +270,7 @@ struct NestedScroll { }) .onScrollBegin((dx: number, dy: number) => { if ((this.listPosition == 0 && dy >= 0) || (this.listPosition == 2 && dy <= 0)) { - this.scroller.scrollBy(0, -dy) + this.scrollerForScroll.scrollBy(0, -dy) return { dxRemain: dx, dyRemain: 0 } } this.listPosition = 1 diff --git a/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md b/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md index 3eaa86b6d332b7ee7699efc3243da173a01b260e..400132c6ffd427a249df0c19b50e04c06eabcc3a 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md +++ b/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md @@ -23,7 +23,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| tabBar | string \| Resource \| {
icon?: string \| Resource,
text?: string \| Resource
}
\| [CustomBuilder](ts-types.md)8+ | Content displayed on the tab bar.
**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).
**NOTE**
If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image. | +| tabBar | string \| Resource \| {
icon?: string \| Resource,
text?: string \| Resource
}
\| [CustomBuilder](ts-types.md)8+ | Content displayed on the tab bar.
**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).
> **NOTE**
If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image.| > **NOTE** > - The **\** component does not support setting of the common width attribute. By default, its width is the same as that of the parent **\** component. @@ -33,82 +33,164 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ## Example +Example 1: + ```ts // xxx.ets @Entry @Component -struct TabContentExample { - @State fontColor: string = 'rgba(0, 0, 0, 0.4)' - @State selectedFontColor: string = 'rgba(10, 30, 255, 1)' +struct TabContentExample { + @State fontColor: string = '#182431' + @State selectedFontColor: string = '#007DFF' @State currentIndex: number = 0 private controller: TabsController = new TabsController() + @Builder TabBuilder(index: number) { Column() { - Image(this.currentIndex === index ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png') - .width(10) - .height(10) - .opacity(this.currentIndex === index ? 1 : 0.4) + Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg') + .width(24) + .height(24) + .margin({ bottom: 4 }) .objectFit(ImageFit.Contain) - Text(`Tab${(index > 2 ? (index - 1) : index) + 1}`) + Text(`Tab${index + 1}`) .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) .fontSize(10) - .margin({top: 2}) - } - } - - @Builder AddBuilder() { - Column() { - Image(this.currentIndex === 2 ? '/resources/ic_public_add_norm_filled_selected.png' : '/resources/ic_public_add_norm_filled.png') - .width(this.currentIndex === 2 ? 26 : 24) - .height(this.currentIndex === 2 ? 26 : 24) - .opacity(this.currentIndex === 2 ? 1 : 0.4) - .objectFit(ImageFit.Contain) - .animation({duration: 200}) - } + .fontWeight(500) + .lineHeight(14) + }.width('100%') } build() { Column() { Tabs({ barPosition: BarPosition.End, controller: this.controller }) { TabContent() { - Flex({justifyContent: FlexAlign.Center}) { - Text('Tab1').fontSize(32) - } + Column() { + Text('Tab1') + .fontSize(36) + .fontColor('#182431') + .fontWeight(500) + .opacity(0.4) + .margin({ top: 30, bottom: 56.5 }) + Divider() + .strokeWidth(0.5) + .color('#182431') + .opacity(0.05) + }.width('100%') }.tabBar(this.TabBuilder(0)) TabContent() { - Flex({justifyContent: FlexAlign.Center}) { - Text('Tab2').fontSize(32) - } + Column() { + Text('Tab2') + .fontSize(36) + .fontColor('#182431') + .fontWeight(500) + .opacity(0.4) + .margin({ top: 30, bottom: 56.5 }) + Divider() + .strokeWidth(0.5) + .color('#182431') + .opacity(0.05) + }.width('100%') }.tabBar(this.TabBuilder(1)) TabContent() { - Flex({justifyContent: FlexAlign.Center}) { - Text('Add').fontSize(32) - } - }.tabBar(this.AddBuilder()) + Column() { + Text('Tab3') + .fontSize(36) + .fontColor('#182431') + .fontWeight(500) + .opacity(0.4) + .margin({ top: 30, bottom: 56.5 }) + Divider() + .strokeWidth(0.5) + .color('#182431') + .opacity(0.05) + }.width('100%') + }.tabBar(this.TabBuilder(2)) TabContent() { - Flex({justifyContent: FlexAlign.Center}) { - Text('Tab3').fontSize(32) - } + Column() { + Text('Tab4') + .fontSize(36) + .fontColor('#182431') + .fontWeight(500) + .opacity(0.4) + .margin({ top: 30, bottom: 56.5 }) + Divider() + .strokeWidth(0.5) + .color('#182431') + .opacity(0.05) + }.width('100%') }.tabBar(this.TabBuilder(3)) - - TabContent() { - Flex({justifyContent: FlexAlign.Center}) { - Text('Tab4').fontSize(32) - } - }.tabBar(this.TabBuilder(4)) } .vertical(false) - .barWidth(300).barHeight(56) + .barHeight(56) + .onChange((index: number) => { + this.currentIndex = index + }) + .width(360) + .height(190) + .backgroundColor('#F1F3F5') + .margin({ top: 38 }) + }.width('100%') + } +} +``` + +![tabContent](figures/tabContent1.gif) + +Example 2: + +```ts +// xxx.ets +@Entry +@Component +struct TabContentExample { + @State fontColor: string = '#182431' + @State selectedFontColor: string = '#007DFF' + @State currentIndex: number = 0 + private controller: TabsController = new TabsController() + + @Builder TabBuilder(index: number) { + Column() { + Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg') + .width(24) + .height(24) + .margin({ bottom: 4 }) + .objectFit(ImageFit.Contain) + Text('Tab') + .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) + .fontSize(10) + .fontWeight(500) + .lineHeight(14) + }.width('100%').height('100%').justifyContent(FlexAlign.Center) + } + + build() { + Column() { + Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { + TabContent() + .tabBar(this.TabBuilder(0)) + TabContent() + .tabBar(this.TabBuilder(1)) + TabContent() + .tabBar(this.TabBuilder(2)) + TabContent() + .tabBar(this.TabBuilder(3)) + } + .vertical(true) + .barWidth(96) + .barHeight(414) .onChange((index: number) => { this.currentIndex = index }) - .width('90%').backgroundColor('rgba(241, 243, 245, 0.95)') - }.width('100%').height(200).margin({ top: 5 }) + .width(96) + .height(414) + .backgroundColor('#F1F3F5') + .margin({ top: 52 }) + }.width('100%') } } ``` -![en-us_image_0000001256978331](figures/en-us_image_0000001256978331.gif) +![tabContent](figures/tabContent2.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-container-tabs.md b/en/application-dev/reference/arkui-ts/ts-container-tabs.md index 82503cc45bae76b09dd443e1c935ebd877528303..b331d2efa09a4cb8da1b6880f642ced3ca411fb3 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-tabs.md +++ b/en/application-dev/reference/arkui-ts/ts-container-tabs.md @@ -2,14 +2,14 @@ The **\** component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a content view. -> **NOTE** +> **NOTE**
> > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components -This component can contain multiple [\](ts-container-tabcontent.md) components. +Only the [\](ts-container-tabcontent.md) child component is supported. ## APIs @@ -20,7 +20,7 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| barPosition | BarPosition | No| Tab bar position for creating the **\** container component.
Default value: **BarPosition.Start**| +| barPosition | BarPosition | No| Position of the **\** component.
Default value: **BarPosition.Start**| | index | number | No| Initial tab index.
Default value: **0**| | controller | [TabsController](#tabscontroller) | No| Tab controller.| @@ -49,8 +49,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Description| | -------- | -------- | -| Scrollable | The width of each tab is defined by its label length. The tabs are scrollable when the total width exceeds the tab bar width.| -| Fixed | The width of each tab is fixed, determined by evenly allocating the tab bar width among the tabs.| +| Scrollable | The width of each tab is determined by the actual layout. The tabs are scrollable in the following case: In horizontal layout, the total width exceeds the tab bar width; in horizontal layout, the total height exceeds the tab bar height.| +| Fixed | The width of each tab is determined by equally dividing the number of tabs by the bar width (or the bar height in vertical layout).| ## Events @@ -62,7 +62,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi ## TabsController -Defines a tab controller, which is used to control switching of tabs. +Defines a tab controller, which is used to control switching of tabs. One **TabsController** cannot control multiple **\** components. ### Objects to Import @@ -91,36 +91,60 @@ Switches to the specified tab. @Entry @Component struct TabsExample { + @State fontColor: string = '#182431' + @State selectedFontColor: string = '#007DFF' + @State currentIndex: number = 0 private controller: TabsController = new TabsController() + @Builder TabBuilder(index: number, name: string) { + Column() { + Text(name) + .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) + .fontSize(16) + .fontWeight(this.currentIndex === index ? 500 : 400) + .lineHeight(22) + .margin({ top: 17, bottom: 7 }) + Divider() + .strokeWidth(2) + .color('#007DFF') + .opacity(this.currentIndex === index ? 1 : 0) + }.width('100%') + } + build() { Column() { Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { TabContent() { - Column().width('100%').height('100%').backgroundColor(Color.Pink) - }.tabBar('pink') + Column().width('100%').height('100%').backgroundColor('#00CB87') + }.tabBar(this.TabBuilder(0, 'green')) TabContent() { - Column().width('100%').height('100%').backgroundColor(Color.Yellow) - }.tabBar('yellow') + Column().width('100%').height('100%').backgroundColor('#007DFF') + }.tabBar(this.TabBuilder(1, 'blue')) TabContent() { - Column().width('100%').height('100%').backgroundColor(Color.Blue) - }.tabBar('blue') + Column().width('100%').height('100%').backgroundColor('#FFBF00') + }.tabBar(this.TabBuilder(2, 'yellow')) TabContent() { - Column().width('100%').height('100%').backgroundColor(Color.Green) - }.tabBar('green') + Column().width('100%').height('100%').backgroundColor('#E67C92') + }.tabBar(this.TabBuilder(3, 'pink')) } - .vertical(true).scrollable(true).barMode(BarMode.Fixed) - .barWidth(70).barHeight(150).animationDuration(400) + .vertical(false) + .barMode(BarMode.Fixed) + .barWidth(360) + .barHeight(56) + .animationDuration(400) .onChange((index: number) => { - console.info(index.toString()) + this.currentIndex = index }) - .width('90%').backgroundColor(0xF5F5F5) - }.width('100%').height(150).margin({ top: 5 }) + .width(360) + .height(296) + .margin({ top: 52 }) + .backgroundColor('#F1F3F5') + }.width('100%') } } ``` -![en-us_image_0000001212218430](figures/en-us_image_0000001212218430.gif) +![tabs2](figures/tabs2.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md index b740289b435a6ba4a2f10e6290ba7af48e0974b9..4c6a674c969dcbbfdacdafbf39ccc008bdeb178d 100644 --- a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md +++ b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md @@ -23,25 +23,25 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render ## Attributes -| Name | Type | Description | -| ----------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| [fillStyle](#fillstyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Style to fill an area.
- When the type is **string**, this attribute indicates the color of the filling area.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API. | -| [lineWidth](#linewidth) | number | Line width. | -| [strokeStyle](#strokestyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Stroke style.
- When the type is **\**, this parameter indicates the stroke color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API. | -| [lineCap](#linecap) | CanvasLineCap | Style of the line endpoints. The options are as follows:
- **butt**: The endpoints of the line are squared off.
- **round**: The endpoints of the line are rounded.
- **square**: The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.
- Default value: **'butt'** | -| [lineJoin](#linejoin) | CanvasLineJoin | Style of the shape used to join line segments. The options are as follows:
- **round**: The intersection is a sector, whose radius at the rounded corner is equal to the line width.
- **bevel**: The intersection is a triangle. The rectangular corner of each line is independent.
- **miter**: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.
- Default value: **'miter'** | -| [miterLimit](#miterlimit) | number | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.
- Default value: **10** | -| [font](#font) | string | Font style.
Syntax: ctx.font='font-size font-family'
- (Optional) **font-size**: font size and row height. The unit can only be pixels.
(Optional) **font-family**: font family.
Syntax: ctx.font='font-style font-weight font-size font-family'
- (Optional) **font-style**: font style. Available values are **normal** and **italic**.
- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**.
- (Optional) **font-size**: font size and row height. The unit can only be pixels.
- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**.
Default value: **'normal normal 14px sans-serif'** | -| [textAlign](#textalign) | CanvasTextAlign | Text alignment mode. Available values are as follows:
- **left**: The text is left-aligned.
- **right**: The text is right-aligned.
- **center**: The text is center-aligned.
- **start**: The text is aligned with the start bound.
- **end**: The text is aligned with the end bound.
**NOTE**
In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.
- Default value: **'left'** | -| [textBaseline](#textbaseline) | CanvasTextBaseline | Horizontal alignment mode of text. Available values are as follows:
- **alphabetic**: The text baseline is the normal alphabetic baseline.
- **top**: The text baseline is on the top of the text bounding box.
- **hanging**: The text baseline is a hanging baseline over the text.
- **middle**: The text baseline is in the middle of the text bounding box.
**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.
- **bottom**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.
- Default value: **'alphabetic'** | -| [globalAlpha](#globalalpha) | number | Opacity.
**0.0**: completely transparent.
**1.0**: completely opaque. | -| [lineDashOffset](#linedashoffset) | number | Offset of the dashed line. The precision is float.
- Default value: **0.0** | -| [globalCompositeOperation](#globalcompositeoperation) | string | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**.
- Default value: **'source-over'** | -| [shadowBlur](#shadowblur) | number | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.
- Default value: **0.0** | -| [shadowColor](#shadowcolor) | string | Shadow color. | -| [shadowOffsetX](#shadowoffsetx) | number | X-axis shadow offset relative to the original object. | -| [shadowOffsetY](#shadowoffsety) | number | Y-axis shadow offset relative to the original object. | -| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.
- Default value: **true** | +| Name | Type | Description | +| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | +| [fillStyle](#fillstyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Style to fill an area.
- When the type is **string**, this attribute indicates the color of the filling area.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.| +| [lineWidth](#linewidth) | number | Line width. | +| [strokeStyle](#strokestyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Stroke style.
- When the type is **\**, this parameter indicates the stroke color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.| +| [lineCap](#linecap) | CanvasLineCap | Style of the line endpoints. The options are as follows:
- **butt**: The endpoints of the line are squared off.
- **round**: The endpoints of the line are rounded.
- **square**: The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.
- Default value: **'butt'**| +| [lineJoin](#linejoin) | CanvasLineJoin | Style of the shape used to join line segments. The options are as follows:
- **round**: The intersection is a sector, whose radius at the rounded corner is equal to the line width.
- **bevel**: The intersection is a triangle. The rectangular corner of each line is independent.
- **miter**: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.
- Default value: **'miter'**| +| [miterLimit](#miterlimit) | number | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.
- Default value: **10**| +| [font](#font) | string | Font style.
Syntax: ctx.font='font-size font-family'
- (Optional) **font-size**: font size and row height. The unit can only be pixels.
(Optional) **font-family**: font family.
Syntax: ctx.font='font-style font-weight font-size font-family'
- (Optional) **font-style**: font style. Available values are **normal** and **italic**.
- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**.
- (Optional) **font-size**: font size and row height. The unit can only be pixels.
- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**.
Default value: **'normal normal 14px sans-serif'**| +| [textAlign](#textalign) | CanvasTextAlign | Text alignment mode. Available values are as follows:
- **left**: The text is left-aligned.
- **right**: The text is right-aligned.
- **center**: The text is center-aligned.
- **start**: The text is aligned with the start bound.
- **end**: The text is aligned with the end bound.
**NOTE**
In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.
- Default value: **'left'**| +| [textBaseline](#textbaseline) | CanvasTextBaseline | Horizontal alignment mode of text. Available values are as follows:
- **alphabetic**: The text baseline is the normal alphabetic baseline.
- **top**: The text baseline is on the top of the text bounding box.
- **hanging**: The text baseline is a hanging baseline over the text.
- **middle**: The text baseline is in the middle of the text bounding box.
**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.
- **bottom**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.
- Default value: **'alphabetic'**| +| [globalAlpha](#globalalpha) | number | Opacity.
**0.0**: completely transparent.
**1.0**: completely opaque. | +| [lineDashOffset](#linedashoffset) | number | Offset of the dashed line. The precision is float.
- Default value: **0.0**| +| [globalCompositeOperation](#globalcompositeoperation) | string | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**.
- Default value: **'source-over'**| +| [shadowBlur](#shadowblur) | number | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.
- Default value: **0.0**| +| [shadowColor](#shadowcolor) | string | Shadow color. | +| [shadowOffsetX](#shadowoffsetx) | number | X-axis shadow offset relative to the original object. | +| [shadowOffsetY](#shadowoffsety) | number | Y-axis shadow offset relative to the original object. | +| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.
- Default value: **true**| > **NOTE** > @@ -78,7 +78,7 @@ struct FillStyleExample { } ``` -![en-us_image_0000001211898510](figures/en-us_image_0000001211898510.png) +![en-us_image_0000001193872516](figures/en-us_image_0000001193872516.png) ### lineWidth @@ -111,7 +111,7 @@ struct LineWidthExample { } ``` -![en-us_image_0000001257058439](figures/en-us_image_0000001257058439.png) +![en-us_image_0000001238832403](figures/en-us_image_0000001238832403.png) ### strokeStyle @@ -145,7 +145,7 @@ struct StrokeStyleExample { } ``` -![en-us_image_0000001257058429](figures/en-us_image_0000001257058429.png) +![en-us_image_0000001238712437](figures/en-us_image_0000001238712437.png) ### lineCap @@ -182,7 +182,7 @@ struct LineCapExample { } ``` -![en-us_image_0000001256858427](figures/en-us_image_0000001256858427.png) +![en-us_image_0000001194192454](figures/en-us_image_0000001194192454.PNG) ### lineJoin @@ -220,7 +220,7 @@ struct LineJoinExample { } ``` -![en-us_image_0000001256858429](figures/en-us_image_0000001256858429.png) +![en-us_image_0000001194352450](figures/en-us_image_0000001194352450.png) ### miterLimit @@ -258,7 +258,7 @@ struct MiterLimit { } ``` -![en-us_image_0000001212218472](figures/en-us_image_0000001212218472.png) +![en-us_image_0000001238952397](figures/en-us_image_0000001238952397.png) ### font @@ -291,7 +291,7 @@ struct Fonts { } ``` -![en-us_image_0000001211898508](figures/en-us_image_0000001211898508.png) +![en-us_image_0000001194032476](figures/en-us_image_0000001194032476.png) ### textAlign @@ -339,7 +339,7 @@ struct CanvasExample { } ``` -![en-us_image_0000001257138377](figures/en-us_image_0000001257138377.png) +![en-us_image_0000001239032423](figures/en-us_image_0000001239032423.png) ### textBaseline @@ -387,7 +387,7 @@ struct TextBaseline { } ``` -![en-us_image_0000001256978375](figures/en-us_image_0000001256978375.png) +![en-us_image_0000001193872518](figures/en-us_image_0000001193872518.png) ### globalAlpha @@ -423,7 +423,7 @@ struct GlobalAlpha { } ``` -![en-us_image_0000001211898506](figures/en-us_image_0000001211898506.png) +![en-us_image_0000001238832405](figures/en-us_image_0000001238832405.png) ### lineDashOffset @@ -458,7 +458,7 @@ struct LineDashOffset { } ``` -![en-us_image_0000001212058506](figures/en-us_image_0000001212058506.png) +![en-us_image_0000001238712439](figures/en-us_image_0000001238712439.png) ### globalCompositeOperation @@ -513,7 +513,7 @@ struct GlobalCompositeOperation { } ``` -![en-us_image_0000001212218474](figures/en-us_image_0000001212218474.png) +![en-us_image_0000001194192456](figures/en-us_image_0000001194192456.png) ### shadowBlur @@ -548,7 +548,7 @@ struct ShadowBlur { } ``` -![en-us_image_0000001211898514](figures/en-us_image_0000001211898514.png) +![en-us_image_0000001194352452](figures/en-us_image_0000001194352452.png) ### shadowColor @@ -583,7 +583,7 @@ struct ShadowColor { } ``` -![en-us_image_0000001212058502](figures/en-us_image_0000001212058502.png) +![en-us_image_0000001238952399](figures/en-us_image_0000001238952399.png) ### shadowOffsetX @@ -619,7 +619,7 @@ struct ShadowOffsetX { } ``` -![en-us_image_0000001257138379](figures/en-us_image_0000001257138379.png) +![en-us_image_0000001194032478](figures/en-us_image_0000001194032478.png) ### shadowOffsetY @@ -655,7 +655,7 @@ struct ShadowOffsetY { } ``` -![en-us_image_0000001257058427](figures/en-us_image_0000001257058427.png) +![en-us_image_0000001239032425](figures/en-us_image_0000001239032425.png) ### imageSmoothingEnabled @@ -689,7 +689,7 @@ struct ImageSmoothingEnabled { } ``` -![en-us_image_0000001257138385](figures/en-us_image_0000001257138385.png) +![en-us_image_0000001193872520](figures/en-us_image_0000001193872520.png) ## Methods @@ -703,7 +703,7 @@ Fills a rectangle on the canvas. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ------ | ------ | ---- | ---- | ------------- | | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| @@ -739,7 +739,7 @@ Fills a rectangle on the canvas. } ``` - ![en-us_image_0000001257138375](figures/en-us_image_0000001257138375.png) + ![en-us_image_0000001194192436](figures/en-us_image_0000001194192436.png) ### strokeRect @@ -748,16 +748,16 @@ strokeRect(x: number, y: number, w: number, h: number): void Draws an outlined rectangle on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ------ | ------ | ---- | ---- | ------------ | | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| | width | number | Yes | 0 | Width of the rectangle. | | height | number | Yes | 0 | Height of the rectangle. | - **Example** +**Example** ```ts // xxx.ets @@ -786,7 +786,7 @@ Draws an outlined rectangle on the canvas. } ``` - ![en-us_image_0000001212378436](figures/en-us_image_0000001212378436.png) + ![en-us_image_0000001194352436](figures/en-us_image_0000001194352436.png) ### clearRect @@ -795,16 +795,16 @@ clearRect(x: number, y: number, w: number, h: number): void Clears the content in a rectangle on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ------ | ------ | ---- | ---- | ------------- | | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| | width | number | Yes | 0 | Width of the rectangle. | | height | number | Yes | 0 | Height of the rectangle. | - **Example** +**Example** ```ts // xxx.ets @@ -835,7 +835,7 @@ Clears the content in a rectangle on the canvas. } ``` - ![en-us_image_0000001212058500](figures/en-us_image_0000001212058500.png) + ![en-us_image_0000001238952377](figures/en-us_image_0000001238952377.png) ### fillText @@ -846,14 +846,14 @@ Draws filled text on the canvas. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | -------- | ------ | ---- | ---- | --------------- | | text | string | Yes | "" | Text to draw. | | x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| | maxWidth | number | No | - | Maximum width allowed for the text. | - **Example** +**Example** ```ts // xxx.ets @@ -883,7 +883,7 @@ Draws filled text on the canvas. } ``` - ![en-us_image_0000001257058437](figures/en-us_image_0000001257058437.png) + ![en-us_image_0000001194032458](figures/en-us_image_0000001194032458.png) ### strokeText @@ -894,14 +894,14 @@ Draws a text stroke on the canvas. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | -------- | ------ | ---- | ---- | --------------- | | text | string | Yes | "" | Text to draw. | | x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| | maxWidth | number | No | - | Maximum width of the text to be drawn. | - **Example** +**Example** ```ts // xxx.ets @@ -931,7 +931,7 @@ Draws a text stroke on the canvas. } ``` - ![en-us_image_0000001212218466](figures/en-us_image_0000001212218466.png) + ![en-us_image_0000001238952401](figures/en-us_image_0000001238952401.png) ### measureText @@ -940,13 +940,13 @@ measureText(text: string): TextMetrics Returns a **TextMetrics** object used to obtain the width of specified text. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ---------- | | text | string | Yes | "" | Text to be measured.| - **Return value** +**Return value** | Type | Description | | ----------- | ------- | @@ -970,7 +970,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text. | hangingBaseline | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the hanging baseline of the line box. The current value is **0**.| | ideographicBaseline | number | Distance from the horizontal line indicated by the **CanvasRenderingContext2D.textBaseline** attribute to the ideographic baseline of the line box. The current value is **0**.| - **Example** +**Example** ```ts // xxx.ets @@ -1001,7 +1001,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text. } ``` - ![en-us_image_0000001256858431](figures/en-us_image_0000001256858431.png) + ![en-us_image_0000001194032480](figures/en-us_image_0000001194032480.png) ### stroke @@ -1010,13 +1010,13 @@ stroke(path?: Path2D): void Strokes a path. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ---------------------------------------- | ---- | ---- | ------------ | | path | [Path2D](ts-components-canvas-path2d.md) | No | null | A **Path2D** path to draw.| - **Example** +**Example** ```ts // xxx.ets @@ -1050,7 +1050,7 @@ Strokes a path. } ``` - ![en-us_image_0000001257138373](figures/en-us_image_0000001257138373.png) + ![en-us_image_0000001238832389](figures/en-us_image_0000001238832389.png) ### beginPath @@ -1059,7 +1059,7 @@ beginPath(): void Creates a drawing path. - **Example** +**Example** ```ts // xxx.ets @@ -1093,7 +1093,7 @@ Creates a drawing path. } ``` - ![en-us_image_0000001212378440](figures/en-us_image_0000001212378440.png) + ![en-us_image_0000001193872522](figures/en-us_image_0000001193872522.png) ### moveTo @@ -1102,14 +1102,14 @@ moveTo(x: number, y: number): void Moves a drawing path to a target position on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------- | | x | number | Yes | 0 | X-coordinate of the target position.| | y | number | Yes | 0 | Y-coordinate of the target position.| - **Example** +**Example** ```ts // xxx.ets @@ -1141,7 +1141,7 @@ Moves a drawing path to a target position on the canvas. } ``` - ![en-us_image_0000001212058498](figures/en-us_image_0000001212058498.png) + ![en-us_image_0000001238832409](figures/en-us_image_0000001238832409.png) ### lineTo @@ -1150,14 +1150,14 @@ lineTo(x: number, y: number): void Connects the current point to a target position using a straight line. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------- | | x | number | Yes | 0 | X-coordinate of the target position.| | y | number | Yes | 0 | Y-coordinate of the target position.| - **Example** +**Example** ```ts // xxx.ets @@ -1189,7 +1189,7 @@ Connects the current point to a target position using a straight line. } ``` - ![en-us_image_0000001257058435](figures/en-us_image_0000001257058435.png) + ![en-us_image_0000001238712443](figures/en-us_image_0000001238712443.png) ### closePath @@ -1198,7 +1198,7 @@ closePath(): void Draws a closed path. - **Example** +**Example** ```ts // xxx.ets @@ -1232,7 +1232,7 @@ Draws a closed path. } ``` - ![en-us_image_0000001257058431](figures/en-us_image_0000001257058431.png) + ![en-us_image_0000001194192460](figures/en-us_image_0000001194192460.png) ### createPattern @@ -1243,7 +1243,7 @@ Creates a pattern for image filling based on a specified source image and repeti **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | null | Source image. For details, see **ImageBitmap**. | | repetition | string | Yes | "" | Repetition mode. The value can be **"repeat"**, **"repeat-x"**, **"repeat-y"**, or **"no-repeat"**.| @@ -1254,7 +1254,7 @@ Creates a pattern for image filling based on a specified source image and repeti | ------------------------------- | ----------------------- | | [CanvasPattern](#canvaspattern) | Created pattern for image filling based on a specified source image and repetition mode.| - **Example** +**Example** ```ts // xxx.ets @@ -1286,7 +1286,7 @@ Creates a pattern for image filling based on a specified source image and repeti } ``` - ![en-us_image_0000001257138387](figures/en-us_image_0000001257138387.png) + ![en-us_image_0000001194352456](figures/en-us_image_0000001194352456.png) ### bezierCurveTo @@ -1295,9 +1295,9 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, Draws a cubic bezier curve on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | -------------- | | cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve.| | cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve.| @@ -1306,7 +1306,7 @@ Draws a cubic bezier curve on the canvas. | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. | | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. | - **Example** +**Example** ```ts // xxx.ets @@ -1338,7 +1338,7 @@ Draws a cubic bezier curve on the canvas. } ``` - ![en-us_image_0000001212378442](figures/en-us_image_0000001212378442.png) + ![en-us_image_0000001238952403](figures/en-us_image_0000001238952403.png) ### quadraticCurveTo @@ -1347,16 +1347,16 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void Draws a quadratic curve on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ----------- | | cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter.| | cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter.| | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve.| | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve.| - **Example** +**Example** ```ts // xxx.ets @@ -1388,7 +1388,7 @@ Draws a quadratic curve on the canvas. } ``` - ![en-us_image_0000001256978383](figures/en-us_image_0000001256978383.png) + ![en-us_image_0000001194032482](figures/en-us_image_0000001194032482.png) ### arc @@ -1397,9 +1397,9 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, Draws an arc on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---------------- | ------- | ---- | ----- | ---------- | | x | number | Yes | 0 | X-coordinate of the center point of the arc.| | y | number | Yes | 0 | Y-coordinate of the center point of the arc.| @@ -1408,7 +1408,7 @@ Draws an arc on the canvas. | endAngle | number | Yes | 0 | End radian of the arc. | | counterclockwise | boolean | No | false | Whether to draw the arc counterclockwise.| - **Example** +**Example** ```ts // xxx.ets @@ -1439,7 +1439,7 @@ Draws an arc on the canvas. } ``` - ![en-us_image_0000001212378430](figures/en-us_image_0000001212378430.png) + ![en-us_image_0000001239032429](figures/en-us_image_0000001239032429.png) ### arcTo @@ -1448,9 +1448,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void Draws an arc based on the radius and points on the arc. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ------ | ------ | ---- | ---- | --------------- | | x1 | number | Yes | 0 | X-coordinate of the first point on the arc.| | y1 | number | Yes | 0 | Y-coordinate of the first point on the arc.| @@ -1458,7 +1458,7 @@ Draws an arc based on the radius and points on the arc. | y2 | number | Yes | 0 | Y-coordinate of the second point on the arc.| | radius | number | Yes | 0 | Radius of the arc. | - **Example** +**Example** ```ts // xxx.ets @@ -1489,7 +1489,7 @@ Draws an arc based on the radius and points on the arc. } ``` - ![en-us_image_0000001257138383](figures/en-us_image_0000001257138383.png) + ![en-us_image_0000001193872524](figures/en-us_image_0000001193872524.png) ### ellipse @@ -1498,9 +1498,9 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number Draws an ellipse in the specified rectangular region on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---------------- | ------- | ---- | ----- | ----------------- | | x | number | Yes | 0 | X-coordinate of the ellipse center. | | y | number | Yes | 0 | Y-coordinate of the ellipse center. | @@ -1511,7 +1511,7 @@ Draws an ellipse in the specified rectangular region on the canvas. | endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse. The unit is radian.| | counterclockwise | boolean | No | false | Whether to draw the ellipse counterclockwise.
**true**: Draw the ellipse counterclockwise.
**false**: Draw the ellipse clockwise. | - **Example** +**Example** ```ts // xxx.ets @@ -1541,7 +1541,7 @@ Draws an ellipse in the specified rectangular region on the canvas. } ``` - ![en-us_image_0000001256858423](figures/en-us_image_0000001256858423.png) + ![en-us_image_0000001194192440](figures/en-us_image_0000001194192440.png) ### rect @@ -1550,16 +1550,16 @@ rect(x: number, y: number, w: number, h: number): void Creates a rectangle on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ------------- | | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| | w | number | Yes | 0 | Width of the rectangle. | | h | number | Yes | 0 | Height of the rectangle. | - **Example** +**Example** ```ts // xxx.ets @@ -1589,7 +1589,7 @@ Creates a rectangle on the canvas. } ``` - ![en-us_image_0000001257138381](figures/en-us_image_0000001257138381.png) + ![en-us_image_0000001238712445](figures/en-us_image_0000001238712445.png) ### fill @@ -1600,7 +1600,7 @@ Fills the area inside a closed path on the canvas. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | -------- | -------------- | ---- | --------- | ---------------------------------------- | | fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to fill.
The options are **"nonzero"** and **"evenodd"**.| @@ -1632,7 +1632,7 @@ Fills the area inside a closed path on the canvas. } ``` - ![en-us_image_0000001256858421](figures/en-us_image_0000001256858421.png) + ![en-us_image_0000001194192462](figures/en-us_image_0000001194192462.png) fill(path: Path2D, fillRule?: CanvasFillRule): void @@ -1641,7 +1641,7 @@ Fills the area inside a closed path on the canvas. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | -------- | -------------- | ---- | --------- | ---------------------------------------- | | path | Path2D | Yes | | A **Path2D** path to fill. | | fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to fill.
The options are **"nonzero"** and **"evenodd"**.| @@ -1698,11 +1698,11 @@ Sets the current path to a clipping path. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | -------- | -------------- | ---- | --------- | ---------------------------------------- | | fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to clip.
The options are **"nonzero"** and **"evenodd"**.| - **Example** +**Example** ```ts // xxx.ets @@ -1735,7 +1735,7 @@ Sets the current path to a clipping path. } ``` - ![en-us_image_0000001257058441](figures/en-us_image_0000001257058441.png) + ![en-us_image_0000001194032462](figures/en-us_image_0000001194032462.png) clip(path:Path2D, fillRule?: CanvasFillRule): void @@ -1744,12 +1744,12 @@ Sets a closed path to a clipping path. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | -------- | -------------- | ---- | --------- | ---------------------------------------- | | path | Path2D | Yes | | A **Path2D** path to clip.| | fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to clip.
The options are **"nonzero"** and **"evenodd"**.| - **Example** +**Example** ```ts // xxx.ets @@ -1795,7 +1795,7 @@ Sets a filter for the image on the canvas. This API is a void API. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ------ | ------ | ---- | ---- | ------------ | | filter | string | Yes | - | Functions that accept various filter effects.| @@ -1827,13 +1827,13 @@ rotate(angle: number): void Rotates a canvas clockwise around its coordinate axes. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ----- | ------ | ---- | ---- | ---------------------------------------- | | angle | number | Yes | 0 | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian.| - **Example** +**Example** ```ts // xxx.ets @@ -1851,7 +1851,7 @@ Rotates a canvas clockwise around its coordinate axes. .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - this.offContext.rotate(45 * Math.PI / 180) // Rotate the rectangle 45 degrees + this.offContext.rotate(45 * Math.PI / 180) this.offContext.fillRect(70, 20, 50, 50) var image = this.offContext.transferToImageBitmap() this.context.transferFromImageBitmap(image) @@ -1863,7 +1863,7 @@ Rotates a canvas clockwise around its coordinate axes. } ``` - ![en-us_image_0000001212218478](figures/en-us_image_0000001212218478.png) + ![en-us_image_0000001238952405](figures/en-us_image_0000001238952405.png) ### scale @@ -1872,14 +1872,14 @@ scale(x: number, y: number): void Scales the canvas based on scale factors. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ----------- | | x | number | Yes | 0 | Horizontal scale factor.| | y | number | Yes | 0 | Vertical scale factor.| - **Example** +**Example** ```ts // xxx.ets @@ -1911,7 +1911,7 @@ Scales the canvas based on scale factors. } ``` - ![en-us_image_0000001211898516](figures/en-us_image_0000001211898516.png) + ![en-us_image_0000001193872498](figures/en-us_image_0000001193872498.png) ### transform @@ -1939,7 +1939,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para | e | number | Yes | 0 | X-axis translation.| | f | number | Yes | 0 | Y-axis translation.| - **Example** +**Example** ```ts // xxx.ets @@ -1975,7 +1975,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para } ``` - ![en-us_image_0000001212378438](figures/en-us_image_0000001212378438.png) + ![en-us_image_0000001239032431](figures/en-us_image_0000001239032431.png) ### setTransform @@ -1986,7 +1986,7 @@ Resets the existing transformation matrix and creates a new transformation matri **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | -------------------- | | a | number | Yes | 0 | X-axis scale. | | b | number | Yes | 0 | X-axis skew. | @@ -1995,7 +1995,7 @@ Resets the existing transformation matrix and creates a new transformation matri | e | number | Yes | 0 | X-axis translation.| | f | number | Yes | 0 | Y-axis translation.| - **Example** +**Example** ```ts // xxx.ets @@ -2037,14 +2037,14 @@ translate(x: number, y: number): void Moves the origin of the coordinate system. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | -------- | | x | number | Yes | 0 | X-axis translation.| | y | number | Yes | 0 | Y-axis translation.| - **Example** +**Example** ```ts // xxx.ets @@ -2088,9 +2088,9 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: Draws an image on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ----- | ---------------------------------------- | ---- | ---- | ----------------------------- | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7)| Yes | null | Image resource. For details, see **ImageBitmap** or **PixelMap**.| | sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image. | @@ -2102,8 +2102,7 @@ Draws an image on the canvas. | dw | number | No | 0 | Width of the drawing area. | | dh | number | No | 0 | Height of the drawing area. | - - **Example** +**Example** ```ts // xxx.ets @@ -2132,7 +2131,7 @@ Draws an image on the canvas. } ``` - ![en-us_image_0000001256978377](figures/en-us_image_0000001256978377.png) + ![en-us_image_0000001238712447](figures/en-us_image_0000001238712447.png) ### createImageData @@ -2141,9 +2140,9 @@ createImageData(sw: number, sh: number): ImageData Creates an **[ImageData](ts-components-canvas-imagedata.md)** object with the specified dimensions. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ------------- | | sw | number | Yes | 0 | Width of the **ImageData** object.| | sh | number | Yes | 0 | Height of the **ImageData** object.| @@ -2153,9 +2152,9 @@ createImageData(imageData: ImageData): ImageData Creates an **[ImageData](ts-components-canvas-imagedata.md)** object by copying an existing **ImageData** object. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | --------- | ---------------------------------------- | ---- | ---- | ---------------- | | imagedata | [ImageData](ts-components-canvas-imagedata.md) | Yes | null | **ImageData** object to copy.| @@ -2171,9 +2170,9 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created with the pixels within the specified area on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------------- | | sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area.| | sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area.| @@ -2193,9 +2192,9 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created with the pixels within the specified area on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------------- | | sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area.| | sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area.| @@ -2208,7 +2207,6 @@ Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created wi | ---------------------------------------- | ------------- | | [ImageData](ts-components-canvas-imagedata.md) | New **ImageData** object.| - **Example** ```ts @@ -2252,9 +2250,9 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectangular area on the canvas. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ----------- | ------ | ---- | ------------ | ----------------------------- | | imagedata | Object | Yes | null | **ImageData** object with pixels to put onto the canvas. | | dx | number | Yes | 0 | X-axis offset of the rectangular area on the canvas. | @@ -2264,7 +2262,7 @@ Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectang | dirtyWidth | number | No | Width of the **ImageData** object| Width of the rectangular area to crop the source image. | | dirtyHeight | number | No | Height of the **ImageData** object| Height of the rectangular area to crop the source image. | - **Example** +**Example** ```ts // xxx.ets @@ -2299,7 +2297,7 @@ Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectang } ``` - ![en-us_image_0000001212058496](figures/en-us_image_0000001212058496.png) + ![en-us_image_0000001194192464](figures/en-us_image_0000001194192464.png) ### setLineDash @@ -2309,7 +2307,7 @@ Sets the dash line style. **Parameters** -| Name | Type | Description | +| Name | Type | Description | | -------- | -------- | ------------------- | | segments | number[] | An array of numbers that specify distances to alternately draw a line and a gap.| @@ -2455,9 +2453,9 @@ imageSmoothingQuality(quality: imageSmoothingQuality) Sets the quality of image smoothing. This API is a void API. - **Parameters** +**Parameters** -| Name | Type | Description | +| Name | Type | Description | | ------- | --------------------- | ---------------------------------------- | | quality | imageSmoothingQuality | Quality of image smoothing. The value can be **'low'**, **'medium'**,or **'high'**.| @@ -2474,8 +2472,7 @@ Creates an **ImageBitmap** object on the most recently rendered image of the **O | ---------------------------------------- | --------------- | | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Pixel data rendered on the **OffscreenCanvas**.| - - **Example** +**Example** ```ts // xxx.ets @@ -2518,7 +2515,7 @@ restore(): void Restores the saved drawing context. - **Example** +**Example** ```ts // xxx.ets @@ -2559,7 +2556,7 @@ save(): void Saves the current drawing context. - **Example** +**Example** ```ts // xxx.ets @@ -2600,16 +2597,16 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void Creates a linear gradient. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | -------- | | x0 | number | Yes | 0 | X-coordinate of the start point.| | y0 | number | Yes | 0 | Y-coordinate of the start point.| | x1 | number | Yes | 0 | X-coordinate of the end point.| | y1 | number | Yes | 0 | Y-coordinate of the end point.| - **Example** +**Example** ```ts // xxx.ets @@ -2643,7 +2640,7 @@ Creates a linear gradient. } ``` - ![en-us_image_0000001212378434](figures/en-us_image_0000001212378434.png) + ![en-us_image_0000001194352460](figures/en-us_image_0000001194352460.png) ### createRadialGradient @@ -2652,9 +2649,9 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, Creates a linear gradient. - **Parameters** +**Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ----------------- | | x0 | number | Yes | 0 | X-coordinate of the center of the start circle. | | y0 | number | Yes | 0 | Y-coordinate of the center of the start circle. | @@ -2663,7 +2660,7 @@ Creates a linear gradient. | y1 | number | Yes | 0 | Y-coordinate of the center of the end circle. | | r1 | number | Yes | 0 | Radius of the end circle, which must be a non-negative finite number.| - **Example** +**Example** ```ts // xxx.ets @@ -2697,7 +2694,7 @@ Creates a linear gradient. } ``` - ![en-us_image_0000001212218480](figures/en-us_image_0000001212218480.png) + ![en-us_image_0000001238952407](figures/en-us_image_0000001238952407.png) ## CanvasPattern diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md index 4c17dde69b6b7e3e0b8ce0a2fbf6fe6f4f8a695a..7e38b90f2497876d12af34b965cc34ed4e71af21 100644 --- a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md +++ b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md @@ -20,46 +20,44 @@ Configure the component transition animations for when a component is inserted o | -------- | -------- | -------- | -------- | | type | [TransitionType](ts-appendix-enums.md#transitiontype) | No| Transition type, which includes component addition and deletion by default.
Default value: **TransitionType.All**
**NOTE**
If **type** is not specified, insertion and deletion use the same transition type.| | opacity | number | No| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.
Default value: **1**| -| translate | {
x? : number,
y? : number,
z? : number
} | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
-**x**: distance to translate along the x-axis.
-**y**: distance to translate along the y-axis.
-**z**: distance to translate along the z-axis.| -| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number,
centerY? : number
} | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: scale factor along the x-axis.
- **y**: scale factor along the y-axis.
- **z**: scale factor along the z-axis.
- **centerX** and **centerY**: x coordinate and y coordinate of the scale center, respectively.
- If the center point is 0, it indicates the upper left corner of the component.
| -| rotate | {
x?: number,
y?: number,
z?: number,
angle?: Angle,
centerX?: Length,
centerY?: Length
} | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: rotation vector along the x-axis.
- **y**: rotation vector along the y-axis.
- **z**: rotation vector along the z-axis.
- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively.
- If the center point is (0, 0), it indicates the upper left corner of the component.| +| translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
-**x**: distance to translate along the x-axis.
-**y**: distance to translate along the y-axis.
-**z**: distance to translate along the z-axis.| +| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: scale factor along the x-axis.
- **y**: scale factor along the y-axis.
- **z**: scale factor along the z-axis.
- **centerX** and **centerY**: x coordinate and y coordinate of the scale center, respectively. The default values are both **"50%"**.
- If the center point is 0, it indicates the upper left corner of the component.
| +| rotate | {
x?: number,
y?: number,
z?: number,
angle?: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: rotation vector along the x-axis.
- **y**: rotation vector along the y-axis.
- **z**: rotation vector along the z-axis.
- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively. The default values are both **"50%"**.
- If the center point is (0, 0), it indicates the upper left corner of the component.| ## Example -The following example shows how to use a button to control the appearance and disappearance of another button, and how to configure the required transition animations. - ```ts // xxx.ets @Entry @Component struct TransitionExample { - @State btn: boolean = false - @State show: string = "show" + @State flag: boolean = true + @State show: string = 'show' build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,}) { - Button(this.show).width(80).height(30).backgroundColor(0x317aff).margin({bottom:50}) + Column() { + Button(this.show).width(80).height(30).margin(30) .onClick(() => { + // Click the button to show or hide the image. animateTo({ duration: 1000 }, () => { - this.btn = !this.btn - if(this.btn){ - this.show = "hide" - }else{ - this.show = "show" + if (this.flag) { + this.show = 'hide' + } else { + this.show = 'show' } + this.flag = !this.flag }) }) - if (this.btn) { - // The insertion and deletion have different transition effects. - Button() { - Image($r('app.media.bg1')).width("80%").height(300) - }.transition({ type: TransitionType.Insert, scale : {x:0,y:1.0} }) - .transition({ type: TransitionType.Delete, scale: { x: 1.0, y: 0.0 } }) + if (this.flag) { + // Apply different transition effects to the appearance and disappearance of the image. + Image($r('app.media.testImg')).width(300).height(300) + .transition({ type: TransitionType.Insert, scale: { x: 0, y: 1.0 } }) + .transition({ type: TransitionType.Delete, rotate: { angle: 180 } }) } - }.height(400).width("100%").padding({top:100}) + }.width('100%') } } ``` -![en-us_image_0000001211898498](figures/en-us_image_0000001211898498.gif) +![animateTo](figures/animateTo.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-types.md b/en/application-dev/reference/arkui-ts/ts-types.md index 196d6b84412d27dca7f23cf37ebdd943649938d9..c2f9bc37bead729dffa06631cd3ef49e99d378f2 100644 --- a/en/application-dev/reference/arkui-ts/ts-types.md +++ b/en/application-dev/reference/arkui-ts/ts-types.md @@ -18,6 +18,10 @@ You can use `$r` or `$rawfile` to create a **Resource** object, but its attribut **filename**: name of the file in the **resources/rawfile** directory of the project. + > **NOTE** + > + > When referencing resources of the **Resource** type, make sure the data type is the same as that of the attribute method. For example, if an attribute method supports the **string | Resource** types, the data type of the **Resource** type must be string. + ## Length The **Length** type is used to represent a size unit. @@ -212,4 +216,4 @@ The **CustomBuilder** type is used to define custom UI descriptions in component | Name | Type | Description | | ------------- | ---------------------- | ---------------------------------------- | -| CustomBuilder | () => any | Must be decorated by **@Builder**. For details, see [@Builder](../../quick-start/arkts-dynamic-ui-elememt-building.md#builder).| +| CustomBuilder | () => any | Must be decorated by **@Builder**. For details, see [@Builder](../../quick-start/arkts-dynamic-ui-elememt-building.md#builder).| diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md index 42db05f5d8371e51917395760431e7b10015c057..0967cc433286589d8dcc7cdab305d1e5290b2193 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md @@ -85,7 +85,7 @@ struct Index { build() { Row() { Column() { - Text('This is gradient color.').textAlign(TextAlign.Center) + Text('This is gradient color.').textAlign(TextAlign.Center).width(68) .borderImage({ source: { angle: 90, diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md index 87e47dd06c71cb138311fa221e658d3451d9b2ef..fe7c40c76994b0088a21b6fb65867432a5fb7deb 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md @@ -17,7 +17,7 @@ The size attributes set the width, height, and margin of a component. | size | {
width?: [Length](ts-types.md#length),
height?: [Length](ts-types.md#length)
} | Size of the component. | | padding | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | Padding of the component.
When the parameter is of the **Length** type, the four paddings take effect.
Default value: **0**
When **padding** is set to a percentage, the width of the parent container is used as the basic value.| | margin | [Margin](ts-types.md#margin) \| [Length](ts-types.md#length) | Margin of the component.
When the parameter is of the **Length** type, the four margins take effect.
Default value: **0**
When **margin** is set to a percentage, the width of the parent container is used as the basic value.| -| constraintSize | {
minWidth?: [Length](ts-types.md#length),
maxWidth?: [Length](ts-types.md#length),
minHeight?: [Length](ts-types.md#length),
maxHeight?: [Length](ts-types.md#length)
} | Constraint size of the component, which is used to limit the size range during component layout. **constraintSize** takes precedence over **width** and **height**.
Default value:
{
minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity
} | +| constraintSize | {
minWidth?: [Length](ts-types.md#length),
maxWidth?: [Length](ts-types.md#length),
minHeight?: [Length](ts-types.md#length),
maxHeight?: [Length](ts-types.md#length)
} | Constraint size of the component, which is used to limit the size range during component layout. **constraintSize** takes precedence over **width** and **height**. If the value of **minWidth** is greater than that of **maxWidth**, only the value of **minWidth** takes effect. The same rule applies to **minHeight** and **maxHeight**.
Default value:
{
minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity
} | | layoutWeight | number \| string | Weight of the component during layout. When the container size is determined, the container space is allocated along the main axis among the component and sibling components based on the layout weight, and the component size setting is ignored.
**NOTE**
This attribute is valid only for the **\**, **\**, and **\** layouts.|