diff --git a/en/application-dev/faqs/full-sdk-compile-guide.md b/en/application-dev/faqs/full-sdk-compile-guide.md index 93f94af15a90fac8cd2c87690e9c1ddbefebf559..984f34191b6eac5148782ec71755a9bfe27794c4 100644 --- a/en/application-dev/faqs/full-sdk-compile-guide.md +++ b/en/application-dev/faqs/full-sdk-compile-guide.md @@ -1,8 +1,8 @@ # Full SDK Compilation -The full SDK provides a full set of APIs available in OpenHarmony, including system APIs required by system applications. Vendors can leverage this SDK to develop applications. +The full SDK provides a full set of APIs available in OpenHarmony, including system APIs required by system applications. Vendors can use this SDK to develop applications. -Since OpenHarmony 3.2 Beta5, the full SDK is not provided with the version. If necessary, you can compile the SDK using the full source code. +Since OpenHarmony 3.2 Beta5, the full SDK is not provided with the version. You can obtain the full SDK by compiling the source code. ## Compiling the Full SDK @@ -17,13 +17,20 @@ Since OpenHarmony 3.2 Beta5, the full SDK is not provided with the version. If n 2. Download source code based on the downloaded manifest repository: **repo sync -c -d --force-sync** -3. Perform precompilation: **yes y | apt install libxinerama-dev libxcursor-dev libxrandr-dev libxi-dev && rm -rf prebuilts/clang/ohos/darwin-x86_64/clang-480513 && rm -rf prebuilts/clang/ohos/windows-x86_64/clang-480513 && rm -rf prebuilts/clang/ohos/linux-x86_64/clang-480513 && bash build/prebuilts_download.sh -ndk && apt-get update -qqy && apt-get install doxygen -y --force-yes** +3. Perform precompilation: -4. Perform compilation: **./build.sh --product-name ohos-sdk** + yes y | apt install libxinerama-dev libxcursor-dev libxrandr-dev libxi-dev && rm -rf prebuilts/clang/ohos/darwin-x86_64/clang-480513 && rm -rf prebuilts/clang/ohos/windows-x86_64/clang-480513 && rm -rf prebuilts/clang/ohos/linux-x86_64/clang-480513 && apt-get update -qqy && apt-get install doxygen -y --force-yes +4. Perform compilation on Windows: + + ./build.sh --product-name ohos-sdk + +5. Perform compilation on macOS: + + ./build.sh --product-name ohos-sdk --gn-args full_mini_debug=false --keep-ninja-going --gn-args=is_use_check_deps=false If the compilation is successful, export the files in the **out/sdk/packages/ohos-sdk/** directory. ## Replacing the SDK -After the full SDK is compiled, switch to it in DevEco Studio. For details, see [Guide to Switching to Full SDK](full-sdk-switch-guide.md). +After the full SDK is compiled, switch to it in DevEco Studio. For details, see [Switching to Full SDK](full-sdk-switch-guide.md). diff --git a/en/application-dev/reference/apis/js-apis-arkui-UIContext.md b/en/application-dev/reference/apis/js-apis-arkui-UIContext.md index 946463e335769b047494f0ed5b85ddbb911b3490..2eaeb473bc1924aa1060ab17ecb8215a5d978b57 100644 --- a/en/application-dev/reference/apis/js-apis-arkui-UIContext.md +++ b/en/application-dev/reference/apis/js-apis-arkui-UIContext.md @@ -1,6 +1,6 @@ # @ohos.arkui.UIContext (UIContext) -In the stage model, a window stage or window can use the **loadContent** API to load pages, create a UI instance, and render page content to the associated window. Naturally, UI instances and windows are associated on a one-by-one basis. Some global UI APIs are executed in the context of certain UI instances. When calling these APIs, you must identify the UI context, and consequently UI instance, by tracing the call chain. If these APIs are called on a non-UI page or in some asynchronous callback, the current UI context may fail to be identified, resulting in failure in API execution. +In the stage model, a window stage or window can use the **loadContent** API to load pages, create a UI instance, and render page content to the associated window. Naturally, UI instances and windows are associated on a one-by-one basis. Some global UI APIs are executed in the context of certain UI instances. When calling these APIs, you must identify the UI context, and consequently UI instance, by tracing the call chain. If these APIs are called on a non-UI page or in some asynchronous callback, the current UI context may fail to be identified, resulting in API execution errors. **@ohos.window** adds the [getUIContext](./js-apis-window.md#getuicontext10) API in API version 10 for obtaining the **UIContext** object of a UI instance. The API provided by the **UIContext** object can be directly applied to the corresponding UI instance. @@ -214,7 +214,7 @@ struct AnimateToExample { ### showAlertDialog -showAlertDialog(options: AlertDialogParamWithConfirm | AlertDialogParamWithButtons): void +showAlertDialog(options: AlertDialogParamWithConfirm | AlertDialogParamWithButtons | AlertDialogParamWithOptions): void Shows an alert dialog box. @@ -224,7 +224,8 @@ Shows an alert dialog box. | Name | Type | Mandatory| Description| | ---- | --------------- | -------- | -------- | -| options | [AlertDialogParamWithConfirm](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithconfirm) \| [AlertDialogParamWithButtons](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithbuttons) | Yes| Defines and displays the **\** component.| +| options | [AlertDialogParamWithConfirm](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithconfirm) \| [AlertDialogParamWithButtons](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithbuttons) \| [AlertDialogParamWithOptions](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithoptions10) | Yes| Defines and displays the **\** component.| + **Example** @@ -579,7 +580,7 @@ Obtains information about a system font based on the font name. | Type | Description | | ------------------------------------ | -------------- | -| [FontInfo](js-apis-font.md#fontinfo) | Information about the system font.| +| [FontInfo](js-apis-font.md#fontinfo10) | Information about the system font.| **Example** @@ -721,19 +722,21 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ```ts let router = uiContext.getRouter(); -try { - router.pushUrl({ - url: 'pages/routerpage2', - params: { - data1: 'message', - data2: { - data3: [123, 456, 789] - } +router.pushUrl({ + url: 'pages/routerpage2', + params: { + data1: 'message', + data2: { + data3: [123, 456, 789] } + } +}) + .then(() => { + // success + }) + .catch(err => { + console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`); }) -} catch (err) { - console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`); -} ``` ### pushUrl @@ -817,19 +820,21 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ```ts let router = uiContext.getRouter(); -try { - router.pushUrl({ - url: 'pages/routerpage2', - params: { - data1: 'message', - data2: { - data3: [123, 456, 789] - } +router.pushUrl({ + url: 'pages/routerpage2', + params: { + data1: 'message', + data2: { + data3: [123, 456, 789] } - }, router.RouterMode.Standard) -} catch (err) { - console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`); -} + } +}, router.RouterMode.Standard) + .then(() => { + // success + }) + .catch(err => { + console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`); + }) ``` ### pushUrl @@ -912,16 +917,18 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ```ts let router = uiContext.getRouter(); -try { - router.replaceUrl({ - url: 'pages/detail', - params: { - data1: 'message' - } +router.replaceUrl({ + url: 'pages/detail', + params: { + data1: 'message' + } +}) + .then(() => { + // success + }) + .catch(err => { + console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`); }) -} catch (err) { - console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`); -} ``` ### replaceUrl @@ -1089,19 +1096,21 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ```ts let router = uiContext.getRouter(); -try { - router.pushNamedRoute({ - name: 'myPage', - params: { - data1: 'message', - data2: { - data3: [123, 456, 789] - } +router.pushNamedRoute({ + name: 'myPage', + params: { + data1: 'message', + data2: { + data3: [123, 456, 789] } + } +}) + .then(() => { + // success + }) + .catch(err => { + console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`); }) -} catch (err) { - console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`); -} ``` ### pushNamedRoute @@ -1184,24 +1193,26 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ```ts let router = uiContext.getRouter(); -try { - router.pushNamedRoute({ - name: 'myPage', - params: { - data1: 'message', - data2: { - data3: [123, 456, 789] - } +router.pushNamedRoute({ + name: 'myPage', + params: { + data1: 'message', + data2: { + data3: [123, 456, 789] } - }, router.RouterMode.Standard) -} catch (err) { - console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`); -} + } +}, router.RouterMode.Standard) + .then(() => { + // success + }) + .catch(err => { + console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`); + }) ``` ### pushNamedRoute -pushNamedRoute(options: router.NamedRouterOptions, mode: RouterMode, callback: AsyncCallback<void>): void +pushNamedRoute(options: router.NamedRouterOptions, mode: router.RouterMode, callback: AsyncCallback<void>): void Navigates to a page using the named route. This API uses a promise to return the result. @@ -1279,16 +1290,18 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ```ts let router = uiContext.getRouter(); -try { - router.replaceNamedRoute({ - name: 'myPage', - params: { - data1: 'message' - } +router.replaceNamedRoute({ + name: 'myPage', + params: { + data1: 'message' + } +}) + .then(() => { + // success + }) + .catch(err => { + console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`); }) -} catch (err) { - console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`); -} ``` ### replaceNamedRoute @@ -1361,23 +1374,25 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc | ID | Error Message| | --------- | ------- | -| 100001 | if UI execution context not found, only throw in standard system. | +| 100001 | if can not get the delegate, only throw in standard system. | | 100004 | if the named route is not exist. | **Example** ```ts let router = uiContext.getRouter(); -try { - router.replaceNamedRoute({ - name: 'myPage', - params: { - data1: 'message' - } - }, router.RouterMode.Standard) -} catch (err) { - console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`); -} +router.replaceNamedRoute({ + name: 'myPage', + params: { + data1: 'message' + } +}, router.RouterMode.Standard) + .then(() => { + // success + }) + .catch(err => { + console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`); + }) ``` ### replaceNamedRoute @@ -1425,7 +1440,7 @@ router.replaceNamedRoute({ ### back -back(options: router.RouterOptions ): void +back(options?: router.RouterOptions ): void Returns to the previous page or a specified page. @@ -1435,7 +1450,7 @@ Returns to the previous page or a specified page. | Name | Type | Mandatory| Description | | ------- | ------------------------------------------------------- | ---- | ------------------------------------------------------------ | -| options | [router.RouterOptions](js-apis-router.md#routeroptions) | Yes | Description of the page. The **url** parameter indicates the URL of the page to return to. If the specified page does not exist in the page stack, the application does not respond. If no URL is set, the application returns to the previous page, and the page is not rebuilt. The page in the page stack is not reclaimed. It will be reclaimed after being popped up.| +| options | [router.RouterOptions](js-apis-router.md#routeroptions) | No | Description of the page. The **url** parameter indicates the URL of the page to return to. If the specified page does not exist in the page stack, the application does not respond. If no URL is set, the application returns to the previous page, and the page is not rebuilt. The page in the page stack is not reclaimed. It will be reclaimed after being popped up.| **Example** @@ -1531,13 +1546,15 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ```ts let router = uiContext.getRouter(); -try { - router.showAlertBeforeBackPage({ - message: 'Message Info' - }); -} catch(error) { - console.error(`showAlertBeforeBackPage failed, code is ${error.code}, message is ${error.message}`); -} +router.showAlertBeforeBackPage({ + message: 'Message Info' +}); + .then(() => { + // success + }) + .catch(err => { + console.error(`showAlertBeforeBackPage failed, code is ${error.code}, message is ${error.message}`); + }) ``` ### hideAlertBeforeBackPage @@ -1618,7 +1635,7 @@ try { ### showDialog -showDialog(options: promptAction.ShowDialogOptions, callback: AsyncCallback<promptAction.ShowDialogSuccessResponse<): void +showDialog(options: promptAction.ShowDialogOptions, callback: AsyncCallback<promptAction.ShowDialogSuccessResponse>): void Shows a dialog box. This API uses an asynchronous callback to return the result. diff --git a/en/application-dev/reference/apis/js-apis-arkui-dragController.md b/en/application-dev/reference/apis/js-apis-arkui-dragController.md index 8c4292fc30bf74109f0d76728543b368f1e1ef4d..f1b7fa4b3046b9127fec05e3f36fa37bd2fb6851 100644 --- a/en/application-dev/reference/apis/js-apis-arkui-dragController.md +++ b/en/application-dev/reference/apis/js-apis-arkui-dragController.md @@ -11,7 +11,7 @@ The **dragController** module provides APIs for initiating drag actions. When re ## Modules to Import -```js +```ts import dragController from "@ohos.arkui.dragController"; ``` @@ -35,7 +35,7 @@ Initiates a drag action, with the object to be dragged and the drag information ```ts import dragController from "@ohos.arkui.dragController" -import UDMF from '@ohos.data.UDMF' +import UDC from '@ohos.data.unifiedDataChannel'; @Entry @Component @@ -54,8 +54,8 @@ struct DragControllerPage { Button('touch to execute drag') .onTouch((event) => { if (event.type == TouchType.Down) { - let text = new UDMF.Text() - let unifiedData = new UDMF.UnifiedData(text) + let text = new UDC.Text() + let unifiedData = new UDC.UnifiedData(text) let dragInfo: dragController.DragInfo = { pointerId: 0, @@ -63,9 +63,9 @@ struct DragControllerPage { extraParams: '' } dragController.executeDrag(this.DraggingBuilder.bind(this), dragInfo, (err, {event, extraParams}) => { - if (event.getResult() == DragRet.DRAG_SUCCESS) { + if (event.getResult() == DragResult.DRAG_SUCCESSFUL) { // ... - } else if (event.getResult() == DragRet.DRAG_FAILED) { + } else if (event.getResult() == DragResult.DRAG_FAILED) { // ... } }) @@ -101,7 +101,7 @@ Initiates a drag action, with the object to be dragged and the drag information ```ts import dragController from "@ohos.arkui.dragController" -import UDMF from '@ohos.data.UDMF'; +import UDC from '@ohos.data.unifiedDataChannel'; import componentSnapshot from '@ohos.arkui.componentSnapshot'; import image from '@ohos.multimedia.image'; @@ -133,8 +133,8 @@ struct DragControllerPage { Button('touch to execute drag') .onTouch((event) => { if (event.type == TouchType.Down) { - let text = new UDMF.Text() - let unifiedData = new UDMF.UnifiedData(text) + let text = new UDC.Text() + let unifiedData = new UDC.UnifiedData(text) let dragInfo: dragController.DragInfo = { pointerId: 0, @@ -151,9 +151,9 @@ struct DragControllerPage { dragController.executeDrag(dragItemInfo, dragInfo) .then(({event, extraParams}) => { - if (event.getResult() == DragRet.DRAG_SUCCESS) { + if (event.getResult() == DragResult.DRAG_SUCCESSFUL) { // ... - } else if (event.getResult() == DragRet.DRAG_FAILED) { + } else if (event.getResult() == DragResult.DRAG_FAILED) { // ... } }) @@ -178,5 +178,5 @@ Defines the attributes required for initiating a drag action and information car | Name | Type | Mandatory| Description | | ----------- | ------------------------------------------------------ | ---- | ---------------------------------------- | | pointerId | number | Yes | ID of the touch point on the screen when dragging is started. | -| data | [UDMF.UnifiedData](./js-apis-data-udmf.md#unifieddata) | No | Data carried in the dragging process. | +| data | [unifiedDataChannel.UnifiedData](js-apis-data-unifiedDataChannel.md#unifieddata) | No | Data carried in the dragging process. | | extraParams | string | No | Additional information about the drag action. Not supported currently.| diff --git a/en/application-dev/reference/apis/js-apis-arkui-drawableDescriptor.md b/en/application-dev/reference/apis/js-apis-arkui-drawableDescriptor.md index 60a21b51554ccf04399842de7a6272e03fdbd2a5..818d35f722a41276b4f00fca2f195875f8b9e614 100644 --- a/en/application-dev/reference/apis/js-apis-arkui-drawableDescriptor.md +++ b/en/application-dev/reference/apis/js-apis-arkui-drawableDescriptor.md @@ -141,7 +141,7 @@ Obtains the **DrawableDescriptor** object of the background. **Example** ```ts let resManager = getContext().resourceManager -drawable: DrawableDescriptor = ( (resManager.getDrawableDescriptor($r('app.media.icon') +let drawable: DrawableDescriptor = ( (resManager.getDrawableDescriptor($r('app.media.icon') .id))).getBackground(); ``` diff --git a/en/application-dev/reference/apis/js-apis-base.md b/en/application-dev/reference/apis/js-apis-base.md index 8435c5b922204a5e94a437219564ca3f52520b39..2b7446e510e8b60af714cb39b145dd80228e9cf4 100644 --- a/en/application-dev/reference/apis/js-apis-base.md +++ b/en/application-dev/reference/apis/js-apis-base.md @@ -40,7 +40,7 @@ ErrorCallback\ { Defines a common callback that carries an error parameter. -The error parameter is of the [BusinessError](#businesserror) type. +The information returned by the callback is of the [BusinessError](#businesserror) type. **System capability**: SystemCapability.Base @@ -68,7 +68,7 @@ The type of the asynchronous return value is defined by the developer. | Name| Type | Mandatory| Description | | ---- | ------------------------------------------------------------ | ---- | ---------------------------- | -| err | [BusinessError](https://gitee.com/openharmony/docs/pulls/20172/files#businesserror) | Yes | Common error information about the API invoking failure.| +| err | [BusinessError](#businesserror) | Yes | Common error information about the API invoking failure.| | data | T | Yes | Common callback information. | ## BusinessError diff --git a/en/application-dev/reference/apis/js-apis-curve.md b/en/application-dev/reference/apis/js-apis-curve.md index ffc902f8eda9f2a5d5d0c55a4f6b6ceeabc1c031..6c47da8d85af191fdc7fc4fca312906f97c49d26 100644 --- a/en/application-dev/reference/apis/js-apis-curve.md +++ b/en/application-dev/reference/apis/js-apis-curve.md @@ -316,7 +316,7 @@ Since API version 9, this API is supported in ArkTS widgets. ```ts import Curves from '@ohos.curves' -let curve = Curves.initCurve(Curve.EaseIn) // Create an ease-in curve. +let curveValue = Curves.initCurve(Curve.EaseIn) // Create an ease-in curve. let value: number = curve.interpolate(0.5) // Calculate the interpolation for half of the time. ``` diff --git a/en/application-dev/reference/apis/js-apis-promptAction.md b/en/application-dev/reference/apis/js-apis-promptAction.md index b5cda219aca77e3aefb888c1793f7f9e7b2d3f0a..c2992be105f8e5e73fdf2078e0792f6142737a82 100644 --- a/en/application-dev/reference/apis/js-apis-promptAction.md +++ b/en/application-dev/reference/apis/js-apis-promptAction.md @@ -191,7 +191,10 @@ Describes the options for showing the dialog box. | ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | | title | string\| [Resource](../arkui-ts/ts-types.md#resource)9+| No | Title of the dialog box. | | message | string\| [Resource](../arkui-ts/ts-types.md#resource)9+| No | Text body. | -| buttons | [[Button](#button),[Button](#button)?,[Button](#button)?] | No | Array of buttons in the dialog box. The array structure is **{text:'button', color: '\#666666'}**. Up to three buttons are supported. The first button is of the **positiveButton** type, the second is of the **negativeButton** type, and the third is of the **neutralButton** type.| +| buttons | Array<[Button](#button)> | No | Array of buttons in the dialog box. The array structure is {text:'button', color: '\#666666'}. More than one button is supported. +| alignment10+ | [DialogAlignment](../arkui-ts/ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.
Default value: **DialogAlignment.Default**| +| offset10+ | [Offset](../arkui-ts/ts-types.md#offset) | No | Offset of the dialog box based on the **alignment** settings.
Default value: **{ dx: 0 , dy: 0 }**| +| maskRect10+| [Rectangle](../arkui-ts/ts-methods-alert-dialog-box.md#rectangle10) | No | Mask area of the dialog box. Events outside the mask area are transparently transmitted, and events within the mask area are not.
Default value: **{ x: 0, y: 0, width: '100%', height: '100%' }**| ## ShowDialogSuccessResponse diff --git a/en/application-dev/reference/apis/js-apis-router.md b/en/application-dev/reference/apis/js-apis-router.md index 2d97910441aa8dc3d5fe958c5424a0b449ce0620..cae7ab18487014df3776ad7d05bcb2588d840866 100644 --- a/en/application-dev/reference/apis/js-apis-router.md +++ b/en/application-dev/reference/apis/js-apis-router.md @@ -11,6 +11,8 @@ The **Router** module provides APIs to access pages through URLs. You can use th > - The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](./js-apis-arkui-UIContext.md#uicontext). > > - Since API version 10, you can use the [getRouter](./js-apis-arkui-UIContext.md#getrouter) API in [UIContext](./js-apis-arkui-UIContext.md#uicontext) to obtain the [Router](./js-apis-arkui-UIContext.md#router) object associated with the current UI context. +> +> - To achieve a better transition effect, you are advised to use the [\](../../ui/arkts-navigation-navigation.md) component and [modal transition](../../ui/arkts-modal-transition.md). ## Modules to Import @@ -437,6 +439,8 @@ router.pushNamedRoute({ }) ``` +For details, see [UI Development-Named Route](../../ui/arkts-routing.md#named-route). + ## router.pushNamedRoute10+ pushNamedRoute(options: NamedRouterOptions, callback: AsyncCallback<void>): void @@ -693,7 +697,7 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc | ID | Error Message| | --------- | ------- | -| 100001 | if UI execution context not found, only throw in standard system. | +| 100001 | if can not get the delegate, only throw in standard system. | | 100004 | if the named route is not exist. | **Example** @@ -871,13 +875,15 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc **Example** ```ts -try { - router.showAlertBeforeBackPage({ - message: 'Message Info' - }); -} catch(error) { - console.error(`showAlertBeforeBackPage failed, code is ${error.code}, message is ${error.message}`); -} +router.showAlertBeforeBackPage({ + message: 'Message Info' +}) + .then(() => { + // success + }) + .catch(err => { + console.error(`showAlertBeforeBackPage failed, code is ${error.code}, message is ${error.message}`); + }) ``` ## EnableAlertOptions @@ -932,7 +938,7 @@ Describes the page routing options. | Name | Type | Mandatory| Description | | ------ | ------ | ---- | ------------------------------------------------------------ | | url | string | Yes | URL of the target page, in either of the following formats:
- Absolute path of the page. The value is available in the pages list in the **config.json** file, for example:
- pages/index/index
- pages/detail/detail
- Particular path. If the URL is a slash (/), the home page is displayed.| -| params | object | No | Data that needs to be passed to the target page during redirection. The target page can use **router.getParams()** to obtain the passed parameters, for example, **this.keyValue** (**keyValue** is the value of a key in **params**). In the web-like paradigm, these parameters can be directly used on the target page. If the field specified by **key** already exists on the target page, the passed value of the key will be displayed.| +| params | object | No | Data that needs to be passed to the target page during redirection. The received data becomes invalid when the page is switched to another page. The target page can use **router.getParams()** to obtain the passed parameters, for example, **this.keyValue** (**keyValue** is the value of a key in **params**). In the web-like paradigm, these parameters can be directly used on the target page. If the field specified by **key** already exists on the target page, the passed value of the key will be displayed.
**NOTE**
The **params** parameter cannot pass objects returned by methods and system APIs, for example, **PixelMap** objects defined and returned by media APIs. To pass such objects, extract from them the basic type attributes to be passed, and then construct objects of the object type.| > **NOTE** diff --git a/en/application-dev/reference/apis/js-apis-syscap.md b/en/application-dev/reference/apis/js-apis-syscap.md index 05439e8cd6949a8f50caec8481fae3eb908cac3c..d9e5601d2e1096f363edf984857e06ef9999ab89 100644 --- a/en/application-dev/reference/apis/js-apis-syscap.md +++ b/en/application-dev/reference/apis/js-apis-syscap.md @@ -29,12 +29,17 @@ Checks whether a SysCap is supported. **Example** ```js -import geolocation from '@ohos.geolocation' +import geoLocationManager from '@ohos.geoLocationManager' -const isLocationAvailable = canIUse('SystemCapability.Location.Location'); +const isLocationAvailable = canIUse('SystemCapability.Location.Location.Core'); if (isLocationAvailable) { - geolocation.getCurrentLocation((location) => { - console.log(location.latitude, location.longitue); + geoLocationManager.getCurrentLocation((err, location) => { + if (err) { + console.log('err=' + JSON.stringify(err)); + } + if (location) { + console.log('location=' + JSON.stringify(location)); + } }); } else { console.log('Location not by this device.'); diff --git a/en/application-dev/reference/arkui-ts/figures/TextInputError.png b/en/application-dev/reference/arkui-ts/figures/TextInputError.png new file mode 100644 index 0000000000000000000000000000000000000000..2738da34ffdf692cbe23ca3ce2033e4e2a640e79 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/TextInputError.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/arkts-progressSmoothEffect.gif b/en/application-dev/reference/arkui-ts/figures/arkts-progressSmoothEffect.gif new file mode 100644 index 0000000000000000000000000000000000000000..65daefb814d4f64f4e85f0d3ef8be14fa04998dc Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/arkts-progressSmoothEffect.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/borderImage.gif b/en/application-dev/reference/arkui-ts/figures/borderImage.gif index dd8d0f1a9f9a786de94abf348130c526ecb09641..b3a316a22239c267af5503df959116dae4614338 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/borderImage.gif and b/en/application-dev/reference/arkui-ts/figures/borderImage.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582844.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582844.gif deleted file mode 100644 index 639261bd9e9997074cd45491807a58bb79a5def2..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582844.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058470.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058470.gif deleted file mode 100644 index 17ae76b8141d65147f9774d130711f46bf332d02..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058470.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_alert.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_alert.gif new file mode 100644 index 0000000000000000000000000000000000000000..a33bc5d56a5731133fb506d4be499b9aaf0b9d00 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_alert.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_custom.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_custom.gif new file mode 100644 index 0000000000000000000000000000000000000000..7ce7ddd59482b67c26553ad04fd8df26a0af5ddb Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_custom.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/showUnit.png b/en/application-dev/reference/arkui-ts/figures/showUnit.png deleted file mode 100644 index 4b60beda19ba2c6e314dcb0632d5d5953f79a952..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/showUnit.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-menu.md b/en/application-dev/reference/arkui-ts/ts-basic-components-menu.md index e9667470ccce848f8e67856851b4eaef9100ca1a..555fa94d7af464a408a1c60983523db9ca39b203 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-menu.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-menu.md @@ -27,6 +27,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | fontSize(deprecated) | [Length](ts-types.md#length) | Font size of the menu text. When **Length** is of the number type, the unit is fp.
This API is deprecated since API version 10. You are advised to use **font** instead.| | font10+ | [Font](ts-types.md#font) | Font style of the menu text.| | fontColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Font color of the menu text.| +| radius10+ | [Dimension](ts-types.md#dimension10) \| [BorderRadiuses](#borderradiuses9) | Radius of the menu border corners.
The default value follows the theme.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md index 060e00b1e3eca27a007342fe68ae309fe6e3d0b6..67923167b53a9bb450c157ed6e5eab46cefee56c 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md @@ -70,6 +70,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | strokeWidth | [Length](ts-types.md#length) | No | Stroke width of the progress indicator. It cannot be set in percentage.
Default value: **4.0vp** | | scaleCount | number | No | Number of divisions on the ring-style process indicator.
Default value: **120** | | scaleWidth | [Length](ts-types.md#length) | No | Scale width of the ring-style progress bar. It cannot be set in percentage. If it is greater than the value of **strokeWidth**, the default scale width is used.
Default value: **2.0vp**| +| enableSmoothEffect10+ | boolean | No| Whether to enable the smooth effect. When this effect is enabled, the progress change to the set value takes place gradually. Otherwise, it takes place immediately.
Default value: **true**| ## CapsuleStyleOptions10+ | Name | Type| Mandatory| Description| @@ -81,6 +82,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | fontColor | [ResourceColor](ts-types.md#resourcecolor) | No| Font color.
Default value: **'\#ff182431'**| | enableScanEffect | boolean | No| Whether to enable the scan effect.
Default value: **false**| | showDefaultPercentage | boolean | No| Whether to show the percentage of the current progress. This attribute does not take effect when the **content** attribute is set.
Default value: **false**| +| enableSmoothEffect | boolean | No| Whether to enable the smooth effect. When this effect is enabled, the progress change to the set value takes place gradually. Otherwise, it takes place immediately.
Default value: **true**| ## RingStyleOptions10+ | Name | Type | Mandatory| Description | @@ -89,12 +91,15 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | shadow | boolean | No | Whether to enable the shadow effect.
Default value: **false** | | status | [ProgressStatus10+](#progressstatus10) | No| Status of the progress indicator. When this parameter is set to **LOADING**, the check update animation is played, and the **value** settings do not take effect. When the value changes from **LOADING** to **PROGRESSING**, the check update animation stops when it has reached the end state.
Default value: **ProgressStatus.PROGRESSING**| | enableScanEffect | boolean | No| Whether to enable the scan effect.
Default value: **false**| +| enableSmoothEffect | boolean | No| Whether to enable the smooth effect. When this effect is enabled, the progress change to the set value takes place gradually. Otherwise, it takes place immediately.
Default value: **true**| ## LinearStyleOptions10+ | Name | Type | Mandatory| Description | | ------------- | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | | strokeWidth | [Length](ts-types.md#length) | No | Stroke width of the progress indicator. It cannot be set in percentage.
Default value: **4.0vp**| +| strokeRadius | [PX](ts-types.md#px10) \| [VP](ts-types.md#vp10) \| [LPX](ts-types.md#lpx10) \| [Resource](ts-types.md#resource)| No | Rounded corner radius of the progress indicator.
Value range: [0, strokeWidth/2] Default value: **strokeWidth/2**| | enableScanEffect | boolean | No| Whether to enable the scan effect.
Default value: **false**| +| enableSmoothEffect | boolean | No| Whether to enable the smooth effect. When this effect is enabled, the progress change to the set value takes place gradually. Otherwise, it takes place immediately.
Default value: **true**| ## ScaleRingStyleOptions10+ | Name | Type | Mandatory| Description | @@ -102,15 +107,18 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | strokeWidth | [Length](ts-types.md#length) | No | Stroke width of the progress indicator. It cannot be set in percentage.
Default value: **4.0vp** | | scaleCount | number | No | Number of divisions on the ring-style process indicator.
Default value: **120** | | scaleWidth | [Length](ts-types.md#length) | No | Scale width of the ring-style progress bar. It cannot be set in percentage. If it is greater than the value of **strokeWidth**, the default scale width is used.
Default value: **2.0vp**| +| enableSmoothEffect | boolean | No| Whether to enable the smooth effect. When this effect is enabled, the progress change to the set value takes place gradually. Otherwise, it takes place immediately.
Default value: **true**| ## EclipseStyleOptions10+ -No parameter available. +| Name | Type | Mandatory| Description | +| ------------ | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | +| enableSmoothEffect | boolean | No| Whether to enable the smooth effect. When this effect is enabled, the progress change to the set value takes place gradually. Otherwise, it takes place immediately.
Default value: **true**| ## ProgressStatus10+ | Name | Description | | ----------------------- | ---------------- | -| LOADING10+ | Loading.| -| PROGRESSING10+ | The progress is being updated.| +| LOADING | Loading.| +| PROGRESSING | The progress is being updated.| ## Events @@ -249,3 +257,38 @@ struct ProgressExample { } ``` ![capsuleProgressStyleEffect](figures/arkts-capsuleProgressStyleEffect.png) + +### Example 5 +This example shows the smooth effect. +```ts +@Entry +@Component +struct Index { + @State value: number = 0 + + build() { + Column({space: 10}) { + Text('enableSmoothEffect: true').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(5) + .margin({top: 20}) + Progress({value: this.value, total: 100, type:ProgressType.Linear}) + .style({strokeWidth: 10, enableSmoothEffect: true}) + + Text('enableSmoothEffect: false').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(5) + Progress({value: this.value, total: 100, type:ProgressType.Linear}) + .style({strokeWidth: 10, enableSmoothEffect: false}) + + Button('value +10').onClick(() => { + this.value += 10 + }) + .width(75) + .height(15) + .fontSize(9) + } + .width('50%') + .height('100%') + .margin({left:20}) + } +} + +``` +![progressSmoothEffect](figures/arkts-progressSmoothEffect.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-richeditor.md b/en/application-dev/reference/arkui-ts/ts-basic-components-richeditor.md index b492893437d12229d84e45fe345b23bb5a506839..586fb45899c8baf56b77aa1f2483e7690e88744d 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-richeditor.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-richeditor.md @@ -309,7 +309,7 @@ Provides the text style information. | fontSize | [Length](ts-types.md#length) \| number | No| Font size.
Default value: **16fp**| | fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | No| Font style.
Default value: **FontStyle.Normal**| | fontWeight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | No| Font weight.
For the number type, the value ranges from 100 to 900, at an interval of 100. A larger value indicates a heavier font weight. The default value is **400**.
For the string type, only strings of the number type are supported, for example, **"400"**, **"bold"**, **"bolder"**, **"lighter"**, **"regular"**, and **"medium"**, which correspond to the enumerated values in **FontWeight**.
Default value: **FontWeight.Normal**| -| fontFamily | [ResourceStr](ts-types.md#resourcestr) \| number \| string | No| Font family. Default value: **'HarmonyOS Sans'**.
Currently, only the default font is supported.
Default font: **'HarmonyOS Sans'**| +| fontFamily | [ResourceStr](ts-types.md#resourcestr) \| number \| string | No| Font family. The HarmonyOS Sans font and [register custom fonts](../apis/js-apis-font.md) are supported.
Default font: **'HarmonyOS Sans'**| | decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor)
} | No| Style and color of the text decorative line.
Default value: {
type: TextDecorationType.None,
color: Color.Black
}| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-span.md b/en/application-dev/reference/arkui-ts/ts-basic-components-span.md index 41565994b98dbaa17af0697226c1571bdefac2c9..5c9fa5a862602949c3a4d7b578ea6da56ff6a630 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-span.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-span.md @@ -58,6 +58,12 @@ struct SpanExample { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { Text('Basic Usage').fontSize(9).fontColor(0xCCCCCC) + Text() { + Span('In Line') + Span(' Component') + Span(' !') + } + Text() { Span('This is the Span component').fontSize(12).textCase(TextCase.Normal) .decoration({ type: TextDecorationType.None, color: Color.Red }) @@ -118,4 +124,4 @@ struct SpanExample { } ``` -![span](figures/span.png) +![Span](figures/span.png) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md index 61accc536e8ad4a8a06ed06e879a8de4ca4028ae..d159c2eac377744ee3defd0e90f4c55d45a81d9c 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md @@ -46,7 +46,7 @@ Among the [universal attributes](ts-universal-attributes-size.md) and [universal | caretStyle10+ | {
width: [Length](ts-types.md#length)
} | Caret style. | | caretPosition10+ | number | Caret position.| | showUnit10+ | [CustomBuilder](ts-types.md#CustomBuilder8) | Unit for content in the component.
By default, there is no unit.| -| showError10+ | string \| undefined | Error text displayed when an error occurs.
By default, no error text is displayed.| +| showError10+ | string \| undefined | Error message displayed when an error occurs.
By default, no error message is displayed.
**NOTE**
If the parameter type is string and the input content does not comply with specifications, the error message is displayed. If the parameter type is undefined, no error message is displayed. See [Example 2](#example-2).| | showUnderline10+ | boolean | Whether to show an underline.
Default value: **false**| | passwordIcon10+ | [PasswordIcon](#passwordicon10) | Password icon to display at the end of the password text box.
By default, the system-provided icon is used.| | enableKeyboardOnFocus10+ | boolean | Whether to enable the input method when the component obtains focus.
Default value: **true** | @@ -249,17 +249,20 @@ struct TextInputExample { ### Example 2 ```ts -// xxx.ets @Entry @Component struct TextInputExample { - @State PassWordSrc1:Resource=$r('app.media.icon') - @State PassWordSrc2:Resource=$r('app.media.icon') + @State PassWordSrc1: Resource = $r('app.media.onIcon') + @State PassWordSrc2: Resource = $r('app.media.offIcon') + @State TextError: string = undefined + @State Text: string = '' + @State NameText: string = 'test' + @Builder itemEnd() { Select([{ value: 'KB' }, { value: 'MB' }, - { value: 'GB'}, - { value: 'TB',}]) + { value: 'GB' }, + { value: 'TB', }]) .height("48vp") .borderRadius(0) .selected(2) @@ -270,33 +273,52 @@ struct TextInputExample { .selectedOptionFont({ size: 20, weight: 400 }) .optionFont({ size: 20, weight: 400 }) .backgroundColor(Color.Transparent) - .responseRegion({height:"40vp",width:"80%",x:'10%',y:'6vp'}) + .responseRegion({ height: "40vp", width: "80%", x: '10%', y: '6vp' }) .onSelect((index: number) => { console.info('Select:' + index) }) } build() { - Column() { + Column({ space: 20 }) { // Customize the password icon. - TextInput({ placeholder: 'user define password icon' }) + TextInput({ placeholder: 'Custom password icon' }) .type(InputType.Password) - .width(400) + .width(380) .height(60) - .passwordIcon({onIconSrc:this.PassWordSrc1,offIconSrc : this.PassWordSrc2}) + .passwordIcon({ onIconSrc: this.PassWordSrc1, offIconSrc: this.PassWordSrc2 }) // Show an underline. - TextInput({ placeholder: 'underline style' }) + TextInput({ placeholder: 'Underline style' }) .showUnderline(true) - .width(400) + .width(380) .height(60) .showError('Error') .showUnit(this.itemEnd.bind(this)) + + Text (`User name: ${this.Text}`) + .width('95%') + TextInput({ placeholder: 'Enter user name', text: this.Text }) + .showUnderline(true) + .width(380) + .showError(this.TextError) + .onChange((value: string) => { + this.Text = value + }) + .onSubmit(() => {// If the entered user name is incorrect, the text box will be cleared and the error message will be displayed. + if (this.Text == this.NameText) { + this.TextError = undefined + } else { + this.TextError ='Incorrect user name.' + this.Text = '' + } + }) + }.width('100%') } } ``` -![showUnit](figures/showUnit.png) +![TextInputError](figures/TextInputError.png) ### Example 3 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 1c4f04d875cf51f6868700329791bcd2298c7226..7b3d5620b87e6c945368f0a65a8ced5fa6ce08d0 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 @@ -45,10 +45,12 @@ In addition to the [universal events](ts-universal-events-click.md), the followi ## TimePickerResult -| Name | Type | Description | -| ------ | ------ | ------- | -| hour | number | Hour portion of the selected time.| -| minute | number | Minute portion of the selected time.| +Describes a time in 24-hour format. + +| Name | Type| Description | +| ------ | -------- | ----------------------------------- | +| hour | number | Hour portion of the selected time.
Value range: [0-23]| +| minute | number | Minute portion of the selected time.
Value range: [0-59]| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md index cdaa515a7bafb897390e0ec555b07e9937d89d18..17f50a55fbd800dd08334a9f5d259b15c56ed8f0 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md @@ -24,8 +24,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name| Type| Description| | -------- | -------- | -------- | -| width | number | Pixel width of the **ImageBitmap** object.
Since API version 9, this API is supported in ArkTS widgets.| -| height | number | Pixel height of the **ImageBitmap** object.
Since API version 9, this API is supported in ArkTS widgets.| +| width | number | Pixel width of the **ImageBitmap** object. The current value is **0**.
Since API version 9, this API is supported in ArkTS widgets.| +| height | number | Pixel height of the **ImageBitmap** object. The current value is **0**.
Since API version 9, this API is supported in ArkTS widgets.| **Example** 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 0756ef290138140a62b2602cd7860d03da07929c..6abc233cabed1abe450318daa33a1b4aedf8a2ca 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-swiper.md +++ b/en/application-dev/reference/arkui-ts/ts-container-swiper.md @@ -18,6 +18,8 @@ This component can contain child components. > When the **\** component's **displayMode** attribute is set to **SwiperDisplayMode.AutoLinear** or its **displayCount** attribute is set to **'auto'**, the child component whose **visibility** attribute is set to **None** does not take up space in the viewport, but this does not affect the number of navigation dots. > > If the **visibility** attribute of a child component is set to **None** or **Hidden**, it takes up space in the viewport, but is not displayed. +> +> When the number of child components is less than or equal to the total number of allowed nodes (totalDisplayCount = DisplayCount + prevMargin? (1: 0 ) + nextMargin? (1: 0 )) in the content area, the **\** component uses the non-looping mode for layout. In this case, the child components specified by **nextMargin** and **prevMargin** take up space in the viewport, but are not displayed. The specifications of the **\** component are calculated based on the value of **totalDisplayCount**. ## APIs diff --git a/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md b/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md index 44ff79e8bc80a7f2c88dc380febfc916c93aa87b..6bd1b259adeacfd05ac937a421a86b06504451ed 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md @@ -12,7 +12,7 @@ An action sheet is a dialog box that displays actions a user can take. ## ActionSheet.show -show(value: { title: string | Resource, message: string | Resource, confirm?: {value: string | Resource, action:() => void}, cancel?:()=>void, sheets: Array<SheetInfo>, autoCancel?:boolean, alignment?: DialogAlignment, offset?: { dx: number | string | Resource; dy: number | string | Resource } }) +show(value: { title: string | Resource, subtitle: Resource, message: string | Resource, confirm?: {enabled?: boolean, defaultFocus?: boolean, style?: DialogButtonStyle, value: string | Resource, action:() => void}, cancel?:()=>void, sheets: Array<SheetInfo>, autoCancel?:boolean, alignment?: DialogAlignment, offset?: { dx: number | string | Resource; dy: number | string | Resource } }) Defines and shows the action sheet. @@ -21,13 +21,15 @@ Defines and shows the action sheet. | Name | Type | Mandatory | Description | | ---------- | -------------------------- | ------- | ----------------------------- | | title | [Resource](ts-types.md#resource) \| string | Yes | Title of the dialog box.| +| subtitle10+ | [ResourceStr](ts-types.md#resourcestr) | No| Subtitle of the dialog box.| | message | [Resource](ts-types.md#resource) \| string | Yes | Content of the dialog box. | | autoCancel | boolean | No | Whether to close the dialog box when the overlay is clicked.
Default value: **true**
The value **true** means to close the dialog box when the overlay is clicked, and **false** means the opposite.| -| confirm | {
value: [ResourceStr](ts-types.md#resourcestr),
action: () => void
} | No | Text content of the confirm button and callback upon button clicking.
Default value:
**value**: button text.
**action**: callback upon button clicking.| +| confirm | {
enabled10+?: boolean,
defaultFocus10+?: boolean,
style10+?: [DialogButtonStyle](#dialogbuttonstyle10),
value: [ResourceStr](ts-types.md#resourcestr),
action: () => void
} | No | Information about the confirm button.
**enabled**: whether to respond when the button is clicked.
Default value: **true**
**defaultFocus**: whether the button is the default focus.
Default value: **false**
**style**: button style.
Default value: **DialogButtonStyle.DEFAULT**
**value**: button text.
**action**: callback upon button clicking.| | cancel | () => void | No | Callback invoked when the dialog box is closed after the overlay is clicked. | | alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.
Default value: **DialogAlignment.Bottom**| -| offset | {
dx: Length,
dy: Length
} | No | Offset of the dialog box relative to the alignment position.
Default value: {
dx: 0,
dy: 0
} | +| offset | {
dx: Length,
dy: Length
} | No | Offset of the dialog box relative to the alignment position.{
dx: 0,
dy: 0
} | | sheets | Array<SheetInfo> | Yes | Options in the dialog box. Each option supports the image, text, and callback.| +| maskRect10+ | [Rectangle](ts-methods-alert-dialog-box.md#rectangle10) | No | Mask area of the dialog box. Events outside the mask area are transparently transmitted, and events within the mask area are not.
Default value: **{ x: 0, y: 0, width: '100%', height: '100%' }**| ## SheetInfo @@ -37,6 +39,13 @@ Defines and shows the action sheet. | icon | [ResourceStr](ts-types.md#resourcestr) | No | Sheet icon. By default, no icon is displayed. | | action | ()=>void | Yes | Callback when the sheet is selected.| +## DialogButtonStyle10+ + +| Name | Description. | +| --------- | --------------------------------- | +| DEFAULT | Blue text on white background (black background under the dark theme).| +| HIGHLIGHT | White text on blue background. | + ## Example @@ -51,9 +60,11 @@ struct ActionSheetExample { .onClick(() => { ActionSheet.show({ title: 'ActionSheet title', + subtitle: 'ActionSheet subtitle', message: 'message', autoCancel: true, confirm: { + defaultFocus: true, value: 'Confirm button', action: () => { console.log('Get Alert Dialog handled') @@ -92,4 +103,4 @@ struct ActionSheetExample { } ``` -![en-us_image_0000001241668363](figures/en-us_image_0000001241668363.gif) +![en-us_image_action](figures/en-us_image_action.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md b/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md index 282865563a52e5e7b0d78d5387fe09898c57b31c..9ec9738b94e09d521054ee13c94ed3f86bcccb8a 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md @@ -14,32 +14,105 @@ You can set the text content and response callback for an alert dialog box. | Name | Type | Description| | ---- | --------------- | -------- | -| show | [AlertDialogParamWithConfirm](#alertdialogparamwithconfirm) \| [AlertDialogParamWithButtons](#alertdialogparamwithbuttons) | Defines and displays the **\** component. | +| show | [AlertDialogParamWithConfirm](#alertdialogparamwithconfirm) \| [AlertDialogParamWithButtons](#alertdialogparamwithbuttons) \| [AlertDialogParamWithOptions](#alertdialogparamwithoptions10) | Defines and displays the **\** component.| ## AlertDialogParamWithConfirm | Name | Type | Mandatory | Description | | ---------- | ---------------- | ---------- | ------------------------------- | | title | [ResourceStr](ts-types.md#resourcestr) | No | Title of the dialog box.| +| subtitle10+ | [ResourceStr](ts-types.md#resourcestr) | No| Subtitle of the dialog box.| | message | [ResourceStr](ts-types.md#resourcestr) | Yes | Content of the dialog box.| | autoCancel | boolean | No | Whether to close the dialog box when the overlay is clicked.
Default value: **true**| -| confirm | {
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),
action: () => void
} | No | Text content, text color, background color, and click callback of the confirm button.| +| confirm | {
enabled10+?: boolean,
defaultFocus10+?: boolean,
style10+?: [DialogButtonStyle](#dialogbuttonstyle10),
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),
action: () => void
} | No | Information about the confirm button.
**enabled**: whether to respond when the button is clicked.
Default value: **true**
**defaultFocus**: whether the button is the default focus.
Default value: **false**
**style**: button style.
Default value: **DialogButtonStyle.DEFAULT**
**value**: text of the button.
**fontColor**: font color of the button.
**backgroundColor**: background color of the button.
**action**: callback when the button is selected.| | cancel | () => void | No | Callback invoked when the dialog box is closed after the overlay is clicked.| | alignment | [DialogAlignment](#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.
Default value: **DialogAlignment.Default**| | offset | [Offset](ts-types.md#offset) | No | Offset of the dialog box relative to the alignment position.
Default value: **{ dx: 0 , dy: 0 }**| | gridCount | number | No | Number of grid columns occupied by the width of the dialog box.
Default value: **4**| +| maskRect10+| [Rectangle](#rectangle10) | No | Mask area of the dialog box. Events outside the mask area are transparently transmitted, and events within the mask area are not.
Default value: **{ x: 0, y: 0, width: '100%', height: '100%' }**| + +Priorities of the **confirm** parameters: **fontColor** and **backgroundColor** > **style** > **defaultFocus** + +| backgroundColor | fontColor | style | defaultFocus | Effect | +| --------------- | --------- | --------------------------- | ------------ | -------- | +| Green | Red | - | - | Red text on green background| +| Green | - | DialogButtonStyle.HIGHLIGHT | - | White text on green background| +| Green | - | DialogButtonStyle.DEFAULT | - | Blue text on green background| +| Green | - | - | TRUE | White text on green background| +| Green | - | - | FALSE/- | Blue text on green background| +| - | Red | DialogButtonStyle.HIGHLIGHT | - | Red text on blue background| +| - | Red | DialogButtonStyle.DEFAULT | - | Red text on white background| +| - | Red | - | TRUE | Red text on blue background| +| - | Red | - | FALSE/- | Red text on white background| +| - | - | DialogButtonStyle.HIGHLIGHT | - | White text on blue background| +| - | - | DialogButtonStyle.DEFAULT | - | Blue text on white background| +| - | - | - | TRUE | White text on blue background| +| - | - | - | FALSE/- | Blue text on white background| ## AlertDialogParamWithButtons | Name | Type | Mandatory | Description | | --------------- | ---------------------- | ------------ | --------------------- | | title | [ResourceStr](ts-types.md#resourcestr) | No | Title of the dialog box. | +| subtitle10+ | [ResourceStr](ts-types.md#resourcestr) | No| Subtitle of the dialog box.| +| message | [ResourceStr](ts-types.md#resourcestr) | Yes | Content of the dialog box. | +| autoCancel | boolean | No | Whether to close the dialog box when the overlay is clicked.
Default value: **true** | +| primaryButton | {
enabled10+?: boolean,
defaultFocus10+?: boolean,
style10+?: [DialogButtonStyle](#dialogbuttonstyle10),
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),
action: () => void;
} | No| Information about the confirm button.
**enabled**: whether to respond when the button is clicked.
Default value: **true**
**defaultFocus**: whether the button is the default focus.
Default value: **false**
**style**: button style.
Default value: **DialogButtonStyle.DEFAULT**
**value**: text of the button.
**fontColor**: font color of the button.
**backgroundColor**: background color of the button.
**action**: callback when the button is selected.| +| secondaryButton | {
enabled10+?: boolean,
defaultFocus10+?: boolean,
style10+?: [DialogButtonStyle](#dialogbuttonstyle10),
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),
action: () => void;
} | No | Information about the confirm button.
**enabled**: whether to respond when the button is clicked.
Default value: **true**
**defaultFocus**: whether the button is the default focus.
Default value: **false**
**style**: button style.
Default value: **DialogButtonStyle.DEFAULT**
**value**: text of the button.
**fontColor**: font color of the button.
**backgroundColor**: background color of the button.
**action**: callback when the button is selected.| +| cancel | () => void | No | Callback invoked when the dialog box is closed after the overlay is clicked. | +| alignment | [DialogAlignment](#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.
Default value: **DialogAlignment.Default**| +| offset | [Offset](ts-types.md#offset) | No | Offset of the dialog box relative to the alignment position.| +| gridCount | number | No | Number of grid columns occupied by the width of the dialog box.| +| maskRect10+ | [Rectangle](#rectangle10) | No | Mask area of the dialog box. Events outside the mask area are transparently transmitted, and events within the mask area are not.
Default value: **{ x: 0, y: 0, width: '100%', height: '100%' }**| + +## AlertDialogParamWithOptions10+ +| Name | Type | Mandatory | Description | +| --------------- | ---------------------- | ------------ | --------------------- | +| title | [ResourceStr](ts-types.md#resourcestr) | No | Title of the dialog box. | +| subtitle10+ | [ResourceStr](ts-types.md#resourcestr) | No | Subtitle of the dialog box. | | message | [ResourceStr](ts-types.md#resourcestr) | Yes | Content of the dialog box. | | autoCancel | boolean | No | Whether to close the dialog box when the overlay is clicked.
Default value: **true** | -| primaryButton | {
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),
action: () => void;
} | No| Text content, text color, background color, and click callback of the primary button.| -| secondaryButton | {
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),
action: () => void;
} | No | Text content, text color, background color, and click callback of the secondary button.| | cancel | () => void | No | Callback invoked when the dialog box is closed after the overlay is clicked. | | alignment | [DialogAlignment](#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.
Default value: **DialogAlignment.Default**| | offset | [Offset](ts-types.md#offset) | No | Offset of the dialog box relative to the alignment position.| | gridCount | number | No | Number of grid columns occupied by the width of the dialog box.| +| maskRect10+| [Rectangle](#rectangle10) | No | Mask area of the dialog box. Events outside the mask area are transparently transmitted, and events within the mask area are not.
Default value: **{ x: 0, y: 0, width: '100%', height: '100%' }**| +| buttons10+ | Array<[AlertDialogButtonOptions](#alertdialogbuttonoptions10)> | No | Buttons in the dialog box.| +|buttonDirection10+ | [DialogButtonDirection](#dialogbuttondirection10)| No | Direction in which buttons are laid out.
Default value: **DialogButtonDirection.AUTO**
When there are more than three buttons, the Auto mode (which automatically switches to the vertical layout when there are more than two buttons) is recommended. In non-Auto mode, buttons that extend beyond the display area are clipped.| + +## AlertDialogButtonOptions10+ +| Name | Type | Mandatory | Description | +| ------------------| ---------------------- | ------------ | --------------------- | +| enabled | boolean | No | Whether to respond when the button is clicked.
Default value: **true** | +| defaultFocus | boolean | No | Whether the button is the default focus.
Default value: **false** | +| style | [DialogButtonStyle](#dialogbuttonstyle10) | No | Style of the button.
Default value: **DialogButtonStyle.DEFAULT** | +| value | [ResourceStr](ts-types.md#resourcestr) | Yes | Text of the button. If the value is null, the button is not displayed. | +| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the button. | +| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the button. | +| action | () => void | Yes | Callback when the button is selected. | + +## DialogButtonDirection10+ +| Name | Description | +| -------------------------- | --------- | +| AUTO | Buttons are laid out horizontally when there are two or fewer buttons and vertically otherwise.| +| HORIZONTAL | Buttons are laid out horizontally.| +| VERTICAL | Buttons are laid out vertically.| + +Priorities of the **confirm** parameters: **fontColor** and **backgroundColor** > **style** > **defaultFocus** + +| backgroundColor | fontColor | style | defaultFocus | Effect | +| --------------- | --------- | --------------------------- | ------------ | -------- | +| Green | Red | - | - | Red text on green background| +| Green | - | DialogButtonStyle.HIGHLIGHT | - | White text on green background| +| Green | - | DialogButtonStyle.DEFAULT | - | Blue text on green background| +| Green | - | - | TRUE | White text on green background| +| Green | - | - | FALSE/- | Blue text on green background| +| - | Red | DialogButtonStyle.HIGHLIGHT | - | Red text on blue background| +| - | Red | DialogButtonStyle.DEFAULT | - | Red text on white background| +| - | Red | - | TRUE | Red text on blue background| +| - | Red | - | FALSE/- | Red text on white background| +| - | - | DialogButtonStyle.HIGHLIGHT | - | White text on blue background| +| - | - | DialogButtonStyle.DEFAULT | - | Blue text on white background| +| - | - | - | TRUE | White text on blue background| +| - | - | - | FALSE/- | Blue text on white background| ## DialogAlignment @@ -56,6 +129,32 @@ You can set the text content and response callback for an alert dialog box. | BottomStart8+ | Bottom left alignment. | | BottomEnd8+ | Bottom right alignment. | +## Rectangle10+ + +The **Rectangle** type is used to represent a mask area of a dialog box. + +| Name | Type | Mandatory| Description | +|--------|------------------------------|----|-----------------------------------| +| x | [Length](ts-types.md#length) | No | X coordinate of the mask area of the dialog box relative to the upper left corner of the window.
Default value: **0vp**| +| y | [Length](ts-types.md#length) | No | Y coordinate of the mask area of the dialog box relative to the upper left corner of the window.
Default value: **0vp**| +| width | [Length](ts-types.md#length) | No | Width of the mask area of the dialog box.
Default value: **'100%'** | +| height | [Length](ts-types.md#length) | No | Height of the mask area of the dialog box.
Default value: **'100%'** | + +> **NOTE** +> +> **x** and **y** can be set to a positive or negative percentage value. When **x** is set to **'100%'**, the mask area is moved rightward by the window width. When **x** is set to **'-100%'**, the mask area is moved leftward by the window width. When **y** is set to **'100%'**, the mask area is moved downward by the window height. When **y** is set to **'-100%'**, the mask area is moved upward by the window height. +> +> **width** and **height** can be set in percentage and can only be set to positive values. If they are set to negative values, the default values are used instead. +> +> The percentage is calculated based on the width and height of the window. + +## DialogButtonStyle10+ + +| Name | Description | +| --------- | --------------------------------- | +| DEFAULT | Blue text on white background (black background under the dark theme).| +| HIGHLIGHT | White text on blue background. | + ## Example ```ts @@ -93,6 +192,7 @@ struct AlertDialogExample { AlertDialog.show( { title: 'title', + subtitle: 'subtitle', message: 'text', autoCancel: true, alignment: DialogAlignment.Bottom, @@ -105,6 +205,9 @@ struct AlertDialogExample { } }, secondaryButton: { + enabled: true, + defaultFocus: true, + style: DialogButtonStyle.HIGHLIGHT, value: 'ok', action: () => { console.info('Callback when the second button is clicked') @@ -116,9 +219,50 @@ struct AlertDialogExample { } ) }).backgroundColor(0x317aff) + Button('three button dialog') + .onClick(() => { + AlertDialog.show( + { + title: 'title', + subtitle: 'subtitle', + message: 'text', + autoCancel: true, + alignment: DialogAlignment.Bottom, + gridCount: 4, + offset: { dx: 0, dy: -20 }, + buttonDirection: DialogButtonDirection.HORIZONTAL, + buttons: [ + { + value: 'Button', + action: () => { + console.info('Callback when button1 is clicked') + } + }, + { + value: 'Button', + action: () => { + console.info('Callback when button2 is clicked') + } + }, + { + value: 'Button', + enabled: true, + defaultFocus: true, + style: DialogButtonStyle.HIGHLIGHT, + action: () => { + console.info('Callback when button3 is clicked') + } + }, + ], + cancel: () => { + console.info('Closed callbacks') + } + } + ) + }).backgroundColor(0x317aff) }.width('100%').margin({ top: 5 }) } } ``` -![en-us_image_0000001174582844](figures/en-us_image_0000001174582844.gif) +![en-us_image_alert](figures/en-us_image_alert.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md b/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md index d1116127a919655e1ee00e8bfcc4dbe770ed75eb..b742c91d6dbcdd68e1935c89c59a216fca6b55dd 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md @@ -11,8 +11,7 @@ A custom dialog box is a dialog box you customize by using APIs of the **CustomD ## APIs -CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number, maskColor?: ResourceColor, openAnimation?: AnimateParam, closeAniamtion?: AnimateParam, showInSubWindow?: boolean}) - +CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number, maskColor?: ResourceColor, maskRect?: Rectangle, openAnimation?: AnimateParam, closeAniamtion?: AnimateParam, showInSubWindow?: boolean, backgroundColor?:ResourceColor, cornerRadius?:Dimension \| BorderRadiuses}) **Parameters** @@ -26,9 +25,12 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, aut | customStyle | boolean | No | Whether to use a custom style for the dialog box.
Default value: **false**, which means that the dialog box automatically adapts its width to the grid system and its height to the child components; the maximum height is 90% of the container height; the rounded corner is 24 vp.| | gridCount8+ | number | No | Number of [grid columns](../../ui/arkts-layout-development-grid-layout.md) occupied by the dialog box.
The default value is subject to the window size, and the maximum value is the maximum number of columns supported by the system. If this parameter is set to an invalid value, the default value is used.| | maskColor10+ | [ResourceColor](ts-types.md#resourcecolor) | No | Custom mask color.
Default value: **0x33000000** | +| maskRect10+ | [Rectangle](ts-methods-alert-dialog-box.md#rectangle10) | No | Mask area of the dialog box. Events outside the mask area are transparently transmitted, and events within the mask area are not.
Default value: **{ x: 0, y: 0, width: '100%', height: '100%' }**| | openAnimation10+ | [AnimateParam](ts-explicit-animation.md#animateparam) | No | Parameters for defining the open animation of the dialog box.
**NOTE**
**iterations**: The default value is **1**, indicating that the animation is played once; any other value evaluates to the default value.
**playMode**: The default value is **PlayMode.Normal**; any other value evaluates to the default value.| | closeAniamtion10+ | [AnimateParam](ts-explicit-animation.md#animateparam) | No | Parameters for defining the close animation of the dialog box.
**NOTE**
**iterations**: The default value is **1**, indicating that the animation is played once; any other value evaluates to the default value.
**playMode**: The default value is **PlayMode.Normal**; any other value evaluates to the default value. | | showInSubWindow10+ | boolean | No | Whether to display a dialog box in a subwindow.
Default value: **false**, indicating that the dialog box is not displayed in the subwindow
**NOTE**
A dialog box whose **showInSubWindow** attribute is **true** cannot trigger the display of another dialog box whose **showInSubWindow** attribute is also **true**.| +| backgroundColor10+ | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the dialog box. | +| cornerRadius10+ | [BorderRadiuses](ts-types.md#borderradiuses9) \| [Dimension](ts-types.md#dimension10) | No | Radius of the rounded corners of the background.
You can set separate radiuses for the four rounded corners.
Default value: **{ topLeft: '24vp', topRight: '24vp', bottomLeft: '24vp', bottomRight: '24vp' }**
**NOTE**
This attribute must be used together with the [borderRadius](ts-universal-attributes-border.md) attribute.| ## CustomDialogController @@ -89,8 +91,8 @@ struct CustomDialogExample { this.confirm() }).backgroundColor(0xffffff).fontColor(Color.Red) }.margin({ bottom: 10 }) - } - // The default value of borderRadius is 24vp. The border attribute must be used together with the borderRadius attribute. + }.borderRadius(10) + // When using the border or cornerRadius attribute, use it together with the borderRadius attribute. } } @@ -111,13 +113,15 @@ struct CustomDialogUser { alignment: DialogAlignment.Default, offset: { dx: 0, dy: -20 }, gridCount: 4, - customStyle: false + customStyle: false, + backgroundColor: 0xd9ffffff, + cornerRadius: 10, }) // Delete the dialogController instance and set it to undefined when the custom component is about to be destroyed. aboutToDisappear() { delete this.dialogController, // Delete the dialogController instance. - this.dialogController = undefined // Set dialogController to undefined. + this.dialogController = undefined //Set dialogController to undefined. } onCancel() { @@ -145,4 +149,4 @@ struct CustomDialogUser { } ``` -![en-us_image_0000001212058470](figures/en-us_image_0000001212058470.gif) +![en-us_image_custom](figures/en-us_image_custom.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md b/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md index a13af458a12ee903e11a7a6c4f2bb4079fa122c3..f6294e602662e64ff0548248c98dd3b9b9c40f3d 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md @@ -29,6 +29,9 @@ Shows a date picker dialog box. | disappearTextStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width for the top and bottom items.
Default value:
{
color: '#ff182431',
font: {
size: '14fp',
weight: FontWeight.Regular
}
} | | textStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of all items except the top, bottom, and selected items.
Default value:
{
color: '#ff182431',
font: {
size: '16fp',
weight: FontWeight.Regular
}
} | | selectedTextStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of the selected item.
Default value:
{
color: '#ff007dff',
font: {
size: '20vp',
weight: FontWeight.Medium
}
} | +| alignment10+ | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.
Default value: **DialogAlignment.Default**| +| offset10+ | [Offset](ts-types.md#offset) | No | Offset of the dialog box based on the **alignment** settings.
Default value: **{ dx: 0 , dy: 0 }**| +| maskRect10+| [Rectangle](ts-methods-alert-dialog-box.md#rectangle10) | No | Mask area of the dialog box. Events outside the mask area are transparently transmitted, and events within the mask area are not.
Default value: **{ x: 0, y: 0, width: '100%', height: '100%' }**| | onAccept(deprecated) | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.
**NOTE**
This API is supported since API version 8 and deprecated since API version 10. You are advised to use **onDateAccept** instead.| | onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.| | onChange(deprecated) | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| Callback invoked when the selected item in the picker changes.
**NOTE**
This API is supported since API version 8 and deprecated since API version 10. You are advised to use **onDateChange** instead.| diff --git a/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md b/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md index d7f72416274ed1afe326857b10edbf6acd6cdb9f..74330f6fdc1cd824c2872a7a9d4414e255507398 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md @@ -28,6 +28,9 @@ Shows a text picker in the given settings. | textStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of all items except the top, bottom, and selected items.
Default value:
{
color: '#ff182431',
font: {
size: '16fp',
weight: FontWeight.Regular
}
} | | selectedTextStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of the selected item.
Default value:
{
color: '#ff007dff',
font: {
size: '20vp',
weight: FontWeight.Medium
}
} | | canLoop10+ | boolean | No| Whether to support scroll looping. The value **true** means to support scroll looping, and **false** means the opposite.
Default value: **true**| +| alignment10+ | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.
Default value: **DialogAlignment.Default**| +| offset10+ | [Offset](ts-types.md#offset) | No | Offset of the dialog box based on the **alignment** settings.
Default value: **{ dx: 0 , dy: 0 }**| +| maskRect10+| [Rectangle](ts-methods-alert-dialog-box.md#rectangle10) | No | Mask area of the dialog box. Events outside the mask area are transparently transmitted, and events within the mask area are not.
Default value: **{ x: 0, y: 0, width: '100%', height: '100%' }**| | onAccept | (value: [TextPickerResult](#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](#textpickerresult)) => void | No| Callback invoked when the selected item changes.| diff --git a/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md b/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md index 77fa5b3113ea4d9885d7771460488b2294e75459..9ea19b5b40ebf7b1de9158fda5602610d6ce1ad1 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md @@ -26,6 +26,9 @@ Shows a time picker dialog box. | disappearTextStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width for the top and bottom items.
Default value:
{
color: '#ff182431',
font: {
size: '14fp',
weight: FontWeight.Regular
}
} | | textStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of all items except the top, bottom, and selected items.
Default value:
{
color: '#ff182431',
font: {
size: '16fp',
weight: FontWeight.Regular
}
} | | selectedTextStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of the selected item.
Default value:
{
color: '#ff007dff',
font: {
size: '20vp',
weight: FontWeight.Medium
}
} | +| alignment10+ | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.
Default value: **DialogAlignment.Default**| +| offset10+ | [Offset](ts-types.md#offset) | No | Offset of the dialog box based on the **alignment** settings.
Default value: **{ dx: 0 , dy: 0 }**| +| maskRect10+| [Rectangle](ts-methods-alert-dialog-box.md#rectangle10) | No | Mask area of the dialog box. Events outside the mask area are transparently transmitted, and events within the mask area are not.
Default value: **{ x: 0, y: 0, width: '100%', height: '100%' }**| | 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 time changes.| diff --git a/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md b/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md index e43e8f0007c77fc55206ff51a2cc0ecaa7749549..54516f0218ba029ed7a66137b80d280efde672e3 100644 --- a/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md +++ b/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md @@ -1,17 +1,18 @@ # Page Transition -You can customize the page entrance and exit animations in the **pageTransition** API for transition between pages. +You can customize the page entrance and exit animations in the **pageTransition** API for transition between pages. For details, see [Page Transition Animation](../../ui/arkts-page-transition-animation.md). > **NOTE** > > This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > +> To achieve a better transition effect, you are advised to use the [\](../../ui/arkts-navigation-navigation.md) component and [modal transition](../../ui/arkts-modal-transition.md). | Name | Parameter | Mandatory| Description | | ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | -| PageTransitionEnter | {
type?: RouteType,
duration?: number,
curve?: [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../apis/js-apis-curve.md#icurve)10+,
delay?: number
} | No | Page entrance animation.
- **type**: route type for the page transition effect to take effect.
Default value: **RouteType.None**
- **duration**: animation duration.
Unit: ms
Default value: **1000**
- **curve**: animation curve. The value of the string type can be any of the following: "ease", "ease-in", "ease-out", "ease-in-out", "extreme-deceleration", "fast-out-linear-in", "fast-out-slow-in", "friction", "linear", "linear-out-slow-in", "rhythm", "sharp", "smooth".
Default value: **Curve.Linear**
- **delay**: animation delay.
Unit: ms
Default value: **0**
**NOTE**
If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.| -| PageTransitionExit | {
type?: RouteType,
duration?: number,
curve?: [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../apis/js-apis-curve.md#icurve)10+,
delay?: number
} | No | Page exit animation.
- **type**: route type for the page transition effect to take effect.
Default value: **RouteType.None**
- **duration**: animation duration.
Unit: ms
Default value: **1000**
- **curve**: animation curve. The value range of the string type is the same as that of **PageTransitionEnter**.
Default value: **Curve.Linear**
- **delay**: animation delay.
Unit: ms
Default value: **0**
**NOTE**
If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.| +| PageTransitionEnter | {
type?: [RouteType](#routetype),
duration?: number,
curve?: [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../apis/js-apis-curve.md#icurve)10+,
delay?: number
} | No | Page entrance animation.
- **type**: route type for the page transition effect to take effect.
Default value: **RouteType.None**
- **duration**: animation duration.
Unit: ms
Default value: **1000**
- **curve**: animation curve. The value of the string type can be any of the following: "ease", "ease-in", "ease-out", "ease-in-out", "extreme-deceleration", "fast-out-linear-in", "fast-out-slow-in", "friction", "linear", "linear-out-slow-in", "rhythm", "sharp", "smooth".
Default value: **Curve.Linear**
- **delay**: animation delay.
Unit: ms
Default value: **0**
**NOTE**
If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.| +| PageTransitionExit | {
type?: [RouteType](#routetype),
duration?: number,
curve?: [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../apis/js-apis-curve.md#icurve)10+,
delay?: number
} | No | Page exit animation.
- **type**: route type for the page transition effect to take effect.
Default value: **RouteType.None**
- **duration**: animation duration.
Unit: ms
Default value: **1000**
- **curve**: animation curve. The value range of the string type is the same as that of **PageTransitionEnter**.
Default value: **Curve.Linear**
- **delay**: animation delay.
Unit: ms
Default value: **0**
**NOTE**
If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.| ## RouteType diff --git a/en/application-dev/reference/arkui-ts/ts-types.md b/en/application-dev/reference/arkui-ts/ts-types.md index 00799c76b97e399281f1593d182fea925bee3c23..436456b5e4c60d9808fe4b16e5dffba036bccdda 100644 --- a/en/application-dev/reference/arkui-ts/ts-types.md +++ b/en/application-dev/reference/arkui-ts/ts-types.md @@ -158,7 +158,7 @@ The **Font** type is used to set the text style. | ------ | ---------------------------------------- | ---- | ---------------------------------------- | | size | [Length](#length) | No | Font size. If the value is of the number type, the unit fp is used. The value cannot be a percentage.
Default value: **16.0** | | weight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | No | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. A larger value indicates a thicker font.
Default value: **400** \| **FontWeight.Normal** | -| family | string \| [Resource](#resource) | No | Font family of the text. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, HarmonyOS Sans'**. Currently, only the **'HarmonyOS Sans'** font is supported.| +| family | string \| [Resource](#resource) | No | Font family of the text. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, HarmonyOS Sans'**. The HarmonyOS Sans font and [register custom fonts](../apis/js-apis-font.md) are supported.| | style | [FontStyle](ts-appendix-enums.md#fontstyle) | No | Font style.
Default value: **FontStyle.Normal** | ## Area8+ diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md index 0814773979c1fb7964b4f032a57addd1de6614eb..6191f29c57ebef1ac6280035fd5894aca2fac4d9 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md @@ -16,14 +16,14 @@ You can draw an image around a component. This API is supported in ArkTS widgets. -| Name | Type | Description | -| ------ | ---------------------------------------- | ---------------------------------------- | +| Name | Type | Description | +| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | source | string \| [Resource](ts-types.md#resource) \| [linearGradient](ts-universal-attributes-gradient-color.md) | Source or gradient color of the border image.
**NOTE**
The border image source applies only to container components, such as **\**, **\**, and **\**.| -| slice | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | Slice width of the border image.
Default value: **0** | -| width | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | Width of the border image.
Default value: **0** | -| outset | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | Amount by which the border image is extended beyond the border box.
Default value: **0** | -| repeat | [RepeatMode](#repeatmode) | Repeat mode of the border image.
Default value: **RepeatMode.Stretch** | -| fill | boolean | Whether to fill the center of the border image.
Default value: **false** | +| slice | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | Slice width of the upper left corner, upper right corner, lower left corner, and lower right corner of the border image.
Default value: **0**
**NOTE**
If this parameter is set to a negative value, the default value is used.
When this parameter is set to a value of the [Length](ts-types.md#length) type, the value applies to the four corners in a unified manner.
When this parameter is set to a value of the [EdgeWidths](ts-types.md#edgewidths9) type:
- **Top**: slice height of the upper left or upper right corner of the image.
- **Bottom**: slice height of the lower left or lower right corner of the image.
- **Left**: slice width of the upper left or lower left corner of the image.
- **Right**: slice width of the upper right or lower right corner of the image.| +| width | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | Width of the border image.
Default value: **0**
**NOTE**
If this parameter is set to a negative value, the default value is used.
When this parameter is set to a value of the [Length](ts-types.md#length) type, the value applies to the four corners in a unified manner.
When this parameter is set to a value of the [EdgeWidths](ts-types.md#edgewidths9) type:
- **Top**: width of the top edge of the border image.
- **Bottom**: width of the bottom edge of the border image.
- **Left**: width of the left edge of the border image.
- **Right**: width of the right edge of the border image.
If this parameter is set to a negative value, the value **1** is used.| +| outset | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | Amount by which the border image is extended beyond the border box.
Default value: **0**
**NOTE**
If this parameter is set to a negative value, the default value is used.
When this parameter is set to a value of the [Length](ts-types.md#length) type, the value applies to the four corners in a unified manner.
When this parameter is set to a value of the [EdgeWidths](ts-types.md#edgewidths9) type:
- **Top**: amount by which the top edge of the border image is extended beyond the border box.
- **Bottom**: amount by which the bottom edge of the border image is extended beyond the border box.
- **Left**: amount by which the left edge of the border image is extended beyond the border box.
- **Right**: amount by which the right edge of the border image is extended beyond the border box.| +| repeat | [RepeatMode](#repeatmode) | Repeat mode of the source image's slices on the border.
Default value: **RepeatMode.Stretch**| +| fill | boolean | Whether to fill the center of the border image.
Default value: **false** | ## RepeatMode @@ -32,9 +32,9 @@ This API is supported in ArkTS widgets. | Name | Description | | ------- | ----------------------------------- | | Repeat | The source image's slices are tiled. Tiles beyond the border box will be clipped. | -| Stretch | The source image's slices stretched to fill the border box. | +| Stretch | The source image's slices are stretched to fill the border box. | | Round | The source image's slices are tiled to fill the border box. Tiles may be compressed when needed.| -| Space | The source image's slices are tiled to fill the border box. Extra space will be filled in between tiles. | +| Space | The source image's slices are tiled to fill the border box. Extra space will be distributed in between tiles. | ## Example @@ -77,35 +77,88 @@ struct Index { // xxx.ets @Entry @Component -struct Index { - @State outSetValue: number = 40 +struct BorderImage { + @State WidthValue: number = 0 + @State SliceValue: number = 0 + @State OutSetValue: number = 0 + @State RepeatValue: RepeatMode[] = [RepeatMode.Repeat, RepeatMode.Stretch, RepeatMode.Round, RepeatMode.Space] + @State SelectIndex: number = 0 + @State SelectText: string = 'Repeat' + @State FillValue: boolean = false build() { Row() { - Column() { + Column({ space: 20 }) { Row() { Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50) } .borderImage({ source: $r('app.media.icon'), - slice: `${this.outSetValue}%`, - width: `${this.outSetValue}px`, - outset: '5px', - repeat: RepeatMode.Repeat, - fill: false + slice: this.SliceValue, + width: this.WidthValue, + outset: this.OutSetValue, + repeat: this.RepeatValue[this.SelectIndex], + fill: this.FillValue }) - Slider({ - value: this.outSetValue, - min: 0, - max: 100, - style: SliderStyle.OutSet - }) - .margin({ top: 30 }) - .onChange((value: number, mode: SliderChangeMode) => { - this.outSetValue = value - console.info('value:' + value + 'mode:' + mode.toString()) + Column() { + Text(`borderImageSlice = ${this.SliceValue}px`) + Slider({ + value: this.SliceValue, + min: 0, + max: 100, + style: SliderStyle.OutSet + }) + .onChange((value: number, mode: SliderChangeMode) => { + this.SliceValue = value + }) + } + + Column() { + Text(`borderImageWidth = ${this.WidthValue}px`) + Slider({ + value: this.WidthValue, + min: 0, + max: 100, + style: SliderStyle.OutSet + }) + .onChange((value: number, mode: SliderChangeMode) => { + this.WidthValue = value + }) + } + + Column() { + Text(`borderImageOutSet = ${this.OutSetValue}px`) + Slider({ + value: this.OutSetValue, + min: 0, + max: 100, + style: SliderStyle.OutSet }) + .onChange((value: number, mode: SliderChangeMode) => { + this.OutSetValue = value + }) + } + + Row() { + Text('borderImageRepeat: ') + Select([{ value: 'Repeat' }, { value: 'Stretch' }, { value: 'Round' }, { value: 'Space' }]) + .value(this.SelectText) + .selected(this.SelectIndex) + .onSelect((index: number, text: string) => { + this.SelectIndex = index + this.SelectText = text + }) + } + + Row() { + Text(`borderImageFill: ${this.FillValue} `) + Toggle({ type: ToggleType.Switch, isOn: this.FillValue }) + .onChange((isOn: boolean) => { + this.FillValue = isOn + }) + } + } .width('100%') } @@ -114,4 +167,4 @@ struct Index { } ``` -![zh-cn_image_borderImage](figures/borderImage.gif) +![borderImage](figures/borderImage.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md index 3344dfa1bbd18b706c1a2318e907063555800c7e..160a2b9608ba5ca045f3e946efbbeccc2e3a8f1f 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md @@ -17,8 +17,8 @@ Universal text attributes include text style attributes applicable to text conta | fontSize | [Length](ts-types.md#length) | Font size. If the value is of the number type, the unit fp is used. The default font size is 16. This attribute cannot be set in percentage.
Since API version 9, this API is supported in ArkTS widgets.| | fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | Font style.
Default value: **FontStyle.Normal**
Since API version 9, this API is supported in ArkTS widgets.| | fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight. The string type supports only the string of the number type, for example, **400**, **"bold"**, **"bolder"**, **"lighter"**, **"regular"**, and **"medium"**, which correspond to the enumerated values in **FontWeight**.
Default value: **FontWeight.Normal**
Since API version 9, this API is supported in ArkTS widgets.| -| fontFamily | string \| [Resource](ts-types.md#resource) | Font family.
Default value: **'HarmonyOS Sans'**. Currently, only the default font is supported.
Since API version 9, this API is supported in ArkTS widgets.| -| lineHeight | string \| number \| [Resource](ts-types.md#resource) | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.
Since API version 9, this API is supported in ArkTS widgets.| +| fontFamily | string \| [Resource](ts-types.md#resource) | Font family.
The HarmonyOS Sans font and [register custom fonts](../apis/js-apis-font.md) are supported.
Since API version 9, this API is supported in ArkTS widgets.| +| lineHeight | string \| number \| [Resource](ts-types.md#resource) | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value is of the number type, the unit fp is used.
Since API version 9, this API is supported in ArkTS widgets.| | decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor)
} | Style and color of the text decorative line.
Default value: {
type: TextDecorationType.None,
color: Color.Black
}
Since API version 9, this API is supported in ArkTS widgets.| diff --git a/en/application-dev/ui/arkts-layout-development-flex-layout.md b/en/application-dev/ui/arkts-layout-development-flex-layout.md index 8edf0f371708c81e4497025b14ae4cede434d010..a3bd3ba2950485e907252c521c6dadfd5ec7f6ce 100644 --- a/en/application-dev/ui/arkts-layout-development-flex-layout.md +++ b/en/application-dev/ui/arkts-layout-development-flex-layout.md @@ -532,7 +532,7 @@ When the size of the container in the flex layout is not large enough, the follo Text('flexBasis(100)') .flexBasis(100) - .width(200) // When width is set to 200 and flexBasis 100, the width is 100 vp, which means that the settings of flexBasis take precedence. + .width(200) // When both width and flexBasis are set, flexBasis take precedence, and the width is 100 vp. .height(100) .backgroundColor(0xD2B48C) }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) @@ -546,7 +546,7 @@ When the size of the container in the flex layout is not large enough, the follo ```ts Flex() { Text('flexGrow(1)') - .flexGrow(2) + .flexGrow(1) .width(100) .height(100) .backgroundColor(0xF5DEB3) diff --git a/en/application-dev/ui/arkts-page-transition-animation.md b/en/application-dev/ui/arkts-page-transition-animation.md new file mode 100644 index 0000000000000000000000000000000000000000..77bd78eb57775a1eaa2c109f310595b57d5ed94d --- /dev/null +++ b/en/application-dev/ui/arkts-page-transition-animation.md @@ -0,0 +1,363 @@ +# Page Transition Animation (Not Recommended) + +To achieve a better transition effect, you are advised to use the [\](arkts-navigation-navigation.md) component and [modal transition](arkts-modal-transition.md). + + +During page redirection, one page disappears and the other page appears. You can customize the [page transition effects](../reference/arkui-ts/ts-page-transition-animation.md) for these pages through the **pageTransition** API. Specifically, **PageTransitionEnter** defines the page entrance animation, while **PageTransitionExit** defines the page exit animation. + + +API of **PageTransitionEnter**: + + + +```ts +PageTransitionEnter({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number}) +``` + + +API of **PageTransitionExit**: + + + +```ts +PageTransitionExit({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number}) +``` + + +Both **PageTransitionEnter** and **PageTransitionExit** contain the **slide**, **translate**, **scale**, and **opacity** attributes. For **PageTransitionEnter**, these attributes indicate the start values for page entrance. For **PageTransitionExit**, these attributes indicate the end values for page exit. In this sense, configuration of page transition is similar to that of component transition. **PageTransitionEnter** provides the **onEnter** callback, and **PageTransitionExit** provides the **onExit** callback. + + +In the preceding APIs, the **type** parameter indicates the route type used in page navigation. Each page transition involves exit of one page and entrance of the other. If you switch from page A to page B through the **router.pushUrl** operation, page A exits, with the exit animation applied; and page B enters, with the entrance animation applied. If you switch from page B back to page A through the **router.back** operation, page B exits, , with the exit animation applied; and page A enters, with the entrance animation applied. That is, **PageTransitionEnter** of a page may be an entrance animation of a new page (pushed to the stack) or of an existing page (popped from the stack). To distinguish these two types of entrance animations, the **type** parameter is provided. + + +## Setting type to RouteType.None + +When **type** is set to **RouteType.None** (default value), the page transition animations work for both the push and pop operations in the page stack. + + +```ts +// page A +pageTransition() { + // Configure the page entrance animation to sliding in from the left, with the duration of 1200 ms. The settings take effect no matter whether the push or pop operation is performed on the page stack. + PageTransitionEnter({ type: RouteType.None, duration: 1200 }) + .slide(SlideEffect.Left) + // Configure the page exit animation to sliding out from the left, with the duration of 1000 ms. The settings take effect no matter whether the push or pop operation is performed on the page stack. + PageTransitionExit({ type: RouteType.None, duration: 1000 }) + .slide(SlideEffect.Left) +} +``` + + + +```ts +// page B +pageTransition() { + // Configure the page entrance animation to sliding in from the right, with the duration of 1000 ms. The settings take effect no matter whether the push or pop operation is performed on the page stack. + PageTransitionEnter({ type: RouteType.None, duration: 1000 }) + .slide(SlideEffect.Right) + // Configure the page exit animation to sliding out from the right, with the duration of 1200 ms. The settings take effect no matter whether the push or pop operation is performed on the page stack. + PageTransitionExit({ type: RouteType.None, duration: 1200 }) + .slide(SlideEffect.Right) +} +``` + + +Assume that the page stack is in the multi-instance mode, that is, duplicate pages are allowed in the page stack. There may be four scenarios. The following table lists the page transition effects. + + +| Route Operation | Page A Transition Effect | Page B Transition Effect | +| ---------------------------- | ---------------------------------- | ---------------------------------- | +| **router.pushUrl** – redirection from page A to new page B.| The page exits. The animation defined by **PageTransitionExit** is applied. In the example, the page slides out from the left of the screen. | The page enters. The animation defined by **PageTransitionEnter** is applied. In the example, the page slides in from the right of the screen.| +| **router.back** – redirection from page B back to page A. | The page enters. The animation defined by **PageTransitionEnter** is applied. In the example, the page slides in from the left of the screen.| The page exits. The animation defined by **PageTransitionExit** is applied. In the example, the page slides out from the right of the screen. | +| **router.pushUrl** – redirection from page B to new page A.| The page enters. The animation defined by **PageTransitionEnter** is applied. In the example, the page slides in from the left of the screen.| The page exits. The animation defined by **PageTransitionExit** is applied. In the example, the page slides out from the right of the screen. | +| **router.back** – redirection from page A back to page B. | The page exits. The animation defined by **PageTransitionExit** is applied. In the example, the page slides out from the left of the screen. | The page enters. The animation defined by **PageTransitionEnter** is applied. In the example, the page slides in from the right of the screen.| + + +If you want the page accessed by **router.pushUrl** to always slide in from the right and the page exited by **router.back** to always slide out from the right, the third and fourth cases in the preceding table do not meet the requirements. In this case, you need to define four page transition effects. + + +## Setting type to RouteType.Push or RouteType.Pop + +When **type** is set to **RouteType.Push**, the page transition animations work for only both the push operations in the page stack. When **type** is set to **RouteType.Pop**, the page transition animations work for only both the pop operations in the page stack. + + +```ts +// page A +pageTransition() { + // Configure the page entrance animation to sliding in from the right, with the duration of 1200 ms. The settings take effect only when the push operation is performed on the page stack. + PageTransitionEnter({ type: RouteType.Push, duration: 1200 }) + .slide(SlideEffect.Right) + // Configure the page entrance animation to sliding in from the left, with the duration of 1200 ms. The settings take effect only when the pop operation is performed on the page stack. + PageTransitionEnter({ type: RouteType.Pop, duration: 1200 }) + .slide(SlideEffect.Left) + // Configure the page exit animation to sliding out from the left, with the duration of 1000 ms. The settings take effect only when the push operation is performed on the page stack. + PageTransitionExit({ type: RouteType.Push, duration: 1000 }) + .slide(SlideEffect.Left) + // Configure the page exit animation to sliding out from the right, with the duration of 1000 ms. The settings take effect only when the pop operation is performed on the page stack. + PageTransitionExit({ type: RouteType.Pop, duration: 1000 }) + .slide(SlideEffect.Right) +} +``` + + + +```ts +// page B +pageTransition() { + // Configure the page entrance animation to sliding in from the right, with the duration of 1000 ms. The settings take effect only when the push operation is performed on the page stack. + PageTransitionEnter({ type: RouteType.Push, duration: 1000 }) + .slide(SlideEffect.Right) + // Configure the page entrance animation to sliding in from the left, with the duration of 1000 ms. The settings take effect only when the pop operation is performed on the page stack. + PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }) + .slide(SlideEffect.Left) + // Configure the page exit animation to sliding out from the left, with the duration of 1200 ms. The settings take effect only when the push operation is performed on the page stack. + PageTransitionExit({ type: RouteType.Push, duration: 1200 }) + .slide(SlideEffect.Left) + // Configure the page exit animation to sliding out from the right, with the duration of 1200 ms. The settings take effect only when the pop operation is performed on the page stack. + PageTransitionExit({ type: RouteType.Pop, duration: 1200 }) + .slide(SlideEffect.Right) +} +``` + + +The preceding code defines page transition effects for all possibles scenarios. Assume that the page stack is in the multi-instance mode, that is, duplicate pages are allowed in the page stack. There may be four scenarios. The following table lists the page transition effects. + + +| Route Operation | Page A Transition Effect | Page B Transition Effect | +| ---------------------------- | ---------------------------------------- | ---------------------------------------- | +| **router.pushUrl** – redirection from page A to new page B| The page exits. The transition style of **PageTransitionExit** whose **type** is **RouteType.Push** takes effect. The page slides out from the left of the screen.| The page enters. The transition style of **PageTransitionEnter** whose **type** is **RouteType.Push** takes effect. The page slides in from the right of the screen.| +| **router.back** – redirection from page B back to page A | The page enters. The transition style of **PageTransitionEnter** whose **type** is **RouteType.Pop** takes effect. The page slides in from the left of the screen.| The page exits. The transition style of **PageTransitionExit** whose **type** is **RouteType.Pop** takes effect. The page slides out from the right of the screen.| +| **router.pushUrl** – redirection from page B to new page A| The page enters. The transition style of **PageTransitionEnter** whose **type** is **RouteType.Push** takes effect. The page slides in from the right of the screen.| The page exits. The transition style of **PageTransitionExit** whose **type** is **RouteType.Push** takes effect. The page slides out from the left of the screen.| +| **router.back** – redirection from page A back to page B | The page exits. The transition style of **PageTransitionExit** whose **type** is **RouteType.Pop** takes effect. The page slides out from the right of the screen.| The page enters. The transition style of **PageTransitionEnter** whose **type** is **RouteType.Pop** takes effect. The page slides in from the left of the screen.| + + +>**NOTE** +> +> 1. The transition style of each page can be independently configured. However, as each transition involves two pages, take into account the smoothness between page transitions, for example, the transition duration. +> +> 2. If no page transition style is defined, a page uses the default page transition style. + + +## Disabling Page Transition + + +```ts +pageTransition() { + PageTransitionEnter({ type: RouteType.None, duration: 0 }) + PageTransitionExit({ type: RouteType.None, duration: 0 }) +} +``` + + +You can disable the transition animation of a page by setting the page transition duration to 0. + + +## Example + +In the following example, page transition animations are defined for all four page transition scenarios. + + + +```ts +// PageTransitionSrc1 +import router from '@ohos.router'; +@Entry +@Component +struct PageTransitionSrc1 { + build() { + Column() { + Image($r('app.media.mountain')) + .width('90%') + .height('80%') + .objectFit(ImageFit.Fill) + .syncLoad(true) // Load the image synchronously so that the image has been loaded when the page is displayed. + .margin(30) + + Row({ space: 10 }) { + Button("pushUrl") + .onClick(() => { + // Navigate to the next page, which is a push operation. + router.pushUrl({ url: 'pages/myTest/pageTransitionDst1' }); + }) + Button("back") + .onClick(() => { + // Return to the previous page, which is equivalent to the pop operation. + router.back(); + }) + }.justifyContent(FlexAlign.Center) + } + .width("100%").height("100%") + .alignItems(HorizontalAlign.Center) + } + + pageTransition() { + // Configure the page entrance animation to sliding in from the right, with the duration of 1000 ms. The settings take effect only when the push operation is performed on the page stack. + PageTransitionEnter({ type: RouteType.Push, duration: 1000 }) + .slide(SlideEffect.Right) + // Configure the page entrance animation to sliding in from the left, with the duration of 1000 ms. The settings take effect only when the pop operation is performed on the page stack. + PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }) + .slide(SlideEffect.Left) + // Configure the page exit animation to sliding out from the left, with the duration of 1000 ms. The settings take effect only when the push operation is performed on the page stack. + PageTransitionExit({ type: RouteType.Push, duration: 1000 }) + .slide(SlideEffect.Left) + // Configure the page exit animation to sliding out from the right, with the duration of 1000 ms. The settings take effect only when the pop operation is performed on the page stack. + PageTransitionExit({ type: RouteType.Pop, duration: 1000 }) + .slide(SlideEffect.Right) + } +} +``` + + + + +```ts +// PageTransitionDst1 +import router from '@ohos.router'; +@Entry +@Component +struct PageTransitionDst1 { + build() { + Column() { + Image($r('app.media.forest')) + .width('90%') + .height('80%') + .objectFit(ImageFit.Fill) + .syncLoad(true) // Load the image synchronously so that the image has been loaded when the page is displayed. + .margin(30) + + Row({ space: 10 }) { + Button("pushUrl") + .onClick(() => { + // Navigate to the next page, which is a push operation. + router.pushUrl({ url: 'pages/myTest/pageTransitionSrc1' }); + }) + Button("back") + .onClick(() => { + // Return to the previous page, which is equivalent to the pop operation. + router.back(); + }) + }.justifyContent(FlexAlign.Center) + } + .width("100%").height("100%") + .alignItems(HorizontalAlign.Center) + } + + pageTransition() { + // Configure the page entrance animation to sliding in from the right, with the duration of 1000 ms. The settings take effect only when the push operation is performed on the page stack. + PageTransitionEnter({ type: RouteType.Push, duration: 1000 }) + .slide(SlideEffect.Right) + // Configure the page entrance animation to sliding in from the left, with the duration of 1000 ms. The settings take effect only when the pop operation is performed on the page stack. + PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }) + .slide(SlideEffect.Left) + // Configure the page exit animation to sliding out from the left, with the duration of 1000 ms. The settings take effect only when the push operation is performed on the page stack. + PageTransitionExit({ type: RouteType.Push, duration: 1000 }) + .slide(SlideEffect.Left) + // Configure the page exit animation to sliding out from the right, with the duration of 1000 ms. The settings take effect only when the pop operation is performed on the page stack. + PageTransitionExit({ type: RouteType.Pop, duration: 1000 }) + .slide(SlideEffect.Right) + } +} +``` + + + +![pageTransition_PushPop](figures/pageTransition_PushPop.gif) + + +In the following example, **type** is set to **RouteType.None**. + + + +```ts +// PageTransitionSrc2 +import router from '@ohos.router'; +@Entry +@Component +struct PageTransitionSrc2 { + build() { + Column() { + Image($r('app.media.mountain')) + .width('90%') + .height('80%') + .objectFit(ImageFit.Fill) + .syncLoad(true) // Load the image synchronously so that the image has been loaded when the page is displayed. + .margin(30) + + Row({ space: 10 }) { + Button("pushUrl") + .onClick(() => { + // Navigate to the next page, which is a push operation. + router.pushUrl({ url: 'pages/myTest/pageTransitionDst2' }); + }) + Button("back") + .onClick(() => { + // Return to the previous page, which is equivalent to the pop operation. + router.back(); + }) + }.justifyContent(FlexAlign.Center) + } + .width("100%").height("100%") + .alignItems(HorizontalAlign.Center) + } + + pageTransition() { + // Configure the page entrance animation to sliding in from the left, with the duration of 1000 ms. The settings take effect no matter whether the push or pop operation is performed on the page stack. + PageTransitionEnter({ duration: 1000 }) + .slide(SlideEffect.Left) + // Configure the page exit animation to translating by 100 vp along the x- and y-axes and changing the opacity to 0, with the duration of 1200 ms. The settings take effect no matter whether the push or pop operation is performed on the page stack. + PageTransitionExit({ duration: 1200 }) + .translate({ x: 100.0, y: 100.0 }) + .opacity(0) + } +} +``` + + + +```ts +// PageTransitionDst2 +import router from '@ohos.router'; +@Entry +@Component +struct PageTransitionDst2 { + build() { + Column() { + Image($r('app.media.forest')) + .width('90%') + .height('80%') + .objectFit(ImageFit.Fill) + .syncLoad(true) // Load the image synchronously so that the image has been loaded when the page is displayed. + .margin(30) + + Row({ space: 10 }) { + Button("pushUrl") + .onClick(() => { + // Navigate to the next page, which is a push operation. + router.pushUrl({ url: 'pages/myTest/pageTransitionSrc2' }); + }) + Button("back") + .onClick(() => { + // Return to the previous page, which is equivalent to the pop operation. + router.back(); + }) + }.justifyContent(FlexAlign.Center) + } + .width("100%").height("100%") + .alignItems(HorizontalAlign.Center) + } + + pageTransition() { + // Configure the page entrance animation to sliding in from the left, with the duration of 1200 ms. The settings take effect no matter whether the push or pop operation is performed on the page stack. + PageTransitionEnter({ duration: 1200 }) + .slide(SlideEffect.Left) + // Configure the page exit animation to translating by 100 vp along the x- and y-axes and changing the opacity to 0, with the duration of 1000 ms. The settings take effect no matter whether the push or pop operation is performed on the page stack. + PageTransitionExit({ duration: 1000 }) + .translate({ x: 100.0, y: 100.0 }) + .opacity(0) + } +} +``` + + + +![pageTransition_None](figures/pageTransition_None.gif)