diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md index a6012798b6247535d90bfa64c7df361446a9b240..161860cc71b150e46a393aeea561a1e9037514e8 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md @@ -11,8 +11,8 @@
- - + +
``` @@ -29,7 +29,7 @@ antialias() { const el = this.$refs.canvas1; const ctx = el.getContext('2d', { antialias: true }); - ctx.beginPath(); ] + ctx.beginPath(); ctx.arc(100, 75, 50, 0, 6.28); ctx.stroke(); } diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864157.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864157.png deleted file mode 100644 index 3b1d0fd10bd28897bf3b1103e5bdba0fdb9d17f1..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864157.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md index 0d065df39fc5115b89a7a13d99844540251f7b29..b5e5b77b9bca685eb40200d781a905275614ba25 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md @@ -72,4 +72,4 @@ struct ImageEffectsExample { } ``` -![zh-cn_image_0000001219864157](figures/zh-cn_image_0000001219864157.png) + diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_background_img.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_background_img.gif new file mode 100644 index 0000000000000000000000000000000000000000..67507425fd7234c53ddb89ab0899b9e74b574c42 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_background_img.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_images.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_images.gif new file mode 100644 index 0000000000000000000000000000000000000000..019ac021ca4c9b3fbdda7acb52636f58e631250a Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_images.gif differ diff --git a/zh-cn/application-dev/ui/ts-system-resource-access.md b/zh-cn/application-dev/ui/ts-system-resource-access.md index b371004bebbf5b5a2d2260affcb5ef9f144bea8c..ac9a956742e2238a338653c0360078a4c0161c66 100644 --- a/zh-cn/application-dev/ui/ts-system-resource-access.md +++ b/zh-cn/application-dev/ui/ts-system-resource-access.md @@ -8,13 +8,13 @@ ``` Text('Hello') - .fontColor($r('sys.color.id_color_emphasize')) - .fontSize($r('sys.float.id_text_size_headline1')) - .fontFamily($r('sys.string.id_text_font_family_medium')) - .backgroundColor($r('sys.color.id_color_palette_aux1')) -Image($r('sys.media.ic_app')) - .border({color: $r('sys.color.id_color_palette_aux1'), radius: $r('sys.float.id_corner_radius_button'), width: 2}) - .margin({top: $r('sys.float.id_elements_margin_horizontal_m'), bottom: $r('sys.float.id_elements_margin_horizontal_l')}) + .fontColor($r('sys.color.ohos_id_color_emphasize')) + .fontSize($r('sys.float.ohos_id_text_size_headline1')) + .fontFamily($r('sys.string.ohos_id_text_font_family_medium')) + .backgroundColor($r('sys.color.ohos_id_color_palette_aux1')) +Image($r('sys.media.ohos_app_icon')) + .border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2}) + .margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')}) .height(200) .width(300) ``` diff --git a/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md b/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md index e6a2606c9c8d505edddaf331a40d8fe51df37bfe..68a243be960929addf51dadd0f0c8a102c11999b 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md +++ b/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md @@ -17,6 +17,7 @@ ``` /* xxx.css */ .container { + height: 100%; background-color:#F1F3F5; display: flex; flex-direction: column; @@ -81,3 +82,5 @@ > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > background-position仅支持背景图片的移动，不支持背景颜色（background-color）。 + +![zh-cn_image_background_img.gif](figures/zh-cn_image_background_img.gif) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-js-component-tabs.md b/zh-cn/application-dev/ui/ui-js-component-tabs.md index f074c9f5c2a24454d8396d3f26ed33f1136bc5ea..58a13fb849fb5f16fff83a7464234efb799f3be2 100644 --- a/zh-cn/application-dev/ui/ui-js-component-tabs.md +++ b/zh-cn/application-dev/ui/ui-js-component-tabs.md @@ -142,7 +142,8 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使 margin-top: 10px; height: 300px; color: blue; - justify-content: center; align-items: center; + justify-content: center; + align-items: center; } ``` @@ -306,4 +307,4 @@ export default { } ``` -![zh-cn_image_tab](figures\zh-cn_image_tab.gif) +![zh-cn_image_tab.gif](figures/zh-cn_image_tab.gif) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-js-components-button.md b/zh-cn/application-dev/ui/ui-js-components-button.md index 15b0919cb1823ed7ad29dd2df8d051c39aaddb32..c36d2109388def1eb807597d9565256b3a3c9d65 100644 --- a/zh-cn/application-dev/ui/ui-js-components-button.md +++ b/zh-cn/application-dev/ui/ui-js-components-button.md @@ -157,7 +157,7 @@ export default { setProgress(e) { if(this.isPaused){ prompt.showToast({ - message: "Download started" + message: "Started Ddownloading" }) this.star(); this.isPaused = false; diff --git a/zh-cn/application-dev/ui/ui-js-components-chart.md b/zh-cn/application-dev/ui/ui-js-components-chart.md index 56552dffce72f7d02b9a405c7b2284de4a03227e..b4b6434aa362e39bcf9a214c85fb61033340e990 100644 --- a/zh-cn/application-dev/ui/ui-js-components-chart.md +++ b/zh-cn/application-dev/ui/ui-js-components-chart.md @@ -117,6 +117,9 @@ Chart组件通过设置type属性定义图表t类型，如将图表设置为柱 justify-content: center; background-color: #F1F3F5; } +.tab-bar{ + background-color: #F1F3F5; +} .chart-data { width: 700px; height: 600px; @@ -494,6 +497,7 @@ export default { interval: null, title: "数据展示", allowScale: true, + dataLength: 30, barGroup: 3, lineData: null, lineOps: { diff --git a/zh-cn/application-dev/ui/ui-js-components-dialog.md b/zh-cn/application-dev/ui/ui-js-components-dialog.md index 8995652ec1459364030b145d1cc385148b3deebf..09f8cbdce8580e609d374db9af5777e6500c0f65 100644 --- a/zh-cn/application-dev/ui/ui-js-components-dialog.md +++ b/zh-cn/application-dev/ui/ui-js-components-dialog.md @@ -9,7 +9,8 @@ Dialog组件用于创建自定义弹窗，通常用来展示用户当前需要 ```
-
+ +
this is a dialog
@@ -71,7 +72,7 @@ export default { ```
- +
dialog @@ -120,13 +121,21 @@ button{ /* xxx.js */ import prompt from '@system.prompt'; export default { + canceldialog(e){ + prompt.showToast({ + message: 'dialogCancel' + }) + }, openDialog(){ this.$element('dialogId').show() + prompt.showToast({ + message: 'dialogShow' + }) }, confirmClick(e) { this.$element('dialogId').close() prompt.showToast({ - message: 'Confirmed.' + message: 'dialogClose' }) }, } diff --git a/zh-cn/application-dev/ui/ui-js-components-form.md b/zh-cn/application-dev/ui/ui-js-components-form.md index 43eb0538f1c58edbbbb3c5ab5e1a7acaaff4f69b..c14e9d2df6c3aeadd5fbb8b9cafcf02be43ece33 100644 --- a/zh-cn/application-dev/ui/ui-js-components-form.md +++ b/zh-cn/application-dev/ui/ui-js-components-form.md @@ -56,14 +56,18 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; background-color: #F1F3F5; } .formClass{ - width: 100%; - height: 20%; + width: 80%; + height: 100px; + padding: 10px; + border: 1px solid #cccccc; } ``` @@ -85,12 +89,11 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
-
- +
+ - +
-
``` @@ -101,15 +104,16 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp width: 100%; height: 100%; flex-direction: column; - justify-items: center + justify-items: center; align-items: center; background-color: #F1F3F5; } .form{ width: 100%; height: 30%; + margin-top: 40%; flex-direction: column; - justify-items: center + justify-items: center; align-items: center; } ``` diff --git a/zh-cn/application-dev/ui/ui-js-components-images.md b/zh-cn/application-dev/ui/ui-js-components-images.md index 091cf547dea9e8e05696e729d87f5608f6531646..6fc1087bff0193efc21d2ab17ff60f1b86a0c2c7 100644 --- a/zh-cn/application-dev/ui/ui-js-components-images.md +++ b/zh-cn/application-dev/ui/ui-js-components-images.md @@ -44,6 +44,8 @@ Image是图片组件，用来渲染展示图片。具体用法请参考[Image AP ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; @@ -82,6 +84,8 @@ image{ ``` /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-self: center; @@ -116,7 +120,8 @@ export default { } ``` -![zh-cn_image_0000001188931396](figures/zh-cn_image_0000001188931396.gif) +![zh-cn_image_images](figures/zh-cn_image_images.gif) + ## 场景示例 @@ -139,6 +144,8 @@ export default { ``` /* xxx.css */ .page-container { + width: 100%; + height: 100%; flex-direction:column; align-self: center; justify-content: center; diff --git a/zh-cn/application-dev/ui/ui-js-components-list.md b/zh-cn/application-dev/ui/ui-js-components-list.md index 849878d6d0a249282c9804ce5fe8e3231fc2840a..7590c03f05b34e9ec06e5d803d7f052960700b92 100644 --- a/zh-cn/application-dev/ui/ui-js-components-list.md +++ b/zh-cn/application-dev/ui/ui-js-components-list.md @@ -231,12 +231,15 @@ export default { ``` /* index.css */ .doc-page { + width: 100%; + height: 100%; flex-direction: column; background-color: #F1F3F5; } .list { width: 100%; - height: 100%; + height: 90%; + flex-grow: 1; } .item { height: 120px; diff --git a/zh-cn/application-dev/ui/ui-js-components-stepper.md b/zh-cn/application-dev/ui/ui-js-components-stepper.md index 15c8e42a4a754135e2b00941b493561c1add216a..08c4a02e95f68ff02fcc586f8802725a8bcfcbb3 100644 --- a/zh-cn/application-dev/ui/ui-js-components-stepper.md +++ b/zh-cn/application-dev/ui/ui-js-components-stepper.md @@ -72,7 +72,7 @@ text{ width:100%; height:100%; flex-direction: column; - background-color:#F1F3F5; + background-color: #F1F3F5; } text{ width: 100%; @@ -87,7 +87,7 @@ text{ ``` -
+
stepper-item1 @@ -111,7 +111,7 @@ text{ width:100%; height:100%; flex-direction: column; - background-color:#F1F3F5; + background-color: #F1F3F5; } text{ width: 100%; @@ -124,7 +124,10 @@ text{ /* index.js */ export default { data: { - label_1:{ nextLabel: 'NEXT', status: 'normal' }, + label_1:{ + nextLabel: 'NEXT', + status: 'normal' + }, label_2:{ prevLabel: 'BACK', nextLabel: 'NEXT', @@ -173,7 +176,8 @@ Stepper组件默认填充父容器，通过border和background-color设置边框 height: 300px; } .stepperClass{ - border:1px solid silver ; background-color: white; + border:1px solid silver ; + background-color: white; } text{ width: 100%; diff --git a/zh-cn/application-dev/ui/ui-js-components-swiper.md b/zh-cn/application-dev/ui/ui-js-components-swiper.md index de9f3aa008425bd06e50e3c7865e5a764aabb2f7..d318cf8ad7d7a163bab318556723d9cf30410c7a 100644 --- a/zh-cn/application-dev/ui/ui-js-components-swiper.md +++ b/zh-cn/application-dev/ui/ui-js-components-swiper.md @@ -159,7 +159,11 @@ text{ swiper{ width: 500px; height: 500px; - border-radius: 250px;indicator-color: white; indicator-selected-color: blue; indicator-size: 40px; indicator-top: 100px; + border-radius: 250px; + indicator-color: white; + indicator-selected-color: blue; + indicator-size: 40px; + indicator-top: 100px; overflow: hidden ; } .item{ @@ -330,7 +334,8 @@ swiper{ transform: scale(0.5); } .actived{ - transform: scale(1);border: 1px solid #b20937ea; + transform: scale(1); + border: 1px solid #b20937ea; } ``` diff --git a/zh-cn/application-dev/ui/ui-js-components-text.md b/zh-cn/application-dev/ui/ui-js-components-text.md index 35c7525615dc6619c266dc88eecc99f4c28779be..0da0022df394f1a709d2eb687d6bbf8819bfdc66 100644 --- a/zh-cn/application-dev/ui/ui-js-components-text.md +++ b/zh-cn/application-dev/ui/ui-js-components-text.md @@ -155,6 +155,8 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ``` /* xxx.css */ .container { + width: 100%; + height: 100%; background-color: #F1F3F5; flex-direction: column; align-items: center; @@ -167,6 +169,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex justify-content: center; } .text1{ + width: 100%; height: 200px; border:1px solid #1a1919; margin-bottom: 50px; @@ -175,6 +178,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex font-size: 40px; } .text2{ + width: 100%; height: 200px; border:1px solid #0931e8; text-align: center;