diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md b/en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md index 43f8b6eeb6ac8a18d219829390627c4fe20e4780..39890e59e22c1a8736a566e280d08df9c5be1181 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md @@ -1,11 +1,12 @@ # TimePicker -> ![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 **\** component allows users to select a time from the given range. +> **NOTE**
+> +> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. + ## Required Permissions @@ -14,7 +15,7 @@ No ## Child Components -No +Not supported ## APIs @@ -54,11 +55,12 @@ Creates a time picker whose default time range is from 00:00 to 23:59. ### Time Picker -``` +```ts +// xxx.ets @Entry @Component struct TimePickerExample { - private selectedTime: Date = new Date('08-00') + private selectedTime: Date = new Date('7/22/2022 8:00:00') build() { Column() { diff --git a/en/application-dev/reference/arkui-ts/ts-container-swiper.md b/en/application-dev/reference/arkui-ts/ts-container-swiper.md index ce400d6a529c1d46d0edef2fcbd0dbd033610067..3ab228090e2b27142765a092224d31230d355017 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-swiper.md +++ b/en/application-dev/reference/arkui-ts/ts-container-swiper.md @@ -1,11 +1,12 @@ # Swiper -> ![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. -The **<Swiper>** component provides a container that allows users to switch among child components by swiping operations. +The **** component provides a container that allows users to switch among child components through swiping. ## Required Permissions @@ -23,9 +24,9 @@ This component can contain child components. Swiper(value:{controller?: SwiperController}) - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | controller | [SwiperController](#swipercontroller) | No | null | Controller bound to the component to control the page switching. | + | controller | [SwiperController](#swipercontroller) | No | null | Controller bound to the component to control the page switching. | ## Attributes @@ -42,30 +43,32 @@ Swiper(value:{controller?: SwiperController}) | itemSpace | Length | 0 | Space between child components. | | cachedCount8+ | number | 1 | Number of child components to be cached. | | disableSwipe8+ | boolean | false | Whether to disable the swipe feature. | -| curve8+ | [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. | +| curve8+ | [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. | +| indicatorStyle8+ | {
left?: Length,
top?: Length,
right?: Length,
bottom?: Length,
size?: Length,
color?: Color,
selectedColor?: Color
} | - | Style of the navigation dots indicator.
- **left**: distance between the navigation dots indicator and the left edge of the **\** component.
- **top**: distance between the navigation dots indicator and the top edge of the **\** component.
- **right**: distance between the navigation dots indicator and the right edge of the **\** component.
- **bottom**: distance between the navigation dots indicator and the right edge of the **\** component.
- **size**: diameter of the navigation dots indicator.
- **color**: color of the navigation dots indicator.
- **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 **** component. You can bind this object to the **** 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. | ## Example -``` +```ts +// xxx.ets class MyDataSource implements IDataSource { private list: number[] = [] private listener: DataChangeListener @@ -96,7 +99,7 @@ struct SwiperExample { private swiperController: SwiperController = new SwiperController() private data: MyDataSource = new MyDataSource([]) - private aboutToAppear(): void { + aboutToAppear(): void { let list = [] for (var i = 1; i <= 10; i++) { list.push(i.toString()); diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-key.md b/en/application-dev/reference/arkui-ts/ts-universal-events-key.md index 7e5533ed3769b0bf1248ca3761dca8f490d332d5..233209b41cd2f710e298ac0864227071e327d90c 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-events-key.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-events-key.md @@ -1,5 +1,6 @@ # Key Event +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. | ## Example diff --git a/en/application-dev/ui/ts-component-based-component.md b/en/application-dev/ui/ts-component-based-component.md index f247caa2887a59cdbb96e33ba23f22f7ed3137de..ad484fb9561da9cee1b4a57825c1228a8ee2c092 100644 --- a/en/application-dev/ui/ts-component-based-component.md +++ b/en/application-dev/ui/ts-component-based-component.md @@ -13,16 +13,17 @@ A struct decorated by @Component has the componentization capability and can ser - Data-driven update: The UI of custom components can be automatically updated based on the data of state variables. -For details about componentization, see [About @Component](ts-function-build.md). +For details about componentization, see [About @Component](ts-custom-component-initialization.md). -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: -> - 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.') } }