diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001118642010.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001118642010.gif new file mode 100644 index 0000000000000000000000000000000000000000..3b98469c99c310c291bb45eb2a7a89c73ef0bee3 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001118642010.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001118642020.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001118642020.gif new file mode 100644 index 0000000000000000000000000000000000000000..17a85e429e717138ae47456e080664856eb676a0 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001118642020.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001118642500.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001118642500.gif new file mode 100644 index 0000000000000000000000000000000000000000..2a6cf73b491304e3f53cb0a333588cad2e42f30b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001118642500.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md index b87cb34ec1268e077f5c762590f9e9fb0f2ffd0c..1ac29d0fe113890b4565a0fa235c2e4307c521fc 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md @@ -21,7 +21,7 @@ RichText(content:string) | 参数名 | 参数类型 | 必填 | 参数描述 | | ------- | -------- | ------------- | -------- | | content | string | 是 | 表示HTML格式的字符串。 | - + ## 事件 @@ -55,27 +55,27 @@ RichText(content:string) @Entry @Component struct RichTextExample { - @State data: string = "

h1标题

" + - "

h1斜体

" + - "

h1下划线

" + - "

h2标题

" + - "

h3标题

" + - "

p常规

" + - "
" + - "

字体大小35px,行高45px

" + - "

" + - "

这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字

" + @State data: string = '

h1标题

' + + '

h1斜体

' + + '

h1下划线

' + + '

h2标题

' + + '

h3标题

' + + '

p常规

' + + '
' + + '

字体大小35px,行高45px

' + + '

' + + '

这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字

