From a2c37728bb6e1fa7ff6222bce866c5e4fb0f9711 Mon Sep 17 00:00:00 2001 From: wangshuainan1 Date: Wed, 30 Mar 2022 20:30:55 +0800 Subject: [PATCH] =?UTF-8?q?3.30docs=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: wangshuainan1 --- .../figures/zh-cn_image_0000001263259399.png | Bin 4368 -> 4039 bytes ...image_0000001263259399.png:Zone.Identifier | 4 + .../ui/ui-js-animate-component.md | 25 ++- .../ui/ui-js-animate-dynamic-effects.md | 11 +- .../ui/ui-js-animate-transform.md | 4 + .../ui/ui-js-component-tabs.md | 6 +- .../ui/ui-js-components-button.md | 6 + .../ui/ui-js-components-canvas.md | 35 +++- ...-js-components-canvasrenderingcontext2d.md | 19 +- .../ui/ui-js-components-dialog.md | 6 +- .../ui/ui-js-components-form.md | 56 +++-- .../ui/ui-js-components-images.md | 26 ++- .../ui/ui-js-components-input.md | 6 + .../ui/ui-js-components-list.md | 6 +- .../ui/ui-js-components-menu.md | 17 +- .../ui/ui-js-components-picker.md | 8 + .../ui/ui-js-components-slider.md | 4 +- .../ui/ui-js-components-stepper.md | 17 +- .../ui/ui-js-components-swiper.md | 23 +- .../ui/ui-js-components-switch.md | 6 +- .../ui/ui-js-components-text.md | 197 ++++++++---------- .../ui/ui-js-components-toolbar.md | 13 +- .../ui/ui-ts-layout-grid-container.md | 20 +- 23 files changed, 342 insertions(+), 173 deletions(-) create mode 100644 zh-cn/application-dev/ui/figures/zh-cn_image_0000001263259399.png:Zone.Identifier diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263259399.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263259399.png index c9e2e084909884daa701f5e967050c849c036e5a..dc4a266c02708116362da21577d5b1e582a011fd 100644 GIT binary patch literal 4039 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 F@gJ^#c%%RT literal 4368 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 diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263259399.png:Zone.Identifier b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263259399.png:Zone.Identifier new file mode 100644 index 0000000000..5014c60c73 --- /dev/null +++ b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263259399.png:Zone.Identifier @@ -0,0 +1,4 @@ +[ZoneTransfer] +ZoneId=3 +ReferrerUrl=https://gitee.com/openharmony/docs/pulls/2845/files +HostUrl=https://gitee.com/openharmony/docs/raw/32dae5064fb2c1d43eb8a383be7af76c9d8c4d44/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263259399.png diff --git a/zh-cn/application-dev/ui/ui-js-animate-component.md b/zh-cn/application-dev/ui/ui-js-animate-component.md index 674d3c3b9c..91baf79e19 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-component.md +++ b/zh-cn/application-dev/ui/ui-js-animate-component.md @@ -104,7 +104,30 @@ export default { this.options = { duration: 4000, }; - this.keyframes = [ { transform: { translate: '-120px -0px', scale: 1, rotate: 0 }, transformOrigin: '100px 100px', offset: 0.0, width: 200, height: 200 }, { transform: { translate: '120px 0px', scale: 1.5, rotate: 90 }, transformOrigin: '100px 100px', offset: 1.0, width: 300, height: 300 } ]; + this.keyframes = [ + { + transform: { + translate: '-120px -0px', + scale: 1, + rotate: 0 + }, + transformOrigin: '100px 100px', + offset: 0.0, + width: 200, + height: 200 + }, + { + transform: { + translate: '120px 0px', + scale: 1.5, + rotate: 90 + }, + transformOrigin: '100px 100px', + offset: 1.0, + width: 300, + height: 300 + } + ]; }, Show() { this.animation = this.$element('content').animate(this.keyframes, this.options); diff --git a/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md b/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md index b4d2bf487d..b5b8a275fc 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md +++ b/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md @@ -25,6 +25,8 @@ ``` /* xxx.css */ .container { + width:100%; + height:100%; flex-direction: column; align-items: center; justify-content: center; @@ -90,7 +92,7 @@ animator支持事件和接口，可以通过添加frame、cancel、repeat、fini ``` -
+
-
+
this is a dialog
@@ -20,6 +20,8 @@ Dialog组件用于创建自定义弹窗，通常用来展示用户当前需要 ``` /* xxx.css */ .doc-page { + width:100%; + height:100%; flex-direction: column; align-items: center; justify-content: center; @@ -83,6 +85,8 @@ export default { ``` /* xxx.css */ .doc-page { + width:100%; + height:100%; flex-direction: column; align-items: center; justify-content: center; 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 6c84b63958..43eb0538f1 100644 --- a/zh-cn/application-dev/ui/ui-js-components-form.md +++ b/zh-cn/application-dev/ui/ui-js-components-form.md @@ -13,7 +13,8 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ```
-
+ +
``` @@ -21,6 +22,8 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ``` /* xxx.css */ .container { + width:100%; + height:100%; flex-direction: column; justify-content: center; align-items: center; @@ -59,9 +62,8 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp background-color: #F1F3F5; } .formClass{ - width: 80%; - padding: 10px; - border: 1px solid #c3d3e7; + width: 100%; + height: 20%; } ``` @@ -72,26 +74,46 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ## 添加响应事件 为Form组件添加submit和reset事件，来提交表单内容或重置表单选项。 + ``` -
-
-
-
- - - - -
-
- - -
+
+ +
+ + + + +
+
+ + + +
``` +``` +/* index.css */ +.container{ + width: 100%; + height: 100%; + flex-direction: column; + justify-items: center + align-items: center; + background-color: #F1F3F5; +} +.form{ + width: 100%; + height: 30%; + flex-direction: column; + justify-items: center + align-items: center; +} +``` + ``` /* xxx.js */ import prompt from '@system.prompt'; 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 f683371925..10a8f05bdc 100644 --- a/zh-cn/application-dev/ui/ui-js-components-images.md +++ b/zh-cn/application-dev/ui/ui-js-components-images.md @@ -9,13 +9,15 @@ Image是图片组件，用来渲染展示图片。具体用法请参考[Image AP ```
- +
``` ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -45,15 +47,15 @@ Image是图片组件，用来渲染展示图片。具体用法请参考[Image AP flex-direction: column; align-items: center; justify-content: center; -background-color:#F1F3F5; + background-color:#F1F3F5; } image{ - width: 80%; height: 500px; + width: 80%; + height: 500px; border: 5px solid saddlebrown; border-radius: 20px; object-fit: contain; match-text-direction:true; - } ``` @@ -69,10 +71,13 @@ image{
- -
- image{{$idx}} - content +
+ + +
+ image{{$idx}} + content +
@@ -235,7 +240,10 @@ export default { justify-content: space-between; } .testimage { - width: 100%; height: 400px; object-fit: scale-down; border-radius: 20px;} + width: 100%; height: 400px; + object-fit: scale-down; + border-radius: 20px; +} ``` ``` diff --git a/zh-cn/application-dev/ui/ui-js-components-input.md b/zh-cn/application-dev/ui/ui-js-components-input.md index b37afa8a94..b8afcf6a8a 100644 --- a/zh-cn/application-dev/ui/ui-js-components-input.md +++ b/zh-cn/application-dev/ui/ui-js-components-input.md @@ -17,6 +17,8 @@ Input是交互式组件，用于接收用户数据。其类型可设置为日期 ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -54,6 +56,8 @@ Input是交互式组件，用于接收用户数据。其类型可设置为日期 ``` /* xxx.css */ .container { + width: 100%; + height: 100%; align-items: center; flex-direction: column; justify-content: center; @@ -120,6 +124,7 @@ export default { /* xxx.css */ .content { width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; @@ -176,6 +181,7 @@ export default { /* xxx.css */ .content { width: 100%; + height: 100%; flex-direction: column; align-items: 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 c0bc55579a..45287a5231 100644 --- a/zh-cn/application-dev/ui/ui-js-components-list.md +++ b/zh-cn/application-dev/ui/ui-js-components-list.md @@ -10,7 +10,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项， ```
- + + @@ -21,6 +22,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项， ``` /* xxx.css */ .container { + width:100%; + height:100%; flex-direction: column; align-items: center; background-color: #F1F3F5; @@ -191,6 +194,7 @@ export default { ![zh-cn_image_0000001162911958](figures/zh-cn_image_0000001162911958.gif) > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> > - groupcollapse和groupexpand事件仅支持list-item-group组件使用。 diff --git a/zh-cn/application-dev/ui/ui-js-components-menu.md b/zh-cn/application-dev/ui/ui-js-components-menu.md index d364094b02..0ea286c5d0 100644 --- a/zh-cn/application-dev/ui/ui-js-components-menu.md +++ b/zh-cn/application-dev/ui/ui-js-components-menu.md @@ -25,6 +25,8 @@ ``` /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; background-color: #F1F3F5; align-items: center; @@ -65,6 +67,8 @@ ``` /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; background-color: #F1F3F5; align-items: center; @@ -115,6 +119,8 @@ option{ ``` /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; background-color: #F1F3F5; width: 100%; @@ -254,7 +260,16 @@ export default { {name: "black", checked:false}, ], }, - toggleClick(index){ for(let i=0;i ``` - - ``` /* xxx.css */ .container { @@ -119,6 +117,8 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条 ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; 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 22479506c1..15c8e42a4a 100644 --- a/zh-cn/application-dev/ui/ui-js-components-stepper.md +++ b/zh-cn/application-dev/ui/ui-js-components-stepper.md @@ -14,7 +14,8 @@ ```
- + + Step 1 @@ -27,6 +28,8 @@ ``` /* xxx.css */ .container { + width:100%; + height:100%; flex-direction: column; justify-content: center; align-items: center; @@ -66,6 +69,8 @@ text{ ``` /* index.css */ .container { + width:100%; + height:100%; flex-direction: column; background-color:#F1F3F5; } @@ -102,7 +107,9 @@ text{ ``` /* index.css */ -.container { +.container { + width:100%; + height:100%; flex-direction: column; background-color:#F1F3F5; } @@ -154,6 +161,8 @@ Stepper组件默认填充父容器，通过border和background-color设置边框 ``` /* index.css */ .container { + width:100%; + height:100%; flex-direction: column; align-items: center; justify-content: center; @@ -208,6 +217,8 @@ Stepper分别添加finish，change，next，back，skip事件。 ``` /* xxx.css */ .doc-page { + width:100%; + height:100%; flex-direction: column; align-items: center; justify-content: center; @@ -325,6 +336,8 @@ export default { ``` /* xxx.css */ .container { + width:100%; + height:100%; flex-direction: column; align-items: center; justify-content: center; 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 de6c56907c..de9f3aa008 100644 --- a/zh-cn/application-dev/ui/ui-js-components-swiper.md +++ b/zh-cn/application-dev/ui/ui-js-components-swiper.md @@ -28,18 +28,24 @@ Swiper为滑动容器，提供切换显示子组件的能力。具体用法请 ``` /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; background-color: #F1F3F5; align-items: center; justify-content: center; width: 100%; } +swiper{ + height: 30%; +} .item{ width: 100%; height: 500px; } text{ width: 100%; + height: 100%; text-align: center; font-size: 50px; color: white; @@ -84,11 +90,15 @@ Swiper组件当不开启循环播放（loop="false"）时添加自动播放属 ``` /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; background-color: #F1F3F5; align-items: center; justify-content: center; - width: 100%; +} +swiper{ + height: 30%; } .item{ width: 100%; @@ -96,6 +106,7 @@ Swiper组件当不开启循环播放（loop="false"）时添加自动播放属 } text{ width: 100%; + height: 100%; text-align: center; font-size: 50px; color: white; @@ -138,11 +149,12 @@ text{ ``` /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; background-color: #F1F3F5; align-items: center; justify-content: center; - width: 100%; } swiper{ width: 500px; @@ -205,11 +217,15 @@ text{ ``` /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; background-color: #F1F3F5; align-items: center; justify-content: center; - width: 100%; +} +swiper{ + height: 30%; } .item{ width: 100%; @@ -217,6 +233,7 @@ text{ } text{ width: 100%; + height: 100%; text-align: center; font-size: 50px; color: white; diff --git a/zh-cn/application-dev/ui/ui-js-components-switch.md b/zh-cn/application-dev/ui/ui-js-components-switch.md index 4991f8587a..aa7e7e71cb 100644 --- a/zh-cn/application-dev/ui/ui-js-components-switch.md +++ b/zh-cn/application-dev/ui/ui-js-components-switch.md @@ -44,6 +44,8 @@ Switch为开关选择器，切换开启或关闭状态。具体用法请参考[S ``` /* xxx.css */ .container { + width: 100%; + height: 100%; display: flex; justify-content: center; align-items: center; @@ -53,7 +55,7 @@ switch{ // 选中时的字体颜色 texton-color: #002aff; // 未选中时的字体颜色 -textoff-color: silver; + textoff-color: silver; text-padding: 20px; font-size: 50px; } @@ -114,6 +116,8 @@ export default { ``` /* xxx.css */ .container { + width: 100%; + height: 100%; background-color: #F1F3F5; flex-direction: column; padding: 50px; 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 96dfb5a196..b6b79dffe3 100644 --- a/zh-cn/application-dev/ui/ui-js-components-text.md +++ b/zh-cn/application-dev/ui/ui-js-components-text.md @@ -34,45 +34,41 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex - 添加文本样式 - 设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。 - - - ``` - -
- - This is a passage - - - This is a passage - -
- ``` - - - ``` - /* xxx.css */ - .container { - width: 100%; - height: 100%; - flex-direction: column; - align-items: center; - justify-content: center; - background-color: #F1F3F5; - } - ``` - - - ![zh-cn_image_0000001220778205](figures/zh-cn_image_0000001220778205.png) + 设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。 + +``` + +
+ + This is a passage + + + This is a passage + +
+``` + +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +``` + + + ![zh-cn_image_0000001220778205](figures/zh-cn_image_0000001220778205.png) - 添加划线 +​ 设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色，text-decoration枚举值请参考 Text自有样式。 + - 设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色，text-decoration枚举值请参考Text自有样式。 - - - ```
@@ -80,46 +76,38 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex This is a passage - +
- ``` - - - ``` - /* xxx.css */ - .container { - width: 100%; - height: 100%; - flex-direction: column; - align-items: center; - justify-content: center; - } - text{ - font-size: 50px; - } - ``` - - - ![zh-cn_image_0000001220856725](figures/zh-cn_image_0000001220856725.png) +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; +} +text{ + font-size: 50px; +} +``` + + ![zh-cn_image_0000001220856725](figures/zh-cn_image_0000001220856725.png) - 隐藏文本内容 + 当文本内容过多而显示不全时，添加text-overflow属性将隐藏内容以省略号的形式展现 + +``` + +
+ + This is a passage + +
+``` - 当文本内容过多而显示不全时，添加text-overflow属性将隐藏内容以省略号的形式展现。 - - - ``` - -
- - This is a passage - -
- ``` - - - ``` /* xxx.css */ .container { width: 100%; @@ -127,47 +115,42 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex flex-direction: column; align-items: center; background-color: #F1F3F5; - justify-content: center; + justify-content: center; } .text{ width: 200px; max-lines: 1; text-overflow:ellipsis; } - ``` - - - > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** - > - text-overflow样式需要与max-lines样式配套使用，设置了最大行数的情况下生效。 - > - > - max-lines属性设置文本最多可以展示的行数。 - - - ![zh-cn_image_0000001163656706](figures/zh-cn_image_0000001163656706.png) + + **说明：** + +- text-overflow样式需要与max-lines样式配套使用，设置了最大行数的情况下生效。 +- max-lines属性设置文本最多可以展示的行数。 + + +​ ![zh-cn_image_0000001163656706](figures/zh-cn_image_0000001163656706.png) - 设置文本折行 +​ 设置word-break属性对文本内容做断行处理，word-break枚举值请参考Text自有样式。 + +``` + +
+
+ + Welcome to the world + + + Welcome to the world + +
+
-
-
- - Welcome to the world - - - Welcome to the world - -
-
- ``` - - - ``` /* xxx.css */ .container { background-color: #F1F3F5; @@ -196,23 +179,25 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex word-break: break-all; font-size: 40px; } - ``` - - - ![zh-cn_image_0000001209033195](figures/zh-cn_image_0000001209033195.png) + + +​ ![zh-cn_image_0000001209033195](figures/zh-cn_image_0000001209033195.png) - Text组件支持[Span](../reference/arkui-js/js-components-basic-span.md)子组件 - + ``` -
+
This is a passage - This 1 is a 1 passage + This 1 + + is a 1 + passage
``` @@ -253,6 +238,8 @@ Text组件通过数据绑定展示文本内容，Span组件通过设置show属 ``` /* xxx.css */ .container { + width: 100%; + height: 100%; align-items: center; flex-direction: column; justify-content: center; diff --git a/zh-cn/application-dev/ui/ui-js-components-toolbar.md b/zh-cn/application-dev/ui/ui-js-components-toolbar.md index cfbe78bf94..09f8c17ff0 100644 --- a/zh-cn/application-dev/ui/ui-js-components-toolbar.md +++ b/zh-cn/application-dev/ui/ui-js-components-toolbar.md @@ -23,6 +23,8 @@ Toolbar为页面工具栏组件，用于展示针对当前界面的操作选项 ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -44,7 +46,12 @@ toolbar-item{
- + + + + + +
``` @@ -53,6 +60,8 @@ toolbar-item{ ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -92,6 +101,7 @@ toolbar-item{ background-color: #F1F3F5; flex-direction: column; width: 100%; + height: 100%; justify-content: center; align-items: center; } @@ -131,6 +141,7 @@ toolbar-item{ background-color: #F1F3F5; flex-direction: column; width: 100%; + height: 100%; justify-content: center; align-items: center; } diff --git a/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md b/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md index 23a040c516..df9383f16b 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md @@ -108,8 +108,8 @@ GridContainer() { struct GridContainerExample { build() { Column({ space: 5 }) { - GridContainer({ columns: 6, sizeType: SizeType.Auto, gutter: 10, margin: 20 }) { - Row() { + GridContainer({ columns: 6 }) { + Flex({justifyContent:FlexAlign.SpaceAround}) { Text('1') .useSizeType({ xs: { span: 2, offset: 0 }, @@ -120,18 +120,18 @@ struct GridContainerExample { .height(100).backgroundColor(0x4682B4).textAlign(TextAlign.Center) Text('2') .useSizeType({ - xs: { span: 2, offset: 2 }, - sm: { span: 2, offset: 2 }, - md: { span: 4, offset: 1 }, - lg: { span: 4, offset: 1 }, + xs: { span: 2, offset: 0 }, + sm: { span: 2, offset: 0 }, + md: { span: 4, offset: 0 }, + lg: { span: 4, offset: 0 }, }) .height(100).backgroundColor(0x46F2B4).textAlign(TextAlign.Center) Text('3') .useSizeType({ - xs: { span: 2, offset: 4 }, - sm: { span: 2, offset: 4 }, - md: { span: 1, offset: 5 }, - lg: { span: 1, offset: 5 }, + xs: { span: 2, offset: 0 }, + sm: { span: 2, offset: 0 }, + md: { span: 1, offset: 0 }, + lg: { span: 1, offset: 0 }, }) .height(100).backgroundColor(0x46A2B4).textAlign(TextAlign.Center) } -- GitLab