diff --git a/en/application-dev/reference/arkui-ts/Readme-EN.md b/en/application-dev/reference/arkui-ts/Readme-EN.md index fa391ed8fc8e82744d8f4d5fccf91bbb808db44e..3336ccfb465a74b7a938f16998ee74e3546c6d2d 100644 --- a/en/application-dev/reference/arkui-ts/Readme-EN.md +++ b/en/application-dev/reference/arkui-ts/Readme-EN.md @@ -1,4 +1,4 @@ -# TypeScript-based Declarative Development Paradigm +# eTS-based Declarative Development Paradigm - Universal Component Information - Universal Events @@ -120,12 +120,13 @@ - Canvas Components - [Canvas](ts-components-canvas-canvas.md) - [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) - - [OffscreenCanvasRenderingConxt2D](ts-offscreencanvasrenderingcontext2d.md) - - [Lottie](ts-components-canvas-lottie.md) - - [Path2D](ts-components-canvas-path2d.md) - [CanvasGradient](ts-components-canvas-canvasgradient.md) - [ImageBitmap](ts-components-canvas-imagebitmap.md) - [ImageData](ts-components-canvas-imagedata.md) + - [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md) + - [Path2D](ts-components-canvas-path2d.md) + - [Lottie](ts-components-canvas-lottie.md) + - Animation - [AnimatorProperty](ts-animatorproperty.md) - [Explicit Animation](ts-explicit-animation.md) @@ -136,8 +137,9 @@ - [Motion Path Animation](ts-motion-path-animation.md) - [Matrix Transformation](ts-matrix-transformation.md) - [Interpolation Calculation](ts-interpolation-calculation.md) + - Global UI Methods - - Pop-up Window + - Dialog Box - [Alert Dialog Box](ts-methods-alert-dialog-box.md) - [Action Sheet](ts-methods-action-sheet.md) - [Custom Dialog Box](ts-methods-custom-dialog-box.md) diff --git a/en/application-dev/reference/arkui-ts/figures/NestedScroll.gif b/en/application-dev/reference/arkui-ts/figures/NestedScroll.gif new file mode 100644 index 0000000000000000000000000000000000000000..4d8b706114c0bca1218f13085c7890d46c96ab28 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/NestedScroll.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/defaultFocus.png b/en/application-dev/reference/arkui-ts/figures/defaultFocus.png new file mode 100644 index 0000000000000000000000000000000000000000..7d0187576fd77ab563034561f5b862bf232ac51d Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/defaultFocus.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_000000111864201.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000111864201.gif new file mode 100644 index 0000000000000000000000000000000000000000..24702d37d233b9f10a83e4e36b8c8ff23393014f Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000111864201.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001185033226.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001185033226.png new file mode 100644 index 0000000000000000000000000000000000000000..7a49afcaad7ffb5266b63835f50f42f720665a31 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001185033226.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872492.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872492.png new file mode 100644 index 0000000000000000000000000000000000000000..c564bb26b539f1e48acbdb7f2aeeca8df4e4e798 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872492.png 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_0000001193872526.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872526.png new file mode 100644 index 0000000000000000000000000000000000000000..3e7218eb57566d86457a9fbd4a8ed0f0dd490c3f Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001193872526.png differ 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_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_0000001194032666.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032666.png new file mode 100644 index 0000000000000000000000000000000000000000..2b9bc96da366d53da784c92620a69f602f7bff14 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194032666.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192434.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192434.png new file mode 100644 index 0000000000000000000000000000000000000000..f5cd637e5bf9db13e3334ca00413e3a91412c813 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194192434.png differ 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_0000001194352434.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352434.png new file mode 100644 index 0000000000000000000000000000000000000000..f1b942fee8437b1197ef3e9f40c98187a76f8c44 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352434.png differ 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_0000001194352442.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352442.png new file mode 100644 index 0000000000000000000000000000000000000000..1b1cedac00a77279faa829636bc85028fb5ec711 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001194352442.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744193.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744193.png new file mode 100644 index 0000000000000000000000000000000000000000..5855095851b92058f270d69a46546db43ec974b8 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744193.png differ 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_0000001238712471.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712471.png new file mode 100644 index 0000000000000000000000000000000000000000..81710c1186a0c0448d70a443db66c09a4e46d395 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238712471.png differ 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_0000001238832413.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238832413.png new file mode 100644 index 0000000000000000000000000000000000000000..defc3c9eb037c06b894ee2e30563facb8c8375ab Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238832413.png differ 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_0000001238952387.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952387.png new file mode 100644 index 0000000000000000000000000000000000000000..241fe8546ea2acfdb7baf2c5e66a8af2f0d7b593 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001238952387.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001251092975.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001251092975.png new file mode 100644 index 0000000000000000000000000000000000000000..05e44b9914ea290f512ed0c2cbc3502b584cd0af Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001251092975.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777771.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777771.png new file mode 100644 index 0000000000000000000000000000000000000000..06cbacf1470de12c79c2020aa8c6be95506e58b5 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777771.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777772.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777772.png new file mode 100644 index 0000000000000000000000000000000000000000..9c68b723dd3966886d384028663d4a7d6633c027 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777772.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777773.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777773.png new file mode 100644 index 0000000000000000000000000000000000000000..7dbcbb2d5710b17866b9d5b034437b91a700a3f9 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777773.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777774.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777774.png new file mode 100644 index 0000000000000000000000000000000000000000..60f430b646b45a3e3b16a9bb024e4a14e48bf4d3 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777774.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777775.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777775.png new file mode 100644 index 0000000000000000000000000000000000000000..60f430b646b45a3e3b16a9bb024e4a14e48bf4d3 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777775.png 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 new file mode 100644 index 0000000000000000000000000000000000000000..19e99b9ef490fff79e64e33192c97c1a39c6edf9 Binary files /dev/null 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/en-us_image_000000127777779.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777779.png new file mode 100644 index 0000000000000000000000000000000000000000..4558b332925757d97d70ee57182c260804629346 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777779.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777780.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777780.png new file mode 100644 index 0000000000000000000000000000000000000000..9b35e8e0fc4bb514584813b79e8889cfe65649a7 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777780.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777781.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777781.png new file mode 100644 index 0000000000000000000000000000000000000000..9e0a95f73b1aec44e6bccd6750a1c9f2815178ee Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000127777781.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_1501929990650.jpg b/en/application-dev/reference/arkui-ts/figures/en-us_image_1501929990650.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ca0ec86c6c71b6c6daa60bf3ee43795f33568c64 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_1501929990650.jpg differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_background_blur_style.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_background_blur_style.png new file mode 100644 index 0000000000000000000000000000000000000000..e9a7b0e3baa6d48739c2a3cfbc7b5b46600f9c70 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_background_blur_style.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_visible_area_change.gif b/en/application-dev/reference/arkui-ts/figures/en-us_visible_area_change.gif new file mode 100644 index 0000000000000000000000000000000000000000..3b82bc987ff6d8bbe42f00e73148b35c445fa8c8 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_visible_area_change.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/focus.png b/en/application-dev/reference/arkui-ts/figures/focus.png new file mode 100644 index 0000000000000000000000000000000000000000..217dcfbca0de33adef4ffa0d90fd167192845c3c Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/focus.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/focusOnTouch.png b/en/application-dev/reference/arkui-ts/figures/focusOnTouch.png new file mode 100644 index 0000000000000000000000000000000000000000..afc9d772307fd103ac57f11211f0c188e82f46b2 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/focusOnTouch.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/grid-autofill.png b/en/application-dev/reference/arkui-ts/figures/grid-autofill.png new file mode 100644 index 0000000000000000000000000000000000000000..c45eee033be4548744fd84bbcb5ba29d17868e69 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/grid-autofill.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/gridrow.png b/en/application-dev/reference/arkui-ts/figures/gridrow.png new file mode 100644 index 0000000000000000000000000000000000000000..ec3c488eed555b83c695c233db992e69c4af639a Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/gridrow.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/groupDefaultFocus1.png b/en/application-dev/reference/arkui-ts/figures/groupDefaultFocus1.png new file mode 100644 index 0000000000000000000000000000000000000000..12eeaab8f9f0f2b4aa9cb619b0fd07776dc18bd9 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/groupDefaultFocus1.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/groupDefaultFocus2.png b/en/application-dev/reference/arkui-ts/figures/groupDefaultFocus2.png new file mode 100644 index 0000000000000000000000000000000000000000..f1cc053a757c9020a0f53fcb3a5076eed7df5c8a Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/groupDefaultFocus2.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/groupDefaultFocus3.png b/en/application-dev/reference/arkui-ts/figures/groupDefaultFocus3.png new file mode 100644 index 0000000000000000000000000000000000000000..115c022b24345fe60008367665feae57ec9fc18f Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/groupDefaultFocus3.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/image-effect.png b/en/application-dev/reference/arkui-ts/figures/image-effect.png new file mode 100644 index 0000000000000000000000000000000000000000..fc2c9b7d49f7d698aac11d2ede6b0cc58222c7ca Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/image-effect.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/loadingProgress.png b/en/application-dev/reference/arkui-ts/figures/loadingProgress.png deleted file mode 100644 index afc52b1a469c858e3029282e193b684114803db0..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/loadingProgress.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/patternlock.gif b/en/application-dev/reference/arkui-ts/figures/patternlock.gif new file mode 100644 index 0000000000000000000000000000000000000000..5fb034ddcf247a1fecaaeb33e27d103bd8225a91 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/patternlock.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/relativecontainer.png b/en/application-dev/reference/arkui-ts/figures/relativecontainer.png new file mode 100644 index 0000000000000000000000000000000000000000..ebe9c3c7f6ba5ba6756b61f757894cc3f69014bf Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/relativecontainer.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/requestFocus1.png b/en/application-dev/reference/arkui-ts/figures/requestFocus1.png new file mode 100644 index 0000000000000000000000000000000000000000..0a0d6cedda78aa62c8d8305686cb651940d9ad52 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/requestFocus1.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/requestFocus2.png b/en/application-dev/reference/arkui-ts/figures/requestFocus2.png new file mode 100644 index 0000000000000000000000000000000000000000..240db2460748f04d64fa7198b749ee95a8a16a48 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/requestFocus2.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/requestFocus3.png b/en/application-dev/reference/arkui-ts/figures/requestFocus3.png new file mode 100644 index 0000000000000000000000000000000000000000..7aa241956ef0e9c2edfdbb683f8e3d1306ac7349 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/requestFocus3.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md index a5e319adf7338b080bffc01d944805768a5b4f5a..0c147f8a790adf574ba2fa56ee3ede6521727031 100644 --- a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md +++ b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md @@ -1,20 +1,27 @@ # Property Animator -You can create a property animator to animate the universal attributes of a component. +You can create a property animator to animate certain universal attributes of a component, including **width**, **height**, **backgroundColor**, **opacity**, **scale**, **rotate**, and **translate**. > **NOTE** > > The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +animation(value: {duration?: number, tempo?: number, curve?: string | Curve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void}) +Applies a property animator to the component to animate its attributes over time. -| Name | Type | Default Value | Description | -| ---------- | ---------------------------------------- | --------------- | ----------------------- | -| duration | number | 1000 | Animation duration, in ms. The default duration is 1000 ms. | -| curve | [Curve](ts-appendix-enums.md#curve) | Curve.Linear | Animation curve. The default curve is linear. | -| delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed. | -| iterations | number | 1 | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. | -| playMode | [PlayMode](ts-appendix-enums.md#playmode) | PlayMode.Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.| +**Parameters** + + +| Name | Type | Mandatory | Description | +| ---------- | ------------------------------------------| ---- | ------------------------------------------------------------ | +| duration | number | No | Animation duration, in ms.
Default value: **1000**| +| tempo | number | No | Animation playback speed. A greater value indicates a higher animation playback speed.
The value **0** indicates that no animation is applied.
Default value: **1**| +| curve | string \| [Curve](ts-appendix-enums.md#curve) | No | Animation curve.
Default value: **Curve.Linear** | +| delay | number | No | Delay of animation playback, in ms. The value **0** indicates that the playback is not delayed.
Default value: **0** | +| iterations | number | No | Number of times that the animation is played. The value **-1** indicates that the animation is played for an unlimited number of times.
Default value: **1**| +| playMode | [PlayMode](ts-appendix-enums.md#playmode) | No | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
Default value: **PlayMode.Normal**| +| onFinish | () => void | No | Callback invoked when the animation playback is complete. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-appendix-enums.md b/en/application-dev/reference/arkui-ts/ts-appendix-enums.md index 178b4f1763fa27e1bbf0f75d46c3c5029cbfcbe6..72ca6bde7e8b739fd58c057a36c095276bf1542e 100644 --- a/en/application-dev/reference/arkui-ts/ts-appendix-enums.md +++ b/en/application-dev/reference/arkui-ts/ts-appendix-enums.md @@ -54,14 +54,14 @@ ## MouseButton -| Name | Description | -| ------- | ---------------- | -| Left | Left button on the mouse. | -| Right | Right button on the mouse. | -| Middle | Middle button on the mouse. | -| Back | Back button on the left of the mouse.| -| Forward | Forward button on the left of the mouse.| -| None | No button. | +| Name | Description | +| ------- | ---------------------------------------- | +| Left | Left button on the mouse. | +| Right | Right button on the mouse. | +| Middle | Middle button on the mouse. | +| Back | Back button on the left of the mouse. | +| Forward | Forward button on the left of the mouse. | +| None | No button. | ## MouseAction 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 20057bc1c5350b88435782baf7c86c7d576ef652..618dd77ec6f2e7935aa90e4bd2edf17fd9b6eb29 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 @@ -1,54 +1,66 @@ # CheckboxGroup -> **NOTE**
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. - The **\** component is used to select or deselect all check boxes in a group. -## Required Permissions - -None +> **NOTE** +> +> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components -None +Not supported ## APIs -CheckboxGroup( group?: string ) +CheckboxGroup(options?: { group?: string }) Creates a check box group so that you can select or deselect all check boxes in the group at the same time. Check boxes and the check box group that share the group name belong to the same group. -- Parameters - | Name| Type| Mandatory| Default Value| Description| - | -------- | -------- | -------- | -------- | -------- | - | group | string | No| - | Group name.| +**Parameters** +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| group | string | No| Group name.| ## Attributes -| Name| Type| Default Value| Description| + +| Name| Type| Default Value | Description| | -------- | -------- | -------- | -------- | -| selectAll | bool | false | Whether to select all.| -| selectedColor | Color | - | Color of the selected check box.| +| selectAll | boolean | false | Whether to select all. | +| selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | - | Color of the selected check box.| ## Events -| Name| Description| -| -------- | -------- | -| onChange (callback: (names: Array<string>, status: SelectStatus) => void ) |Triggered when the selection status of the check box group or any check box wherein changes.
- **names**: names of all selected check boxes in the group.
- **status**: selection status.| +## onChange + +onChange (callback: (event: CheckboxGroupResult ) => void ) -- SelectStatus enums - | Name | Description| - | ----- | -------------------- | - | All | All check boxes in the group are selected.| - | Part | Some check boxes in the group are selected.| - | None | None of the check boxes in the group are selected.| +Triggered when the selection status of the check box group or any check box wherein changes. + +| Name | Type | Mandatory | Description | +| ----- | ------------------- | --------- | ----------------------------------- | +| event | CheckboxGroupResult | Yes | Callback used to return the result. | + +## CheckboxGroupResult +| Name | Type | Description | +| ------ | ------ | ------- | +| name | Array<string> | Names of all the selected check boxes in the group.| +| status | SelectStatus | Selected status.| + +## SelectStatus + +| Name | Description| +| ----- | -------------------- | +| All | All check boxes in the group are selected.| +| Part | Some check boxes in the group are selected.| +| None | None of the check boxes in the group are selected.| ## Example -``` +```ts +// xxx.ets @Entry @Component struct CheckboxExample { diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md b/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md index a3f94c3873ee27c1df3dabe2b15d769227672003..291b5d3273c6f71649c679b962232780b7b0b68e 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md @@ -1,50 +1,54 @@ # Gauge +The **\** component is used to display data in a ring chart. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. - -Data gauge chart widget, which is used to display data in a ring chart. - - -## Required Permissions - -None +> **NOTE** +> +> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components -None +Not supported ## APIs -Gauge(value:{value: number, min?: number, max?: number}) +Gauge(options:{value: number, min?: number, max?: number}) -- Parameter - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | value | number | Yes | - | Current data value. | - | min | number | No | 0 | Minimum value of the current data segment. | - | max | number | No | 100 | Maximum value of the current data segment. | +**Parameters** +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| value | number | Yes| Current data value.| +| min | number | No| Minimum value of the current data segment.
Default value: **0**| +| max | number | No| Maximum value of the current data segment.
Default value: **100**| ## Attributes -| Name | Type | Default Value | Description | -| -------- | -------- | -------- | -------- | -| value | number | 0 | Sets the value of the current data chart. | -| startAngle | Angle | -150 | Set the start angle. Clock 0 indicates 0 degree, and the clockwise direction indicates the positive angle. | -| endAngle | Angle | 150 | Sets the end angle position. The clock 0 point is 0 degree, and the clockwise direction is the positive angle. | -| colors | Color \| Array<ColorStop> | - | Set the color of the chart. You can set the pure color or segmental gradient color. | -| strokeWidth | Length | - | Sets the ring thickness of a ring chart. | +| Name| Type| Description| +| -------- | -------- | -------- | +| value | number | Value of the chart.
Default value: **0**| +| startAngle | number | Start angle of the chart. The value 0 indicates 0 degrees, and a positive value indicates the clockwise direction.
Default value: **-150**| +| endAngle | number | End angle of the chart. The value 0 indicates 0 degrees, and a positive value indicates the clockwise direction.
Default value: **150**| +| colors | Array<ColorStop> | Colors of the chart. Colors can be set for individual segments.| +| strokeWidth | [Length](ts-types.md#length) | Stroke width of the chart.| + +## ColorStop + +Describes a gradient stop. + +| Name | Type | Description | +| --------- | -------------------- | ------------------------------------------------------------ | +| ColorStop | [[ResourceColor](ts-types.md#resourcecolor8), number] | Type of the gradient stop. The first parameter specifies the color, and the second parameter specifies the offset, which ranges from 0 to 1.| ## Example -``` +```ts +// xxx.ets @Entry @Component struct GaugeExample { 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 ad9af15417c6964f9de052985b1f54e88b6f8400..b88b175789c9aa37e06ff27c24072a68ecb4badf 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 @@ -1,26 +1,14 @@ # Image -The **\** component is used to render and display local and online images. +The **\** component is used to render and display images. -> **NOTE** +> **NOTE** > -> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Required Permissions -To use online images, you need to add the **ohos.permission.INTERNET** permission to the corresponding abilities in the **config.json** (for the FA model) or **module.json5** file (for the stage model). - -``` -"abilities": [ - { - ... - "permissions": ["ohos.permission.INTERNET"], - ... - } -] -``` - +To use online images, the application must have the **ohos.permission.INTERNET** permission. For details about how to apply for a permission, see [Declaring Permissions](../../security/accesstoken-guidelines.md). ## Child Components @@ -31,37 +19,38 @@ Not supported Image(src: string | PixelMap | Resource) -Obtains an image from the specified source for subsequent rendering and display. - **Parameters** -| Name | Type | Mandatory | Default Value | 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 resources 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.
\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability.| +| Name| Type | Mandatory| Default Value| 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 resources 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.
\- The value can also be a path starting with `dataability://`, which is 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. Using such strings requires read permission on the files in the installation directory. | ## Attributes - -| Name | Type | Default Value | Description | -| --------------------- | ------------------------------------------------------- | ------------------------ | ------------------------------------------------------------ | -| alt | string \| [Resource](ts-types.md#resource) | - | Placeholder image displayed during loading. Both local and Internet URIs are supported. | -| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Cover | Image scale type. | -| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | NoRepeat | Whether the image is repeated.
**NOTE**
This attribute is not applicable to SVG images. | -| interpolation | ImageInterpolation | None | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.
**NOTE**
> This attribute is not applicable to SVG images.
> This attribute is not applicable to **PixelMap** objects. | -| renderMode | ImageRenderMode | Original | Rendering mode of the image.
**NOTE**
This attribute is not applicable to SVG images. | -| sourceSize | {
width: number,
height: number
} | - | Decoding size of the image. The original image is decoded into an image of the specified size, in px.
**NOTE**
This attribute is not applicable to **PixelMap** objects. | -| matchTextDirection | boolean | false | Whether to display the image in the system language direction. When this parameter is set to true, the image is horizontally flipped in the right-to-left (RTL) language context.| -| fitOriginalSize | boolean | true | Whether to fit the component to the original size of the image source when the component size is not set.| -| fillColor | [ResourceColor](ts-types.md#resourcecolor8) | - | Fill color. This parameter is valid only for SVG images. Once set, the fill color will replace that of the SVG image.| -| autoResize | boolean | true | Whether to resize the image source used for drawing based on the size of the display area during image decoding. This resizing can help reduce the memory usage.| -| syncLoad8+ | boolean | false | Whether to load images synchronously. By default, images are loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed. | +| Name | Type | Default Value | Description | +| --------------------- | ---------------------------------------- | -------- | ---------------------------------------- | +| alt | string \| [Resource](ts-types.md#resource) | - | Placeholder image displayed during loading. Only local images are supported. | +| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Cover | Image scale mode. | +| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | NoRepeat | Whether the image is repeated.
> **NOTE**
> This attribute is not applicable to SVG images.| +| interpolation | ImageInterpolation | None | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.
> **NOTE**
> This attribute is not applicable to SVG images or **PixelMap** objects. | +| renderMode | ImageRenderMode | Original | Rendering mode of the image.
> **NOTE**
> This attribute is not applicable to SVG images.| +| sourceSize | {
width: number,
height: number
} | - | Decoding size of the image. The original image is decoded into an image of the specified size. If the value is of the number type, the unit px is used.
> **NOTE**
> This attribute is not applicable to **PixelMap** objects.| +| matchTextDirection | boolean | false | Whether to display the image in the system language direction. When this parameter is set to true, the image is horizontally flipped in the right-to-left (RTL) language context. | +| fitOriginalSize | boolean | true | Whether to fit the component to the original size of the image source when the component size is not set. | +| fillColor | [ResourceColor](ts-types.md#resourcecolor8) | - | Fill color of the image. This attribute only applies to an SVG image. Once set, the fill color will replace that of the SVG image. | +| autoResize | boolean | true | Whether to resize the image source used for drawing based on the size of the display area during image decoding. This resizing can help reduce the memory usage.| +| syncLoad8+ | boolean | false | Whether to load the image synchronously. By default, the image is loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed. | + +> **NOTE** +> +> For SVG images, only the following tags are included in the supported list: **svg**, **rect**, **circle**, **ellipse**, **path**, **line**, **polyline**, **polygon**, **animate**, **animateMotion**, and **animateTransform**. ## ImageInterpolation -| Name | Description | -| ------ | ------------------------- | -| None | Interpolation image data is not used. | -| High | The interpolation image data is used at the high level, which may affect the image rendering speed.| +| Name | Description | +| ------ | ------------------------ | +| None | Interpolation image data is not used. | +| High | The interpolation image data is used at the high level. The use of the interpolation image data may affect the image rendering speed.| | Medium | The interpolation image data is used at the medium level. | | Low | The interpolation image data is used at the low level. | @@ -74,12 +63,11 @@ Obtains an image from the specified source for subsequent rendering and display. ## Events - -| Name | Description | -| ------------------------------------------------------------ | ------------------------------------------------------------ | -| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,
componentHeight: number, loadingStatus: number }) => void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.
- **width**: width of the image, in pixels.
- **height**: height of the image, in pixels.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
- **loadingStatus**: image loading status. | -| onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void) | Triggered when an exception occurs during image loading.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels. | -| onFinish(event: () => void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered. | +| Name | Description | +| ---------------------------------------- | ---------------------------------------- | +| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,
componentHeight: number, loadingStatus: number }) => void) | Triggered when an image is successfully loaded. The loaded image is returned. | +| onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void) | Triggered when an exception occurs during image loading. | +| onFinish(event: () => void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered.| ## Example @@ -281,3 +269,53 @@ struct ImageExample3 { ``` ![en-us_image_0000001256858397](figures/en-us_image_0000001256858397.gif) + +### Rendering Sandbox Images + +``` +import fileio from '@ohos.fileio'; +import image from '@ohos.multimedia.image'; + +const EMPTY_PATH = 'file://'; + +@Entry +@Component +struct LoadImageExample { + @State fileContent: string = ''; + @State path: string = EMPTY_PATH; + @State accountInfoHeadPic: any = ''; + + build() { + Column() { + Button ('Read Sandbox Image') + .margin({ bottom: 10 }) + .onClick(() => { + try { + this.path = EMPTY_PATH; + let context = getContext(this); + let path = context.getApplicationContext().filesDir + '/icon.png'; + console.log(`Read the sandbox image=========>${path}`); + let fd = fileio.openSync(path, 0o100, 0o666); + console.log(`create file========>${fd}`); + let srcPath = context.bundleCodeDir + '/entry/resource/base/media/icon.png'; + fileio.copyFileSync(srcPath, path); + console.log(`error:=============>${e.message}`); + } + }) + Button ('Read Image') + .margin({ bottom: 10 }) + .onClick(() => { + this.path = EMPTY_PATH; + this.path += getContext(this.bundleCodeDir + '/entry/resource/base/media/icon.png'); + }) + Text(`Image path: ${this.path}`) + .fontSize(20) + .margin({ bottom: 10 }) + Image(this.path) + .width(100) + .height(100) + } + .width('100%').height('100%') + } +} +``` diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md b/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md index 6c80d5cd13ecebefa967428034e6e68bbe00fe2d..424dfa4ce2af05f60aafa7ba28d13a4f8de3b9cb 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md @@ -1,18 +1,15 @@ # ImageAnimator - The **\** component enables images to be played frame by frame. The list of images to be played can be configured, and the duration of each image can be configured. > **NOTE** > > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - ## Required Permissions None - ## Child Components Not supported @@ -25,17 +22,16 @@ ImageAnimator() ## Attributes -| Name| Type| Default Value| Mandatory| Description| -| -------- | -------- | -------- | -------- | -------- | -| images | Array<{
src: string,
width?: number \| string,
height?: number \| string,
top?: number \| string,
left?: number \| string,
duration?: number
}> | [] | Yes| Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. The detailed description is as follows:
**src**: image path. The image format can be SVG, PNG, or JPG.
**width**: image width.
**height**: image height.
**top**: vertical coordinate of the image relative to the upper left corner of the component.
**left**: horizontal coordinate of the image relative to the upper left corner of the component.
**duration**: playback duration of the image, in ms. | -| state | [AnimationStatus](ts-appendix-enums.md#animationstatus) | Initial | No| Playback status of the animation. The default status is **Initial**.| -| duration | number | 1000 | No| Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in **images**, the setting of this attribute is invalid.| -| reverse | boolean | false | No| Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one.| -| fixedSize | boolean | true | No| Whether the image size is the same as the component size.
**true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.
**false**: The width, height, top, and left attributes of each image must be set separately.| -| preDecode | number | 0 | No| Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. The value **2** indicates that two images following the currently playing frame will be cached in advance to improve performance.| -| fillMode | [FillMode](ts-appendix-enums.md#fillmode) | Forwards | No| Status before and after the animation starts. For details about the options, see **FillMode**.| -| iterations | number | 1 | No| Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.| - +| Name | Type | Default Value | Mandatory | Description | +| ---------- | ----------------------- | -------- | -------- | -------- | +| images | Array<{
src: string,
width?: number \| string,
height?: number \| string,
top?: number \| string,
left?: number \| string,
duration?: number
}> | [] | No | Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. The detailed description is as follows:
**src**: image path. The image format can be SVG, PNG, or JPG.
**width**: image width.
**height**: image height.
**top**: vertical coordinate of the image relative to the upper left corner of the component.
**left**: horizontal coordinate of the image relative to the upper left corner of the component.
**duration**: playback duration of the image, in ms. | +| state | [AnimationStatus](ts-appendix-enums.md#animationstatus) | Initial | No | Playback status of the animation. | +| duration | number | 1000 | No | Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in **images**, the setting of this attribute is invalid. | +| reverse | boolean | false | No | Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one. | +| fixedSize | boolean | true | No | Whether the image size is the same as the component size.
**true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.
**false**: The width, height, top, and left attributes of each image must be set separately. | +| preDecode | number | 0 | No | Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. The value **2** indicates that two images following the currently playing frame will be cached in advance to improve performance. | +| fillMode | [FillMode](ts-appendix-enums.md#fillmode) | Forwards | No | Status before and after the animation starts. For details about the options, see **FillMode**. | +| iterations | number | 1 | No | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. | ## Events diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md index 9f7c56e96f21ed242fe4764cd8bebab46e80005a..a92a770f5d252e130adfa13ad44ac9f2a4f68434 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md @@ -1,33 +1,32 @@ # LoadingProgress -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. - -The **\** component is used to display the loading progress. +The **\** component is used to create a loading animation. -## Required Permissions +> **NOTE** +> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. -None ## Child Components -None +Not supported + ## APIs LoadingProgress() -Creates a **LoadingProgress** instance. +Creates a **\** component. ## Attributes -| Name | Type | Default Value | Description | -| ----- | ----- | ------------- | ---------------------------------------- | -| color | Color | - | Foreground color of the loading progress bar. | +| Name| Type| Description| +| -------- | -------- | -------- | +| color | [ResourceColor](ts-types.md#resourcecolor8) | Foreground color of the **\** component.| ## Example -``` +```ts +// xxx.ets @Entry @Component struct LoadingProgressExample { @@ -41,4 +40,4 @@ struct LoadingProgressExample { } ``` -![zh-cn_image_0000001198839004](figures/loadingProgress.png) \ No newline at end of file +![en-us_image_000000111864201](figures/en-us_image_000000111864201.gif) 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 dc89934a2760b1c67f84ca216530d0c3a58752e9..3f50f29acd0356a7001470670cfd8666241e349e 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 @@ -1,14 +1,13 @@ # Marquee +The **\** component is used to display a scrolling piece of text. The text is scrolled only when its width exceeds the width of the **\** component. + > **NOTE** > > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. -The **\** component is used to display a scrolling piece of text. The text is scrolled only when its width exceeds the width of the **\** component. - - ## Required Permissions None @@ -23,23 +22,28 @@ Not supported Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string }) -- Parameters - | Name| Type| Mandatory| Default Value| Description| - | -------- | -------- | -------- | -------- | -------- | - | start | boolean | Yes| - | Whether to start scrolling.| - | step | number | No| 6 | Scrolling step.| - | loop | number | No| -1 | Number of times the marquee will scroll. If the value is less than or equal to **0**, the marquee will scroll continuously.| - | fromStart | boolean | No| true | Whether the text scrolls from the start.| - | src | string | Yes| - | Text to scroll.| +**Parameters** +| Name| Type| Mandatory| Default Value| Description| +| -------- | -------- | -------- | -------- | -------- | +| start | boolean | Yes| - | Whether to start scrolling.| +| step | number | No| 6 | Scrolling step.| +| loop | number | No| -1 | Number of times the marquee will scroll. If the value is less than or equal to **0**, the marquee will scroll continuously.| +| fromStart | boolean | No| true | Whether the text scrolls from the start.| +| src | string | Yes| - | Text to scroll.| + +## Attributes +| Name | Type| Default Value | Description | +| ---------- | -------- | ------------------------------------ | ------------------------------------ | +| allowScale | boolean | false | Whether to allow text to scale. | ## Events | Name| Description| | -------- | -------- | -| onStart(callback: () => void) | Triggered when the marquee starts scrolling.| -| onBounce(callback: () => void) | Triggered when the marquee has reached the end.| -| onFinish(callback: () => void) | Triggered when the marquee has finished scrolling.| +| onStart(event: () => void) | Triggered when the marquee starts scrolling.| +| onBounce(event: () => void) | Triggered when the marquee has reached the end.| +| onFinish(event: () => void) | Triggered when the marquee has finished scrolling.| ## Example @@ -84,7 +88,7 @@ struct MarqueeExample { Button('start') .onClick(() => { this.start = true - }) + }) .width(200) .height(60) .margin({bottom:20}) 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 b4d89bd97a63514d77f168827d73e1f800de6c1d..e3df10507ce4a8077942bfc43d12ea59611da8ad 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 @@ -1,18 +1,12 @@ # Navigation +The **\** component typically functions as the root container of a page and displays the page title, toolbar, and menu based on the attribute settings. -> **NOTE**
+> **NOTE** +> > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. -The **<Navigation>** component typically functions as the root container of a page and displays the page title, toolbar, and menu based on the attribute settings. - - -## Required Permissions - -None - - ## Child Components Supported @@ -24,56 +18,58 @@ Navigation() Creates a component that can automatically display the navigation bar, title, and toolbar based on the attribute settings. - ## Attributes -| Name | Type | Default Value | Description | -| -------- | -------- | -------- | -------- | -| title | string \| [CustomBuilder](../../ui/ts-types.md) | - | Page title. | -| subtitle | string | - | Subtitle of the page. | -| menus | Array<NavigationMenuItem> \| [CustomBuilder](../../ui/ts-types.md) | - | Menu in the upper right corner of the page. | -| titleMode | NavigationTitleMode | NavigationTitleMode.Free | Display mode of the page title bar. | -| toolBar | {
items:[
Object
] }
\| [CustomBuilder](../../ui/ts-types.md) | - | Content of the toolbar.
**items**: all items on the toolbar. | -| hideToolBar | boolean | false | Whether to hide the toolbar.
**true**: Hide the toolbar.
**false**: Show the toolbar. | -| hideTitleBar | boolean | false | Whether to hide the title bar. | -| hideBackButton | boolean | false | Whether to hide the back button. | - -- NavigationMenuItem attributes - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | value | string | Yes | - | Text of an option on the menu bar. | - | icon | string | No | - | Icon path of an option on the menu bar. | - | action | () => void | No | - | Callback invoked when an option is selected. | - -- Object attributes - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | value | string | Yes | - | Text of an option on the toolbar. | - | icon | string | No | - | Icon path of an option on the toolbar. | - | action | () => void | No | - | Callback invoked when an option is selected. | - -- NavigationTitleMode enums - | Name | Description | - | -------- | -------- | - | Free | When the content is a scrollable component, the title shrinks as the content scrolls up (the subtitle fades out with its size remaining unchanged) and restores as the content scrolls down. | - | Mini | The mode is fixed at mini mode (icon + main title and subtitle). | - | Full | The mode is fixed at full mode (main title and subtitle). | - - > **NOTE** - > Currently, only the scrollable component **<List>** is supported. +| Name | Type | Description | +| -------------- | ---------------------------------------- | ---------------------------------------- | +| title | string \| [CustomBuilder](ts-types.md#custombuilder8)8+ | Page title. | +| subtitle | string | Subtitle of the page. | +| menus | Array8+ | Menu in the upper right corner of the page. | +| titleMode | NavigationTitleMode | Display mode of the page title bar.
Default value: **NavigationTitleMode.Free**| +| toolBar | object \| [CustomBuilder](ts-types.md#custombuilder8)8+ | Content of the toolbar.
**items**: all items on the toolbar. | +| hideToolBar | boolean | Whether to hide the toolbar.
Default value: **false**
**true**: Hide the toolbar.
**false**: Show the toolbar.| +| hideTitleBar | boolean | Whether to hide the title bar.
Default value: **false** | +| hideBackButton | boolean | Whether to hide the back button.
Default value: **false** | + +## NavigationMenuItem + +| Name | Type | Mandatory| Description | +| ------ | ----------------------- | ---- | ------------------------------ | +| value | string | Yes | Text of a menu item. | +| icon | string | No | Icon path of a menu item.| +| action | () => void | No | Callback invoked when a menu item is selected. | + +## object + +| Name | Type | Mandatory| Description | +| ------ | ----------------------- | ---- | ------------------------------ | +| value | string | Yes | Text of an option on the toolbar. | +| icon | string | No | Icon path of an option on the toolbar.| +| action | () => void | No | Callback invoked when an option is selected. | + +## NavigationTitleMode + +| Name | Description | +| ---- | ---------------------------------------- | +| Free | When the content is a scrollable component, the main title shrinks as the content scrolls down (the subtitle fades out with its size remaining unchanged) and restores when the content scrolls up to the top.| +| Mini | The icon, main title, and subtitle are in mini mode. | +| Full | The main title and subtitle are in full mode. | + +> **NOTE** +> +> Currently, the scrollable component can only be **\**. ## 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. | +| Name | Description | +| ---------------------------------------- | ---------------------------------------- | +| onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls.| ## Example - -``` +```ts // Example 01 @Entry @Component @@ -161,8 +157,7 @@ struct NavigationExample { ![en-us_image_0000001256978359](figures/en-us_image_0000001256978359.gif) - -``` +```ts // Example 02 @Entry @Component diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md index 9310f9df68a9a7a7157bf0ebe736c2e458b65efb..662ffc7437edc402aea5cfb476c77aeb512cbb92 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md @@ -1,17 +1,10 @@ # Progress +The **\** component is used to provide a progress indicator that displays the progress of content loading or an operation. -> **NOTE** +> **NOTE** > -> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - -The **\** component is used to provide a progress bar that displays the progress of content loading or an operation. - - -## Required Permissions - -None +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components @@ -21,40 +14,50 @@ Not supported ## APIs -Progress(value: {value: number, total?: number, type?: ProgressType}) +Progress(options: {value: number, total?: number, style?: ProgressStyle, type?: ProgressType}) -Creates a progress bar. +Creates a progress indicator. -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | value | number | Yes | - | Current progress. | - | total | number | No | 100 | Total progress. | - | type | ProgressType | No | ProgressType.Linear | Type of the progress bar. | - - -- ProgressType enums - | Name | Description | - | -------- | -------- | - | Linear | Linear type. | - | Ring8+ | Ring type without scale. The ring fills up as the progress increases. | - | Eclipse | Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to full. | - | ScaleRing8+ | Ring type with scale, which is similar to the clock scale style. | - | Capsule8+ | Capsule type. At both ends, the progress bar changes from an arc to a straight line and from a straight line to an arc. In the middle part of the capsule, the progress bar moves to the right. | +**Parameters** +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| value | number | Yes| Current progress.| +| total | number | No| Total progress.
Default value: **100**| +| type8+ | ProgressType | No| Type of the progress indicator.
Default value: **ProgressType.Linear**| +| styledeprecated | ProgressStyle | No| Style the progress indicator.
This parameter is deprecated since API version 8. You are advised to use **type** instead.
Default value: **ProgressStyle.Linear**| + +## ProgressType + +| Name| Description| +| -------- | -------- | +| Linear | Linear type.| +| Ring8+ | Indeterminate ring type. The ring fills up as the progress increases.| +| Eclipse | Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to full.| +| ScaleRing8+ | Determinate ring type, which is similar to the clock scale.| +| Capsule8+ | Capsule type. At both ends, the progress indicator works in a same manner as the eclipse type. In the middle part of the capsule, the progress indicator works in a same manner as the linear type.| + +## ProgressStyle + +| Name | Description | +| --------- | ------------------------------------------------------------ | +| Linear | Linear type. | +| Ring | Indeterminate ring type. The ring fills up as the progress increases. | +| Eclipse | Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to full.| +| ScaleRing | Determinate ring type, which is similar to the clock scale. | +| Capsule | Capsule type. At both ends, the progress indicator works in a same manner as the eclipse type. In the middle part of the capsule, the progress indicator works in a same manner as the linear type.| ## Attributes -| Name | Type | Default Value | Description | -| -------- | -------- | -------- | -------- | -| value | number | - | Current progress. | -| color | Color | - | Background color of the progress bar. | -| style8+ | {
strokeWidth? : Length,
scaleCount? : number,
scaleWidth? : Length
} | - | Component style.
- **strokeWidth**: width of the progress bar.
- **scaleCount**: scale count of the circular progress bar.
- **scaleWidth**: scale width of the circular progress bar.
If the scale thickness is greater than the progress bar width, the default scale thickness is used. | +| Name| Type| Description| +| -------- | -------- | -------- | +| value | number | Current progress.| +| color | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the progress indicator.| +| style8+ | {
strokeWidth?: [Length](ts-types.md#length),
scaleCount?: number,
scaleWidth?: [Length](ts-types.md#length)
} | Component style.
- **strokeWidth**: stroke width of the progress indicator.
- **scaleCount**: number of divisions on the determinate ring-type process indicator.
- **scaleWidth**: scale bar width of the determinate ring-type process indicator. If it is greater than the progress indicator width, the default value is used instead.| ## Example - ```ts // xxx.ets @Entry diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md b/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md index 2b1970cdfde2fd84412f62bab07d4535763a2ccc..30b4d541419de2d1d1efe70511f6e990b3bd2fe0 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md @@ -1,50 +1,45 @@ # Radio -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. - - The **\** component allows users to select from a set of mutually exclusive options. - -## Required Permissions - -None +> **NOTE** +> +> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components -None +Not supported ## APIs Radio(options: {value: string, group: string}) -- Parameters - | Name| Type| Mandatory| Default Value| Description| - | -------- | -------- | -------- | -------- | -------- | - | value | string | Yes| - | Value of the current radio button.| - | group | string | Yes| - | Name of the group to which the radio button belongs. Only one radio button in a given group can be selected at a time.| +**Parameters** +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| value | string | Yes| Value of the current radio button.| +| group | string | Yes| Name of the group to which the radio button belongs. Only one radio button in a given group can be selected at a time.| ## Attributes -| Name| Type| Default Value| Description| -| -------- | -------- | -------- | -------- | -| checked | boolean | false | Whether the radio button is selected.| - +| Name| Type| Description| +| -------- | -------- | -------- | +| checked | boolean | Whether the radio button is selected.
Default value: **false**| ## Events -| Name| Description| +| Name| Description| | -------- | -------- | -| onChange(callback: (value: boolean) => void) | Triggered when the selected state of the radio button changes.
-The value **true** means that the radio button is selected.
-The value **false** means that the radio button is not selected.| +| onChange(callback: (isChecked: boolean) => void) | Triggered when the selected state of the radio button changes.
- If **isChecked** is **true**, the radio button is selected.
- If **isChecked** is **false**, the radio button is not selected.| ## Example -``` +```ts +// xxx.ets @Entry @Component struct RadioExample { @@ -55,8 +50,8 @@ struct RadioExample { Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true) .height(50) .width(50) - .onChange((value: boolean) => { - console.log('Radio1 status is ' + value) + .onChange((isChecked: boolean) => { + console.log('Radio1 status is ' + isChecked) }) } Column() { @@ -64,8 +59,8 @@ struct RadioExample { Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false) .height(50) .width(50) - .onChange((value: boolean) => { - console.log('Radio2 status is ' + value) + .onChange((isChecked: boolean) => { + console.log('Radio2 status is ' + isChecked) }) } Column() { @@ -73,8 +68,8 @@ struct RadioExample { Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false) .height(50) .width(50) - .onChange((value: boolean) => { - console.log('Radio3 status is ' + value) + .onChange((isChecked: boolean) => { + console.log('Radio3 status is ' + isChecked) }) } }.padding({ top: 30 }) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md b/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md index d10e25435cdea46e882f125c7da59d2497dda4e4..592b3127032690451b96dd5211f8fc2a1971cddf 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md @@ -6,10 +6,6 @@ The **\** is used together with scrollable components, such as **\
  • > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. -## Required Permissions - -None - ## Child Components @@ -22,20 +18,20 @@ ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: B **Parameters** -| Name| Type| Mandatory| Default Value| Description| +| Name| Type| Mandatory| Default Value | Description| | -------- | -------- | -------- | -------- | -------- | | scroller | [Scroller](ts-container-scroll.md#scroller) | Yes| - | Scroller, which can be bound to scrollable components.| -| direction | ScrollBarDirection | No| ScrollBarDirection.Vertical | Scrollbar direction in which scrollable components scroll.| -| state | [BarState](ts-appendix-enums.md#barstate) | No| BarState.Auto | Scrollbar state.| +| direction | ScrollBarDirection | No| ScrollBarDirection.Vertical | Scrollbar direction in which scrollable components scroll. | +| state | [BarState](ts-appendix-enums.md#barstate) | No| BarState.Auto | Scrollbar state. | > **NOTE** > -> The **<\ScrollBar>** component defines the behavior style of the scrollable area, and its subnodes define the behavior style of the scrollbar. +> The **\** component defines the behavior style of the scrollable area, and its subnodes define the behavior style of the scrollbar. > - > This component is bound to a scrollable component through **scroller**, and can be used to scroll the scrollable component only when their directions are the same. The **\** component can be bound to only one scrollable component, and vice versa. ## ScrollBarDirection + | Name| Description| | -------- | -------- | | Vertical | Vertical scrollbar.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-search.md b/en/application-dev/reference/arkui-ts/ts-basic-components-search.md index 8330e5fafe2a3a13b11dd764418362b9eb9dfb72..0927b8a3af7b5a72ea02203815c7b8dcb53104a7 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-search.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-search.md @@ -6,10 +6,6 @@ The **\** component provides an input area for users to search. > > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. -## Required Permissions - -None - ## Child Components Not supported @@ -20,32 +16,31 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll **Parameters** -| Name | Type | Mandatory | Description | -| ----------- | ---------------- | ---- | ---------------------------------------- | -| value | string | No | Text input in the search text box. | -| placeholder | string | No | Text displayed when there is no input. | -| icon | string | No | Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png.| -| controller | SearchController | No | Controller. | - +| Name | Type | Mandatory| Description | +| ----------- | ---------------- | ---- | ------------------------------------------------------------ | +| value | string | No | Text input in the search text box. | +| placeholder | string | No | Text displayed when there is no input. | +| icon | string | No | Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png.| +| controller | SearchController | No | Controller. | ## Attributes -| Name | Type | Description | -| ----------------------- | ---------------------------------------- | --------------------- | -| searchButton | string | Text on the search button located next to the search text box. By default, there is no search button.| -| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | Placeholder text color. | -| placeholderFont | [Font](ts-types.md#font) | Placeholder text style. | -| textFont | [Font](ts-types.md#font) | Text font for the search text box. | +| Name | Type | Description | +| ----------------------- | ------------------------------------------------ | ---------------------------------------------- | +| searchButton | string | Text on the search button located next to the search text box. By default, there is no search button. | +| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | Placeholder text color. | +| placeholderFont | [Font](ts-types.md#font) | Placeholder text style. | +| textFont | [Font](ts-types.md#font) | Text font for the search text box. | ## Events -| Name | Description | -| ------------------------------------------- | ------------------------------------------------------------ | -| onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or touch the search button on a soft keyboard.
    - **value**: current text input. | -| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.
    - **value**: current text input. | -| onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.
    - **value**: text copied. | -| onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.
    - **value**: text cut. | -| onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.
    - **value**: text pasted. | +| Name | Description | +| ---------------------------------------- | ---------------------------------------- | +| onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or touch the search button on a soft keyboard.
    -**value**: current text input.| +| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.
    -**value**: current text input. | +| onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.
    -**value**: text copied. | +| onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.
    -**value**: text cut. | +| onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.
    -**value**: text pasted. | ## SearchController @@ -63,11 +58,9 @@ Sets the position of the caret. **Parameters** -| Name | Type | Mandatory | Description | -| ----- | ------ | ---- | ----------------- | -| value | number | Yes | Length from the start of the character string to the position where the caret is located.| - - +| Name| Type| Mandatory| Description | +| ------ | -------- | ---- | ---------------------------------- | +| value | number | Yes | Length from the start of the character string to the position where the caret is located.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-select.md b/en/application-dev/reference/arkui-ts/ts-basic-components-select.md index 415a1bd3d96af1ff879af2b779c3a5481ffe3d85..b89aef6a1d8c9301531f744205d75b635b4eea52 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-select.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-select.md @@ -1,52 +1,51 @@ # Select -> ![](public_sys-resources/icon-note.gif) **NOTE** This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. - The **** component provides a drop-down list box that allows users to select among multiple options. -## Required Permissions - -None +> **NOTE** +> +> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components -None +Not supported ## APIs -Select(options: Array\\) +Select(options: Array\) -- SelectOption parameters +**SelectOption** - | Name| Type| Mandatory| Default Value| Description| - | ------ | ----------------------------------------------- | ---- | ------ | -------------- | - | value | [ResourceStr](../../ui/ts-types.md) | Yes| - | Value of an option in the drop-down list box.| - | icon | [ResourceStr](../../ui/ts-types.md) | No| - | Icon of an option in the drop-down list box.| +| Name| Type | Mandatory| Description | +| ------ | ----------------------------------- | ---- | -------------- | +| value | [ResourceStr](ts-types.md#resourcestr8) | Yes | Value of an option in the drop-down list box.| +| icon | [ResourceStr](ts-types.md#resourcestr8) | No | Icon of an option in the drop-down list box.| ## Attributes -| Name| Type| Default Value| Description| -| ----------------------- | --------------------------------------------------- | ------ | ----------------------------------------------- | -| selected | number | - | Index of the initial selected option in the drop-down list box. The index of the first option is **0**.| -| value | string | - | Text of the drop-down button.| -| font | [Font](../../ui/ts-types.md) | - | Text font of the drop-down button.| -| fontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color of the drop-down button.| -| selectedOptionBgColor | [ResourceColor](../../ui/ts-types.md) | - | Background color of the selected option in the drop-down list box.| -| selectedOptionFont | [Font](../../ui/ts-types.md) | - | Text font of the selected option in the drop-down list box.| -| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color of the selected option in the drop-down list box.| -| optionBgColor | [ResourceColor](../../ui/ts-types.md) | - | Background color of an option in the drop-down list box.| -| optionFont | [Font](../../ui/ts-types.md) | - | Text font of an option in the drop-down list box.| -| optionFontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color of an option in the drop-down list box.| +| Name | Type | Description | +| ----------------------- | ------------------------------------- | --------------------------------------------- | +| selected | number | Index of the initial selected option in the drop-down list box. The index of the first option is **0**.| +| value | string | Text of the drop-down button. | +| font | [Font](ts-types.md#font) | Text font of the drop-down button. | +| fontColor | [ResourceColor](ts-types.md#resourcecolor8) | Text color of the drop-down button. | +| selectedOptionBgColor | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the selected option in the drop-down list box. | +| selectedOptionFont | [Font](ts-types.md#font) | Text font of the selected option in the drop-down list box. | +| selectedOptionFontColor | [ResourceColor](ts-types.md#resourcecolor8) | Text color of the selected option in the drop-down list box. | +| optionBgColor | [ResourceColor](ts-types.md#resourcecolor8) | Background color of an option in the drop-down list box. | +| optionFont | [Font](ts-types.md#font) | Text font of an option in the drop-down list box. | +| optionFontColor | [ResourceColor](ts-types.md#resourcecolor8) | Text color of an option in the drop-down list box. | ## Events -| Name| Description| -| ------------------------------------------------------------ | ------------------------------------------------------------ | -| onSelect(callback: (index: number, value?:string) => void) | Invoked when an option in the drop-down list box is selected. **index** indicates the index of the selected option. **value** indicates the value of the selected option.| +| Name | Description | +| ---------------------------------------------------------- | ------------------------------------------------------------ | +| onSelect(callback: (index: number, value?:string) => void) | Invoked when an option in the drop-down list box is selected.
    **index**: index of the selected option.
    **value**: value of the selected option. | ## Example -``` +```ts +// xxx.ets @Entry @Component struct SelectExample { @@ -61,7 +60,7 @@ struct SelectExample { .font({size: 30, weight:400, family: 'serif', style: FontStyle.Normal }) .selectedOptionFont({size: 40, weight: 500, family: 'serif', style: FontStyle.Normal }) .optionFont({size: 30, weight: 400, family: 'serif', style: FontStyle.Normal }) - .onSelecte((index:number)=>{ + .onSelect((index:number)=>{ console.info("Select:" + index) }) } diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md b/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md index 93131f59b3a1b1f0a723edf9b152d2975b8d9f0d..faa086718761c2bd909cd3b4162747686185bb7c 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md @@ -1,17 +1,10 @@ # Slider +The **\** component is used to quickly adjust settings, such as the volume and brightness. -> **NOTE** +> **NOTE** > -> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - -The *\** component is used to quickly adjust settings, such as the volume and brightness. - - -## Required Permissions - -None +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components @@ -21,59 +14,64 @@ Not supported ## APIs -Slider(value:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis}) +Slider(options?:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean}) + +**Parameters** -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | ---------------------- | --------------------------------------- | --------- | ------------------ | ---------------------------------------- | - | value | number | No | 0 | Current progress. | - | min | number | No | 0 | Minimum value. | - | max | number | No | 100 | Maximum value. | - | step | number | No | 1 | Step of the slider. When the corresponding step is set, the slider slides intermittently. | - | style | SliderStyle | No | SliderStyle.OutSet | Style of the slider. | - | direction8+ | [Axis](ts-appendix-enums.md#axis-enums) | No | Axis.Horizontal | Whether the slider moves horizontally or vertically. | - | reverse8+ | boolean | No | false | Whether the slider values are reversed. | +| Name | Type | Mandatory| Description | +| ---------------------- | --------------------------------- | ---- | ------------------------------------------------------------ | +| value | number | No | Current progress.
    Default value: **0** | +| min | number | No | Minimum value.
    Default value: **0** | +| max | number | No | Maximum value.
    Default value: **100** | +| step | number | No | Step of the slider.
    Default value: **1** | +| style | SliderStyle | No | Style of the slider.
    Default value: **SliderStyle.OutSet** | +| direction8+ | [Axis](ts-appendix-enums.md#axis) | No | Whether the slider moves horizontally or vertically.
    Default value: **Axis.Horizontal**| +| reverse8+ | boolean | No | Whether the slider values are reversed.
    **NOTE**
    The value **false** indicates that the values increase from left to right for a horizontal slider and from top to bottom for a vertical slider. The value **true** indicates that the values increase from right to left for a horizontal slider and from bottom to top for a vertical slider.
    Default value: **false**| -- SliderStyle enums - | Name | Description | - | ------ | --------------------------------- | - | OutSet | The slider is on the slider rail. | - | InSet | The slider is in the slider rail. | +## SliderStyle +| Name | Description | +| ------ | ------- | +| OutSet | The slider is on the slider rail.| +| InSet | The slider is in the slider rail.| ## Attributes Touch target configuration is not supported. -| Name | Type | Default Value | Description | -| ------------- | ------- | ------------- | ---------------------------------------- | -| blockColor | Color | - | Color of the slider. | -| trackColor | Color | - | Background color of the slider. | -| selectedColor | Color | - | Color of the slider rail that has been slid. | -| showSteps | boolean | false | Whether to display the current step. | -| showTips | boolean | false | Whether to display a bubble to indicate the percentage when sliding. | +| Name | Type | Description | +| ------------- | ------- | ----------------- | +| blockColor | [ResourceColor](ts-types.md#resourcecolor8) | Color of the slider. | +| trackColor | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the slider. | +| selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | Color of the slider rail that has been slid. | +| showSteps | boolean | Whether to display the current step.
    Default value: **false**| +| showTips | boolean | Whether to display a bubble to indicate the percentage when sliding.
    Default value: **false**| +| trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.| +| maxLabel | string | Maximum label.| +| minLabel | string | Minimum label.| ## Events -Among all the universal events, only **OnAppear** and **OnDisAppear** are supported. +In addition to the **OnAppear** and **OnDisAppear** universal events, the following events are supported. -| Name | Description | -| ---------------------------------------- | ---------------------------------------- | -| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Callback invoked when the slider slides.
    **value**: current progress.
    **mode**: dragging state. | +| Name | Description | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Invoked when the slider slides.
    **value**: current progress. If the return value contains decimals, you can use **Math.toFixed()** to process the data to the required precision.
    **mode**: dragging state.| -- SliderChangeMode enums - | Name | Value | Description | - | ------ | ----- | ----------------------------------- | - | Begin | 0 | The user starts to drag the slider. | - | Moving | 1 | The user is dragging the slider. | - | End | 2 | The user stops dragging the slider. | +## SliderChangeMode +| Name | Value | Description | +| ------ | ---- | --------- | +| Begin | 0 | The user starts to drag the slider.| +| Moving | 1 | The user is dragging the slider. | +| End | 2 | The user stops dragging the slider.| +| Click | 3 | The user moves the slider by touching the slider rail.| ## Example - -``` +```ts +// xxx.ets @Entry @Component struct SliderExample { diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-span.md b/en/application-dev/reference/arkui-ts/ts-basic-components-span.md index 4303717b6c8c2fa62761c6e3a41ead8a191f0eb5..0c157992c0e310acc7d6366689acde4b356e1389 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-span.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-span.md @@ -1,55 +1,53 @@ # Span +The **\** component is used to display inline text in the **\** component. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - -The **<Span>** component is used to display a paragraph of textual information. It can be used only as a child component in the **<Text>** component. - - -## Required Permissions - -None +> **NOTE** +> +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components -None +Not supported ## APIs -Span(content: string) +Span(value: string | Resource) + +**Parameters** + +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| value | string \| [Resource](ts-types.md#resource) | Yes| Plain text.| -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | content | string | Yes | - | Text content. | ## Attributes -In addition to the text style attributes, the attributes below are supported. +In addition to the [universal text style](ts-universal-attributes-text-style.md) attributes, the following attributes are supported. -| Name | Type | Default Value | Description | -| -------- | -------- | -------- | -------- | -| decoration | {
    type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype-enums),
    color?: Color
    } | {
    type: TextDecorationType.None
    } | Style and color of the text decorative line. | -| textCase | [TextCase](ts-appendix-enums.md#textcase-enums) | Normal | Text case. | +| Name| Type| Description| +| -------- | -------- | -------- | +| decoration | {
    type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
    color?: [ResourceColor](ts-types.md#resourcecolor)
    } | Style and color of the text decorative line.
    Default value: {
    type: TextDecorationType.None
    color: Color.Black
    } | +| letterSpacing | number \| string | Letter spacing. | +| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.
    Default value: **Normal** | ## Events -Among all the universal events, only the click event is supported. +Among all the [universal events](ts-universal-attributes-click.md), only the click event is supported. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> As the **<Span>** component does not have size information, the **target** attribute of the **ClickEvent** object returned by the click event is invalid. +> **NOTE** +> +> As the **\** component does not include size information, the **target** attribute of the **ClickEvent** object returned by the click event is invalid. ## Example - -``` +```ts +// xxx.ets @Entry @Component struct SpanExample { diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-text.md b/en/application-dev/reference/arkui-ts/ts-basic-components-text.md index 3d1fe4f26d33d749f2004b23e7df010ea475556d..c25d3a8f47b686648bc8bb6e229af46562e0587d 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-text.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-text.md @@ -7,11 +7,6 @@ The **\** component is used to display a piece of textual information. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -## Required Permissions - -None - - ## Child Components This component can contain the [\](ts-basic-components-span.md) child component. @@ -22,26 +17,25 @@ This component can contain the [\](ts-basic-components-span.md) child comp Text(content?: string | Resource) **Parameters** + | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| content | string \| [Resource](ts-types.md#resource) | No| Text content. The content and style set for the **\** component do not take effect when it contains the **\** child component.
    Default value: ' ' | - +| content | string \| [Resource](ts-types.md#resource) | No| Text content. The content and style set for the **\** component do not take effect when it contains the **\** child component.
    Default value: **' '**| ## Attributes - | Name| Type| Description| | -------- | -------- | -------- | -| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Text alignment mode of multiple lines of text.
    Default value: **TextAlign.Start** | -| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | Display mode when the text is too long.
    Default value: **{overflow: TextOverflow.Clip}**
    **NOTE**
    Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters. | +| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Text alignment mode of multiple lines of text.
    Default value: **TextAlign.Start**| +| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | Display mode when the text is too long.
    Default value: **{overflow: TextOverflow.Clip}**
    **NOTE**
    Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters.
    This attribute must be used with `maxLines` to take effect. | | maxLines | number | Maximum number of lines in the text.
    Default value: **Infinity** | -| lineHeight | string \| number \| [Resource](ts-types.md#resource) | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used. | -| decoration | {
    type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
    color?: [ResourceColor](ts-types.md#resourcecolor8)
    } | Style and color of the text decorative line.
    Default value: **{
    type: TextDecorationType.None,
    color: Color.Black
    }** | -| baselineOffset | number \| string | Offset of the text baseline. | -| letterSpacing | number \| string | Letter spacing. | -| minFontSize | number \| string \| [Resource](ts-types.md#resource) | Minimum font size. | -| maxFontSize | number \| string \| [Resource](ts-types.md#resource) | Maximum font size. | -| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.
    Default value: **TextCase.Normal** | +| lineHeight | string \| number \| [Resource](ts-types.md#resource) | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.| +| decoration | {
    type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
    color?: [ResourceColor](ts-types.md#resourcecolor8)
    } | Style and color of the text decorative line.
    Default value: {
    type: TextDecorationType.None,
    color: Color.Black
    } | +| baselineOffset | number \| string | Offset of the text baseline. | +| letterSpacing | number \| string | Letter spacing. | +| minFontSize | number \| string \| [Resource](ts-types.md#resource) | Minimum font size. | +| maxFontSize | number \| string \| [Resource](ts-types.md#resource) | Maximum font size. | +| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.
    Default value: **TextCase.Normal**| > **NOTE** > 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 d8d736c178dac82c82ce3021f1131fd827478884..4fb29a66fa03d646552e2461c22defe5d9587ec0 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 @@ -1,15 +1,10 @@ # TextArea -The **\