diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001175668970.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001175668970.gif
new file mode 100644
index 0000000000000000000000000000000000000000..13c21f4cbd450e5670bfeaf1041826fe3cc07f06
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001175668970.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001175828962.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001175828962.gif
new file mode 100644
index 0000000000000000000000000000000000000000..055306a94ef57366ca817f56f39034160ef9db7b
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001175828962.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001176072876.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001176072876.gif
new file mode 100644
index 0000000000000000000000000000000000000000..91d6134b97b6e9073540ee7b06ecf6e31952c9b5
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001176072876.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001176075554.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001176075554.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7d8da86f2f1cf71ca9bc5d6cb65564bb64ae5fd1
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001176075554.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001176551446.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001176551446.gif
new file mode 100644
index 0000000000000000000000000000000000000000..439eea01e278280086248901e4ac51923d5e4979
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001176551446.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177466006.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177466006.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6c67ff8bc8394cddb79b5ac4d1b2c130ae6a6bb8
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177466006.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177623482.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177623482.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a5d725eba5254e9a489204bf2a7c06170aa3a2e
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177623482.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177624696.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177624696.gif
new file mode 100644
index 0000000000000000000000000000000000000000..cfe44e409c1ddf0f7a70b59367a7885033a2b42f
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177624696.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177784684.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177784684.gif
new file mode 100644
index 0000000000000000000000000000000000000000..8e64d09f33bcbba8117775ea6f5946cc4556d0c3
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177784684.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177930616.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177930616.png
new file mode 100644
index 0000000000000000000000000000000000000000..b9c766a3189861fae9fbcf07f5912bef0d8562c8
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001177930616.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001178084014.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001178084014.gif
new file mode 100644
index 0000000000000000000000000000000000000000..0554bd02b6ce8c1d835a3cde3bf2427d8dd15bda
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001178084014.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001178685854.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001178685854.gif
new file mode 100644
index 0000000000000000000000000000000000000000..abec4486ad5f444b32aa20b88a3a6d1975254cd0
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001178685854.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001179018876.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001179018876.gif
new file mode 100644
index 0000000000000000000000000000000000000000..657deee8108d1f2c7325079f82d8ce6a1ba8d9fd
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001179018876.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001179438692.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001179438692.gif
new file mode 100644
index 0000000000000000000000000000000000000000..407541949a9a7d9308ca61be4dfc2ecf91709d49
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001179438692.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181337170.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181337170.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c80d86b0508ad15cd944314d0a2b3b59dcd9bcd6
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181337170.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181354262.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181354262.png
new file mode 100644
index 0000000000000000000000000000000000000000..bd0b2b46d44aced7d075ba36196aa02c43b362c3
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181354262.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181495038.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181495038.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7293aff8d5971a6b026c751570eefbca029bb06b
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181495038.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181495744.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181495744.gif
new file mode 100644
index 0000000000000000000000000000000000000000..531e20ab79714795da80341f363a71f5c426f034
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181495744.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181511962.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181511962.png
new file mode 100644
index 0000000000000000000000000000000000000000..86187142668379cc81fcc9f163e3218a078cc8cc
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181511962.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181655292.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181655292.gif
new file mode 100644
index 0000000000000000000000000000000000000000..5813dfac315791a87d9bd9c70a9587e6b779614c
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181655292.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181823160.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181823160.gif
new file mode 100644
index 0000000000000000000000000000000000000000..5d4ed8967a4f4d4d163c560536ee537feddef49a
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181823160.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181974568.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181974568.png
new file mode 100644
index 0000000000000000000000000000000000000000..8df470cc4c0e146972977c1b7dadecc8cbc67838
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001181974568.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001182187434.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001182187434.gif
new file mode 100644
index 0000000000000000000000000000000000000000..493671394dab89f4cc73fd185cc46554c2a47528
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001182187434.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001182832088.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001182832088.gif
new file mode 100644
index 0000000000000000000000000000000000000000..53a8a2063ae440915a9b1710d9b184c470f26010
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001182832088.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183283966.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183283966.gif
new file mode 100644
index 0000000000000000000000000000000000000000..a15bd8be601142e45dc3d3656eb448cdf4130c23
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183283966.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183431656.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183431656.gif
new file mode 100644
index 0000000000000000000000000000000000000000..01bd2adcd322dd5e19811c43e7512eac4ff72ca4
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183431656.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183438596.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183438596.png
new file mode 100644
index 0000000000000000000000000000000000000000..08f11bc53e9a0e6430b06ae77fde645585ee711b
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183438596.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183595750.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183595750.png
new file mode 100644
index 0000000000000000000000000000000000000000..11dac18df74e1fd4d09adc43bb264253294df23f
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183595750.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183871404.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183871404.gif
new file mode 100644
index 0000000000000000000000000000000000000000..92bac3bec6a14037b71c86d76d4d87ac3a40171a
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183871404.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218278612.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218278612.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ea5aa768532ea01f6828bd6bf211c4c2fe1e0d22
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218278612.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218279254.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218279254.png
new file mode 100644
index 0000000000000000000000000000000000000000..5a0fa14321998b5fc33b0965dcc0ca0ae315dd09
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218279254.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218279600.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218279600.gif
new file mode 100644
index 0000000000000000000000000000000000000000..b5bce1b8e09e0c47231c11250c6d676806bcd53c
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218279600.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218280036.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218280036.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b3260b58addc8949c1ed409fb183ac91f986ebf
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218280036.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218439306.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218439306.gif
new file mode 100644
index 0000000000000000000000000000000000000000..fec6caa122160183c3cc049e803710301fd63d9f
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218439306.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218439850.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218439850.gif
new file mode 100644
index 0000000000000000000000000000000000000000..0c3c7fccb059ad03b084728307963082dc6f8365
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218439850.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218598678.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218598678.gif
new file mode 100644
index 0000000000000000000000000000000000000000..5198c5a81cf4427f1014489336d730d846e15f9d
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218598678.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218599708.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218599708.gif
new file mode 100644
index 0000000000000000000000000000000000000000..3b5681fe5f430af62ef6d94b37bf6cc5a2a2ee58
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218599708.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218599996.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218599996.png
new file mode 100644
index 0000000000000000000000000000000000000000..acdf7a05ea58d00687571fbcb496372b64ab1c87
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218599996.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218758816.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218758816.gif
new file mode 100644
index 0000000000000000000000000000000000000000..24c118c92cbb57a2899ff1831136ce99fcca1989
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218758816.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218760480.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218760480.png
new file mode 100644
index 0000000000000000000000000000000000000000..1898cb7e3d137e02211afb6425147bc4754600d5
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218760480.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001220830223.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001220830223.gif
new file mode 100644
index 0000000000000000000000000000000000000000..88c62f08669f2ec3533db708d49d18a069501644
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001220830223.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001221030133.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001221030133.gif
new file mode 100644
index 0000000000000000000000000000000000000000..1b6a6d7cce2951696d624ea3cf645570231bc0d7
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001221030133.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001221913395.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001221913395.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c310e7cfd714246b95eab7f030c33490bef98d86
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001221913395.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001222984605.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001222984605.png
new file mode 100644
index 0000000000000000000000000000000000000000..03a4a72905b6e852a00cdbbe17918cdeda28e5bf
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001222984605.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001222985331.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001222985331.gif
new file mode 100644
index 0000000000000000000000000000000000000000..d93306857a1ce4a304bc83a664ee270105f39017
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001222985331.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001222985801.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001222985801.gif
new file mode 100644
index 0000000000000000000000000000000000000000..353e2ffb9a84cba7616291730c7c0c670adc2b13
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001222985801.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001223064173.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001223064173.gif
new file mode 100644
index 0000000000000000000000000000000000000000..d8f8221489fd409670bfa9b3d0694a54552d5cbd
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001223064173.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001223064401.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001223064401.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ac5857ad2e4888bfda20044fb84dbd100ed68d5b
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001223064401.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001224086459.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001224086459.gif
new file mode 100644
index 0000000000000000000000000000000000000000..8158121587531a6ab754316d6379c016be803128
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001224086459.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226815299.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226815299.gif
new file mode 100644
index 0000000000000000000000000000000000000000..8b0e1d5a97c59fb1b0b1b243d5b0a30f1b8824e2
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226815299.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226815403.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226815403.gif
new file mode 100644
index 0000000000000000000000000000000000000000..28b2a163673a71e95a40284d2b045005594623e6
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226815403.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226896657.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226896657.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ab6d5e3bde1e3218eaa1156137c7fd6ffc298882
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226896657.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226897009.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226897009.png
new file mode 100644
index 0000000000000000000000000000000000000000..a018ed2562de8d5f23c7422f451b763086a72390
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226897009.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226911459.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226911459.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4d117430d11520fdcbe3cd1343182a7f169c7fe
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001226911459.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227016767.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227016767.gif
new file mode 100644
index 0000000000000000000000000000000000000000..f6469e9e80464270e28bc6c682ff3e9bf8420a5f
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227016767.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227135613.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227135613.gif
new file mode 100644
index 0000000000000000000000000000000000000000..f7f05ac39da2bd2f04a7257e1c36eb87ad811783
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227135613.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227135731.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227135731.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4301a19383a2abbfb7038275e59adc901046307
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227135731.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227151887.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227151887.png
new file mode 100644
index 0000000000000000000000000000000000000000..45a96cb24680a3cf2cdd91d315314822701c4176
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227151887.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227416205.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227416205.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5db8f42d350aa79613ac657db2630d0d60d3d3c
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227416205.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227422709.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227422709.gif
new file mode 100644
index 0000000000000000000000000000000000000000..260966e4fe59e4e6f80b501251f478bbb7126dce
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227422709.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227423251.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227423251.gif
new file mode 100644
index 0000000000000000000000000000000000000000..75e951f9c583c0c268584358e90bac0042554d8c
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227423251.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227661529.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227661529.gif
new file mode 100644
index 0000000000000000000000000000000000000000..9983db70e3477057acdcbbdaba56dea290f6a303
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227661529.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227694473.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227694473.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c1dc425e1a607a846d3884a9118387accb031a4
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227694473.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227701031.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227701031.gif
new file mode 100644
index 0000000000000000000000000000000000000000..d6a46140a41a112790210c58502fbc3df6e65f20
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227701031.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227701867.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227701867.gif
new file mode 100644
index 0000000000000000000000000000000000000000..9e313e1e87059572aa036b06881381da7b070641
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001227701867.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001228920921.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001228920921.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7d2a113aa1c2558c04101389ae5ab45194d970db
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001228920921.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001229155403.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001229155403.png
new file mode 100644
index 0000000000000000000000000000000000000000..ffe4b54ecb499aa26d5b48eea623434985646292
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001229155403.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001229510983.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001229510983.gif
new file mode 100644
index 0000000000000000000000000000000000000000..56ad8e92f8376a00a0e5e201e7946144acb7659a
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001229510983.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001229784239.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001229784239.png
new file mode 100644
index 0000000000000000000000000000000000000000..b9d99e465fd01f8a427bd2c0b7758045241b8227
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001229784239.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263038799.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263038799.gif
new file mode 100644
index 0000000000000000000000000000000000000000..30dbdba7bf2036b51395507d4a1996b5adaf5436
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263038799.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263160403.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263160403.gif
new file mode 100644
index 0000000000000000000000000000000000000000..aa9bba2a489f516d80f7eed07bc67e549d1a25c3
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263160403.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263278477.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263278477.gif
new file mode 100644
index 0000000000000000000000000000000000000000..b8e2940f1660157ba412beac4db6614b4714d599
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263278477.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263279105.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263279105.gif
new file mode 100644
index 0000000000000000000000000000000000000000..52af9a2cddfa15e4f08358a0023f456b35d535c6
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263279105.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263359599.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263359599.gif
new file mode 100644
index 0000000000000000000000000000000000000000..aba5bd689955bb90c779ba3c231d698d9fb53eac
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263359599.gif differ
diff --git a/zh-cn/application-dev/ui/ui-js-animate-svg.md b/zh-cn/application-dev/ui/ui-js-animate-svg.md
new file mode 100644
index 0000000000000000000000000000000000000000..f4e20529894244958e7bfee674e8b4ac3eeb6cff
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-animate-svg.md
@@ -0,0 +1,108 @@
+# svg动画
+
+
+为svg组件添加动画效果。
+
+
+## 属性样式动画
+
+在Svg的子组件[animate](../reference/arkui-js/js-components-svg-animate.md)中,通过attributeName设置需要进行动效的属性,from设置开始值,to设置结束值。
+
+
+```
+
+
+
+
+```
+
+![zh-cn_image_0000001183871404](figures/zh-cn_image_0000001183871404.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> 在设置动画变化值时,如果已经设置了values属性,则from和to都失效。
+
+
+## 路径动画
+
+在Svg的子组件[animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md)中,通过path设置动画变化的路径。
+
+
+```
+
+
+```
+
+![zh-cn_image_0000001229510983](figures/zh-cn_image_0000001229510983.gif)
+
+
+## animateTransform动画
+
+在Svg的子组件[animateMotion](../reference/arkui-js/js-components-svg-animatetransform.md)中,通过attributeName绑定transform属性,type设置动画类型,from设置开始值,to设置结束值。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ background-color: #F1F3F5;
+}
+```
+
+![zh-cn_image_0000001182832088](figures/zh-cn_image_0000001182832088.gif)
diff --git a/zh-cn/application-dev/ui/ui-js-basic-components.md b/zh-cn/application-dev/ui/ui-js-basic-components.md
new file mode 100644
index 0000000000000000000000000000000000000000..5d7bc2f98fcbd43061fc0025590cacd7e7e32652
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-basic-components.md
@@ -0,0 +1,33 @@
+# 基础组件
+
+
+
+- **[Text开发指导](ui-js-components-text.md)**
+
+- **[Input开发指导](ui-js-components-input.md)**
+
+- **[Button开发指导](ui-js-components-button.md)**
+
+- **[Picker开发指导](ui-js-components-picker.md)**
+
+- **[Image开发指导](ui-js-components-images.md)**
+
+- **[Image-animator开发指导](ui-js-components-image-animator.md)**
+
+- **[Rating开发指导](ui-js-components-rating.md)**
+
+- **[Slider开发指导](ui-js-components-slider.md)**
+
+- **[Chart开发指导](ui-js-components-chart.md)**
+
+- **[Switch开发指导](ui-js-components-switch.md)**
+
+- **[Toolbar开发指导](ui-js-components-toolbar.md)**
+
+- **[Menu](ui-js-components-menu.md)**
+
+- **[Marquee开发指导](ui-js-components-marquee.md)**
+
+- **[Qrcode](ui-js-components-qrcode.md)**
+
+- **[Search](ui-js-components-search.md)**
\ No newline at end of file
diff --git a/zh-cn/application-dev/ui/ui-js-common-components.md b/zh-cn/application-dev/ui/ui-js-common-components.md
index 2c3eb9c3d88061466d9d57edfd244fabb29edc13..1bf77b9eaf38010c8ae9ab9c45c314db03bbb24e 100644
--- a/zh-cn/application-dev/ui/ui-js-common-components.md
+++ b/zh-cn/application-dev/ui/ui-js-common-components.md
@@ -1,22 +1,36 @@
-# 常见组件开发指导
-
-
-- **[Text](ui-js-components-text.md)**
-
-- **[Input](ui-js-components-input.md)**
-
-- **[Button](ui-js-components-button.md)**
-
-- **[List](ui-js-components-list.md)**
-
-- **[Picker](ui-js-components-picker.md)**
-
-- **[Dialog](ui-js-components-dialog.md)**
-
-- **[Form](ui-js-components-form.md)**
-
-- **[Stepper](ui-js-components-stepper.md)**
-
-- **[Tabs](ui-js-component-tabs.md)**
-
-- **[Image](ui-js-components-images.md)**
\ No newline at end of file
+# ui
+
+- 常见组件开发指导
+ - 容器组件
+ - [List开发指导](ui-js-components-list.md)
+ - [Dialog开发指导](ui-js-components-dialog.md)
+ - [Form开发指导](ui-js-components-form.md)
+ - [Stepper开发指导](ui-js-components-stepper.md)
+ - [Tabs开发指导](ui-js-component-tabs.md)
+ - [Swiper开发指导](ui-js-components-swiper.md)
+ - 基础组件
+ - [Text开发指导](ui-js-components-text.md)
+ - [Input开发指导](ui-js-components-input.md)
+ - [Button开发指导](ui-js-components-button.md)
+ - [Picker开发指导](ui-js-components-picker.md)
+ - [Image开发指导](ui-js-components-images.md)
+ - [Image-animator开发指导](ui-js-components-image-animator.md)
+ - [Rating开发指导](ui-js-components-rating.md)
+ - [Slider开发指导](ui-js-components-slider.md)
+ - [Chart开发指导](ui-js-components-chart.md)
+ - [Switch开发指导](ui-js-components-switch.md)
+ - [Toolbar开发指导](ui-js-components-toolbar.md)
+ - [Menu开发指导](ui-js-components-menu.md)
+ - [Marquee开发指导](ui-js-components-marquee.md)
+ - [Qrcode开发指导](ui-js-components-qrcode.md)
+ - [Search开发指导](ui-js-components-search.md)
+ - Canvas开发指导
+ - [CanvasRenderingContext2D对象](ui-js-components-canvasrenderingcontext2d.md)
+ - [Path2D对象](ui-js-components-path2d.md)
+ - [OffscreenCanvas对象](ui-js-components-offscreencanvas.md)
+ - [栅格布局](ui-js-components-calendar.md)
+ - Svg开发指导
+ - [基础知识](ui-js-components-svg-overview.md)
+ - [绘制图形](ui-js-components-svg-graphics.md)
+ - [绘制路径](ui-js-components-svg-path.md)
+ - [绘制文本](ui-js-components-svg-text.md)
diff --git a/zh-cn/application-dev/ui/ui-js-components-calendar.md b/zh-cn/application-dev/ui/ui-js-components-calendar.md
new file mode 100644
index 0000000000000000000000000000000000000000..20af9fa3f481b7435d78910519571c4257234f05
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-calendar.md
@@ -0,0 +1,244 @@
+# Grid
+
+
+栅格布局容器根节点,使用grid-row与grid-col进行栅格布局。具体请参考[Grid-container](../reference/arkui-js/js-components-grid-container.md)。
+
+
+## 创建grid-container组件
+
+在pages/index目录下的hml文件中创建一个grid-container组件,并添加[Grid-row](../reference/arkui-js/js-components-grid-row.md)子组件。
+
+
+```
+
+
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container{
+ flex-direction: column;
+ background-color: #F1F3F5;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+}
+```
+
+![zh-cn_image_0000001226897009](figures/zh-cn_image_0000001226897009.png)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> grid-container仅支持grid-row为子组件。
+
+
+## 调用方法
+
+grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方法,返回栅格容器列数、column宽度及gutter宽度。长按调用getSizeType方法返回当前容器响应尺寸类型(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})
+ })
+ },
+}
+```
+
+![zh-cn_image_0000001227135613](figures/zh-cn_image_0000001227135613.gif)
+
+
+## 添加grild-col
+
+创建grid-container组件并添加grid-row,在grid-row组件内添加grild-col组件形成布局。
+
+
+```
+
+
+
+
+
+
+ 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;
+
+```
+
+![zh-cn_image_0000001227135731](figures/zh-cn_image_0000001227135731.png)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> grid-row仅支持grid-col为子组件,只能在grid-col组件中添加填充的内容。
+
+
+## 场景示例
+
+本场景中循环输出list中的内容,创建出网格布局。进行下拉操时触发refresh(刷新页面)方法,这时会向list数组中添加一条数据并设置setTimeout(延迟触发),达到刷新请求数据的效果。
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+ 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)
+ }
+}
+```
+
+
+![zh-cn_image_0000001263160403](figures/zh-cn_image_0000001263160403.gif)
diff --git a/zh-cn/application-dev/ui/ui-js-components-canvas.md b/zh-cn/application-dev/ui/ui-js-components-canvas.md
new file mode 100644
index 0000000000000000000000000000000000000000..2c75605ce3209bf3f9622f66d2450180044c764d
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-canvas.md
@@ -0,0 +1,116 @@
+# Canvas开发指导
+
+
+Canvas组件提供画布,用于自定义绘制图形。具体用法请参考[CanvasRenderingContext2D对象](../reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md)。
+
+
+## 创建Canvas组件
+
+在pages/index目录下的hml文件中创建一个Canvas组件。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container{
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+canvas{
+ background-color: #00ff73;
+}
+```
+
+![zh-cn_image_0000001222984605](figures/zh-cn_image_0000001222984605.png)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> - Canvas组件默认背景色与父组件的背景色一致。
+>
+> - Canvas默认宽高为width: 300px,height: 150px。
+
+
+## 添加样式
+
+Canvas组件设置宽(width)、高(height)、背景色(background-color)及边框样式(border)。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* 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;
+}
+```
+
+![zh-cn_image_0000001177623482](figures/zh-cn_image_0000001177623482.png)
+
+
+## 添加事件
+
+Canvas添加长按事件,长按后可获取Canvas组件的dataUrl值(toDataURL方法返回的图片信息),打印在下方文本区域内。
+
+
+```
+
+
+
+ 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"})
+ }
+}
+```
+
+![zh-cn_image_0000001222985331](figures/zh-cn_image_0000001222985331.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> 画布不支持在onInit和onReady中进行创建。
diff --git a/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md b/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
new file mode 100644
index 0000000000000000000000000000000000000000..02ff012214964e60d5d128a23ce2188adc39a909
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
@@ -0,0 +1,817 @@
+# CanvasRenderingContext2D对象
+
+
+使用CanvasRenderingContext2D在Canvas画布组件上进行绘制,绘制对象可以是图形、文本、线段、图片等。具体请参考[CanvasRenderingContext2D对象](../reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md)。
+
+
+## 画线段
+
+使用moveTo和lineTo画出一条线段,当使用closePath方法时会结束当前路径形成一个封闭图形 。设置quadraticCurveTo(二次贝赛尔曲线)或bezierCurveTo(三次贝赛尔曲线)的值组成图形。
+
+
+```
+
+
+
+
+
+```
+
+
+```
+/* 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.clearRect(0, 0, 600, 500);
+ // 创建一个新的绘制路径
+ this.ctx.beginPath();
+ // 线端点以方形结束
+ this.ctx.lineCap = 'butt';
+ // 描边的宽度
+ this.ctx.lineWidth = 15;
+ // 创建一个新的绘制路径
+ this.ctx.beginPath();
+ // 路径从当前点移动到指定点
+ this.ctx.moveTo(200, 100);
+ // 从当前点到指定点进行路径连接
+ this.ctx.lineTo(400, 100);
+ // 边框绘制
+ this.ctx.stroke();
+ this.ctx.beginPath();
+ // 线端点以圆形结束
+ this.ctx.lineCap = 'round';
+ this.ctx.moveTo(200, 200);
+ this.ctx.lineTo(400, 200);
+ this.ctx.stroke();
+ // 线端点以方形结束
+ 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);
+ // 上
+ this.ctx.beginPath();
+ this.ctx.lineCap = 'butt';
+ this.ctx.moveTo(200, 100);
+ this.ctx.lineTo(400, 100);
+ this.ctx.stroke();
+ // 中
+ this.ctx.beginPath();
+ this.ctx.lineCap = 'round';
+ this.ctx.moveTo(200, 200);
+ this.ctx.lineTo(400, 200);
+ this.ctx.stroke();
+ // 下
+ 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);
+ // 上
+ this.ctx.beginPath();
+ this.ctx.moveTo(100, 150);
+ // 二次贝赛尔曲线的路径
+ this.ctx.quadraticCurveTo(300, 50, 500, 150);
+ this.ctx.stroke();
+ // 左
+ this.ctx.beginPath();
+ this.ctx.moveTo(200, 150);
+ this.ctx.quadraticCurveTo(250, 250, 250, 400);
+ this.ctx.stroke();
+ // 右
+ 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);
+ // 下
+ this.ctx.beginPath();
+ this.ctx.moveTo(100, 200);
+ // 三次贝赛尔曲线的路径
+ this.ctx.bezierCurveTo(150, 100, 200, 100,250, 200);
+ this.ctx.stroke();
+ // 左
+ this.ctx.beginPath();
+ this.ctx.moveTo(350, 200);
+ this.ctx.bezierCurveTo(400, 100, 450, 100,500, 200);
+ this.ctx.stroke();
+ // 右
+ 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);
+ // 弧线
+ this.ctx.arcTo(150, 300, 350, 300, 150);
+ this.ctx.stroke();
+ this.ctx.beginPath();
+ // 椭圆
+ 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);
+ // 左上
+ this.ctx.beginPath();
+ // 在线段相连处绘制一个扇形
+ this.ctx.lineJoin = 'round';
+ this.ctx.moveTo(100, 100);
+ this.ctx.lineTo(200, 200);
+ this.ctx.lineTo(100, 250);
+ this.ctx.stroke();
+ // 左下
+ this.ctx.beginPath();
+ // 在线段相连处使用三角形为底填充
+ this.ctx.lineJoin = 'bevel';
+ this.ctx.moveTo(100, 300);
+ this.ctx.lineTo(200, 400);
+ this.ctx.lineTo(100, 450);
+ this.ctx.stroke();
+ // 右上
+ this.ctx.beginPath();
+ //线条相交处内角和外角的距离
+ this.ctx.lineJoin = 'miter';
+ this.ctx.miterLimit = 3;
+ this.ctx.moveTo(400, 100);
+ this.ctx.lineTo(450, 200);
+ this.ctx.lineTo(400, 250);
+ // 结束当前路径形成一个封闭路径
+ this.ctx.closePath();
+ this.ctx.stroke();
+ // 右下
+ 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();
+ }
+ },
+}
+```
+
+![zh-cn_image_0000001223064173](figures/zh-cn_image_0000001223064173.gif)
+
+
+## 画边框
+
+全局定义画布(el)及画笔(ctx),初始化创建一个边框宽度为5的长方形。对边框的宽度(lineWidth)、颜色(strokeStyle)、虚化程度(setLineDash)进行改变,选用select组件添加change事件,下拉选择时触发change事件后画出改变后的图形。
+
+
+
+```
+
+
+
+
+
+```
+
+
+
+```
+/* 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'){
+ // 清除画布上的内容
+ this.ctx.clearRect(0,0,600,500);
+ // 边框宽度
+ this.ctx.lineWidth = 5;
+ // 边框颜色
+ this.ctx.strokeStyle = '#110000';
+ // 边框的虚化程度
+ this.ctx.setLineDash([0,0]);
+ // 画具有边框的矩形
+ 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]);
+ // 画圆
+ this.ctx.arc(300, 250, 150,0,6.28);
+ //进行边框绘制
+ 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);
+ // 画一个有填充颜色的矩形
+ this.ctx.fillStyle = '#0000ff';
+ this.ctx.fillRect(200, 150, 200, 200);
+ }
+ },
+}
+```
+
+
+![zh-cn_image_0000001177466006](figures/zh-cn_image_0000001177466006.gif)
+
+
+## 填充渐变色
+
+添加createLinearGradient和createRadialGradient属性创建渐变容器,接着用addColorStop方法添加多个色块组成渐变色,再设置fillStyle为gradient将渐变色填充到矩形中,最后设置阴影的模糊级别(shadowBlur)、阴影颜色(shadowColor)及阴影偏移量(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});
+ // 创建一个线性渐变色
+ 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;
+ this.ctx.fillRect(100, 100, 400, 300);
+ },
+ change(e){
+ if(e.newValue == 'value1'){
+ // 清除画布上的内容
+ 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;
+ // 设置绘制阴影时的模糊级别
+ this.ctx.shadowBlur = 0;
+ // 绘制阴影时和原有对象的垂直偏移值
+ this.ctx.shadowOffsetY = 0;
+ // 绘制阴影时和原有对象的水平偏移值
+ this.ctx.shadowOffsetX = 0;
+ this.ctx.fillRect(100, 100, 400, 300);
+ }else if(e.newValue == 'value2'){
+ this.ctx.clearRect(0,0,600,500);
+ // 创建一个径向渐变色
+ 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');
+ // 设置绘制阴影时的模糊级别
+ this.ctx.shadowBlur = 30;
+ // 绘制阴影时的阴影颜色
+ 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');
+ // 设置绘制阴影时的模糊级别
+ this.ctx.shadowBlur = 30; this.ctx.shadowOffsetY = 30;
+ // 绘制阴影时的阴影颜色
+ this.ctx.shadowColor = 'rgb(23, 1, 1)';
+ this.ctx.fillStyle = gradient;
+ this.ctx.fillRect(100, 100, 400, 300);
+ }
+ },
+}
+```
+
+![zh-cn_image_0000001222985801](figures/zh-cn_image_0000001222985801.gif)
+
+
+## 填充文字
+
+先创建文本,再用fillText方法把文字写在画布上。通过globalAlpha属性改变基线透明度,使基线不会挡住文字,再设置textAlign和textBaseline属性确定文字基于基线的位置。
+
+
+```
+
+
+
+
+
+```
+
+
+```
+/* 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});
+ // 创建文本
+ let text = "Hello World";
+ // 设置字体
+ this.ctx.font = '30px';
+ this.ctx.fillText("with:"+this.ctx.measureText(text).width, 200, 300);
+ // 填充字体文本
+ this.ctx.fillText(text, 200, 250);
+ },
+ change(e){
+ if(e.newValue == 'value1'){
+ // 清除画布上的内容
+ this.ctx.clearRect(0,0,600,500);
+ // 开始新的路径
+ this.ctx.beginPath();
+ // 初始化textAlign值
+ this.ctx.textAlign = 'left';
+ // 初始化textBaseline
+ this.ctx.textBaseline = 'alphabetic';
+ // 设置字体
+ this.ctx.font = '30px';
+ let text = "Hello World";
+ // 获取字体width
+ this.ctx.fillText("with:"+this.ctx.measureText(text).width, 200, 300);
+ // 填充字体文本
+ this.ctx.fillText(text, 200, 250);
+ }else if(e.newValue == 'value2'){
+ 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(0, 240);
+ // 当前点到指定点进行路径连接
+ this.ctx.lineTo(600, 240);
+ this.ctx.stroke();
+ this.ctx.font = '35px';
+ this.ctx.globalAlpha = 1;
+ // 初始化textAlign值
+ this.ctx.textAlign = 'left';
+ // 设置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'){
+ // 清除画布上的内容
+ 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;
+ // 初始化 textBaseline
+ this.ctx.textBaseline = 'alphabetic';
+ // 设置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);
+ }
+ }
+}
+```
+
+![zh-cn_image_0000001223064401](figures/zh-cn_image_0000001223064401.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> ltr布局模式下start和left一致,rtl布局模式下start和right一致·。
+
+
+## 添加图片
+
+创建图片对象后使用drawImage属性画出图片,给图片设置一些动画样式如scale(缩放)、translate(平移)或rotate(旋转)。
+
+
+```
+
+
+
+
+ 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");
+ // 创建图片对象
+ let img = new Image();
+ // 设置图片路径
+ img.src = 'common/images/2.png';
+ // 设置图片宽度
+ img.width= 150;
+ // 设置图片告度
+ img.height=150;
+ // 图片平铺容器
+ var pat = ctx.createPattern(img, 'repeat');ctx.fillStyle = pat;
+ ctx.fillRect(0, 0, 600, 300);
+ },
+ change(){
+ // 创建画布后得到画笔
+ 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';
+ // 图片成功获取触发方法
+ img.onload = function() {
+ ctx.drawImage(img, 150, 20, 200, 200);
+ };
+ let img1 = new Image();
+ img1.src = 'common/images/3.png';
+ img1.onload = function() {
+ // 画上图片
+ ctx.drawImage(img1, 250, 80, 200, 200);
+ };
+ // 图片获取失败触发方法
+ img1.onerror = function() {
+ prompt.showToast({message:"error",duration:2000})
+ };
+ },
+ rotate(){
+ let ctx = this.$refs.canvas2.getContext("2d");
+ ctx.clearRect(0,0,600,300);
+ // 旋转
+ 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);
+ // 缩放
+ 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);
+ };
+ },
+}
+```
+
+![zh-cn_image_0000001218279600](figures/zh-cn_image_0000001218279600.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> - setTransfrom方法使用的参数和transform()方法相同,但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。
+>
+> - 变换后的坐标计算方式(x和y为变换前坐标,x'和y'为变换后坐标):
+> x' = scaleX \* x + skewY \* y + translateX
+>
+> y' = skewX \* x + scaleY \* y + translateY
+
+
+## 添加方法
+
+save方法可对画笔样式进行存储,restore可对存储的画笔进行恢复。如下面的示例,先设置画笔为红色,在保存画笔后对画布进行清除并改变画笔为蓝色,当我们直接使用画笔时会画出一个蓝色矩形,对存储的画笔进行恢复后就可画出红色矩形。
+
+
+```
+
+
+
+
+
+
+ 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(){
+ // 画笔储存
+ this.ctx.save();
+ prompt.showToast({message:"save succeed"});
+ },
+ clear(){
+ this.ctx.clearRect(0,0,600,500);
+ // 该变画笔颜色
+ this.ctx.fillStyle = "#2133d2";
+ },
+ restore(){
+ this.ctx.beginPath();
+ // 画笔恢复
+ this.ctx.restore(); this.ctx.fillRect(200, 150, 200, 200);
+ },
+}
+```
+
+![zh-cn_image_0000001177624696](figures/zh-cn_image_0000001177624696.gif)
diff --git a/zh-cn/application-dev/ui/ui-js-components-chart.md b/zh-cn/application-dev/ui/ui-js-components-chart.md
new file mode 100644
index 0000000000000000000000000000000000000000..c2d9a710679e22af64915390d79b532c8a90c6bf
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-chart.md
@@ -0,0 +1,587 @@
+# Chart开发指导
+
+
+Chart为图表组件,用于呈现线形图、柱状图和量规图界面。具体用法请参考[Chart](../reference/arkui-js/js-components-basic-chart.md)。
+
+
+## 创建Chart组件
+
+在pages/index目录下的hml文件中创建一个Chart组件。
+
+```
+
+
+
+
+```
+
+```
+/* 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,
+ },
+ }
+ },
+ }
+}
+```
+
+
+![zh-cn_image_0000001181974568](figures/zh-cn_image_0000001181974568.png)
+
+
+## 设置图表类型
+
+Chart组件通过设置type属性定义图表t类型,如将图表设置为柱状图。
+
+
+```
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+ 线形图
+ 柱状图
+ 量规图
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+```
+/* 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: "类型展示",
+ 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,
+ },
+ },
+ },
+}
+```
+
+![zh-cn_image_0000001227423251](figures/zh-cn_image_0000001227423251.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> Chart不支持显示每个点的值。
+
+
+## 设置图表属性
+
+Chart组件在options属性中设置对x轴、y轴和数据序列参数的设置,在datasets属性里添加对线条颜色、填充颜色、填充渐变颜色和绘制点集的设置。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* 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: [
+ {
+ strokeColor: '#0081ff',
+ fillColor: '#cce5ff', //填充色
+ 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轴参数设置
+ xAxis: { min: 0, max: 20, display: false, },
+ //y轴参数设置
+ 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 } } },
+ },
+}
+```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> - options只支持柱状图和线形图设置参数,量规图不生效。
+>
+> - datasets只支持柱状图和线形图设置数据集合,量规图不生效。
+>
+> - series只有线形图支持。
+
+
+## 添加数据
+
+通过Chart组件的append方法,实现动态添加数据。
+
+
+```
+
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ 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] }) }
+}
+```
+
+![zh-cn_image_0000001221913395](figures/zh-cn_image_0000001221913395.gif)
+
+
+## 场景示例
+
+开发者可以根据开关Switch的状态来选择数据展示的状态,当Switch状态为true时,通过定时器来实现数据的动态展示。
+
+
+```
+
+
+
+
+ {{ 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: "数据展示",
+ allowScale: true,
+ 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);
+ },
+}
+
+
+
+
+
+```
+
+![zh-cn_image_0000001179018876](figures/zh-cn_image_0000001179018876.gif)
diff --git a/zh-cn/application-dev/ui/ui-js-components-image-animator.md b/zh-cn/application-dev/ui/ui-js-components-image-animator.md
new file mode 100644
index 0000000000000000000000000000000000000000..ca6bc45b5641850fa229a2991dbe548054558ba9
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-image-animator.md
@@ -0,0 +1,335 @@
+# Image-animator开发指导
+
+
+Image-animator组件为图片帧动画播放器。具体用法请参考[Image-animator](../reference/arkui-js/js-components-basic-image-animator.md)。
+
+
+## 创建Image-animator组件
+
+在pages/index目录下的hml文件中创建一个Image-animator组件,css文件中编写组件样式,js文件中引用图片。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* 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",
+ }
+ ],
+ },
+};
+```
+
+![zh-cn_image_0000001218278612](figures/zh-cn_image_0000001218278612.gif)
+
+
+## 设置Image-animator组件属性
+
+添加iteration(播放次数)、reverse(播放顺序)、fixedsize(图片大小是否固定为组件大小)、duration(播放时长)和fillmode(执行结束后的状态)属性,控制图片的播放效果。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* 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',
+ },
+ ],
+ },
+};
+```
+
+![zh-cn_image_0000001218598678](figures/zh-cn_image_0000001218598678.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> - 如果在images属性中设置了单独的duration属性,在Image-animator组件中设置的duration属性无效。
+>
+> - 如果fixedsize属性值设置为true,图片的width 、height 、top 和left属性无效。
+>
+> - 如果reverse属性值设置为false,表示从第1张图片播放到最后1张图片。 如果reverse属性值设置为true,表示从最后1张图片播放到第1张图片。
+
+
+## 绑定事件
+
+向Image-animator组件添加start、pause、stop和resume事件。当图片播放器开始播放时触发start事件,当图片播放器被点击时触发pause事件,长按图片播放器触发resume事件,图片播放器停止播放时触发stop事件。
+
+
+```
+
+
+
+
+
+```
+
+
+```
+/* 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: '开始'
+ })
+ },
+ poppause(e) {
+ prompt.showToast({
+ message: '暂停'
+ })
+ },
+ popstop(e) {
+ prompt.showToast({
+ message: '停止'
+ })
+ },
+ popresume(e) {
+ prompt.showToast({
+ message: '恢复'
+ })
+ }
+}
+```
+
+![zh-cn_image_0000001263278477](figures/zh-cn_image_0000001263278477.gif)
+
+
+## 场景示例
+
+在本场景中,开发者可通过开始播放、停止播放等按钮切换图片的播放状态。
+
+Image-animator组件通过调用start、pause、stop和resume方法控制图片的开始、暂停、停止和重新播放,通过getState方法查询图片的播放状态。
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+```
+/* 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: '反向播放'
+ },
+ 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: '当前状态:' + this.$element('img').getState()
+ })
+ },
+ revimg(e) {
+ this.rev = !this.rev
+ if (this.rev) {
+ this.revVal = '正向播放'
+ } else {
+ this.revVal = '反向播放'
+ }
+ }
+}
+```
+
+![zh-cn_image_0000001218758816](figures/zh-cn_image_0000001218758816.gif)
diff --git a/zh-cn/application-dev/ui/ui-js-components-marquee.md b/zh-cn/application-dev/ui/ui-js-components-marquee.md
new file mode 100644
index 0000000000000000000000000000000000000000..aac425fa09ec1f376df47809d26a775dfe140627
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-marquee.md
@@ -0,0 +1,235 @@
+# Marquee开发指导
+
+
+Marquee为跑马灯组件,用于展示一段单行滚动的文字。具体用法请参考[marquee](../reference/arkui-js/js-components-basic-marquee.md)。
+
+
+## 创建Marquee组件
+
+在pages/index目录下的hml文件中创建一个Marquee组件。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+```
+
+![zh-cn_image_0000001227694473](figures/zh-cn_image_0000001227694473.png)
+
+
+## 设置属性和样式
+
+Marquee通过color和font-weight属性设置跑马灯中文本的颜色、字体粗细和边框样式。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* 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;
+}
+```
+
+![zh-cn_image_0000001227416205](figures/zh-cn_image_0000001227416205.png)
+
+通过scrollamount、loop和direction属性实现跑马灯滚动时移动的最大长度、滚动次数和文字滚动方向。
+
+
+```
+
+
+
+
+
+
+
+
+
+
+```
+
+
+```
+/* 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) **说明:**
+> 当loop的值小于等于零时,跑马灯marquee将连续滚动。如果loop未指定,则默认为-1。
+
+![zh-cn_image_0000001227701867](figures/zh-cn_image_0000001227701867.gif)
+
+
+## 场景示例
+
+本场景可以控制跑马灯文字的滚动和暂停。
+
+跑马灯的次数设置为1,在结束的时候触发finish事件使跑马灯的次数加1,字体颜色变为随机颜色,调用start方法使跑马灯再次开始滚动。
+
+
+```
+
+
+
+
+
+
+
+
+
+
+```
+
+
+```
+/* 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()
+ }
+}
+```
+
+![zh-cn_image_0000001176075554](figures/zh-cn_image_0000001176075554.gif)
diff --git a/zh-cn/application-dev/ui/ui-js-components-menu.md b/zh-cn/application-dev/ui/ui-js-components-menu.md
new file mode 100644
index 0000000000000000000000000000000000000000..d364094b02bfbcfd9d5db511251e48bc0bf3b86d
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-menu.md
@@ -0,0 +1,265 @@
+# Menu
+
+
+提供菜单组件,作为临时性弹出窗口,用于展示用户可执行的操作,具体用法请参考[Menu](../reference/arkui-js/js-components-basic-menu.md)。
+
+
+## 创建Menu组件
+
+在pages/index目录下的hml文件中创建一个Menu组件,添加target、type、title属性。
+
+
+```
+
+
+ show menu
+
+
+```
+
+
+```
+/* xxx.css */
+.container{
+ flex-direction: column;
+ background-color: #F1F3F5;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+}
+.title-text{
+ font-size: 35px;
+}
+```
+
+![zh-cn_image_0000001226815299](figures/zh-cn_image_0000001226815299.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> - Menu仅支持[option](../reference/arkui-js/js-components-basic-option.md)子组件。
+>
+> - Menu组件不支持focusable、disabled属性。
+
+
+## 设置样式
+
+为menu组件设置样式,例如字体颜色、大小、字符间距等。
+
+
+```
+
+
+ show menu
+
+
+```
+
+
+```
+/* xxx.css */
+.container{
+ 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;
+}
+```
+
+![zh-cn_image_0000001181337170](figures/zh-cn_image_0000001181337170.gif)
+
+
+## 绑定事件
+
+为menu组件绑定onselected事件(菜单中某个值被点击选中时触发)和oncancel事件(取消操作时触发),点击text组件调用show方法可设置menu组件的坐标。
+
+
+```
+
+
+ show menu
+
+
+```
+
+
+```
+/* xxx.css */
+.container{
+ 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});
+ },
+}
+```
+
+![zh-cn_image_0000001181495744](figures/zh-cn_image_0000001181495744.gif)
+
+
+## 场景示例
+
+本场景中开发者可点击toggle组件修改文字颜色,选择menu组件修改渐变色块大小。
+
+
+```
+
+
+
+ {{item.name}}
+
+
width:{{width}},height:{{height}}
+
+
+
+
+```
+
+
+```
+/* 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';
+ // 图片成功获取触发方法
+ 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);
+ },
+}
+```
+
+
+![zh-cn_image_0000001218599708](figures/zh-cn_image_0000001218599708.gif)
+
+
+## 判断位置
+
+使用isPointInPath判断坐标点是否在路径的区域内,使用isPointInStroke判断坐标点是否在路径的边缘线上,并在页面上显示返回结果。
+
+
+```
+
+
+
+ 坐标:{{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);
+ }
+}
+```
+
+![zh-cn_image_0000001178084014](figures/zh-cn_image_0000001178084014.gif)
diff --git a/zh-cn/application-dev/ui/ui-js-components-path2d.md b/zh-cn/application-dev/ui/ui-js-components-path2d.md
new file mode 100644
index 0000000000000000000000000000000000000000..f5e8690de8ab83fbecaf8ba481c2af6313fcb7b5
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-path2d.md
@@ -0,0 +1,182 @@
+# Path2D对象
+
+
+路径对象,支持通过对象的接口进行路径的描述,并通过Canvas的stroke接口进行绘制。具体请参考[Path2D对象](../reference/arkui-js/js-components-canvas-path2d.md)。
+
+
+## 画线段
+
+创建Path2D,使用多条线段组合图形。
+
+```
+
+
+
+
+```
+
+```
+/* 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();
+ // 房顶
+ path.moveTo(10, 300);
+ path.lineTo(210,100);
+ path.lineTo(410, 300);
+ // 屋子
+ path.moveTo(10, 300);
+ path.lineTo(410, 300);
+ path.lineTo(410, 600);
+ path.lineTo(10, 600);
+ path.closePath();
+ // 窗子
+ path.moveTo(50, 450);
+ path.bezierCurveTo(70, 350, 130, 350, 150, 450);
+ path.closePath();
+ // 门
+ path.moveTo(250, 450);
+ path.rect(250, 450, 350, 600);
+ path.closePath();
+ // 烟囱
+ path.moveTo(365, 250);
+ path.ellipse(310, 215, 30, 130,0, Math.PI * 0.04, Math.PI * 1.1, 1);
+ // 树
+ 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);
+ },
+}
+```
+
+
+![zh-cn_image_0000001177930616](figures/zh-cn_image_0000001177930616.png)
+
+
+## 画图形
+
+先使用createPath2D创建出路径对象,只对path1路径进行描边,所以画布上就只会出现path1的路径图形。点击text组件触发addPath方法会把path2路径对象当参数传入path1中,再对path1对象进行描边(stroke)操作后画布出现path1和path2两个图形。点击change文本改变setTransform属性值为setTransform(2, 0.1, 0.1, 2, 0,0),图形变大并向左倾斜。
+
+
+```
+
+
+
+
+ {{ 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"
+ }
+ },
+}
+```
+
+![zh-cn_image_0000001177784684](figures/zh-cn_image_0000001177784684.gif)
diff --git a/zh-cn/application-dev/ui/ui-js-components-qrcode.md b/zh-cn/application-dev/ui/ui-js-components-qrcode.md
new file mode 100644
index 0000000000000000000000000000000000000000..785099137910d685d0e635f98291ee030cfc6382
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-qrcode.md
@@ -0,0 +1,169 @@
+# Qrcode
+
+
+生成并显示二维码,具体用法请参考[Qrcode](../reference/arkui-js/js-components-basic-qrcode.md)。
+
+
+## 创建Qrcode组件
+
+在pages/index目录下的hml文件中创建一个Qrcode组件。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #F1F3F5;
+}
+```
+
+![zh-cn_image_0000001229155403](figures/zh-cn_image_0000001229155403.png)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> Qrcode组件在创建的时候value的值为必填项。
+
+
+## 设置组件类型
+
+通过设置Qrcode的type属性来选择按钮类型,如定义Qrcode为矩形二维码、圆形二维码。
+
+
+```
+
+
+
+
+
+```
+
+
+```
+/* 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
+ },
+}
+```
+
+![zh-cn_image_0000001218439850](figures/zh-cn_image_0000001218439850.gif)
+
+
+## 设置样式
+
+通过color和background-color样式为二维码设置显示颜色和背景颜色。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* 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;
+}
+```
+
+![zh-cn_image_0000001183595750](figures/zh-cn_image_0000001183595750.png)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> - width和height不一致时,取二者较小值作为二维码的边长,且最终生成的二维码居中显示。
+>
+> - width和height只设置一个时,取设置的值作为二维码的边长。都不设置时,使用200px作为默认边长。
+>
+
+
+## 场景示例
+
+在本场景中将二维码与输入框绑定,通过改变输入框的内容改变二维码。
+
+
+```
+
+
+
+
+
+```
+
+
+```
+/* 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
+ }
+}
+```
+
+![zh-cn_image_0000001183431656](figures/zh-cn_image_0000001183431656.gif)
diff --git a/zh-cn/application-dev/ui/ui-js-components-rating.md b/zh-cn/application-dev/ui/ui-js-components-rating.md
new file mode 100644
index 0000000000000000000000000000000000000000..a6f5b4434823b3b1375c6451a5d4aa9f22369551
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-rating.md
@@ -0,0 +1,257 @@
+# Rating开发指导
+
+
+Rating为评分条组件,表示用户使用感受的衡量标准条。具体用法请参考[Rating](../reference/arkui-js/js-components-basic-rating.md)。
+
+
+## 创建Rating组件
+
+在pages/index目录下的hml文件中创建一个Rating组件。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+rating {
+ width: 80%;
+ height: 150px;
+}
+```
+
+![zh-cn_image_0000001227701031](figures/zh-cn_image_0000001227701031.gif)
+
+
+## 设置评分星级
+
+Rating组件通过设置numstars和rating属性设置评分条的星级总数和当前评星数。
+
+
+```
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+rating {
+ width: 80%;
+ height: 150px;
+}
+```
+
+![zh-cn_image_0000001227422709](figures/zh-cn_image_0000001227422709.gif)
+
+
+## 设置评分样式
+
+Rating组件通过star-background、star-foreground和star-secondary属性设置单个星级未选择、选中和选中的次级背景图片。
+
+
+```
+
+
+```
+
+
+```
+/* 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(){
+ }
+}
+```
+
+![zh-cn_image_0000001178685854](figures/zh-cn_image_0000001178685854.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> - star-background、star-secondary、star-foreground属性的星级图源必须全部设置,否则默认的星级颜色为灰色,提示图源设置错误。
+>
+> - star-background、star-secondary、star-foreground属性只支持本地路径图片,图片格式为png和jpg。
+
+
+## 绑定事件
+
+向Rating组件添加change事件,打印当前评分。
+
+
+```
+
+
+
+
+```
+
+
+```
+.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: '当前评分' + e.rating
+ })
+ }
+}
+```
+
+![zh-cn_image_0000001181823160](figures/zh-cn_image_0000001181823160.gif)
+
+
+## 场景示例
+
+开发者可以通过改变开关状态切换星级背景图,通过改变滑动条的值调整星级总数。
+
+
+```
+
+
+
+
+
+
+
+ 替换自定义图片
+
+
+
+ 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: '当前评分' + e.rating
+ })
+ }
+}
+```
+
+![zh-cn_image_0000001224086459](figures/zh-cn_image_0000001224086459.gif)
diff --git a/zh-cn/application-dev/ui/ui-js-components-search.md b/zh-cn/application-dev/ui/ui-js-components-search.md
new file mode 100644
index 0000000000000000000000000000000000000000..d0bf4297262cb677fd27a1191e34462af8558769
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-search.md
@@ -0,0 +1,258 @@
+# Search
+
+
+提供搜索框组件,用于提供用户搜索内容的输入区域,具体用法请参考[Search](../reference/arkui-js/js-components-basic-search.md)。
+
+
+## 创建Search组件
+
+在pages/index目录下的hml文件中创建一个Search组件。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #F1F3F5;
+}
+```
+
+![zh-cn_image_0000001218760480](figures/zh-cn_image_0000001218760480.png)
+
+
+## 设置属性
+
+通过设置hint、icon和searchbutton属性设置搜索框的提示文字、图标和末尾搜索按钮的内容。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #F1F3F5;
+}
+```
+
+![zh-cn_image_0000001183438596](figures/zh-cn_image_0000001183438596.png)
+
+
+## 添加样式
+
+通过color、placeholder和caret-color样式来设置搜索框的文本颜色、提示文本颜色和光标颜色。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* 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;
+}
+```
+
+![zh-cn_image_0000001228920921](figures/zh-cn_image_0000001228920921.gif)
+
+
+## 绑定事件
+
+向Search组件添加change、search、submit、share和translate事件,对输入信息进行操作。
+
+
+```
+
+
+
+ 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,
+ });
+ }
+}
+```
+
+![zh-cn_image_0000001182187434](figures/zh-cn_image_0000001182187434.gif)
+
+
+## 场景示例
+
+在本场景中通过下拉菜单选择Search、Textarea和Input组件来实现搜索和输入效果。
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+```
+/* 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: '搜索!',
+ duration: 2000
+ })
+ },
+ change(e) {
+ prompt.showToast({
+ message: '内容:' + e.text,
+ duration: 2000
+ })
+ }
+}
+```
+
+![zh-cn_image_0000001183283966](figures/zh-cn_image_0000001183283966.gif)
diff --git a/zh-cn/application-dev/ui/ui-js-components-slider.md b/zh-cn/application-dev/ui/ui-js-components-slider.md
new file mode 100644
index 0000000000000000000000000000000000000000..8c889388e26498991e37f0fd1f0ca5b3ded1f18b
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-slider.md
@@ -0,0 +1,213 @@
+# Slider开发指导
+
+
+Slider为滑动条组件,用来快速调节音量、亮度等。具体用法请参考[Slider](../reference/arkui-js/js-components-basic-slider.md)。
+
+
+## 创建Slider组件
+
+在pages/index目录下的hml文件中创建一个Slider组件。
+
+
+
+```
+
+
+
+
+```
+
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ background-color: #F1F3F5;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+```
+
+
+![zh-cn_image_0000001176072876](figures/zh-cn_image_0000001176072876.gif)
+
+
+## 设置样式和属性
+
+Slider组件通过color、selected-color、block-color样式分别为滑动条设置背景颜色、已选择颜色和滑块颜色。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* 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;
+}
+```
+
+![zh-cn_image_0000001227661529](figures/zh-cn_image_0000001227661529.gif)
+
+通过添加mix、max、value、step、mode属性分别为滑动条设置最小值、最大值、初始值、滑动步长和滑动条样式。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+```
+
+![zh-cn_image_0000001179438692](figures/zh-cn_image_0000001179438692.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> mode属性为滑动条样式,仅在手机和平板上生效,可选值为:
+>
+> - outset:滑块在滑杆上;
+>
+> - inset:滑块在滑杆内。
+
+
+## 绑定事件
+
+向Rating组件添加change事件,添加时需要传入ChangeEvent参数。
+
+
+```
+
+
+ slider start value is {{startValue}}
+ slider current value is {{currentValue}}
+ slider end value is {{endValue}}
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ 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;
+ }
+ }
+}
+```
+
+![zh-cn_image_0000001176551446](figures/zh-cn_image_0000001176551446.gif)
+
+
+## 场景示例
+
+开发者可以通过调整滑动条的值来改变图片大小,并且动态打印当前图片的宽和高。
+
+
+```
+
+
+
+
+
+ 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
+ }
+}
+```
+
+![zh-cn_image_0000001263038799](figures/zh-cn_image_0000001263038799.gif)
diff --git a/zh-cn/application-dev/ui/ui-js-components-svg-graphics.md b/zh-cn/application-dev/ui/ui-js-components-svg-graphics.md
new file mode 100644
index 0000000000000000000000000000000000000000..9cb7f7c3ab1bf6253476bf1fcaa33c273fd521a4
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-svg-graphics.md
@@ -0,0 +1,41 @@
+# 绘制图形
+
+
+Svg组件可以用来绘制常见图形和线段,如矩形(<rect>)、圆形(<circle>)、线条(<line>)等,具体支持图形样式还请参考svg组件。
+
+
+在本场景中,绘制各种图形拼接组成一个小房子。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+```
+
+![zh-cn_image_0000001226911459](figures/zh-cn_image_0000001226911459.png)
diff --git a/zh-cn/application-dev/ui/ui-js-components-svg-overview.md b/zh-cn/application-dev/ui/ui-js-components-svg-overview.md
new file mode 100644
index 0000000000000000000000000000000000000000..141ca67c4f93b7f6eae1e42c9a3293e2db17f363
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-svg-overview.md
@@ -0,0 +1,80 @@
+# 基础知识
+
+
+Svg组件主要作为svg画布的根节点使用,也可以在svg中嵌套使用。具体用法请参考[Svg](../reference/arkui-js/js-components-svg.md)。
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> - 从API version 7开始支持。
+>
+> - svg父组件或者svg组件需要定义宽高值,否则不进行绘制。
+
+
+## 创建Svg组件
+
+在pages/index目录下的hml文件中创建一个Svg组件。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container{
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #F1F3F5;
+}
+svg{
+ background-color: blue;
+}
+```
+
+![zh-cn_image_0000001218280036](figures/zh-cn_image_0000001218280036.png)
+
+
+## 设置属性
+
+通过设置width、height、x、y和viewBox属性为Svg设置宽度、高度、x轴坐标、y轴坐标和Svg视口。
+
+
+```
+
+
+
+
+```
+
+
+```
+/* 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;
+}
+```
+
+![zh-cn_image_0000001218599996](figures/zh-cn_image_0000001218599996.png)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> - x和y设置的的是当前Svg的x轴和y轴坐标,如果当前Svg为根节点,x轴和y轴属性无效。
+>
+> - viewBox的宽高和svg的宽高不一致,会以中心对齐进行缩放。
diff --git a/zh-cn/application-dev/ui/ui-js-components-svg-path.md b/zh-cn/application-dev/ui/ui-js-components-svg-path.md
new file mode 100644
index 0000000000000000000000000000000000000000..80770f6543997e18d2d386764e5fb63f9a0e9fbb
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-svg-path.md
@@ -0,0 +1,50 @@
+# 绘制路径
+
+
+Svg组件绘制路径时,通过Path中的M(起点)、H(水平线)、a(绘制弧形到指定位置)路径控制指令,并填充颜色实现 饼状图效果。
+
+```
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: flex-start;
+ height: 1200px;
+ width: 600px;
+ background-color: #F1F3F5;
+}
+```
+
+
+![zh-cn_image_0000001181511962](figures/zh-cn_image_0000001181511962.png)
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> - M/m = moveto 参数x和y表示需要移动到点的x轴和y轴的坐标。在使用M命令移动画笔后,只会移动画笔,但不会在两点之间画线。所以M命令经常出现在路径的开始处,用来指明从何处开始画。
+>
+> - L/l = lineto 参数x和y表示一个点的x轴和y轴坐标,L命令将会在当前位置和新位置(L前面画笔所在的点)之间画一条线段。
+>
+> - H/h = horizontal lineto 绘制平行线。
+>
+> - V/v = vertical lineto 绘制垂直线。
+>
+> - C/c = curveto 三次贝塞尔曲线 设置三组坐标参数: x1 y1, x2 y2, x y。
+>
+> - S/s = smooth curveto 三次贝塞尔曲线命令 设置两组坐标参数: x2 y2, x y。
+>
+> - Q/q = quadratic Belzier curve 二次贝塞尔曲线 设置两组坐标参数: x1 y1, x y。
+>
+> - T/t = smooth quadratic Belzier curveto 二次贝塞尔曲线命令 设置参数: x y。
+>
+> - A/a = elliptical Arc 弧形命令 设置参数: rx ry x-axis-rotation(旋转角度)large-arc-flag(角度大小) sweep-flag(弧线方向) x y。large-arc-flag决定弧线是大于还是小于180度,0表示小角度弧,1表示大角度弧。sweep-flag表示弧线的方向,0表示从起点到终点沿逆时针画弧,1表示从起点到终点沿顺时针画弧。
+>
+> - Z/z = closepath 从当前点画一条直线到路径的起点。
diff --git a/zh-cn/application-dev/ui/ui-js-components-svg-text.md b/zh-cn/application-dev/ui/ui-js-components-svg-text.md
new file mode 100644
index 0000000000000000000000000000000000000000..c5e0d18c7ef6031074ed59ee37758a89c8c9b2e5
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-svg-text.md
@@ -0,0 +1,53 @@
+# 绘制文本
+
+
+Svg组件还可以绘制文本。
+
+
+## 文本
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> - 文本的展示内容需要写在元素标签text内,可嵌套tspan子元素标签分段。
+>
+> - 只支持被父元素标签svg嵌套。
+>
+> - 只支持默认字体sans-serif。
+
+通过设置x(x轴坐标)、y(y轴坐标)、dx(文本x轴偏移)、dy(文本y轴偏移)、fill(字体填充颜色)、stroke(文本边框颜色)、stroke-width(文本边框宽度)等属性实现文本的不同展示样式。
+
+
+```
+
+
+
+ Hello World Hello World
+
+ Hello World
+
+
+
+```
+
+![zh-cn_image_0000001227151887](figures/zh-cn_image_0000001227151887.png)
+
+
+## 沿路径绘制文本
+
+textpath文本内容沿着属性path中的路径绘制文本。
+
+
+```
+
+
+
+
+
+
+ This is textpath test.
+
+
+
+
+```
+
+![zh-cn_image_0000001181354262](figures/zh-cn_image_0000001181354262.png)
diff --git a/zh-cn/application-dev/ui/ui-js-components-svg.md b/zh-cn/application-dev/ui/ui-js-components-svg.md
new file mode 100644
index 0000000000000000000000000000000000000000..b882906bd789de51e2277d061924294fdb7782fe
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-svg.md
@@ -0,0 +1,11 @@
+# Svg
+
+
+
+- **[基础知识](ui-js-components-svg-overview.md)**
+
+- **[绘制图形](ui-js-components-svg-graphics.md)**
+
+- **[绘制路径](ui-js-components-svg-path.md)**
+
+- **[绘制文本](ui-js-components-svg-text.md)**
\ No newline at end of file
diff --git a/zh-cn/application-dev/ui/ui-js-components-swiper.md b/zh-cn/application-dev/ui/ui-js-components-swiper.md
new file mode 100644
index 0000000000000000000000000000000000000000..de6c56907cf20ef9484c5101ffff11494f984909
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-swiper.md
@@ -0,0 +1,343 @@
+# Swiper开发指导
+
+
+Swiper为滑动容器,提供切换显示子组件的能力。具体用法请参考[Swiper](../reference/arkui-js/js-components-container-swiper.md)。
+
+
+## 创建Swiper组件
+
+在pages/index目录下的hml文件中创建一个Swiper组件。
+
+```
+
+
+
+
+ item1
+
+
+ item2
+
+
+ item3
+
+
+
+```
+
+```
+/* xxx.css */
+.container{
+ flex-direction: column;
+ background-color: #F1F3F5;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+}
+.item{
+ width: 100%;
+ height: 500px;
+}
+text{
+ width: 100%;
+ text-align: center;
+ font-size: 50px;
+ color: white;
+}
+```
+
+
+![zh-cn_image_0000001181495038](figures/zh-cn_image_0000001181495038.gif)
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> Swiper组件支持除<list>之外的子组件。
+
+
+## 添加属性
+
+Swiper组件当不开启循环播放(loop="false")时添加自动播放属性(autoplay),设置自动播放时播放时间间隔(interval),页面会自动切换并停留在最后一个子组件页面。添加digital属性启用数字导航点,设置切换时为渐隐滑动效果(scrolleffect="fade"))。
+
+
+```
+
+
+
+
+ item1
+
+
+ item2
+
+
+ item3
+
+
+ item4
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container{
+ flex-direction: column;
+ background-color: #F1F3F5;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+}
+.item{
+ width: 100%;
+ height: 500px;
+}
+text{
+ width: 100%;
+ text-align: center;
+ font-size: 50px;
+ color: white;
+}
+```
+
+![zh-cn_image_0000001181655292](figures/zh-cn_image_0000001181655292.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> - 设置indicator(是否启用导航点指示器)属性为true时digital(是否启用数字导航点)属性才会生效。
+>
+> - Swiper子组件的个数大于等于2时设置的loop属性才会生效。
+>
+> - scrolleffect属性仅在loop属性值为false时生效。
+
+
+## 设置样式
+
+设置Swiper组件的宽高,导航点指示器的直径大小(indicator-size)、颜色(indicator-color)、相对位置(ndicator-top)及选中时的颜色(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;
+}
+```
+
+![zh-cn_image_0000001226896657](figures/zh-cn_image_0000001226896657.gif)
+
+
+## 绑定事件
+
+创建两个text组件添加点击事件,当点击后就调用showPrevious(显示上一个子组件)或showNext(显示下一个子组件)方法。添加select组件下拉选择时触发change事件后调用swiperTo方法跳转到指定轮播页面。Swiper组件绑定change(当前显示的组件索引变化时触发)和finish(切换动画结束时触发)事件。
+
+
+```
+
+
+
+
+ item1
+
+
+ item2
+
+
+ item3
+
+
+ item4
+
+
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container{
+ flex-direction: column;
+ background-color: #F1F3F5;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+}
+.item{
+ width: 100%;
+ height: 500px;
+}
+text{
+ width: 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:"切换动作结束"});
+ },
+ selectChange(e){
+ this.$element('swiper').swipeTo({index: Number(e.newValue)});
+ },
+ previous(){
+ this.$element('swiper').showPrevious();
+ },
+ next(){
+ this.$element('swiper').showNext();
+ }
+}
+```
+
+![zh-cn_image_0000001227016767](figures/zh-cn_image_0000001227016767.gif)
+
+
+## 场景示例
+
+本场景中使用Swiper创建一个轮播图,在轮播图底部制作一个缩略图,点击缩略图后调用swipeTo方法切换到对应的轮播图。
+
+
+```
+
+
+```
+
+
+```
+/* 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;
+ }
+}
+```
+
+![zh-cn_image_0000001263359599](figures/zh-cn_image_0000001263359599.gif)
diff --git a/zh-cn/application-dev/ui/ui-js-components-switch.md b/zh-cn/application-dev/ui/ui-js-components-switch.md
new file mode 100644
index 0000000000000000000000000000000000000000..4991f8587af2f5e0526245f7dc2b1171f4c50574
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-switch.md
@@ -0,0 +1,193 @@
+# Switch开发指导
+
+
+Switch为开关选择器,切换开启或关闭状态。具体用法请参考[Switch](../reference/arkui-js/js-components-basic-switch.md)。
+
+
+## 创建Switch组件
+
+在pages/index目录下的hml文件中创建一个Switch组件。
+
+
+```
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+```
+
+![zh-cn_image_0000001229784239](figures/zh-cn_image_0000001229784239.png)
+
+
+## 添加属性和方法
+
+ witch组件通过textoff和showtext属性设置文本选中和未选中时的状态。设置checked属性值为true(组件为打开状态)。添加change事件,当组件状态改变时触发,触发后执行switchChange函数获取组件当前状态(关闭/打开)。
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+switch{
+ // 选中时的字体颜色
+ texton-color: #002aff;
+ // 未选中时的字体颜色
+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"
+ });
+ }
+ }
+}
+```
+
+
+![zh-cn_image_0000001221030133](figures/zh-cn_image_0000001221030133.gif)
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> 当showtext属性值设置为true时,texton和textoff设置的文本才会生效。
+
+
+## 场景示例
+
+在下面示例中设置开关为打开状态(使用默认收货地址),关闭开关后页面显示选择地址按钮,点击按钮即可改变收货地址。
+
+ 实现方法:创建Switch开关,设置checked属性为true,通过数据绑定改变收货地址。设置display属性(默认为none),当关闭开关改变display属性值为flex后显示地址模块,点击按钮改变颜色。
+
+```
+
+
+
+ Choose default address:
+
+
+
+ Shipping address:{{address}}
+
+
+ Choose an address:
+ {{item}}
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ 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(){
+ // 初始化默认地址为地址列表中的第一个
+ this.address = this.addressList[0];
+ },
+ switchChange(e){
+ if(e.checked){
+ this.addressDisplay = "none";
+ }else{
+ this.addressDisplay = "flex";
+ }
+ },
+ changeAddress(i){
+ this.address= this.addressList[i];
+ }
+}
+```
+
+![zh-cn_image_0000001220830223](figures/zh-cn_image_0000001220830223.gif)
diff --git a/zh-cn/application-dev/ui/ui-js-components-toolbar.md b/zh-cn/application-dev/ui/ui-js-components-toolbar.md
new file mode 100644
index 0000000000000000000000000000000000000000..cfbe78bf94d912ae2fcac8ad8c3e7bf2cb593cc6
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-toolbar.md
@@ -0,0 +1,220 @@
+# Toolbar开发指导
+
+
+Toolbar为页面工具栏组件,用于展示针对当前界面的操作选项,可作为页面的一级导航。具体用法请参考[Toolbar](../reference/arkui-js/js-components-basic-toolbar.md)。
+
+
+## 创建Toolbar组件
+
+在pages/index目录下的hml文件中创建一个Toolbar组件。
+
+
+```
+
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+toolbar-item{
+ font-size: 35px;
+}
+```
+
+![zh-cn_image_0000001175668970](figures/zh-cn_image_0000001175668970.gif)
+
+
+## 添加子组件
+
+ Toolbar组件仅支持toolbar-item为子组件,页面最多可以展示5个toolbar-item子组件,如果存在6个及以上toolbar-item,则保留前面4个,后续的将收纳到工具栏上的更多项中,通过点击更多项弹窗进行展示。并且更多项展示的组件样式采用系统默认样式,toolbar-item上设置的自定义样式不生效。
+
+```
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+toolbar-item{
+ font-size: 35px;
+}
+```
+
+![zh-cn_image_0000001175828962](figures/zh-cn_image_0000001175828962.gif)
+
+
+## 设置样式
+
+设置position样式控制Toolbar组件的位置,并设置子组件toolbar-item的字体颜色、大小及背景色。
+
+
+
+```
+
+
+
+
+
+
+
+
+
+```
+
+
+
+```
+/* 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;
+}
+```
+
+
+![zh-cn_image_0000001218279254](figures/zh-cn_image_0000001218279254.png)
+
+
+## 绑定事件
+
+分别给toolbar-item绑定单击事件和长按事件,单击后文本变红,长按时文本变蓝。
+
+
+```
+
+
+
+
+
+
+
+
+```
+
+
+```
+/* 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";
+ },
+}
+```
+
+![zh-cn_image_0000001218439306](figures/zh-cn_image_0000001218439306.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
+> Toolbar组件不支持添加事件和方法,但其子组件toolbar-item支持。
+
+
+## 场景示例
+
+本场景中开发者可点击toolbar-item组件,改变当前组件文本颜色并更换相对应的图片内容。
+
+ 使用for循环创建toolbar-item组件并添加点击事件,点击后获得索引值进行存储。设置文本颜色时,判断当前索引值是否为储存的值,若相同则设置为红色,不同则使用默认颜色。
+
+```
+
+
+
+
+
+
+
+```
+
+
+```
+/* 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;
+ },
+}
+```
+
+![zh-cn_image_0000001263279105](figures/zh-cn_image_0000001263279105.gif)
diff --git a/zh-cn/application-dev/ui/ui-js-container-components.md b/zh-cn/application-dev/ui/ui-js-container-components.md
new file mode 100644
index 0000000000000000000000000000000000000000..5e25cc9e28f6ef8ad420ac687e4dd84150dcf792
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-container-components.md
@@ -0,0 +1,15 @@
+# 容器组件
+
+
+
+- **[List开发指导](ui-js-components-list.md)**
+
+- **[Dialog开发指导](ui-js-components-dialog.md)**
+
+- **[Form开发指导](ui-js-components-form.md)**
+
+- **[Stepper开发指导](ui-js-components-stepper.md)**
+
+- **[Tabs开发指导](ui-js-component-tabs.md)**
+
+- **[Swiper开发指导](ui-js-components-swiper.md)**
\ No newline at end of file