| None | Before execution, the animation does not apply any styles to the target component. After execution, the animation restores the target component to its default state.|
| Forwards | The target component retains the state set by the last keyframe encountered during execution of the animation. |
| Backwards | The animation applies the values defined in the first relevant keyframe once it is applied to the target component, and retains the values during the period set by **delay**. The first relevant keyframe depends on the value of **playMode**. If **playMode** is **Normal** or **Alternate**, the first relevant keyframe is in the **from** state. If **playMode** is **Reverse** or **AlternateReverse**, the first relevant keyframe is in the **to** state.|
| Both | The animation follows the rules for both **Forwards** and **Backwards**, extending the animation attributes in both directions.|
| None | Before execution, the animation does not apply any styles to the target component. After execution, the animation restores the target component to its default state.|
| Forwards | The target component retains the state set by the last keyframe encountered during execution of the animation. |
| Backwards | The animation applies the values defined in the first relevant keyframe once it is applied to the target component, and retains the values during the period set by **delay**. The first relevant keyframe depends on the value of **playMode**. If **playMode** is **Normal** or **Alternate**, the first relevant keyframe is in the **from** state. If **playMode** is **Reverse** or **AlternateReverse**, the first relevant keyframe is in the **to** state.|
| Both | The animation follows the rules for both **Forwards** and **Backwards**, extending the animation attributes in both directions.|
| Spring | Spring effect. When at one of the edges, the component can move beyond the bounds through touches, and produces a bounce effect when the user releases their finger.|
| Fade | Fade effect. When at one of the edges, the component produces a fade effect. |
| None | No effect when the component is at one of the edges. |
| Spring | Spring effect. When at one of the edges, the component can move beyond the bounds through touches, and produces a bounce effect when the user releases their finger.|
| Fade | Fade effect. When at one of the edges, the component produces a fade effect. |
| None | No effect when the component is at one of the edges. |
| Start | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one.|
| Center | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end.|
| End | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one.|
| SpaceBetween | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same.|
| SpaceAround | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components.|
| Start | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one.|
| Center | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end.|
| End | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one.|
| SpaceBetween | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same.|
| SpaceAround | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components.|
| SpaceEvenly | The child components are evenly distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between any two adjacent components are the same. |
| Auto | The default configuration in the flex container is used. |
| Start | The elements are in the flex container, top-aligned in the cross-axis direction. |
| Center | The elements are in the flex container, centered in the cross-axis direction. |
| End | The elements are in the flex container, bottom-aligned in the cross-axis direction. |
| Stretch | The elements are in the flex container, stretched and padded in the cross-axis direction. If the size is not set, the elements are stretched to the container size.|
| Baseline | The elements are in the flex container, text baseline aligned in the cross-axis direction. |
| Auto | The default configuration in the flex container is used. |
| Start | The elements are in the flex container, top-aligned in the cross-axis direction. |
| Center | The elements are in the flex container, centered in the cross-axis direction. |
| End | The elements are in the flex container, bottom-aligned in the cross-axis direction. |
| Stretch | The elements are in the flex container, stretched and padded in the cross-axis direction. If the size is not set, the elements are stretched to the container size.|
| Baseline | The elements are in the flex container, text baseline aligned in the cross-axis direction. |
| Left | The gradient direction is from right to left.|
| Top | The gradient direction is from bottom to top.|
| Right | The gradient direction is from left to right.|
| Bottom | The gradient direction is from top to bottom.|
| LeftTop | The gradient direction is upper left. |
| LeftBottom | The gradient direction is lower left. |
| RightTop | The gradient direction is upper right. |
| RightBottom | The gradient direction is lower right. |
| None | No gradient. |
| RightTop | The gradient direction is upper right. |
| RightBottom | The gradient direction is lower right. |
| None | No gradient. |
## SharedTransitionEffectType
| Name | Description |
| ----------- | ---------- |
| Static | The element position remains unchanged on the target page, and transition opacity can be configured. Currently, this effect is only valid in redirecting to the target page.|
| Exchange | The element is relocated and scaled properly on the target page.|
| Static | The element position remains unchanged on the target page, and transition opacity can be configured. Currently, this effect is only valid in redirecting to the target page. |
| Exchange | The element is relocated and scaled properly on the target page. |
| Default | Both the node and its child node respond to the hit test of a touch event, but its sibling node is blocked from the hit test. |
| Block | The node responds to the hit test of a touch event, but its child node and sibling node are blocked from the hit test. |
| Transparent | Both the node and its child node respond to the hit test of a touch event, and its sibling node is also considered during the hit test.|
| None | The node does not respond to the hit test of a touch event, but its child node and sibling node are considered during the hit test.|
| Default | Both the node and its child node respond to the hit test of a touch event, but its sibling node is blocked from the hit test. |
| Block | The node responds to the hit test of a touch event, but its child node and sibling node are blocked from the hit test. |
| Transparent | Both the node and its child node respond to the hit test of a touch event, and its sibling node is also considered during the hit test.|
| None | The node does not respond to the hit test of a touch event, but its child node and sibling node are considered during the hit test.|
@@ -16,31 +16,31 @@ Refresh\(value: \{ refreshing: boolean, offset?: number | string , friction?: n
**Parameters**
| Name| Value Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| refreshing | boolean | Yes| Whether the current component is being refreshed.<br>This parameter can be used with [$$](../../ui/ts-syntactic-sugar.md) for two-way binding of variables.|
| offset | string \| number | No| Distance to the top of the parent component from the **<Refresh\>** component that comes to rest after a successful pull-down gesture.<br>Default value: **16**, in vp|
| friction | number \| string | No| Coefficient of friction, which indicates the **<Refresh\>** component's sensitivity to the pull-down gesture. The value ranges from 0 to 100.<br>Default value: **62**<br>- **0** indicates that the **\<Refresh>** component is not sensitive to the pull-down gesture.<br>- **100** indicates that the **\<Refresh>** component is highly sensitive to the pull-down gesture.<br>- A larger value indicates a more sensitive response of the **\<Refresh>** component to the pull-down gesture.|
| refreshing | boolean | Yes | Whether the current component is being refreshed.<br>This parameter can be used with $$ for two-way binding of variables. |
| offset | string \| number | No | Distance to the top of the parent component from the **<Refresh\>** component that comes to rest after a successful pull-down gesture.<br>Default value: **16**, in vp |
| friction | number \| string | No | Coefficient of friction, which indicates the **<Refresh\>** component's sensitivity to the pull-down gesture. The value ranges from 0 to 100.<br>Default value: **62**<br>- **0** indicates that the **\<Refresh>** component is not sensitive to the pull-down gesture.<br>- **100** indicates that the **\<Refresh>** component is highly sensitive to the pull-down gesture.<br>- A larger value indicates a more sensitive response of the **\<Refresh>** component to the pull-down gesture. |
## Events
| Name| Description|
| -------- | -------- |
| onStateChange(callback: (state: RefreshStatus) => void)| Triggered when the refresh status changes.<br>- **state**: refresh status.|
| onRefreshing(callback: () => void)| Triggered when the component enters the refresh state.|
| 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. |
| autoCancel | boolean | No | Whether to allow users to click the overlay to exit.<br>Default value: **true** |
| alignment | [DialogAlignment](#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default** |
| offset | {<br>dx: Length \|[Resource](ts-types.md#resource),<br>dy: Length \|[Resource](ts-types.md#resource)<br>} | No | Offset of the dialog box relative to the alignment position.|
| customStyle | boolean | No | Whether to use a custom style for the dialog box.<br>Default value: **false** |
| gridCount<sup>8+</sup> | number | No | Number of grid columns occupied by the dialog box. |
| builder | CustomDialog | Yes | Constructor of the custom dialog box content. |
| cancel | () => void | No | Callback invoked when the dialog box is closed after the overlay exits. |
| autoCancel | boolean | No | Whether to allow users to click the overlay to exit.<br>Default value: **true** |
| alignment | [DialogAlignment](#dialogalignment)| No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default** |
| offset | {<br>dx: Length \|[Resource](ts-types.md#resource),<br>dy: Length \|[Resource](ts-types.md#resource)<br>} | No | Offset of the dialog box relative to the alignment position. |
| customStyle | boolean | No | Whether to use a custom style for the dialog box.<br>Default value: **false** |
| 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. |
| range | string[] \| [Resource](../../ui/ts-types.md#resource)| 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 \| 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.|
| Name | Type | Mandatory | Default Value | Description |
| range | string[] \| [Resource](ts-types.md#resource) | 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 \| 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|
| -------- | -------- | -------- |
| value | string | Value of the selected item.|
| index | number | Index of the selected item in the range.|
> - For wearables, the input type can only be **button**, **radio**, or **checkbox**.
>
>
> - The settings of **checked** take effect only when the input type is set to **checkbox** or **radio**. The default value of **checked** is **false**.
| element | Element resources. Each type of data is represented by a JSON file. The options are as follows:<br>- **boolean**: boolean data<br>- **color**: color data<br>- **float**: floating-point data<br>- **intarray**: array of integer<br>- **integer**: integer data<br>- **pattern**: pattern data<br>- **plural**: plural form data<br>- **strarray**: array of strings<br>- **string**: string data | It is recommended that files in the **element** sub-directory be named the same as the following files, each of which can contain only data of the same type:<br>- boolean.json<br>- color.json<br>- float.json<br>- intarray.json<br>- integer.json<br>- pattern.json<br>- plural.json<br>- strarray.json<br>- string.json |
| media | Media resources, including non-text files such as images, audios, and videos. | The file name can be customized, for example, **icon.png**. |
| profile | Other types of files, which are stored in their raw formats. | The file name can be customized. |
| media | Media resources, including non-text files such as images, audios, and videos. | The file name can be customized, for example, **icon.png**. |
| profile | Other types of files, which are stored in their raw formats. | The file name can be customized. |
You can create a sub-directory and its files under the **resources** directory based on the above descriptions of the qualifiers sub-directories and resource group sub-directories.
