Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 37b3d25e 编写于 作者: E ester.zhou
浏览文件
操作

Update docs (21711) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 ac933810
展开全部 隐藏空白更改
内联 并排
Showing with 487 addition and 138 deletion
en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
浏览文件 @ 37b3d25e
......@@ -26,6 +26,26 @@ Creates a date picker in the given date range.
| end | Date | No | End date of the picker.<br>Default value: **Date('2100-12-31')** |
| selected | Date | No | Date of the selected item.<br>Default value: current system date<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
**Handling in the case of exceptions**
| Exception | Result |
| -------- | ------------------------------------------------------------ |
| The start date is later than the end date, and the selected date is not set. | The start date, end date, and selected date are set to the default values. |
| The start date is later than the end date, and the selected date is earlier than the default start date. | The start date and end date are set to the default values, and the selected date is set to the default start date. |
| The start date is later than the end date, and the selected date is later than the default end date. | The start date and end date are set to the default values, and the selected date is set to the default end date. |
| The start date is later than the end date, and the selected date is within the range of the default start date and end date. | The start date and end date are set to the default values, and the selected date is set to the specified value.|
| The selected date is earlier than the start date. | The selected date is set to the start date. |
| The selected date is later than the end date. | The selected date is set to the end date. |
| The start date is later than the current system date, and the selected date is not set. | The selected date is set to the start date. |
| The end date is earlier than the current system date, and the selected date is not set. | The selected date is set to the end date. |
| The set date is in invalid format, for example, **'1999-13-32'**. | The default value is used. |
| The start date or end date is earlier than the valid date range. | The start date or end date is set to the earliest date in the valid date range. |
| The start date or end date is later than the valid date range. | The start date or end date is set to the latest date in the valid date range. |
The valid date range is from 1900-1-31 to 2100-12-31.
The exception detection and handling with the selected date comes after that with the start date and end date.
## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
......@@ -48,9 +68,10 @@ 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: DatePickerResult) =&gt; void) | Triggered when a date is selected.|
| Name | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onChange(callback: (value: DatePickerResult) =&gt; void)<sup>(deprecated)</sup> | Triggered when a date is selected.<br>**NOTE**<br>This API is supported since API version 8 and deprecated since API version 10. You are advised to use **onDateChange(callback: (value: Date) => void)** instead.|
| onDateChange(callback: (value: Date) => void)<sup>10+</sup> | Triggered when a date is selected. |
## DatePickerResult
......@@ -84,10 +105,13 @@ struct DatePickerExample {
end: new Date('2100-1-1'),
selected: this.selectedDate
})
.disappearTextStyle({color: Color.Gray, font: {size: '16fp', weight: FontWeight.Bold}})
.textStyle({color: '#ff182431', font: {size: '18fp', weight: FontWeight.Normal}})
.selectedTextStyle({color: '#ff0000FF', font: {size: '26fp', weight: FontWeight.Regular}})
.lunar(this.isLunar)
.onChange((value: DatePickerResult) => {
this.selectedDate.setFullYear(value.year, value.month, value.day)
console.info('select current date is: ' + JSON.stringify(value))
.onDateChange((value: Date) => {
this.selectedDate = value
console.info('select current date is: ' + value.toString())
})
}.width('100%')
......@@ -95,4 +119,4 @@ struct DatePickerExample {
}
```
![datePicker](figures/datePicker.gif)
![datePicker](figures/DatePickerApi10.gif)
en/application-dev/reference/arkui-ts/ts-basic-components-formcomponent.md
浏览文件 @ 37b3d25e
......@@ -12,10 +12,6 @@ The **FormComponent** is used to display widgets.
## Required Permissions
ohos.permission.GET_BUNDLE_INFO
ohos.permission.GET_BUNDLE_INFO_PRIVILEGED
ohos.permission.REQUIRE_FORM
......
en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md
浏览文件 @ 37b3d25e
......@@ -22,10 +22,16 @@ Since API version 9, this API is supported in ArkTS widgets.
## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Description|
| -------- | -------- | -------- |
| color | [ResourceColor](ts-types.md#resourcecolor) | Foreground color of the **\<LoadingProgress>** component.<br>Default value: **'#99666666'**<br>Since API version 9, this API is supported in ArkTS widgets.|
| enableLoading<sup>10+</sup> | boolean | Whether to show the loading animation.<br>Default value: **true**<br>**NOTE**<br> The component still takes up space in the layout when the loading animation is not shown.<br>While the universal attribute **Visibility.Hidden** hides the entire component, including borders and paddings, **enableLoading=false** hides the loading animation only.|
| enableLoading<sup>10+</sup> | boolean | Whether to show the loading animation.<br>Default value: **true**<br>**NOTE**<br> The component still takes up space in the layout when the loading animation is not shown.<br>Unlike the universal attribute **Visibility.Hidden**, which hides the entire component, including borders and paddings, **enableLoading=false** hides the loading animation only.|
## Events
The [universal events](ts-universal-events-click.md) are supported.
## Example
......
en/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md
浏览文件 @ 37b3d25e
......@@ -22,17 +22,17 @@ PatternLock(controller?: PatternLockController)
## Attributes
Except for **backgroundColor**, the universal attributes are not supported.
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Description |
| --------------- | ------------------------------------- | ------------------------------------------------------------ |
| sideLength | [Length](ts-types.md#length) | Width and height (same value) of the component. If this attribute is set to 0 or a negative value, the component is not displayed.<br>Default value: **300vp**|
| circleRadius | [Length](ts-types.md#length) | Radius of the grid dot.<br>Default value: **14vp** |
| regularColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color of the grid dot in unselected state.<br>Default value: **Color.Black**|
| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color of the grid dot in selected state.<br>Default value: **Color.Black**|
| activeColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color of the grid dot in activated state, which is when the dot is highlighted but not selected.<br>Default value: **Color.Black**|
| sideLength | [Length](ts-types.md#length) | Width and height (same value) of the component. If this attribute is set to **0** or a negative number, the component is not displayed.<br>Default value: **288vp**|
| circleRadius | [Length](ts-types.md#length) | Radius of the grid dot. If this attribute is set to **0** or a negative value, the default value is used.<br>Default value: **6vp** |
| regularColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color of the grid dot in the unselected state.<br>Default value: **Color.Black**|
| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color of the grid dot in the selected state.<br>Default value: **Color.Black**|
| activeColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color of the grid dot in the activated state, which is when the dot is highlighted but not selected.<br>Default value: **Color.Black**|
| pathColor | [ResourceColor](ts-types.md#resourcecolor) | Path color.<br>Default value: **Color.Blue** |
| pathStrokeWidth | number \| string | Width of the path stroke. If this attribute is set to 0 or a negative value, the path stroke is not displayed.<br>Default value: **34vp** |
| pathStrokeWidth | number \| string | Width of the path stroke. If this attribute is set to **0** or a negative value, the path stroke is not displayed.<br>Default value: **12vp** |
| autoReset | boolean | Whether to allow the user to reset the component status (that is, clear the input) by touching the component again after the input is complete. The value **true** means that the user can reset the component status by touching the component again after the input is complete, and **false** means the opposite.<br>Default value: **true**|
## Events
......
en/application-dev/reference/arkui-ts/ts-basic-components-slider.md
浏览文件 @ 37b3d25e
......@@ -48,7 +48,7 @@ Except touch target attributes, the universal attributes are supported.
| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected part of the slider track.<br>Since API version 9, this API is supported in ArkTS widgets.|
| showSteps | boolean | Whether to display the current step.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
| showTips | value: boolean,<br>content<sup>10+</sup>?: [ResourceStr](ts-types.md#resourcestr) | **value**: whether to display a tooltip when the user drags the slider.<br>Default value: **false**<br>**content**: text content of the tooltip. The default value is the current percentage.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>When **direction** is set to **Axis.Horizontal**, the tooltip is displayed right above the slider. When **direction** is set to **Axis.Vertical**, the tooltip is displayed on the left of the slider.<br>The drawing area of the tooltip is the overlay of the slider.<br>If no margin is set for the slider or the margin is not large enough, the tooltip will be clipped.|
| trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.<br>Default value: **4.0vp** when **style** is set to **[SliderStyle](#sliderstyle).OutSet**; **20.0vp** when **style** is set to **[SliderStyle](#sliderstyle).InSet**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.<br>Default value: **4.0vp** when **style** is set to **[SliderStyle](#sliderstyle).OutSet**; **20.0vp** when **style** is set to **[SliderStyle](#sliderstyle).InSet**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than or equal to 0 evaluates to the default value.|
| blockBorderColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Border color of the slider in the block direction.|
| blockBorderWidth<sup>10+</sup> | [Length](ts-types.md#length) | Border width of the slider in the block direction.|
| stepColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Step color.|
......@@ -59,7 +59,7 @@ Except touch target attributes, the universal attributes are supported.
## SliderBlockStyle<sup>10+</sup>
Desribes the style of the slider in the block direction.
Describes the style of the slider in the block direction.
| Name | Type | Mandatory| Description |
| ----- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
......
en/application-dev/reference/arkui-ts/ts-container-tabcontent.md
浏览文件 @ 37b3d25e
......@@ -27,8 +27,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Description|
| -------- | -------- | -------- |
| tabBar | string \| [Resource](ts-types.md#resource) \| {<br>icon?: string \| [Resource](ts-types.md#resource),<br>text?: string \| [Resource](ts-types.md#resource)<br>}<br>\| [CustomBuilder](ts-types.md)<sup>8+</sup> | Content displayed on the tab bar.<br>**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).<br>**NOTE**<br>If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image.<br>If the content set exceeds the space provided by the tab bar, it will be clipped.|
| tabBar<sup>9+</sup> | [SubTabBarStyle](#subtabbarstyle9) \| [BottomTabBarStyle](#bottomtabbarstyle9) | Content displayed on the tab bar.<br>**SubTabBarStyle**: subtab style. It takes text as its input parameter.<br>**BottomTabBarStyle**: bottom and side tab style. It takes text and images as its input parameters.<br>**NOTE**<br>The bottom tab style does not include an underline.<br>When an icon display error occurs, a gray blank block is displayed.|
| tabBar | string \| [Resource](ts-types.md#resource) \| {<br>icon?: string \| [Resource](ts-types.md#resource),<br>text?: string \| [Resource](ts-types.md#resource)<br>}<br>\| [CustomBuilder](ts-types.md)<sup>8+</sup> | Content displayed on the tab bar.<br>**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).<br>**NOTE**<br>When using an SVG image for the icon, delete the width and height attributes of the image. Otherwise, the icon size will be determined by the width and height attributes of the SVG image.<br>If the content set exceeds the space provided by the tab bar, it will be clipped.|
| tabBar<sup>9+</sup> | [SubTabBarStyle](#subtabbarstyle9) \| [BottomTabBarStyle](#bottomtabbarstyle9) | Content displayed on the tab bar.<br>**SubTabBarStyle**: subtab style. It takes text as its input parameter.<br>**BottomTabBarStyle**: bottom and side tab style. It takes text and images as its input parameters.<br>**NOTE**<br>The bottom tab style does not include an indicator.<br>When an icon display error occurs, a gray blank block is displayed.|
> **NOTE**
>
......@@ -71,7 +71,7 @@ The following attributes are supported.
| Name | Type | Description |
| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| indicator<sup>10+</sup> | [IndicatorStyle](#indicatorstyle10)| Underline indicator style of the selected subtab. It is valid only in the horizontal layout.<br> |
| indicator<sup>10+</sup> | [IndicatorStyle](#indicatorstyle10)| Indicator style of the selected subtab. It is valid only in the horizontal layout. |
| selectedMode<sup>10+</sup> | [SelectedMode](#selectedmode10) | Display mode of the selected subtab.<br>Default value: **SelectedMode.INDICATOR**|
| board<sup>10+</sup> | [BoardStyle](#boardstyle10) | Board style of the selected subtab.|
| labelStyle<sup>10+</sup> | [LabelStyle](#labelstyle10) | Label text and font of the subtab.|
......@@ -80,23 +80,23 @@ The following attributes are supported.
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------------------------------- |
| color | [ResourceColor](ts-types.md#resourcecolor) | No| Underline indicator color and board color.<br>Default value: **#FF007DFF**|
| height | [Length](ts-types.md#length) | No| Height of the underline indicator. It cannot be set in percentage.<br>Default value: **2.0**<br>Unit: vp|
| width | [Length](ts-types.md#length) | No| Width of the underline indicator. It cannot be set in percentage.<br>Default value: **0.0**<br>Unit: vp<br>**NOTE**<br>If this parameter is set to **0**, the tab text width is used.|
| borderRadius | [Length](ts-types.md#length) | No| Radius of the rounded corner of the underline indicator. It cannot be set in percentage.<br>Default value: **0.0**<br>Unit: vp|
| marginTop | [Length](ts-types.md#length) | No| Spacing between the underline indicator and text. It cannot be set in percentage.<br>Default value: **8.0**<br>Unit: vp|
| color | [ResourceColor](ts-types.md#resourcecolor) | No| Color of the indicator and board.<br>Default value: **#FF007DFF** |
| height | [Length](ts-types.md#length) | No| Height of the indicator. It cannot be set in percentage.<br>Default value: **2.0**<br>Unit: vp|
| width | [Length](ts-types.md#length) | No| Width of the indicator. It cannot be set in percentage.<br>Default value: **0.0**<br>Unit: vp<br>**NOTE**<br>If this parameter is set to **0**, the tab text width will be used instead. |
| borderRadius | [Length](ts-types.md#length) | No| Rounded corner radius of the indicator. It cannot be set in percentage.<br>Default value: **0.0**<br>Unit: vp|
| marginTop | [Length](ts-types.md#length) | No| Spacing between the indicator and text. It cannot be set in percentage.<br>Default value: **8.0**<br>Unit: vp|
## SelectedMode<sup>10+</sup>
| Name | Description |
| ---------- | ------------------------ |
| INDICATOR | Underline indicator mode. |
| INDICATOR | Indicator mode. |
| BOARD | Board mode. |
## BoardStyle<sup>10+</sup>
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | ------------------------------------ |
| borderRadius | [Length](ts-types.md#length) | No| Radius of the rounded corner of the board. It cannot be set in percentage.<br>Default value: **8.0**<br>Unit: vp|
| borderRadius | [Length](ts-types.md#length) | No| Rounded corner radius of the board. It cannot be set in percentage.<br>Default value: **8.0**<br>Unit: vp |
## LabelStyle<sup>10+</sup>
......@@ -129,6 +129,7 @@ A constructor used to create a **BottomTabBarStyle** instance.
### of<sup>10+</sup>
static of(icon: ResourceStr, text: ResourceStr)
Static constructor used to create a **BottomTabBarStyle** instance.
**Parameters**
......@@ -140,7 +141,7 @@ Static constructor used to create a **BottomTabBarStyle** instance.
## Example
Example 1:
### Example 1
```ts
// xxx.ets
......@@ -246,7 +247,7 @@ struct TabContentExample {
![tabContent](figures/tabContent1.gif)
Example 2:
### Example 2
```ts
// xxx.ets
......@@ -302,7 +303,7 @@ struct TabContentExample {
![tabContent](figures/tabContent2.gif)
Example 3:
### Example 3
```ts
// xxx.ets
......@@ -400,7 +401,7 @@ struct TabBarStyleExample {
![tabbarStyle](figures/TabBarStyle.jpeg)
Example 4
### Example 4
```ts
// xxx.ets
......@@ -422,7 +423,7 @@ struct TabsAttr {
private spaceFlag: boolean = true;
build() {
Column() {
Button ("Underline Indicator Color Change").width ('100%').margin ({bottom:'12vp'})
Button ("Change Indicator Color").width ('100%').margin ({bottom:'12vp'})
.onClick((event: ClickEvent) => {
// Animation configuration for the width and height attributes of the <Button> component
if (this.colorFlag) {
......@@ -454,7 +455,7 @@ struct TabsAttr {
}
this.colorFlag = !this.colorFlag
})
Button ("Underline Indicator Height Change").width ('100%').margin ({bottom:'12vp'})
Button ("Change Indicator Height").width ('100%').margin ({bottom:'12vp'})
.onClick((event: ClickEvent) => {
// Animation configuration for the width and height attributes of the <Button> component
if (this.heightFlag) {
......@@ -486,7 +487,7 @@ struct TabsAttr {
}
this.heightFlag = !this.heightFlag
})
Button ("Underline Indicator Width Change").width ('100%').margin ({bottom:'12vp'})
Button ("Change Indicator Width").width ('100%').margin ({bottom:'12vp'})
.onClick((event: ClickEvent) => {
// Animation configuration for the width and height attributes of the <Button> component
if (this.widthFlag) {
......@@ -518,7 +519,7 @@ struct TabsAttr {
}
this.widthFlag = !this.widthFlag
})
Button ("Underline Indicator Rounded Corner Change").width ('100%').margin ({bottom:'12vp'})
Button ("Change Indicator Rounded Corner").width ('100%').margin ({bottom:'12vp'})
.onClick((event: ClickEvent) => {
// Animation configuration for the width and height attributes of the <Button> component
if (this.borderFlag) {
......@@ -550,7 +551,7 @@ struct TabsAttr {
}
this.borderFlag = !this.borderFlag
})
Button ("Underline Indicator Spacing Change").width ('100%').margin ({bottom:'12vp'})
Button ("Change Indicator Spacing").width ('100%').margin ({bottom:'12vp'})
.onClick((event: ClickEvent) => {
// Animation configuration for the width and height attributes of the <Button> component
if (this.spaceFlag) {
......@@ -587,11 +588,11 @@ struct TabsAttr {
Column().width('100%').height('100%').backgroundColor(Color.Pink).borderRadius('12vp')
}.tabBar(SubTabBarStyle.of('pink')
.indicator({
color: this.indicatorColor, // Underline indicator color.
height: this.indicatorHeight, // Underline indicator height.
width: this.indicatorWidth, // nderline indicator width.
borderRadius: this.indicatorBorderRadius, // Radius of the rounded corner of the underline indicator.
marginTop: this.indicatorSpace // Spacing between the underline indicatorand text.
color: this.indicatorColor, // Indicator color.
height: this.indicatorHeight, // Indicator height.
width: this.indicatorWidth, // Indicator width.
borderRadius: this.indicatorBorderRadius, // Rounded corner radius of the indicator.
marginTop: this.indicatorSpace // Spacing between the indicator and text.
})
.selectedMode(this.selectedMode)
.board({ borderRadius: this.subTabBorderRadius })
......@@ -627,7 +628,7 @@ struct TabsAttr {
![tabContent3](figures/tabContent3.gif)
Example 5
### Example 5
```ts
// xxx.ets
......@@ -652,14 +653,14 @@ struct TabsTextOverflow {
{
Text('Scale down and then clip').fontSize(30).fontColor(0xFF000000)
}.width('100%').height('100%').backgroundColor(Color.Pink)
}.tabBar (SubTabBarStyle.of ('Start [Scale down and then clip] End')
}.tabBar (SubTabBarStyle.of ('Start [Scale down and then clip; Scale down and then clip] End')
.labelStyle({ overflow: TextOverflow.Clip, maxLines: 1, minFontSize: 15, maxFontSize: 15, heightAdaptivePolicy: TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST,
font: { size: 20 } }))
TabContent() {
Column(){
Text('Scale down, start a new line, and then clip').fontSize(30).fontColor(0xFF000000)
}.width('100%').height('100%').backgroundColor(Color.Pink)
}.tabBar (SubTabBarStyle.of ('Start [Scale down, start a new line, and then clip] End')
}.tabBar (SubTabBarStyle.of ('Start [Scale down, start a new line, and then clip; Scale down, start a new line, and then clip] End')
.labelStyle({ overflow: TextOverflow.Clip, maxLines: 2, minFontSize: 15, maxFontSize: 15, heightAdaptivePolicy: TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST,
font: { size: 20 } }))
TabContent() {
......@@ -667,7 +668,7 @@ struct TabsTextOverflow {
Text('Start a new line').fontSize(30).fontColor(0xFF000000)
}
.width('100%').height('100%').backgroundColor(Color.Pink)
}.tabBar(SubTabBarStyle.of('Start [Start a new line] End')
}.tabBar(SubTabBarStyle.of('Start [Start a new line; Start a new line; Start a new line; Start a new line; Start a new line] End')
.labelStyle({ overflow: TextOverflow.Clip, maxLines: 10, minFontSize: 10, heightAdaptivePolicy: TextHeightAdaptivePolicy.MAX_LINES_FIRST,
font: { size: 20 } }))
}
......
en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
浏览文件 @ 37b3d25e
......@@ -29,9 +29,31 @@ Shows a date picker dialog box.
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width for the top and bottom items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '14fp', <br>weight: FontWeight.Regular<br>}<br>} |
| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of all items except the top, bottom, and selected items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '16fp', <br>weight: FontWeight.Regular<br>}<br>} |
| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of the selected item.<br>Default value:<br>{<br>color: '#ff007dff',<br>font: {<br>size: '20vp', <br>weight: FontWeight.Medium<br>}<br>} |
| onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.|
| onAccept<sup>(deprecated)</sup> | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.<br>**NOTE**<br>This API is supported since API version 8 and deprecated since API version 10. You are advised to use **onDateAccept** instead.|
| onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.|
| onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| Callback invoked when the selected item in the picker changes.|
| onChange<sup>(deprecated)</sup> | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| Callback invoked when the selected item in the picker changes.<br>**NOTE**<br>This API is supported since API version 8 and deprecated since API version 10. You are advised to use **onDateChange** instead.|
| onDateAccept<sup>10+</sup> | (value: Date) => void | No| Callback invoked when the OK button in the dialog box is clicked.<br>**NOTE**<br>When **showTime** is set to **true**, the hour and minute in the value returned by the callback are the hour and minute selected in the picker. Otherwise, the hour and minute are the hour and minute of the system time.|
| onDateChange<sup>10+</sup> | (value: Date) => void | No| Callback invoked when the selected item in the picker changes.<br>**NOTE**<br>When **showTime** is set to **true**, the hour and minute in the value returned by the callback are the hour and minute selected in the picker. Otherwise, the hour and minute are the hour and minute of the system time.|
**Handling in the case of exceptions**
| Exception | Result |
| -------- | ------------------------------------------------------------ |
| The start date is later than the end date, and the selected date is not set. | The start date, end date, and selected date are set to the default values. |
| The start date is later than the end date, and the selected date is earlier than the default start date. | The start date and end date are set to the default values, and the selected date is set to the default start date. |
| The start date is later than the end date, and the selected date is later than the default end date. | The start date and end date are set to the default values, and the selected date is set to the default end date. |
| The start date is later than the end date, and the selected date is within the range of the default start date and end date. | The start date and end date are set to the default values, and the selected date is set to the specified value.|
| The selected date is earlier than the start date. | The selected date is set to the start date. |
| The selected date is later than the end date. | The selected date is set to the end date. |
| The start date is later than the current system date, and the selected date is not set. | The selected date is set to the start date. |
| The end date is earlier than the current system date, and the selected date is not set. | The selected date is set to the end date. |
| The set date is in invalid format, for example, **'1999-13-32'**. | The default value is used. |
| The start date or end date is earlier than the valid date range. | The start date or end date is set to the earliest date in the valid date range. |
| The start date or end date is later than the valid date range. | The start date or end date is set to the latest date in the valid date range. |
The valid date range is from 1900-1-31 to 2100-12-31.
The exception detection and handling with the selected date comes after that with the start date and end date.
## Example
......@@ -51,16 +73,21 @@ struct DatePickerDialogExample {
start: new Date("2000-1-1"),
end: new Date("2100-12-31"),
selected: this.selectedDate,
onAccept: (value: DatePickerResult) => {
showTime:true,
useMilitaryTime:false,
disappearTextStyle: {color: Color.Pink, font: {size: '22fp', weight: FontWeight.Bold}},
textStyle: {color: '#ff00ff00', font: {size: '18fp', weight: FontWeight.Normal}},
selectedTextStyle: {color: '#ff182431', font: {size: '14fp', weight: FontWeight.Regular}},
onDateAccept: (value: Date) => {
// Use the setFullYear method to set the date when the OK button is touched. In this way, when the date picker dialog box is displayed again, the selected date is the date last confirmed.
this.selectedDate.setFullYear(value.year, value.month, value.day)
console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
this.selectedDate = value
console.info("DatePickerDialog:onDateAccept()" + value.toString())
},
onCancel: () => {
console.info("DatePickerDialog:onCancel()")
},
onChange: (value: DatePickerResult) => {
console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
onDateChange: (value: Date) => {
console.info("DatePickerDialog:onDateChange()" + value.toString())
}
})
})
......@@ -73,15 +100,18 @@ struct DatePickerDialogExample {
end: new Date("2100-12-31"),
selected: this.selectedDate,
lunar: true,
onAccept: (value: DatePickerResult) => {
this.selectedDate.setFullYear(value.year, value.month, value.day)
console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
disappearTextStyle: {color: Color.Pink, font: {size: '22fp', weight: FontWeight.Bold}},
textStyle: {color: '#ff00ff00', font: {size: '18fp', weight: FontWeight.Normal}},
selectedTextStyle: {color: '#ff182431', font: {size: '14fp', weight: FontWeight.Regular}},
onDateAccept: (value: Date) => {
this.selectedDate = value
console.info("DatePickerDialog:onDateAccept()" + value.toString())
},
onCancel: () => {
console.info("DatePickerDialog:onCancel()")
},
onChange: (value: DatePickerResult) => {
console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
onDateChange: (value: Date) => {
console.info("DatePickerDialog:onDateChange()" + value.toString())
}
})
})
......@@ -90,4 +120,4 @@ struct DatePickerDialogExample {
}
```
![DataPickerDialog](figures/DataPickerDialog.gif)
![DataPickerDialog](figures/DatePickerDialogApi10.gif)
en/application-dev/reference/arkui-ts/ts-universal-events-click.md
浏览文件 @ 37b3d25e
......@@ -19,13 +19,17 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Description |
| ------------------- | ------------------------------------ | -------------------------------------------------------- |
| screenX | number | X coordinate of the click relative to the upper left corner of the application window. |
| screenY | number | Y coordinate of the click relative to the upper left corner of the application window. |
| x | number | X coordinate of the click relative to the upper left corner of the component being clicked. |
| y | number | Y coordinate of the click relative to the upper left corner of the component being clicked. |
| timestamp<sup>8+</sup> | number | Timestamp of the event. It is the interval between the time when the event is triggered and the time when the system starts, in nanoseconds.|
| target<sup>8+</sup> | [EventTarget](#eventtarget8) | Display area of the object that triggers the event.|
| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype)| Event input device.|
| windowX<sup>10+</sup> | number | X coordinate of the click relative to the upper left corner of the application window.|
| windowY<sup>10+</sup> | number | Y coordinate of the click relative to the upper left corner of the application window.|
| displayX<sup>10+</sup> | number | X coordinate of the click relative to the upper left corner of the application screen.|
| displayY<sup>10+</sup> | number | Y coordinate of the click relative to the upper left corner of the application screen.|
| screenX<sup>(deprecated)</sup> | number | X coordinate of the click relative to the upper left corner of the application window.<br>This API is deprecated since API version 10. You are advised to use **windowX** instead. |
| screenY<sup>(deprecated)</sup> | number | Y coordinate of the click relative to the upper left corner of the application window.<br>This API is deprecated since API version 10. You are advised to use **windowY** instead. |
## EventTarget<sup>8+</sup>
......@@ -51,14 +55,14 @@ struct ClickExample {
Row({ space: 20 }) {
Button('Click').width(100).height(40)
.onClick((event: ClickEvent) => {
this.text = 'Click Point:' + '\n screenX:' + event.screenX + '\n screenY:' + event.screenY
this.text = 'Click Point:' + '\n windowX:' + event.windowX + '\n windowY:' + event.windowY
+ '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:('
+ event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n width:'
+ event.target.area.width + '\n height:' + event.target.area.height + '\ntimestamp' + event.timestamp;
})
Button('Click').width(200).height(50)
.onClick((event: ClickEvent) => {
this.text = 'Click Point:' + '\n screenX:' + event.screenX + '\n screenY:' + event.screenY
this.text = 'Click Point:' + '\n windowX:' + event.windowX + '\n windowY:' + event.windowY
+ '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:('
+ event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n width:'
+ event.target.area.width + '\n height:' + event.target.area.height + '\ntimestamp' + event.timestamp;
......@@ -72,4 +76,4 @@ struct ClickExample {
```
![en-us_image_0000001256858383](figures/en-us_image_0000001256858383.gif)
![en-us_image_0000001210353788](figures/en-us_image_0000001210353788.gif)
en/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
浏览文件 @ 37b3d25e
......@@ -6,13 +6,18 @@ A drag event is triggered when a component is dragged.
>
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
>
> The following components provide the drag effect by default: [\<Image>](../arkui-ts/ts-basic-components-image.md), [\<Text>](../arkui-ts/ts-basic-components-text.md), [\<TextArea>](../arkui-ts/ts-basic-components-textarea.md), and [\<Search>](../arkui-ts/ts-basic-components-search.md).
> The following components support drag and drop actions by default: **\<Search>**, **\<TextInput>**, **\<TextArea>**.
>
> The following component supports drop actions by default: **\<Video>**.
>
> The following components support drag actions by default: **\<Text>**, **\<List>**, **\<Grid>**, **\<FormComponent>**, **\<Image>**, **\<Hyperlink>**.
>
> The resource files preset in the application (that is, the resource files that are contained in the HAP file before the application is installed) can be dragged and dropped only within the application.
## Events
| Name | Bubbling Supported| Description |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| onDragStart(event: (event?: [DragEvent](#dragevent), extraParams?: string) =&gt; [CustomBuilder](ts-types.md#custombuilder8) \| [DragItemInfo](#dragiteminfo)) | No | Triggered when the component bound to the event is dragged for the first time.<br>- **event**: information about the drag event. For details, see [DragEvent](#dragevent).<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.<br> Return value: component information displayed during dragging.<br>Trigger condition: long press for at least 500 ms.<br> Event priority:<br>Long press time < 500 ms: Long press event > Drag event<br> Other: Drag event > Long press event.|
| onDragStart(event: (event?: [DragEvent](#dragevent), extraParams?: string) =&gt; [CustomBuilder](ts-types.md#custombuilder8) \| [DragItemInfo](#dragiteminfo)) | No | Triggered when the component bound to the event is dragged for the first time.<br>- **event**: information about the drag event. For details, see [DragEvent](#dragevent).<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.<br>Return value: component information displayed during dragging.<br>Trigger condition: long press for at least 500 ms.<br>Event priority:<br>- Long press time < 500 ms: Long press event > Drag event<br>- Other: Drag event > Long press event |
| onDragEnter(event: (event?: [DragEvent](#dragevent), extraParams?: string) =&gt; void) | No | Triggered when the dragged item enters a valid drop target.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.<br>This event is valid only when a listener for the **onDrop** event is enabled.|
| onDragMove(event: (event?: [DragEvent](#dragevent), extraParams?: string) =&gt; void) | No | Triggered when the dragged item moves in a valid drop target.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.<br>This event is valid only when a listener for the **onDrop** event is enabled.|
| onDragLeave(event: (event?: [DragEvent](#dragevent), extraParams?: string) =&gt; void) | No | Triggered when the dragged item leaves a valid drop target.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.<br>This event is valid only when a listener for the **onDrop** event is enabled.|
......@@ -36,31 +41,35 @@ Provides additional information required for dragging an item.
| Name | Type | Description |
| ------------- | ------ | ---------------------------------------- |
| selectedIndex | number | Index of the dragged item in the parent container. The value of **selectedindex** starts from **0**.<br>This attribute is valid only in the drag event of the **\<ListItem>** component.|
| insertIndex | number | Index of the element into which the dragged item is dropped in the **List** component. The value of **insertIndex** starts from **0**.<br>This attribute is valid only in the drag event of the **\<List>** component.|
| selectedIndex | number | Index of the dragged item in the parent container. The value of **selectedindex** starts from **0**.<br>This parameter is valid only in the drag event of the **\<ListItem>** component. |
| insertIndex | number | Index of the element into which the dragged item is dropped in the **List** component. The value of **insertIndex** starts from **0**.<br>This parameter is valid only in the drag event of the **\<List>** component. |
## DragEvent
| Name | Type | Description |
| ------ | ------ | ---------------- |
| getX() | number | X-coordinate of the drag position relative to the upper left corner of the screen, in vp.|
| getY() | number | Y-coordinate of the drag position relative to the upper left corner of the screen, in vp.|
| useCustomDropAnimation<sup>10+</sup> | boolean | Whether to use the default drop animation when the dragging ends.|
| setData(unifiedData: [UnifiedData](../apis/js-apis-data-udmf.md#unifieddata))<sup>10+</sup> | void | Sets drag-related data in the drag event.|
| getData()<sup>10+</sup> | [UnifiedData](../apis/js-apis-data-udmf.md#unifieddata) | Obtains drag-related data from the drag event.|
| getSummary()<sup>10+</sup> | [Summary](../apis/js-apis-data-udmf.md#summary) | Obtains the summary of drag-related data from the drag event.|
| setResult(dragRect: [DragRet](#dragret10))<sup>10+</sup>| void | Sets the drag and drop result in the drag event.|
| getResult()<sup>10+</sup> | [DragRet](#dragret10)| Obtains the drag and drop result from the drag event.|
| setResult(dragRect: [DragResult](#dragresult10))<sup>10+</sup> | void | Sets the drag and drop result in the drag event.|
| getResult()<sup>10+</sup> | [DragResult](#dragresult10) | Obtains the drag and drop result from the drag event.|
| getPrviewRect()<sup>10+</sup> | [Rectangle](ts-universal-attributes-touch-target.md#rectangle) | Obtains the rectangle where the preview image is located.|
| getVelocityX()<sup>10+</sup> | number | Obtains the dragging velocity along the x-axis. The origin of the coordinate axis is the upper left corner of the screen. The unit is vp. The velocity is positive if the movement is from left to right, and it is negative if the movement is from right to left.|
| getVelocityY()<sup>10+</sup> | number | Obtains the dragging velocity along the y-axis. The origin of the coordinate axis is the upper left corner of the screen. The unit is vp. The velocity is positive if the movement is from top to bottom, and it is negative if the movement is from bottom to top.|
| getVelocity()<sup>10+</sup> | number | Obtains the dragging velocity along the main axis. The value is the arithmetic square root of the sum of squares of the velocity along the x- and y-axis. |
| getVelocity()<sup>10+</sup> | number | Obtains the dragging velocity along the main axis. The value is the arithmetic square root of the sum of squares of the velocity along the x- and y-axis.|
| getWindowX()<sup>10+</sup> | number | X coordinate of the drag position relative to the upper left corner of the window, in vp.|
| getWindowY()<sup>10+</sup> | number | Y coordinate of the drag position relative to the upper left corner of the window, in vp.|
| getDisplayX()<sup>10+</sup> | number | X coordinate of the drag position relative to the upper left corner of the screen, in vp.|
| getDisplayY()<sup>10+</sup> | number | Y coordinate of the drag position relative to the upper left corner of the screen, in vp.|
| getX()<sup>(deprecated)</sup> | number | X coordinate of the drag position relative to the upper left corner of the window, in vp.<br>This API is deprecated since API version 10. You are advised to use **getWindowX()** instead.|
| getY()<sup>(deprecated)</sup> | number | Y coordinate of the drag position relative to the upper left corner of the window, in vp.<br>This API is deprecated since API version 10. You are advised to use **getWindowY()** instead.|
## DragRet<sup>10+</sup>
## DragResult<sup>10+</sup>
| Name| Description|
| ----- | ----------------- |
| DRAG_SUCCESS | The drag and drop operation succeeded.|
| DRAG_SUCCESSFUL | The drag and drop operation succeeded.|
| DRAG_FAILED | The drag and drop operation failed.|
| DRAG_CANCELED | The drag and drop operation was canceled.|
| DROP_ENABLED | The component allows for a drop operation.|
......@@ -87,10 +96,22 @@ struct Index {
getDataFromUdmfRetry(event: DragEvent, callback: (data: DragEvent)=>void)
{
let records: Array<udmf.UnifiedRecord> = event.getData().getRecords();
if (records.length !== 0) {
callback(event);
return;
let data = event.getData();
if (!data) {
return false;
}
let records: Array<udmf.UnifiedRecord> = data.getRecords();
if (!records || records.length <= 0) {
return false;
}
callback(event);
return true;
}
getDataFromUdmf(event: DragEvent, callback: (data: DragEvent)=>void)
{
if(this.getDataFromUdmfRetry(event, callback)) {
return;
}
setTimeout(()=>{
this.getDataFromUdmfRetry(event, callback);
......@@ -113,9 +134,9 @@ struct Index {
.margin({left: 15})
.visibility(this.imgState)
.onDragEnd((event)=>{
if (event.getResult() === DragRet.DRAG_SUCCESS) {
if (event.getResult() === DragResult.DRAG_SUCCESSFUL) {
promptAction.showToast({duration: 100, message: 'Drag Success'});
} else if (event.getResult() === DragRet.DRAG_FAILED) {
} else if (event.getResult() === DragResult.DRAG_FAILED) {
promptAction.showToast({duration: 100, message: 'Drag failed'});
}
})
......@@ -174,7 +195,7 @@ struct Index {
.border({color: Color.Black, width: 1})
.allowDrop([udmf.UnifiedDataType.IMAGE])
.onDrop((dragEvent: DragEvent)=> {
this.getDataFromUdmfRetry(dragEvent, (event)=>{
this.getDataFromUdmf(dragEvent, (event)=>{
let records: Array<udmf.UnifiedRecord> = event.getData().getRecords();
let rect: Rectangle = event.getPreviewRect();
this.imageWidth = Number(rect.width);
......@@ -186,7 +207,7 @@ struct Index {
this.imageHeight = 100;
this.imgState = Visibility.None;
})
event.setResult(DragRet.DRAG_SUCCESS);
event.setResult(DragResult.DRAG_SUCCESSFUL);
})
})
......@@ -197,7 +218,7 @@ struct Index {
.margin(15)
.allowDrop([udmf.UnifiedDataType.TEXT])
.onDrop((dragEvent: DragEvent)=>{
this.getDataFromUdmfRetry(dragEvent, event => {
this.getDataFromUdmf(dragEvent, event => {
let records:Array<udmf.UnifiedRecord> = event.getData().getRecords();
this.targetText = (<udmf.Text>(records[0])).details['value'];
})
......@@ -215,7 +236,7 @@ struct Index {
}.width('100%').height(100).margin(20).border({color: Color.Black, width: 1})
.allowDrop([udmf.UnifiedDataType.PLAIN_TEXT])
.onDrop((dragEvent)=>{
this.getDataFromUdmfRetry(dragEvent, event=>{
this.getDataFromUdmf(dragEvent, event=>{
let records: Array<udmf.UnifiedRecord> = event.getData().getRecords();
let plainText: udmf.PlainText = <udmf.PlainText>(records[0]);
this.abstractContent = plainText.abstract;
......
en/application-dev/reference/arkui-ts/ts-universal-events-key.md
浏览文件 @ 37b3d25e
......@@ -27,6 +27,7 @@ A key event is triggered when a focusable component, such as **\<Button>**, inte
| metaKey | number | State of the metakey (that is, the **WIN** key on the Windows keyboard or the **Command** key on the Mac keyboard) when the key is pressed. The value **1** indicates the pressed state, and **0** indicates the unpressed state.|
| timestamp | number | Timestamp when the key is pressed. |
| stopPropagation | () => void | Stops the event from bubbling upwards or downwards. |
| intentionCode<sup>10+</sup> | [IntentionCode](../apis/js-apis-intentioncode.md) | Intention corresponding to the key. |
## Example
......@@ -49,7 +50,7 @@ struct KeyEventExample {
if (event.type === KeyType.Up) {
this.eventType = 'Up'
}
this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText
this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText + '\nintentionCode:' + event.intentionCode
})
Text(this.text).padding(15)
}.height(300).width('100%').padding(35)
......@@ -57,4 +58,4 @@ struct KeyEventExample {
}
```
![keyEvent](figures/keyEvent.png)
![keyEvent](figures/keyEvent.gif)
en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
浏览文件 @ 37b3d25e
......@@ -15,24 +15,28 @@ If an action triggers multiple events, the order of these events is fixed. By de
| Name | Bubbling Supported| Description |
| ---------------------------------------- | ---- | ---------------------------------------- |
| onHover(event: (isHover?: boolean, event<sup>10+</sup>?: HoverEvent) =&gt; void) | Yes | Triggered when the mouse cursor enters or leaves the component.<br>**isHover**: whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component.<br>**event**: bubbling blocking of the event.|
| onMouse(event: (event?: MouseEvent) =&gt; void) | Yes | Triggered when the component is clicked by a mouse button or the mouse cursor moves on the component. The **event** parameter indicates the timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered.|
| onHover(event: (isHover?: boolean, event<sup>10+</sup>?: HoverEvent) =&gt; void) | Yes | Triggered when the mouse pointer enters or leaves the component.<br>**isHover**: whether the mouse pointer hovers over the component. The value **true** means that the mouse pointer enters the component, and the value **false** means that the mouse pointer leaves the component.<br>**event**: bubbling blocking of the event.|
| onMouse(event: (event?: MouseEvent) =&gt; void) | Yes | Triggered when the component is clicked by a mouse button or the mouse pointer moves on the component. The **event** parameter indicates the timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered.|
## MouseEvent
| Name | Type | Description |
| ---------------------- | ---------------------------------------- | ---------------------------- |
| screenX | number | X coordinate of the cursor position relative to the upper left corner of the application window. |
| screenY | number | Y coordinate of the cursor position relative to the upper left corner of the application window. |
| x | number | X coordinate of the cursor position relative to the upper left corner of the component being clicked. |
| y | number | Y coordinate of the mouse position relative to the upper left corner of the component being clicked. |
| x | number | X coordinate of the mouse pointer relative to the upper left corner of the component being clicked. |
| y | number | Y coordinate of the mouse pointer relative to the upper left corner of the component being clicked. |
| button | [MouseButton](ts-appendix-enums.md#mousebutton) | Mouse button. |
| action | [MouseAction](ts-appendix-enums.md#mouseaction) | Mouse action. |
| stopPropagation | () => void | Stops the event from bubbling upwards or downwards. |
| timestamp<sup>8+</sup> | number | Timestamp of the event. It is interval between the time when the event is triggered and the time when the system starts, in nanoseconds.|
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8) | Display area of the component that triggers the event. |
| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype)| Event input device. |
| windowX<sup>10+</sup> | number | X coordinate of the mouse pointer relative to the upper left corner of the application window.|
| windowY<sup>10+</sup> | number | Y coordinate of the mouse pointer relative to the upper left corner of the application window.|
| displayX<sup>10+</sup> | number | X coordinate of the mouse pointer relative to the upper left corner of the application screen.|
| displayY<sup>10+</sup> | number | Y coordinate of the mouse pointer relative to the upper left corner of the application screen.|
| screenX<sup>(deprecated)</sup> | number | X coordinate of the mouse pointer relative to the upper left corner of the application window.<br>This API is deprecated since API version 10. You are advised to use **windowX** instead.|
| screenY<sup>(deprecated)</sup> | number | Y coordinate of the mouse pointer relative to the upper left corner of the application window.<br>This API is deprecated since API version 10. You are advised to use **windowY** instead.|
## HoverEvent<sup>10+</sup>
......@@ -107,7 +111,7 @@ struct MouseEventExample {
}
this.mouseText = 'onMouse:\nButton = ' + this.mouseBtn +
'\nAction = ' + this.action + '\nXY=(' + event.x + ',' + event.y + ')' +
'\nscreenXY=(' + event.screenX + ',' + event.screenY + ')';
'\nwindowXY=(' + event.windowX + ',' + event.windowY + ')';
})
Text(this.mouseText)
}.padding({ top: 30 }).width('100%')
......
en/application-dev/ui/arkts-common-events-device-input-event.md
浏览文件 @ 37b3d25e
......@@ -12,8 +12,8 @@ Mouse events can trigger the following callbacks.
| Name | Description |
| ---------------------------------------- | ---------------------------------------- |
| onHover(event:&nbsp;(isHover:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | Triggered when the mouse cursor enters or leaves the component.<br>**isHover**: whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component.|
| onMouse(event:&nbsp;(event?:&nbsp;MouseEvent)&nbsp;=&gt;&nbsp;void) | Triggered when the component is clicked by a mouse button or the mouse cursor moves on the component. The **event** parameter indicates the timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered.|
| onHover(event: (isHover: boolean) =&gt; void) | Triggered when the mouse pointer enters or leaves the component.<br>**isHover**: whether the mouse pointer hovers over the component. The value **true** means that the mouse pointer enters the component, and the value **false** means that the mouse pointer leaves the component.|
| onMouse(event: (event?: MouseEvent) =&gt; void) | Triggered when the component is clicked by a mouse button or the mouse pointer moves on the component. The **event** parameter indicates the timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered.|
When the component is bound to the **onHover** callback, you can use the [hoverEffect](../reference/arkui-ts/ts-universal-attributes-hover-effect.md) attribute to set the hover effect of the component in hover state.
......@@ -34,7 +34,7 @@ When ArkUI receives the mouse event, it checks whether the mouse event concerns
>**NOTE**
>
>All touch events and gesture events that can be responded to by a single finger may be operated and responded by using the left mouse button. For example, to implement page redirection invoked by clicking a button with support for finger touches and left-clicks, you just need to bind one click event (**onClick**). If you want to implement different effects for the finger touch and the left-click, you can use the **source** parameter in the **onClick** callback to determine whether the current event is triggered by a finger or a mouse.
>All touch events and gesture events that can be responded to by a single finger may be triggered and responded to by using the left mouse button. For example, to implement page redirection invoked by clicking a button with support for finger touches and left-clicks, you just need to bind one click event (**onClick**). If you want to implement different effects for the finger touch and the left-click, you can use the **source** parameter in the **onClick** callback to determine whether the current event is triggered by a finger or a mouse.
### onHover
......@@ -45,10 +45,10 @@ onHover(event: (isHover?: boolean) => void)
```
Triggered when the mouse cursor enters or leaves the component. The **isHover** parameter indicates whether the mouse cursor hovers over the component. This event does not support custom bubbling settings. By default, event bubbling occurs between parent and child components.
Triggered when the mouse pointer enters or leaves the component. The **isHover** parameter indicates whether the mouse pointer hovers over the component. This event does not support custom bubbling settings. By default, event bubbling occurs between parent and child components.
If this API is bound to a component, it is triggered when the mouse cursor enters the component from outside and the value of **isHover** is **true**, or when the mouse cursor leaves the component and the value of **isHover** is **false**.
If this API is bound to a component, it is triggered when the mouse pointer enters the component from outside and the value of **isHover** is **true**, or when the mouse pointer leaves the component and the value of **isHover** is **false**.
>**NOTE**
......@@ -70,7 +70,7 @@ struct MouseExample {
Button(this.isHovered ? 'Hovered!' : 'Not Hover')
.width(200).height(100)
.backgroundColor(this.isHovered ? Color.Green : Color.Gray)
.onHover((isHover: boolean) => { // Use the onHover API to listen for whether the mouse cursor is hovered over the component.
.onHover((isHover: boolean) => { // Use the onHover API to listen for whether the mouse pointer is hovered over the component.
this.isHovered = isHover;
})
}.width('100%').height('100%').justifyContent(FlexAlign.Center)
......@@ -82,10 +82,10 @@ struct MouseExample {
In this example, a **\<Button component>** is created, with the initial background color of gray and the content of **Not Hover**. The component is bound to the **onHover** callback. In the callback, **this.isHovered** is set to the callback parameter **isHover**.
When the cursor moves from outside the button to inside the button, the callback is invoked, the value of **isHover** changes to **true**, the value of **isHovered** changes to **true**, the background color of the component changes to **Color.Green**, and the content changes to **Hovered!**.
When the mouse pointer moves from outside the button to inside the button, the callback is invoked, the value of **isHover** changes to **true**, the value of **isHovered** changes to **true**, the background color of the component changes to **Color.Green**, and the content changes to **Hovered!**.
When the cursor moves from inside the button to outside the button, the callback is invoked, the value of **isHover** changes to **false**, and the component restores to its initial style.
When the mouse pointer moves from inside the button to outside the button, the callback is invoked, the value of **isHover** changes to **false**, and the component restores to its initial style.
![onHover](figures/onHover.gif)
......@@ -99,15 +99,15 @@ onMouse(event: (event?: MouseEvent) => void)
```
Triggered when a mouse event occurs. It is triggered each time an action by the mouse cursor (**MouseAction**) is detected in the component. The parameter is a [MouseEvent](../reference/arkui-ts/ts-universal-mouse-key.md) object, which indicates the mouse event that triggers the callback. This event supports custom bubbling settings. By default, event bubbling occurs between parent and child components. It is commonly used for customized mouse behavior logic processing.
Triggered when a mouse event occurs. It is triggered each time an action by the mouse pointer (**MouseAction**) is detected in the component. The parameter is a [MouseEvent](../reference/arkui-ts/ts-universal-mouse-key.md) object, which indicates the mouse event that triggers the callback. This event supports custom bubbling settings. By default, event bubbling occurs between parent and child components. It is commonly used for customized mouse behavior logic processing.
You can use the **MouseEvent** object in the callback to obtain information about the triggered event, including the coordinates (**screenX**/**screenY**/**x**/**y**), button ([MouseButton](../reference/arkui-ts/ts-appendix-enums.md#mousebutton)), action ([MouseAction](../reference/arkui-ts/ts-appendix-enums.md#mouseaction)), timestamp (**timestamp**), display area of the object that triggers the event ([EventTarget](../reference/arkui-ts/ts-universal-events-click.md)), and event source ([SourceType](../reference/arkui-ts/ts-gesture-settings.md)). The **stopPropagation** callback of **MouseEvent** is used to set whether the current event blocks bubbling.
You can use the **MouseEvent** object in the callback to obtain information about the triggered event, including the coordinates (**displayX**/**displayY**/**windowX**/**windowY**/**x**/**y**), button ([MouseButton](../reference/arkui-ts/ts-appendix-enums.md#mousebutton)), action ([MouseAction](../reference/arkui-ts/ts-appendix-enums.md#mouseaction)), timestamp (**timestamp**), display area of the object that triggers the event ([EventTarget](../reference/arkui-ts/ts-universal-events-click.md)), and event source ([SourceType](../reference/arkui-ts/ts-gesture-settings.md)). The **stopPropagation** callback of **MouseEvent** is used to set whether the current event blocks bubbling.
>**NOTE**
>
>**MouseButton** indicates the physical mouse button being pressed or released that triggers the mouse event. The values are **Left**, **Right**, **Middle**, **Back**, **Forward**, and **None**. **None** indicates that no button is pressed or released, which means that the event is triggered by the mouse cursor moving on the component.
>**MouseButton** indicates the physical mouse button being pressed or released that triggers the mouse event. The values are **Left**, **Right**, **Middle**, **Back**, **Forward**, and **None**. **None** indicates that no button is pressed or released, which means that the event is triggered by the mouse pointer moving on the component.
......@@ -134,7 +134,7 @@ struct MouseExample {
'button = ' + event.button + '\n' +
'action = ' + event.action + '\n' +
'x,y = (' + event.x + ',' + event.y + ')' + '\n' +
'screenXY=(' + event.screenX + ',' + event.screenY + ')';
'windowXY=(' + event.windowX + ',' + event.windowY + ')';
})
Divider()
Text(this.buttonText).fontColor(Color.Green)
......@@ -151,7 +151,7 @@ struct MouseExample {
'button = ' + event.button + '\n' +
'action = ' + event.action + '\n' +
'x,y = (' + event.x + ',' + event.y + ')' + '\n' +
'screenXY=(' + event.screenX + ',' + event.screenY + ')';
'windowXY=(' + event.windowX + ',' + event.windowY + ')';
})
}
}
......@@ -161,9 +161,9 @@ struct MouseExample {
Bind the **onMouse** API to the button based on the **onHover** example. In the callback, the values of the callback parameters, such as **button** and **action**, are displayed. The same settings are performed on the outer **\<Column>** container. The entire process can be divided into the following two actions:
1. Moving the mouse cursor: When the mouse cursor is moved from outside the button to inside the button, only the **onMouse** callback of the **\<Column>** is triggered. When the mouse cursor is moved to the button, as the **onMouse** event bubbles up by default, both the **onMouse** callbacks of the **\<Column>** and **\<Button>** components are invoked. In this process, the mouse cursor moves, but no mouse button is clicked. Therefore, in the displayed information, the value of **button** is 0 (enumerated value of **MouseButton.None**) and the value of **action** is **3** (enumerated value of **MouseAction.Move**).
1. Moving the mouse pointer: When the mouse pointer is moved from outside the button to inside the button, only the **onMouse** callback of the **\<Column>** is triggered. When the mouse pointer is moved to the button, as the **onMouse** event bubbles up by default, both the **onMouse** callbacks of the **\<Column>** and **\<Button>** components are invoked. In this process, the mouse pointer moves, but no mouse button is clicked. Therefore, in the displayed information, the value of **button** is 0 (enumerated value of **MouseButton.None**) and the value of **action** is **3** (enumerated value of **MouseAction.Move**).
2. Clicking the mouse button: After the mouse cursor enters the **\<Button>** component, the **\<Button>** component is clicked twice, namely, left-click and right-click.
2. Clicking the mouse button: After the mouse pointer enters the **\<Button>** component, the **\<Button>** component is clicked twice, namely, left-click and right-click.
Left-clicked: button = 1 (enumerated value of **MouseButton.Left**); action = 1 (enumerated value of **MouseAction.Press**); action = 2 (enumerated value of **MouseAction.Release**).
Right-click: button = 2 (enumerated value of **MouseButton.Right**); action = 1 (enumerated value of **MouseAction.Press**); action = 2 (enumerated value of **MouseAction.Release**)
......@@ -190,7 +190,7 @@ Button(this.isHovered ? 'Hovered!' : 'Not Hover')
'button = ' + event.button + '\n' +
'action = ' + event.action + '\n' +
'x,y = (' + event.x + ',' + event.y + ')' + '\n' +
'screenXY=(' + event.screenX + ',' + event.screenY + ')';
'windowXY=(' + event.windowX + ',' + event.windowY + ')';
})
```
......@@ -223,8 +223,8 @@ Sets the hover effect of the component in hover state. The parameter value type
| Enum| Description |
| -------------- | ---------------------------------------- |
| Auto | Default hover effect, which varies by component. |
| Scale | Scale effect. When the mouse cursor is placed over the component, the component is scaled up from 100% to 105%. When the mouse cursor is moved away, the component is scaled down from 105% to 100%.|
| Highlight | Background fade-in and fade-out effect. When the mouse cursor is placed over the component, a white layer with 5% opacity is applied to the background color of the component, resulting in a dimmed background. When the mouse cursor is moved away, the background color of the component is restored to the original style.|
| Scale | Scale effect. When the mouse pointer is placed over the component, the component is scaled up from 100% to 105%. When the mouse pointer is moved away, the component is scaled down from 105% to 100%.|
| Highlight | Background fade-in and fade-out effect. When the mouse pointer is placed over the component, a white layer with 5% opacity is applied to the background color of the component, resulting in a dimmed background. When the mouse pointer is moved away, the background color of the component is restored to the original style.|
| None | No effect. |
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或