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 273467da3e613e579039991551f43d056cc4752b..239aad680ae9a7652a5b83139a49cf1f7389b8fe 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 @@ -53,27 +53,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-swipegesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md index 9c7c53050b9077afa4df1898d2ae92abe281c430..eec49049bd93a3d9a7cc6c68b34d90156b6b3bfd 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 @@ -10,20 +10,20 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num **参数：** - | 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | fingers | number | 否 | 1 | 触发滑动的最少手指数，默认为1，最小为1指，最大为10指。 | - | direction | SwipeDirection | 否 | SwipeDirection.All | 触发滑动手势的滑动方向。 | - | speed | number | 否 | 100 | 识别滑动的最小速度（默认为100vp/秒）。 | +| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| fingers | number | 否 | 1 | 触发滑动的最少手指数，默认为1，最小为1指，最大为10指。 | +| direction | [SwipeDirection](#swipedirection枚举说明) | 否 | SwipeDirection.All | 触发滑动手势的滑动方向。 | +| speed | number | 否 | 100 | 识别滑动的最小速度（默认为100vp/秒）。 | ## SwipeDirection枚举说明 - | 名称 | 描述 | - | -------- | -------- | - | All | 所有方向。 | - | Horizontal | 水平方向。 | - | Vertical | 竖直方向。 | - | None | 任何方向均不可触发。 | +| 名称 | 描述 | +| -------- | -------- | +| All | 所有方向。 | +| Horizontal | 水平方向。 | +| Vertical | 竖直方向。 | +| None | 任何方向均不可触发。 | ## 事件 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 cab4ac8ce512aa5b504c76c8a7002d7a631abee7..eb38866023d90d28af93916eea4ac33ceba5879d 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 @@ -20,13 +20,13 @@ Scroll(scroller?: Scroller) ## 属性 -| 名称 | 参数类型 | 描述 | -| -------------- | ---------------------------------------- | ---------------------------------------- | -| scrollable | ScrollDirection | 设置滑动方法。
默认值：ScrollDirection.Vertical | -| 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 | +| 名称 | 参数类型 | 描述 | +| -------------- | --------------------------------------------- | ------------------------------------------------------------ | +| scrollable | ScrollDirection | 设置滑动方法。
默认值：ScrollDirection.Vertical | +| 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.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 2917d91350b4fd82e62f3a2c1092827f452f7c2d..36933274c9dfcf07464e1d8d13c8b4fb81a4a10e 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,10 +5,6 @@ 默认以00：00至23：59的时间区间创建滑动选择器，展示在弹窗上。 -## 权限列表 - -无 - ## TimePickerDialog.show show(options?: TimePickerDialogOptions) @@ -32,7 +28,7 @@ show(options?: TimePickerDialogOptions) @Entry @Component struct TimePickerDialogExample01 { - @State isUseMilitaryTime: boolean = true + @State isUseMilitaryTime: boolean = true; build() { Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, @@ -41,13 +37,13 @@ struct TimePickerDialogExample01 { TimePickerDialog.show({ useMilitaryTime: this.isUseMilitaryTime, onAccept: (value: TimePickerResult) => { - console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)) + console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)); }, onCancel: () => { - console.info("TimePickerDialog:onCancel()") + console.info("TimePickerDialog:onCancel()"); }, onChange: (value: TimePickerResult) => { - console.info("TimePickerDialog:onChange()" + JSON.stringify(value)) + console.info("TimePickerDialog:onChange()" + JSON.stringify(value)); } }) }) @@ -55,13 +51,16 @@ struct TimePickerDialogExample01 { } } ``` + ![zh-cn_image_0000001118642010](figures/zh-cn_image_0000001118642010.gif) + ### 时间滑动选择器（12小时制）示例 + ```ts // xxx.ets @Entry @Component struct TimePickerDialogExample02 { - @State isUseMilitaryTime: boolean = false + @State isUseMilitaryTime: boolean = false; build() { Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, @@ -70,13 +69,13 @@ struct TimePickerDialogExample02 { TimePickerDialog.show({ useMilitaryTime: this.isUseMilitaryTime, onAccept: (value: TimePickerResult) => { - console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)) + console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)); }, onCancel: () => { - console.info("TimePickerDialog:onCancel()") + console.info("TimePickerDialog:onCancel()"); }, onChange: (value: TimePickerResult) => { - console.info("TimePickerDialog:onChange()" + JSON.stringify(value)) + console.info("TimePickerDialog:onChange()" + JSON.stringify(value)); } }) }) @@ -84,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 0f5d4793505cf5fb7d02d223ce5a421b5ef42807..79249387f496311a31decc0f1312452b35d12a7a 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 @@ -14,9 +14,9 @@ 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 e4392200aba5b7b71652061faffa46965eec73fc..6c80865dc312decd7299ce609ab8763eb6607d5a 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 @@ -27,14 +27,21 @@ struct FlexExample { Column({ space: 5 }) { Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%') // 基于主轴基准尺寸 - // flexBasis()值可以是'auto'(默认值)元素本来的大小 ,如果是数字则类似于.width()/.height() ,基于主轴 + // 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%') @@ -42,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%') @@ -54,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%') @@ -69,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 04cf60d25ddc9558e4c1e944b455532fe762d49c..f0ebd348ec68852cc8bcc67d9131c5deacd5a83b 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 @@ -12,7 +12,7 @@ | 名称 | 参数类型 | 描述 | | ------- | ---------------------------------------------------- | ------------------------------------------------------------ | -| 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/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 66c7d73703a3ed5afdb4cffe5ab27bd49e8db131..8f778ea25765381fdd7803aa846e17787366ea82 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 @@ -61,7 +61,7 @@ background: repeating-linear-gradient(direction/angle, color, color, ...); ```css /* 45度夹角，从红色渐变到绿色 */ - background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); + background: linear-gradient(45deg, rgb(255, 0, 0),rgb(0, 255, 0)); ``` ![222](figures/222.PNG) @@ -70,7 +70,7 @@ background: repeating-linear-gradient(direction/angle, color, color, ...); ```css /* 从左向右渐变，在距离左边90px和距离左边360px (600*0.6) 之间270px宽度形成渐变 */ - background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); + background: linear-gradient(to right, rgb(255, 0, 0) 90px, rgb(0, 255, 0) 60%); ``` @@ -82,4 +82,5 @@ background: repeating-linear-gradient(direction/angle, color, color, ...); /* 从左向右重复渐变，重复渐变区域30px（60-30）透明度0.5 */ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); ``` + ![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..60236b7109ffd1345eba17443d154824a79159b8 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 cb3a7c1a186b90c4fd1395d00e363295dd9e91a1..59ce530a620fef49250be9146ef3949ae6404df5 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 @@ -19,8 +19,10 @@ flex-direction: column; margin-top: 20px; margin-left: 30px; + font-weight: 700; } .title-text { + width: 95%; color: #1a1a1a; font-size: 50px; margin-top: 40px; @@ -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 8444150dcd559dee40757a28928039c23c65ffbf..e622fc396f4628d149e97d27e020849c7a8524d7 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组件形成布局。 ``` 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 f645c710a356f4a369c8bda538eccea9649b2ea9..ac829edabd4609f862920a5004cd4dbf394f7109 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属性改变图片样式。