未验证 提交 14f115ac 编写于 作者: O openharmony_ci 提交者: Gitee

!9504 翻译完成 8160/8934

Merge pull request !9504 from ester.zhou/TR-8160
# Custom Dialog Box
A custom dialog box is a dialog box you customize by using APIs of the **CustomDialogController** class. You can set the style and content to your preference for a custom dialog box.
> **NOTE**<br>
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
A custom dialog box is a dialog box you customize by using APIs of the **CustomDialogController** class.
> **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.
## APIs
......@@ -14,38 +13,36 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, aut
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| builder | [CustomDialog](../../ui/ts-component-based-customdialog.md) | Yes | - | Constructor of the custom dialog box content. |
| cancel | () =&gt; void | No | - | Callback invoked when the dialog box is closed after the overlay exits. |
| autoCancel | boolean | No | true | Whether to allow users to click the overlay to exit. |
| alignment | DialogAlignment | No | DialogAlignment.Default | Alignment mode of the dialog box in the vertical direction. |
| offset | {<br/>dx: Length \|[Resource](../../ui/ts-types.md#resource),<br/>dy: Length \|[Resource](../../ui/ts-types.md#resource)<br/>} | No | - | Offset of the dialog box relative to the alignment position. |
| customStyle | boolean | No | false | Whether the style of the dialog box is customized. |
| gridCount<sup>8+</sup> | number | No | - | Count of grid columns occupied by the dialog box. |
- DialogAlignment enums
| Name | Description |
| -------- | -------- |
| Top | Vertical top alignment. |
| Center | Vertical center alignment. |
| Bottom | Vertical bottom alignment. |
| Default | Default alignment. |
| TopStart<sup>8+</sup> | Top left alignment. |
| TopEnd<sup>8+</sup> | Top right alignment. |
| CenterStart<sup>8+</sup> | Center left alignment. |
| CenterEnd<sup>8+</sup> | Center right alignment. |
| BottomStart<sup>8+</sup> | Bottom left alignment. |
| BottomEnd<sup>8+</sup> | Bottom right alignment. |
| Name | Type | Mandatory | Default Value | Description |
| ---------------------- | ---------------------------------------- | ---- | ----------------------- | ---------------------- |
| builder | [CustomDialog](../../ui/ts-component-based-customdialog.md) | Yes | - | Constructor of the custom dialog box content. |
| cancel | () =&gt; void | No | - | Callback invoked when the dialog box is closed after the overlay exits. |
| autoCancel | boolean | No | true | Whether to allow users to click the overlay to exit. |
| alignment | DialogAlignment | No | DialogAlignment.Default | Alignment mode of the dialog box in the vertical direction. |
| offset | {<br>dx: Length \| [Resource](../../ui/ts-types.md#resource)<br>dy: Length \| [Resource](../../ui/ts-types.md#resource)<br>} | No | - | Offset of the dialog box relative to the alignment position.|
| customStyle | boolean | No | false | Whether to use a custom style for the dialog box. |
| gridCount<sup>8+</sup> | number | No | - | Number of grid columns occupied by the dialog box. |
- DialogAlignment
| Name | Description |
| ------------------------ | ------- |
| Top | Vertical top alignment.|
| Center | Vertical center alignment.|
| Bottom | Vertical bottom alignment.|
| Default | Default alignment. |
| TopStart<sup>8+</sup> | Top left alignment. |
| TopEnd<sup>8+</sup> | Top right alignment. |
| CenterStart<sup>8+</sup> | Center left alignment. |
| CenterEnd<sup>8+</sup> | Center right alignment. |
| BottomStart<sup>8+</sup> | Bottom left alignment. |
| BottomEnd<sup>8+</sup> | Bottom right alignment. |
## CustomDialogController
### Objects to Import
```
```ts
dialogController : CustomDialogController = new CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean})
```
......@@ -59,25 +56,30 @@ Opens the content of the custom dialog box. If the content has been displayed, t
### close
close(): void
Closes the custom dialog box. If the dialog box is closed, this API does not take effect.
## Example
```ts
// xxx.ets
@CustomDialog
struct CustomDialogExample {
@Link textValue: string
@Link inputValue: string
controller: CustomDialogController
cancel: () => void
confirm: () => void
build() {
Column() {
Text('Software uninstall').width('70%').fontSize(20).margin({ top: 10, bottom: 10 })
Image($r('app.media.icon')).width(80).height(80)
Text('Whether to uninstall a software?').fontSize(16).margin({ bottom: 10 })
Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%')
.onChange((value: string) => {
this.textValue = value
})
Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Button('cancel')
.onClick(() => {
......@@ -86,6 +88,7 @@ struct CustomDialogExample {
}).backgroundColor(0xffffff).fontColor(Color.Black)
Button('confirm')
.onClick(() => {
this.inputValue = this.textValue
this.controller.close()
this.confirm()
}).backgroundColor(0xffffff).fontColor(Color.Red)
......@@ -97,8 +100,10 @@ struct CustomDialogExample {
@Entry
@Component
struct CustomDialogUser {
@State textValue: string = ''
@State inputValue: string = 'click me'
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample({ cancel: this.onCancel, confirm: this.onAccept }),
builder: CustomDialogExample({ cancel: this.onCancel, confirm: this.onAccept, textValue: $textValue, inputValue: $inputValue }),
cancel: this.existApp,
autoCancel: true
})
......@@ -115,7 +120,7 @@ struct CustomDialogUser {
build() {
Column() {
Button('click me')
Button(this.inputValue)
.onClick(() => {
this.dialogController.open()
}).backgroundColor(0x317aff)
......
# Date Picker Dialog Box
> **NOTE**<br>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
A date picker dialog box is a dialog box that allows users to select a date from the given range.
> **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.
You can display a date picker in a dialog box to allow users to select a date from the given range.
## Required Permissions
......@@ -13,23 +15,24 @@ None
show(options?: DatePickerDialogOptions)
Displays a date picker dialog box.
Shows a date picker dialog box.
- options parameters
| Name | Type | Mandatory | Default Value | Description |
- DatePickerDialogOptions
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| start | Date | No | Date('1970-1-1') | Start date of the picker. |
| end | Date | No | Date('2100-12-31') | End date of the picker. |
| selected | Date | No | Current system date | Date of the selected item. |
| lunar | boolean | No | false | Whether to display the lunar calendar. |
| onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No | - | Callback invoked when the OK button in the dialog box is clicked. |
| onCancel | () => void | No | - | Triggered when the Cancel button in the dialog box is clicked. |
| onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No | - | Callback invoked when the selected item in the picker changes. |
| start | Date | No| Date('1970-1-1') | Start date of the picker.|
| end | Date | No| Date('2100-12-31') | End date of the picker.|
| selected | Date | No| Current system date| Date of the selected item.|
| lunar | boolean | No| false | Whether to display the lunar calendar.|
| onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Callback invoked when the OK button in the dialog box is clicked. |
| onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked. |
| onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Callback invoked when the selected item in the picker changes. |
## Example
### Date Picker Sample Code (With Lunar Calendar)
```
```ts
// xxx.ets
@Entry
@Component
struct DatePickerDialogExample01 {
......@@ -62,7 +65,8 @@ struct DatePickerDialogExample01 {
}
```
### Date Picker Sample Code (No Lunar Calendar)
```
```ts
// xxx.ets
@Entry
@Component
struct DatePickerDialogExample02 {
......
# Text Picker Dialog Box
You can display a text picker in a dialog box to allow users to select text from the given range.
A text picker dialog box is a dialog box that allows users to select text 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.
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
......@@ -23,10 +23,10 @@ Shows a text picker in the given settings.
| range | string[] | Yes| - | Data selection range of the picker.|
| selected | number | No| 0 | Index of the selected item in the range.|
| value | string | No | - | Value of the selected item. This parameter does not take effect when the **selected** parameter is set. If the value is not within the range, the first item in the range is used instead.|
| defaultPickerItemHeight | number | No| - | Default height of an item in the picker.|
| onAccept | (value: TextPickerResult) => void | No| - | Triggered when the OK button in the dialog box is clicked.|
| onCancel | () => void | No| - | Triggered when the Cancel button in the dialog box is clicked.|
| onChange | (value: TextPickerResult) => void | No| - | Triggered when the selected item in the picker changes.|
| defaultPickerItemHeight | number \| string | No| - | Default height of an item in the picker.|
| onAccept | (value: TextPickerResult) => void | No| - | Callback invoked when the OK button in the dialog box is clicked. |
| onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked. |
| onChange | (value: TextPickerResult) => void | No| - | Callback invoked when the selected item in the picker changes. |
- TextPickerResult
| Name| Type| Description|
......
# Time Picker Dialog Box
> **NOTE**<br>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
A time picker dialog box is a dialog box that allows users to select a time from the given range, which is from 00:00 to 23:59 by default.
> **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.
You can display a time picker in a dialog box to allow users to select a time from the given range, which is from 00:00 to 23:59 by default.
## Required Permissions
......@@ -15,19 +17,20 @@ show(options?: TimePickerDialogOptions)
Shows a time picker dialog box.
- options parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| selected | Date | No | Current system time | Time of the selected item. |
| useMilitaryTime | boolean | No | false | Whether to display time in 24-hour format. |
| onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No | - | Callback invoked when the OK button in the dialog box is clicked. |
| onCancel | () => void | No | - | Triggered when the Cancel button in the dialog box is clicked. |
| onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No | - | Callback invoked when the selected item in the picker changes. |
- TimePickerDialogOptions
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| selected | Date | No| Current system time| Time of the selected item.|
| useMilitaryTime | boolean | No| false | Whether to display time in 24-hour format.|
| onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| - | Callback invoked when the OK button in the dialog box is clicked. |
| onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked. |
| onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| - | Callback invoked when the selected item in the picker changes. |
## Example
### Time Picker Sample Code (24-Hour Clock)
```
```ts
// xxx.ets
@Entry
@Component
struct TimePickerDialogExample01 {
......@@ -55,7 +58,8 @@ struct TimePickerDialogExample01 {
}
```
### Time Picker Sample Code (12-Hour Clock)
```
```ts
// xxx.ets
@Entry
@Component
struct TimePickerDialogExample02 {
......
# Motion Path Animation
You can apply a motion path animation to a component, by setting the motion path of the component in a translation animation.
The motion path animation is used to animate a component along a custom path.
> **NOTE**
> **NOTE**
>
> This animation is 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.
## Attributes
| Name | Type | Default Value | Description |
| Parameter| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| motionPath | {<br/>path: string,<br/>from?: number,<br/>to?: number,<br/>rotatable?: boolean<br/>}<br/>**NOTE**<br/>In a path, **start** and **end** can be used to replace the start point and end point. Example:<br/>'Mstart.x start.y L50 50 Lend.x end.y Z' | {<br/>"",<br/>0.0,<br/>1.0,<br/>false<br/>} | Motion path of the component. The input parameters are described as follows:<br/>- **path**: motion path of the translation animation. The **svg** path string is used.<br/>- **from**: start point of the motion path. The default value is **0.0**.<br/>- **to**: end point of the motion path. The default value is **1.0**.<br/>- **rotatable**: whether to rotate along the path. |
| motionPath | {<br>path: string,<br>from?: number,<br>to?: number,<br>rotatable?: boolean<br>}<br>**NOTE**<br>In a path, **start** and **end** can be used to replace the start point and end point. Example:<br>'Mstart.x start.y L50 50 Lend.x end.y Z'| {<br>"",<br>0.0,<br>1.0,<br>false<br>} | Motion path of the component. The input parameters are described as follows:<br>- **path**: motion path of the translation animation. The value is an SVG path string.<br>- **from**: start point of the motion path. The default value is **0.0**.<br>- **to**: end point of the motion path. The default value is **1.0**.<br>- **rotatable**: whether to rotate along the path.|
## Example
```ts
// xxx.ets
@Entry
......
# Page Transition
Customize the page transition animations by configuring the page entrance and exit components in the global **pageTransition** method.
The page transition navigates users between pages. You can customize page transitions by configuring the page entrance and exit components in the global **pageTransition** API.
> **NOTE**
>
......@@ -70,16 +70,12 @@ Customization method 1: The entrance animation of the current page is configured
struct PageTransitionExample1 {
@State scale1: number = 1
@State opacity1: number = 1
@State active: boolean = false
build() {
Column() {
Navigator({ target: 'pages/page1', type: NavigationType.Push }) {
Image($r('app.media.bg1')).width("100%").height("100%")
}
.onClick(() => {
this.active = true
})
}.scale({ x: this.scale1 }).opacity(this.opacity1)
}
// Customization method 1: Customize the transition process.
......@@ -105,7 +101,6 @@ struct PageTransitionExample1 {
struct AExample {
@State scale2: number = 1
@State opacity2: number = 1
@State active: boolean = false
build() {
Column() {
......@@ -141,16 +136,12 @@ Customization method 2: The entrance animation of the current page is configured
struct PageTransitionExample {
@State scale1: number = 1
@State opacity1: number = 1
@State active: boolean = false
build() {
Column() {
Navigator({ target: 'pages/page1', type: NavigationType.Push }) {
Image($r('app.media.bg1')).width("100%").height("100%")
}
.onClick(() => {
this.active = true
})
}.scale({ x: this.scale1 }).opacity(this.opacity1)
}
......@@ -172,16 +163,12 @@ struct PageTransitionExample {
struct PageTransitionExample1 {
@State scale2: number = 1
@State opacity2: number = 1
@State active: boolean = false
build() {
Column() {
Navigator({ target: 'pages/index', type: NavigationType.Push }) {
Image($r('app.media.bg2')).width ("100%").height("100%")
}
.onClick(() => {
this.active = true
})
}.scale({ x: this.scale2 }).opacity(this.opacity2)
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册