diff --git a/zh-cn/application-dev/reference/apis/js-apis-prompt.md b/zh-cn/application-dev/reference/apis/js-apis-prompt.md index 17b351fa99b0e42983e25de36ea7d64d9e207c61..ea3d513f6271e4d8f426ea22e83035b45e62527c 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-prompt.md +++ b/zh-cn/application-dev/reference/apis/js-apis-prompt.md @@ -32,7 +32,7 @@ showToast(options: ShowToastOptions): void ```js prompt.showToast({ message: 'Message Info', - duration: 2000, + duration: 2000 }); ``` @@ -79,11 +79,11 @@ prompt.showDialog({ buttons: [ { text: 'button1', - color: '#000000', + color: '#000000' }, { text: 'button2', - color: '#000000', + color: '#000000' } ], }) @@ -121,11 +121,11 @@ prompt.showDialog({ buttons: [ { text: 'button1', - color: '#000000', + color: '#000000' }, { text: 'button2', - color: '#000000', + color: '#000000' } ] }, (err, data) => { @@ -185,11 +185,11 @@ prompt.showActionMenu({ buttons: [ { text: 'item1', - color: '#666666', + color: '#666666' }, { text: 'item2', - color: '#000000', + color: '#000000' }, ] }, (err, data) => { @@ -231,11 +231,11 @@ prompt.showActionMenu({ buttons: [ { text: 'item1', - color: '#666666', + color: '#666666' }, { text: 'item2', - color: '#000000', + color: '#000000' }, ] }) diff --git a/zh-cn/application-dev/reference/apis/js-apis-promptAction.md b/zh-cn/application-dev/reference/apis/js-apis-promptAction.md index 1aabdbfb8d84e7fa1897eff5e84331830dd2ad6e..ca89a894bc9f83c3aafe6d9187eb8172eb038e2b 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-promptAction.md +++ b/zh-cn/application-dev/reference/apis/js-apis-promptAction.md @@ -40,7 +40,7 @@ showToast(options: ShowToastOptions): void try { promptAction.showToast({ message: 'Message Info', - duration: 2000, + duration: 2000 }); } catch (error) { console.error(`showToast args error code is ${error.code}, message is ${error.message}`); @@ -100,11 +100,11 @@ try { buttons: [ { text: 'button1', - color: '#000000', + color: '#000000' }, { text: 'button2', - color: '#000000', + color: '#000000' } ], }) @@ -154,11 +154,11 @@ try { buttons: [ { text: 'button1', - color: '#000000', + color: '#000000' }, { text: 'button2', - color: '#000000', + color: '#000000' } ] }, (err, data) => { @@ -229,11 +229,11 @@ try { buttons: [ { text: 'item1', - color: '#666666', + color: '#666666' }, { text: 'item2', - color: '#000000', + color: '#000000' }, ] }, (err, data) => { @@ -287,11 +287,11 @@ try { buttons: [ { text: 'item1', - color: '#666666', + color: '#666666' }, { text: 'item2', - color: '#000000', + color: '#000000' }, ] }) diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-prompt.md b/zh-cn/application-dev/reference/apis/js-apis-system-prompt.md index a79170a9ff826d0cab1199ef9869f0b663e91edc..22cf561dce71b216d1fff1db959f7dcf6cad7be4 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-system-prompt.md +++ b/zh-cn/application-dev/reference/apis/js-apis-system-prompt.md @@ -38,7 +38,7 @@ export default { showToast() { prompt.showToast({ message: 'Message Info', - duration: 2000, + duration: 2000 }); } } @@ -67,11 +67,11 @@ export default { showDialog() { prompt.showDialog({ title: 'Title Info', - message: 'Message Info', + message: 'Message Info', buttons: [ { text: 'button', - color: '#666666', + color: '#666666' }, ], success: function(data) { @@ -110,12 +110,12 @@ export default { buttons: [ { text: 'item1', - color: '#666666', + color: '#666666' }, { text: 'item2', - color: '#000000', - }, + color: '#000000' + }, ], success: function(tapIndex) { console.log('dialog success callback，click button : ' + tapIndex); diff --git a/zh-cn/application-dev/reference/arkui-js/figures/picker-view0.gif b/zh-cn/application-dev/reference/arkui-js/figures/picker-view0.gif new file mode 100644 index 0000000000000000000000000000000000000000..aa3c310fb62a5845d06f41a31435e4406a7db2c7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/picker-view0.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/picker-view1.gif b/zh-cn/application-dev/reference/arkui-js/figures/picker-view1.gif new file mode 100644 index 0000000000000000000000000000000000000000..332d2fdf640c76c1f5520e945f0abf23bf5c5d8e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/picker-view1.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/picker-view2.gif b/zh-cn/application-dev/reference/arkui-js/figures/picker-view2.gif new file mode 100644 index 0000000000000000000000000000000000000000..f2578bae25531b06d940db79a79e0f84330c1b80 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/picker-view2.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/picker-view3.gif b/zh-cn/application-dev/reference/arkui-js/figures/picker-view3.gif new file mode 100644 index 0000000000000000000000000000000000000000..17e169e319095895bf41b2165d2bcb63ac264ecb Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/picker-view3.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/picker-view4.gif b/zh-cn/application-dev/reference/arkui-js/figures/picker-view4.gif new file mode 100644 index 0000000000000000000000000000000000000000..b647a2e1282731770c742bc9ebab12d35962560b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/picker-view4.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/pickerview1.gif b/zh-cn/application-dev/reference/arkui-js/figures/pickerview1.gif deleted file mode 100644 index dc71f1453d4bc1349446da9139f611c3855a93b7..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/pickerview1.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/pickerview2.gif b/zh-cn/application-dev/reference/arkui-js/figures/pickerview2.gif deleted file mode 100644 index e272b74a3bdd438b98ac905cc33757649b27fc70..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/pickerview2.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/pickerview3.gif b/zh-cn/application-dev/reference/arkui-js/figures/pickerview3.gif deleted file mode 100644 index 0e028d05a8bb9b28dd8be35949926cb4ae603002..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/pickerview3.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/pickerview4.gif b/zh-cn/application-dev/reference/arkui-js/figures/pickerview4.gif deleted file mode 100644 index 4a31311b842f6783fe18c2ba8c64899f76400ba9..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/pickerview4.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/pickerview5.gif b/zh-cn/application-dev/reference/arkui-js/figures/pickerview5.gif deleted file mode 100644 index 9c17863bafe1ea5cbdd7fa663ba7dfad8e4f6e45..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/pickerview5.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164799.jpg b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164799.jpg index e5bd1c300d6de63a6627c1610ec09ddf89aed768..d67777413b462cced9313a882aee39b4972f3617 100644 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164799.jpg and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173164799.jpg differ diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md index 5a7d79339a11fa55cc5dee82e03e4af57c93967b..d5311a381b6e5cc61d8e6b10b56109645a68039d 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md @@ -137,15 +137,13 @@ flex-direction: column; justify-content: center; align-items: center; - left: 0px; - top: 0px; - width: 454px; - height: 454px; + width: 100%; + height: 50%; } .title { font-size: 30px; text-align: center; - margin-top: 20px; + margin-top: 50%; } ``` @@ -163,8 +161,8 @@ }, } ``` - ![](figures/pickerview1.gif) - + ![picker-view0](figures/picker-view0.gif) + 2. 时间选择器 ```html @@ -179,22 +177,16 @@ ```css /* xxx.css */ .container { - flex-direction: column; - justify-content: center; - align-items: center; - left: 0px; - top: 0px; - width: 454px; - height: 454px; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 50%; } .title { - font-size: 30px; - text-align: center; - } - .time-picker { - width: 500px; - height: 400px; - margin-top: 20px; + font-size: 31px; + text-align: center; + margin-top: 50%; } ``` @@ -226,16 +218,16 @@ } ``` - ![](figures/pickerview2.gif) - + ![picker-view1](figures/picker-view1.gif) + 3. 日期选择器 ```html
- Selected：{{time}} + Selected：{{date}} - +
``` @@ -245,20 +237,13 @@ flex-direction: column; justify-content: center; align-items: center; - left: 0px; - top: 0px; - width: 454px; - height: 454px; + width: 100%; + height: 50%; } .title { - font-size: 30px; + font-size: 31px; text-align: center; - margin-top: 20px; - } - .date-picker { - width: 500px; - height: 400px; - margin-top: 50px; + margin-top: 50%; } ``` @@ -273,8 +258,8 @@ }, } ``` - ![](figures/pickerview3.gif) - + ![picker-view2](figures/picker-view2.gif) + 4. 日期时间选择器 ```html @@ -292,20 +277,13 @@ flex-direction: column; justify-content: center; align-items: center; - left: 0px; - top: 0px; - width: 500px; - height: 454px; + width: 100%; + height: 50%; } .title { - font-size: 30px; + font-size: 31px; text-align: center; - margin-top: 20px; - } - .date-picker { - width: 500px; - height: 400px; - margin-top: 50px; + margin-top: 50%; } ``` @@ -320,8 +298,8 @@ }, } ``` - ![](figures/pickerview4.gif) - + ![picker-view3](figures/picker-view3.gif) + 5. 多列文本选择器 ```html @@ -340,15 +318,13 @@ flex-direction: column; justify-content: center; align-items: center; - left: 0px; - top: 0px; - width: 500px; - height: 454px; + width: 100%; + height: 50%; } .title { - font-size: 30px; + font-size: 31px; text-align: center; - margin-top: 20px; + margin-top: 50%; } ``` @@ -368,4 +344,4 @@ }, } ``` - ![](figures/pickerview5.gif) \ No newline at end of file + ![picker-view4](figures/picker-view4.gif) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md index 36bd2cae87bb31384245bd8f0bb9ace33d35f7a2..bd49d9c4b67999c46e9d3bc3a0548d4818c5b292 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md @@ -74,7 +74,7 @@ } .spanTxt{ color: chartreuse; - font-size: 100px; + font-size: 80px; } ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/position.png b/zh-cn/application-dev/reference/arkui-ts/figures/position.png index 0c9e34bf611b4d51a49875d71f23fef24d6e2571..f123bc223fa37d1c3d56fb551a357e8e545aa53e 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/position.png and b/zh-cn/application-dev/reference/arkui-ts/figures/position.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md index 8853f258c7bb80d731dcaf6d78319d005cd94d43..8f9a28d3e5e49f695200372404fb9fdedcf40072 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md @@ -31,16 +31,16 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te | 名称 | 参数类型 | 描述 | | ------------------------ | ---------------------------------------- | ---------------------------------------- | -| type | InputType | 设置输入框类型。
默认值：InputType.Normal | +| type | [InputType](#inputtype枚举说明) | 设置输入框类型。
默认值：InputType.Normal | | placeholderColor | [ResourceColor](ts-types.md#resourcecolor) | 设置placeholder文本颜色。| | placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式。 | -| enterKeyType | EnterKeyType | 设置输入法回车键类型，目前OpenHarmony输入法仅支持默认类型显示。
默认值：EnterKeyType.Done | +| enterKeyType | [EnterKeyType](#enterkeytype枚举说明) | 设置输入法回车键类型，目前OpenHarmony输入法仅支持默认类型显示。
默认值：EnterKeyType.Done | | caretColor | [ResourceColor](ts-types.md#resourcecolor) | 设置输入框光标颜色。 | | maxLength | number | 设置文本的最大输入字符数。 | | inputFilter8+ | {
value: [ResourceStr](ts-types.md#resourcestr),
error?: (value: string) => void
} | 正则表达式，匹配表达式的输入允许显示，不匹配的输入将被过滤。目前仅支持单个字符匹配，不支持字符串匹配。
- value：设置正则表达式。
- error：正则匹配失败时，返回被过滤的内容。 | | copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置输入的文本是否可复制。 | | showPasswordIcon9+ | boolean | 密码输入模式时，输入框末尾的图标是否显示。
默认值：true | -| style9+ | TextInputStyle | 设置输入框为默认风格或内联输入风格。
默认值：TextInputStyle.Default | +| style9+ | [TextInputStyle](#textinputstyle9枚举说明) | 设置输入框为默认风格或内联输入风格。
默认值：TextInputStyle.Default | | textAlign9+ | [TextAlign](ts-appendix-enums.md#textalign) | 设置输入文本在输入框中的对齐方式。
默认值：TextAlign.Start | ## EnterKeyType枚举说明 @@ -74,12 +74,12 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te 除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： -| 名称 | 功能描述 | -| ---------------------------------------- | ---------------------------------------- | -| onChange(callback: (value: string) => void) | 输入内容发生变化时，触发该回调。 | -| onSubmit(callback: (enterKey: EnterKeyType) => void) | 按下输入法回车键触发该回调，返回值为当前输入法回车键的类型。 | -| onEditChanged(callback: (isEditing: boolean) => void)(deprecated) | 输入状态变化时，触发该回调。从API 8开始，建议使用onEditChange。 | -| onEditChange(callback: (isEditing: boolean) => void)8+ | 输入状态变化时，触发该回调。isEditing为true表示正在输入。 | +| 名称 | 功能描述 | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| onChange(callback: (value: string) => void) | 输入内容发生变化时，触发该回调。
value：输入的文本内容。 | +| onSubmit(callback: (enterKey: EnterKeyType) => void) | 按下输入法回车键触发该回调，返回值为当前输入法回车键的类型。
enterKeyType：输入法回车键类型。具体类型见[EnterKeyType枚举说明](#enterkeytype枚举说明)。 | +| onEditChanged(callback: (isEditing: boolean) => void)(deprecated) | 输入状态变化时，触发该回调。从API 8开始，建议使用onEditChange。 | +| onEditChange(callback: (isEditing: boolean) => void)8+ | 输入状态变化时，触发该回调。isEditing为true表示正在输入。 | | onCopy(callback:(value: string) => void)8+ | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发该回调。
value：复制的文本内容。 | | onCut(callback:(value: string) => void)8+ | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发该回调。
value：剪切的文本内容。 | | onPaste(callback:(value: string) => void)8+ | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发该回调。
value：粘贴的文本内容。 | 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 022320667450cd07ba3a1cb3657ef09878b00187..07cabbfc8758decdf6694748551014c58cd86921 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-component.md +++ b/zh-cn/application-dev/ui/ui-js-animate-component.md @@ -33,28 +33,28 @@ ```js /* xxx.js */ export default { - data: { - animation: '', - }, - onInit() { - }, - onShow() { - var options = { - duration: 1500, - }; - var frames = [ - { - width:200,height:200, - }, - { - width:300,height:300, - } - ]; - this.animation = this.$element('content').animate(frames, options); //获取动画对象 - }, - Show() { - this.animation.play(); - } + data: { + animation: '', + options: {}, + frames: {} + }, + onInit() { + this.options = { + duration: 1500, + }; + this.frames = [ + { + width: 200, height: 200, + }, + { + width: 300, height: 300, + } + ]; + }, + Show() { + this.animation = this.$element('content').animate(this.frames, this.options); //获取动画对象 + this.animation.play(); + } } ``` @@ -172,36 +172,36 @@ export default { ```js /* xxx.js */ export default { - data: { - animation: '', - }, - onInit() { - }, - onShow() { - var options = { - duration: 1500, - easing: 'ease-in', - delay: 5, - iterations: 2, - direction: 'normal', - }; - var frames = [ - { - transform: { - translate: '-150px -0px' - } - }, - { - transform: { - translate: '150px 0px' - } - } - ]; - this.animation = this.$element('content').animate(frames, options); - }, - Show() { - this.animation.play(); - } + data: { + animation: '', + options: {}, + frames: {} + }, + onInit() { + this.options = { + duration: 1500, + easing: 'ease-in', + delay: 5, + iterations: 2, + direction: 'normal', + }; + this.frames = [ + { + transform: { + translate: '-150px -0px' + } + }, + { + transform: { + translate: '150px 0px' + } + } + ]; + }, + Show() { + this.animation = this.$element('content').animate(this.frames, this.options); + this.animation.play(); + } } ``` diff --git a/zh-cn/application-dev/ui/ui-js-animate-transform.md b/zh-cn/application-dev/ui/ui-js-animate-transform.md index 9460bffd74de6c155d86afd32dc7904feed5e6f5..33ed493f2942ffafe5530d33e76a6955ac2f8f00 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-transform.md +++ b/zh-cn/application-dev/ui/ui-js-animate-transform.md @@ -38,8 +38,8 @@ height: 428px; background-color: #860303; transform: rotate(45deg); - margin-top: 284px; - margin-left: 148px; + margin-top: 290px; + margin-left: 145px; } .content{ margin-top: 500px; @@ -52,7 +52,7 @@ width: 100px; height: 150px; background-color: #1033d9; - transform: translate(150px,-137px); + transform: translate(150px,-152px); } .window{ z-index: 1; @@ -85,7 +85,7 @@ height: 100px; border-radius: 15px; background-color: #9a7404; - transform: translate(200px,-710px) skewX(-5deg); + transform: translate(200px,-700px) skewX(-5deg); } ``` diff --git a/zh-cn/application-dev/ui/ui-js-components-canvas.md b/zh-cn/application-dev/ui/ui-js-components-canvas.md index 7f0cf3f495bca68b05dab2003e74d708d8117d64..cda2e7854144a919dc8a3b687a07adc84b136e8b 100644 --- a/zh-cn/application-dev/ui/ui-js-components-canvas.md +++ b/zh-cn/application-dev/ui/ui-js-components-canvas.md @@ -60,6 +60,8 @@ Canvas组件设置宽（width）、高（height）、背景色（background-colo justify-content: center; align-items: center; background-color: #F1F3F5; + width: 100%; + height: 100%; } canvas{ width: 500px; 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 91997100ed7e5f955fb11bde6a4eb36be4495dfb..4786eb03b1f3f9b4b95c44a7249e2222dc04cd3c 100644 --- a/zh-cn/application-dev/ui/ui-js-components-grid.md +++ b/zh-cn/application-dev/ui/ui-js-components-grid.md @@ -14,7 +14,7 @@
+ 10%; margin-right: 10%;"> @@ -51,11 +51,11 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方 + 40%; margin-right: 40%;"> + 25%; margin-right: 25%;"> + 10%; margin-right: 10%;">
diff --git a/zh-cn/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md b/zh-cn/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md index a4fd8f633c2f4e127f0f574c979fc51755f52c0b..4b465482de1abb9ee8be2a5a5357714b9b806f29 100644 --- a/zh-cn/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md +++ b/zh-cn/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md @@ -77,7 +77,7 @@ onPageHide?(): void onBackPress?(): void -当用户点击返回按钮时触发，仅@Entry修饰的自定义组件生效。返回true表示页面自己处理返回逻辑，不进行页面路由，返回false表示使用默认的路由返回逻辑。不设置返回值按照false处理。 +当用户点击返回按钮时触发，仅@Entry修饰的自定义组件生效。 **示例2：**