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 0c8193971e4b765b36e7064a2041ec9b646c9332..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 -> **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 0e72a05681396dc2a4bc086c31ce0ff8ed827282..3ab228090e2b27142765a092224d31230d355017 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-swiper.md +++ b/en/application-dev/reference/arkui-ts/ts-container-swiper.md @@ -2,6 +2,7 @@ > **NOTE**
+> > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. @@ -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 @@ -43,29 +44,31 @@ Swiper(value:{controller?: SwiperController}) | 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 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 **** 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/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.') } }