From b021788a9e504530b8a4eb1250adaa34f6717b4c Mon Sep 17 00:00:00 2001 From: FadeAgain <402878692@qq.com> Date: Tue, 16 Aug 2022 06:17:27 +0000 Subject: [PATCH] =?UTF-8?q?=E3=80=90OpenHarmony=E5=BC=80=E6=BA=90=E8=B4=A1?= =?UTF-8?q?=E7=8C=AE=E8=80=85=E8=AE=A1=E5=88=922022=E3=80=91md=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E6=A0=BC=E5=BC=8F=E4=BF=AE=E6=94=B9=20=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E8=AF=B4=E6=98=8E=E4=BD=8D=E7=BD=AE=E3=80=81=E6=8D=A2?= =?UTF-8?q?=E8=A1=8C=E3=80=81=E7=BC=A9=E8=BF=9B=E7=AD=89=C2=B7=C2=B7=C2=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: FadeAgain <402878692@qq.com> --- .../arkui-ts/ts-transition-animation-component.md | 7 ++++--- .../arkui-ts/ts-transition-animation-shared-elements.md | 7 ++++--- .../arkui-ts/ts-universal-attributes-background.md | 6 +++--- .../arkui-ts/ts-universal-attributes-border-image.md | 7 +++++++ .../reference/arkui-ts/ts-universal-attributes-border.md | 6 +++--- .../reference/arkui-ts/ts-universal-attributes-click.md | 1 - .../reference/arkui-ts/ts-universal-attributes-enable.md | 1 + .../arkui-ts/ts-universal-attributes-flex-layout.md | 1 + .../reference/arkui-ts/ts-universal-attributes-focus.md | 4 +++- .../arkui-ts/ts-universal-attributes-gradient-color.md | 1 + .../reference/arkui-ts/ts-universal-attributes-grid.md | 3 ++- 11 files changed, 29 insertions(+), 15 deletions(-) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md index d453fccbf7..1ac37f1177 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md @@ -1,14 +1,14 @@ # 组件内转场 +组件转场主要通过transition属性进行配置转场参数，在组件插入和删除时进行过渡动效，主要用于容器组件子组件插入删除时提升用户体验（需要配合animateTo才能生效，动效时长、曲线、延时跟随animateTo中的配置）。 + > **说明：** > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -组件转场主要通过transition属性进行配置转场参数，在组件插入和删除时进行过渡动效，主要用于容器组件子组件插入删除时提升用户体验（需要配合animateTo才能生效，动效时长、曲线、延时跟随animateTo中的配置）。 - - ## 属性 + | 名称 | 参数类型 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | | transition | Object | - | 所有参数均为可选参数，详细描述见transition入参说明。 | @@ -41,6 +41,7 @@ struct TransitionExample { @State btn1: boolean = false @State show: string = "show" + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,}) { Button(this.show).width(80).height(30).backgroundColor(0x317aff).margin({bottom:50}) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md index b7941b7bae..98c94ba07f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md @@ -1,14 +1,14 @@ # 共享元素转场 +共享元素转场支持页面间的转场，如当前页面的图片转场至下一页面中。 + > **说明：** > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -共享元素转场支持页面间的转场，如当前页面的图片转场至下一页面中。 - - ## 属性 + | 名称 | 参数 | 默认值 | 参数描述 | | ---------------- | ---------------------------------------- | ---- | ---------------------------------------- | | sharedTransition | id: string,
options?: Object | - | 两个页面的组件配置为同一个id，则转场过程中会进行共享元素转场，配置为空字符串时不会有共享元素转场效果。 | @@ -57,6 +57,7 @@ struct SharedTransitionExample { @Entry @Component struct BExample { + build() { Stack() { Image($r('app.media.ic_health_heart')).width(150).height(150).sharedTransition('sharedImage1') diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md index 15d710e5e0..c0348500d7 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md @@ -1,12 +1,11 @@ # 背景设置 +设置组件的背景色。 + > **说明：** > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -设置组件的背景色。 - - ## 权限列表 无 @@ -38,6 +37,7 @@ @Entry @Component struct BackgroundExample { + build() { Column({ space: 5 }) { Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md index ca42d63a08..e77aee7ca1 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md @@ -1,8 +1,12 @@ # 图片边框设置 + 设置组件图片边框样式。 + > **说明：** > > 从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + ## 权限列表 无 @@ -36,6 +40,7 @@ | Round | 被切割图片以整数次平铺在图片边框上，无法以整数次平铺时压缩被切割图片。 | | Space | 被切割图片以整数次平铺在图片边框上，无法以整数次平铺时以空白填充。 | + ## 示例 ```ts @@ -43,6 +48,7 @@ @Entry @Component struct Index { + build() { Row() { Column() { @@ -71,6 +77,7 @@ struct Index { @Entry @Component struct Index { + build() { Row() { Column() { diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md index 4232e4edc4..155ba67a95 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md @@ -1,5 +1,7 @@ # 边框设置 +设置组件边框样式。 + > **说明：** > > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 @@ -7,9 +9,6 @@ > 从API Version 9开始，父节点的border显示在子节点内容之上。 -设置组件边框样式。 - - ## 权限列表 无 @@ -96,6 +95,7 @@ @Entry @Component struct BorderExample { + build() { Column() { Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md index f61b99891a..01ee8c54de 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md @@ -49,5 +49,4 @@ struct TouchAbleExample { } ``` - ![zh-cn_image_0000001189624550](figures/zh-cn_image_0000001189624550.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md index 1381d68ed4..f8d01f547a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md @@ -26,6 +26,7 @@ @Entry @Component struct EnabledExample { + build() { Flex({ justifyContent: FlexAlign.SpaceAround }) { // 点击没有反应 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md index 9cb5798334..d566eb04e4 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md @@ -29,6 +29,7 @@ @Entry @Component struct FlexExample { + build() { Column({ space: 5 }) { Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%') diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md index 4f51c85fb0..7b7beb666c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md @@ -13,11 +13,13 @@ ## 属性 + | **名称** | **参数类型** | **默认值** | **描述** | | -------------------- | -------- | ------- | ---------------------------------------- | | focusable | boolean | false | 设置当前组件是否可以获焦。 | | tabIndex9+ | number | 0 | 自定义组件tab键走焦能力，走焦顺序为：tabIndex大于0的组件依次递增走焦, tabIndex等于0的组件按组件树先后顺序走焦。
- tabIndex >= 0：表示元素是可聚焦的，并且可以通过tab键走焦来访问到该元素，按照tabIndex的数值递增而先后获焦。如果多个元素拥有相同的tabIndex，按照元素在当前组件树中的先后顺序获焦
- tabIndex < 0（通常是tabIndex = -1）：表示元素是可聚焦的，但是不能通过tab键走焦来访问到该元素 | + > **说明：** > 支持焦点控制的组件：Button、Text、Image、List、Grid。 @@ -70,4 +72,4 @@ struct FocusableExample { } ``` -![focus](figures/focus.png) \ No newline at end of file +![focus](figures/focus.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md index 67a5d725dd..453cb642e4 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md @@ -45,6 +45,7 @@ @Entry @Component struct ColorGradientExample { + build() { Column({ space: 5 }) { Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md index 6f43e1ef3d..6851a7f2ee 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md @@ -28,6 +28,7 @@ @Entry @Component struct GridContainerExample1 { + build(){ GridContainer() { Row({}) { @@ -77,4 +78,4 @@ struct GridContainerExample1 { **图3** 设备宽度为LG -![zh-cn_image_0000001219982727](figures/zh-cn_image_0000001219982727.png) \ No newline at end of file +![zh-cn_image_0000001219982727](figures/zh-cn_image_0000001219982727.png) -- GitLab