diff --git a/en/application-dev/reference/apis/js-apis-prompt.md b/en/application-dev/reference/apis/js-apis-prompt.md index a7ba5ea9bd9420837a3b204c98aa36835634a681..24d70e98a4d97f58acbf6f4089b36d2b628d304b 100644 --- a/en/application-dev/reference/apis/js-apis-prompt.md +++ b/en/application-dev/reference/apis/js-apis-prompt.md @@ -33,7 +33,7 @@ Shows a toast. ```js prompt.showToast({ message: 'Message Info', - duration: 2000, + duration: 2000 }); ``` @@ -47,7 +47,7 @@ Describes the options for showing the toast. | Name | Type | Mandatory | Description | | -------- | ---------------------------------------- | ---- | ---------------------------------------- | -| message | string\| [Resource](../arkui-ts/ts-types.md#resource)9+ | Yes | Text to display. | +| message | string \| [Resource](../arkui-ts/ts-types.md#resource)9+ | Yes | Text to display. | | duration | number | No | Duration that the toast will remain on the screen. The default value is 1500 ms. The value range is 1500 ms to 10000 ms. If a value less than 1500 ms is set, the default value is used. If the value greater than 10000 ms is set, the upper limit 10000 ms is used.| | bottom | string\| number | No | Distance between the toast border and the bottom of the screen. It does not have an upper limit. The default unit is vp. | @@ -80,11 +80,11 @@ prompt.showDialog({ buttons: [ { text: 'button1', - color: '#000000', + color: '#000000' }, { text: 'button2', - color: '#000000', + color: '#000000' } ], }) @@ -122,11 +122,11 @@ prompt.showDialog({ buttons: [ { text: 'button1', - color: '#000000', + color: '#000000' }, { text: 'button2', - color: '#000000', + color: '#000000' } ] }, (err, data) => { @@ -148,8 +148,8 @@ Describes the options for showing the dialog box. | Name | Type | Mandatory| Description | | ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | -| title | string\| [Resource](../arkui-ts/ts-types.md#resource)9+ | No | Title of the dialog box. | -| message | string\| [Resource](../arkui-ts/ts-types.md#resource)9+ | No | Text body. | +| title | string \| [Resource](../arkui-ts/ts-types.md#resource)9+ | No | Title of the dialog box. | +| message | string \| [Resource](../arkui-ts/ts-types.md#resource)9+ | No | Text body. | | buttons | [[Button](#button),[Button](#button)?,[Button](#button)?] | No | Array of buttons in the dialog box. The array structure is **{text:'button', color: '\#666666'}**. Up to three buttons are supported. The first button is of the **positiveButton** type, the second is of the **negativeButton** type, and the third is of the **neutralButton** type.| ## ShowDialogSuccessResponse @@ -186,11 +186,11 @@ prompt.showActionMenu({ buttons: [ { text: 'item1', - color: '#666666', + color: '#666666' }, { text: 'item2', - color: '#000000', + color: '#000000' }, ] }, (err, data) => { @@ -232,11 +232,11 @@ prompt.showActionMenu({ buttons: [ { text: 'item1', - color: '#666666', + color: '#666666' }, { text: 'item2', - color: '#000000', + color: '#000000' }, ] }) @@ -257,7 +257,7 @@ Describes the options for showing the action menu. | Name | Type | Mandatory| Description | | ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | -| title | string\| [Resource](../arkui-ts/ts-types.md#resource)9+ | No | Title of the text to display. | +| title | string \| [Resource](../arkui-ts/ts-types.md#resource)9+ | No | Title of the text to display. | | buttons | [[Button](#button),[Button](#button)?,[Button](#button)?,[Button](#button)?,[Button](#button)?,[Button](#button)?] | Yes | Array of menu item buttons. The array structure is **{text:'button', color: '\#666666'}**. Up to six buttons are supported. If there are more than six buttons, extra buttons will not be displayed.| ## ActionMenuSuccessResponse @@ -278,5 +278,5 @@ Describes the menu item button in the action menu. | Name | Type | Mandatory | Description | | ----- | ---------------------------------------- | ---- | ------- | -| text | string\| [Resource](../arkui-ts/ts-types.md#resource)9+ | Yes | Button text.| -| color | string\| [Resource](../arkui-ts/ts-types.md#resource)9+ | Yes | Text color of the button.| +| text | string \| [Resource](../arkui-ts/ts-types.md#resource)9+ | Yes | Button text.| +| color | string \| [Resource](../arkui-ts/ts-types.md#resource)9+ | Yes | Text color of the button.| diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164799.jpg b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164799.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d67777413b462cced9313a882aee39b4972f3617 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001173164799.jpg differ diff --git a/en/application-dev/reference/arkui-js/figures/pickerview1.gif b/en/application-dev/reference/arkui-js/figures/picker-view0.gif similarity index 100% rename from en/application-dev/reference/arkui-js/figures/pickerview1.gif rename to en/application-dev/reference/arkui-js/figures/picker-view0.gif diff --git a/en/application-dev/reference/arkui-js/figures/pickerview2.gif b/en/application-dev/reference/arkui-js/figures/picker-view1.gif similarity index 100% rename from en/application-dev/reference/arkui-js/figures/pickerview2.gif rename to en/application-dev/reference/arkui-js/figures/picker-view1.gif diff --git a/en/application-dev/reference/arkui-js/figures/picker-view2.gif b/en/application-dev/reference/arkui-js/figures/picker-view2.gif new file mode 100644 index 0000000000000000000000000000000000000000..4378b63734e5d86c405e928118974250e06d6636 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/picker-view2.gif differ diff --git a/en/application-dev/reference/arkui-js/figures/picker-view3.gif b/en/application-dev/reference/arkui-js/figures/picker-view3.gif new file mode 100644 index 0000000000000000000000000000000000000000..9dea6eba0e015883b0dd8c50f2c9fda934d21d47 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/picker-view3.gif differ diff --git a/en/application-dev/reference/arkui-js/figures/pickerview5.gif b/en/application-dev/reference/arkui-js/figures/picker-view4.gif similarity index 100% rename from en/application-dev/reference/arkui-js/figures/pickerview5.gif rename to en/application-dev/reference/arkui-js/figures/picker-view4.gif diff --git a/en/application-dev/reference/arkui-js/js-components-basic-picker-view.md b/en/application-dev/reference/arkui-js/js-components-basic-picker-view.md index 3f1ac6a278adeaea3059c930e3e5098fa8392374..e5b7dbf697f485fe49ab8a83eb849457d5c66ea1 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-picker-view.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-picker-view.md @@ -1,7 +1,6 @@ # picker-view > **NOTE** -> > This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. The **\** component provides the view that shows an embedded scrollable selector on the screen. @@ -77,7 +76,7 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md | selected-font-size | <length> | 20px | No | Font size of the selected item. The value is of the length type, in pixels. | | disappear-color5+ | <color> | \#ffffff | No | Font color of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total. | | disappear-font-size5+ | <length> | 14px | No | Font size of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total. | -| font-family | string | sans-serif | No | Font family of the selector, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text. | +| font-family | string | sans-serif | No | Font family of the selector, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.| ## Events @@ -138,15 +137,13 @@ Not supported 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%; } ``` @@ -164,8 +161,8 @@ Not supported }, } ``` - ![](figures/pickerview1.gif) - + ![picker-view0](figures/picker-view0.gif) + 2. Time Selector ```html @@ -180,22 +177,16 @@ Not supported ```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%; } ``` @@ -227,16 +218,16 @@ Not supported } ``` - ![](figures/pickerview2.gif) - + ![picker-view1](figures/picker-view1.gif) + 3. Date Selector ```html
- Selected: {{time}} + Selected: {{date}} - +
``` @@ -246,20 +237,13 @@ Not supported 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%; } ``` @@ -270,12 +254,12 @@ Not supported date: "", }, handleChange(data) { - this.date = data.year + "" + data.month + "" + data.day + ""; + this.date = data.year + "/" + data.month + "/" + data.day + ""; }, } ``` + ![picker-view2](figures/picker-view2.gif) - 4. Date and Time Selector ```html @@ -293,20 +277,13 @@ Not supported 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%; } ``` @@ -317,12 +294,12 @@ Not supported datetime: "", }, handleChange(data) { - this.datetime = data.year + "" + data.month + "" + data.day + "" + data.hour + "" + data.minute + ""; + this.datetime = data.year + "/" + data.month + "/" + data.day + "" + data.hour + ":" + data.minute + ""; }, } ``` + ![picker-view3](figures/picker-view3.gif) - 5. Multi-Column Text Selector ```html @@ -341,15 +318,13 @@ Not supported 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%; } ``` @@ -365,8 +340,8 @@ Not supported value: "" }, handleChange(data) { - this.value = "Column: " + data.column + "," + "Value: " + data.newValue + ", Index:" + data.newSelected; + this.value = "Selected: " + data.column + "," + "value: " + data.newValue + ", index:" + data.newSelected; }, } ``` - ![](figures/pickerview5.gif) + ![picker-view4](figures/picker-view4.gif) diff --git a/en/application-dev/reference/arkui-js/js-components-basic-span.md b/en/application-dev/reference/arkui-js/js-components-basic-span.md index bf1c86a78118769e956e06c8290f2229856b3290..ce8df42dc4b88cdaa67be4777e6191a6397732b4 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-span.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-span.md @@ -76,7 +76,7 @@ Not supported } .spanTxt{ color: chartreuse; - font-size: 100px; + font-size: 80px; } ``` diff --git a/en/application-dev/reference/arkui-ts/figures/position.png b/en/application-dev/reference/arkui-ts/figures/position.png index 0c9e34bf611b4d51a49875d71f23fef24d6e2571..f123bc223fa37d1c3d56fb551a357e8e545aa53e 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/position.png and b/en/application-dev/reference/arkui-ts/figures/position.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md index 8b4448a11cd29d2cc44f9b70a650f8a195e18bdd..96dcafda243b4c930476bafbd8d172ab50a49ab2 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md @@ -31,16 +31,16 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type | Description | | ------------------------ | ---------------------------------------- | ---------------------------------------- | -| type | InputType | Input box type.
Default value: **InputType.Normal** | +| type | [InputType](#inputtype) | Input box type.
Default value: **InputType.Normal** | | placeholderColor | [ResourceColor](ts-types.md#resourcecolor) | Placeholder text color.| | placeholderFont | [Font](ts-types.md#font) | Placeholder text font.| -| enterKeyType | EnterKeyType | Type of the Enter key. Currently, only the default value is supported.
Default value: **EnterKeyType.Done**| +| enterKeyType | [EnterKeyType](#enterkeytype) | Type of the Enter key. Currently, only the default value is supported.
Default value: **EnterKeyType.Done**| | caretColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the caret in the text box. | | maxLength | number | Maximum number of characters in the text input. | | inputFilter8+ | {
value: [ResourceStr](ts-types.md#resourcestr),
error?: (value: string) => void
} | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out. The specified regular expression can match single characters, but not strings.
- **value**: regular expression to set.
- **error**: filtered-out content to return when regular expression matching fails.| | copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.| | showPasswordIcon9+ | boolean | Whether to display the show password icon at the end of the password text box.
Default value: **true**| -| style9+ | TextInputStyle | Text input style.
Default value: **TextInputStyle.Default**| +| style9+ | [TextInputStyle](#textinputstyle9) | Text input style.
Default value: **TextInputStyle.Default**| | textAlign9+ | [TextAlign](ts-appendix-enums.md#textalign) | Alignment mode of the text in the text box.
Default value: **TextAlign.Start** | ## EnterKeyType @@ -74,12 +74,12 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the In addition to the [universal events](ts-universal-events-click.md), the following events are supported. -| Name | Description | -| ---------------------------------------- | ---------------------------------------- | -| onChange(callback: (value: string) => void) | Triggered when the input changes. | -| onSubmit(callback: (enterKey: EnterKeyType) => void) | Triggered when the Enter key on the keyboard is pressed. The return value is the current type of the Enter key. | -| onEditChanged(callback: (isEditing: boolean) => void)(deprecated) | Triggered when the input status changes. Sicne API version 8, **onEditChange** is recommended. | -| onEditChange(callback: (isEditing: boolean) => void)8+ | Triggered when the input status changes. If the value of **isEditing** is **true**, text input is in progress. | +| Name | Description | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| onChange(callback: (value: string) => void) | Triggered when the input changes.
**value**: text content.| +| onSubmit(callback: (enterKey: EnterKeyType) => void) | Triggered when the Enter key on the keyboard is pressed. The return value is the current type of the Enter key.
**enterKeyType**: type of the Enter key. For details, see [EnterKeyType](#enterkeytype).| +| onEditChanged(callback: (isEditing: boolean) => void)(deprecated) | Triggered when the input status changes. Since API version 8, **onEditChange** is recommended.| +| onEditChange(callback: (isEditing: boolean) => void)8+ | Triggered when the input status changes. If the value of **isEditing** is **true**, text input is in progress. | | onCopy(callback:(value: string) => void)8+ | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.
**value**: text to be copied.| | onCut(callback:(value: string) => void)8+ | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.
**value**: text to be cut.| | onPaste(callback:(value: string) => void)8+ | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.
**value**: text to be pasted.| @@ -92,7 +92,7 @@ Implements the controller of the **\** component. ``` controller: TextInputController = new TextInputController() ``` -### caretPosition +### caretPosition8+ caretPosition(value: number): void diff --git a/en/application-dev/ui/ui-js-animate-component.md b/en/application-dev/ui/ui-js-animate-component.md index 9d51f17b287ef56dfc8cea9b880c129fb0fe7bfc..c1dc6dc097cc3330ba697d7a474593d306011d07 100644 --- a/en/application-dev/ui/ui-js-animate-component.md +++ b/en/application-dev/ui/ui-js-animate-component.md @@ -34,28 +34,28 @@ Call the **animate** method to obtain an animation object, which supports animat ```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); // Obtain the animation object. - }, - 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); // Obtain the animation object. + this.animation.play(); + } } ``` @@ -173,36 +173,36 @@ Set the animation attributes by using the **options** parameter. ```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/en/application-dev/ui/ui-js-animate-transform.md b/en/application-dev/ui/ui-js-animate-transform.md index 29882f56200d45615534142f4b2fdcac60a0c77b..c1ff07334c326fbe9e34b1284f8fe1bbad651080 100644 --- a/en/application-dev/ui/ui-js-animate-transform.md +++ b/en/application-dev/ui/ui-js-animate-transform.md @@ -39,8 +39,8 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p height: 428px; background-color: #860303; transform: rotate(45deg); - margin-top: 284px; - margin-left: 148px; + margin-top: 290px; + margin-left: 145px; } .content{ margin-top: 500px; @@ -53,7 +53,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p width: 100px; height: 150px; background-color: #1033d9; - transform: translate(150px,-137px); + transform: translate(150px,-152px); } .window{ z-index: 1; @@ -86,7 +86,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p height: 100px; border-radius: 15px; background-color: #9a7404; - transform: translate(200px,-710px) skewX(-5deg); + transform: translate(200px,-700px) skewX(-5deg); } ``` diff --git a/en/application-dev/ui/ui-js-components-canvas.md b/en/application-dev/ui/ui-js-components-canvas.md index b1a174543cef913d52b0490cafb27c76630517e1..a8a248315968863e6ee9f3374f233caa5b67f29d 100644 --- a/en/application-dev/ui/ui-js-components-canvas.md +++ b/en/application-dev/ui/ui-js-components-canvas.md @@ -61,6 +61,8 @@ Set **width**, **height**, **background-color**, and **border** of the **<can justify-content: center; align-items: center; background-color: #F1F3F5; + width: 100%; + height: 100%; } canvas{ width: 500px; diff --git a/en/application-dev/ui/ui-js-components-grid.md b/en/application-dev/ui/ui-js-components-grid.md index cdb1dbbb4dca0cdb80ec0b49c22879cae4af19e1..426cdeb6f223daeded040c11afb9cd85c73e29b0 100644 --- a/en/application-dev/ui/ui-js-components-grid.md +++ b/en/application-dev/ui/ui-js-components-grid.md @@ -14,7 +14,7 @@ Create a **\** component in the .hml file under **pages/index**
+ 10%; margin-right: 10%;"> @@ -52,11 +52,11 @@ Touch the **\** component to call the **getColumns**, **getColum + 40%; margin-right: 40%;"> + 25%; margin-right: 25%;"> + 10%; margin-right: 10%;">
diff --git a/en/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md b/en/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md index 4475e2b9bc2fb000c5a31ff09086e7a4bb71b122..22e3a6d598b8fdd0aa986c15c0671e191be2da7a 100644 --- a/en/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md +++ b/en/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md @@ -77,7 +77,7 @@ Invoked each time when a page is hidden. This callback is used in the routing pr onBackPress?(): void -Invoked when a user clicks the back button. Only the custom components decorated by **@Entry** take effect. If **true** is returned, the page processes the return logic and no page routing is performed. If **false** is returned, the default route return logic is used. If the return value is not set, the value **false** is used. +Invoked when a user clicks the back button. This callback takes effect only for the custom components decorated by **@Entry**. **Example 2:**