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>
> **NOTE**
> This method 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.
A custom dialog box is a dialog box you customize by using APIs of the **CustomDialogController** class.
| builder | [CustomDialog](../../ui/ts-component-based-customdialog.md) | Yes | - | Constructor of the custom dialog box content. |
| builder | [CustomDialog](../../ui/ts-component-based-customdialog.md) | Yes | - | Constructor of the custom dialog box content. |
| cancel | () => void | No | - | Callback invoked when the dialog box is closed after the overlay exits. |
| cancel | () => 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. |
| 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. |
| 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. |
| 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. |
| customStyle | boolean | No | false | Whether to use a custom style for the dialog box. |
| gridCount<sup>8+</sup> | number | No | - | Count of grid columns occupied by the dialog box. |
| gridCount<sup>8+</sup> | number | No | - | Number of grid columns occupied by the dialog box. |
- DialogAlignment enums
- DialogAlignment
| Name | Description |
| Name | Description |
| -------- | -------- |
| ------------------------ | ------- |
| Top | Vertical top alignment. |
| Top | Vertical top alignment.|
| Center | Vertical center alignment. |
| Center | Vertical center alignment.|
| Bottom | Vertical bottom alignment. |
| Bottom | Vertical bottom alignment.|
| Default | Default alignment. |
| Default | Default alignment. |
| TopStart<sup>8+</sup>| Top left alignment. |
| TopStart<sup>8+</sup> | Top left alignment. |
| TopEnd<sup>8+</sup>| Top right alignment. |
| TopEnd<sup>8+</sup> | Top right alignment. |
| CenterStart<sup>8+</sup> | Center left alignment. |
| CenterStart<sup>8+</sup> | Center left alignment. |
| CenterEnd<sup>8+</sup>| Center right alignment. |
| CenterEnd<sup>8+</sup> | Center right alignment. |
| BottomStart<sup>8+</sup> | Bottom left alignment. |
| BottomStart<sup>8+</sup> | Bottom left alignment. |
| BottomEnd<sup>8+</sup>| Bottom right alignment. |
| BottomEnd<sup>8+</sup> | Bottom right alignment. |
| start | Date | No | Date('1970-1-1') | Start date of the picker. |
| start | Date | No| Date('1970-1-1') | Start date of the picker.|
| end | Date | No | Date('2100-12-31') | End 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. |
| selected | Date | No| Current system date| Date of the selected item.|
| lunar | boolean | No | false | Whether to display the lunar calendar. |
| 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. |
| 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. |
| 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. |
| onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Callback invoked when the selected item in the picker changes. |
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**
> **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
## Required Permissions
...
@@ -23,10 +23,10 @@ Shows a text picker in the given settings.
...
@@ -23,10 +23,10 @@ Shows a text picker in the given settings.
| range | string[] | Yes| - | Data selection range of the picker.|
| range | string[] | Yes| - | Data selection range of the picker.|
| selected | number | No| 0 | Index of the selected item in the range.|
| 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.|
| 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.|
| defaultPickerItemHeight | number \| string | 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.|
| onAccept | (value: TextPickerResult) => 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.|
| onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked. |
| onChange | (value: TextPickerResult) => void | No| - | Triggered when the selected item in the picker changes.|
| onChange | (value: TextPickerResult) => void | No| - | Callback invoked when the selected item in the picker changes. |
| selected | Date | No | Current system time | Time of the selected item. |
| selected | Date | No| Current system time| Time of the selected item.|
| useMilitaryTime | boolean | No | false | Whether to display time in 24-hour format. |
| 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. |
| 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. |
| 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. |
| onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| - | Callback invoked when the selected item in the picker changes. |
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
## 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.|
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**
> **NOTE**
>
>
...
@@ -70,16 +70,12 @@ Customization method 1: The entrance animation of the current page is configured
...
@@ -70,16 +70,12 @@ Customization method 1: The entrance animation of the current page is configured
