Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
未验证 提交 cf1ea7dc 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!12893 翻译完成 12511+10639+10689+10732+10643+10790 

Merge pull request !12893 from ester.zhou/C1-1224
上级 6b8b2dfb 9caa0e48
展开全部 隐藏空白更改
内联 并排
Showing with 4139 addition and 465 deletion
en/application-dev/reference/arkui-ts/ts-basic-components-rating.md
浏览文件 @ cf1ea7dc
# Rating # Rating
The **\<Rating>** component provides a rating bar.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. >
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;Rating&gt;** component provides a rating bar.
## Required Permissions
None
## Child Components ## Child Components
None Not supported
## APIs ## APIs
Rating(options?: { rating: number, indicator?: boolean }) Rating(options?: { rating: number, indicator?: boolean })
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | Name| Type| Mandatory| Description|
| rating | number | Yes | 0 | Value to rate. | | -------- | -------- | -------- | -------- |
| indicator | boolean | No | false | Used only as an indicator and cannot be operated. | | rating | number | Yes| Value to rate.<br>Default value: **0**|
| indicator | boolean | No| Whether the component is used only as an indicator and cannot be operated.<br>Default value: **false**|
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name| Type| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- |
| stars | number | 5 | Total number of stars. | | stars | number | Total number of stars.<br>Default value: **5**|
| stepSize | number | 0.5 | Step of an operation. | | stepSize | number | Step of an operation.<br>Default value: **0.5**|
| starStyle | {<br/>backgroundUri: string,<br/>foregroundUri: string,<br/>secondaryUri?: string<br/>} | - | **backgroundSrc**: image link of the unselected star. You can customize the image or use the default image. Only local images are supported.<br/>**foregroundSrc**: image path of the selected star. You can customize the image or use the default image. Only local images are supported.<br/>**secondarySrc**: image path of the partially selected star. You can customize the image or use the default image. Only local images are supported. | | starStyle | {<br>backgroundUri: string,<br>foregroundUri: string,<br>secondaryUri?: string<br>} | **backgroundUri**: image link of the unselected star. You can use the default image or a custom local image.<br>**foregroundUri**: image path of the selected star. You can use the default image or a custom local image.<br>**secondaryUir**: image path of the partially selected star. You can use the default image or a custom local image.|
## Events ## Events
| Name | Description | | Name| Description|
| -------- | -------- | | -------- | -------- |
| onChange(callback:(value: number) =&gt; void) | Triggered when the rating value changes. | | onChange(callback:(value: number) =&gt; void) | Triggered when the rating value changes.|
## Example ## Example
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct RatingExample { struct RatingExample {
......
en/application-dev/reference/arkui-ts/ts-basic-components-search.md
浏览文件 @ cf1ea7dc
# Search # Search
The **\<Search>** component provides an input area for users to search. The **\<Search>** component provides an area for users to enter search queries.
> **NOTE** > **NOTE**
> >
...@@ -21,30 +21,34 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll ...@@ -21,30 +21,34 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll
| value | string | No | Text input in the search text box. | | value | string | No | Text input in the search text box. |
| placeholder | string | No | Text displayed when there is no input. | | placeholder | string | No | Text displayed when there is no input. |
| icon | string | No | Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png.| | icon | string | No | Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png.|
| controller | SearchController | No | Controller. | | controller | SearchController | No | Controller of the **\<Search>** component. |
## Attributes ## Attributes
| Name | Type | Description | | Name | Type | Description |
| ----------------------- | ------------------------------------------------ | ---------------------------------------------- | | ----------------------- | ------------------------------------------------ | ---------------------------------------------- |
| searchButton | string | Text on the search button located next to the search text box. By default, there is no search button. | | searchButton | string | Text on the search button located next to the search text box. By default, there is no search button. |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | Placeholder text color. | | placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | Placeholder text color. |
| placeholderFont | [Font](ts-types.md#font) | Placeholder text style. | | placeholderFont | [Font](ts-types.md#font) | Placeholder text font. |
| textFont | [Font](ts-types.md#font) | Text font for the search text box. | | textFont | [Font](ts-types.md#font) | Text font for the search text box. |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Text alignment mode in the search text box.<br>Default value: **TextAlign.Start** |
## Events ## Events
| Name | Description | In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
| ---------------------------------------- | ---------------------------------------- |
| onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or touch the search button on a soft keyboard.<br> -**value**: current text input.| | Name | Description |
| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.<br> -**value**: current text input. | | ------------------------------------------- | ------------------------------------------------------------ |
| onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.<br> -**value**: text copied. | | onSubmit(callback: (value: string) => void) | Invoked when users click the search icon or the search button, or touch the search button on a soft keyboard.<br> - **value**: current text input. |
| onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.<br> -**value**: text cut. | | onChange(callback: (value: string) => void) | Invoked when the input in the text box changes.<br> - **value**: current text input. |
| onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.<br> -**value**: text pasted. | | onCopy(callback: (value: string) => void) | Invoked when data is copied to the pasteboard, which is displayed when the search text box is long pressed.<br> - **value**: text copied. |
| onCut(callback: (value: string) => void) | Invoked when data is cut from the pasteboard, which is displayed when the search text box is long pressed.<br> - **value**: text cut. |
| onPaste(callback: (value: string) => void) | Invoked when data is pasted from the pasteboard, which is displayed when the search text box is long pressed.<br> -**value**: text pasted. |
## SearchController ## SearchController
Defines the controller of the **\<Search>** component. Implements the controller of the **\<Search>** component. Currently, the controller can be used to control the caret position.
### Objects to Import ### Objects to Import
``` ```
...@@ -69,30 +73,37 @@ Sets the position of the caret. ...@@ -69,30 +73,37 @@ Sets the position of the caret.
@Entry @Entry
@Component @Component
struct SearchExample { struct SearchExample {
@State changeValue: string = '' @State changeValue: string = '';
@State submitValue: string = '' @State submitValue: string = '';
controller: SearchController = new SearchController() controller: SearchController = new SearchController();
build() { build() {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { Column() {
Text(this.submitValue) Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)
Text(this.changeValue) Text('onChange:' + this.changeValue).fontSize(18).margin(15)
Search({value: this.changeValue, placeholder: 'Type to search', controller: this.controller}) Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller })
.searchButton('Search') .searchButton('SEARCH')
.width(400) .width(400)
.height(35) .height(40)
.backgroundColor(Color.White) .backgroundColor(Color.White)
.placeholderColor(Color.Grey) .placeholderColor(Color.Grey)
.placeholderFont({ size: 26, weight: 10, family: 'serif', style: FontStyle.Normal }) .placeholderFont({ size: 14, weight: 400 })
.textFont({ size: 14, weight: 400 })
.onSubmit((value: string) => { .onSubmit((value: string) => {
this.submitValue = value this.submitValue = value;
}) })
.onChange((value: string) => { .onChange((value: string) => {
this.changeValue = value this.changeValue = value;
}) })
.margin({ top: 30, left:10, right:10 }) .margin(20)
} Button('Set caretPosition 1')
.onClick(() => {
// Move the caret to after the first entered character.
this.controller.caretPosition(1);
})
}.width('100%')
} }
} }
``` ```
![search](figures/search.png)
![search](figures/search.gif)
en/application-dev/reference/arkui-ts/ts-basic-components-slider.md
浏览文件 @ cf1ea7dc
...@@ -14,38 +14,39 @@ Not supported ...@@ -14,38 +14,39 @@ Not supported
## APIs ## APIs
Slider(options?:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean}) Slider(options?: {value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean})
**Parameters** **Parameters**
| Name | Type | Mandatory| Description | | Name| Type| Mandatory| Description|
| ---------------------- | --------------------------------- | ---- | ------------------------------------------------------------ | | -------- | -------- | -------- | -------- |
| value | number | No | Current progress.<br>Default value: **0** | | value | number | No| Current progress.<br>Default value: **0**|
| min | number | No | Minimum value.<br>Default value: **0** | | min | number | No| Minimum value.<br>Default value: **0**|
| max | number | No | Maximum value.<br>Default value: **100** | | max | number | No| Maximum value.<br>Default value: **100**|
| step | number | No | Step of the slider.<br>Default value: **1** | | step | number | No| Step of the slider.<br>Default value: **1** <br/>Value range: [0.01, max] |
| style | SliderStyle | No | Style of the slider.<br>Default value: **SliderStyle.OutSet** | | style | SliderStyle | No| Style of the slider thumb and track.<br>Default value: **SliderStyle.OutSet**|
| direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis) | No | Whether the slider moves horizontally or vertically.<br>Default value: **Axis.Horizontal**| | direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis) | No| Whether the slider moves horizontally or vertically.<br>Default value: **Axis.Horizontal**|
| reverse<sup>8+</sup> | boolean | No | Whether the slider values are reversed.<br>**NOTE**<br>The value **false** indicates that the values increase from left to right for a horizontal slider and from top to bottom for a vertical slider. The value **true** indicates that the values increase from right to left for a horizontal slider and from bottom to top for a vertical slider.<br>Default value: **false**| | reverse<sup>8+</sup> | boolean | No| Whether the slider values are reversed. By default, the values increase from left to right for a horizontal slider and from top to bottom for a vertical slider.<br>Default value: **false**|
## SliderStyle ## SliderStyle
| Name | Description | | Name| Description|
| ------ | ------- | | -------- | -------- |
| OutSet | The slider is on the slider rail.| | OutSet | The slider is on the slider track.|
| InSet | The slider is in the slider rail.| | InSet | The slider is in the slider track.|
## Attributes ## Attributes
Touch target configuration is not supported. Except touch target attributes, the universal attributes are supported.
| Name | Type | Description | | Name| Type| Description|
| ------------- | ------- | ----------------- | | -------- | -------- | -------- |
| blockColor | [ResourceColor](ts-types.md#resourcecolor8) | Color of the slider. | | blockColor | [ResourceColor](ts-types.md#resourcecolor8) | Color of the slider.|
| trackColor | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the slider. | | trackColor | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the slider.|
| selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | Color of the slider rail that has been slid. | | selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | Color of the selected part of the slider track.|
| showSteps | boolean | Whether to display the current step.<br>Default value: **false**| | showSteps | boolean | Whether to display the current step.<br>Default value: **false**|
| showTips | boolean | Whether to display a bubble to indicate the percentage when sliding.<br>Default value: **false**| | showTips | boolean | Whether to display a bubble to indicate the percentage when the user drags the slider.<br>Default value: **false** |
| trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.| | trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.|
| maxLabel | string | Maximum label.| | maxLabel | string | Maximum label.|
| minLabel | string | Minimum label.| | minLabel | string | Minimum label.|
...@@ -55,18 +56,19 @@ Touch target configuration is not supported. ...@@ -55,18 +56,19 @@ Touch target configuration is not supported.
In addition to the **OnAppear** and **OnDisAppear** universal events, the following events are supported. In addition to the **OnAppear** and **OnDisAppear** universal events, the following events are supported.
| Name | Description | | Name| Description|
| ------------------------------------------------------------ | ------------------------------------------------------------ | | -------- | -------- |
| onChange(callback: (value: number, mode: SliderChangeMode) =&gt; void) | Invoked when the slider slides.<br>**value**: current progress. If the return value contains decimals, you can use **Math.toFixed()** to process the data to the required precision.<br>**mode**: dragging state.| | onChange(callback: (value: number, mode: SliderChangeMode) =&gt; void) | Invoked when the slider slides.<br>**value**: current slider value. If the return value contains decimals, you can use **Math.toFixed()** to process the data to the desired precision.<br>**mode**: dragging state.|
## SliderChangeMode ## SliderChangeMode
| Name | Value | Description | | Name| Value| Description|
| ------ | ---- | --------- | | -------- | -------- | -------- |
| Begin | 0 | The user starts to drag the slider.| | Begin | 0 | The user starts to drag the slider.|
| Moving | 1 | The user is dragging the slider. | | Moving | 1 | The user is dragging the slider.|
| End | 2 | The user stops dragging the slider.| | End | 2 | The user stops dragging the slider.|
| Click | 3 | The user moves the slider by touching the slider rail.| | Click | 3 | The user moves the slider by touching the slider track.|
## Example ## Example
...@@ -75,105 +77,150 @@ In addition to the **OnAppear** and **OnDisAppear** universal events, the follow ...@@ -75,105 +77,150 @@ In addition to the **OnAppear** and **OnDisAppear** universal events, the follow
@Entry @Entry
@Component @Component
struct SliderExample { struct SliderExample {
@State outSetValue: number = 40 @State outSetValueOne: number = 40;
@State inSetValue: number = 40 @State inSetValueOne: number = 40;
@State outVerticalSetValue: number = 40 @State outSetValueTwo: number = 40;
@State inVerticalSetValue: number = 40 @State inSetValueTwo: number = 40;
@State vOutSetValueOne: number = 40;
@State vInSetValueOne: number = 40;
@State vOutSetValueTwo: number = 40;
@State vInSetValueTwo: number = 40;
build() { build() {
Column({ space: 5 }) { Column({ space: 8 }) {
Text('slider out set').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
Row() { Row() {
Slider({ Slider({
value: this.outSetValue, value: this.outSetValueOne,
min: 0, min: 0,
max: 100, max: 100,
step: 1,
style: SliderStyle.OutSet style: SliderStyle.OutSet
}) })
.blockColor(Color.Blue) .showTips(true)
.trackColor(Color.Gray) .onChange((value: number, mode: SliderChangeMode) => {
.selectedColor(Color.Blue) this.outSetValueOne = value;
.showSteps(true) console.info('value:' + value + 'mode:' + mode.toString());
.showTips(true) })
.onChange((value: number, mode: SliderChangeMode) => { // toFixed(0) converts the return value of the slider to an integer.
this.outSetValue = value Text(this.outSetValueOne.toFixed(0)).fontSize(12)
console.info('value:' + value + 'mode:' + mode.toString()) }
.width('80%')
Row() {
Slider({
value: this.outSetValueTwo,
step: 10,
style: SliderStyle.OutSet
}) })
Text(this.outSetValue.toFixed(0)).fontSize(16) .showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.outSetValueTwo = value;
console.info('value:' + value + 'mode:' + mode.toString());
})
Text(this.outSetValueTwo.toFixed(0)).fontSize(12)
} }
.padding({ top: 50 })
.width('80%') .width('80%')
Text('slider in set').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
Row() { Row() {
Slider({ Slider({
value: this.inSetValue, value: this.inSetValueOne,
min: 0, min: 0,
max: 100, max: 100,
step: 1,
style: SliderStyle.InSet style: SliderStyle.InSet
}) })
.blockColor(0xCCCCCC) .blockColor('#191970')
.trackColor(Color.Black) .trackColor('#ADD8E6')
.selectedColor(0xCCCCCC) .selectedColor('#4169E1')
.showSteps(false) .showTips(true)
.showTips(false) .onChange((value: number, mode: SliderChangeMode) => {
.onChange((value: number, mode: SliderChangeMode) => { this.inSetValueOne = value;
this.inSetValue = value console.info('value:' + value + 'mode:' + mode.toString());
console.info('value:' + value + 'mode:' + mode.toString()) })
}) Text(this.inSetValueOne.toFixed(0)).fontSize(12)
Text(this.inSetValue.toFixed(0)).fontSize(16)
} }
.width('80%') .width('80%')
Row() { Row() {
Column() { Slider({
Text('slider out direction set').fontSize(9).fontColor(0xCCCCCC).width('50%') value: this.inSetValueTwo,
Slider({ step: 10,
value: this.outVerticalSetValue, style: SliderStyle.InSet
min: 0, })
max: 100, .blockColor('#191970')
step: 1, .trackColor('#ADD8E6')
style: SliderStyle.OutSet, .selectedColor('#4169E1')
direction: Axis.Vertical
})
.blockColor(Color.Blue)
.trackColor(Color.Gray)
.selectedColor(Color.Blue)
.showSteps(true) .showSteps(true)
.showTips(true)
.onChange((value: number, mode: SliderChangeMode) => { .onChange((value: number, mode: SliderChangeMode) => {
this.outVerticalSetValue = value this.inSetValueTwo = value;
console.info('value:' + value + 'mode:' + mode.toString()) console.info('value:' + value + 'mode:' + mode.toString());
}) })
Text(this.outVerticalSetValue.toFixed(0)).fontSize(16) Text(this.inSetValueTwo.toFixed(0)).fontSize(12)
}
.width('80%')
Row() {
Column() {
Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
Row() {
Slider({
value: this.vOutSetValueOne,
style: SliderStyle.OutSet,
direction: Axis.Vertical
})
.blockColor('#191970')
.trackColor('#ADD8E6')
.selectedColor('#4169E1')
.showTips(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.vOutSetValueOne = value
console.info('value:' + value + 'mode:' + mode.toString())
})
Slider({
value: this.vOutSetValueTwo,
step: 10,
style: SliderStyle.OutSet,
direction: Axis.Vertical
})
.blockColor('#191970')
.trackColor('#ADD8E6')
.selectedColor('#4169E1')
.showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.vOutSetValueTwo = value;
console.info('value:' + value + 'mode:' + mode.toString());
})
}
}.width('50%').height(300) }.width('50%').height(300)
Column() { Column() {
Text('slider in direction set').fontSize(9).fontColor(0xCCCCCC).width('50%') Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
Slider({ Row() {
value: this.inVerticalSetValue, Slider({
min: 0, value: this.vInSetValueOne,
max: 100, style: SliderStyle.InSet,
step: 1, direction: Axis.Vertical,
style: SliderStyle.InSet, reverse: true // By default, at the top of the vertical slider is the min value and at the bottom is the max value. Therefore, if you want to slide from bottom to top, set reverse to true.
direction: Axis.Vertical })
}) .showTips(true)
.blockColor(0xCCCCCC) .onChange((value: number, mode: SliderChangeMode) => {
.trackColor(Color.Black) this.vInSetValueOne = value;
.selectedColor(0xCCCCCC) console.info('value:' + value + 'mode:' + mode.toString());
.showSteps(false) })
.showTips(false) Slider({
.onChange((value: number, mode: SliderChangeMode) => { value: this.vInSetValueTwo,
this.inVerticalSetValue = value step: 10,
console.info('value:' + value + 'mode:' + mode.toString()) style: SliderStyle.InSet,
}) direction: Axis.Vertical,
Text(this.inVerticalSetValue.toFixed(0)).fontSize(16) reverse: true
})
.showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.vInSetValueTwo = value;
console.info('value:' + value + 'mode:' + mode.toString());
})
}
}.width('50%').height(300) }.width('50%').height(300)
} }
}.width('100%')
}.width('100%').margin({ top: 5 })
} }
} }
``` ```
......
en/application-dev/reference/arkui-ts/ts-basic-components-stepper.md
浏览文件 @ cf1ea7dc
# Stepper # Stepper
The **\<Stepper>** component provides a step navigator.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;Stepper&gt;** component provides a step navigator.
## Required Permissions > **NOTE**
>
None > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components ## Child Components
Only the child component **&lt;[StepperItem](ts-basic-components-stepperitem.md)&gt;** is supported. Only the child component **\<[StepperItem](ts-basic-components-stepperitem.md)>** is supported.
## APIs ## APIs
...@@ -23,10 +18,11 @@ Only the child component **&lt;[StepperItem](ts-basic-components-stepperitem.md) ...@@ -23,10 +18,11 @@ Only the child component **&lt;[StepperItem](ts-basic-components-stepperitem.md)
Stepper(value?: { index?: number }) Stepper(value?: { index?: number })
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | Name| Type| Mandatory | Description|
| index | number | No | 0 | Index of the **&lt;StepperItem&gt;** that is currently displayed. | | ------| -------- | --------------- | -------- |
| index | number | No| Index of the **\<StepperItem>** that is currently displayed.<br>Default value: **0**|
## Attributes ## Attributes
...@@ -36,92 +32,105 @@ None ...@@ -36,92 +32,105 @@ None
## Events ## Events
| Name | Description | | Name| Description|
| -------- | -------- | | -------- | -------- |
| onFinish(callback: () =&gt; void) | Triggered when the **nextLabel** of the last **&lt;StepperItem&gt;** in the **&lt;Stepper&gt;** is clicked. | | onFinish(callback: () =&gt; void) | Invoked when the **nextLabel** of the last **\<StepperItem>** in the **\<Stepper>** is clicked.|
| onSkip(callback: () =&gt; void) | Triggered when the current **&lt;StepperItem&gt;** is **ItemState.Skip** and the **nextLabel** is clicked. | | onSkip(callback: () =&gt; void) | Invoked when the current **\<StepperItem>** is **ItemState.Skip** and the **nextLabel** is clicked.|
| onChange(callback: (prevIndex?: number, index?: number) =&gt; void) | Triggered when the text button on the left or right is clicked to switch between steps.<br/>- **prevIndex**: index of the step page before the switching.<br/>- **index**: index of the step page after the switching, that is, index of the previous or next page. | | onChange(callback: (prevIndex?: number, index?: number) =&gt; void) | Invoked when the user switches to the previous or next step.<br>- **prevIndex**: index of the step page before the switching.<br>- **index**: index of the step page after the switching, that is, index of the previous or next page.|
| onNext(callback: (index?: number, pendingIndex?: number) =&gt; void) | Invoked when a user switches to the next step.<br>- **index**: index of the current step page.<br>- **pendingIndex**: index of the next page.|
| onPrevious(callback: (index?: number, pendingIndex?: number) =&gt; void) | Invoked when a user switches to the previous step.<br>- **index**: index of the current step page.<br>- **pendingIndex**: index of the previous page.|
## Example ## Example
```ts
// xxx.ets
```
@Entry @Entry
@Component @Component
struct StepperExample { struct StepperExample {
@State currentIndex: number = 0 @State currentIndex: number = 0;
@State firstState: ItemState = ItemState.Normal @State firstState: ItemState = ItemState.Normal;
@State secondState: ItemState = ItemState.Normal @State secondState: ItemState = ItemState.Normal;
@State thirdState: ItemState = ItemState.Normal;
build() { build() {
Stepper({ Stepper({
index: this.currentIndex index: this.currentIndex
}) { }) {
// First step page
StepperItem() { StepperItem() {
Text('Page One') Column() {
.fontSize(35) Text('Page One')
.fontColor(Color.Blue) .fontSize(35)
.width(200) .fontColor(Color.Blue)
.lineHeight(50) .lineHeight(50)
.margin({top:250}) .margin({ top: 250, bottom: 50 })
Button('change status:' + this.firstState)
.onClick(() => {
this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip;
})
}.width('100%')
} }
.nextLabel('') .nextLabel('Next')
.position({x: '35%', y: 0}) .status(this.firstState)
// Second step page
StepperItem() { StepperItem() {
Text('Page Two') Column() {
.fontSize(35) Text('Page Two')
.fontColor(Color.Blue) .fontSize(35)
.width(200) .fontColor(Color.Blue)
.lineHeight(50) .lineHeight(50)
.margin({top:250}) .margin({ top: 250, bottom: 50 })
.onClick(()=>{ Button('change status:' + this.secondState)
this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip .onClick(() => {
}) this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled;
})
}.width('100%')
} }
.nextLabel('Next') .nextLabel('Next')
.prevLabel('Previous') .prevLabel('Previous')
.status(this.firstState) .status(this.secondState)
.position({x: '35%', y: 0}) // Third step page
StepperItem() { StepperItem() {
Text('Page Three') Column() {
.fontSize(35) Text('Page Three')
.fontColor(Color.Blue) .fontSize(35)
.width(200) .fontColor(Color.Blue)
.lineHeight(50) .lineHeight(50)
.margin({top:250}) .margin({ top: 250, bottom: 50 })
.onClick(()=>{ Button('change status:' + this.thirdState)
this.secondState = this.secondState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting .onClick(() => {
}) this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting;
})
}.width('100%')
} }
.position({x: '35%', y: 0}) .status(this.thirdState)
.status(this.secondState) // Fourth step page
StepperItem() { StepperItem() {
Text('Page four') Text('Page four')
.fontSize(35) .fontSize(35)
.fontColor(Color.Blue) .fontColor(Color.Blue)
.width(200) .width('100%')
.textAlign(TextAlign.Center)
.lineHeight(50) .lineHeight(50)
.margin({top:250}) .margin({ top: 250 })
} }
.position({x: '35%', y: 0})
.nextLabel('Finish') .nextLabel('Finish')
} }
.onFinish(() => { .onFinish(() => {
console.log('onFinish') // Define the processing logic for when Finish on the last page is clicked, for example, redirection.
console.info('onFinish');
}) })
.onSkip(() => { .onSkip(() => {
console.log('onSkip') // Define the processing logic for when Skip on the page is clicked, for example, dynamically changing the index of the <Stepper> to redirect to a specific step.
console.info('onSkip');
}) })
.onChange((prevIndex: number, index: number) => { .onChange((prevIndex: number, index: number) => {
this.currentIndex = index this.currentIndex = index;
}) })
.align(Alignment.Center)
} }
} }
``` ```
![en-us_image_0000001250678457](figures/en-us_image_0000001250678457.gif) ![en-us_image_0000001250678457](figures/en-us_image_0000001250678457.gif)
en/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md
浏览文件 @ cf1ea7dc
# StepperItem # StepperItem
The **\<StepperItem>** component provides an element for the **\<Stepper>** component.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
> **NOTE**
The **&lt;StepperItem&gt;** component provides an element for the **&lt;Stepper&gt;** component. >
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## Child Components ## Child Components
...@@ -25,22 +20,22 @@ StepperItem() ...@@ -25,22 +20,22 @@ StepperItem()
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name| Type| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- |
| prevLabel | string | - | When the **&lt;Stepper&gt;** contains more than one page, the default value for all pages except the first page is **Back**. | | prevLabel | string | Text label of the button on the left. When the **\<Stepper>** contains more than one page, the default value for all pages except the first page is **Back**.|
| nextLabel | string | - | When the stepper contains more than one page, the default value for the last page is **Start**, and the default value for other pages is **Next**. | | nextLabel | string | Text label of the button on the right. The default value is **Start** for the last page and **Next** for the other pages.|
| status | ItemState | ItemState.Normal | Status of the **&lt;StepperItem&gt;**. | | status | ItemState | Display status of **nextLabel** in the stepper.<br>Default value: **ItemState.Normal**|
## ItemState
- ItemState enums | Name | Value | Description|
| Name | Description | | -------- | -------- |-------- |
| -------- | -------- | | Normal | 0 |The button on the right is clickable and can navigate users to the next **\<StepperItem>** when it is clicked.|
| Normal | The right button is clickable and can navigate users to the next **&lt;StepperItem&gt;** when it is clicked.. | | Disabled | 1 |The button on the right is grayed out and unavailable.|
| Disabled | The right button is grayed out and unavailable. | | Waiting | 2 | The button on the right is not displayed, and a progress bar is displayed instead.|
| Waiting | The right button is not displayed, and a progress bar is displayed instead. | | Skip | 3 |The button on the right reads "Skip". You can define the processing logic for this state in the **onSkip** callback of the stepper.|
| Skip | The current **&lt;StepperItem&gt;** is skipped, and the next **&lt;StepperItem&gt;** is displayed. |
## Example ## Example
See [Stepper](ts-basic-components-stepper.md). See [Stepper](ts-basic-components-stepper.md).
en/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
浏览文件 @ cf1ea7dc
...@@ -10,35 +10,35 @@ A drag event is triggered when a component is dragged. ...@@ -10,35 +10,35 @@ A drag event is triggered when a component is dragged.
| Name | Bubbling Supported| Description | | Name | Bubbling Supported| Description |
| ---------------------------------------- | ---- | ---------------------------------------- | | ---------------------------------------- | ---- | ---------------------------------------- |
| onDragStart(event: (event: DragEvent, extraParams?: string) =&gt; [CustomBuilder](ts-types.md#custombuilder8) \| DragItemInfo) | No | Triggered when the component bound to the event is dragged for the first time.<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 extraParam.<br>Return value: object being dragged, which is used for prompts displayed when the object is dragged.<br>A drag event can be triggered by a 150 ms long press. If the duration of a long-press gesture is set to less than or equal to 150 ms, the callback for the long-press gesture takes precedence. Otherwise, the callback for the drag event takes precedence.| | 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, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.<br>Return value: object being dragged, which is used for prompts displayed when the object is dragged.<br>A drag event can be triggered by a 150 ms long press. If the duration of a long-press gesture is set to less than or equal to 150 ms, the callback for the long-press gesture takes precedence. Otherwise, the callback for the drag event takes precedence.|
| onDragEnter(event: (event: 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 extraParam.<br>This event is valid only when the **onDrop** event is listened to.| | 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 the **onDrop** event is listened to.|
| onDragMove(event: (event: 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 extraParam.<br>This event is valid only when the **onDrop** event is listened to.| | 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 the **onDrop** event is listened to.|
| onDragLeave(event: (event: 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 extraParam.<br>This event is valid only when the **onDrop** event is listened to.| | 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 the **onDrop** event is listened to.|
| onDrop(event: (event: DragEvent, extraParams?: string) =&gt; void) | No | Triggered when the dragged item is dropped on 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 extraParam.| | onDrop(event: (event: [DragEvent](#dragevent), extraParams?: string) =&gt; void) | No | Triggered when the dragged item is dropped on 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)**.|
## DragItemInfo ## DragItemInfo
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| --------- | ---------------------------------------- | ---- | --------------------------------- | | --------- | ---------------------------------------- | ---- | --------------------------------- |
| pixelMap | [PixelMap](../apis/js-apis-image.md#pixelmap7) | No | Image to be displayed during dragging. | | pixelMap | [PixelMap](../apis/js-apis-image.md#pixelmap7) | No | Image to be displayed during dragging. |
| builder | [CustomBuilder](ts-types.md#custombuilder8) | No | Custom building for drawing. If **pixelMap** is set, this attribute is ignored.| | builder | [CustomBuilder](ts-types.md#custombuilder8) | No | Custom component to display during dragging. If **pixelMap** is set, this attribute is ignored.|
| extraInfo | string | No | Extra information of the dragged item. | | extraInfo | string | No | Extra information of the dragged item. |
## extraParam ## extraParams
Provides additional information required for dragging an item. Provides additional information required for dragging an item.
**extraParam** is a string converted from a JSON object. You can obtain the following attributes using the JSON object converted from **Json.parse**. **extraParams** is a string converted from a JSON object. You can obtain the following attributes using the JSON object converted from **Json.parse**.
| Name | Type | Description | | 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 **ListItem** component.| | 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.| | 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.|
## DragEvent ### DragEvent
| Sample Code | Return Value Type | Description | | Name | Type | Description |
| ------ | ------ | ---------------- | | ------ | ------ | ---------------- |
| getX() | number | X-coordinate of the item that is being dragged, in vp.| | getX() | number | X-coordinate of the item that is being dragged, in vp.|
| getY() | number | Y-coordinate of the item that is being dragged, in vp.| | getY() | number | Y-coordinate of the item that is being dragged, in vp.|
...@@ -47,111 +47,121 @@ Provides additional information required for dragging an item. ...@@ -47,111 +47,121 @@ Provides additional information required for dragging an item.
```ts ```ts
// xxx.ets // xxx.ets
@Extend(Text) function textStyle () {
.width('25%')
.height(35)
.fontSize(16)
.textAlign(TextAlign.Center)
.backgroundColor(0xAFEEEE)
}
@Entry @Entry
@Component @Component
struct DragExample { struct DragExample {
@State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six'] @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']
@State text: string = '' @State text: string = ''
@State bool: boolean = false @State bool: boolean = true
@State bool1: boolean = false @State eventType: string = ''
@State size: string = ''
@State appleVisible: Visibility = Visibility.Visible @State appleVisible: Visibility = Visibility.Visible
@State orangeVisible: Visibility = Visibility.Visible @State orangeVisible: Visibility = Visibility.Visible
@State bananaVisible: Visibility = Visibility.Visible @State bananaVisible: Visibility = Visibility.Visible
@State select: number = 0 private dragList: string[] = ['apple', 'orange', 'banana']
@State currentIndex: number = 0 @State fruitVisible: Visibility[] = [Visibility.Visible, Visibility.Visible, Visibility.Visible]
@State index: number = 0
// Customize the content displayed during dragging.
@Builder pixelMapBuilder() { @Builder pixelMapBuilder() {
Column() { Column() {
Text(this.text) Text(this.text)
.width('50%').height(60).fontSize(16).borderRadius(10) .width('50%')
.textAlign(TextAlign.Center).backgroundColor(Color.Yellow) .height(60)
.fontSize(16)
.borderRadius(10)
.textAlign(TextAlign.Center)
.backgroundColor(Color.Yellow)
} }
} }
build() { build() {
Column() { Column() {
Text('There are three Text elements here') Text('There are three Text elements here')
.fontSize(12).fontColor(0xCCCCCC).width('90%') .fontSize(12)
.textAlign(TextAlign.Start).margin(5) .fontColor(0xCCCCCC)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) { .width('90%')
Text('apple').width('25%').height(35).fontSize(16) .textAlign(TextAlign.Start)
.textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) .margin(5)
.visibility(this.appleVisible) Row({ space: 15 }) {
.onDragStart(() => { ForEach(this.dragList, (item, index) => {
this.bool = true Text(item)
this.text = 'apple' .textStyle()
this.appleVisible = Visibility.Hidden .visibility(this.fruitVisible[index])
return this.pixelMapBuilder .onDragStart(() => {
}) this.bool = true
Text('orange').width('25%').height(35).fontSize(16) this.text = item
.textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) this.fruitVisible[index] = Visibility.None
.visibility(this.orangeVisible) return this.pixelMapBuilder
.onDragStart(() => { })
this.bool = true .onTouch((event: TouchEvent) => {
this.text = 'orange' if (event.type === TouchType.Down) {
this.orangeVisible = Visibility.Hidden this.eventType = 'Down'
return this.pixelMapBuilder this.index = index
}) }
Text('banana').width('25%').height(35).fontSize(16) if (event.type === TouchType.Up) {
.textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) this.eventType = 'Up'
.visibility(this.bananaVisible) if (this.bool) {
.onDragStart((event: DragEvent, extraParams: string) => { this.fruitVisible[index] = Visibility.Visible
console.log('Text onDragStarts, ' + extraParams) }
this.bool = true }
this.text = 'banana' })
this.bananaVisible = Visibility.Hidden })
return this.pixelMapBuilder }.padding({ top: 10, bottom: 10 }).margin(10)
})
}.border({ width: 1 }).width('90%').padding({ top: 10, bottom: 10 }).margin(10) Text('This is a List element')
.fontSize(12)
Text('This is a List element').fontSize(12) .fontColor(0xCCCCCC)
.fontColor(0xCCCCCC).width('90%') .width('90%')
.textAlign(TextAlign.Start).margin(15) .textAlign(TextAlign.Start)
List({ space: 20, initialIndex: 0 }) { .margin(15)
List({ space: 20 }) {
ForEach(this.numbers, (item) => { ForEach(this.numbers, (item) => {
ListItem() { ListItem() {
Text('' + item) Text(item)
.width('100%').height(80).fontSize(16).borderRadius(10) .width('100%')
.textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) .height(80)
.fontSize(16)
.borderRadius(10)
.textAlign(TextAlign.Center)
.backgroundColor(0xAFEEEE)
} }
.onDragStart((event: DragEvent, extraParams: string) => {
console.log('ListItem onDragStarts, ' + extraParams)
var jsonString = JSON.parse(extraParams)
this.bool1 = true
this.text = this.numbers[jsonString.selectedIndex]
this.select = jsonString.selectedIndex
return this.pixelMapBuilder
})
}, item => item) }, item => item)
} }
.editMode(true) .editMode(true)
.height('50%').width('90%').border({ width: 1 }) .height('50%')
.width('90%')
.border({ width: 1 })
.padding(15)
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 })
.onDragEnter((event: DragEvent, extraParams: string) => { .onDragEnter((event: DragEvent, extraParams: string) => {
console.log('List onDragEnter, ' + extraParams) console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
}) })
.onDragMove((event: DragEvent, extraParams: string) => { .onDragMove((event: DragEvent, extraParams: string) => {
console.log('List onDragMove, ' + extraParams) console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
}) })
.onDragLeave((event: DragEvent, extraParams: string) => { .onDragLeave((event: DragEvent, extraParams: string) => {
console.log('List onDragLeave, ' + extraParams) console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
}) })
.onDrop((event: DragEvent, extraParams: string) => { .onDrop((event: DragEvent, extraParams: string) => {
var jsonString = JSON.parse(extraParams) let jsonString = JSON.parse(extraParams);
if (this.bool) { if (this.bool) {
// Insert an element using the splice method.
this.numbers.splice(jsonString.insertIndex, 0, this.text) this.numbers.splice(jsonString.insertIndex, 0, this.text)
this.bool = false this.bool = false
} else if (this.bool1) {
this.numbers.splice(jsonString.selectedIndex, 1)
this.numbers.splice(jsonString.insertIndex, 0, this.text)
this.bool = false
this.bool1 = false
} }
this.fruitVisible[this.index] = Visibility.None
}) })
}.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 }) }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 })
} }
} }
``` ```
![en-us_image_0000001212218450](figures/en-us_image_0000001212218450.gif) ![en-us_image_0000001252667389](figures/en-us_image_0000001252667389.gif)
en/application-dev/reference/arkui-ts/ts-universal-events-key.md
浏览文件 @ cf1ea7dc
# Key Event # Key Event
A key event is triggered when a component interacts with a keyboard, remote control, or any other input device with keys. A key event is triggered when a focusable component, such as **\<Button>**, interacts with a keyboard, remote control, or any other input device with keys. To use a key event for components that are not focusable by default, such as **\<Text>** and **\<Image>**, first set their **focusable** attribute to **true**.
> **NOTE** > **NOTE**
> >
> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Events ## Events
| Name | Bubbling Supported| Description | | Name | Bubbling Supported| Description |
...@@ -19,11 +20,11 @@ A key event is triggered when a component interacts with a keyboard, remote cont ...@@ -19,11 +20,11 @@ A key event is triggered when a component interacts with a keyboard, remote cont
| Name | Type | Description | | Name | Type | Description |
| ------------------------------------- | ---------------------------------------- | -------------------------- | | ------------------------------------- | ---------------------------------------- | -------------------------- |
| type | [KeyType](ts-appendix-enums.md#keytype) | Key type. | | type | [KeyType](ts-appendix-enums.md#keytype) | Key type. |
| keyCode | number | number | Key code. | | keyCode | number | Key code. |
| keyText | string | Key value. | | keyText | string | Key value. |
| keySource | [KeySource](ts-appendix-enums.md#keysource) | Type of the input device that triggers the key event. | | keySource | [KeySource](ts-appendix-enums.md#keysource) | Type of the input device that triggers the key event. |
| deviceId | number | ID of the input device that triggers the key event. | | deviceId | number | ID of the input device that triggers the key event. |
| metaKey | number | State of the metakey when the key is pressed. The value **1** means the pressed state, and **0** means the unpressed state.| | 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. | | timestamp | number | Timestamp when the key is pressed. |
| stopPropagation | () => void | Stops the event from bubbling upwards or downwards. | | stopPropagation | () => void | Stops the event from bubbling upwards or downwards. |
...@@ -35,20 +36,20 @@ A key event is triggered when a component interacts with a keyboard, remote cont ...@@ -35,20 +36,20 @@ A key event is triggered when a component interacts with a keyboard, remote cont
@Entry @Entry
@Component @Component
struct KeyEventExample { struct KeyEventExample {
@State text: string = '' @State text: string = '';
@State eventType: string = '' @State eventType: string = '';
build() { build() {
Column() { Column() {
Button('KeyEvent').backgroundColor(0x2788D9) Button('KeyEvent')
.onKeyEvent((event: KeyEvent) => { .onKeyEvent((event: KeyEvent) => {
if (event.type === KeyType.Down) { if (event.type === KeyType.Down) {
this.eventType = 'Down' this.eventType = 'Down';
} }
if (event.type === KeyType.Up) { if (event.type === KeyType.Up) {
this.eventType = 'Up' this.eventType = 'Up';
} }
console.info(this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText) this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText;
}) })
Text(this.text).padding(15) Text(this.text).padding(15)
}.height(300).width('100%').padding(35) }.height(300).width('100%').padding(35)
...@@ -56,4 +57,4 @@ struct KeyEventExample { ...@@ -56,4 +57,4 @@ struct KeyEventExample {
} }
``` ```
![en-us_image_0000001257058433](figures/en-us_image_0000001257058433.gif) ![en-us_image_0000001174264364](figures/en-us_image_0000001174264364.png)
\ No newline at end of file
en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
浏览文件 @ cf1ea7dc
...@@ -12,37 +12,43 @@ The show/hide event is triggered when a component is mounted or unmounted from t ...@@ -12,37 +12,43 @@ The show/hide event is triggered when a component is mounted or unmounted from t
| Name | Bubbling Supported| Description | | Name | Bubbling Supported| Description |
| ------------------------------------------------ | -------- | -------------------------- | | ------------------------------------------------ | -------- | -------------------------- |
| onAppear(event: () =&gt; void) | No | Triggered when the component is displayed.| | onAppear(event: () =&gt; void) | No | Triggered when the component is displayed.|
| onDisappear(event: () =&gt; void) | No | Triggered when the component disappears.| | onDisappear(event: () =&gt; void) | No | Triggered when the component is hidden. |
## Example ## Example
```ts ```ts
// xxx.ets // xxx.ets
import prompt from '@system.prompt' import prompt from '@ohos.prompt';
@Entry @Entry
@Component @Component
struct AppearExample { struct AppearExample {
@State isShow: boolean = true @State isShow: boolean = true;
private myText: string = 'Text for onAppear' @State changeAppear: string = 'Hide Text';
private changeAppear: string = 'Hide Text' private myText: string = 'Text for onAppear';
build() { build() {
Column() { Column() {
Button(this.changeAppear) Button(this.changeAppear)
.onClick(() => { .onClick(() => {
this.isShow = !this.isShow this.isShow = !this.isShow;
}).margin(3).backgroundColor(0x2788D9) }).margin(15)
if (this.isShow) { if (this.isShow) {
Text(this.myText) Text(this.myText).fontSize(26).fontWeight(FontWeight.Bold)
.onAppear(() => { .onAppear(() => {
this.changeAppear = 'Show Text' this.changeAppear = 'Hide Text';
prompt.showToast({ message: 'The text is shown', duration: 2000 }) prompt.showToast({
message: 'The text is shown',
duration: 2000
})
}) })
.onDisAppear(() => { .onDisAppear(() => {
this.changeAppear = 'Hide Text' this.changeAppear = 'Show Text';
prompt.showToast({ message: 'The text is hidden', duration: 2000 }) prompt.showToast({
message: 'The text is hidden',
duration: 2000
})
}) })
} }
}.padding(30).width('100%') }.padding(30).width('100%')
...@@ -50,4 +56,4 @@ struct AppearExample { ...@@ -50,4 +56,4 @@ struct AppearExample {
} }
``` ```
![en-us_image_0000001211898468](figures/en-us_image_0000001211898468.gif) ![en-us_image_0000001219864151](figures/en-us_image_0000001219864151.gif)
en/application-dev/reference/arkui-ts/ts-universal-events-touch.md
浏览文件 @ cf1ea7dc
...@@ -11,7 +11,7 @@ A touch event is triggered when a finger is pressed, slides, or is lifted from a ...@@ -11,7 +11,7 @@ A touch event is triggered when a finger is pressed, slides, or is lifted from a
| Name | Bubbling Supported| Description | | Name | Bubbling Supported| Description |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| onTouch(event: (event?: TouchEvent) =&gt; void) | Yes | Invoked when a touch action is triggered. For details about **event**, see [TouchEvent](#touchevent).| | onTouch(event: (event?: TouchEvent) =&gt; void) | Yes | Invoked when a touch event is triggered. For details about **event**, see [TouchEvent](#touchevent).|
## TouchEvent ## TouchEvent
...@@ -23,8 +23,8 @@ A touch event is triggered when a finger is pressed, slides, or is lifted from a ...@@ -23,8 +23,8 @@ A touch event is triggered when a finger is pressed, slides, or is lifted from a
| changedTouches | Array&lt;[TouchObject](#touchobject)&gt; | Finger information changed.| | changedTouches | Array&lt;[TouchObject](#touchobject)&gt; | Finger information changed.|
| stopPropagation | () => void | Stops the event from bubbling upwards or downwards.| | 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.| | 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) | Display area of the element that triggers the gesture event.| | target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8) | Display area of the element that triggers the gesture event.|
| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md) | Event input device.| | source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype)| Event input device.|
## TouchObject ## TouchObject
...@@ -35,8 +35,8 @@ A touch event is triggered when a finger is pressed, slides, or is lifted from a ...@@ -35,8 +35,8 @@ A touch event is triggered when a finger is pressed, slides, or is lifted from a
| id | number | Unique identifier of a finger. | | id | number | Unique identifier of a finger. |
| screenX | number | X coordinate of the touch point relative to the upper left corner of the application window. | | screenX | number | X coordinate of the touch point relative to the upper left corner of the application window. |
| screenY | number | Y coordinate of the touch point relative to the upper left corner of the application window. | | screenY | number | Y coordinate of the touch point relative to the upper left corner of the application window. |
| x | number | X coordinate of the touch point relative to the upper left corner of the component being touched.| | x | number | X coordinate of the touch point relative to the left edge of the component being touched.|
| y | number | Y coordinate of the touch point relative to the upper left corner of the component being touched.| | y | number | Y coordinate of the touch point relative to the upper edge of the component being touched.|
## Example ## Example
...@@ -45,31 +45,47 @@ A touch event is triggered when a finger is pressed, slides, or is lifted from a ...@@ -45,31 +45,47 @@ A touch event is triggered when a finger is pressed, slides, or is lifted from a
@Entry @Entry
@Component @Component
struct TouchExample { struct TouchExample {
@State text: string = '' @State text: string = '';
@State eventType: string = '' @State eventType: string = '';
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { Column() {
Button('Touch').backgroundColor(0x2788D9).height(40).width(80) Button('Touch').height(40).width(100)
.onTouch((event: TouchEvent) => { .onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) { if (event.type === TouchType.Down) {
this.eventType = 'Down' this.eventType = 'Down';
} }
if (event.type === TouchType.Up) { if (event.type === TouchType.Up) {
this.eventType = 'Up' this.eventType = 'Up';
} }
if (event.type === TouchType.Move) { if (event.type === TouchType.Move) {
this.eventType = 'Move' this.eventType = 'Move';
} }
console.info(this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: ' this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
+ event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\ncomponent globalPos:(' + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
+ event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:' + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
+ event.target.area.width + '\nheight:' + event.target.area.height) + event.target.area.width + '\nheight:' + event.target.area.height;
})
Button('Touch').height(50).width(200).margin(20)
.onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) {
this.eventType = 'Down';
}
if (event.type === TouchType.Up) {
this.eventType = 'Up';
}
if (event.type === TouchType.Move) {
this.eventType = 'Move';
}
this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
+ event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
+ event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
+ event.target.area.width + '\nheight:' + event.target.area.height;
}) })
Text(this.text) Text(this.text)
}.height(200).width(350).padding({ left: 35, right: 35, top: 35 }) }.width('100%').padding(30)
} }
} }
``` ```
![en-us_image_0000001212058464](figures/en-us_image_0000001212058464.gif) ![en-us_image_0000001209874754](figures/en-us_image_0000001209874754.gif)
en/application-dev/reference/arkui-ts/ts-universal-focus-event.md
浏览文件 @ cf1ea7dc
# Focus Event # Focus Event
A focus event is triggered when the page focus moves between components. It can be used to change the content of a component. A focus event is triggered when the page focus moves between components. It can be used to process related logic within the component.
> **NOTE** > **NOTE**
> >
> 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 APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
>
> - Currently, only the Tab button and arrow buttons on the external keyboard can be used to trigger the focus event.
## Events
| Name | Bubbling Supported| Description | | Name | Bubbling Supported| Description |
| ---------------------------------------- | -------- | --------------- | | ---------------------------------------- | -------- | --------------- |
| onFocus(event: () =&gt; void) | No | Triggered when the current component obtains focus.| | onFocus(event: () =&gt; void) | No | Triggered when the current component obtains focus.|
| onBlur(event:() =&gt; void) | No | Triggered when the current component loses focus.| | onBlur(event:() =&gt; void) | No | Triggered when the current component loses focus.|
> **NOTE**
>
> The following components support focus events: **\<Button>**, **\<Text>**, **\<Image>**, **\<List>**, and **\<Grid>**.
## Example ## Example
...@@ -26,44 +22,52 @@ A focus event is triggered when the page focus moves between components. It can ...@@ -26,44 +22,52 @@ A focus event is triggered when the page focus moves between components. It can
@Entry @Entry
@Component @Component
struct FocusEventExample { struct FocusEventExample {
@State textOne: string = '' @State oneButtonColor: string = '#FFC0CB';
@State textTwo: string = '' @State twoButtonColor: string = '#87CEFA';
@State textThree: string = '' @State threeButtonColor: string = '#90EE90';
@State oneButtonColor: string = '#FF0000'
@State twoButtonColor: string = '#87CEFA'
@State threeButtonColor: string = '#90EE90'
build() { build() {
Column({ space:20 }){ Column({ space: 20 }) {
Button(this.textOne) // You can use the up and down arrow keys on an external keyboard to move the focus between the three buttons. When a button gains focus, its color changes. When it loses focus, its color changes back.
Button('First Button')
.backgroundColor(this.oneButtonColor) .backgroundColor(this.oneButtonColor)
.width(260).height(70).fontColor(Color.Black) .width(260)
.height(70)
.fontColor(Color.Black)
.focusable(true) .focusable(true)
.onFocus(() => { .onFocus(() => {
this.textOne = 'First Button onFocus' this.oneButtonColor = '#FF0000';
this.oneButtonColor = '#AFEEEE'
}) })
.onBlur(() => { .onBlur(() => {
this.textOne = 'First Button onBlur' this.oneButtonColor = '#FFC0CB';
this.oneButtonColor = '#FFC0CB'
}) })
Button(this.textTwo) Button('Second Button')
.backgroundColor(this.twoButtonColor) .backgroundColor(this.twoButtonColor)
.width(260).height(70).fontColor(Color.Black) .width(260)
.height(70)
.fontColor(Color.Black)
.focusable(true) .focusable(true)
Button(this.textThree) .onFocus(() => {
this.twoButtonColor = '#FF0000';
})
.onBlur(() => {
this.twoButtonColor = '#87CEFA';
})
Button('Third Button')
.backgroundColor(this.threeButtonColor) .backgroundColor(this.threeButtonColor)
.width(260).height(70).fontColor(Color.Black) .width(260)
.height(70)
.fontColor(Color.Black)
.focusable(true) .focusable(true)
.onFocus(() => { .onFocus(() => {
this.textThree = 'Third Button onFocus' this.threeButtonColor = '#FF0000';
this.threeButtonColor = '#AFEEEE'
}) })
.onBlur(() => { .onBlur(() => {
this.textThree = 'Third Button onBlur' this.threeButtonColor = '#90EE90';
this.threeButtonColor = '#FFC0CB'
}) })
}.width('100%').margin({ top:20 }) }.width('100%').margin({ top: 20 })
} }
} }
``` ```
![focus](figures/focus.png)
en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
浏览文件 @ cf1ea7dc
# Mouse Event # Mouse Event
If an action triggers multiple events, the order of these events is fixed. By default, mouse events are transmitted transparently. If an action triggers multiple events, the order of these events is fixed. By default, mouse events are transmitted transparently.
...@@ -11,7 +15,7 @@ If an action triggers multiple events, the order of these events is fixed. By de ...@@ -11,7 +15,7 @@ If an action triggers multiple events, the order of these events is fixed. By de
| Name | Bubbling Supported| Description | | Name | Bubbling Supported| Description |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| onHover(event: (isHover: boolean) =&gt; void) | No | 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.| | onHover(event: (isHover?: boolean) =&gt; void) | No | 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: (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.| | 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.|
...@@ -19,16 +23,16 @@ If an action triggers multiple events, the order of these events is fixed. By de ...@@ -19,16 +23,16 @@ If an action triggers multiple events, the order of these events is fixed. By de
| Name | Type | Description | | Name | Type | Description |
| --------- | ------------------------------- | -------------------- | | --------- | ------------------------------- | -------------------- |
| screenX | number | X coordinate of the click point relative to the upper left corner of the application window.| | screenX | number | X coordinate of the cursor position relative to the upper left corner of the application window.|
| screenY | number | Y coordinate of the click point 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 click point relative to the upper left corner of the component being clicked.| | 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 click point 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.|
| button | [MouseButton](ts-appendix-enums.md#mousebutton) | Mouse button. | | button | [MouseButton](ts-appendix-enums.md#mousebutton) | Mouse button. |
| action | [MouseAction](ts-appendix-enums.md#mouseaction) | Event action. | | action | [MouseAction](ts-appendix-enums.md#mouseaction) | Mouse action. |
| stopPropagation | () => void | Stops the event from bubbling upwards or downwards. | | 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. | | 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) | Display area of the component that triggers the event.| | 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) | Event input device. | | source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype)| Event input device.|
## Example ## Example
...@@ -37,31 +41,80 @@ If an action triggers multiple events, the order of these events is fixed. By de ...@@ -37,31 +41,80 @@ If an action triggers multiple events, the order of these events is fixed. By de
@Entry @Entry
@Component @Component
struct MouseEventExample { struct MouseEventExample {
@State hoverText: string = 'no hover' @State hoverText: string = 'no hover';
@State mouseText: string = 'MouseText' @State mouseText: string = '';
@State color: Color = Color.Blue @State action: string = '';
@State mouseBtn: string = '';
@State color: Color = Color.Blue;
build() { build() {
Column({ space:20 }) { Column({ space: 20 }) {
Button(this.hoverText) Button(this.hoverText)
.width(180).height(80)
.backgroundColor(this.color)
.onHover((isHover: boolean) => { .onHover((isHover: boolean) => {
// Use the onHover event to dynamically change the text content and background color of a button when the mouse pointer is hovered on it.
if (isHover) { if (isHover) {
this.hoverText = 'on hover' this.hoverText = 'hover';
this.color = Color.Pink this.color = Color.Pink;
} else { } else {
this.hoverText = 'no hover' this.hoverText = 'no hover';
this.color = Color.Blue this.color = Color.Blue;
} }
}) })
.backgroundColor(this.color)
Button('onMouse') Button('onMouse')
.width(180).height(80)
.onMouse((event: MouseEvent) => { .onMouse((event: MouseEvent) => {
console.log(this.mouseText = 'onMouse:\nButton = ' + event.button + switch (event.button) {
'\nAction = ' + event.action + '\nlocalXY=(' + event.x + ',' + event.y + ')' + case MouseButton.None:
'\nscreenXY=(' + event.screenX + ',' + event.screenY + ')') this.mouseBtn = 'None';
break;
case MouseButton.Left:
this.mouseBtn = 'Left';
break;
case MouseButton.Right:
this.mouseBtn = 'Right';
break;
case MouseButton.Back:
this.mouseBtn = 'Back';
break;
case MouseButton.Forward:
this.mouseBtn = 'Forward';
break;
case MouseButton.Middle:
this.mouseBtn = 'Middle';
break;
}
switch (event.action) {
case MouseAction.Hover:
this.action = 'Hover';
break;
case MouseAction.Press:
this.action = 'Press';
break;
case MouseAction.Move:
this.action = 'Move';
break;
case MouseAction.Release:
this.action = 'Release';
break;
}
this.mouseText = 'onMouse:\nButton = ' + this.mouseBtn +
'\nAction = ' + this.action + '\nXY=(' + event.x + ',' + event.y + ')' +
'\nscreenXY=(' + event.screenX + ',' + event.screenY + ')';
}) })
Text(this.mouseText) Text(this.mouseText)
}.padding({ top: 20 }).width('100%') }.padding({ top: 30 }).width('100%')
} }
} }
``` ```
The figure below shows how the button looks like when hovered on.
![mouse](figures/mouse.png)
The figure below shows how the button looks like when clicked.
![mouse1](figures/mouse1.png)
en/application-dev/reference/js-service-widget-ui/Readme-EN.md 0 → 100644
浏览文件 @ cf1ea7dc
# JS Service Widget UI Components
- JS Service Widget UI Framework
- [File Organization](js-service-widget-file.md)
- Syntax
- [HML](js-service-widget-syntax-hml.md)
- [CSS](js-service-widget-syntax-css.md)
- [Data and Event Configuration](js-service-widget-configuration.md)
- [Multi-Language Capability](js-service-widget-multiple-languages.md)
- [Version Compatibility Adaptation](js-service-widget-version-compatibility.md)
- Components
- Universal
- [Universal Attributes](js-service-widget-common-attributes.md)
- [Universal Styles](js-service-widget-common-styles.md)
- [Universal Events](js-service-widget-common-events.md)
- [Gradient Styles](js-service-widget-common-gradient.md)
- [Media Query](js-service-widget-common-mediaquery.md)
- [Custom Font Styles](js-service-widget-common-customizing-font.md)
- [Accessibility](js-service-widget-common-accessibility.md)
- [Atomic Layout](js-service-widget-common-atomic-layout.md)
- Container Components
- [div](js-service-widget-container-div.md)
- [list](js-service-widget-container-list.md)
- [list-item](js-service-widget-container-list-item.md)
- [stack](js-service-widget-container-stack.md)
- [swiper](js-service-widget-container-swiper.md)
- Basic Components
- [button](js-service-widget-basic-button.md)
- [calendar](js-service-widget-basic-calendar.md)
- [chart](js-service-widget-basic-chart.md)
- [clock](js-service-widget-basic-clock.md)
- [divider](js-service-widget-basic-divider.md)
- [image](js-service-widget-basic-image.md)
- [input](js-service-widget-basic-input.md)
- [progress](js-service-widget-basic-progress.md)
- [span](js-service-widget-basic-span.md)
- [text](js-service-widget-basic-text.md)
- Custom Components
- [Custom Component Basic Usage](js-service-widget-custom-basic-usage.md)
- [Custom Events](js-service-widget-custom-events.md)
- [Props](js-service-widget-custom-props.md)
- [Data Types](js-service-widget-appendix-types.md)
en/application-dev/ui/figures/en-us_image_00000011.gif 0 → 100644
浏览文件 @ cf1ea7dc
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或