未验证 提交 89da0460 编写于 作者: O openharmony_ci 提交者: Gitee

!7233 翻译完成 7035:检视问题修改

Merge pull request !7233 from ester.zhou/TR-7035
# TimePicker # TimePicker
> **NOTE**<br>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<TimePicker>** component allows users to select a time from the given range. The **\<TimePicker>** component allows users to select a time from the given range.
> **NOTE**<br>
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions ## Required Permissions
...@@ -14,7 +15,7 @@ No ...@@ -14,7 +15,7 @@ No
## Child Components ## Child Components
No Not supported
## APIs ## APIs
...@@ -54,11 +55,12 @@ Creates a time picker whose default time range is from 00:00 to 23:59. ...@@ -54,11 +55,12 @@ Creates a time picker whose default time range is from 00:00 to 23:59.
### Time Picker ### Time Picker
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TimePickerExample { struct TimePickerExample {
private selectedTime: Date = new Date('08-00') private selectedTime: Date = new Date('7/22/2022 8:00:00')
build() { build() {
Column() { Column() {
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
> **NOTE**<br> > **NOTE**<br>
>
> 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.
...@@ -23,9 +24,9 @@ This component can contain child components. ...@@ -23,9 +24,9 @@ This component can contain child components.
Swiper(value:{controller?: SwiperController}) Swiper(value:{controller?: SwiperController})
- Parameters - 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 ## Attributes
...@@ -43,29 +44,31 @@ Swiper(value:{controller?: SwiperController}) ...@@ -43,29 +44,31 @@ Swiper(value:{controller?: SwiperController})
| cachedCount<sup>8+</sup> | number | 1 | Number of child components to be cached. | | 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. | | 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 APIs 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?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>color?:&nbsp;Color,<br/>selectedColor?:&nbsp;Color<br/>} | - | Style of the navigation dots indicator.<br/>- **left**:&nbsp;distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br/>- **top**:&nbsp;distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br/>- **right**:&nbsp;distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br/>- **bottom**:&nbsp;distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br/>- **size**:&nbsp;diameter of the navigation dots indicator.<br/>- **color**:&nbsp;color of the navigation dots indicator.<br/>- **selectedColor**:&nbsp;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. | | showNext():void | Turns to the next page. |
| showPrevious():void | Turns to the previous page. | | showPrevious():void | Turns to the previous page. |
## Events ## Events
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| onChange( index: number) =&gt; void | Triggered when the index of the currently displayed component changes. | | onChange( index: number) =&gt; void | Triggered when the index of the currently displayed component changes. |
## Example ## Example
``` ```ts
// xxx.ets
class MyDataSource implements IDataSource { class MyDataSource implements IDataSource {
private list: number[] = [] private list: number[] = []
private listener: DataChangeListener private listener: DataChangeListener
...@@ -96,7 +99,7 @@ struct SwiperExample { ...@@ -96,7 +99,7 @@ struct SwiperExample {
private swiperController: SwiperController = new SwiperController() private swiperController: SwiperController = new SwiperController()
private data: MyDataSource = new MyDataSource([]) private data: MyDataSource = new MyDataSource([])
private aboutToAppear(): void { aboutToAppear(): void {
let list = [] let list = []
for (var i = 1; i <= 10; i++) { for (var i = 1; i <= 10; i++) {
list.push(i.toString()); list.push(i.toString());
......
...@@ -13,16 +13,17 @@ A struct decorated by @Component has the componentization capability and can ser ...@@ -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. - 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**: > **NOTE**
> - The build method must be defined for a custom component. >
> > - The **build** method must be defined for a custom component.
>
> - Custom constructors are prohibited for custom components. > - 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 @Component
...@@ -37,10 +38,10 @@ struct MyComponent { ...@@ -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 @Component
...@@ -55,8 +56,7 @@ struct ParentComponent { ...@@ -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 @Component
...@@ -76,11 +76,11 @@ struct ParentComponent { ...@@ -76,11 +76,11 @@ struct ParentComponent {
} }
} }
private aboutToAppear() { aboutToAppear() {
console.log('ParentComponent: Just created, about to become rendered first time.') console.log('ParentComponent: Just created, about to become rendered first time.')
} }
private aboutToDisappear() { aboutToDisappear() {
console.log('ParentComponent: About to be removed from the UI.') console.log('ParentComponent: About to be removed from the UI.')
} }
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册