| itemSpace | Length | 0 | Space between child components. |
| cachedCount<sup>8+</sup> | number | 1 | Number of child components to be cached. |
| disableSwipe<sup>8+</sup> | boolean | false | Whether to disable the swipe feature. |
| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md)\| Curves | Curve.Ease | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve enums](ts-animatorproperty.md). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using the API provided by the interpolation calculation module. |
| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md)\| Curves | Curve.Ease | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve enums](ts-animatorproperty.md). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using APIs provided by the interpolation calculation module. |
| indicatorStyle<sup>8+</sup> | {<br/>left?: Length,<br/>top?: Length,<br/>right?: Length,<br/>bottom?: Length,<br/>size?: Length,<br/>color?: Color,<br/>selectedColor?: Color<br/>} | - | Style of the navigation dots indicator.<br/>- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br/>- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br/>- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br/>- **bottom**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br/>- **size**: diameter of the navigation dots indicator.<br/>- **color**: color of the navigation dots indicator.<br/>- **selectedColor**: color of the selected navigation dot. |
### SwiperController
## SwiperController
Controller of the **<Swiper>** component. You can bind this object to the **<Swiper>** component and use it to control page switching.
Controller of the **<Swiper\>** component. You can bind this object to the **<Swiper\>** component and use it to control page switching.
| Name | Description |
| Name | Description |
| -------- | -------- |
| showNext():void | Turns to the next page. |
| showPrevious():void | Turns to the previous page. |
| showNext():void | Turns to the next page. |
| showPrevious():void | Turns to the previous page. |
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| onChange( index: number) => void | Triggered when the index of the currently displayed component changes. |
| onChange( index: number) => void | Triggered when the index of the currently displayed component changes. |
A key event is triggered when a component interacts with a keyboard, remote control, or any other input device with keys.
> **NOTE**
>
...
...
@@ -15,7 +16,7 @@ None
| Name | Bubbling Supported | Description |
| -------- | -------- | -------- |
| onKeyEvent(event: (event?: KeyEvent) => void) | Yes | Called when a key event occurs. For details about the event parameters, see [KeyEvent Object](#KeyEvent Object). |
| onKeyEvent(event: (event?: KeyEvent) => void) | Yes | Called when the a key event occurs on the bound component in focus. For details about **event**, see [KeyEvent](#keyevent). |
## KeyEvent
...
...
@@ -24,7 +25,7 @@ None
| Name | Type | Description |
| -------- | -------- | -------- |
| type | [KeyType](#keytype-enums) | Type of a key. |
| keyCode | number | Key code. |
| [keyCode](../apis/js-apis-keycode.md) | number | Key code. |
| keyText | string | Key value. |
| keySource | [KeySource](#keysource-enums) | Type of the input device that triggers the key event. |
| deviceId | number | ID of the input device that triggers the key event. |
...
...
@@ -36,7 +37,7 @@ None
| -------- | -------- |
| stopPropagation(): void | Stops the event from bubbling upwards or downwards. |
## KeyType Enums
## KeyType Enums
| Name | Description |
| -------- | -------- |
...
...
@@ -47,20 +48,10 @@ None
## KeySource Enums
| Name | Description |
| -------- | -------- |
| Unknown | Unknown input device. |
| [KeyCode](#common-keycode-enums) | The input device is a keyboard. |
| Unknown | Unknown input device. |
| Keyboard | The input device is a keyboard. |
## Common KeyCode Enums
| Value | Behavior | Physical Button |
| -------- | -------- | -------- |
| 19 | Upward | Up button. |
| 20 | Downward | Down button. |
| 21 | Leftward | Left button. |
| 22 | Rightward | Right button. |
| 23 | OK | **OK** key on a remote control. |
| 66 | OK | **Enter** key on a keyboard. |
| 160 | OK | **Enter** button on the numeric keypad. |
> - The build method must be defined for a custom component.
>
> **NOTE**
>
> - The **build** method must be defined for a custom component.
>
> - Custom constructors are prohibited for custom components.
The following code illustrates how to create a custom component named MyComponent:
The following code illustrates how to create a custom component named **MyComponent**:
```
@Component
...
...
@@ -37,10 +38,10 @@ struct MyComponent {
```
The build method of MyComponent is executed during initial rendering. When the component status changes, the build method will be executed again.
The **build** method of **MyComponent** is executed during initial rendering. When the component status changes, the build method will be executed again.
The following code illustrates how to use MyComponent:
The following code illustrates how to use **MyComponent**:
```
@Component
...
...
@@ -55,8 +56,7 @@ struct ParentComponent {
}
```
MyComponent can be applied multiple times and reused in different components, as shown in the code below:
**MyComponent** can be applied multiple times and reused in different components, as shown in the code below:
```
@Component
...
...
@@ -76,11 +76,11 @@ struct ParentComponent {
}
}
private aboutToAppear() {
aboutToAppear() {
console.log('ParentComponent: Just created, about to become rendered first time.')
}
private aboutToDisappear() {
aboutToDisappear() {
console.log('ParentComponent: About to be removed from the UI.')