'; build() { - Flex({direction: FlexDirection.Column,alignItems: ItemAlign.Center, - justifyContent: FlexAlign.Center }){ + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, + justifyContent: FlexAlign.Center }) { RichText(this.data) - .onStart(()=>{ - console.info("RichText onStart") - }) - .onComplete(()=>{ - console.info("RichText onComplete") - }) + .onStart(() => { + console.info('RichText onStart'); + }) + .onComplete(() => { + console.info('RichText onComplete'); + }) } } } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md index 47420c92cbbfdffdec358305a1d4ec32a28e4d0d..1542dbeb8209bfdca9d8668a6eedfd209cdfa192 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md @@ -47,13 +47,13 @@ struct RotationGestureExample { .gesture( RotationGesture() .onActionStart((event: GestureEvent) => { - console.log('Rotation start') + console.log('Rotation start'); }) .onActionUpdate((event: GestureEvent) => { - this.angle = event.angle + this.angle = event.angle; }) .onActionEnd(() => { - console.log('Rotation end') + console.log('Rotation end'); }) ) } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md index b7973dadb17bf877a79aea035335e15660b9aa05..f3b948ab7616357b3e1891b14729dd53e547d401 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md @@ -16,7 +16,7 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num | 参数名称 | 参数类型 | 必填 | 参数描述 | | -------- | -------- | -------- | -------- | | fingers | number | 否 | 触发滑动的最少手指数，默认为1，最小为1指，最大为10指。
默认值：1 | -| direction | SwipeDirection | 否 | 触发滑动手势的滑动方向。
默认值：SwipeDirection.All | +| direction | [SwipeDirection](#swipedirection枚举说明) | 否 | 触发滑动手势的滑动方向。
默认值：SwipeDirection.All | | speed | number | 否 | 识别滑动的最小速度（默认为100VP/秒）。
默认值：100 | ## SwipeDirection枚举说明 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md index da4a7c5d1e6a719dfb03e7c07688b6422ebe8a7b..db5f572112771dfcd896b48c6ea733d3ed59fb59 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md @@ -28,7 +28,7 @@ Scroll(scroller?: Scroller) | scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值：BarState.Off | | scrollBarColor | string \| number \| Color | 设置滚动条的颜色。 | | scrollBarWidth | string \| number | 设置滚动条的宽度。 | -| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。
默认值：EdgeEffect.Spring | +| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。
默认值：EdgeEffect.None | ## ScrollDirection枚举说明 | 名称 | 描述 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md index d79f6d23c1f18890c2461a771a52e0d3f5369aa1..fe160b0760ee2ce71c67a0c8ad3f7df3344a83d4 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md @@ -5,11 +5,6 @@ > **说明：** > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - -## 权限列表 - -无 - ## TimePickerDialog.show show(options?: TimePickerDialogOptions) @@ -56,7 +51,10 @@ struct TimePickerDialogExample01 { } } ``` + ![zh-cn_image_0000001118642010](figures/zh-cn_image_0000001118642010.gif) + ### 时间滑动选择器（12小时制）示例 + ```ts // xxx.ets @Entry @@ -85,3 +83,5 @@ struct TimePickerDialogExample02 { } } ``` + + ![zh-cn_image_0000001118642020](figures/zh-cn_image_0000001118642020.gif) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md index b4a47dab65eccb79d6835554917823e20307a68d..74c6d1bce40e91a4f1f11c38fa35fc0d5a833b8c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md @@ -11,7 +11,7 @@ id为组件的唯一标识，在整个应用内唯一。本模块提供组件标 | 名称 | 参数说明 | 描述 | | -----| -------- | ----------------------------- | -| id | string | 组件的唯一标识，唯一性由使用者保证。
默认值：''| +| id | string | 组件的唯一标识，唯一性由使用者保证。
默认值：'' | ## 接口 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 6e1de9e4bc97caefa5cb8c6a14f4573e8694e722..e4414bb93c2b9b19354b873f1e342ad90635d7bf 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 @@ -23,7 +23,6 @@ @Entry @Component struct FlexExample { - build() { Column({ space: 5 }) { Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%') @@ -31,11 +30,18 @@ struct FlexExample { // flexBasis()值可以是'auto',表示基准尺寸是元素本来的大小 ,也可以是长度设置，相当于.width()/.height() Flex() { Text('flexBasis(100)') - .flexBasis('100').height(100).lineHeight(70) - .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + .flexBasis('100') + .height(100) + .lineHeight(70) + .backgroundColor(0xF5DEB3) + .textAlign(TextAlign.Center) Text('flexBasis("auto")') - .flexBasis('auto').width('60%').height(100).lineHeight(70) - .backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + .flexBasis('auto') + .width('60%') + .height(100) + .lineHeight(70) + .backgroundColor(0xD2B48C) + .textAlign(TextAlign.Center) }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) Text('flexGrow').fontSize(9).fontColor(0xCCCCCC).width('90%') @@ -43,11 +49,17 @@ struct FlexExample { // flexGrow()剩余空间分配给该元素的比例 Flex() { Text('flexGrow(2)') - .flexGrow(2).height(100).lineHeight(70) - .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + .flexGrow(2) + .height(100) + .lineHeight(70) + .backgroundColor(0xF5DEB3) + .textAlign(TextAlign.Center) Text('flexGrow(1)') - .flexGrow(1).height(100).lineHeight(70) - .backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + .flexGrow(1) + .height(100) + .lineHeight(70) + .backgroundColor(0xD2B48C) + .textAlign(TextAlign.Center) }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) Text('flexShrink').fontSize(9).fontColor(0xCCCCCC).width('90%') @@ -55,13 +67,25 @@ struct FlexExample { // text1比例是0,其他都是默认值1,放不下时直接等比例缩放后两个,第一个不缩放 Flex({ direction: FlexDirection.Row }) { Text('flexShrink(0)') - .flexShrink(0).width('50%').height(100).lineHeight(70) - .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + .flexShrink(0) + .width('50%') + .height(100) + .lineHeight(70) + .backgroundColor(0xF5DEB3) + .textAlign(TextAlign.Center) Text('no flexShrink') - .width('40%').height(100).lineHeight(70).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + .width('40%') + .height(100) + .lineHeight(70) + .backgroundColor(0xD2B48C) + .textAlign(TextAlign.Center) Text('flexShrink(2)') - .flexShrink(2).width('40%').height(100) .lineHeight(70) - .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + .flexShrink(2) + .width('40%') + .height(100) + .lineHeight(70) + .backgroundColor(0xF5DEB3) + .textAlign(TextAlign.Center) }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) Text('alignSelf').fontSize(9).fontColor(0xCCCCCC).width('90%') @@ -70,8 +94,12 @@ struct FlexExample { Text('no alignSelf,height:80').width('33%').height(80) .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) Text('alignSelf stretch') - .alignSelf(ItemAlign.Stretch).width('33%').height(80).lineHeight(70) - .backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + .alignSelf(ItemAlign.Stretch) + .width('33%') + .height(80) + .lineHeight(70) + .backgroundColor(0xD2B48C) + .textAlign(TextAlign.Center) Text('no alignSelf,height:100').width('34%').height(100) .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md index 592d818752f86f81e501fc475c0af0f04e29f70b..af1f6a91733221cba91a4c988658878ae00ec49b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md @@ -10,9 +10,9 @@ ## 属性 -| 名称 | 参数类型 | 描述 | -| ------- | ---------------------------------------- | ---------------------------------------- | -| opacity | number \| [Resource](ts-types.md#resource) | 元素的不透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。
默认值：1 | +| 名称 | 参数类型 | 描述 | +| ------- | ---------------------------------------------------- | ------------------------------------------------------------ | +| opacity | number \| [Resource](ts-types.md#resource) | 元素的不透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。
**说明：**
子组件可以继承父组件的此属性。默认值：1 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md index 79082fc267134cf0fcc252fd881812dd10879c38..4f69fcf9d8750b018f40b79ed63ec37a0f4fe112 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md @@ -23,8 +23,8 @@ struct ScrollExample { scroller: Scroller = new Scroller() private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] - @State testTextStr: string = "test" - @State testRowStr: string = "test" + @State testTextStr: string = 'test' + @State testRowStr: string = 'test' build() { Column() { @@ -46,22 +46,22 @@ struct ScrollExample { .height(200) .margin({ top: 50, bottom: 20 }) .backgroundColor(Color.Green) - // 通过设置ratios为[0.0, 1.0]，实现当组件完全显示或完全消失在屏幕中时触发回调 + // 通过设置ratios为[0.0, 1.0]，实现当组件完全显示或完全消失在屏幕中时触发回调 .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => { - console.info("Test Text isVisible: " + isVisible + ", currentRatio:" + currentRatio) + console.info('Test Text isVisible: ' + isVisible + ', currentRatio:' + currentRatio) if (isVisible && currentRatio >= 1.0) { - console.info("Test Text is fully visible. currentRatio:" + currentRatio) - this.testTextStr = "Test Text is fully visible" + console.info('Test Text is fully visible. currentRatio:' + currentRatio) + this.testTextStr = 'Test Text is fully visible' } if (!isVisible && currentRatio <= 0.0) { - console.info("Test Text is completely invisible.") - this.testTextStr = "Test Text is completely invisible" + console.info('Test Text is completely invisible.') + this.testTextStr = 'Test Text is completely invisible' } }) Row() { - Text("Test Row Visible Change") + Text('Test Row Visible Change') .fontSize(20) .margin({ bottom: 20 }) @@ -69,15 +69,15 @@ struct ScrollExample { .height(200) .backgroundColor(Color.Yellow) .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => { - console.info("Test Row isVisible:" + isVisible + ", currentRatio:" + currentRatio) + console.info('Test Row isVisible:' + isVisible + ', currentRatio:' + currentRatio) if (isVisible && currentRatio >= 1.0) { - console.info("Test Row is fully visible.") - this.testRowStr = "Test Row is fully visible" + console.info('Test Row is fully visible.') + this.testRowStr = 'Test Row is fully visible' } if (!isVisible && currentRatio <= 0.0) { - console.info("Test Row is is completely invisible.") - this.testRowStr = "Test Row is is completely invisible" + console.info('Test Row is is completely invisible.') + this.testRowStr = 'Test Row is is completely invisible' } }) diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md index 8f778ea25765381fdd7803aa846e17787366ea82..5a8da0fdde73adcd3714953cb1b580397deab18e 100644 --- a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md +++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md @@ -80,7 +80,7 @@ background: repeating-linear-gradient(direction/angle, color, color, ...); ```css /* 从左向右重复渐变，重复渐变区域30px（60-30）透明度0.5 */ - background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30vp,rgba(0, 0, 255, .5) 60vp); ``` ![444](figures/444.PNG) diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642600.PNG b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642600.PNG new file mode 100644 index 0000000000000000000000000000000000000000..31839738950d995d6b8fd6046965d212c385436b Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642600.PNG differ diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-layout-text.md b/zh-cn/application-dev/ui/ui-js-building-ui-layout-text.md index 9dbcf23ef49a459e35a5dd29f087dd553ea200fb..7213dce14d016f56b2fa380df313b54ca7a9a2df 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-layout-text.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-layout-text.md @@ -25,8 +25,10 @@ font-size: 50px; margin-top: 40px; margin-bottom: 20px; + font-weight: 700; } .paragraph-text { + width: 95%; color: #000000; font-size: 35px; line-height: 60px; @@ -38,9 +40,11 @@ // xxx.js export default { data: { - headTitle: 'Capture the Beauty in This Moment', + headTitle: 'Capture the Beauty in Moment', paragraphFirst: 'Capture the beauty of light during the transition and fusion of ice and water. At the instant of movement and stillness, softness and rigidity, force and beauty, condensing moving moments.', paragraphSecond: 'Reflecting the purity of nature, the innovative design upgrades your visual entertainment and ergonomic comfort. Effortlessly capture what you see and let it speak for what you feel.', }, } ``` + + ![zh-cn_image_0000001118642600](figures/zh-cn_image_0000001118642600.PNG) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-js-components-grid.md b/zh-cn/application-dev/ui/ui-js-components-grid.md index 77cbe83adbabdc4465859f4814d7b91db9e1731f..fcaaef6774c02e2fe0857c78291d4de066f1eabf 100644 --- a/zh-cn/application-dev/ui/ui-js-components-grid.md +++ b/zh-cn/application-dev/ui/ui-js-components-grid.md @@ -108,9 +108,9 @@ export default { ![zh-cn_image_0000001227135613](figures/zh-cn_image_0000001227135613.gif) -## 添加grild-col +## 添加grid-col -创建grid-container组件并添加grid-row，在grid-row组件内添加grild-col组件形成布局。 +创建grid-container组件并添加grid-row，在grid-row组件内添加grid-col组件形成布局。 ```html diff --git a/zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md b/zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md index e6fd3a0e2f16ec6fb9dd088ea96188e7e08084c7..21eb77734b4209734968bc7f73c8f99a40b865a8 100644 --- a/zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md +++ b/zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md @@ -1,6 +1,6 @@ # OffscreenCanvasRenderingContext2D对象 -使用OffscreenCanvas在离屏Canvas画布组件上进行绘制，绘制对象可以是矩形、文本、图片等。具体请参考[OffscreenCanvasRenderingContext2D对象](../reference/arkui-js/js-offscreencanvasrenderingcontext2d.md)。 +使用OffscreenCanvas在离屏Canvas画布组件上进行绘制，绘制对象可以是矩形、文本、图片等。 离屏，即GPU在当前缓冲区以外新开辟的一个缓冲区。 具体请参考[OffscreenCanvasRenderingContext2D对象](../reference/arkui-js/js-offscreencanvasrenderingcontext2d.md)。 以下示例创建了一个OffscreenCanvas画布，再在画布上创建一个getContext2d对象，并设置filter属性改变图片样式。