diff --git a/en/application-dev/application-dev-website.md b/en/application-dev/application-dev-website.md index 98a5ccbecbd7fb018e6f1b553178a6e10977c7cf..c8c25676475574672026f663cbe2befc3927ad23 100644 --- a/en/application-dev/application-dev-website.md +++ b/en/application-dev/application-dev-website.md @@ -51,28 +51,49 @@ - [Defining Page Routes](ui/ui-js-building-ui-routes.md) - Common Component Development Guidelines - Container Components - - [List](ui/ui-js-components-list.md) - - [Dialog](ui/ui-js-components-dialog.md) - - [Form](ui/ui-js-components-form.md) - - [Stepper](ui/ui-js-components-stepper.md) - - [Tabs](ui/ui-js-component-tabs.md) + - [<list> Development](ui/ui-js-components-list.md) + - [<dialog> Development](ui/ui-js-components-dialog.md) + - [<form> Development](ui/ui-js-components-form.md) + - [<stepper> Development](ui/ui-js-components-stepper.md) + - [<tabs> Development](ui/ui-js-component-tabs.md) + - [<swiper> Development](ui/ui-js-components-swiper.md) - Basic Components - - [Text](ui/ui-js-components-text.md) - - [Input](ui/ui-js-components-input.md) - - [Button](ui/ui-js-components-button.md) - - [Picker](ui/ui-js-components-picker.md) - - [Image](ui/ui-js-components-images.md) + - [<text> Development](ui/ui-js-components-text.md) + - [<input> Development](ui/ui-js-components-input.md) + - [<button> Development](ui/ui-js-components-button.md) + - [<picker> Development](ui/ui-js-components-picker.md) + - [<image> Development](ui/ui-js-components-images.md) + - [<image-animator> Development](ui/ui-js-components-image-animator.md) + - [<rating> Development](ui/ui-js-components-rating.md) + - [<slider> Development](ui/ui-js-components-slider.md) + - [<chart> Development](ui/ui-js-components-chart.md) + - [<switch> Development](ui/ui-js-components-switch.md) + - [<toolbar> Development](ui/ui-js-components-toolbar.md) + - [<menu> Development](ui/ui-js-components-menu.md) + - [<marquee> Development](ui/ui-js-components-marquee.md) + - [<qrcode> Development](ui/ui-js-components-qrcode.md) + - [<search> Development](ui/ui-js-components-search.md) + - <canvas> Development + - [CanvasRenderingContext2D](ui/ui-js-components-canvasrenderingcontext2d.md) + - [Path2D](ui/ui-js-components-path2d.md) + - [OffscreenCanvas](ui/ui-js-components-offscreencanvas.md) + - [<grid-container> Development](ui/ui-js-components-calendar.md) + - Svg + - [Basics](ui/ui-js-components-svg-overview.md) + - [Graph Drawing](ui/ui-js-components-svg-graphics.md) + - [Path Drawing](ui/ui-js-components-svg-path.md) + - [Text Drawing](ui/ui-js-components-svg-text.md) - Animation Development Guidelines - - CSS Animation - - [Defining Attribute Style Animations](ui/ui-js-animate-attribute-style.md) - - [Defining Animations with the transform Attribute](ui/ui-js-animate-transform.md) - - [Defining Animations with the background-position Attribute](ui/ui-js-animate-background-position-style.md) - - [Defining Animations for SVG Components](ui/ui-js-animate-svg.md) - - JS Animation - - [Component Animation](ui/ui-js-animate-component.md) - - Interpolator Animation - - [Animation Effect](ui/ui-js-animate-dynamic-effects.md) - - [Animation Frame](ui/ui-js-animate-frame.md) + - CSS Animation + - [Defining Attribute Style Animations](ui/ui-js-animate-attribute-style.md) + - [Defining Animations with the transform Attribute](ui/ui-js-animate-transform.md) + - [Defining Animations with the background-position Attribute](ui/ui-js-animate-background-position-style.md) + - [Defining Animations for SVG Components](ui/ui-js-animate-svg.md) + - JS Animation + - [Component Animation](ui/ui-js-animate-component.md) + - Interpolator Animation + - [Animation Effect](ui/ui-js-animate-dynamic-effects.md) + - [Animation Frame](ui/ui-js-animate-frame.md) - [Custom Components](ui/ui-js-custom-components.md) - TypeScript-based Declarative Development Paradigm - [Overview](ui/ui-ts-overview.md) @@ -128,6 +149,13 @@ - [Custom Component Lifecycle Callbacks](ui/ts-custom-component-lifecycle-callbacks.md) - [Example: Component Creation and Re-Initialization](ui/ts-component-creation-re-initialization.md) - [Syntactic Sugar](ui/ts-syntactic-sugar.md) + - Common Component Development Guidelines + - [Button](ui/ui-ts-basic-components-button.md) + - [Web](ui/ui-ts-components-web.md) + - Common Layout Development Guidelines + - [Flex Layout](ui/ui-ts-layout-flex.md) + - [Grid Layout](ui/ui-ts-layout-grid-container.md) + - [Media Query](ui/ui-ts-layout-mediaquery.md) - Experiencing the Declarative UI - [Creating a Declarative UI Project](ui/ui-ts-creating-project.md) - [Getting to Know Components](ui/ui-ts-components.md) diff --git a/en/application-dev/ui/Readme-EN.md b/en/application-dev/ui/Readme-EN.md index 0de1d49f9a7105a962256cdd8fb9e8a5270fd6a9..4ac9400c5d4fe1000f21573e3348f04d3dc28d67 100644 --- a/en/application-dev/ui/Readme-EN.md +++ b/en/application-dev/ui/Readme-EN.md @@ -33,13 +33,33 @@ - [<form> Development](ui-js-components-form.md) - [<stepper> Development](ui-js-components-stepper.md) - [<tabs> Development](ui-js-component-tabs.md) - + - [<swiper> Development](ui-js-components-swiper.md) - Basic Components - [<text> Development](ui-js-components-text.md) - [<input> Development](ui-js-components-input.md) - [<button> Development](ui-js-components-button.md) - [<picker> Development](ui-js-components-picker.md) - [<image> Development](ui-js-components-images.md) + - [<image-animator> Development](ui-js-components-image-animator.md) + - [<rating> Development](ui-js-components-rating.md) + - [<slider> Development](ui-js-components-slider.md) + - [<chart> Development](ui-js-components-chart.md) + - [<switch> Development](ui-js-components-switch.md) + - [<toolbar> Development](ui-js-components-toolbar.md) + - [<menu> Development](ui-js-components-menu.md) + - [<marquee> Development](ui-js-components-marquee.md) + - [<qrcode> Development](ui-js-components-qrcode.md) + - [<search> Development](ui-js-components-search.md) + - <canvas> Development + - [CanvasRenderingContext2D](ui-js-components-canvasrenderingcontext2d.md) + - [Path2D](ui-js-components-path2d.md) + - [OffscreenCanvas](ui-js-components-offscreencanvas.md) + - [<grid-container> Development](ui-js-components-calendar.md) + - Svg + - [Basics](ui-js-components-svg-overview.md) + - [Graph Drawing](ui-js-components-svg-graphics.md) + - [Path Drawing](ui-js-components-svg-path.md) + - [Text Drawing](ui-js-components-svg-text.md) - Animation Development Guidelines - CSS Animation - [Defining Attribute Style Animations](ui-js-animate-attribute-style.md) diff --git a/en/application-dev/ui/figures/en-us_image_0000001231683112.gif b/en/application-dev/ui/figures/en-us_image_0000001231683112.gif new file mode 100644 index 0000000000000000000000000000000000000000..8e64d09f33bcbba8117775ea6f5946cc4556d0c3 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231683112.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231683116.png b/en/application-dev/ui/figures/en-us_image_0000001231683116.png new file mode 100644 index 0000000000000000000000000000000000000000..11dac18df74e1fd4d09adc43bb264253294df23f Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231683116.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231683124.png b/en/application-dev/ui/figures/en-us_image_0000001231683124.png new file mode 100644 index 0000000000000000000000000000000000000000..d4301a19383a2abbfb7038275e59adc901046307 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231683124.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231683128.gif b/en/application-dev/ui/figures/en-us_image_0000001231683128.gif new file mode 100644 index 0000000000000000000000000000000000000000..52af9a2cddfa15e4f08358a0023f456b35d535c6 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231683128.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231683144.gif b/en/application-dev/ui/figures/en-us_image_0000001231683144.gif new file mode 100644 index 0000000000000000000000000000000000000000..cfe44e409c1ddf0f7a70b59367a7885033a2b42f Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231683144.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231683148.gif b/en/application-dev/ui/figures/en-us_image_0000001231683148.gif new file mode 100644 index 0000000000000000000000000000000000000000..353e2ffb9a84cba7616291730c7c0c670adc2b13 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231683148.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231683152.png b/en/application-dev/ui/figures/en-us_image_0000001231683152.png new file mode 100644 index 0000000000000000000000000000000000000000..acdf7a05ea58d00687571fbcb496372b64ab1c87 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231683152.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231683156.png b/en/application-dev/ui/figures/en-us_image_0000001231683156.png new file mode 100644 index 0000000000000000000000000000000000000000..8df470cc4c0e146972977c1b7dadecc8cbc67838 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231683156.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231683164.gif b/en/application-dev/ui/figures/en-us_image_0000001231683164.gif new file mode 100644 index 0000000000000000000000000000000000000000..2dd2706317ddfaf317fc2abfc5cbb0a5a5a927cf Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231683164.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231683172.png b/en/application-dev/ui/figures/en-us_image_0000001231683172.png new file mode 100644 index 0000000000000000000000000000000000000000..5c1dc425e1a607a846d3884a9118387accb031a4 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231683172.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231843076.gif b/en/application-dev/ui/figures/en-us_image_0000001231843076.gif new file mode 100644 index 0000000000000000000000000000000000000000..b8e2940f1660157ba412beac4db6614b4714d599 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231843076.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231843084.png b/en/application-dev/ui/figures/en-us_image_0000001231843084.png new file mode 100644 index 0000000000000000000000000000000000000000..bd0b2b46d44aced7d075ba36196aa02c43b362c3 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231843084.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231843088.gif b/en/application-dev/ui/figures/en-us_image_0000001231843088.gif new file mode 100644 index 0000000000000000000000000000000000000000..f7f05ac39da2bd2f04a7257e1c36eb87ad811783 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231843088.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231843096.png b/en/application-dev/ui/figures/en-us_image_0000001231843096.png new file mode 100644 index 0000000000000000000000000000000000000000..b9d99e465fd01f8a427bd2c0b7758045241b8227 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231843096.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231843100.gif b/en/application-dev/ui/figures/en-us_image_0000001231843100.gif new file mode 100644 index 0000000000000000000000000000000000000000..88c62f08669f2ec3533db708d49d18a069501644 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231843100.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231843104.png b/en/application-dev/ui/figures/en-us_image_0000001231843104.png new file mode 100644 index 0000000000000000000000000000000000000000..0a5d725eba5254e9a489204bf2a7c06170aa3a2e Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231843104.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231843116.gif b/en/application-dev/ui/figures/en-us_image_0000001231843116.gif new file mode 100644 index 0000000000000000000000000000000000000000..d6a46140a41a112790210c58502fbc3df6e65f20 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231843116.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231843128.gif b/en/application-dev/ui/figures/en-us_image_0000001231843128.gif new file mode 100644 index 0000000000000000000000000000000000000000..f6469e9e80464270e28bc6c682ff3e9bf8420a5f Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231843128.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231843132.gif b/en/application-dev/ui/figures/en-us_image_0000001231843132.gif new file mode 100644 index 0000000000000000000000000000000000000000..aba5bd689955bb90c779ba3c231d698d9fb53eac Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001231843132.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232002968.png b/en/application-dev/ui/figures/en-us_image_0000001232002968.png new file mode 100644 index 0000000000000000000000000000000000000000..b9c766a3189861fae9fbcf07f5912bef0d8562c8 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232002968.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232002972.gif b/en/application-dev/ui/figures/en-us_image_0000001232002972.gif new file mode 100644 index 0000000000000000000000000000000000000000..8a6952f9e8398edabbe28e8daace7c6be172531a Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232002972.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232002988.gif b/en/application-dev/ui/figures/en-us_image_0000001232002988.gif new file mode 100644 index 0000000000000000000000000000000000000000..f62f884f93ef38a79a6a4653f8681b765cc87aa9 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232002988.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232003000.gif b/en/application-dev/ui/figures/en-us_image_0000001232003000.gif new file mode 100644 index 0000000000000000000000000000000000000000..9983db70e3477057acdcbbdaba56dea290f6a303 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232003000.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232003004.gif b/en/application-dev/ui/figures/en-us_image_0000001232003004.gif new file mode 100644 index 0000000000000000000000000000000000000000..6c67ff8bc8394cddb79b5ac4d1b2c130ae6a6bb8 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232003004.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232003008.gif b/en/application-dev/ui/figures/en-us_image_0000001232003008.gif new file mode 100644 index 0000000000000000000000000000000000000000..b5bce1b8e09e0c47231c11250c6d676806bcd53c Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232003008.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232003012.gif b/en/application-dev/ui/figures/en-us_image_0000001232003012.gif new file mode 100644 index 0000000000000000000000000000000000000000..260966e4fe59e4e6f80b501251f478bbb7126dce Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232003012.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232003020.gif b/en/application-dev/ui/figures/en-us_image_0000001232003020.gif new file mode 100644 index 0000000000000000000000000000000000000000..ba4c74a1f562b0abe65681e30f3228f54cb53a74 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232003020.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232003024.gif b/en/application-dev/ui/figures/en-us_image_0000001232003024.gif new file mode 100644 index 0000000000000000000000000000000000000000..491e4d141faffa0cf052d3adfb32eaa3fda61c8e Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232003024.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232003028.gif b/en/application-dev/ui/figures/en-us_image_0000001232003028.gif new file mode 100644 index 0000000000000000000000000000000000000000..7293aff8d5971a6b026c751570eefbca029bb06b Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232003028.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232162284.gif b/en/application-dev/ui/figures/en-us_image_0000001232162284.gif new file mode 100644 index 0000000000000000000000000000000000000000..8b0e1d5a97c59fb1b0b1b243d5b0a30f1b8824e2 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232162284.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232162288.png b/en/application-dev/ui/figures/en-us_image_0000001232162288.png new file mode 100644 index 0000000000000000000000000000000000000000..d4d117430d11520fdcbe3cd1343182a7f169c7fe Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232162288.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232162292.gif b/en/application-dev/ui/figures/en-us_image_0000001232162292.gif new file mode 100644 index 0000000000000000000000000000000000000000..3b5681fe5f430af62ef6d94b37bf6cc5a2a2ee58 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232162292.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232162312.gif b/en/application-dev/ui/figures/en-us_image_0000001232162312.gif new file mode 100644 index 0000000000000000000000000000000000000000..91d6134b97b6e9073540ee7b06ecf6e31952c9b5 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232162312.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232162316.png b/en/application-dev/ui/figures/en-us_image_0000001232162316.png new file mode 100644 index 0000000000000000000000000000000000000000..03a4a72905b6e852a00cdbbe17918cdeda28e5bf Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232162316.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232162320.gif b/en/application-dev/ui/figures/en-us_image_0000001232162320.gif new file mode 100644 index 0000000000000000000000000000000000000000..d8f8221489fd409670bfa9b3d0694a54552d5cbd Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232162320.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232162324.png b/en/application-dev/ui/figures/en-us_image_0000001232162324.png new file mode 100644 index 0000000000000000000000000000000000000000..7b3260b58addc8949c1ed409fb183ac91f986ebf Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232162324.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232162328.gif b/en/application-dev/ui/figures/en-us_image_0000001232162328.gif new file mode 100644 index 0000000000000000000000000000000000000000..fae5d684f722d9f65d55fdfc6b249c4322185cfe Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232162328.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232162340.png b/en/application-dev/ui/figures/en-us_image_0000001232162340.png new file mode 100644 index 0000000000000000000000000000000000000000..86187142668379cc81fcc9f163e3218a078cc8cc Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001232162340.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803133.png b/en/application-dev/ui/figures/en-us_image_0000001275803133.png new file mode 100644 index 0000000000000000000000000000000000000000..ffe4b54ecb499aa26d5b48eea623434985646292 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803133.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803137.gif b/en/application-dev/ui/figures/en-us_image_0000001275803137.gif new file mode 100644 index 0000000000000000000000000000000000000000..c80d86b0508ad15cd944314d0a2b3b59dcd9bcd6 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803137.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803145.png b/en/application-dev/ui/figures/en-us_image_0000001275803145.png new file mode 100644 index 0000000000000000000000000000000000000000..45a96cb24680a3cf2cdd91d315314822701c4176 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803145.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803149.png b/en/application-dev/ui/figures/en-us_image_0000001275803149.png new file mode 100644 index 0000000000000000000000000000000000000000..5a0fa14321998b5fc33b0965dcc0ca0ae315dd09 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803149.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803153.gif b/en/application-dev/ui/figures/en-us_image_0000001275803153.gif new file mode 100644 index 0000000000000000000000000000000000000000..fec6caa122160183c3cc049e803710301fd63d9f Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803153.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803169.gif b/en/application-dev/ui/figures/en-us_image_0000001275803169.gif new file mode 100644 index 0000000000000000000000000000000000000000..439eea01e278280086248901e4ac51923d5e4979 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803169.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803173.gif b/en/application-dev/ui/figures/en-us_image_0000001275803173.gif new file mode 100644 index 0000000000000000000000000000000000000000..abec4486ad5f444b32aa20b88a3a6d1975254cd0 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803173.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803177.gif b/en/application-dev/ui/figures/en-us_image_0000001275803177.gif new file mode 100644 index 0000000000000000000000000000000000000000..c310e7cfd714246b95eab7f030c33490bef98d86 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803177.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803181.gif b/en/application-dev/ui/figures/en-us_image_0000001275803181.gif new file mode 100644 index 0000000000000000000000000000000000000000..9b0bdbf57b14db63cf4935e1a578e78da5380a8a Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803181.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803189.gif b/en/application-dev/ui/figures/en-us_image_0000001275803189.gif new file mode 100644 index 0000000000000000000000000000000000000000..ab6d5e3bde1e3218eaa1156137c7fd6ffc298882 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803189.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803193.png b/en/application-dev/ui/figures/en-us_image_0000001275803193.png new file mode 100644 index 0000000000000000000000000000000000000000..a5db8f42d350aa79613ac657db2630d0d60d3d3c Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275803193.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275922965.gif b/en/application-dev/ui/figures/en-us_image_0000001275922965.gif new file mode 100644 index 0000000000000000000000000000000000000000..0c3c7fccb059ad03b084728307963082dc6f8365 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275922965.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275922969.gif b/en/application-dev/ui/figures/en-us_image_0000001275922969.gif new file mode 100644 index 0000000000000000000000000000000000000000..ea5aa768532ea01f6828bd6bf211c4c2fe1e0d22 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275922969.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275922977.gif b/en/application-dev/ui/figures/en-us_image_0000001275922977.gif new file mode 100644 index 0000000000000000000000000000000000000000..13c21f4cbd450e5670bfeaf1041826fe3cc07f06 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275922977.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275922997.gif b/en/application-dev/ui/figures/en-us_image_0000001275922997.gif new file mode 100644 index 0000000000000000000000000000000000000000..30dbdba7bf2036b51395507d4a1996b5adaf5436 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275922997.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275923005.gif b/en/application-dev/ui/figures/en-us_image_0000001275923005.gif new file mode 100644 index 0000000000000000000000000000000000000000..8bd5e2f2f7f60ad28107af3dc67ff5ee75af2b0d Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275923005.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275923017.png b/en/application-dev/ui/figures/en-us_image_0000001275923017.png new file mode 100644 index 0000000000000000000000000000000000000000..08f11bc53e9a0e6430b06ae77fde645585ee711b Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275923017.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275923021.gif b/en/application-dev/ui/figures/en-us_image_0000001275923021.gif new file mode 100644 index 0000000000000000000000000000000000000000..5813dfac315791a87d9bd9c70a9587e6b779614c Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001275923021.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003481.gif b/en/application-dev/ui/figures/en-us_image_0000001276003481.gif new file mode 100644 index 0000000000000000000000000000000000000000..5198c5a81cf4427f1014489336d730d846e15f9d Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276003481.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003485.gif b/en/application-dev/ui/figures/en-us_image_0000001276003485.gif new file mode 100644 index 0000000000000000000000000000000000000000..28b2a163673a71e95a40284d2b045005594623e6 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276003485.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003489.gif b/en/application-dev/ui/figures/en-us_image_0000001276003489.gif new file mode 100644 index 0000000000000000000000000000000000000000..0554bd02b6ce8c1d835a3cde3bf2427d8dd15bda Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276003489.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003501.gif b/en/application-dev/ui/figures/en-us_image_0000001276003501.gif new file mode 100644 index 0000000000000000000000000000000000000000..aa9bba2a489f516d80f7eed07bc67e549d1a25c3 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276003501.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003505.gif b/en/application-dev/ui/figures/en-us_image_0000001276003505.gif new file mode 100644 index 0000000000000000000000000000000000000000..1b6a6d7cce2951696d624ea3cf645570231bc0d7 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276003505.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003513.gif b/en/application-dev/ui/figures/en-us_image_0000001276003513.gif new file mode 100644 index 0000000000000000000000000000000000000000..d93306857a1ce4a304bc83a664ee270105f39017 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276003513.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003517.gif b/en/application-dev/ui/figures/en-us_image_0000001276003517.gif new file mode 100644 index 0000000000000000000000000000000000000000..407541949a9a7d9308ca61be4dfc2ecf91709d49 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276003517.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003525.gif b/en/application-dev/ui/figures/en-us_image_0000001276003525.gif new file mode 100644 index 0000000000000000000000000000000000000000..5d4ed8967a4f4d4d163c560536ee537feddef49a Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276003525.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003537.png b/en/application-dev/ui/figures/en-us_image_0000001276003537.png new file mode 100644 index 0000000000000000000000000000000000000000..1898cb7e3d137e02211afb6425147bc4754600d5 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276003537.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003541.gif b/en/application-dev/ui/figures/en-us_image_0000001276003541.gif new file mode 100644 index 0000000000000000000000000000000000000000..7d8da86f2f1cf71ca9bc5d6cb65564bb64ae5fd1 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276003541.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276162713.gif b/en/application-dev/ui/figures/en-us_image_0000001276162713.gif new file mode 100644 index 0000000000000000000000000000000000000000..531e20ab79714795da80341f363a71f5c426f034 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276162713.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276162717.gif b/en/application-dev/ui/figures/en-us_image_0000001276162717.gif new file mode 100644 index 0000000000000000000000000000000000000000..1167fd1b33a3f955c037e59aff6b86275605bdfd Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276162717.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276162725.png b/en/application-dev/ui/figures/en-us_image_0000001276162725.png new file mode 100644 index 0000000000000000000000000000000000000000..a018ed2562de8d5f23c7422f451b763086a72390 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276162725.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276162745.gif b/en/application-dev/ui/figures/en-us_image_0000001276162745.gif new file mode 100644 index 0000000000000000000000000000000000000000..ac5857ad2e4888bfda20044fb84dbd100ed68d5b Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276162745.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276162773.gif b/en/application-dev/ui/figures/en-us_image_0000001276162773.gif new file mode 100644 index 0000000000000000000000000000000000000000..9e313e1e87059572aa036b06881381da7b070641 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001276162773.gif differ diff --git a/en/application-dev/ui/ui-js-component-tabs.md b/en/application-dev/ui/ui-js-component-tabs.md index 0e20aaea35129a98b219d5eaac252dfda7e420d4..7986d52513a4e62c9f6a9018c9474174c13e7937 100644 --- a/en/application-dev/ui/ui-js-component-tabs.md +++ b/en/application-dev/ui/ui-js-component-tabs.md @@ -1,19 +1,19 @@ # <tabs> Development -The <tabs> component is a common UI component for navigation. It allows quick access to different functions of an app. For details, see [tabs](../reference/arkui-js/js-components-container-tabs.md). +The **<tabs>** component is a common UI component for navigation. It allows quick access to different functions of an app. For details, see [tabs](../reference/arkui-js/js-components-container-tabs.md). ## Creating Tabs -Create a <tabs> component in the .hml file under pages/index. +Create a **<tabs>** component in the .hml file under **pages/index**. ```
- + item1 item2 @@ -25,7 +25,7 @@ Create a <tabs> component in the .hml file under pages/index. content2
- + ``` @@ -51,13 +51,13 @@ Create a <tabs> component in the .hml file under pages/index. ## Setting the Tabs Orientation -By default, the active tab of a <tabs> component is the one with the specified index. To show the <tabs> vertically, set the vertical attribute to true. +By default, the active tab of a **<tabs>** component is the one with the specified **index**. To show the **<tabs>** vertically, set the **vertical** attribute to **true**. ```
- + item1 item2 @@ -76,7 +76,7 @@ By default, the active tab of a <tabs> component is the one with the speci ![en-us_image_0000001222967756](figures/en-us_image_0000001222967756.gif) -Set the mode attribute to enable the child components of the to be evenly distributed. Set the scrollable attribute to disable scrolling of the . +Set the **mode** attribute to enable the child components of the **<tab-bar>** to be evenly distributed. Set the **scrollable** attribute to disable scrolling of the **<tab-content>**. ``` @@ -102,9 +102,9 @@ Set the mode attribute to enable the child components of the to be eve ![en-us_image_0000001267647857](figures/en-us_image_0000001267647857.gif) -## Setting the Style +## Setting Styles - Set the background color, border, and tab-content layout of the <tabs> component. + Set the background color, border, and tab-content layout of the **<tabs>** component. ``` @@ -150,7 +150,8 @@ Set the mode attribute to enable the child components of the to be eve margin-top: 10px; height: 300px; color: blue; - justify-content: center; align-items: center; + justify-content: center; + align-items: center; } ``` @@ -159,13 +160,13 @@ Set the mode attribute to enable the child components of the to be eve ## Displaying the Tab Index -Add the change event for the <tabs> component to display the index of the current tab after tab switching. +Add the **change** event for the **<tabs>** component to display the index of the current tab after tab switching. ```
- + item1 item2 @@ -198,15 +199,15 @@ export default { ![en-us_image_0000001222807772](figures/en-us_image_0000001222807772.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> - A <tabs> can wrap at most one [](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [](../reference/arkui-js/js-components-container-tab-content.md). +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - A **<tabs>** can wrap at most one [**<tab-bar>**](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [**<tab-content>**](../reference/arkui-js/js-components-container-tab-content.md). ## Example Scenario In this example, you can switch between tabs and the active tab has the title text in red with an underline below. -Use the <tabs>, , and components to implement tab switching. Then define the arrays and attributes. Add the change event to change the attribute values in the arrays so that the active tab has a different font color and an underline. +Use the **<tabs>**, **<tab-bar>**, and **<tab-content>** components to implement tab switching. Then define the arrays and attributes. Add the **change** event to change the attribute values in the arrays so that the active tab has a different font color and an underline. ``` diff --git a/en/application-dev/ui/ui-js-components-button.md b/en/application-dev/ui/ui-js-components-button.md index 1507ce9c9843bb535efbb8cbd8ebafde66bd93e5..3911378bdee4244218295152478370c746ee87cc 100644 --- a/en/application-dev/ui/ui-js-components-button.md +++ b/en/application-dev/ui/ui-js-components-button.md @@ -1,12 +1,12 @@ # <button> Development -The<button>component can be used to set a capsule, circle, text, arc, or download button. For details, see [button](../reference/arkui-js/js-components-basic-button.md). +The **<button>** component can be used to set a capsule, circle, text, arc, or download button. For details, see [button](../reference/arkui-js/js-components-basic-button.md). -## Creating a <button> Component +## Creating a <button> Component -Create a <button> component in the .hml file under pages/index. +Create a **<button>** component in the .hml file under **pages/index**. ``` @@ -20,6 +20,8 @@ Create a <button> component in the .hml file under pages/index. ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -32,7 +34,9 @@ Create a <button> component in the .hml file under pages/index. ## Setting the Button Type -Set the type attribute of the <input> component to button, date, or any of the supported values. +Set the **type** attribute of the **<input>** component to **button**, **date**, or any of the supported values. + + ``` @@ -42,9 +46,13 @@ Set the type attribute of the <input> component to button, date, or any of
``` + + ``` /* xxx.css */ .container { + width: 100%; + height: 100%; background-color: #F1F3F5; flex-direction: column; align-items: center; @@ -70,17 +78,19 @@ Set the type attribute of the <input> component to button, date, or any of ![en-us_image_0000001222967744](figures/en-us_image_0000001222967744.png) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > - For capsule buttons, border-related styles are not supported. > > - For circle buttons, text-related styles are not supported. > -> - For text buttons, the text size is adaptive, and radius, width, and height cannot be set. The background-color style is not supported when the background is completely transparent. +> - For text buttons, the text size is adaptive, and **radius**, **width**, and **height** cannot be set. The **background-color** style is not supported when the background is completely transparent. > -> - If the icon used by the<button>component is from the cloud, you must declare the ohos.permission.INTERNET permission in the config.json file under the resources folder. +> - If the icon used by the **<button>** component is from the cloud, you must declare the **ohos.permission.INTERNET** permission in the **config.json** file under the **resources** folder. + + +Sample code for declaring the **ohos.permission.INTERNET** permission in the **config.json** file under the **resources** folder: -Sample code for declaring the ohos.permission.INTERNET permission in the config.json file under the resources folder: ``` @@ -94,7 +104,7 @@ Sample code for declaring the ohos.permission.INTERNET permission in the config. ## Showing the Download Progress -Add the progress method to the<button>component to display the download progress in real time. +Add the **progress** method to the **<button>** component to display the download progress in real time. ``` @@ -171,15 +181,16 @@ export default { ![en-us_image_0000001223287652](figures/en-us_image_0000001223287652.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> -> The setProgress method supports only buttons of the download type. +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - The **setProgress** method supports only buttons of the download type. ## Example Scenario Switch between the button types for different types of text. + + ```
@@ -197,6 +208,8 @@ Switch between the button types for different types of text.
``` + + ``` /* xxx.css */ .container { @@ -243,6 +256,8 @@ Switch between the button types for different types of text. } ``` + + ``` // xxx.js export default { diff --git a/en/application-dev/ui/ui-js-components-calendar.md b/en/application-dev/ui/ui-js-components-calendar.md new file mode 100644 index 0000000000000000000000000000000000000000..0f1d7fb32e2723899ff8094f1da1921c2c2ce7d5 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-calendar.md @@ -0,0 +1,244 @@ +# <grid-container> Development + + +The **<grid-container>** component is the root container of the grid layout. Within the root container, you can use **<grid-row>** and **<grid-col>** for the grid layout. For details, see [grid-container](../reference/arkui-js/js-components-grid-container.md). + + +## Creating a <grid-container> Component + +Create a **<grid-container>** component in the .hml file under **pages/index** and add a [**<grid-row>**](../reference/arkui-js/js-components-grid-row.md) child component. + + +``` + +
+ + + + + +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + width: 100%; + justify-content: center; + align-items: center; +} +``` + +![en-us_image_0000001276162725](figures/en-us_image_0000001276162725.png) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> **<grid-container>** supports only **<grid-row>** as a child component. + + +## Methods + +Click the **<grid-container>** component to call the **getColumns**, **getColumnWidth**, and **getGutterWidth** methods to return the number of columns in the grid container, and column width and gutter width of the grid container. Press and hold the component to call the **getSizeType** method to return the size-responsive type of the grid container (**xs**|**sm**|**md**|**lg**). + + +``` + +
+ + + + + + +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + width: 100%; + justify-content: center; + align-items: center; +} +``` + + +``` +// index.js +import prompt from '@system.prompt'; +export default { + data:{ + gutterWidth:'', + columnWidth:'', + columns:'', + }, + getColumns(){ + this.$element('mygrid').getColumnWidth((result)=>{ + this.columnWidth = result; + }) + this.$element('mygrid').getGutterWidth((result)=>{ + this.gutterWidth = result; + }) + this.$element('mygrid').getColumns((result)=>{ + this.columns= result; + }) + setTimeout(()=>{ + prompt.showToast({duration:5000,message:'columnWidth:'+this.columnWidth+',gutterWidth:'+ + this.gutterWidth+',getColumns:'+this.columns}) + }) + }, + getSizeType(){ + this.$element('mygrid').getSizeType((result)=>{ + prompt.showToast({duration:2000,message:'get size type:'+result}) + }) + }, +} +``` + +![en-us_image_0000001231843088](figures/en-us_image_0000001231843088.gif) + + +## Adding <grid-col> + +After adding a **<grid-row>** child component to **<grid-container>**, add a **<grid-col>** child component to **<grid-row>** to form a layout. + + +``` + +
+ + + +
+ top +
+ + + + +
+ left +
+ + +
+ right +
+ + + + +
+ bottom +
+ + + +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + width: 100%; + justify-content: center; + align-items: center; +} +text{ + color: white; + font-size: 40px; + +``` + +![en-us_image_0000001231683124](figures/en-us_image_0000001231683124.png) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> **<grid-row>** supports only **<grid-col>** as a child component. You can add content only to **<grid-col>**. + + +## Example Scenario + +In this example, the content in the list is output cyclically to create a grid layout. When the user pulls down the screen, the **refresh** method is triggered. In this case, a piece of data is added to the list and **setTimeout** is set to refresh the request data. + + +``` + +
+ + + + +
+ +
+ + +
+ image{{item.id}} +
+ + + + +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + width: 100%; +} +text{ + color: #0a0aef; + font-size: 60px; +} +``` + + +``` +// index.js +import prompt from '@system.prompt'; +export default { + data:{ + list:[ + {src:'common/images/1.png',id:'1'}, + {src:'common/images/2.png',id:'2'}, + {src:'common/images/3.png',id:'3'} + ], + fresh:false + }, + refresh(e) { + prompt.showToast({ + message: 'refreshing' + }) + var that = this; + that.fresh = e.refreshing; + setTimeout(function () { + that.fresh = false; + that.list.unshift({src: 'common/images/4.png',id:'4'}); + prompt.showToast({ + message: 'succeed' + }) + }, 2000) + } +} +``` + + +![en-us_image_0000001276003501](figures/en-us_image_0000001276003501.gif) diff --git a/en/application-dev/ui/ui-js-components-canvas.md b/en/application-dev/ui/ui-js-components-canvas.md new file mode 100644 index 0000000000000000000000000000000000000000..87b813cca0bae6f27a417f43b81f03f098350a35 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-canvas.md @@ -0,0 +1,121 @@ +# <canvas> Development + + +The **<canvas>** component provides a canvas for drawing customized graphics. For details, see [canvas](../reference/arkui-js/js-components-canvas-canvas.md). + + +## Creating a <canvas> Component + +Create a **<canvas>** component in the .hml file under **pages/index**. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +canvas{ + background-color: #00ff73; +} +``` + +![en-us_image_0000001232162316](figures/en-us_image_0000001232162316.png) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - The default background color of the **<canvas>** component is the same as that of the parent component. +> +> - The default width and height of **<canvas>** are 300 px and 150 px, respectively. + + +## Adding Styles + +Set **width**, **height**, **background-color**, and **border** of the **<canvas>** component. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +canvas{ + width: 500px; + height: 500px; + background-color: #fdfdfd; + border: 5px solid red; +} +``` + +![en-us_image_0000001231843104](figures/en-us_image_0000001231843104.png) + + +## Adding Events + +Add the long press event to the **<canvas>** component. When the event is triggered, the value of **dataUrl** (image information returned by the **toDataURL** method) of the **<canvas>** component can be obtained and printed in the text area below. + + +``` + +
+ + dataURL + {{dataURL}} +
+``` + + +``` +/* xxx.css */.container{ flex-direction: column; justify-content: center; align-items: center; background-color: #F1F3F5;}canvas{ width: 500px; height: 500px; background-color: #fdfdfd; border: 5px solid red; + margin-bottom: 50px; +}.content{ border: 5px solid blue; padding: 10px; width: 90%; height: 400px; overflow: scroll;} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + dataURL:null, + antialia: false, + porc:'open', + }, + onShow(){ + let el = this.$refs.canvas1; + let ctx = el.getContext("2d"); + ctx.strokeRect(100,100,300,300); + }, + getUrl(){ + let el = this.$refs.canvas1; + let dataUrl = el.toDataURL(); + this.dataURL = dataUrl; + prompt.showToast({duration:2000,message:"long press,get dataURL"}); + } +} +``` + +![en-us_image_0000001276003513](figures/en-us_image_0000001276003513.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> The **<canvas>** component cannot be created in **onInit** or **onReady**. diff --git a/en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md b/en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md new file mode 100644 index 0000000000000000000000000000000000000000..67922ab27f55e9cc20b1e2447e605dc83ff18df4 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md @@ -0,0 +1,826 @@ +# CanvasRenderingContext2D + + +Use **CanvasRenderingContext2D** to draw objects such as graphics, texts, line segments, and images on the **<canvas>** component. For details, see [CanvasRenderingContext2D](../reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md). + + +## Drawing Line Segments + +Use **moveTo** and **lineTo** to draw a line segment. Use the **closePath** method to end current path, obtaining a closed path. Set **quadraticCurveTo** (quadratic bezier curve) or **bezierCurveTo** (cubic bezier curve) to draw a graphic. + + +``` + +
+ + +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +canvas{ + width: 600px; + height: 500px; + background-color: #fdfdfd; + border: 5px solid red; +} +select{ + margin-top: 50px; + width: 250px; + height: 100px; + background-color: white; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + el: null, + ctx: null, + }, + onShow(){ + this.el = this.$refs.canvas1; + this.ctx = this.el.getContext("2d",{antialias: true}); + // Clear the contents on the canvas. + this.ctx.clearRect(0, 0, 600, 500); + // Create a drawing path. + this.ctx.beginPath(); + // Square off the endpoints of the line. + this.ctx.lineCap = 'butt'; + // Border width + this.ctx.lineWidth = 15; + // Create a drawing path. + this.ctx.beginPath(); + // Move a drawing path from the current point to a target position. + this.ctx.moveTo(200, 100); + // Connect the current point to a target position. + this.ctx.lineTo(400, 100); + // Stroke a path. + this.ctx.stroke(); + this.ctx.beginPath(); + // Round the endpoints of the line. + this.ctx.lineCap = 'round'; + this.ctx.moveTo(200, 200); + this.ctx.lineTo(400, 200); + this.ctx.stroke(); + // Square off the endpoints of the line. + this.ctx.beginPath(); + this.ctx.lineCap = 'square'; + this.ctx.moveTo(200, 300); + this.ctx.lineTo(400, 300); + this.ctx.stroke(); + }, + change(e){ + if(e.newValue == 'value1'){ + this.el = this.$refs.canvas1; + this.ctx = this.el.getContext("2d",{antialias: true}); + this.ctx.clearRect(0, 0, 600, 500); + // Top + this.ctx.beginPath(); + this.ctx.lineCap = 'butt'; + this.ctx.moveTo(200, 100); + this.ctx.lineTo(400, 100); + this.ctx.stroke(); + // Center + this.ctx.beginPath(); + this.ctx.lineCap = 'round'; + this.ctx.moveTo(200, 200); + this.ctx.lineTo(400, 200); + this.ctx.stroke(); + // Bottom + this.ctx.beginPath(); + this.ctx.lineCap = 'square'; + this.ctx.moveTo(200, 300); + this.ctx.lineTo(400, 300); + this.ctx.stroke(); + }else if(e.newValue == 'value2'){ + this.ctx.clearRect(0, 0, 600, 500); + // Top + this.ctx.beginPath(); + this.ctx.moveTo(100, 150); + // Path of the quadratic bezier curve + this.ctx.quadraticCurveTo(300, 50, 500, 150); + this.ctx.stroke(); + // Left + this.ctx.beginPath(); + this.ctx.moveTo(200, 150); + this.ctx.quadraticCurveTo(250, 250, 250, 400); + this.ctx.stroke(); + // Right + this.ctx.beginPath(); + this.ctx.moveTo(400, 150); + this.ctx.quadraticCurveTo(350, 250, 350, 400); + this.ctx.stroke(); + }else if(e.newValue == 'value3'){ + this.ctx.clearRect(0, 0, 600, 500); + // Bottom + this.ctx.beginPath(); + this.ctx.moveTo(100, 200); + // Path of the cubic bezier curve + this.ctx.bezierCurveTo(150, 100, 200, 100,250, 200); + this.ctx.stroke(); + // Left + this.ctx.beginPath(); + this.ctx.moveTo(350, 200); + this.ctx.bezierCurveTo(400, 100, 450, 100,500, 200); + this.ctx.stroke(); + // Right + this.ctx.beginPath(); + this.ctx.moveTo(200, 350); + this.ctx.bezierCurveTo(250, 500, 350, 500, 400, 350); + this.ctx.stroke(); + }else if(e.newValue == 'value4'){ + this.ctx.clearRect(0, 0, 600, 500); + this.ctx.beginPath(); + this.ctx.moveTo(100, 200); + // Arc + this.ctx.arcTo(150, 300, 350, 300, 150); + this.ctx.stroke(); + this.ctx.beginPath(); + // Ellipse + this.ctx.ellipse(400, 250, 50, 100, Math.PI * 0.25, Math.PI * 0.5 , Math.PI , 1); + this.ctx.stroke(); + }else if(e.newValue == 'value5'){ + this.ctx.clearRect(0, 0, 600, 500); + // Upper left + this.ctx.beginPath(); + // Draw a sector centered at the common endpoint of connected line segments. + this.ctx.lineJoin = 'round'; + this.ctx.moveTo(100, 100); + this.ctx.lineTo(200, 200); + this.ctx.lineTo(100, 250); + this.ctx.stroke(); + // lower left + this.ctx.beginPath(); + // Fill a triangular between the common endpoint of connected segments. + this.ctx.lineJoin = 'bevel'; + this.ctx.moveTo(100, 300); + this.ctx.lineTo(200, 400); + this.ctx.lineTo(100, 450); + this.ctx.stroke(); + // Top right + this.ctx.beginPath(); + // Distance between the internal angle and exterior angle at the intersection of lines + this.ctx.lineJoin = 'miter'; + this.ctx.miterLimit = 3; + this.ctx.moveTo(400, 100); + this.ctx.lineTo(450, 200); + this.ctx.lineTo(400, 250); + // Draw a closed path. + this.ctx.closePath(); + this.ctx.stroke(); + // Lower right + this.ctx.beginPath(); + this.ctx.lineJoin = 'miter'; + this.ctx.miterLimit = 10; + this.ctx.moveTo(400, 300); + this.ctx.lineTo(450, 400); + this.ctx.lineTo(400, 450); + this.ctx.closePath(); + this.ctx.stroke(); + } + }, +} +``` + +![en-us_image_0000001232162320](figures/en-us_image_0000001232162320.gif) + + +## Drawing Border + +Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle with the border width of 5 upon initialization. Change the border width (**lineWidth**), color (**strokeStyle**), and line dash level (**setLineDash**). Add the **change** event to the **<select>** component. The **change** event will be triggered upon selection and the changed image will be displayed. + + + +``` + +
+ + +
+``` + + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +canvas{ + width: 600px; + height: 500px; + background-color: #fdfdfd; + border: 5px solid red; +} +select{ + margin-top: 50px; + width: 250px; + height: 100px; + background-color: white; +} +``` + + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + el: null, + ctx: null, + }, + onShow(){ + this.el = this.$refs.canvas1; + this.ctx = this.el.getContext("2d",{antialias: true}); + this.ctx.lineWidth = 5; + this.ctx.strokeRect(200, 150, 200, 200); + }, + change(e){ + if(e.newValue == 'value1'){ + // Clear the contents on the canvas. + this.ctx.clearRect(0,0,600,500); + // Border width + this.ctx.lineWidth = 5; + // Border color + this.ctx.strokeStyle = '#110000'; + // Line dash level of the border + this.ctx.setLineDash([0,0]); + // Draw a stroked rectangle. + this.ctx.strokeRect(200, 150, 200, 200); + }else if(e.newValue == 'value2'){ + this.ctx.clearRect(0,0,600,500); + this.ctx.lineWidth = 30; + this.ctx.strokeStyle = '#0000ff'; + this.ctx.setLineDash([0,0]); + // Draw a circle. + this.ctx.arc(300, 250, 150,0,6.28); + // Draw borders. + this.ctx.stroke(); + }else if(e.newValue == 'value3'){ + this.ctx.clearRect(0,0,600,500); + this.ctx.lineWidth = 5; + this.ctx.setLineDash([5,5]); + this.ctx.strokeRect(200, 150, 200, 200); + }else if(e.newValue == 'value4'){ + this.ctx.clearRect(0,0,600,500); + // Draw and fill a rectangle. + this.ctx.fillStyle = '#0000ff'; + this.ctx.fillRect(200, 150, 200, 200); + } + }, +} +``` + + +![en-us_image_0000001232003004](figures/en-us_image_0000001232003004.gif) + + +## Setting Gradient Fill Colors + +Add the **createLinearGradient** and **createRadialGradient** attributes to create a gradient container, use the **addColorStop** method to add multiple color blocks to form a gradient color, and set **fillStyle** as **gradient** to apply the gradient color to a rectangle. Then set the shadow blur level by using **shadowBlur**, the shadow color by using **shadowColor**, and the shadow offset by using **shadowOffset**. + + +``` + +
+ + +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +canvas{ + width: 600px; + height: 500px; + background-color: #fdfdfd; + border: 5px solid red; +} +select{ + margin-top: 50px; + width: 250px; + height: 100px; + background-color: white; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + el: null, + ctx: null, + }, + onShow(){ + this.el = this.$refs.canvas1; + this.ctx = this.el.getContext("2d",{antialias: true}); + // Create a linear gradient. + let gradient = this.ctx.createLinearGradient(100,100, 400,300); + // Add gradient colors. + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.7, 'white'); + gradient.addColorStop(1.0, 'green'); + // Apply the gradient. + this.ctx.fillStyle = gradient; + this.ctx.fillRect(100, 100, 400, 300); + }, + change(e){ + if(e.newValue == 'value1'){ + // Clear the contents on the canvas. + this.ctx.clearRect(0,0,600,500); + let gradient = this.ctx.createLinearGradient(100,100, 400,300); + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.7, 'white'); + gradient.addColorStop(1.0, 'green'); + this.ctx.fillStyle = gradient; + // Set the level of shadow blur. + this.ctx.shadowBlur = 0; + // Set the distance that shadows will be offset vertically. + this.ctx.shadowOffsetY = 0; + // Set the distance that shadows will be offset horizontally. + this.ctx.shadowOffsetX = 0; + this.ctx.fillRect(100, 100, 400, 300); + }else if(e.newValue == 'value2'){ + this.ctx.clearRect(0,0,600,500); + // Create a radial gradient. + let gradient = this.ctx.createRadialGradient(300,250,20,300,250,100); + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.7, 'white'); + gradient.addColorStop(1.0, 'green'); + this.ctx.shadowBlur = 0; + this.ctx.shadowOffsetY = 0; + this.ctx.shadowOffsetX = 0; + this.ctx.fillStyle = gradient; + this.ctx.fillRect(100, 100, 400, 300); + }else if(e.newValue == 'value3'){ + this.ctx.clearRect(0,0,600,500); + let gradient = this.ctx.createLinearGradient(100,100, 400,400); + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.5, 'white'); + gradient.addColorStop(1, '#17ea35'); + // Set the level of shadow blur. + this.ctx.shadowBlur = 30; + // Set the shadow color. + this.ctx.shadowColor = 'rgb(229, 16, 16)'; + this.ctx.fillStyle = gradient; + this.ctx.fillRect(100, 100, 400, 300); + }else if(e.newValue == 'value4'){ + this.ctx.clearRect(0,0,600,500); + this.ctx.clearRect(0,0,600,500); + let gradient = this.ctx.createRadialGradient(300,250,20,300,250,200); + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.5, 'white'); + gradient.addColorStop(1, '#17ea35'); + // Set the level of shadow blur. + this.ctx.shadowBlur = 30; + this.ctx.shadowOffsetY = 30; + // Set the shadow color. + this.ctx.shadowColor = 'rgb(23, 1, 1)'; + this.ctx.fillStyle = gradient; + this.ctx.fillRect(100, 100, 400, 300); + } + }, +} +``` + +![en-us_image_0000001231683148](figures/en-us_image_0000001231683148.gif) + + +## Filling Texts + +Create a text and use the **fillText** method to write the text on the canvas. Use the **globalAlpha** attribute to change the baseline transparency to avoid the text being hidden by the baseline. Then set the **textAlign** and **textBaseline** attributes to determine the text position based on the baseline. + + +``` + +
+ + +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +canvas{ + width: 600px; + height: 500px; + background-color: #fdfdfd; + border: 5px solid red; +} +select{ + margin-top: 50px; + width: 250px; + height: 100px; + background-color: white; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + el: null, + ctx: null, + }, + onShow(){ + this.el = this.$refs.canvas1; + this.ctx = this.el.getContext("2d",{antialias: true}); + // Create a text. + let text = "Hello World"; + // Set the font. + this.ctx.font = '30px'; + this.ctx.fillText("with:"+this.ctx.measureText(text).width, 200, 300); + // Set the fill text. + this.ctx.fillText(text, 200, 250); + }, + change(e){ + if(e.newValue == 'value1'){ + // Clear the contents on the canvas. + this.ctx.clearRect(0,0,600,500); + // Start a new path. + this.ctx.beginPath(); + // Initialize the textAlign value. + this.ctx.textAlign = 'left'; + // Initialize textBaseline. + this.ctx.textBaseline = 'alphabetic'; + // Set the font. + this.ctx.font = '30px'; + let text = "Hello World"; + // Obtain the font width. + this.ctx.fillText("with:"+this.ctx.measureText(text).width, 200, 300); + // Set the fill text. + this.ctx.fillText(text, 200, 250); + }else if(e.newValue == 'value2'){ + this.ctx.clearRect(0,0,600,500); + this.ctx.beginPath(); + // Set the Alpha value. + this.ctx.globalAlpha = 0.1; + // Set the line width. + this.ctx.lineWidth = 10; + // Set the line segment color. + this.ctx.strokeStyle = '#0000ff'; + // Move from the current point to a target position. + this.ctx.moveTo(0, 240); + // Connect the current point to a target position. + this.ctx.lineTo(600, 240); + this.ctx.stroke(); + this.ctx.font = '35px'; + this.ctx.globalAlpha = 1; + // Initialize the textAlign value. + this.ctx.textAlign = 'left'; + // Set textBaseline. + this.ctx.textBaseline = 'top'; + this.ctx.fillText('Top', 50, 240); + this.ctx.textBaseline = 'bottom'; + this.ctx.fillText('Bottom', 200, 240); + this.ctx.textBaseline = 'middle'; + this.ctx.fillText('Middle', 400, 240); + }else if(e.newValue == 'value3'){ + // Clear the contents on the canvas. + this.ctx.clearRect(0,0,600,500); + this.ctx.beginPath(); + this.ctx.globalAlpha = 0.1; + this.ctx.lineWidth = 10; + this.ctx.strokeStyle = '#0000ff'; + this.ctx.moveTo(300, 0); + this.ctx.lineTo(300, 500); + this.ctx.stroke(); + this.ctx.font = '35px'; + this.ctx.globalAlpha = 1; + // Initialize textBaseline. + this.ctx.textBaseline = 'alphabetic'; + // Set textAlign. + this.ctx.textAlign = 'left'; + this.ctx.fillText('textAlign=left',300, 100); + this.ctx.textAlign = 'center'; + this.ctx.fillText('textAlign=center',300, 250); + this.ctx.textAlign = 'right'; + this.ctx.fillText('textAlign=right',300, 400); + } + } +} +``` + +![en-us_image_0000001276162745](figures/en-us_image_0000001276162745.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> In the **ltr** layout mode, the value **start** equals **left**. In the **rtl** layout mode, the value **start** equals **right**. + + +## Adding Images + +After creating an image object, use the **drawImage** attribute to draw the image and set animation styles such as scaling, translating, and rotating. + + +``` + +
+
+ + change + + rotate + + scale + + translate + + transform + + setTransform + +
+
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + align-items: center; +} +canvas{ + width: 600px; + height: 300px; + margin-bottom: 100px; + background-color: #fdfdfd; + border: 5px solid red; +} +.content{ + width: 80%; + margin-top: 50px; + margin-bottom: 50px; + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} +text{ + font-size: 35px; + width: 200px; + height: 80px; + color: white; + border-radius: 20px; + text-align: center; + background-color: #6060e7; + margin-bottom: 30px; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + compositeOperation: 'source-over' + }, + onShow(){ + let ctx = this.$refs.canvas0.getContext("2d"); + // Create an image object. + let img = new Image(); + // Set the image path. + img.src = 'common/images/2.png'; + // Set the image width. + img.width= 150; + // Set the image height. + img.height=150; + // Create an image tiling container. + var pat = ctx.createPattern(img, 'repeat'); + ctx.fillStyle = pat; + ctx.fillRect(0, 0, 600, 300); + }, + change(){ + // Obtain the brush after the canvas is created. + let ctx = this.$refs.canvas1.getContext("2d"); + ctx.clearRect(0,0,600,1000); + if(this.compositeOperation == "source-over"){ + this.compositeOperation = "destination-over"; + }else{ + this.compositeOperation = "source-over"; + } + ctx.globalCompositeOperation = this.compositeOperation; + let img = new Image(); + img.src = 'common/images/2.png'; + // Invoked when the image is successfully obtained. + img.onload = function() { + ctx.drawImage(img, 150, 20, 200, 200); + }; + let img1 = new Image(); + img1.src = 'common/images/3.png'; + img1.onload = function() { + // Draw an image. + ctx.drawImage(img1, 250, 80, 200, 200); + }; + // A method is triggered when the image fails to be obtained. + img1.onerror = function() { + prompt.showToast({message:"error",duration:2000}) + }; + }, + rotate(){ + let ctx = this.$refs.canvas2.getContext("2d"); + ctx.clearRect(0,0,600,300); + // Rotate the image. + ctx.rotate(10 * Math.PI / 180); + let img = new Image(); + img.src = 'common/images/2.png'; + img.onload = function() { + ctx.drawImage(img, 300, 0, 100, 100); + }; + }, + scale(){ + let ctx = this.$refs.canvas3.getContext("2d"); + ctx.clearRect(0,0,600,200); + // Scale the image. + ctx.scale(1.3,1.2); + let img = new Image(); + img.src = 'common/images/2.png'; + img.onload = function() { + ctx.drawImage(img, 0, 0, 50, 50); + }; + }, + translate(){ + let ctx = this.$refs.canvas4.getContext("2d"); + ctx.clearRect(0,0,600,300); + ctx.translate(10,0); + let img = new Image(); + img.src = 'common/images/2.png'; + img.onload = function() { + ctx.drawImage(img, 0, 50, 300, 200); + }; + }, + transform(){ + let ctx = this.$refs.canvas5.getContext("2d"); + ctx.clearRect(0,0,600,300); + ctx.transform(1.1, 0.1, 0.1, 1, 10, 0); + let img = new Image(); + img.src = 'common/images/2.png'; + img.onload = function() { + ctx.drawImage(img, 0, 50, 100, 100); + }; + }, + setTransform(){ + let ctx = this.$refs.canvas6.getContext("2d"); + ctx.clearRect(0,0,600,300); + ctx.setTransform(1.1, 0.1, 0.1, 1, 10, 0); + let img = new Image(); + img.src = 'common/images/2.png'; + img.onload = function() { + ctx.drawImage(img, 0, 50, 100, 100); + }; + }, +} +``` + +![en-us_image_0000001232003008](figures/en-us_image_0000001232003008.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - Unlike the **transform()** function, the **setTransform()** function resets the existing transformation matrix and creates a transformation matrix even if it uses the same parameters. +> +> - The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation. +> x' = scaleX \* x + skewY \* y + translateX +> +> y' = skewX \* x + scaleY \* y + translateY + + +## Adding Methods + +Use the **save** method to save the brush style, and use the **restore** method to restore the saved settings. In the following example, set the brush to red. After the brush setting is saved, clear the canvas and change the brush to blue. In this moment, directly using the brush will get a blue rectangle; using the brush after the restore operation will get a red rectangle. + + +``` + +
+
+ +
+
+ save + clear + restore +
+
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + align-items: center; +} +canvas{ + margin-top: 300px; + width: 600px; + height: 500px; + background-color: #fdfdfd; + border: 5px solid red; +} +.content{ + width: 80%; + margin-top: 50px; + margin-bottom: 50px; + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} +text{ + width: 150px; + height: 80px; + color: white; + border-radius: 20px; + text-align: center; + background-color: #6060e7; + margin-bottom: 30px; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + ctx: '', + }, + onShow(){ + this.ctx = this.$refs.canvas.getContext("2d"); + this.ctx.fillStyle = "red" + this.ctx.fillRect(200, 150, 200, 200); + }, + save(){ + // Save the brush setting. + this.ctx.save(); + prompt.showToast({message:"save succeed"}); + }, + clear(){ + this.ctx.clearRect(0,0,600,500); + // Change the brush color. + this.ctx.fillStyle = "#2133d2"; + }, + restore(){ + this.ctx.beginPath(); + // Restore the brush setting. + this.ctx.restore(); + this.ctx.fillRect(200, 150, 200, 200); + }, +} +``` + +![en-us_image_0000001231683144](figures/en-us_image_0000001231683144.gif) diff --git a/en/application-dev/ui/ui-js-components-chart.md b/en/application-dev/ui/ui-js-components-chart.md new file mode 100644 index 0000000000000000000000000000000000000000..b300b2a1cb977b7253dadad41adbad9a29a320bf --- /dev/null +++ b/en/application-dev/ui/ui-js-components-chart.md @@ -0,0 +1,620 @@ +# <chart> Development + + +The **<chart>** component displays line charts, gauge charts, and bar charts. For details, see [chart](../reference/arkui-js/js-components-basic-chart.md). + + +## Creating a <chart> Component + +Create a **<chart>** component in the .hml file under **pages/index**. + + + +``` + +
+ +
+``` + + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.chart-data { + width: 700px; + height: 600px; +} +``` + + + +``` +/* xxx.js */ +export default { + data: { + lineData: [ + { + data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716] + } + ], + lineOps: { + xAxis: { + min: 0, + max: 20, + display: false, + }, + yAxis: { + min: 0, + max: 1000, + display: false, + }, + series: { + lineStyle: { + width: 15, + }, + } + }, + } +} +``` + + +![en-us_image_0000001231683156](figures/en-us_image_0000001231683156.png) + + +## Setting the Chart Type + +Define the chart type using the **type** attribute, for example, setting a chart to a bar chart. + + +``` + +
+
+
+ + {{ title }} + +
+ + + + + Line chart + Bar chart + Gauge chart + + +
+ + +
+
+ + +
+
+ +
+ + + + +
+
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + background-color: #F1F3F5; +} +.chart-data { + width: 700px; + height: 600px; +} +.title{ + margin-left: 50px; + margin-top: 50px; + font-size: 50px; +} +.line-block{ + align-items: center; + justify-content: center; +} +.bar-block{ + align-items: center; + justify-content: center; +} +.chart-block{ + width: 90%; + margin-left: 30px; +} +``` + + +``` +/* xxx.js */ +export default { + data: { + title:"Type display", + barData: [ + { + fillColor: '#3848e8', + data: [763, 550, 551, 554, 731, 654, 525, 696, 595], + } + ], + lineData: [ + { + strokeColor: '#0081ff', + fillColor: '#cce5ff', + data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], + gradient: true, + } + ], + lineOps: { + xAxis: { + min: 0, + max: 20, + display: false, + }, + yAxis: { + min: 0, + max: 1000, + display: false, + }, + series:{ + lineStyle: { + width: "5px", + smooth: true, + }, + headPoint: { + shape:"circle", + size: 20, + strokeWidth: 5, + fillColor: '#ffffff', + strokeColor: '#007aff', + display: true, + }, + loop:{ + margin: 2, + gradient: true + } + }, + }, + barOps: { + xAxis: { + min: 0, + max: 20, + display: false, + axisTick: 10, + }, + yAxis: { + min: 0, + max: 1000, + }, + }, + }, +} +``` + +![en-us_image_0000001275803181](figures/en-us_image_0000001275803181.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> The **<chart>** component does not display the value of each point. + + +## Setting the Chart Attributes + +In the **options** attribute of the **<chart>** component, you can set the x-axis, y-axis, and data series parameters. In the **datasets** attribute, you can set the line color, fill color, gradient fill color, and drawing point set. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.chart-data { + width: 700px; + height: 600px; +} +``` + + +``` +/* xxx.js */ +export default { + data: { + // Line chart data + lineData: [ + { + strokeColor: '#0081ff', + fillColor: '#cce5ff', // Fill color + data: [463, 250, 251, 254, 431, 354, 225, 396, 295, 328, 491, 205, 313, 275, 475, 553, 491, 380, 357, 416], + gradient: true, + } + ], + lineOps: { + // X-axis parameters + xAxis: { + min: 0, + max: 20, + display: false, + }, + // Y-axis parameters + yAxis: { + min: 0, + max: 1000, + display: false, + }, + // Data series parameters + series: { + // Line style + lineStyle: { + width: "5px", + smooth: true, + }, + // Style and size of the white point at the start of the line + headPoint: { + shape: "circle", + size: 20, + strokeWidth: 5, + fillColor: '#ffffff', + strokeColor: '#007aff', + display: true, + }, + // Whether to start drawing again when the screen is looped. + loop: { + margin: 2, + gradient: true + } + } + }, + }, +} +``` + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - The **options** attribute supports the settings of bar charts and line charts but does not support those of gauge charts. +> +> - The **datasets** attribute supports the datasets for bar charts and line charts but does not support those of gauge charts. +> +> - Only line charts support **series**. + + +## Adding Data + +Use the **append** method of the **<chart>** component to dynamically add data. + + +``` + +
+ + + + +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.chart-region { + height: 400px; + width: 700px; +} +.chart-data { + width: 700px; + height: 600px; +} +button { + width: 100%; + height: 50px; + background-color: #F4F2F1; + text-color: #0C81F3; + margin-top: 30px; +} +``` + + +``` +// xxx.js +export default { + data: { + lineData: [ + { + strokeColor: '#de0b6e', + fillColor: '#bb09a3', + data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], + gradient: true, + } + ], + lineOps: { + xAxis: { + min: 0, + max: 20, + display: false, + }, + yAxis: { + min: 0, + max: 1000, + display: false, + }, + series: { + lineStyle: { + width: "5px", + smooth: true, + }, + headPoint: { + shape: "circle", + size: 20, + strokeWidth: 5, + fillColor: '#ffffff', + strokeColor: '#f8145c', + display: true, + }, + loop: { + margin: 2, + gradient: true, + } + } + }, + }, + addData() { + this.$refs.linechart.append({ + serial: 0, + data: [Math.floor(Math.random() * 400) + 200] + }) + } +} +``` + +![en-us_image_0000001275803177](figures/en-us_image_0000001275803177.gif) + + +## Example Scenario + +Select the data display status using **<switch>**. When **<switch>** is set to **true**, the timer is used to dynamically display data. + + +``` + +
+
+
+ {{ title }} + + +
+ + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + + {{ $item.data }} + + + + + {{ $item.value }} + + +
+
+ + +
+
+``` + + +``` +/* xxx.css */ +.container{ + display:flex; + flex-direction:column; + background-color: #F1F3F5; +} +.line-class{ + display: flex; + flex-direction: column; +} +.title{ + font-size: 40px; + margin-left: 40px; +} +.switch-block { + margin-top: 30px; + width: 98%; + height: 80px; + display: flex; + justify-content: space-between; +} +.switch{ + font-size: 40px; +} +.bar-block { + margin-top: 80px; + margin-left: 40px; + position: relative; + width: 90%; + border-radius: 10px; + background-color: #25FAB27B; + height: 40%; + justify-content: center; +} +``` + + +``` +// xxx.js +export default { + data: { + interval: null, + title: "Data Display", + allowScale: true, + dataLength: 30, + barGroup: 3, + lineData: null, + lineOps: { + xAxis: { + min: 0, + max: 5 + }, + yAxis: { + min: 0, + max: 100 + }, + series: { + lineStyle: { + width: '1px', + }, + headPoint: { + shape: 'circle', + size: 10, + strokeWidth: 2, + fillColor: '#ffffff', + strokeColor: '#8477DF' + }, + loop: { + margin: 2 + } + } + }, + barData: [ + { + fillColor: '#97CF0A2C', + data: [20, 20,40, 56] + }, + { + fillColor: '#6D0A7ACF', + data: [52, 40, 2, 67] + }, + { + fillColor: '#6A0ACFA1', + data: [56, 2, 77, 40] + } + ], + barOps: { + xAxis: { + min: 0, + max: 20, + axisTick: 5 + }, + yAxis: { + min: 0, + max: 100 + } + } + }, + onInit() { + this.changeLine(); + }, + change(e) { + if (e.checked) { + this.interval = setInterval(() => { + this.changeLine(); + this.changeBar(); + }, 1000) + } else { + clearInterval(this.interval); + } + }, + changeLine() { + var dataArray = []; + for (var i = 0; i < this.dataLength; i++) { + var nowValue = Math.floor(Math.random() * 99 + 1); + var obj = { + "value": nowValue, + "description": nowValue + "", + "textLocation": "top", + "textColor": "#CDCACA", + "pointStyle": { + "shape": "circle", + "size": 5, + "fillColor": "#CF0A2C", + "strokeColor": "#CF0A2C" + } + }; + dataArray.push(obj); + } + this.lineData = [ + { + strokeColor: '#0081ff', + fillColor: '#FF07CDC4', + data: dataArray, + gradient: true, + } + ] + }, + changeBar() { + for (var i = 0;i < this.barGroup; i++) { + var dataArray = this.barData[i].data; + for (var j = 0;j < 4; j++) { + dataArray[j] = Math.floor(Math.random() * 99 + 1); + } + } + this.barData = this.barData.splice(0, this.barGroup + 1); + }, + changes(e) { + console.log("Tab index: " + e.index); + }, +} + +``` + +![en-us_image_0000001232162328](figures/en-us_image_0000001232162328.gif) diff --git a/en/application-dev/ui/ui-js-components-dialog.md b/en/application-dev/ui/ui-js-components-dialog.md index 0c5c1303dbaa51e7c2d3987788cded4d51be8906..4c7f982b9169be8d68220a471d9aa9ad393cfc7c 100644 --- a/en/application-dev/ui/ui-js-components-dialog.md +++ b/en/application-dev/ui/ui-js-components-dialog.md @@ -1,20 +1,21 @@ # <dialog> Development -The <dialog> component is custom pop-up container for showing critical information or calling for an action. For details, see [dialog](../reference/arkui-js/js-components-container-dialog.md). +The **<dialog>** component is custom pop-up container for showing critical information or calling for an action. For details, see [dialog](../reference/arkui-js/js-components-container-dialog.md). ## Creating a <dialog> Component - Create a <dialog> component in the .hml file under pages/index and add <button> components to trigger the <dialog>. The <dialog> component supports only the width, height, margin, margin-[left|top|right|bottom], and margin-[start|end] styles. + Create a **<dialog>** component in the .hml file under **pages/index** and add **<button>** components to trigger the **<dialog>**. The **<dialog>** component supports only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles. ```
-
+ +
this is a dialog
- +
``` @@ -23,6 +24,8 @@ The <dialog> component is custom pop-up container for showing critical inf ``` /* xxx.css */ .doc-page { + width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; @@ -67,7 +70,9 @@ export default { ## Setting Dialog Box Response -Add a cancel event that is triggered when a user touches a non-dialog area to cancel the pop-up dialog box. Add the show and close methods to display and close the dialog box, respectively. +Add a **cancel** event that is triggered when a user touches a non-dialog area to cancel the pop-up dialog box. Add the **show** and **close** methods to display and close the dialog box, respectively. + + ``` @@ -82,9 +87,13 @@ Add a cancel event that is triggered when a user touches a non-dialog area to ca
``` + + ``` /* xxx.css */ .doc-page { + width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; @@ -113,6 +122,8 @@ button{ } ``` + + ``` /* xxx.js */ import prompt from '@system.prompt'; @@ -133,18 +144,20 @@ export default { ![en-us_image_0000001223287720](figures/en-us_image_0000001223287720.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > - This component supports only one child component. > -> - Attributes and styles of a <dialog> component cannot be dynamically updated. +> - Attributes and styles of a **<dialog>** component cannot be dynamically updated. > -> - The <dialog> component does not support the focusable and click-effect attributes. +> - The **<dialog>** component does not support the **focusable** and **click-effect** attributes. ## Example Scenario -Use the <dialog> component to implement a schedule. When the dialog box is open, use the [<textarea>](../reference/arkui-js/js-components-basic-textarea.md) component to add an event and touch the OK button to obtain the current time and save the input text. The events in the calendar are displayed in a list. +Use the **<dialog>** component to implement a schedule. When the dialog box is open, use the [**<textarea>**](../reference/arkui-js/js-components-basic-textarea.md) component to add an event and touch the OK button to obtain the current time and save the input text. The events in the calendar are displayed in a list. + + ``` @@ -180,6 +193,8 @@ Use the <dialog> component to implement a schedule. When the dialog box is ``` + + ``` /* xxx.css */ .doc-page { @@ -248,6 +263,8 @@ Use the <dialog> component to implement a schedule. When the dialog box is } ``` + + ``` /* xxx.js */ var info = null; diff --git a/en/application-dev/ui/ui-js-components-form.md b/en/application-dev/ui/ui-js-components-form.md index 734d3dc510a597d08c5dda4d31e8c6d2b18436be..a4d3fa9c7015f240d57fdd2950a36530366d83c0 100644 --- a/en/application-dev/ui/ui-js-components-form.md +++ b/en/application-dev/ui/ui-js-components-form.md @@ -1,22 +1,22 @@ # <form> Development -The <form> component allows the content in [<input>](../reference/arkui-js/js-components-basic-input.md)components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md). +The <form> component allows the content in [<input>](../reference/arkui-js/js-components-basic-input.md) components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md). -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > This component is supported since API version 6. ## Creating a <form> Component - Create a <form> component in the .hml file under pages/index. + Create a **<form>** component in the .hml file under **pages/index**. ```
-
-
+
+
``` @@ -24,6 +24,8 @@ The <form> component allows the content in [<input>](../reference/ar ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -36,7 +38,7 @@ The <form> component allows the content in [<input>](../reference/ar ## Zooming In or Out on a Form - To implement the zoom effect after a form is clicked, add the click-effect attribute to the <form> component. For values of click-effect, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md). + To implement the zoom effect after a form is clicked, add the **click-effect** attribute to the **<form>** component. For values of **click-effect**, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md). ``` @@ -48,10 +50,23 @@ The <form> component allows the content in [<input>](../reference/ar ``` -## Setting the Form Style +## Setting Form Styles + + +Add the **background-color** and **border** attributes. + + + +``` + +
+
+ +
+
+``` -Add the background-color and border attributes. ``` /* xxx.css */ @@ -63,8 +78,7 @@ Add the background-color and border attributes. } .formClass{ width: 80%; - padding: 10px; - border: 1px solid #c3d3e7; + height: 20%; } ``` @@ -74,24 +88,24 @@ Add the background-color and border attributes. ## Adding Response Events - To submit or reset a form, add the submit and reset events. + To submit or reset a form, add the **submit** and **reset** events. ``` -
-
-
-
- - - - -
-
- - -
-
+
+ + +
+ + + + +
+
+ + +
+
``` @@ -122,7 +136,7 @@ export default{ Select an option and submit or reset the form data. -Create [<input>](../reference/arkui-js/js-components-basic-input.md) (en-us_topic_0000001173324647.xml) components, set their type attribute to checkbox and radio, and use the onsubmit and onreset events of the <form> component to submit and reset the form data. +Create [<input>](../reference/arkui-js/js-components-basic-input.md) components, set their **type** attribute to **checkbox** and **radio**, and use the **onsubmit** and **onreset** events of the **<form>** component to submit and reset the form data. ``` diff --git a/en/application-dev/ui/ui-js-components-image-animator.md b/en/application-dev/ui/ui-js-components-image-animator.md new file mode 100644 index 0000000000000000000000000000000000000000..8bfd56b70b3b23572eadf0bea1a2fbdc95f3ea55 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-image-animator.md @@ -0,0 +1,336 @@ +# <image-animator> Development + + +The **<image-animator>** component applies an animation to images. For details, see [image-animator](../reference/arkui-js/js-components-basic-image-animator.md). + + +## Creating an <image-animator> Component + +In the **pages/index** directory, create an **<image-animator>** component in the .hml file, define the component style in the .css file, and reference an image in the .js file. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.animator { + width: 500px; + height: 500px; +} +``` + + +``` +/* index.js */ +export default { + data: { + frames: [ + { + src: "/common/landscape1.jpg", + }, + { + src: "/common/landscape2.jpg", + } + ], + }, +}; +``` + +![en-us_image_0000001275922969](figures/en-us_image_0000001275922969.gif) + + +## Setting the <image-animator> Attributes + +Add the **iteration** (number of times the animation is played), **reverse** (whether the animation plays backward), **fixedsize** (whether the image size is fixed to the component size), **duration** (duration of the animation), and **fillmode** (style of the target when the animation is not playing) attributes. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + background-color: #F1F3F5; +} +.animator { + width: 500px; + height: 500px; +} +``` + + +``` +/* index.js */ +export default { + data: { + frames: [ + { + src: 'common/landscape1.jpg', + width: '250px', + height: '250px', + left: '150px', + top: '50px', + }, + { + src: 'common/landscape2.jpg', + width: '300px', + height: '300px', + left: '150px', + top: '100px', + }, + { + src: 'common/landscape1.jpg', + width: '350px', + height: '350px', + left: '150px', + top: '150px', + }, + { + src: 'common/landscape2.jpg', + width: '400px', + height: '400px', + left: '150px', + top: '200px', + }, + { + src: 'common/landscape3.jpg', + width: '450px', + height: '450px', + left: '150px', + top: '250px', + }, + { + src: 'common/landscape4.jpg', + width: '500px', + height: '500px', + left: '150px', + top: '300px', + }, + ], + }, +}; +``` + +![en-us_image_0000001276003481](figures/en-us_image_0000001276003481.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - If the **duration** attribute is set in the **images** attribute, the **duration** attribute set in the **<image-animator>** component is invalid. +> +> - If **fixedsize** is set to **true**, the **width**, **height**, **top**, and **left** settings in **images** will not take effect. +> +> - Setting **reverse** to **false** indicates that images are played from the first one to the last one. Setting **reverse** to **true** indicates that images are played from the last one to the first one. + + +## Binding Events + +Add the start, pause, stop, and resume events to the **<image-animator>** component. Specifically, the start event is triggered when the image animator starts playing; the pause event is triggered when the image animator is clicked; the resume event is triggered when the image animator is pressed and held; the stop event is triggered when the image animator stops playing. + + +``` + +
+ + +
+``` + + +``` +/* xxx.css */ +.doc-page { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +.img { + width: 600px; + height: 600px; + border: 3px solid orange; +} +``` + + +``` +/* index.js */ +import prompt from '@system.prompt'; +export default { + data: { + imginfo: [ + { + src: 'common/landscape1.jpg', + },{ + src: 'common/landscape2.jpg', + },{ + src: 'common/landscape3.jpg', + },{ + src: 'common/landscape4.jpg', + } + ], + }, + onInit() { + }, + setpause(e) { + this.$element('img').pause() + }, + setresume(e) { + this.$element('img').resume() + }, + popstart(e) { + prompt.showToast({ + message: 'Started.' + }) + }, + poppause(e) { + prompt.showToast({ + message: 'Paused.' + }) + }, + popstop(e) { + prompt.showToast({ + message: 'Stopped.' + }) + }, + popresume(e) { + prompt.showToast({ + message: 'Resumed.' + }) + } +} +``` + +![en-us_image_0000001231843076](figures/en-us_image_0000001231843076.gif) + + +## Example Scenario + +You can click the start or stop button to change the image animation status. + +Call the start, pause, stop, and resume methods to start, pause, stop, and resume the image animation, and call the **getState** method to check the image animation status. + + +``` + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+``` + + +``` +/* xxx.css */ +.doc-page { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +.img { + width: 600px; + height: 600px; + border: 3px solid orange; +} +button{ + width: 260px +} +.container { + width: 100%; + height: 120px; + align-items: center; + justify-content: space-around; +} +``` + + +``` +/* index.js */ +import prompt from '@system.prompt'; +export default { + data: { + rev:false, + imginfo: [ + { + src: 'common/landscape1.jpg', + },{ + src: 'common/landscape2.jpg', + },{ + src: 'common/landscape3.jpg', + },{ + src: 'common/landscape4.jpg', + } + ], + revVal:'Reverse' + }, + onInit() { + }, + startimg(e) { + this.$element('img').start() + }, + pauseimg(e) { + this.$element('img').pause() + }, + stopimg(e) { + this.$element('img').stop() + }, + resumeimg(e) { + this.$element('img').resume() + }, + getimgstate(e) { + prompt.showToast({ + message: 'Current state:' + this.$element('img').getState() + }) + }, + revimg(e) { + this.rev = !this.rev + if (this.rev) { + this.revVal ='Play Forward' + } else { + this.revVal ='Reverse' + } + } +} +``` + +![en-us_image_0000001276162717](figures/en-us_image_0000001276162717.gif) diff --git a/en/application-dev/ui/ui-js-components-images.md b/en/application-dev/ui/ui-js-components-images.md index 2efab79c2b112824278d8e2fda72fbbf5a847d85..cc817fc80044e4792ba74de79ccc24a4bd43bc2b 100644 --- a/en/application-dev/ui/ui-js-components-images.md +++ b/en/application-dev/ui/ui-js-components-images.md @@ -1,17 +1,17 @@ # <image> Development -The <image> component is used to render and display images. For details, see [image](../reference/arkui-js/js-components-basic-image.md). +The **<image>** component is used to render and display images. For details, see [image](../reference/arkui-js/js-components-basic-image.md). ## Creating an <image> Component - Create an <image> component in the .hml file under pages/index. + Create an **<image>** component in the .hml file under **pages/index**. ```
- +
``` @@ -19,6 +19,8 @@ The <image> component is used to render and display images. For details, s ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -31,7 +33,9 @@ The <image> component is used to render and display images. For details, s ## Setting the Image Style -Set the width, height, and object-fit attributes to define the width, height, and scale type of an image. +Set the **width**, **height**, and **object-fit** attributes to define the width, height, and scale type of an image. + + ``` @@ -40,31 +44,37 @@ Set the width, height, and object-fit attributes to define the width, height, an
``` + + ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; background-color:#F1F3F5; } image{ - width: 80%; height: 500px; + width: 80%; + height: 500px; border: 5px solid saddlebrown; border-radius: 20px; - object-fit: contain; + object-fit: contain; match-text-direction:true; } ``` + ![en-us_image_0000001222807796](figures/en-us_image_0000001222807796.png) ## Loading Images -When an image is successfully loaded, the complete event is triggered, and the loaded image is returned. If an exception occurs during image loading, the error event is triggered, and the image loading failure is printed. +When an image is successfully loaded, the **complete** event is triggered, and the loaded image is returned. If an exception occurs during image loading, the **error** event is triggered, and the image loading failure is printed. ``` @@ -83,6 +93,8 @@ When an image is successfully loaded, the complete event is triggered, and the l ``` /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-self: center; @@ -123,7 +135,7 @@ export default { ## Example Scenario - In this example you touch and hold an image to gradually hide it. After the image is completely hidden, it will show in its original setting. Set a setInterval timer to change the image opacity at a specified interval so that it is hidden gradually. When the opacity changes to 0, the timer is cleared and the opacity is set to 1. + In this example you touch and hold an image to gradually hide it. After the image is completely hidden, it will show in its original setting. Set a **setInterval** timer to change the image opacity at a specified interval so that it is hidden gradually. When the opacity changes to **0**, the timer is cleared and the opacity is set to **1**. ``` @@ -143,6 +155,8 @@ export default { ``` /* xxx.css */ .page-container { + width: 100%; + height: 100%; flex-direction:column; align-self: center; justify-content: center; diff --git a/en/application-dev/ui/ui-js-components-input.md b/en/application-dev/ui/ui-js-components-input.md index 559cca5401092490afd8ea1e841ae6d3b8809bba..854d40c6d26a2ad10ded8ca02cc9785079193bcf 100644 --- a/en/application-dev/ui/ui-js-components-input.md +++ b/en/application-dev/ui/ui-js-components-input.md @@ -1,18 +1,20 @@ -# Development +# <input> Development -The component provides an interactive way to receive user input of various types, including date, checkbox, and button. For details, see [input](../reference/arkui-js/js-components-basic-input.md). +The **<input>** component provides an interactive way to receive user input of various types, including **date**, **checkbox**, and **button**. For details, see [input](../reference/arkui-js/js-components-basic-input.md). -## Creating an Component +## Creating an <input> Component -Create an component in the .hml file under pages/index. +Create an **<input>** component in the .hml file under **pages/index**. ```
- Please enter the content + + Please enter the content +
``` @@ -20,6 +22,8 @@ Create an component in the .hml file under pages/index. ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -32,7 +36,7 @@ Create an component in the .hml file under pages/index. ## Setting the Input Type -Set the type attribute of the component to button, date, or any of the supported values. +Set the **type** attribute of the **<input>** component to **button**, **date**, or any of the supported values. ``` @@ -59,6 +63,8 @@ Set the type attribute of the component to button, date, or any of the s ``` /* xxx.css */ .container { + width: 100%; + height: 100%; align-items: center; flex-direction: column; justify-content: center; @@ -102,15 +108,15 @@ export default { ![en-us_image_0000001223287672](figures/en-us_image_0000001223287672.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> - For wearables, the input type can only be button, radio, or checkbox. +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - For wearables, the input type can only be **button**, **radio**, or **checkbox**. > -> - The settings of checked take effect only when the input type is set to checkbox or radio. The default value of checked is false. +> - The settings of **checked** take effect only when the input type is set to **checkbox** or **radio**. The default value of **checked** is **false**. ## Event Binding - Add the search and translate events to the component. + Add the **search** and **translate** events to the **<input>** component. ``` @@ -128,6 +134,7 @@ export default { /* xxx.css */ .content { width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; @@ -170,7 +177,7 @@ export default { ## Setting the Input Error Message -Add the showError method to the component to display an error message in the event of incorrect input. +Add the **showError** method to the **<input>** component to display an error message in the event of incorrect input. ``` @@ -187,6 +194,7 @@ Add the showError method to the component to display an error message in /* xxx.css */ .content { width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; @@ -219,9 +227,13 @@ import prompt from '@system.prompt' }, buttonClick(e){ if(this.value.length > 6){ - this.$element("input").showError({ error: 'Up to 6 characters are allowed.' }); + this.$element("input").showError({ + error: 'Up to 6 characters are allowed.' + }); }else if(this.value.length == 0){ - this.$element("input").showError({ error:this.value + 'This field cannot be left empty.' }); + this.$element("input").showError({ + error:this.value + 'This field cannot be left empty.' + }); }else{ prompt.showToast({ message: "success " @@ -233,14 +245,14 @@ import prompt from '@system.prompt' ![en-us_image_0000001223127708](figures/en-us_image_0000001223127708.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> - This method is available when the input type is set to text, email, date, time, number, or password. +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - This method is available when the input type is set to **text**, **email**, **date**, **time**, **number**, or **password**. ## Example Scenario -Enter information by using the component of the type that suits your needs. +Enter information by using the **<input>** component of the type that suits your needs. diff --git a/en/application-dev/ui/ui-js-components-list.md b/en/application-dev/ui/ui-js-components-list.md index c2a3150d366260d91dac7997690474f37cf3955e..147f117c0fca54b3004578396f0142cfdfcf8868 100644 --- a/en/application-dev/ui/ui-js-components-list.md +++ b/en/application-dev/ui/ui-js-components-list.md @@ -1,18 +1,18 @@ # <list> Development -The <list> component provides a list container that presents a series of list items arranged in a column with the same width. Lists can be used for presenting the same type of data in a multiple and coherent row style. For details, see [list](../reference/arkui-js/js-components-container-list.md). +The **<list>** component provides a list container that presents a series of list items arranged in a column with the same width. Lists can be used for presenting the same type of data in a multiple and coherent row style. For details, see [list](../reference/arkui-js/js-components-container-list.md). ## Creating a <list> Component -Create a <list> component in the .hml file under pages/index. +Create a **<list>** component in the .hml file under **pages/index**. ```
- + @@ -24,6 +24,8 @@ Create a <list> component in the .hml file under pages/index. ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; align-items: center; background-color: #F1F3F5; @@ -37,21 +39,21 @@ Create a <list> component in the .hml file under pages/index. ![en-us_image_0000001223287680](figures/en-us_image_0000001223287680.png) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> - <list-item-group> is a child component of the <list> component and is used to group items in a list. It can have a <list-item> nested inside, but not <list>. -> -> - <list-item> is a child component of the <list> component and is used to display items in a list. +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - **<list-item-group>** is a child component of the **<list>** component and is used to group items in a list. It can have a **<list-item>** nested inside, but not **<list>**. +> +> - **<list-item>** is a child component of the **<list>** component and is used to display items in a list. ## Adding a Scrollbar -To display a scrollbar on the right side of the screen, set scrollbar to on. The side scrollbar can be used to scroll a long list or the screen up or down. +To display a scrollbar on the right side of the screen, set **scrollbar** to **on**. The side scrollbar can be used to scroll a long list or the screen up or down. ```
- + @@ -66,6 +68,8 @@ To display a scrollbar on the right side of the screen, set scrollbar to on. The ``` /* index.css */ .container { + width: 100%; + height: 100%; flex-direction: column; background-color: #F1F3F5; } @@ -86,7 +90,7 @@ To display a scrollbar on the right side of the screen, set scrollbar to on. The ## Adding a Side Index Bar -Set a custom indexer component to add an index bar at the right boundary of a list. By default, an alphabetical indexer is used. +Set a custom **indexer** component to add an index bar at the right boundary of a list. By default, an alphabetical indexer is used. ``` @@ -114,15 +118,15 @@ Set a custom indexer component to add an index bar at the right boundary of a li ![en-us_image_0000001223127716](figures/en-us_image_0000001223127716.png) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> - This indexer attribute is valid only when flex-direction is set to column and columns is set to 1. -> -> - You must include "\#" when using a customized indexer. +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - This **indexer** attribute is valid only when **flex-direction** is set to **column** and **columns** is set to **1**. +> +> - You must include **"\#"** when using a customized indexer. ## Collapsing or Expanding a List -To allow a <list> component to collapse and expand, add groupcollapse and groupexpand events. +To allow a **<list>** component to collapse and expand, add **groupcollapse** and **groupexpand** events. ``` @@ -200,14 +204,16 @@ export default { ![en-us_image_0000001267887845](figures/en-us_image_0000001267887845.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> - The groupcollapse and groupexpand events can be used only by the list-item-group component. +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - The **groupcollapse** and **groupexpand** events can be used only by the **list-item-group** component. ## Example Scenario Search for contacts by using an alphabetical indexer. + + ```
@@ -219,7 +225,7 @@ Search for contacts by using an alphabetical indexer.
{{$item.name}} - 18888888888 + 18888888888
@@ -232,6 +238,8 @@ Search for contacts by using an alphabetical indexer.
``` + + ``` /* index.css */ .doc-page { @@ -251,7 +259,7 @@ Search for contacts by using an alphabetical indexer. color: #000000; font-size: 39px; } -.number { +.phone { color: black; font-size: 25px; } @@ -265,6 +273,8 @@ Search for contacts by using an alphabetical indexer. } ``` + + ``` // xxx.js export default { diff --git a/en/application-dev/ui/ui-js-components-marquee.md b/en/application-dev/ui/ui-js-components-marquee.md new file mode 100644 index 0000000000000000000000000000000000000000..0df6b4a2a04adced403a8bc61e6427fe7f369b48 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-marquee.md @@ -0,0 +1,238 @@ +# <marquee> Development + + +The **<marquee>** component displays single-line scrolling text. For details, see [marquee](../reference/arkui-js/js-components-basic-marquee.md). + + +## Creating a <marquee> Component + +Create a **<marquee>** component in the .hml file under **pages/index**. + + +``` + +
+ This is a marquee. +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + +![en-us_image_0000001231683172](figures/en-us_image_0000001231683172.png) + + +## Setting Attributes and Styles + +Set the **color** and **font-weight** attributes to define the color, font weight, and border style of marquee text. + + +``` + +
+ It's a racing lamp. +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.customMarquee { + width: 100%; + height: 80px; + padding: 10px; + margin: 20px; + border: 4px solid #6712f1; + border-radius: 20px; + font-size: 40px; + color: #ffffff; + font-weight: bolder; + font-family: serif; + background-color: #1567f3; +} +``` + +![en-us_image_0000001275803193](figures/en-us_image_0000001275803193.png) + +Set the **scrollamount**, **loop**, and **direction** attributes to define the maximum scroll length, number of scrolling times, and text scrolling direction. + + +``` + +
+
+ + It's a racing lamp + +
+
+ + +
+
+``` + + +``` +/* xxx.css */ +.tutorial-page { + width: 750px; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +.marqueetext { + color: #ffffff; + font-family: serif; + font-size: 37px; +} +.mymarquee { + margin-top: 20px; + width:100%; + height: 100px; + margin-left: 50px; + margin-right: 50px; + border: 1px solid #6712f1; + background-color: #1567f3; + border-radius: 15px; + align-items: center; +} +button{ + width: 200px; + height: 80px; + margin-top: 100px; +} +``` + + +``` +// xxx.js +export default { + private: { + loopval: -1, + scroll: 10, + isleft: "left", + }, + onInit(){ + }, + setleft(e) { + this.isleft = "left" + }, + setright(e) { + this.isleft = "right" + }, + makestart(e) { + this.$element('testmarquee').start() + } +} +``` + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> When the value of **loop** is less than or equal to 0, the marquee scrolls continuously. If **loop** is not set, the default value **-1** is used. + +![en-us_image_0000001276162773](figures/en-us_image_0000001276162773.gif) + + +## Example Scenario + +In this example, you can control the scrolling of marquee text. + +Set **loop** to **1**. When scrolling ends, trigger a **finish** event to increase the number of scrolling times by 1 and change the font color to a random color. Then, call the **start** method to start scrolling again. + + +``` + +
+
+ + It's a racing lamp + +
+
+ + +
+
+``` + + +``` +/* xxx.css */ +.tutorial-page { + width: 750px; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; +} +.marqueetext { + font-size: 37px; +} +.mymarquee { + margin-top: 20px; + width:100%; + height: 100px; + margin-left: 50px; + margin-right: 50px; + border: 1px solid #dc0f27; + border-radius: 15px; + align-items: center; +} +button{ + width: 200px; + height: 80px; + margin-top: 100px; +} +``` + + +``` +// xxx.js +export default { + private: { + loopval: 1, + scroll: 8, + color1: 'red' + }, + onInit(){ + }, + setfinish(e) { + this.loopval= this.loopval + 1, + this.r = Math.floor(Math.random()*255), + this.g = Math.floor(Math.random()*255), + this.b = Math.floor(Math.random()*255), + this.color1 = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)', + this.$element('testmarquee').start(), + this.loopval= this.loopval - 1 + }, + makestart(e) { + this.$element('testmarquee').start() + }, + makestop(e) { + this.$element('testmarquee').stop() + } +} +``` + +![en-us_image_0000001276003541](figures/en-us_image_0000001276003541.gif) diff --git a/en/application-dev/ui/ui-js-components-menu.md b/en/application-dev/ui/ui-js-components-menu.md new file mode 100644 index 0000000000000000000000000000000000000000..63c3763ac01a2247d5acb7359520fdc11e060a63 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-menu.md @@ -0,0 +1,280 @@ +# <menu> Development + + +The <menu> component serves as a temporary pop-up window to display operations that users can perform. For details, see [menu](../reference/arkui-js/js-components-basic-menu.md). + + +## Creating a <menu> Component + +Create a **<menu>** component in the .hml file under **pages/index** and add the **target**, **type**, and **title** attributes. + + +``` + +
+ show menu + + + + + +
+``` + + +``` +/* xxx.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; +} +.title-text{ + font-size: 35px; +} +``` + +![en-us_image_0000001232162284](figures/en-us_image_0000001232162284.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - The **<menu>** component supports only the [option](../reference/arkui-js/js-components-basic-option.md) child component. +> +> - The **<menu>** component does not support the **focusable** and **disabled** attributes. + + +## Setting Styles + +Set the style for the **<menu>** component, such as the font color, size, and character spacing. + + +``` + +
+ show menu + + + + + +
+``` + + +``` +/* xxx.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; +} +.title-text{ + font-size: 35px; + background-color: #5a5aee; + color: white; + width: 70%; + text-align: center; + height: 85px; + border-radius: 12px; +} +menu{ + text-color: blue; + font-size: 35px; + letter-spacing: 2px; +} +option{ + color: #6a6aef; + font-size: 30px; +} +``` + +![en-us_image_0000001275803137](figures/en-us_image_0000001275803137.gif) + + +## Binding Events + +Bind the **<menu>** component with the **onselected** event (triggered when a value in the menu is selected) and the **oncancel** event (triggered when an operation is canceled). Click the **<text>** component to call the **show** method to set the coordinates of the **<menu>** component. + + +``` + +
+ show menu + + + + + +
+``` + + +``` +/* xxx.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + background-color: #F1F3F5; + width: 100%; +} +.title-text{ + font-size: 35px; + background-color: #5a5aee; + color: white; + width: 70%; + text-align: center; + height: 85px; + border-radius: 12px; + margin-top: 500px; + margin-left: 15%; +} +menu{ + text-color: blue; + font-size: 35px; + letter-spacing: 2px; +} +option{ + color: #6a6aef; + font-size: 30px; +} +``` + + +``` +// index.js +import prompt from '@system.prompt'; +export default { + select(e) { + prompt.showToast({ + message: e.value + }) + }, + cancel(){ + prompt.showToast({ + message: "cancel" + }) + }, + textClick() { + this.$element("menuId").show({x:175,y:590}); + }, +} +``` + +![en-us_image_0000001276162713](figures/en-us_image_0000001276162713.gif) + + +## Example Scenario + +Click the **<toggle>** component to change the text color and select the **<menu>** component to change the size of the gradient color block. + + +``` + +
+
+ {{item.name}} +
+ width:{{width}},height:{{height}} +
+ change size + + + +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + width: 100%; + justify-content: center; + align-items: center; +} +.contentToggle{ + width: 100%; + justify-content: space-around; +} +.toggle{ + padding: 10px; + height:80px; + font-size: 35px; + width: 200px; + height: 85px; +} +.size{ + width: 100%; + height: 200px; + text-align: center; + font-size: 40px; + text-align: center; +} +.text{ + width: 300px; + height: 80px; + background-color: #615def; + color: white; + font-size: 35px; + text-align: center; + margin-top: 100px; +} +menu{ + text-color: blue; + font-size: 35px; + letter-spacing: 2px; +} +option{ + color: #6a6aef; + font-size: 30px; +} +``` + + +``` +// index.js +import prompt from '@system.prompt'; +export default { + data:{ + fresh: false, + width: 200, + height: 200, + color: '', + optionList:[ + {text:'200 x 200',value:2}, + {text:'300 x 300',value:3}, + {text:'500 x 500',value:5}, + ], + togglesList:[ + {name:"red", checked:false}, + {name:"blue", checked:false}, + {name: "black", checked:false}, + ], + }, + toggleClick(index){ + for(let i=0;i +
+ + +
+``` + + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +canvas{ + width: 600px; + height: 500px; + background-color: #fdfdfd; + border: 5px solid red; +} +select{ + margin-top: 50px; + width: 250px; + height: 100px; + background-color: white; +} +``` + + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + el: null, + ctx: null, + offscreen: null, + offCanvas: null, + img: null, + }, + onShow(){ + this.ctx = this.$refs.canvas1.getContext("2d"); + this.offscreen = new OffscreenCanvas(600, 500); + this.offCanvas = this.offscreen.getContext("2d"); + this.img = new Image(); + this.img.src = 'common/images/2.png'; + // Invoked when the image is successfully obtained. + let _this = this; + this.img.onload = function() { + _this.offCanvas.drawImage(_this.img, 100, 100, 400, 300); + }; + this.img.onerror = function() { + prompt.showToast({message:"error",duration:2000}) + }; + var bitmap = this.offscreen.transferToImageBitmap(); + this.ctx.transferFromImageBitmap(bitmap); + }, + change(e){ + this.offCanvas.filter = e.newValue; + this.offCanvas.drawImage(this.img, 100, 100, 400, 300); + var bitmap = this.offscreen.transferToImageBitmap(); + this.ctx.transferFromImageBitmap(bitmap); + }, +} +``` + + +![en-us_image_0000001232162292](figures/en-us_image_0000001232162292.gif) + + +## Determining the Position + +Use **isPointInPath** and **isPointInStroke** to determine and show whether a coordinate is within the path area and whether a coordinate is on the edge of the path. + + +``` + +
+
+ Coordinate: {{X}}, {{Y}} + In path:{{textValue}} + In stroke:{{textValue1}} +
+ + +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +canvas{ + width: 600px; + height: 500px; + background-color: #fdfdfd; + border: 5px solid red; +} +.content{ + flex-direction: column; + justify-content: center; + align-items: center; +} +text{ + font-size: 30px; + width: 300px; + height: 80px; + text-align: center; +} +button{ + width: 180px; + height: 75px; + margin-top: 50px; +} +``` + + +``` +// xxx.js +export default { + data: { + textValue: 0, + textValue1: 0, + X:0, + Y:250, + }, + onShow(){ + let canvas = this.$refs.canvas.getContext('2d'); + let offscreen = new OffscreenCanvas(500,500); + let offscreenCanvasCtx = offscreen.getContext("2d"); + let offscreenCanvasCtx1 = offscreen.getContext("2d"); + offscreenCanvasCtx1.arc(this.X, this.Y, 2, 0, 6.28); + offscreenCanvasCtx.lineWidth=20; + offscreenCanvasCtx.rect(200,150, 200, 200); + offscreenCanvasCtx.stroke(); + this.textValue1 = offscreenCanvasCtx.isPointInStroke(this.X, this.Y)?'true':'false'; + this.textValue = offscreenCanvasCtx.isPointInPath(this.X, this.Y)?'true':'false'; + let bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + }, + change(){ + if(this.X < 500){ + this.X = this.X+50; + }else{ + this.X = 0; + } + let canvas = this.$refs.canvas.getContext('2d'); + let offscreen = new OffscreenCanvas(500,500); + let offscreenCanvasCtx = offscreen.getContext("2d"); + let offscreenCanvasCtx1 = offscreen.getContext("2d"); + offscreenCanvasCtx1.arc(this.X, this.Y, 1, 0, 6.28) + offscreenCanvasCtx.lineWidth=20 + offscreenCanvasCtx.rect(200,150, 200, 200); + offscreenCanvasCtx.stroke(); + this.textValue1 = offscreenCanvasCtx.isPointInStroke(this.X, this.Y)?'true':'false'; + this.textValue = offscreenCanvasCtx.isPointInPath(this.X, this.Y)?'true':'false'; + let bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + } +} +``` + +![en-us_image_0000001276003489](figures/en-us_image_0000001276003489.gif) diff --git a/en/application-dev/ui/ui-js-components-path2d.md b/en/application-dev/ui/ui-js-components-path2d.md new file mode 100644 index 0000000000000000000000000000000000000000..d0ad0d06b482ed86376c10c53dff91c55a9901a3 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-path2d.md @@ -0,0 +1,194 @@ +# Path2D + +**<Path2D>** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**. For details, see [Path2D](../reference/arkui-js/js-components-canvas-path2d.md). + + +## Drawing Line Segments + +Create a **<Path2D>** object and use line segments to create different shapes. + + + +``` + +
+ +
+``` + + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; +} +canvas{ + width: 600px; + height: 600px; + background-color: #fdfdfd; + border: 5px solid red; +} +``` + + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + onShow(){ + let ctx = this.$refs.canvas.getContext('2d',{antialias: true}); + let path = ctx.createPath2D(); + // Roof + path.moveTo(10, 300); + path.lineTo(210,100); + path.lineTo(410, 300); + // House + path.moveTo(10, 300); + path.lineTo(410, 300); + path.lineTo(410, 600); + path.lineTo(10, 600); + path.closePath(); + // Window + path.moveTo(50, 450); + path.bezierCurveTo(70, 350, 130, 350, 150, 450); + path.closePath(); + // Door + path.moveTo(250, 450); + path.rect(250, 450, 350, 600); + path.closePath(); + // Chimney + path.moveTo(365, 250); + path.ellipse(310, 215, 30, 130,0, Math.PI * 0.04, Math.PI * 1.1, 1); + // Tree + path.moveTo(485, 450); + path.quadraticCurveTo(510, 500, 485, 600); + path.moveTo(550, 450); + path.quadraticCurveTo(525, 500, 550, 600); + path.moveTo(600, 535); + path.arc(520, 450, 85, 0, 6); + ctx.stroke(path); + }, +} +``` + + +![en-us_image_0000001232002968](figures/en-us_image_0000001232002968.png) + + +## Drawing Graphs + +Use **createPath2D** to create a path object and draw only **path1** so that only **path1** is displayed on the canvas. Click the **<text>** component to trigger the **addPath** method. The **path2** object is passed to **path1** as a parameter. After the **stroke** operation is performed on the **path1** object, **path1** and **path2** are displayed on the canvas. Click **Change** to change the value of **setTransform** to** setTransform(2, 0.1, 0.1, 2, 0,0)**. The graph is enlarged and tilted to the left. + + +``` + +
+ +
+ {{ isAdd }} + {{textName}} +
+
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; +} +canvas{ + width: 600px; + height: 600px; + background-color: #fdfdfd; + border: 5px solid red; +} +.content{ + width: 80%; + margin-top: 50px; + margin-bottom: 50px; + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} +text{ + width: 150px; + height: 80px; + color: white; + border-radius: 20px; + text-align: center; + background-color: #6060e7; + margin-bottom: 30px; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + ctx: null, + path1: null, + path2: null, + path3: null, + isAdd: "addPath2", + isChange: true, + textName: 'change' + }, + onShow(){ + this.ctx = this.$refs.canvas.getContext('2d',{antialias:true}); + this.path1 = this.ctx.createPath2D(); + this.path1.moveTo(200, 200); + this.path1.lineTo(400, 200); + this.path1.lineTo(400, 400); + this.path1.lineTo(200, 400); + this.path1.closePath(); + this.path2 = this.ctx.createPath2D(); + this.path2.arc(300, 300, 75, 0, 6.28) + this.ctx.stroke(this.path1); + }, + addPath(){ + if(this.isAdd == "addPath2"){ + this.ctx.clearRect(0,0,600,600) + this.ctx.beginPath(); + this.path2.addPath(this.path1) + this.ctx.stroke(this.path2); + this.isAdd = "clearPath2" + }else{ + this.ctx.clearRect(0,0,600,600) + this.ctx.stroke(this.path1); + this.isAdd = "addPath2" + } + }, + setTransform(){ + if(this.isChange){ + this.ctx.clearRect(0,0,600,600) + this.path3 = this.ctx.createPath2D(); + this.path3.arc(150, 150, 100, 0, 6.28) + this.path3.setTransform(2, 0.1, 0.1, 2, 0,0); + this.ctx.stroke(this.path3); + this.isChange = !this.isChange; + this.textName = "back" + }else{ + this.ctx.clearRect(0,0,600,600) + this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0,0); + this.ctx.stroke(this.path3); + this.isChange = !this.isChange; + this.textName = "change" + } + }, +} +``` + +![en-us_image_0000001231683112](figures/en-us_image_0000001231683112.gif) diff --git a/en/application-dev/ui/ui-js-components-picker.md b/en/application-dev/ui/ui-js-components-picker.md index a2e5ff4c52c17ce2d17b4638eebcebd68f9418bf..97c965d100a6a527855e1346dc94e69284795ead 100644 --- a/en/application-dev/ui/ui-js-components-picker.md +++ b/en/application-dev/ui/ui-js-components-picker.md @@ -1,18 +1,20 @@ # <picker> Development -The <picker> component supports common, date, time, data and time, and multi-column text selectors. For details, see [picker](../reference/arkui-js/js-components-basic-picker.md). +The **<picker>** component supports common, date, time, data and time, and multi-column text selectors. For details, see [picker](../reference/arkui-js/js-components-basic-picker.md). ## Creating a <picker> Component -Create a <picker> component in the .hml file under pages/index. +Create a **<picker>** component in the .hml file under **pages/index**. ```
- picker + + picker +
``` @@ -20,6 +22,8 @@ Create a <picker> component in the .hml file under pages/index. ``` /* index.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -32,7 +36,7 @@ Create a <picker> component in the .hml file under pages/index. ## Setting the Picker Type -Set the type attribute of the <picker> component. For example, set it to date. +Set the **type** attribute of the **<picker>** component. For example, set it to **date**. ``` @@ -47,6 +51,8 @@ Set the type attribute of the <picker> component. For example, set it to d ``` /* index.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -71,14 +77,15 @@ export default { ![en-us_image_0000001267647893](figures/en-us_image_0000001267647893.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> -> When setting the value range of a common selector, you must use the data binding mode. +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - When setting the value range of a common selector, you must use the data binding mode. +> +> - The **lunarswitch** attribute of the date selector is only supported on phones and tablets. ## Setting the Time Format -Set the hours attribute to specify the time format used by the time selector. Available values include 12 and 24, indicating the 12-hour format and 24-hour format, respectively. +Set the **hours** attribute to specify the time format used by the time selector. Available values include **12** and **24**, indicating the 12-hour format and 24-hour format, respectively. ``` @@ -93,6 +100,8 @@ Set the hours attribute to specify the time format used by the time selector. Av ``` /* index.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -107,15 +116,15 @@ Set the hours attribute to specify the time format used by the time selector. Av ![en-us_image_0000001222807808](figures/en-us_image_0000001222807808.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> - When hours is set to 12, the time is displayed in 12-hour format and distinguished by a.m. and p.m. -> -> - When hours is set to 24, the time is displayed in 24-hour format. +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - When **hours** is set to **12**, the time is displayed in 12-hour format and distinguished by a.m. and p.m. +> +> - When **hours** is set to **24**, the time is displayed in 24-hour format. ## Adding Response Events -To confirm and cancel selection, add change and cancel events. +To confirm and cancel selection, add **change** and **cancel** events. ``` @@ -130,6 +139,8 @@ To confirm and cancel selection, add change and cancel events. ``` /* index.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -170,7 +181,9 @@ export default { ## Example Scenario -Implement a health check-in application by using the <picker> component. +Implement a health check-in application by using the **<picker>** component. + + ``` @@ -202,6 +215,8 @@ Implement a health check-in application by using the <picker> component.
``` + + ``` /* index.css */ .doc-page { @@ -244,6 +259,8 @@ Implement a health check-in application by using the <picker> component. } ``` + + ``` // xxx.js import pmt from '@system.prompt' diff --git a/en/application-dev/ui/ui-js-components-qrcode.md b/en/application-dev/ui/ui-js-components-qrcode.md new file mode 100644 index 0000000000000000000000000000000000000000..e766c5843a32a0d3fe99e300d0d82a14b5818eb0 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-qrcode.md @@ -0,0 +1,170 @@ +# <qrcode> Development + + +The **<qrcode>** component is used to generate and display a QR code. For details, see [qrcode](../reference/arkui-js/js-components-basic-qrcode.md). + + +## Creating a <qrcode> Component + +Create a **<qrcode>** component in the .hml file under **pages/index**. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +``` + +![en-us_image_0000001275803133](figures/en-us_image_0000001275803133.png) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> The **value** parameter must be set. + + +## Setting the Component Type + +Set the **type** attribute to select the QR code type from rectangle and circle. + + +``` + +
+ + +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +select{ + margin-top: 50px; + margin-bottom: 50px; +} +``` + + +``` +// index.js +export default { + data: { + qr_type: 'rect', + bcol_list: ['rect','circle'] + }, + settype(e) { + this.qr_type = e.newValue + }, +} +``` + +![en-us_image_0000001275922965](figures/en-us_image_0000001275922965.gif) + + +## Setting Styles + +Set the **color** and **background-color** attributes to set the color and background color of a QR code. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +qrcode{ + width: 300px; + height: 300px; + color: blue; + background-color: #ffffff; +} +``` + +![en-us_image_0000001231683116](figures/en-us_image_0000001231683116.png) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - If the values of **width** and **height** are different, the smaller value is used as the length of the QR code. The generated QR code is center displayed. +> +> - If either **width** or **height** is set, the value is used as the length of the QR code. If neither of them is set, the default length of 200 px is used. +> + + +## Example Scenario + +In this example, you can bind a QR code to a text box, and change the QR code by replacing the content in the text box. + + +``` + +
+ + +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +qrcode{ + width: 400px; + height: 400px; +} +``` + + +``` +// index.js +export default{ + data: { + textVal: '' + }, + change(e){ + this.textVal = e.value + } +} +``` + +![en-us_image_0000001232002972](figures/en-us_image_0000001232002972.gif) diff --git a/en/application-dev/ui/ui-js-components-rating.md b/en/application-dev/ui/ui-js-components-rating.md new file mode 100644 index 0000000000000000000000000000000000000000..3986fd268b2eaae9cce51269720c78ac957c4d4b --- /dev/null +++ b/en/application-dev/ui/ui-js-components-rating.md @@ -0,0 +1,257 @@ +# <rating> Development + + +The **<rating>** component provides a rating bar used for reviews and ratings. For details, see [rating](../reference/arkui-js/js-components-basic-rating.md). + + +## Creating a <rating> Component + +Create a **<rating>** component in the .hml file under **pages/index**. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +rating { + width: 80%; + height: 150px; +} +``` + +![en-us_image_0000001231843116](figures/en-us_image_0000001231843116.gif) + + +## Setting the Rating Level + +Use the **<rating>** component to set the number of stars in a rating bar and the current rating using the **numstars** and **rating** attributes, respectively. + + +``` + +
+ + +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +rating { + width: 80%; + height: 150px; +} +``` + +![en-us_image_0000001232003012](figures/en-us_image_0000001232003012.gif) + + +## Setting the Rating Style + +Use the **<rating>** component to set the background images when a rating star is unselected, selected, and partially selected using the **star-background**, **star-foreground**, and **star-secondary** attributes, respectively. + + +``` + +
+
+ + +
+
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +``` + + +``` +/* index.js */ +export default { + data: { + backstar: 'common/love.png', + secstar: 'common/love.png', + forestar: 'common/love1.png', + ratewidth: '400px', + rateheight: '150px' + }, + onInit(){ + } +} +``` + +![en-us_image_0000001275803173](figures/en-us_image_0000001275803173.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - You must set **star-background**, **star-secondary**, and **star-foreground**. Otherwise, the grey rating star applies, indicating that the image source is incorrectly set. +> +> - The **star-background**, **star-secondary**, and **star-foreground** attributes support only PNG and JPG images in the local path. + + +## Binding Events + +Add the **change** event to the <rating> component to print the current rating. + + +``` + +
+ +
+``` + + +``` +.container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +rating { + width: 80%; + height: 150px; +} +``` + + +``` +import prompt from '@system.prompt'; +export default { + showrating(e) { + prompt.showToast({ + message:'Current Rating' + e.rating + }) + } +} +``` + +![en-us_image_0000001276003525](figures/en-us_image_0000001276003525.gif) + + +## Example Scenario + +Change the switch status to toggle between the star background images and drag the slider to adjust the rating values. + + +``` + +
+
+ +
+
+
+ Replacing a custom image + +
+
+ numstars {{stars}} + +
+
+ rating {{rate}} + +
+
+
+``` + + +``` +/* xxx.css */ +.myrating:active { + width: 500px; + height: 100px; +} +switch{ + font-size: 40px; +} +``` + + +``` +/* index.js */ +import prompt from '@system.prompt'; +export default { + data: { + backstar: '', + secstar: '', + forestar: '', + stars: 5, + ratewidth: '300px', + rateheight: '60px', + step: 0.5, + rate: 0 + }, + onInit(){ + }, + setstar(e) { + if (e.checked == true) { + this.backstar = 'common/love.png' + this.secstar = 'common/love.png' + this.forestar = 'common/love1.png' + } else { + this.backstar = '' + this.secstar = '' + this.forestar = '' + } + }, + setnumstars(e) { + this.stars = e.progress + this.ratewidth = 60 * parseInt(this.stars) + 'px' + }, + setstep(e) { + this.step = e.progress + }, + setrating(e){ + this.rate = e.progress + }, + showrating(e) { + prompt.showToast({ + message:'Current Rating' + e.rating + }) + } +} +``` + +![en-us_image_0000001275923005](figures/en-us_image_0000001275923005.gif) diff --git a/en/application-dev/ui/ui-js-components-search.md b/en/application-dev/ui/ui-js-components-search.md new file mode 100644 index 0000000000000000000000000000000000000000..853e692646d0dc45bfe69d3808ec95786b18ea7d --- /dev/null +++ b/en/application-dev/ui/ui-js-components-search.md @@ -0,0 +1,260 @@ +# <search> Development + + +The **<search>** component provides an input area for users to search. For details, see [search](../reference/arkui-js/js-components-basic-search.md). + + +## Creating a <search> Component + +Create a **<search>** component in the .hml file under **pages/index**. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +``` + +![en-us_image_0000001276003537](figures/en-us_image_0000001276003537.png) + + +## Setting Attributes + +Set the **hint**, **icon**, and **searchbutton** to define the hint text, icon, and search button at the end of the search box. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +``` + +![en-us_image_0000001275923017](figures/en-us_image_0000001275923017.png) + + +## Adding Styles + +Set **color**, **placeholder**, and **caret-color** to set the text color, hint text color, and cursor color of the search box. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +search{ + color: black; + placeholder-color: black; + caret-color: red; +} +``` + +![en-us_image_0000001232003020](figures/en-us_image_0000001232003020.gif) + + +## Binding Events + +Add the **change**, **search**, **submit**, **share**, and **translate** events to the **<search>** component to perform operations on the input information. + + +``` + +
+ + Enter text and then touch and hold what you've entered + + + +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +text{ + width: 100%; + font-size: 25px; + text-align: center; + margin-bottom: 100px; +} +``` + + +``` +// index.js +import prompt from '@system.prompt' +export default { + search(e){ + prompt.showToast({ + message: e.value, + duration: 3000, + }); + }, + translate(e){ + prompt.showToast({ + message: e.value, + duration: 3000, + }); + }, + share(e){ + prompt.showToast({ + message: e.value, + duration: 3000, + }); + }, + change(e){ + prompt.showToast({ + message: e.value, + duration: 3000, + }); + }, + submit(e){ + prompt.showToast({ + message: 'submit', + duration: 3000, + }); + } +} +``` + +![en-us_image_0000001231683164](figures/en-us_image_0000001231683164.gif) + + +## Example Scenario + +In this example, you can select the **<search>**, **<textarea>**, or **<input>** component from the drop-down list box to implement the respective function. + + +``` + +
+ +
+ + +
+
+ + +
+
+ + +
+
+``` + + +``` +/* xxx.css */ +.field { + width: 80%; + color: mediumaquamarine; + font-weight: 600; + placeholder-color: orangered; +} +.slt1{ + font-size: 50px; + position: absolute; + left: 50px; + top: 50px; +} +``` + + +``` +// index.js +import prompt from '@system.prompt'; +export default { + data: { + showsearch: true, + showtextarea: false, + showinput: false, + showsec: true, + }, + setfield(e) { + this.field = e.newValue + if (e.newValue == 'search') { + this.showsearch = true + this.showtextarea = false + this.showinput = false + } else if (e.newValue == 'textarea') { + this.showsearch = false + this.showtextarea = true + this.showinput = false + } else { + this.showsearch = false + this.showtextarea = false + this.showinput = true + } + }, + submit(e) { + prompt.showToast({ + message: 'Search!', + duration: 2000 + }) + }, + change(e) { + prompt.showToast({ + message: 'Content:'+ e.text, + duration: 2000 + }) + } +} +``` + +![en-us_image_0000001232003024](figures/en-us_image_0000001232003024.gif) diff --git a/en/application-dev/ui/ui-js-components-slider.md b/en/application-dev/ui/ui-js-components-slider.md new file mode 100644 index 0000000000000000000000000000000000000000..fad51ad23f82100d7078c659733c9bb07abad22a --- /dev/null +++ b/en/application-dev/ui/ui-js-components-slider.md @@ -0,0 +1,215 @@ +# <slider> Development + + +The **<slider>** component is used to quickly adjust settings, such as the volume and brightness. For details, see [slider](../reference/arkui-js/js-components-basic-slider.md). + + +## Creating a <slider> Component + +Create a **<slider>** component in the .hml file under **pages/index**. + + + +``` + +
+ +
+``` + + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + background-color: #F1F3F5; + flex-direction: column; + justify-content: center; + align-items: center; +} +``` + + +![en-us_image_0000001232162312](figures/en-us_image_0000001232162312.gif) + + +## Setting Styles and Attributes + +Use the **<slider>** component to set the background color, selected color, and slider color using the **color**, **selected-color**, and **block-color** attributes, respectively. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.sli{ + color: #fcfcfc; + scrollbar-color: aqua; + background-color: #b7e3f3; +} +``` + +![en-us_image_0000001232003000](figures/en-us_image_0000001232003000.gif) + +Add the **mix**, **max**, **value**, **step**, and **mode** attributes to set the minimum value, maximum value, initial value, step, and style of the slider. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + +![en-us_image_0000001276003517](figures/en-us_image_0000001276003517.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> Set the **mode** attribute to specify the slider style, which takes effect only on mobile phones and tablets. It can be set to: +> +> - **outset**: The slider is on the sliding bar. +> +> - **inset**: The slider is inside the sliding bar. + + +## Binding Events + +Add the **change** event to the **<rating>** component and pass the ChangeEvent attribute when adding the event. + + +``` + +
+ slider start value is {{startValue}} + slider current value is {{currentValue}} + slider end value is {{endValue}} + +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + + +``` +// xxx.js +export default { + data: { + value: 0, + startValue: 0, + currentValue: 0, + endValue: 0, + }, + setvalue(e) { + if (e.mode == "start") { + this.value = e.value; + this.startValue = e.value; + } else if (e.mode == "move") { + this.value = e.value; + this.currentValue = e.value; + } else if (e.mode == "end") { + this.value = e.value; + this.endValue = e.value; + } + } +} +``` + +![en-us_image_0000001275803169](figures/en-us_image_0000001275803169.gif) + + +## Example Scenario + +Adjust the value of the slider to change the image size and dynamically print the width and height of the current image. + + +``` + +
+ +
+ + The width of this picture is {{WidthVal}} + The height of this picture is {{HeightVal}} +
+
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.txt{ + flex-direction: column; + justify-content: center; + align-items: center; + position: fixed; + top: 65%; +} +text{ + margin-top: 30px; +} +``` + + +``` +// xxx.js +export default{ + data: { + value: 0, + WidthVal: 200, + HeightVal: 200 + }, + setvalue(e) { + this.WidthVal = 200 + e.value; + this.HeightVal = 200 + e.value + } +} +``` + +![en-us_image_0000001275922997](figures/en-us_image_0000001275922997.gif) diff --git a/en/application-dev/ui/ui-js-components-stepper.md b/en/application-dev/ui/ui-js-components-stepper.md index d9a13be87c74e1e602c5352f6f324cf5d08ed6ea..40fd14674c95de76bf063ff010264c6a19663e48 100644 --- a/en/application-dev/ui/ui-js-components-stepper.md +++ b/en/application-dev/ui/ui-js-components-stepper.md @@ -1,28 +1,28 @@ # <stepper> Development -When multiple steps are required to complete a task, you can use the <stepper> component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md). +When multiple steps are required to complete a task, you can use the **<stepper>** component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md). -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > This component is supported since API version 5. ## Creating a <stepper> Component -Create a <stepper> component in the .hml file under pages/index. +Create a **<stepper>** component in the .hml file under **pages/index**. ```
- + Step 1 Step 2 - +
``` @@ -30,6 +30,8 @@ Create a <stepper> component in the .hml file under pages/index. ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -47,7 +49,7 @@ text{ ## Setting the Index -Set index to the index value of the step that you want to display by default. +Set **index** to the index value of the step that you want to display by default. ``` @@ -71,6 +73,8 @@ Set index to the index value of the step that you want to display by default. ``` /* index.css */ .container { + width: 100%; + height: 100%; flex-direction: column; background-color:#F1F3F5; } @@ -83,7 +87,7 @@ text{ ![en-us_image_0000001267767837](figures/en-us_image_0000001267767837.gif) -Set the label attribute to customize the button text for the <stepper-item>. +Set the **label** attribute to customize the button text for the **<stepper-item>**. ``` @@ -110,6 +114,8 @@ Set the label attribute to customize the button text for the <stepper-item> ``` /* index.css */ .container { + width: 100%; + height: 100%; flex-direction: column; background-color:#F1F3F5; } @@ -125,7 +131,10 @@ text{ /* index.js */ export default { data: { - label_1:{ nextLabel: 'NEXT', status: 'normal' }, + label_1:{ + nextLabel: 'NEXT', + status: 'normal' + }, label_2:{ prevLabel: 'BACK', nextLabel: 'NEXT', @@ -143,9 +152,9 @@ export default { ![en-us_image_0000001267767841](figures/en-us_image_0000001267767841.gif) -## Setting the Style +## Setting Styles - By default, the <stepper> component fills entire space of its container. The sample code below shows how to set the border and background color using the border and background-color attributes. + By default, the **<stepper>** component fills entire space of its container. The sample code below shows how to set the border and background color using the **border** and **background-color** attributes. ``` @@ -164,6 +173,8 @@ export default { ``` /* index.css */ .container { + width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; @@ -174,7 +185,8 @@ export default { height: 300px; } .stepperClass{ - border:1px solid silver ; background-color: white; + border:1px solid silver; + background-color: white; } text{ width: 100%; @@ -188,12 +200,13 @@ text{ ## Adding Events -The <stepper> component supports the finish, change, next, back, and skip events. +The **<stepper>** component supports the **finish**, **change**, **next**, **back**, and **skip** events. -- When the change and next or back events exist at the same time, the next or back event is executed before the change event. +- When the **change** and **next** or **back** events exist at the same time, the **next** or **back** event is executed before the **change** event. -- Before resetting the index attribute, you must remove the current value. Otherwise, the value change cannot be detected. +- Before resetting the **index** attribute, you must remove the current value. Otherwise, the value change cannot be detected. + ```
@@ -219,6 +232,8 @@ The <stepper> component supports the finish, change, next, back, and skip ``` /* xxx.css */ .doc-page { + width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; @@ -339,6 +354,8 @@ Use the <stepper> component to navigate through the steps. Create a [<t ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; diff --git a/en/application-dev/ui/ui-js-components-svg-graphics.md b/en/application-dev/ui/ui-js-components-svg-graphics.md new file mode 100644 index 0000000000000000000000000000000000000000..c877843b9eae3428095c5f7ba4cf9eb370b3952e --- /dev/null +++ b/en/application-dev/ui/ui-js-components-svg-graphics.md @@ -0,0 +1,41 @@ +# Graph Drawing + + +The **<svg>** component can be used to draw simple shapes, such as rectangles, circles, and lines. For details about the supported shapes, see <svg>. + + +In this example, you can draw different shapes and stitch them to form a house graph. + + +``` + +
+ + // Rooftop + // Chimney + // Main body + + // Window + + // Window frame + // Window frame + // Door + // Doorknob + +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + +![en-us_image_0000001232162288](figures/en-us_image_0000001232162288.png) diff --git a/en/application-dev/ui/ui-js-components-svg-overview.md b/en/application-dev/ui/ui-js-components-svg-overview.md new file mode 100644 index 0000000000000000000000000000000000000000..cfe1a30c7344b141945da065f14775cc04cb60e0 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-svg-overview.md @@ -0,0 +1,83 @@ +# Basics + + +The **<svg>** component is used as the root node of the SVG canvas and can be nested in the SVG. For details, see [svg](../reference/arkui-js/js-components-svg.md). + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - The APIs of this component are supported since API version 7. +> +> - The width and height must be defined for the **<svg>** parent component or **<svg>** component. Otherwise, the component is not drawn. + + +## Creating an <svg> Component + +Create a **<svg>** component in the .hml file under **pages/index**. + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +svg{ + background-color: blue; +} +``` + +![en-us_image_0000001232162324](figures/en-us_image_0000001232162324.png) + + +## Setting Attributes + +Set the **width**, **height**, **x**, **y**, and **viewBox** attributes to define the width, height, X coordinate, Y coordinate, and SVG viewport of the **<svg>** component. + + +``` + +
+ + + + +
+``` + + +``` +/* xxx.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +svg{ + background-color: yellow; +} +.rect{ + background-color: red; +} +``` + +![en-us_image_0000001231683152](figures/en-us_image_0000001231683152.png) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - If the **<svg>** component is the root node, the X-axis and Y-axis attributes are invalid. +> +> - If the width and height of **viewBox** are inconsistent with those of the **<svg>** component, the view box will be scaled in center-aligned mode. diff --git a/en/application-dev/ui/ui-js-components-svg-path.md b/en/application-dev/ui/ui-js-components-svg-path.md new file mode 100644 index 0000000000000000000000000000000000000000..646fd7215e9daf06225aeda9f0339a8edb0d6551 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-svg-path.md @@ -0,0 +1,57 @@ +# Path Drawing + + +The **<svg>** component uses instructions **M** (start point), **H** (horizontal line), and **a** (drawing an arc to a specified position) to control a path and sets the fill colors to create a pie chart. + + + +``` + +
+ + + + + + +
+``` + + + +``` +/* xxx.css */ +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 1200px; + width: 600px; + background-color: #F1F3F5; +} +``` + + +![en-us_image_0000001232162340](figures/en-us_image_0000001232162340.png) + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - M/m = moveto The **x** and **y** parameters indicate the destination X and Y coordinates of a point. The **M** command only moves the brush, but does not draw a line between two points. Therefore, the **M** command is often used at the beginning of a path to indicate the start point. +> +> - L/l = lineto The **x** and **y** parameters indicate the X and Y coordinates of a point. The **L** command draws a line between the current position and the destination position (the previous point of the brush). +> +> - H/h = horizontal lineto Draws a horizontal line. +> +> - V/v = vertical lineto Draws a vertical line. +> +> - C/c = curveto Draws a cubic Bezier curve. Three groups of coordinate parameters are required: **x1 y1**, **x2 y2**, **x y**. +> +> - S/s = smooth curveto Draws a cubic Bezier curve. Two groups of coordinate parameters are required: **x2 y2**, **x y**. +> +> - Q/q = quadratic Belzier curve Draws a quadratic Bezier curve. Two groups of coordinate parameters are required: **x1 y1**, **x y**. +> +> - T/t = smooth quadratic Belzier curveto Draws a quadratic Bezier curve. One group of coordinate parameters are required: **x y**. +> +> - A/a = elliptical Arc Draw an arc. The following parameters are required: **rx ry x-axis-rotation** (rotation angle), **large-arc-flag** (angle), **sweep-flag** (arc direction), and **x y**. **large-arc-flag** determines whether the arc is less than 180 degrees. **0** indicates yes, and **1** indicates no. **sweep-flag** indicates the direction in which an arc is drawn. **0** indicates that the arc is drawn counterclockwise from the start point to the end point. **1** indicates that the arc is drawn clockwise from the start point to the end point. +> +> - Z/z = closepath Draws a straight line from the current point to the start point of the path. diff --git a/en/application-dev/ui/ui-js-components-svg-text.md b/en/application-dev/ui/ui-js-components-svg-text.md new file mode 100644 index 0000000000000000000000000000000000000000..782580e47ad75c0b28c1f233041fa95cdd8235c7 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-svg-text.md @@ -0,0 +1,54 @@ +# Text Drawing + + +The **<svg>** component can also be used to draw text. + + +## Text + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - The text content must be written in the **<text>** area. The **<tspan>** child element label can be nested. +> +> - **<text>** can be nested only by the parent element label **svg**. +> +> - Only the default font **sans-serif** is supported. + +Set the following attributes to define text styles: **x** (X coordinate), **y** (Y coordinate), **dx** (x-axis offset of the text), **dy** (y-axis offset of the text), **fill** (font fill color), **stroke** (text border color), and **stroke-width** (text border width). + + +``` + +
+ + Hello World + Hello World + + Hello World + + +
+``` + +![en-us_image_0000001275803145](figures/en-us_image_0000001275803145.png) + + +## Drawing Text Along the Path + +Set **textpath** to draw text along the path. + + +``` + +
+ + + + + This is textpath test. + + + +
+``` + +![en-us_image_0000001231843084](figures/en-us_image_0000001231843084.png) diff --git a/en/application-dev/ui/ui-js-components-swiper.md b/en/application-dev/ui/ui-js-components-swiper.md new file mode 100644 index 0000000000000000000000000000000000000000..64e34ada4fb38b19fb61471fcbfda22bce29451a --- /dev/null +++ b/en/application-dev/ui/ui-js-components-swiper.md @@ -0,0 +1,370 @@ +# <swiper> Development + + +The **<swiper>** component is a sliding container used to switch between child components. For details, see [swiper](../reference/arkui-js/js-components-container-swiper.md). + + +## Creating a <swiper> Component + +Create a **<swiper>** component in the .hml file under **pages/index**. + + + +``` + +
+ +
+ item1 +
+
+ item2 +
+
+ item3 +
+ +
+``` + + + +``` +/* xxx.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; +} +swiper{ + height: 30%; +} +.item{ + width: 100%; + height: 500px; +} +text{ + width: 100%; + height: 100%; + text-align: center; + font-size: 50px; + color: white; +} +``` + + +![en-us_image_0000001232003028](figures/en-us_image_0000001232003028.gif) + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> The **<swiper>** component supports child components except **<list>**. + + +## Adding Attributes + +When **loop** is set to **false**, the **autoplay** attribute is added to the **<swiper>** component and the autoplay interval (**interval**) is set. The component automatically switches between child components and stops at the last one. Add the **digital** attribute to enable the digital navigation point and set **scrolleffect** to **fade**. + + +``` + +
+ +
+ item1 +
+
+ item2 +
+
+ item3 +
+
+ item4 +
+ +
+``` + + +``` +/* xxx.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; +} +swiper{ + height: 30%; +} +.item{ + width: 100%; + height: 500px; +} +text{ + width: 100%; + height: 100%; + text-align: center; + font-size: 50px; + color: white; +} +``` + +![en-us_image_0000001275923021](figures/en-us_image_0000001275923021.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> - The **digital** attribute takes effect only when the **indicator** attribute is set to **true**. +> +> - The **loop** attribute takes effect only when there are two or more than two child components of the **<swiper>** component. +> +> - The **scrolleffect** attribute takes effect only when the **loop** attribute value is set to **false**. + + +## Setting Styles + +Set the width and height of the **<swiper>** component, the indicator's size (**indicator-size**), color (**indicator-color**), relative position (**indicator-top**), and color when it is selected (**indicator-selected-color**). + + +``` + +
+ +
+ item1 +
+
+ item2 +
+
+ item3 +
+ +
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; +} +swiper{ + width: 500px; + height: 500px; + border-radius: 250px; + indicator-color: white; + indicator-selected-color: blue; + indicator-size: 40px; + indicator-top: 100px; + overflow: hidden ; +} +.item{ + width: 100%; + height: 500px; +} +text{ + width: 100%; + text-align: center; + margin-top: 150px; + font-size: 50px; + color: white; +} +``` + +![en-us_image_0000001275803189](figures/en-us_image_0000001275803189.gif) + + +## Binding Events + +Create two **<text>** components and bind click events. Clicking the component will call **showPrevious** to display the previous child component or **showNext** to display the next child component. Add a **<select>** component. A **change** event is triggered when a user selects a value from the drop-down list box and the **swipeTo** method is called to go to the specified page. Bind the **<swiper>** component with the **change** event (triggered when the index of the currently displayed component changes) and the **finish** event (triggered when the switchover animation ends). + + +``` + +
+ +
+ item1 +
+
+ item2 +
+
+ item3 +
+
+ item4 +
+ +
+ + + +
+
+``` + + +``` +/* xxx.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; +} +swiper{ + height: 30%; +} +.item{ + width: 100%; + height: 500px; +} +text{ + width: 100%; + height: 100%; + text-align: center; + font-size: 50px; + color: white; +} +select{ + background-color: white; + width: 250px; + height: 80px; +} +.content{ + margin-top: 100px; + justify-content: space-around; +} +.pnbtn{ + width: 200px; + height: 80px; + font-size: 30px; +} +``` + + +``` +import prompt from '@system.prompt'; +export default{ + change(e){ + prompt.showToast({duration:2000,message:"current index:"+e.index}); + }, + finish(){ + prompt.showToast({duration:2000,message:"The switchover ends"}); + }, + selectChange(e){ + this.$element('swiper').swipeTo({index: Number(e.newValue)}); + }, + previous(){ + this.$element('swiper').showPrevious(); + }, + next(){ + this.$element('swiper').showNext(); + } +} +``` + +![en-us_image_0000001231843128](figures/en-us_image_0000001231843128.gif) + + +## Example Scenario + +Use the **<swiper>** component to create an image carousel and a thumbnail module at the bottom of the carousel. After a thumbnail is clicked, the **swipeTo** method is called to switch to the corresponding image. + + +``` + +
+ +
+ +
+ +
+
+ +
+
+
+``` + + +``` +/* xxx.css */ +.container{ + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; +} +swiper{ + width: 100%; + height: 500px; +} +.item{ + width: 100%; + height: 500px; +} +.content{ + margin-top: -120px; + width: 70%; + display: flex; + justify-content: space-around; + height: 100px; +} +.content_item{ + padding: 5px; + transform: scale(0.5); +} +.actived{ + transform: scale(1); + border: 1px solid #b20937ea; +} +``` + + +``` +// index.js +import prompt from '@system.prompt'; +export default { + data:{ + index: 0, + list:[ + {src: 'common/images/1.png'}, + {src: 'common/images/2.png'}, + {src: 'common/images/3.png'}, + {src: 'common/images/4.png'},] + }, + imageTo(index){ + this.index = index; + this.$element('swiper').swipeTo({index: index}); + }, + change(e){ + this.index = e.index; + } +} +``` + +![en-us_image_0000001231843132](figures/en-us_image_0000001231843132.gif) diff --git a/en/application-dev/ui/ui-js-components-switch.md b/en/application-dev/ui/ui-js-components-switch.md new file mode 100644 index 0000000000000000000000000000000000000000..4eeffd99b1bac376b5d8e6db2298ec9232003c70 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-switch.md @@ -0,0 +1,197 @@ +# <switch> Development + + +The **<switch>** component is used to switch between the on and off states. For details, see [switch](../reference/arkui-js/js-components-basic-switch.md). + + +## Creating a <switch> Component + +Create a **<switch>** component in the .hml file under **pages/index**. + + +``` +
+ +
+``` + + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + +![en-us_image_0000001231843096](figures/en-us_image_0000001231843096.png) + + +## Adding Attributes and Methods + + Use the **textoff** and **showtext** attributes to set the status when text is selected and unselected. Set the **checked** attribute to **true** (indicating that the component is on). Add the **change** event that is triggered when the component status changes. After the event is triggered, the **switchChange** function is executed to obtain the current component status (on or off). + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +switch{ + // Color of the selected text + texton-color: #002aff; + // Color of the unselected text +textoff-color: silver; + text-padding: 20px; + font-size: 50px; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + switchChange(e){ + if(e.checked){ + prompt.showToast({ + message: "open" + }); + }else{ + prompt.showToast({ + message: "close" + }); + } + } +} +``` + + +![en-us_image_0000001276003505](figures/en-us_image_0000001276003505.gif) + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> The text set by **texton** and **textoff** takes effect only when **showtext** is set to **true**. + + +## Example Scenario + +Turn on the switch and the default delivery address is used. When the switch is turned off, the address selection button is displayed on the page. Clicking the button can change the delivery address. + + Implementation method: Create a **<switch>** component, set the **checked** attribute to **true**, and change the delivery address through data binding. Set the **display** attribute (the default value is **none**). When the switch is turned off and the **display** attribute is set to **flex**, the address module is displayed and clicking the button can change the color. + +``` + +
+
+ Choose default address: + +
+
+ Shipping address:{{address}} +
+
+ Choose an address: + {{item}} +
+
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + background-color: #F1F3F5; + flex-direction: column; + padding: 50px; +} +.change{ + margin-top: 20%; + width: 100%; + justify-content: center; +} +switch{ + texton-color: #002aff; + textoff-color: silver; + text-padding: 20px; +} +.content{ + width: 70%; + text-align: center; + flex-direction: column; + border: 1px solid #002aff; + margin-left: 15%; + text-align: center; +} +.address{ + width: 100%; + height: 100px; + line-height: 100px; + text-align: center; + font-size: 28px; + margin-bottom: 50px; +} +.textSpan{ + color: #0aa9f1; +} +.myAddress{ + flex-direction: column; + margin-top: 50px; +} +.addressText{ + margin-left: 35%; + width: 30%; + height: 75px; + text-align: center; + color: white; + margin-bottom: 30px; + border-radius: 10px; + border: 1px solid #0fabe7; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + address: '', + addressDisplay: 'none', + addressList: ['family','company','commissary'], + }, + onInit(){ + // Initialize the default address to the first one in the address list. + this.address = this.addressList[0]; + }, + switchChange(e){ + if(e.checked){ + this.addressDisplay = "none"; + }else{ + this.addressDisplay = "flex"; + } + }, + changeAddress(i){ + this.address= this.addressList[i]; + } +} +``` + +![en-us_image_0000001231843100](figures/en-us_image_0000001231843100.gif) diff --git a/en/application-dev/ui/ui-js-components-text.md b/en/application-dev/ui/ui-js-components-text.md index 68fc3006a34b48456df5a99ebbbcf39fd338f5d4..803f74378334f49c13cb5ce431967f6dd3d05d23 100644 --- a/en/application-dev/ui/ui-js-components-text.md +++ b/en/application-dev/ui/ui-js-components-text.md @@ -1,18 +1,20 @@ # <text> Development -The <text> component is used to display a piece of textual information. For details, see [text](../reference/arkui-js/js-components-basic-text.md). +The **<text>** component is used to display a piece of textual information. For details, see [text](../reference/arkui-js/js-components-basic-text.md). ## Creating a <text> Component -Create a <text> component in the .hml file under pages/index. +Create a **<text>** component in the .hml file under **pages/index**. ```
- Hello World + + Hello World +
``` @@ -35,10 +37,9 @@ Create a <text> component in the .hml file under pages/index. ## Setting the Text Style and Attributes - Adding a text style + Set the color, font-size, allow-scale, word-spacing and text-align properties to add the color, size, zoom, text spacing, and vertical alignment of the text. - - Set the color, font-size, allow-scale, word-spacing, and text-valign attributes to apply the color, size, zoom, spacing, and vertical alignment styles to the text. - + ```
@@ -52,7 +53,6 @@ Create a <text> component in the .hml file under pages/index. ``` - ``` /* xxx.css */ .container { @@ -65,14 +65,13 @@ Create a <text> component in the .hml file under pages/index. } ``` + ![en-us_image_0000001222967764](figures/en-us_image_0000001222967764.png) - ![en-us_image_0000001222967764](figures/en-us_image_0000001222967764.png) - Adding a text modifier + Set the **text-decoration** and **text-decoration-color** attributes to add an underline, overline, line-through, or a combination of lines in the specified color to selected text. For values of **text-decoration**, see [Text Style](../reference/arkui-js/js-components-basic-text.md). - - Set the text-decoration attribute to add a line to selected text. Set the text-decoration-color attribute to apply specific color to the added line. For values of text-decoration, see [Text Style](../reference/arkui-js/js-components-basic-text.md). - + ```
@@ -85,6 +84,7 @@ Create a <text> component in the .hml file under pages/index.
``` + ``` /* xxx.css */ .container { @@ -99,14 +99,13 @@ Create a <text> component in the .hml file under pages/index. } ``` - ![en-us_image_0000001223287688](figures/en-us_image_0000001223287688.png) -- Hiding text content - - Set the text-overflow attribute to ellipsis so that overflowed text is displayed as an ellipsis. +- Hiding text content + Set the **text-overflow** attribute to **ellipsis** so that overflowed text is displayed as an ellipsis. + ```
@@ -116,6 +115,7 @@ Create a <text> component in the .hml file under pages/index.
``` + ``` /* xxx.css */ .container { @@ -129,25 +129,22 @@ Create a <text> component in the .hml file under pages/index. .text{ width: 200px; max-lines: 1; - text-overflow:ellipsis; + text-overflow:ellipsis; } ``` + > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** + > - **text-overflow** must be used together with **max-lines**. + > + > - **max-lines** indicates the maximum number of lines in the text. - > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: - > - text-overflow must be used together with max-lines. - > - > - max-lines indicates the maximum number of lines in the text. - - -![en-us_image_0000001267647865](figures/en-us_image_0000001267647865.png) + ![en-us_image_0000001267647865](figures/en-us_image_0000001267647865.png) - Setting the text line breaking mode + Set the **word-break** attribute to specify how to break lines of text. For values of **word-break**, see [Text Styles](../reference/arkui-js/js-components-basic-text.md). - - Set the word-break attribute to specify how to break lines of text. For values of word-break, see [Text Styles](../reference/arkui-js/js-components-basic-text.md). - + ```
@@ -162,6 +159,7 @@ Create a <text> component in the .hml file under pages/index.
``` + ``` /* xxx.css */ .container { @@ -188,66 +186,74 @@ Create a <text> component in the .hml file under pages/index. height: 200px; border:1px solid #0931e8; text-align: center; - word-break: break-all; + word-break: break-all; font-size: 40px; } ``` + ![en-us_image_0000001267767865](figures/en-us_image_0000001267767865.png) - ![en-us_image_0000001267767865](figures/en-us_image_0000001267767865.png) - -- Setting the [<span>](../reference/arkui-js/js-components-basic-span.md)child component -``` - -
- - This is a passage - - - This 1 is a 1 passage - -
-``` +- Setting the [<span>](../reference/arkui-js/js-components-basic-span.md) child component. + + ``` + +
+ + This is a passage + + + This + + 1 + + is a + + 1 + + passage + +
+ ``` + ![en-us_image_0000001223127720](figures/en-us_image_0000001223127720.png) -![en-us_image_0000001223127720](figures/en-us_image_0000001223127720.png) + > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** + > - When the **<span>** child component is used to form a text paragraph, incorrect **<span>** attribute settings (for example, setting of **font-weight** to **1000**) will result in abnormal display of the text paragraph. + > + > - When the **<span>** child component is being used, do not include any text you want to show in the **<text>** component, as such text will not be displayed if you do so. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> - When the <span> child component is used to form a text paragraph, incorrect <span> attribute settings (for example, setting of font-weight to 1000) will result in abnormal display of the text paragraph. -> -> - When the <span> child component is being used, do not include any text you want to show in the <text> component, as such text will not be displayed if you do so. +## Example Scenario +Use the **<text>** component to display text content through data binding. Use the **<span>** child component to hide or display text content by setting the **show** attribute. -## Example Scenario -Use the <text> component to display text content through data binding. Use the <span> child component to hide or display text content by setting the show attribute. - - - ``` - -
-
- - {{ content }} - - -
- - {{ content }} - - 1 - - Hide clip - -
- ``` +``` + +
+
+ + {{ content }} + + +
+ + {{ content }} + + 1 + + Hide clip + +
+``` ``` /* xxx.css */ .container { + width: 100%; + height: 100%; align-items: center; flex-direction: column; justify-content: center; @@ -266,7 +272,7 @@ Use the <text> component to display text content through data binding. Use // xxx.js export default { data: { - isShow:true, + isShow:true, content: 'Hello World' }, onInit(){ }, diff --git a/en/application-dev/ui/ui-js-components-toolbar.md b/en/application-dev/ui/ui-js-components-toolbar.md new file mode 100644 index 0000000000000000000000000000000000000000..90971232ef1cdbff23ff3517553649c3e49d652a --- /dev/null +++ b/en/application-dev/ui/ui-js-components-toolbar.md @@ -0,0 +1,229 @@ +# <toolbar> Development + + +The **<toolbar>** component shows actions available on the current screen and can be used for level-1 navigation. For details, see [toolbar](../reference/arkui-js/js-components-basic-toolbar.md). + + +## Creating a <toolbar> Component + +Create a **<toolbar>** component in the .hml file under **pages/index**. + + +``` + +
+ + + + +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +toolbar-item{ + font-size: 35px; +} +``` + +![en-us_image_0000001275922977](figures/en-us_image_0000001275922977.gif) + + +## Add Child Components + + The **<toolbar>** component supports only the **<toolbar-item>** child component and can display a maximum of five **<toolbar-item>** child components on a page. If there are six or more **<toolbar-item>** child components, the first four child components are retained, and the rest are moved to the **More** option on the toolbar and can be displayed on a pop-up window by clicking **More**. Under **More**, the child components are displayed in the default style; the custom style settings do not take effect. + +``` + +
+ + + + + + + + +
+``` + + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +toolbar-item{ + font-size: 35px; +} +``` + +![en-us_image_0000001232002988](figures/en-us_image_0000001232002988.gif) + + +## Setting Styles + +Set the **position** style for the **<toolbar>** component and set the font color, size, and background color of **<toolbar-item>** child components. + + + +``` + +
+ + + + + + +
+``` + + + +``` +/* xxx.css */ +.container { + background-color: #F1F3F5; + flex-direction: column; + width: 100%; + justify-content: center; + align-items: center; +} +toolbar-item{ + font-size: 35px; +} +.toolbarActive{ + color: red; + background-color: #daebef; +} +``` + + +![en-us_image_0000001275803149](figures/en-us_image_0000001275803149.png) + + +## Binding Events + +Bind the click event and long press event to the **<toolbar-item>** child components, so that the text of these components turns red upon click and turns blue upon long press. + + +``` + +
+ + + + + +
+``` + + +``` +/* xxx.css */ +.container { + background-color: #F1F3F5; + flex-direction: column; + width: 100%; + justify-content: center; + align-items: center; +} +toolbar-item{ + font-size: 35px; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + itemColor:'black' + }, + itemClick(){ + this.itemColor= "red"; + prompt.showToast({duration:2000,message:'item click'}); + }, + itemLongPress(){ + prompt.showToast({duration:2000,message:'item long press'}); + this.itemColor= "blue"; + }, +} +``` + +![en-us_image_0000001275803153](figures/en-us_image_0000001275803153.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> The **<toolbar>** component does not allow adding of events or methods, but its child components do. + + +## Example Scenario + +In this example, you'll implement a **<toolbar-item>** component, clicking which will trigger a change in the text color and the image corresponding to the component. + + Use the **for** loop to create a **<toolbar-item>** component and bind a click event to it, so that clicking the component will obtain and store an index value. When setting the text color, the system checks whether the current index value is the stored value. If yes, the system sets the color to red. If no, the system uses the default color. + +``` + +
+ + + + +
+``` + + +``` +/* xxx.css */ +.container { + background-color: #F1F3F5; + flex-direction: column; + width: 100%; + justify-content: center; + align-items: center; +} +toolbar-item{ + font-size: 35px; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data:{ + active: 0, + imgList:["common/images/1.png","common/images/2.png","common/images/3.png","common/images/4.png"], + itemList:[ + {option:'item1',icon:'common/images/1.png'}, + {option:'item2',icon:'common/images/2.png'}, + {option:'item3',icon:'common/images/3.png'}, + {option:'item4',icon:'common/images/4.png'}, + ] + }, + itemClick(id){ + this.active= id; + }, +} +``` + +![en-us_image_0000001231683128](figures/en-us_image_0000001231683128.gif) diff --git a/en/application-dev/website.md b/en/application-dev/website.md index e97390bb7ab5fc22ed59ba97ce3fd47f650b4ca2..326e05590cfed95b28c6f0fdee384617b9961063 100644 --- a/en/application-dev/website.md +++ b/en/application-dev/website.md @@ -51,28 +51,49 @@ - [Defining Page Routes](ui/ui-js-building-ui-routes.md) - Common Component Development Guidelines - Container Components - - [List](ui/ui-js-components-list.md) - - [Dialog](ui/ui-js-components-dialog.md) - - [Form](ui/ui-js-components-form.md) - - [Stepper](ui/ui-js-components-stepper.md) - - [Tabs](ui/ui-js-component-tabs.md) + - [<list> Development](ui/ui-js-components-list.md) + - [<dialog> Development](ui/ui-js-components-dialog.md) + - [<form> Development](ui/ui-js-components-form.md) + - [<stepper> Development](ui/ui-js-components-stepper.md) + - [<tabs> Development](ui/ui-js-component-tabs.md) + - [<swiper> Development](ui/ui-js-components-swiper.md) - Basic Components - - [Text](ui/ui-js-components-text.md) - - [Input](ui/ui-js-components-input.md) - - [Button](ui/ui-js-components-button.md) - - [Picker](ui/ui-js-components-picker.md) - - [Image](ui/ui-js-components-images.md) + - [<text> Development](ui/ui-js-components-text.md) + - [<input> Development](ui/ui-js-components-input.md) + - [<button> Development](ui/ui-js-components-button.md) + - [<picker> Development](ui/ui-js-components-picker.md) + - [<image> Development](ui/ui-js-components-images.md) + - [<image-animator> Development](ui/ui-js-components-image-animator.md) + - [<rating> Development](ui/ui-js-components-rating.md) + - [<slider> Development](ui/ui-js-components-slider.md) + - [<chart> Development](ui/ui-js-components-chart.md) + - [<switch> Development](ui/ui-js-components-switch.md) + - [<toolbar> Development](ui/ui-js-components-toolbar.md) + - [<menu> Development](ui/ui-js-components-menu.md) + - [<marquee> Development](ui/ui-js-components-marquee.md) + - [<qrcode> Development](ui/ui-js-components-qrcode.md) + - [<search> Development](ui/ui-js-components-search.md) + - <canvas> Development + - [CanvasRenderingContext2D](ui/ui-js-components-canvasrenderingcontext2d.md) + - [Path2D](ui/ui-js-components-path2d.md) + - [OffscreenCanvas](ui/ui-js-components-offscreencanvas.md) + - [<grid-container> Development](ui/ui-js-components-calendar.md) + - Svg + - [Basics](ui/ui-js-components-svg-overview.md) + - [Graph Drawing](ui/ui-js-components-svg-graphics.md) + - [Path Drawing](ui/ui-js-components-svg-path.md) + - [Text Drawing](ui/ui-js-components-svg-text.md) - Animation Development Guidelines - - CSS Animation - - [Defining Attribute Style Animations](ui/ui-js-animate-attribute-style.md) - - [Defining Animations with the transform Attribute](ui/ui-js-animate-transform.md) - - [Defining Animations with the background-position Attribute](ui/ui-js-animate-background-position-style.md) - - [Defining Animations for SVG Components](ui/ui-js-animate-svg.md) - - JS Animation - - [Component Animation](ui/ui-js-animate-component.md) - - Interpolator Animation - - [Animation Effect](ui/ui-js-animate-dynamic-effects.md) - - [Animation Frame](ui/ui-js-animate-frame.md) + - CSS Animation + - [Defining Attribute Style Animations](ui/ui-js-animate-attribute-style.md) + - [Defining Animations with the transform Attribute](ui/ui-js-animate-transform.md) + - [Defining Animations with the background-position Attribute](ui/ui-js-animate-background-position-style.md) + - [Defining Animations for SVG Components](ui/ui-js-animate-svg.md) + - JS Animation + - [Component Animation](ui/ui-js-animate-component.md) + - Interpolator Animation + - [Animation Effect](ui/ui-js-animate-dynamic-effects.md) + - [Animation Frame](ui/ui-js-animate-frame.md) - [Custom Components](ui/ui-js-custom-components.md) - TypeScript-based Declarative Development Paradigm - [Overview](ui/ui-ts-overview.md) @@ -128,6 +149,13 @@ - [Custom Component Lifecycle Callbacks](ui/ts-custom-component-lifecycle-callbacks.md) - [Example: Component Creation and Re-Initialization](ui/ts-component-creation-re-initialization.md) - [Syntactic Sugar](ui/ts-syntactic-sugar.md) + - Common Component Development Guidelines + - [Button](ui/ui-ts-basic-components-button.md) + - [Web](ui/ui-ts-components-web.md) + - Common Layout Development Guidelines + - [Flex Layout](ui/ui-ts-layout-flex.md) + - [Grid Layout](ui/ui-ts-layout-grid-container.md) + - [Media Query](ui/ui-ts-layout-mediaquery.md) - Experiencing the Declarative UI - [Creating a Declarative UI Project](ui/ui-ts-creating-project.md) - [Getting to Know Components](ui/ui-ts-components.md)