diff --git a/en/application-dev/reference/arkui-js/figures/screenshot-8.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125162.png similarity index 100% rename from en/application-dev/reference/arkui-js/figures/screenshot-8.png rename to en/application-dev/reference/arkui-js/figures/en-us_image_0000001127125162.png diff --git a/en/application-dev/reference/arkui-js/figures/smoothoff.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001167952236.png similarity index 100% rename from en/application-dev/reference/arkui-js/figures/smoothoff.png rename to en/application-dev/reference/arkui-js/figures/en-us_image_0000001167952236.png diff --git a/en/application-dev/reference/arkui-js/figures/ellipse.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001214823665.png similarity index 100% rename from en/application-dev/reference/arkui-js/figures/ellipse.png rename to en/application-dev/reference/arkui-js/figures/en-us_image_0000001214823665.png diff --git a/en/application-dev/reference/arkui-js/figures/text.png b/en/application-dev/reference/arkui-js/figures/js-text.png similarity index 100% rename from en/application-dev/reference/arkui-js/figures/text.png rename to en/application-dev/reference/arkui-js/figures/js-text.png diff --git a/en/application-dev/reference/arkui-js/figures/pickerview3.gif b/en/application-dev/reference/arkui-js/figures/pickerview3.gif new file mode 100644 index 0000000000000000000000000000000000000000..0e028d05a8bb9b28dd8be35949926cb4ae603002 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/pickerview3.gif differ diff --git a/en/application-dev/reference/arkui-js/figures/pickerview4.gif b/en/application-dev/reference/arkui-js/figures/pickerview4.gif new file mode 100644 index 0000000000000000000000000000000000000000..4a31311b842f6783fe18c2ba8c64899f76400ba9 Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/pickerview4.gif differ 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..004c067110c4b14f0ebd7b77b812ada4b86d81f5 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 @@ -121,252 +120,232 @@ Not supported ## Example -1. Text Selector - ```html - -
- - Selected value: {{value}} Selected index: {{index}} - - -
- ``` - - ```css - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - left: 0px; - top: 0px; - width: 454px; - height: 454px; - } - .title { - font-size: 30px; - text-align: center; - margin-top: 20px; - } - ``` - - ```js - /* xxx.js */ - export default { - data: { - options: ['Option 1','Option 2','Option 3'], - value: "Option 1", - index: 0 - }, - handleChange(data) { - this.value = data.newValue; - this.index = data.newSelected; - }, - } - ``` - ![](figures/pickerview1.gif) - -2. Time Selector - ```html - -
- - Selected: {{time}} - - -
- ``` - - ```css - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - left: 0px; - top: 0px; - width: 454px; - height: 454px; - } - .title { - font-size: 30px; - text-align: center; - } - .time-picker { - width: 500px; - height: 400px; - margin-top: 20px; - } - ``` - - ```js - /* xxx.js */ - export default { - data: { - defaultTime: "", - time: "", - }, - onInit() { - this.defaultTime = this.now(); - }, - handleChange(data) { - this.time = this.concat(data.hour, data.minute); - }, - now() { - const date = new Date(); - const hours = date.getHours(); - const minutes = date.getMinutes(); - return this.concat(hours, minutes); - }, - fill(value) { - return (value > 9 ? "" : "0") + value; - }, - concat(hours, minutes) { - return `${this.fill(hours)}:${this.fill(minutes)}`; - }, - } - ``` - - ![](figures/pickerview2.gif) - -3. Date Selector - ```html - -
- - Selected: {{time}} - - -
- ``` - - ```css - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - left: 0px; - top: 0px; - width: 454px; - height: 454px; - } - .title { - font-size: 30px; - text-align: center; - margin-top: 20px; - } - .date-picker { - width: 500px; - height: 400px; - margin-top: 50px; - } - ``` - - ```js - /* xxx.js */ - export default { - data: { - date: "", - }, - handleChange(data) { - this.date = data.year + "" + data.month + "" + data.day + ""; - }, - } - ``` - - -4. Date and Time Selector - ```html - -
- - Selected: {{datetime}} - - -
- ``` - - ```css - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - left: 0px; - top: 0px; - width: 500px; - height: 454px; - } - .title { - font-size: 30px; - text-align: center; - margin-top: 20px; - } - .date-picker { - width: 500px; - height: 400px; - margin-top: 50px; - } - ``` - - ```js - /* xxx.js */ - export default { - data: { - datetime: "", - }, - handleChange(data) { - this.datetime = data.year + "" + data.month + "" + data.day + "" + data.hour + "" + data.minute + ""; - }, - } - ``` - - -5. Multi-Column Text Selector - - ```html - -
- - Selected: {{ value }} - - -
- ``` - - ```css - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - left: 0px; - top: 0px; - width: 500px; - height: 454px; - } - .title { - font-size: 30px; - text-align: center; - margin-top: 20px; - } - ``` - - ```js - /* xxx.js */ - export default { - data: { - multitext: [ - [1, 2, 3], - [4, 5, 6], - [7, 8, 9], - ], - value: "" - }, - handleChange(data) { - this.value = "Column: " + data.column + "," + "Value: " + data.newValue + ", Index:" + data.newSelected; - }, - } - ``` - ![](figures/pickerview5.gif) +### Text Selector + +```html + +
+ + Selected value: {{value}} Selected index: {{index}} + + +
+``` + +```css +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 50%; +} +.title { + font-size: 30px; + text-align: center; + margin-top: 50%; +} +``` + +```js +/* xxx.js */ +export default { + data: { + options: ['Option 1','Option 2','Option 3'], + value: "Option 1", + index: 0 + }, + handleChange(data) { + this.value = data.newValue; + this.index = data.newSelected; + }, +} +``` +![picker-view0](figures/pickerview1.gif) + +### Time Selector + +```html + +
+ + Selected: {{time}} + + +
+``` + +```css +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 50%; +} +.title { + font-size: 31px; + text-align: center; + margin-top: 50%; +} +``` + +```js +/* xxx.js */ +export default { + data: { + defaultTime: "", + time: "", + }, + onInit() { + this.defaultTime = this.now(); + }, + handleChange(data) { + this.time = this.concat(data.hour, data.minute); + }, + now() { + const date = new Date(); + const hours = date.getHours(); + const minutes = date.getMinutes(); + return this.concat(hours, minutes); + }, + fill(value) { + return (value > 9 ? "" : "0") + value; + }, + concat(hours, minutes) { + return `${this.fill(hours)}:${this.fill(minutes)}`; + }, +} +``` + +![picker-view1](figures/pickerview2.gif) + +### Date Selector + +```html + +
+ + Selected: {{date}} + + +
+``` + +```css +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 50%; +} +.title { + font-size: 31px; + text-align: center; + margin-top: 50%; +} +``` + +```js +/* xxx.js */ +export default { + data: { + date: "", + }, + handleChange(data) { + this.date = data.year + "/" + data.month + "/" + data.day + ""; + }, +} +``` +![picker-view2](figures/pickerview3.gif) + +### Date and Time Selector + +```html + +
+ + Selected: {{datetime}} + + +
+``` + +```css +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 50%; +} +.title { + font-size: 31px; + text-align: center; + margin-top: 50%; +} +``` + +```js +/* xxx.js */ +export default { + data: { + datetime: "", + }, + handleChange(data) { + this.datetime = data.year + "/" + data.month + "/" + data.day + "" + data.hour + ":" + data.minute + ""; + }, +} +``` +![picker-view3](figures/pickerview4.gif) + +### Multi-Column Text Selector + +```html + +
+ + Selected: {{ value }} + + +
+``` + +```css +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 50%; +} +.title { + font-size: 31px; + text-align: center; + margin-top: 50%; +} +``` + +```js +/* xxx.js */ +export default { + data: { + multitext: [ + [1, 2, 3], + [4, 5, 6], + [7, 8, 9], + ], + value: "" + }, + handleChange(data) { + this.value = "Column: " + data.column + "," + "Value: " + data.newValue + ", Index:" + data.newSelected; + }, +} +``` +![picker-view4](figures/pickerview5.gif) \ No newline at end of file diff --git a/en/application-dev/reference/arkui-js/js-components-basic-text.md b/en/application-dev/reference/arkui-js/js-components-basic-text.md index 2509a3a6bcc556e19d1393ed80acad3d28c91fb4..f41e600f15ed6388f89c4d0267463b641b1576a7 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-text.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-text.md @@ -76,7 +76,6 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support ## Example -1. ```html
@@ -137,4 +136,4 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support ``` -![en-us_image_0000001167823076](figures/text.png) +![en-us_image_0000001167823076](figures/js-text.png) diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md index ceefb977f290e2f59c5234c8e2eb99b61f0b9cd2..fafe1a434c77a1a069a6337bb92479ca0acce3d3 100644 --- a/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md +++ b/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md @@ -43,7 +43,7 @@ - Anti-aliasing enabled - ![screenshot-8](figures/screenshot-8.png) + ![en-us_image_0000001127125162](figures/en-us_image_0000001127125162.png) ## Attributes @@ -558,7 +558,7 @@ export default { } ``` -![smoothoff](figures/smoothoff.png) +![en-us_image_0000001167952236](figures/en-us_image_0000001167952236.png) @@ -865,8 +865,8 @@ Moves a drawing path to a target position on the canvas. | Name | Type | Description | | ---- | ------ | --------- | -| x | number | X-coordinate of the target position.| -| y | number | Y-coordinate of the target position.| +| x | number | X-coordinate of the target position.
Unit: vp| +| y | number | Y-coordinate of the target position.
Unit: vp| **Example** ```html @@ -902,8 +902,8 @@ Connects the current point to a target position using a straight line. | Name | Type | Description | | ---- | ------ | --------- | -| x | number | X-coordinate of the target position.| -| y | number | Y-coordinate of the target position.| +| x | number | X-coordinate of the target position.
Unit: vp| +| y | number | Y-coordinate of the target position.
Unit: vp| **Example** ```html @@ -1026,7 +1026,7 @@ Draws a cubic bezier curve on the canvas. ```html
- +
``` @@ -1204,7 +1204,7 @@ Draws an ellipse in the specified rectangular region on the canvas. } ``` - ![ellipse](figures/ellipse.png) + ![en-us_image_0000001214823665](figures/en-us_image_0000001214823665.png) ### rect diff --git a/en/application-dev/reference/arkui-js/js-components-container-list-item-group.md b/en/application-dev/reference/arkui-js/js-components-container-list-item-group.md index 1a9fa13727b5fbd31d257379ede19e045df95cfa..5e6fc80bf83efec488cb5e637c2352a11a67466f 100644 --- a/en/application-dev/reference/arkui-js/js-components-container-list-item-group.md +++ b/en/application-dev/reference/arkui-js/js-components-container-list-item-group.md @@ -31,7 +31,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri > **NOTE** > -> **id** in the universal attributes is used to identify a group. The input parameters of related functions and event information in the list also use **id** to uniquely identify a group. +> The universal attribute **id** is used to identify a group. The input parameters of related functions and event information in the list also use **id** to uniquely identify a group. ## Styles @@ -48,7 +48,7 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported. -| Name | Name | Description | +| Name | Parameter | Description | | ------------- | ---------------------------------- | ---------------------------------------- | | groupclick | { groupid: string } | Triggered when a group is clicked.
**groupid**: ID of the group that is clicked. | | groupcollapse | { groupid: string } | Triggered when a group is collapsed.
**groupid**: ID of the group that is collapsed.
If the parameter is not carried or **groupid** is left empty, all groups are collapsed.| @@ -124,50 +124,57 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support ```js // xxx.js -import prompt from '@system.prompt'; +import promptAction from '@ohos.promptAction'; export default { - data: { - direction: 'column', - list: [], - listAdd: [] - }, - onInit() { - this.list = [] - this.listAdd = [] - for (var i = 1; i <= 3; i++) { - var dataItem = { - value: 'GROUP' + i, - }; - this.list.push(dataItem); + data: { + direction: 'column', + list: [], + listAdd: [] + }, + onInit() { + this.list = [] + this.listAdd = [] + for (var i = 1; i <= 3; i++) { + var dataItem = { + value: 'GROUP' + i, + }; + this.list.push(dataItem); + } + }, + collapseOne(e) { + this.$element('mylist').collapseGroup({ + groupid: 'GROUP1' + }) + }, + expandOne(e) { + this.$element('mylist').expandGroup({ + groupid: 'GROUP1' + }) + }, + collapseAll(e) { + this.$element('mylist').collapseGroup({ + groupid: '' + }) + }, + expandAll(e) { + this.$element('mylist').expandGroup({ + groupid: '' + }) + }, + collapse(e) { + promptAction.showToast({ + message: 'Close ' + e.groupid + }) + }, + expand(e) { + promptAction.showToast({ + message: 'Open ' + e.groupid + }) } - }, - collapseOne(e) { - this.$element('mylist').collapseGroup({ - groupid: 'GROUP1' - }) - }, - expandOne(e) { - this.$element('mylist').expandGroup({ - groupid: 'GROUP1' - }) - }, - collapseAll(e) { - this.$element('mylist').collapseGroup() - }, - expandAll(e) { - this.$element('mylist').expandGroup() - }, - collapse(e) { - prompt.showToast({ - message: 'Close ' + e.groupid - }) - }, - expand(e) { - prompt.showToast({ - message: 'Open ' + e.groupid - }) - } } + + + ``` ![list6](figures/list6.gif) diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174422904.jpg b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174422904.jpg deleted file mode 100644 index bf5c3a49c58818ec9dec43db3c2d4c5e16949a94..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174422904.jpg and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174422904.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174422904.png new file mode 100644 index 0000000000000000000000000000000000000000..0bbc2e605057072db375a583813ba69a67de34bf Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174422904.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/rating.gif b/en/application-dev/reference/arkui-ts/figures/rating.gif index 58cab3e9455db71825d0533d5619a2e12f8b0975..fe6a69b71ecd5d8094d2431e39ff9b07ca3852b0 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/rating.gif and b/en/application-dev/reference/arkui-ts/figures/rating.gif differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md b/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md index 21d4f71e0c0c71ccbd5b571380f20552f7abcd48..87f3b824919077ac044128508a003c9df3029c9e 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md @@ -28,6 +28,8 @@ Creates a date picker in the given date range. ## Attributes +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + | Name | Type | Description | | ------| -------------- | -------- | | lunar | boolean | Whether to display the lunar calendar.
- **true**: Display the lunar calendar.
- **false**: Do not display the lunar calendar.
Default value: **false**| @@ -35,6 +37,8 @@ Creates a date picker in the given date range. ## Events +In addition to the [universal events](ts-universal-events-click.md), the following events are supported. + | Name| Description| | -------- | -------- | | onChange(callback: (value: DatePickerResult) => void) | Triggered when a date is selected.| @@ -62,7 +66,7 @@ struct DatePickerExample { build() { Column() { Button('Switch Calendar') - .margin({ top: 30 }) + .margin({ top: 30, bottom: 30 }) .onClick(() => { this.isLunar = !this.isLunar }) diff --git a/en/application-dev/reference/arkui-ts/ts-combined-gestures.md b/en/application-dev/reference/arkui-ts/ts-combined-gestures.md index d4a6320eb4ea942eeb262aa9973155fc0c1f972b..798a47f058a0cfa85810c34bdd308cb7dbddc6c2 100644 --- a/en/application-dev/reference/arkui-ts/ts-combined-gestures.md +++ b/en/application-dev/reference/arkui-ts/ts-combined-gestures.md @@ -18,17 +18,18 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[]) | gesture | [TapGesture](ts-basic-gestures-tapgesture.md)
\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)
\| [PanGesture](ts-basic-gestures-pangesture.md)
\| [PinchGesture](ts-basic-gestures-pinchgesture.md)
\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes| - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination.| ## GestureMode -| Name| Description| -| -------- | -------- | -| Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized.| -| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other.| -| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends.| + +| Name | Description | +| --------- | ---------------------------------------- | +| Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized.| +| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other. | +| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends. | ## Events -| Name| Description| -| -------- | -------- | +| Name | Description | +| ---------------------------------------- | ------------------------------------ | | onCancel(event: () => void) | Callback for the GestureMode.Sequence cancellation event.| @@ -49,6 +50,7 @@ struct GestureGroupExample { build() { Column() { Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) + .fontSize(15) } .translate({ x: this.offsetX, y: this.offsetY, z: 0 }) .height(150) diff --git a/en/application-dev/reference/arkui-ts/ts-container-flex.md b/en/application-dev/reference/arkui-ts/ts-container-flex.md index 02ac7b49bc3765381b488628266ebbf6599651b0..62fa59af5fcf9268485195ef5f508c78fd19402b 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-flex.md +++ b/en/application-dev/reference/arkui-ts/ts-container-flex.md @@ -240,7 +240,7 @@ struct FlexExample4 { } ``` -![en-us_image_0000001174422904](figures/en-us_image_0000001174422904.jpg) +![en-us_image_0000001174422904](figures/en-us_image_0000001174422904.png) ```ts // xxx.ets diff --git a/en/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md b/en/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md index 1d34a1ae15448105d23e77989c031daf50ace78e..df163e3b7aff84a6d56b0307cdea5951599856bc 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md @@ -98,7 +98,7 @@ struct ScrollExample { .scrollable(ScrollDirection.Vertical) .scrollBar(BarState.On) .scrollBarColor(Color.Gray) - .scrollBarWidth(30) + .scrollBarWidth(10) .onScroll((xOffset: number, yOffset: number) => { console.info(xOffset + ' ' + yOffset) })