diff --git a/en/application-dev/quick-start/figures/image-20220326065124911.png b/en/application-dev/quick-start/figures/image-20220326065124911.png index a028e5447476a9d03bcd58285af6fb6dd4aa7d1d..872f36c3bf328dcb4ff58ac6f9106d5c4726dc56 100644 Binary files a/en/application-dev/quick-start/figures/image-20220326065124911.png and b/en/application-dev/quick-start/figures/image-20220326065124911.png differ diff --git a/en/application-dev/quick-start/start-overview.md b/en/application-dev/quick-start/start-overview.md index 9247564043b0f412361075d79f2082fd3e0f61b4..3abd925eb795d9efc2b9ea941d290d089cfd8a3a 100644 --- a/en/application-dev/quick-start/start-overview.md +++ b/en/application-dev/quick-start/start-overview.md @@ -18,10 +18,10 @@ OpenHarmony provides a UI development framework, known as ArkUI. ArkUI provides ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice. -| **Development Paradigm** | **Language** | **UI Update Mode** | **Applicable To** | **Intended Audience** | +| **Development Paradigm** | **Language** | **UI Update Mode** | **Applicable To** | **Intended Audience** | | -------- | -------- | -------- | -------- | -------- | -| Web-like development paradigm | JavaScript | Data-driven | Applications and service widgets with simple UIs | Frontend web developers | -| Declarative development paradigm | Extended TypeScript (eTS) | Data-driven | Applications involving technological sophistication and teamwork | Mobile application and system application developers | +| Web-like development paradigm | JavaScript | Data-driven | Applications and service widgets with simple UIs | Frontend web developers | +| Declarative development paradigm | Extended TypeScript (eTS) | Data-driven | Applications involving technological sophistication and teamwork | Mobile application and system application developers | For DevEco Studio V2.2 Beta1 and later versions, both the traditional coding mode and the low-code mode are supported when the JS language is used for development. diff --git a/en/application-dev/quick-start/start-with-ets-low-code.md b/en/application-dev/quick-start/start-with-ets-low-code.md index 0792cfa38820a7f6dfe94e6df5358e2759219d53..e8816765cb28c54e8924a5307ca2ea6f586d2d4a 100644 --- a/en/application-dev/quick-start/start-with-ets-low-code.md +++ b/en/application-dev/quick-start/start-with-ets-low-code.md @@ -1,6 +1,6 @@ # Getting Started with eTS in the Low-Code Approach -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
This feature is supported in DevEco Studio V3.0 Beta3 and later versions. +> **NOTE**
This feature is supported in DevEco Studio V3.0 Beta3 and later versions. > > The component lineup that supports low-code development in eTS is now at its preliminary stage and will be expanding in coming versions. > diff --git a/en/application-dev/quick-start/start-with-ets.md b/en/application-dev/quick-start/start-with-ets.md index 293956a064b8278f6dffed5b22fb9340726bc7de..8efb98d35d28465457ec92460ea408d49ba6c802 100644 --- a/en/application-dev/quick-start/start-with-ets.md +++ b/en/application-dev/quick-start/start-with-ets.md @@ -1,6 +1,6 @@ # Getting Started with eTS in the Traditional Coding Approach -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
To use eTS, your DevEco Studio must be V3.0.0.601 Beta1 or later. +> **NOTE**
To use eTS, your DevEco Studio must be V3.0.0.601 Beta1 or later. > > For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development. @@ -20,17 +20,18 @@ ## eTS Project Files -- **entry** : OpenHarmony project module, which can be built into an ability package ([HAP](../../glossary.md#hap)). - - **src > main > ets** : a collection of eTS source code. - - **src > main > ets > MainAbility** : entry to your application/service. - - **src > main > ets > MainAbility > pages** : pages contained in **MainAbility**. - - **src > main > ets > MainAbility > app.ets** : ability lifecycle file. - - **src > main > resources** : a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. - - **src > main > config.json** : module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. - - **build-profile.json5** : current module information and build configuration options, including **buildOption target**. - - **hvigorfile.js** : module-level compilation and build task script. You can customize related tasks and code implementation. -- **build-profile.json5** : application-level configuration information, including the signature and product configuration. -- **hvigorfile.js** : application-level compilation and build task script. +- **entry**: OpenHarmony project module, which can be built into an ability package ([HAP](../../glossary.md#hap)). + - **src > main > ets**: a collection of eTS source code. + - **src > main > ets > MainAbility**: entry to your application/service. + - **src > main > ets > MainAbility > pages**: pages contained in **MainAbility**. + - **src > main > ets > MainAbility > pages > index.ets**: the first page in the pages list, that is, the home page of your application. + - **src > main > ets > MainAbility > app.ets**: ability lifecycle file. + - **src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. + - **src > main > config.json**: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. + - **build-profile.json5**: current module information and build configuration options, including **buildOption target**. + - **hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation. +- **build-profile.json5**: application-level configuration information, including the signature and product configuration. +- **hvigorfile.js**: application-level compilation and build task script. ## Building the First Page @@ -63,7 +64,7 @@ 2. Add a **<Button>** component. - On the default page, add a **<Button>** component to accept user clicks and implement redirection to another page. The sample code in the **index.ets** file is shown below: + On the default page, add a **<Button>** component to respond to user clicks and implement redirection to another page. The sample code in the **index.ets** file is shown below: ```ts @@ -79,7 +80,7 @@ Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) - // Add a button to accept user clicks. + // Add a button to respond to user clicks. Button() { Text('Next') .fontSize(30) @@ -178,7 +179,7 @@ You can implement page redirection through the page router, which finds the targ Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) - // Add a button to accept user clicks. + // Add a button to respond to user clicks. Button() { Text('Next') .fontSize(30) @@ -264,4 +265,4 @@ You can implement page redirection through the page router, which finds the targ ![en-us_image_0000001217526428](figures/en-us_image_0000001217526428.png) -Congratulations! You have finished developing your OpenHarmony application in eTS in the traditional coding approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md) +Congratulations! You have finished developing your OpenHarmony application in eTS in the traditional coding approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md). diff --git a/en/application-dev/quick-start/start-with-js-low-code.md b/en/application-dev/quick-start/start-with-js-low-code.md index a20c01c2f459fc07b799ca847683f99350dd4829..ae9c59cb9cfb5991166323d7f3d2e59c137bdb4b 100644 --- a/en/application-dev/quick-start/start-with-js-low-code.md +++ b/en/application-dev/quick-start/start-with-js-low-code.md @@ -1,6 +1,6 @@ # Getting Started with JavaScript in the Low-Code Approach -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
This feature will be available in DevEco Studio V2.2 Beta1 and later versions. +> **NOTE**
This feature will be available in DevEco Studio V2.2 Beta1 and later versions. > > For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development. @@ -37,10 +37,11 @@ After the project synchronization is complete, a low-code directory structure is ![en-us_image_0000001223558810](figures/en-us_image_0000001223558810.png) -- **entry > src > main > js > MainAbility > pages > index > index.js** : defines logical relationships, such as data and events, used on low-code pages. For details, see [JavaScript](../ui/js-framework-syntax-js.md). If multiple low-code development pages are created, a page folder and the corresponding **.js** file will be created for each of these pages. +- **entry > src > main > js > MainAbility > pages > index > index.js**: defines logical relationships, such as data and events, used on low-code pages. For details, see [JavaScript](../ui/js-framework-syntax-js.md). If multiple low-code development pages are created, a page folder and the corresponding **.js** file will be created for each of these pages. + > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
To avoid build errors when using the low-code development page, make sure the directory where the corresponding **.js** file is located does not contain **.hml** or **.css** files. For example, in the preceding example, no **.hml** or **.css** file is allowed in **js** > **MainAbility** > **pages** > **index**. > -- **entry > src > main > supervisual > MainAbility > pages > index > index.visual** : stores the data model of the low-code development page. You can double-click the file to open the low-code development page. If multiple low-code development pages are created, a page folder and the corresponding **.visual** file will be created for each of these pages. +- **entry > src > main > supervisual > MainAbility > pages > index > index.visual**: stores the data model of the low-code development page. You can double-click the file to open the low-code development page. If multiple low-code development pages are created, a page folder and the corresponding **.visual** file will be created for each of these pages. ## Building the First Page @@ -170,4 +171,4 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin ![en-us_image_0000001262127855](figures/en-us_image_0000001262127855.png) -Congratulations! You have finished developing your OpenHarmony app in JavaScript in the low-code approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md) +Congratulations! You have finished developing your OpenHarmony app in JavaScript in the low-code approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md). diff --git a/en/application-dev/quick-start/start-with-js.md b/en/application-dev/quick-start/start-with-js.md index 05af00a08774decd647c9d95d6fb7ba728478aca..8457280ce6a04872fa10a8add2d7269f23d0faca 100644 --- a/en/application-dev/quick-start/start-with-js.md +++ b/en/application-dev/quick-start/start-with-js.md @@ -1,7 +1,6 @@ # Getting Started with JavaScript in the Traditional Coding Approach -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development. -> +> **NOTE**
For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development. ## Creating a JavaScript Project @@ -19,7 +18,7 @@ ## JavaScript Project Files -- **entry** : OpenHarmony project module, which can be built into an ability package ([HAP](../../glossary.md#hap)). +- **entry**: OpenHarmony project module, which can be built into an ability package ([HAP](../../glossary.md#hap)). - **src > main > js**: a collection of JS source code. - **src > main > js > MainAbility**: entry to your application/service. - **src > main > js > MainAbility > i18n**: resources in different languages, for example, UI strings and image paths. @@ -51,7 +50,7 @@ 2. Add a button and bind the **onclick** method to this button. - On the default page, add an **<input>** component of the button type to accept user clicks and implement redirection to another page. The sample code in the **index.hml** file is shown below: + On the default page, add an **<input>** component of the button type to respond to user clicks and implement redirection to another page. The sample code in the **index.hml** file is shown below: ```html @@ -221,4 +220,4 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin ![en-us_image_0000001217527892](figures/en-us_image_0000001217527892.png) -Congratulations! You have finished developing your OpenHarmony application in JavaScript in the traditional coding approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md) +Congratulations! You have finished developing your OpenHarmony application in JavaScript in the traditional coding approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md). diff --git a/en/application-dev/quick-start/syscap.md b/en/application-dev/quick-start/syscap.md index 3d9d733441f5ab19016a3cabeada6abe41d6e1bc..bd81ff6771735d0cb78be5321269460a7ebd0bd2 100644 --- a/en/application-dev/quick-start/syscap.md +++ b/en/application-dev/quick-start/syscap.md @@ -1,4 +1,4 @@ -# SysCap Usage Guidelines +# SysCap ## Overview @@ -53,7 +53,7 @@ Right-click the project directory and choose **Import Product Compatibility ID** The IDE automatically configures the associated capability set and required capability set based on the settings supported by the created project. You can modify the capability sets when necessary. You can add APIs to the associated capability set in the IDE by adding system capabilities. However, note that these APIs may not be supported on the device. Therefore, check whether these APIs are supported before using them. -Exercise caution when modifying the required capability set. Incorrect modifications may cause the application to unable to be distributed to the target device. +Exercise caution when modifying the required capability set. Incorrect modifications may result in the application being unable to be distributed to the target device. ``` /* syscap.json */ @@ -91,7 +91,7 @@ Exercise caution when modifying the required capability set. Incorrect modificat ### Single-Device Application Development -By default, the association capability set and required system capability set of the application are the same as the supported system capability set of the device. Exercise caution when modifying the required capability set. +By default, the associated capability set and required system capability set of the application are the same as the supported system capability set of the device. Exercise caution when modifying the required capability set. ![image-20220326065124911](figures/image-20220326065124911.png) @@ -99,7 +99,7 @@ By default, the association capability set and required system capability set of ### Cross-Device Application Development -By default, the associated capability set of the application is the union of multiple devices' supported capability sets. The capability sets must be the intersection. +By default, the associated capability set of an application is the union of multiple devices' supported capability sets, while the required capability set is the intersection of the devices' supported capability sets. ![image-20220326065201867](figures/image-20220326065201867.png) @@ -158,7 +158,7 @@ authenticator.execute('FACE_ONLY', 'S1', (err, result) => { ### How Do SysCap Differences Arise Between Devices -The SysCap of devices varies according to the component combination defined by the product solution vendor. The following figure shows the overall process. +The device SysCaps in product solutions vary according to the component combination defined by the product solution vendor. The following figure shows the overall process. ![image-20220326072448840](figures/image-20220326072448840.png) @@ -172,8 +172,8 @@ The SysCap of devices varies according to the component combination defined by t 5. The SysCap set is encoded to generate the PCID. You can import the PCID to the IDE and decode it into SysCap. During development, compatibility processing is performed to mitigate the SysCap differences of devices. -6. System parameters deployed on devices contain the SysCap set. The system provides native interfaces and application interfaces for components and applications to check whether a SysCap set is available. +6. System parameters deployed on devices contain the SysCap set. The system provides native interfaces and application interfaces for components and applications to check whether a specific SysCap is available. 7. During application development, the SysCap required by the application is encoded into the Required Product Compatibility ID (RPCID) and written into the application installation package. During application installation, the package manager decodes the RPCID to obtain the SysCap required by the application and compares it with the SysCap of the device. If the SysCap required by the application is met, the application can be installed. -8. When an application is running, the **canIUse** API can be used to query whether the SysCap is compatible with the device. +8. When an application is running on a device, the **canIUse** API can be used to query whether the device is compatible with a specific SysCap. diff --git a/en/application-dev/reference/apis/js-apis-request.md b/en/application-dev/reference/apis/js-apis-request.md index 0a4b8c5ac6d2570ba34b5567322fef99e6b8bb1f..6080fafdb81553615954ce2365fe1bf7de548ae1 100644 --- a/en/application-dev/reference/apis/js-apis-request.md +++ b/en/application-dev/reference/apis/js-apis-request.md @@ -1,8 +1,7 @@ # Upload and Download -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version. -> +> **NOTE**
The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version. ## Modules to Import @@ -17,16 +16,16 @@ import request from '@ohos.request'; - HTTPS is supported by default. To support HTTP, you need to add **network** to the **config.json** file and set the **cleartextTraffic** attribute to **true**. - ``` - "deviceConfig": { - "default": { - "network": { - "cleartextTraffic": true - } - ... +``` + "deviceConfig": { + "default": { + "network": { + "cleartextTraffic": true } + ... } - ``` + } +``` ## Constants @@ -84,11 +83,13 @@ Uploads files. This API uses a promise to return the result. **Example** ```js -request.upload({ url: 'https://patch' }).then((data) => { - uploadTask = data; -}).catch((err) => { - console.error('Failed to request the upload. Cause: ' + JSON.stringify(err)); -}) + let file1 = { filename: "test", name: "test", uri: "internal://cache/test.jpg", type: "jpg" }; + let uploadTask; + request.upload({ url: 'https://patch', files: [file1] }).then((data) => { + uploadTask = data; + }).catch((err) => { + console.error('Failed to request the upload. Cause: ' + JSON.stringify(err)); + }) ``` @@ -112,13 +113,15 @@ Uploads files. This API uses an asynchronous callback to return the result. **Example** ```js -request.upload({ url: 'https://patch' }, (err, data) => { - if (err) { - console.error('Failed to request the upload. Cause: ' + JSON.stringify(err)); - return; - } - uploadTask = data; -}); + let file1 = { filename: "test", name: "test", uri: "internal://cache/test.jpg", type: "jpg" }; + let uploadTask; + request.upload({ url: 'https://patch', files: [file1] }, (err, data) => { + if (err) { + console.error('Failed to request the upload. Cause: ' + JSON.stringify(err)); + return; + } + uploadTask = data; + }); ``` @@ -154,10 +157,10 @@ Parameters of the callback function **Example** ```js -uploadTask.on('progress', function callback(uploadedSize, totalSize) { - console.info("upload totalSize:" + totalSize + " uploadedSize:" + uploadedSize); -} -); + uploadTask.on('progress', function callback(uploadedSize, totalSize) { + console.info("upload totalSize:" + totalSize + " uploadedSize:" + uploadedSize); + } + ); ``` @@ -187,10 +190,10 @@ Parameters of the callback function **Example** ```js -uploadTask.on('headerReceive', function callback(headers){ - console.info("upOnHeader headers:" + JSON.stringify(headers)); -} -); + uploadTask.on('headerReceive', function callback(headers){ + console.info("upOnHeader headers:" + JSON.stringify(headers)); + } + ); ``` @@ -221,10 +224,10 @@ Parameters of the callback function **Example** ```js -uploadTask.off('progress', function callback(uploadedSize, totalSize) { - console.info('uploadedSize: ' + uploadedSize, 'totalSize: ' + totalSize); -} -); + uploadTask.off('progress', function callback(uploadedSize, totalSize) { + console.info('uploadedSize: ' + uploadedSize, 'totalSize: ' + totalSize); + } + ); ``` @@ -254,10 +257,10 @@ Parameters of the callback function **Example** ```js -uploadTask.off('headerReceive', function callback(headers) { - console.info("upOnHeader headers:" + JSON.stringify(headers)); -} -); + uploadTask.off('headerReceive', function callback(headers) { + console.info("upOnHeader headers:" + JSON.stringify(headers)); + } + ); ``` @@ -280,15 +283,15 @@ Removes this upload task. This API uses a promise to return the result. **Example** ```js -uploadTask.remove().then((result) => { - if (result) { - console.info('Upload task removed successfully. '); - } else { - console.error('Failed to remove the upload task. '); - } -}).catch((err) => { - console.error('Failed to remove the upload task. Cause: ' + JSON.stringify(err)); -}); + uploadTask.remove().then((result) => { + if (result) { + console.info('Upload task removed successfully. '); + } else { + console.error('Failed to remove the upload task. '); + } + }).catch((err) => { + console.error('Failed to remove the upload task. Cause: ' + JSON.stringify(err)); + }); ``` @@ -311,17 +314,17 @@ Removes this upload task. This API uses an asynchronous callback to return the r **Example** ```js -uploadTask.remove((err, result) => { - if (err) { - console.error('Failed to remove the upload task. Cause: ' + JSON.stringify(err)); - return; - } - if (result) { - console.info('Upload task removed successfully.'); - } else { - console.error('Failed to remove the upload task.'); - } -}); + uploadTask.remove((err, result) => { + if (err) { + console.error('Failed to remove the upload task. Cause: ' + JSON.stringify(err)); + return; + } + if (result) { + console.info('Upload task removed successfully.'); + } else { + console.error('Failed to remove the upload task.'); + } + }); ``` @@ -384,13 +387,14 @@ Downloads files. This API uses a promise to return the result. **Example** -```js -request.download({ url: 'https://xxxx/xxxx.hap' }).then((data) => { - downloadTask = data; -}).catch((err) => { - console.error('Failed to request the download. Cause: ' + JSON.stringify(err)); -}) -``` + ```js + let downloadTask; + request.download({ url: 'https://xxxx/xxxx.hap' }).then((data) => { + downloadTask = data; + }).catch((err) => { + console.error('Failed to request the download. Cause: ' + JSON.stringify(err)); + }) + ``` ## request.download @@ -413,14 +417,15 @@ Downloads files. This API uses an asynchronous callback to return the result. **Example** ```js -request.download({ url: 'https://xxxx/xxxxx.hap', -filePath: 'xxx/xxxxx.hap'}, (err, data) => { - if (err) { - console.error('Failed to request the download. Cause: ' + JSON.stringify(err)); - return; - } - downloadTask = data; -}); + let downloadTask; + request.download({ url: 'https://xxxx/xxxxx.hap', + filePath: 'xxx/xxxxx.hap'}, (err, data) => { + if (err) { + console.error('Failed to request the download. Cause: ' + JSON.stringify(err)); + return; + } + downloadTask = data; + }); ``` @@ -456,12 +461,6 @@ Parameters of the callback function **Example** ```js - request.download({ url: 'https://xxxx/xxxx.hap' }, (err, data)=> { - if (err) { - console.error('Failed to request download. Cause:' + err); - return; - } - downloadTask = data; downloadTask.on('progress', function download_callback(receivedSize, totalSize) { console.info("download receivedSize:" + receivedSize + " totalSize:" + totalSize); } @@ -497,17 +496,11 @@ Parameters of the callback function **Example** ```js -request.download({ url: 'https://xxxx/xxxx.hap' }, (err, data)=> { - if (err) { - console.error('Failed to request download. Cause:' + err); - return; - } - downloadTask = data; - downloadTask .off('progress', function download_callback(receivedSize, totalSize) { - console.info("download receivedSize:" + receivedSize + " totalSize:" + totalSize); - } -); -}); + downloadTask .off('progress', function download_callback(receivedSize, totalSize) { + console.info("download receivedSize:" + receivedSize + " totalSize:" + totalSize); + } + ); + }); ``` @@ -531,17 +524,11 @@ Subscribes to a download event. This API uses an asynchronous callback to return **Example** ```js -request.download({ url: 'https://xxxx/xxxx.hap' }, (err, data)=> { - if (err) { - console.error('Failed to request download. Cause:' + err); - return; - } - downloadTask= data; - downloadTask.on('complete', function callback() { - console.info('Download task completed.'); - } -); -}); + downloadTask.on('complete', function callback() { + console.info('Download task completed.'); + } + ); + }); ``` @@ -559,23 +546,17 @@ Unsubscribes from the download event. This API uses an asynchronous callback to | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | -| type | string | Yes | Event type.
- **complete**: download task completion event.
- **pause**: download task pause event.
- **remove**: download task removal event. | +| type | string | Yes | Event type.
- **'complete'**: download task completion event.
- **'pause'**: download task pause event.
- **remove**: download task removal event. | | callback | function | No | Callback used to return the result. | **Example** ```js -request.download({ url: 'https://xxxx/xxxx.hap' }, (err, data)=> { - if (err) { - console.error('Failed to request download. Cause:' + JSON.stringify(err)); - return; - } - downloadTask = data; - downloadTask.off('complete', function callback() { - console.info('Download task completed.'); - } -); -}); + downloadTask.off('complete', function callback() { + console.info('Download task completed.'); + } + ); + }); ``` @@ -604,18 +585,12 @@ Parameters of the callback function **Example** - ```js -request.download({ url: 'https://xxxx/xxxx.hap' }, (err, data)=> { - if (err) { - console.error('Failed to request download. Cause:' + err); - return; - } - downloadTask = data; - downloadTask.on('fail', function callBack(err) { - console.info('Download task failed. Cause:' + err); - } -); -}); + ```js + downloadTask.on('fail', function callBack(err) { + console.info('Download task failed. Cause:' + err); + } + ); + }); ``` @@ -645,12 +620,6 @@ Parameters of the callback function **Example** ```js - request.download({ url: 'https://xxxx/xxxx.hap' }, (err, data)=> { - if (err) { - console.error('Failed to request download. Cause:' + err); - return; - } - downloadTask = data; downloadTask.off('fail', function callBack(err) { console.info('Download task failed. Cause:' + err); } @@ -709,17 +678,17 @@ Removes this download task. This API uses an asynchronous callback to return the **Example** ```js -downloadTask.remove((err, result)=>{ - if(err) { - console.error('Failed to remove the download task.'); - return; - } - if (result) { - console.info('Download task removed.'); - } else { - console.error('Failed to remove the download task.'); - } -}); + downloadTask.remove((err, result)=>{ + if(err) { + console.error('Failed to remove the download task.'); + return; + } + if (result) { + console.info('Download task removed.'); + } else { + console.error('Failed to remove the download task.'); + } + }); ``` @@ -742,11 +711,11 @@ Queries this download task. This API uses a promise to return the result. **Example** ```js -downloadTask.query().then((downloadInfo) => { - console.info('Download task queried. Data:' + JSON.stringify(downloadInfo)) -}) .catch((err) => { - console.error('Failed to query the download task. Cause:' + err) -}); + downloadTask.query().then((downloadInfo) => { + console.info('Download task queried. Data:' + JSON.stringify(downloadInfo)) + }) .catch((err) => { + console.error('Failed to query the download task. Cause:' + err) + }); ``` @@ -769,13 +738,13 @@ Queries this download task. This API uses an asynchronous callback to return the **Example** ```js -downloadTask.query((err, downloadInfo)=>{ - if(err) { - console.error('Failed to query the download mimeType. Cause:' + JSON.stringify(err)); - } else { - console.info('download query success. data:'+ JSON.stringify(downloadInfo)); - } -}); + downloadTask.query((err, downloadInfo)=>{ + if(err) { + console.error('Failed to query the download mimeType. Cause:' + JSON.stringify(err)); + } else { + console.info('download query success. data:'+ JSON.stringify(downloadInfo)); + } + }); ``` @@ -798,11 +767,11 @@ Queries **MimeType** of this download task. This API uses a promise to return th **Example** ```js -downloadTask.queryMimeType().then((data) => { - console.info('Download task queried. Data:' + JSON.stringify(data)); -}).catch((err) => { - console.error('Failed to query the download MimeType. Cause:' + JSON.stringify(err)) -}); + downloadTask.queryMimeType().then((data) => { + console.info('Download task queried. Data:' + JSON.stringify(data)); + }).catch((err) => { + console.error('Failed to query the download MimeType. Cause:' + JSON.stringify(err)) + }); ``` @@ -825,13 +794,13 @@ Queries **MimeType** of this download task. This API uses an asynchronous callba **Example** ```js -downloadTask.queryMimeType((err, data)=>{ - if(err) { - console.error('Failed to query the download mimeType. Cause:' + JSON.stringify(err)); - } else { - console.info('Download task queried. data:' + JSON.stringify(data)); - } -}); + downloadTask.queryMimeType((err, data)=>{ + if(err) { + console.error('Failed to query the download mimeType. Cause:' + JSON.stringify(err)); + } else { + console.info('Download task queried. data:' + JSON.stringify(data)); + } + }); ``` @@ -854,15 +823,15 @@ Pauses this download task. This API uses a promise to return the result. **Example** ```js -downloadTask.pause().then((result) => { - if (result) { - console.info('Download task paused. '); - } else { - console.error('Failed to pause the download task. Cause:' + JSON.stringify(result)); - } -}).catch((err) => { - console.error('Failed to pause the download task. Cause:' + JSON.stringify(err)); -}); + downloadTask.pause().then((result) => { + if (result) { + console.info('Download task paused. '); + } else { + console.error('Failed to pause the download task. Cause:' + JSON.stringify(result)); + } + }).catch((err) => { + console.error('Failed to pause the download task. Cause:' + JSON.stringify(err)); + }); ``` @@ -885,17 +854,17 @@ Pauses this download task. This API uses an asynchronous callback to return the **Example** ```js -downloadTask.pause((err, result)=>{ - if(err) { - console.error('Failed to pause the download task. Cause:' + JSON.stringify(err)); - return; - } - if (result) { - console.info('Download task paused. '); - } else { - console.error('Failed to pause the download task. Cause:' + JSON.stringify(result)); - } -}); + downloadTask.pause((err, result)=>{ + if(err) { + console.error('Failed to pause the download task. Cause:' + JSON.stringify(err)); + return; + } + if (result) { + console.info('Download task paused. '); + } else { + console.error('Failed to pause the download task. Cause:' + JSON.stringify(result)); + } + }); ``` @@ -918,16 +887,16 @@ Resumes this download task. This API uses a promise to return the result. **Example** ```js -downloadTask.resume().then((result) => { - if (result) { - console.info('Download task resumed.') - } else { - console.error('Failed to resume the download task. '); - } - console.info('Download task resumed.') -}).catch((err) => { - console.error('Failed to resume the download task. Cause:' + err); -}); + downloadTask.resume().then((result) => { + if (result) { + console.info('Download task resumed.') + } else { + console.error('Failed to resume the download task. '); + } + console.info('Download task resumed.') + }).catch((err) => { + console.error('Failed to resume the download task. Cause:' + err); + }); ``` @@ -950,17 +919,17 @@ Resumes this download task. This API uses an asynchronous callback to return the **Example** ```js -downloadTask.resume((err, result)=>{ - if (err) { - console.error('Failed to resume the download task. Cause:' + err); - return; - } - if (result) { - console.info('Download task resumed.'); - } else { - console.error('Failed to resume the download task.'); - } -}); + downloadTask.resume((err, result)=>{ + if (err) { + console.error('Failed to resume the download task. Cause:' + err); + return; + } + if (result) { + console.info('Download task resumed.'); + } else { + console.error('Failed to resume the download task.'); + } + }); ``` @@ -975,7 +944,7 @@ downloadTask.resume((err, result)=>{ | enableMetered | boolean | No | Download allowed in metered connections. | | enableRoaming | boolean | No | Download allowed on a roaming network. | | description | string | No | Description of the download session. | -| filePath7+ | string | No | Download path. (The default path is [ERROR:Invalid link:en-us_topic_0000001135742582.xml#xref8132147102215,link:en-us_topic_0000001127125012.xml#section1856519365229](en-us_topic_0000001127125012.xml#section1856519365229)).
- filePath:'workspace/test.txt': The **workspace** directory is created in the default path to store files.
- filePath:'test.txt': Files are stored in the default path.
- filePath:'workspace/': The **workspace** directory is created in the default path to store files. | +| filePath7+ | string | No | Download path. (The default value is **'internal://cache/'**).
- filePath:'workspace/test.txt': The **workspace** directory is created in the default path to store files.
- filePath:'test.txt': Files are stored in the default path.
- filePath:'workspace/': The **workspace** directory is created in the default path to store files. | | networkType | number | No | Network type allowed for download. | | title | string | No | Title of the download session. | diff --git a/en/application-dev/reference/apis/js-apis-settings.md b/en/application-dev/reference/apis/js-apis-settings.md index 84c909151c43f5420fcb130403a4734db7c54f35..83b3ac3920ac5fe6bca78974f664174157da86b0 100644 --- a/en/application-dev/reference/apis/js-apis-settings.md +++ b/en/application-dev/reference/apis/js-apis-settings.md @@ -1,6 +1,6 @@ # Settings -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE**
> The initial APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. @@ -23,21 +23,24 @@ Obtains the URI of a data item. **System capability**: SystemCapability.Applictaions.settings.Core -- Parameters - | Name| Type| Mandatory| Description| - | -------- | -------- | -------- | -------- | - | name | string | Yes| Name of the target data item. Data items can be classified as follows:
| +**Parameters** -- Return value - | Type| Description| - | -------- | -------- | - | string | URI of the data item.| +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| name | string | Yes| Name of the target data item. Data items can be classified as follows:
| -- Example - ```typescript - // Obtain the URI of a data item. - let urivar = settings.getUriSync('settings.screen.brightness'); - ``` +**Return value** + +| Type| Description| +| -------- | -------- | +| string | URI of the data item.| + +**Example** + +```typescript + // Obtain the URI of a data item. + let urivar = settings.getUriSync('settings.screen.brightness'); +``` ## settings.getValueSync @@ -48,28 +51,30 @@ Obtains the value of a data item. **System capability**: SystemCapability.Applictaions.settings.Core -- Parameters - | Name| Type| Mandatory| Description| - | -------- | -------- | -------- | -------- | - | dataAbilityHelper | [DataAbilityHelper](js-apis-dataAbilityHelper.md) | Yes| **DataAbilityHelper** class.| - | name | string | Yes| Name of the target data item. Data items can be classified as follows:
| - | defValue | string | Yes| Default value This parameter is user-defined. If it is not found in the database, the default value is returned.| +**Parameters** +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| dataAbilityHelper | [DataAbilityHelper](js-apis-dataAbilityHelper.md) | Yes| **DataAbilityHelper** class.| +| name | string | Yes| Name of the target data item. Data items can be classified as follows:
| +| defValue | string | Yes| Default value This parameter is user-defined. If it is not found in the database, the default value is returned.| + +**Return value** + +| Type| Description| +| -------- | -------- | +| string | Value of the data item.| -- Return value - | Type| Description| - | -------- | -------- | - | string | Value of the data item.| +**Example** -- Example - ```typescript +```typescript import featureAbility from '@ohos.ability.featureAbility'; - // Obtain the value of 'settings.screen.brightness' (this data item already exists in the database). - let brightness = 'settings.screen.brightness'; - let uri = settings.getUriSync(brightness); - let helper = featureAbility.acquireDataAbilityHelper(uri); - let value = settings.getValueSync(helper, brightness, '10'); - ``` +// Obtain the value of 'settings.screen.brightness' (this data item already exists in the database). +let brightness = 'settings.screen.brightness'; +let uri = settings.getUriSync(brightness); +let helper = featureAbility.acquireDataAbilityHelper(uri); +let value = settings.getValueSync(helper, brightness, '10'); +``` ## settings.setValueSync @@ -77,32 +82,36 @@ Obtains the value of a data item. setValueSync(dataAbilityHelper: DataAbilityHelper, name: string, value: string): boolean Sets the value of a data item. + If the specified data item exists in the database, the **setValueSync** method updates the value of the data item. If the data item does not exist in the database, the **setValueSync** method inserts the data item into the database. **Required permissions**: ohos.permission.WRITE_SYSTEM_SETTING **System capability**: SystemCapability.Applictaions.settings.Core -- Parameters - | Name| Type| Mandatory| Description| - | -------- | -------- | -------- | -------- | - | dataAbilityHelper | [DataAbilityHelper](js-apis-dataAbilityHelper.md) | Yes| **DataAbilityHelper** class.| - | name | string | Yes| Name of the target data item. Data items can be classified as follows:
| - | value | string | Yes| Value of the data item.| +**Parameters** + +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| dataAbilityHelper | [DataAbilityHelper](js-apis-dataAbilityHelper.md) | Yes| **DataAbilityHelper** class.| +| name | string | Yes| Name of the target data item. Data items can be classified as follows:
| +| value | string | Yes| Value of the data item.| -- Return value - | Type| Description| - | -------- | -------- | - | boolean | Result indicating whether the value is set successfully. Returns **true** if the value is set successfully; returns **false** otherwise.| +**Return value** -- Example - ```typescript +| Type| Description| +| -------- | -------- | +| boolean | Result indicating whether the value is set successfully. Returns **true** if the value is set successfully; returns **false** otherwise.| + +**Example** + +```typescript import featureAbility from '@ohos.ability.featureAbility'; - // Update the value of 'settings.screen.brightness'. (As this data item exists in the database, the setValueSync - method will update the value of the data item.) - let brightness = 'settings.screen.brightness'; - let uri = settings.getUriSync(brightness); - let helper = featureAbility.acquireDataAbilityHelper(uri); - let ret = settings.setValueSync(helper, brightness, '100'); - ``` +// Update the value of 'settings.screen.brightness'. (As this data item exists in the database, the setValueSync + method will update the value of the data item.) +let brightness = 'settings.screen.brightness'; +let uri = settings.getUriSync(brightness); +let helper = featureAbility.acquireDataAbilityHelper(uri); +let ret = settings.setValueSync(helper, brightness, '100'); +``` \ No newline at end of file diff --git a/en/application-dev/reference/apis/js-apis-system-parameter.md b/en/application-dev/reference/apis/js-apis-system-parameter.md index c111c6c2cbfa5e809816b3246a28ac8114e35f76..999c894303b070539e3fdc5c4010aaa0a5f19803 100644 --- a/en/application-dev/reference/apis/js-apis-system-parameter.md +++ b/en/application-dev/reference/apis/js-apis-system-parameter.md @@ -1,6 +1,6 @@ # System Parameter -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE**
> - The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version. > - This is a system API and cannot be called by third-party applications. @@ -24,7 +24,7 @@ Obtains the value of the attribute with the specified key. | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | | key | string | Yes| Key of the system attribute.| -| def | string | No| Default Value| +| def | string | No| Default value.| **Return value** @@ -88,7 +88,7 @@ Obtains the value of the attribute with the specified key. This API uses an asyn | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | | key | string | Yes| Key of the system attribute.| -| def | string | Yes| Default Value| +| def | string | Yes| Default value.| | callback | AsyncCallback<string> | Yes| Callback used to return the result.| **Example** @@ -121,7 +121,7 @@ Obtains the value of the attribute with the specified key. This API uses a promi | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | | key | string | Yes| Key of the system attribute.| -| def | string | No| Default Value| +| def | string | No| Default value.| **Return value** @@ -171,7 +171,7 @@ try { ``` -## parameter.set(key: string, value: string, callback: AsyncCallback<void>) +## parameter.set set(key: string, value: string, callback: AsyncCallback<void>): void @@ -184,7 +184,7 @@ Sets a value for the attribute with the specified key. This API uses an asynchro | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | | key | string | Yes| Key of the system attribute.| -| def | string | Yes| Default Value| +| value | string | Yes| System attribute value to set.| | callback | AsyncCallback<void> | Yes| Callback used to return the result.| **Example** @@ -203,9 +203,9 @@ try { ``` -## parameter.set(key: string, def?: string) +## parameter.set -set(key: string, def?: string): Promise<string> +set(key: string, value: string): Promise<void> Sets a value for the attribute with the specified key. This API uses a promise to return the result. @@ -216,13 +216,13 @@ Sets a value for the attribute with the specified key. This API uses a promise t | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | | key | string | Yes| Key of the system attribute.| -| def | string | No| Default Value| +| value| string | Yes | System attribute value to set.| **Return value** | Type| Description| | -------- | -------- | -| Promise<string> | Promise used to return the execution result.| +| Promise<void> | Promise used to return the execution result.| **Example** diff --git a/en/application-dev/reference/apis/js-apis-workScheduler.md b/en/application-dev/reference/apis/js-apis-workScheduler.md index bd8e95ec9ef21a1498b3dc4db0b5f1f4fb595c49..964b63aa2ec47a0cceaaac8457f77f3a916051f7 100644 --- a/en/application-dev/reference/apis/js-apis-workScheduler.md +++ b/en/application-dev/reference/apis/js-apis-workScheduler.md @@ -1,6 +1,6 @@ # Work Scheduler -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+> **NOTE**
> The initial APIs of this module are supported since API version 9. API version 9 is a canary version for trial use. The APIs of this version may be unstable. @@ -100,7 +100,7 @@ Obtains the latest task status. This API uses an asynchronous callback to return ``` workScheduler.getWorkStatus(50, (err, res) => { if (err) { - console.info('workschedulerLog getWorkStatus failed, because:' + err.data); + console.info('workschedulerLog getWorkStatus failed, because:' + err.code); } else { for (let item in res) { console.info('workschedulerLog getWorkStatus success,' + item + ' is:' + res[item]); @@ -136,7 +136,7 @@ Obtains the latest task status. This API uses a promise to return the result. console.info('workschedulerLog getWorkStatus success,' + item + ' is:' + res[item]); } }).catch((err) => { - console.info('workschedulerLog getWorkStatus failed, because:' + err.data); + console.info('workschedulerLog getWorkStatus failed, because:' + err.code); }) ``` @@ -151,7 +151,7 @@ Obtains all tasks associated with this application. This API uses an asynchronou | Name | Type | Mandatory | Description | | -------- | -------------------- | ---- | ------------------------------- | -| callback | AsyncCallback\ | Yes | Callback used to return all tasks associated with the current application.| +| callback | AsyncCallback\ | Yes | Callback used to return all tasks associated with the current application. | **Return value** @@ -164,7 +164,7 @@ Obtains all tasks associated with this application. This API uses an asynchronou ``` workScheduler.obtainAllWorks((err, res) =>{ if (err) { - console.info('workschedulerLog obtainAllWorks failed, because:' + err.data); + console.info('workschedulerLog obtainAllWorks failed, because:' + err.code); } else { console.info('workschedulerLog obtainAllWorks success, data is:' + JSON.stringify(res)); } @@ -182,7 +182,7 @@ Obtains all tasks associated with this application. This API uses a promise to r | Type | Description | | -------------------------------------- | ------------------------------ | -| Promise> | Promise used to return all tasks associated with the current application.| +| Promise> | Promise used to return all tasks associated with the current application. | **Example** @@ -190,7 +190,7 @@ Obtains all tasks associated with this application. This API uses a promise to r workScheduler.obtainAllWorks().then((res) => { console.info('workschedulerLog obtainAllWorks success, data is:' + JSON.stringify(res)); }).catch((err) => { - console.info('workschedulerLog obtainAllWorks failed, because:' + err.data); + console.info('workschedulerLog obtainAllWorks failed, because:' + err.code); }) ``` @@ -233,7 +233,7 @@ Checks whether the last execution of the specified task timed out. This API uses ``` workScheduler.isLastWorkTimeOut(500, (err, res) =>{ if (err) { - console.info('workschedulerLog isLastWorkTimeOut failed, because:' + err.data); + console.info('workschedulerLog isLastWorkTimeOut failed, because:' + err.code); } else { console.info('workschedulerLog isLastWorkTimeOut success, data is:' + res); } @@ -267,7 +267,7 @@ Checks whether the last execution of the specified task timed out. This API uses console.info('workschedulerLog isLastWorkTimeOut success, data is:' + res); }) .catch(err => { - console.info('workschedulerLog isLastWorkTimeOut failed, because:' + err.data); + console.info('workschedulerLog isLastWorkTimeOut failed, because:' + err.code); }); ``` @@ -291,6 +291,8 @@ Provides detailed information about the task. | repeatCycleTime | number | No | Repeat interval. | | repeatCount | number | No | Number of repeat times. | | isPersisted | boolean | No | Whether to enable persistent storage for the task. | +| isDeepIdle | boolean | No | Whether the device needs to enter the idle state. | +| idleWaitTime | number | No | Time to wait in the idle state. | ## NetworkType Enumerates the network types that can trigger the task. @@ -319,7 +321,7 @@ Enumerates the charging types that can trigger the task. | CHARGING_PLUGGED_WIRELESS | 3 | Wireless charging. | ## BatteryStatus -Enumerates the battery status that can trigger the task. +Enumerates the battery states that can trigger the task. **System capability**: SystemCapability.ResourceSchedule.WorkScheduler @@ -330,7 +332,7 @@ Enumerates the battery status that can trigger the task. | BATTERY_STATUS_LOW_OR_OKAY | 2 | The battery level is restored from low to normal, or a low battery alert is displayed.| ## StorageRequest -Enumerates the storage status that can trigger the task. +Enumerates the storage states that can trigger the task. **System capability**: SystemCapability.ResourceSchedule.WorkScheduler diff --git a/en/application-dev/reference/arkui-js/js-components-common-attributes.md b/en/application-dev/reference/arkui-js/js-components-common-attributes.md index 7c3db13df60375b2ae5988d747d7c8747da017af..4175288f9fe836b8c6d54a3e60adada277b30e40 100644 --- a/en/application-dev/reference/arkui-js/js-components-common-attributes.md +++ b/en/application-dev/reference/arkui-js/js-components-common-attributes.md @@ -1,175 +1,34 @@ -# Universal Attributes +# Universal Attributes -## Common Attributes +> **NOTE**
+> Universal attributes are supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. + +## Common Attributes Common attributes are used to set component identities and appearance. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for the component to facilitate data storage and reading. In the JS file:

-
  • Use e.target.attr.data to read data in the event callback, where e is the input parameter.
  • After a DOM element is obtained by using $element or $refs, it can be accessed through attr.data.
-
NOTE:

It is recommended that you use data-* since API version 6.

-
-

data-*6+

-

string

-

-

-

No

-

Attribute set for components to facilitate data storage and reading. The value is case insensitive. For example, data-A and data-a are the same by default. In the JS file:

-
  • Use e.target.dataSet.a to read data in the event callback, where e is the input parameter.
  • After a DOM element is obtained by using $element or $refs, it can be accessed through dataSet.a.
-

click-effect5+

-

string

-

-

-

No

-

Click effect complying with spring physics. Available values are as follows:

-
  • spring-small: The component scales down to 90% of its size when it is selected. This is appropriate for small components.
  • spring-medium: The component scales down to 95% of its size when it is selected. This is appropriate for medium-sized components.
  • spring-large: The component scales down to 95% of its size when it is selected. This is appropriate for large components.
-

dir6+

-

string

-

auto

-

No

-

Element layout mode. The value can be:

-
  • rtl: right-to-left layout.
  • ltr: left-to-right layout.
  • auto: follows the system language environment.
-
+| Name | Type | Default Value | Mandatory | Description | +| ------------------------- | ------- | ----- | ---- | ---------------------------------------- | +| id | string | - | No | Unique ID of the component. | +| style | string | - | No | Style declaration of the component. | +| class | string | - | No | Style class of the component, which is used to refer to a style table. | +| ref | string | - | No | Reference information of child elements or child components, which is registered with the parent component on `$refs`.| +| disabled | boolean | false | No | Whether the component is disabled. If it is disabled, it cannot respond to user interaction. | +| data | string | - | No | Attribute set for the component to facilitate data storage and reading. In the JS file:
- Use **e.target.attr.data** to read data in the event callback, where **e** is the input parameter.
- Use `$element` or `$refs` to obtain a DOM element, which can then be accessed through **attr.data**.
You are advised to use **data-*** instead since API version 6.| +| data-\*6+ | string | - | No | Attribute set for the component to facilitate data storage and reading. The value is case insensitive. For example, **data-A** and **data-a** are the same by default. In the JS file:
- Use **e.target.dataSet.a** to read data in the event callback, where **e** is the input parameter.
- After a DOM element is obtained by using **$element** or **$refs**, it can be accessed through **dataSet.a**.| +| click-effect5+ | string | - | No | Click effect complying with spring physics. Available values are as follows:
- **spring-small**: The component scales down to 90% of its size when it is selected. This is appropriate for small components.
- **spring-medium**: The component scales down to 95% of its size when it is selected. This is appropriate for medium-sized components.
- **spring-large**: The component scales down to 95% of its size when it is selected. This is appropriate for large components.| +| dir6+ | string | auto | No | Element layout mode. Available values are as follows:
- **rtl**: right-to-left layout.
- **ltr**: left-to-right layout.
- **auto**: follows the system language environment.| -## Rendering Attributes -Rendering attributes are used to set whether a component is rendered. +## Rendering Attributes - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Description

-

for

-

Array

-

-

-

Expands the current element based on the configured data list.

-

if

-

boolean

-

-

-

Whether the element is added or removed.

-

show

-

boolean

-

-

-

Whether the element is displayed or hidden.

-
+Rendering attributes are used to set whether a component is rendered. ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->Do not set styles in attribute fields. +| Name | Type | Default Value | Description | +| ---- | ------- | ---- | ------------------------ | +| for | Array | - | Expands the current element based on the configured data list. | +| if | boolean | - | Whether the element is added or removed.| +| show | boolean | - | Whether the element is displayed or hidden.| +> **NOTE**
+> Do not set styles in attribute fields. diff --git a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md index abb5a5bd2902ca4708ab116ebd8178629c8e87aa..c170c6221eb9cd17f43117b1f4a0ca82224a8f23 100644 --- a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md +++ b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md @@ -1,7 +1,7 @@ # AnimatorProperty -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE**
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. @@ -18,21 +18,21 @@ When the universal attributes of a component change, you can create an **Animato - Curve enums - | Name | Description | + | Name | Description | | -------- | -------- | - | Linear | The animation speed keeps unchanged. | - | Ease | The animation starts at a low speed and then accelerates. It slows down before the animation ends. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used. | - | EaseIn | The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used. | - | EaseOut | The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used. | - | EaseInOut | The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used. | - | FastOutSlowIn | The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0). | - | LinearOutSlowIn | The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0). | - | FastOutLinearIn | The animation uses the acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0). | - | ExtremeDeceleration | The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0). | - | Sharp | The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0). | - | Rhythm | The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0). | - | Smooth | The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0). | - | Friction | Damping curve. The cubic-bezier curve (0.2, 0.0, 0.2, 1.0) is used. | + | Linear | The animation speed keeps unchanged. | + | Ease | The animation starts at a low speed and then accelerates. It slows down before the animation ends. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used. | + | EaseIn | The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used. | + | EaseOut | The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used. | + | EaseInOut | The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used. | + | FastOutSlowIn | The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0). | + | LinearOutSlowIn | The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0). | + | FastOutLinearIn | The animation uses the acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0). | + | ExtremeDeceleration | The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0). | + | Sharp | The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0). | + | Rhythm | The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0). | + | Smooth | The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0). | + | Friction | Damping curve. The cubic-bezier curve (0.2, 0.0, 0.2, 1.0) is used. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md b/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md index 381be5447661a21009da52cb230b88f2ae0197f0..3b09fb893935f4cb83328b5e2bdfbb14d9a4b32b 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md @@ -1,7 +1,7 @@ # Blank -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. @@ -23,24 +23,25 @@ None Blank(min?: Length) - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | min | Length | No | 0 | Minimum size of the **<Blank>** component in the container along the main axis. | + | min | Length | No | 0 | Minimum size of the **<Blank>** component in the container along the main axis. | ## Attributes - | Name | Type | Default Value | Description | +| Name | Type | Default Value | Description | | -------- | -------- | -------- | -------- | -| color | Color | 0x00000000 | Color to fill the blank. | +| color | Color | 0x00000000 | Color to fill the blank. | > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> > - Universal attribute methods are not supported. ## Example - + ``` @Entry @Component diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md index 68d1c22f59642c5fb0d1460c4c3be13481fb9210..0ed76c64720be5c440419ae19e9e301744c123db 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md @@ -1,9 +1,8 @@ # Button -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE**
This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > -> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. The **<Button>** component represents a component that can trigger actions. diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md b/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md index 509b8dc54ee19a841106c67f07db98de16a04f03..9348df459e8cb4aa32318d807c261dad5176bac5 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md @@ -1,6 +1,6 @@ # Checkbox -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md b/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md index c84392d085212ca08859ce0d641276f41a4a5e59..20057bc1c5350b88435782baf7c86c7d576ef652 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md @@ -1,6 +1,6 @@ # CheckboxGroup -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. The **\** component is used to select or deselect all check boxes in a group. @@ -27,19 +27,19 @@ Creates a check box group so that you can select or deselect all check boxes in ## Attributes -| Name| Type| Default Value| Description| +| Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| selectAll | bool | false | Whether to select all.| -| selectedColor | Color | - | Color of the selected check box.| +| selectAll | bool | false | Whether to select all.| +| selectedColor | Color | - | Color of the selected check box.| ## Events -| Name| Description| +| Name| Description| | -------- | -------- | -| onChange (callback: (names: Array<string>, status: SelectStatus) => void ) |Triggered when the selection status of the check box group or any check box wherein changes.
- **names**: names of all selected check boxes in the group.
- **status**: selection status.| +| onChange (callback: (names: Array<string>, status: SelectStatus) => void ) |Triggered when the selection status of the check box group or any check box wherein changes.
- **names**: names of all selected check boxes in the group.
- **status**: selection status.| - SelectStatus enums - | Name | Description| + | Name | Description| | ----- | -------------------- | | All | All check boxes in the group are selected.| | Part | Some check boxes in the group are selected.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md b/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md index 7c44a96cdb67cbee78f21887578d2f52b9dc3cc7..a8fe83087a19fe6dea6204413b2e3bb731f167e0 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md @@ -1,7 +1,7 @@ # DataPanel -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. @@ -23,17 +23,17 @@ None DataPanel(value:{values: number[], max?: number, type?: DataPanelType}) - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | values | number[] | Yes | - | Value list. A maximum of nine values are supported. | - | max | number | No | 100 | - When set to a value greater than 0, this parameter indicates the maximum value in the **values** list.
- When set to a value equal to or smaller than 0, this parameter indicates the sum of values in the **values** list. The values are displayed in proportion. | - | type8+ | DataPanelType | No | DataPanelType.Circle | Type of the data panel. | + | values | number[] | Yes | - | Value list. A maximum of nine values are supported. | + | max | number | No | 100 | - When set to a value greater than 0, this parameter indicates the maximum value in the **values** list.
- When set to a value equal to or smaller than 0, this parameter indicates the sum of values in the **values** list. The values are displayed in proportion. | + | type8+ | DataPanelType | No | DataPanelType.Circle | Type of the data panel. | - DataPanelType enums - | Name | Description | + | Name | Description | | -------- | -------- | - | Line | Line data panel. | + | Line | Line data panel. | | Circle | Circle data panel. | diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md b/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md index d8c994e636c06ad43593963892bd020534747456..bdda544cfcecdf28b77841c1a2f32ef63e8a3c2b 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md @@ -1,6 +1,6 @@ # DatePicker -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md b/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md index eaec942aac1e53c0bb6e23988bdb55eba6e29a31..b4d89bd97a63514d77f168827d73e1f800de6c1d 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md @@ -1,7 +1,7 @@ # Navigation -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. @@ -29,37 +29,37 @@ Creates a component that can automatically display the navigation bar, title, an | Name | Type | Default Value | Description | | -------- | -------- | -------- | -------- | -| title | string \| [CustomBuilder](../../ui/ts-types.md)8+ | - | Page title. | +| title | string \| [CustomBuilder](../../ui/ts-types.md) | - | Page title. | | subtitle | string | - | Subtitle of the page. | -| menus | Array<NavigationMenuItem> \| [CustomBuilder](../../ui/ts-types.md)8+ | - | Menu in the upper right corner of the page. | +| menus | Array<NavigationMenuItem> \| [CustomBuilder](../../ui/ts-types.md) | - | Menu in the upper right corner of the page. | | titleMode | NavigationTitleMode | NavigationTitleMode.Free | Display mode of the page title bar. | -| toolBar | {
items:[
Object
] }
\| [CustomBuilder](../../ui/ts-types.md)8+ | - | Content of the toolbar.
**items**: all items on the toolbar. | +| toolBar | {
items:[
Object
] }
\| [CustomBuilder](../../ui/ts-types.md) | - | Content of the toolbar.
**items**: all items on the toolbar. | | hideToolBar | boolean | false | Whether to hide the toolbar.
**true**: Hide the toolbar.
**false**: Show the toolbar. | | hideTitleBar | boolean | false | Whether to hide the title bar. | | hideBackButton | boolean | false | Whether to hide the back button. | - NavigationMenuItem attributes - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | | value | string | Yes | - | Text of an option on the menu bar. | | icon | string | No | - | Icon path of an option on the menu bar. | | action | () => void | No | - | Callback invoked when an option is selected. | - Object attributes - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | | value | string | Yes | - | Text of an option on the toolbar. | | icon | string | No | - | Icon path of an option on the toolbar. | | action | () => void | No | - | Callback invoked when an option is selected. | - NavigationTitleMode enums - | Name | Description | + | Name | Description | | -------- | -------- | | Free | When the content is a scrollable component, the title shrinks as the content scrolls up (the subtitle fades out with its size remaining unchanged) and restores as the content scrolls down. | | Mini | The mode is fixed at mini mode (icon + main title and subtitle). | | Full | The mode is fixed at full mode (main title and subtitle). | - > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** + > **NOTE** > Currently, only the scrollable component **<List>** is supported. diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-search.md b/en/application-dev/reference/arkui-ts/ts-basic-components-search.md index fbd02e43d85081fbc64ed53d7987e86bcb3d053a..105b4f99b6eba49a341d4524b2bcbc271c9a0505 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-search.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-search.md @@ -55,7 +55,7 @@ controller: SearchController = new SearchController() ``` #### caretPosition -creatPosition(value: number): viod +creatPosition(value: number): void Sets the position of the caret. diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-text.md b/en/application-dev/reference/arkui-ts/ts-basic-components-text.md index a5e43392fa4369f960f5946bc91b13d786430003..17b4194ddc952a44d6cebf887cd7a65467506392 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-text.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-text.md @@ -1,11 +1,10 @@ # Text - -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -The **<Text>** component is used to display a paragraph of textual information. +The **\** component is used to display a piece of textual information. ## Required Permissions @@ -15,7 +14,7 @@ None ## Child Components -The **<Text>** component can contain the child component [](ts-basic-components-span.md). +This component can contain the [\](ts-basic-components-span.md) child component. ## APIs @@ -23,60 +22,70 @@ The **<Text>** component can contain the child component [](ts-basic Text(content?: string) - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | - | content | string | No | '' | Text content, which is the content of the child component **<Span>**. This parameter does not take effect when the child component **<Span>** is contained. | + | content | string | No| '' | Text content. This parameter does not take effect when the child component **\** is contained.| ## Attributes -| Name | Type | Default Value | Description | +| Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| textAlign | TextAlign | TextAlign.Start | Text alignment mode of multiple lines of text. | -| textOverflow | {overflow: TextOverflow} | {overflow: TextOverflow.Clip} | Display mode when the text is too long. | -| maxLines | number | Infinity | Maximum number of lines in the text. | -| lineHeight | Length | - | 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. | -| decoration | {
type: TextDecorationType,
color?: Color
} | {
type: TextDecorationType.None,
color: Color.Black
} | Style and color of the text decorative line. | -| baselineOffset | Length | - | Offset of the text baseline. | -| textCase | TextCase | TextCase.Normal | Text case. | +| textAlign | TextAlign | TextAlign.Start | Text alignment mode of multiple lines of text.| +| textOverflow | {overflow: TextOverflow} | {overflow: TextOverflow.Clip} | Display mode when the text is too long.
**NOTE**
Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters. | +| maxLines | number | Infinity | Maximum number of lines in the text.| +| lineHeight | Length | - | 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.| +| decoration | {
type: TextDecorationType,
color?: Color
} | {
type: TextDecorationType.None,
color: Color.Black
} | Style and color of the text decorative line.| +| baselineOffset | Length | - | Offset of the text baseline.| +| textCase | TextCase | TextCase.Normal | Text case.| +| copyOption9+ | boolean\|CopyOption | false | Whether copy and paste is allowed.| - TextAlign enums - | Name | Description | + | Name| Description| | -------- | -------- | - | Center | The text is center-aligned. | - | Start | The text is aligned with the direction in which the text is written. | - | End | The text is aligned with the opposite direction in which the text is written. | + | Center | The text is center-aligned.| + | Start | The text is aligned with the direction in which the text is written.| + | End | The text is aligned with the opposite direction in which the text is written.| - TextOverflow enums - | Name | Description | + | Name| Description| | -------- | -------- | - | Clip | Extra text is truncated. | - | Ellipsis | The ellipsis (...) is used for extra-long text. | - | None | No truncation or ellipsis is used for extra-long text. | + | Clip | Extra text is truncated.| + | Ellipsis | An ellipsis (...) is used to represent clipped text.| + | None | No truncation or ellipsis is used for extra-long text.| - TextDecorationType enums - | Name | Description | + | Name| Description| | -------- | -------- | - | Underline | An underline is used. | - | LineThrough | A strikethrough is used. | - | Overline | An overline is used. | - | None | No decorative line is used. | + | Underline | Line under the text.| + | LineThrough | Line through the text.| + | Overline | Line over the text.| + | None | No decorative lines.| - TextCase enums - | Name | Description | + + | Name | Description | + | --------- | -------------------- | + | Normal | The original case of the text is retained.| + | LowerCase | All letters in the text are in lowercase. | + | UpperCase | All letters in the text are in uppercase. | + +- CopyOption9+ enums + + | Name| Description| | -------- | -------- | - | Normal | The original case of the text is retained. | - | LowerCase | All letters in the text are in lowercase. | - | UpperCase | All letters in the text are in uppercase. | + | InApp | Intra-application copy and paste is allowed.| + | LocalDevice | Intra-device copy and paste is allowed.| + | CrossDevice | Cross-device copy and paste is allowed.| -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> The **<Text>** component cannot contain both the text and the child component **<Span>**. If both of them exist, only the content in **<Span>** is displayed. +> **NOTE**
+> If the **\** component contains both the text and the **\** child component, only the content in **\** is displayed. ## Example - -``` +```ts +// xxx.ets @Entry @Component struct TextExample1 { @@ -93,7 +102,7 @@ struct TextExample1 { Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to Clip text content.') .textOverflow({ overflow: TextOverflow.Clip }) .maxLines(1).fontSize(12).border({ width: 1 }).padding(10) - Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.') + Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.'.split('').join('\u200B')) .textOverflow({ overflow: TextOverflow.Ellipsis }) .maxLines(1).fontSize(12).border({ width: 1 }).padding(10) @@ -114,8 +123,8 @@ struct TextExample1 { ![en-us_image_0000001257138337](figures/en-us_image_0000001257138337.gif) - -``` +```ts +// xxx.ets @Entry @Component struct TextExample2 { diff --git a/en/application-dev/reference/arkui-ts/ts-container-flex.md b/en/application-dev/reference/arkui-ts/ts-container-flex.md index 8e47369ccfe0454e165416dc69b84206d3bb8465..8f54e48fb73ff923c0d1cb770f567f8d41822bec 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-flex.md +++ b/en/application-dev/reference/arkui-ts/ts-container-flex.md @@ -1,11 +1,11 @@ # Flex -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -The **<Flex>** component allows for an elastic layout. +The **\** component allows for an elastic layout. ## Required Permissions @@ -22,46 +22,45 @@ This component can contain child components. Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign }) -Creates a standard **<Flex>** component. +Creates a standard **\** component. - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | direction | FlexDirection | No | FlexDirection.Row | Direction in which child components are arranged in the **<Flex>** component, that is, the direction of the main axis. | - | wrap | FlexWrap | No | FlexWrap.NoWrap | Whether the **<Flex>** component has a single line or multiple lines. | - | justifyContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in the **<Flex>** component along the main axis. | - | alignItems | [ItemAlign](ts-appendix-enums.md#itemalign-enums) | No | ItemAlign.Stretch | Alignment mode of the child components in the **<Flex>** component along the cross axis. | - | alignContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**. | + | direction | FlexDirection | No | FlexDirection.Row | Direction in which child components are arranged in the **\** component, that is, the direction of the main axis. | + | wrap | FlexWrap | No | FlexWrap.NoWrap | Whether the **\** component has a single line or multiple lines. | + | justifyContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in the **\** component along the main axis. | + | alignItems | [ItemAlign](ts-appendix-enums.md#itemalign-enums) | No | ItemAlign.Stretch | Alignment mode of the child components in the **\** component along the cross axis. | + | alignContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **\** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**. | - FlexDirection enums - | Name | Description | + | Name | Description | | -------- | -------- | - | Row | The child components are arranged in the same direction as the main axis runs along the rows. | - | RowReverse | The child components are arranged opposite to the **Row** direction. | - | Column | The child components are arranged in the same direction as the main axis runs down the columns. | - | ColumnReverse | The child components are arranged opposite to the **Column** direction. | + | Row | The child components are arranged in the same direction as the main axis runs along the rows. | + | RowReverse | The child components are arranged opposite to the **Row** direction. | + | Column | The child components are arranged in the same direction as the main axis runs down the columns. | + | ColumnReverse | The child components are arranged opposite to the **Column** direction. | - FlexWrap enums - | Name | Description | + | Name | Description | | -------- | -------- | - | NoWrap | The child components in the **<Flex>** component are arranged in a single line, and they may overflow. | - | Wrap | The child components in the **<Flex>** component are arranged in multiple lines, and they may overflow. | - | WrapReverse | The child components in the **<Flex>** component are reversely arranged in multiple lines, and they may overflow. | + | NoWrap | The child components in the **<Flex>** component are arranged in a single line, and they may overflow. | + | Wrap | The child components in the **<Flex>** component are arranged in multiple lines, and they may overflow. | + | WrapReverse | The child components in the **<Flex>** component are reversely arranged in multiple lines, and they may overflow. | - FlexAlign enums - | Name | Description | + | Name | Description | | -------- | -------- | - | Start | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one. | - | Center | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end. | - | End | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one. | - | SpaceBetween | The child components are evenly distributed along the main axis. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same. | - | SpaceAround | The child components are evenly distributed along the main axis, with a half-size space on either end. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components. | - | SpaceEvenly | The child components are equally distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between two adjacent components are the same. | + | Start | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one. | + | Center | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end. | + | End | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one. | + | SpaceBetween | The child components are evenly distributed along the main axis. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same. | + | SpaceAround | The child components are evenly distributed along the main axis, with a half-size space on either end. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components. | + | SpaceEvenly | The child components are equally distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between two adjacent components are the same. | ## Example - ``` // Example 01 @Entry diff --git a/en/application-dev/reference/arkui-ts/ts-container-scroll.md b/en/application-dev/reference/arkui-ts/ts-container-scroll.md index 076505a2951dac1b2e3a729768f56f8d52692775..fcb3dbc0af7c3213b3e25f5b2fce53719cac5b3e 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-scroll.md +++ b/en/application-dev/reference/arkui-ts/ts-container-scroll.md @@ -103,7 +103,7 @@ scroller.currentOffset(): Object Obtains the scrolling offset. -- Return values +- Return value | Type | Description | | -------- | -------- | | {
xOffset: number,
yOffset: number
} | **xOffset**: horizontal scrolling offset.
**yOffset**: vertical scrolling offset. | diff --git a/en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md b/en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md index de18fea31cc344b2e25091cbb442df29ad87fda9..c81317666091daad4c65455e257a27f47049873b 100644 --- a/en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md +++ b/en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md @@ -1,13 +1,13 @@ # Interpolation Calculation -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE**
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Modules to Import - + ``` import curves from '@ohos.curves' ``` @@ -15,7 +15,7 @@ import curves from '@ohos.curves' ## Required Permissions -None +N/A ## curves.init @@ -27,11 +27,11 @@ Implements initialization for the interpolation curve, which is used to create a - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | curve | Curve | No | Linear | Curve object. | + | curve | Curve | No | Linear | Curve object. | -- Return values +- Return value
Curve object. @@ -44,12 +44,13 @@ Constructs a step curve object. - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | count | number | Yes | - | Number of steps. Must be a positive integer. | - | end | boolean | No | true | Step change at the start or end point of each interval. Defaults to **true**, indicating that the step change occurs at the end point. | + | count | number | Yes | - | Number of steps. Must be a positive integer. | + | end | boolean | No | true | Step change at the start or end point of each interval. Defaults to **true**, indicating that the step change occurs at the end point. | -- Return values +- Return value + Curve object. @@ -62,14 +63,15 @@ Constructs a third-order Bezier curve object. The curve value must be between 0 - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | x1 | number | Yes | Horizontal coordinate of the first point on the Bezier curve. | - | y1 | number | Yes | Vertical coordinate of the first point on the Bezier curve. | - | x2 | number | Yes | Horizontal coordinate of the second point on the Bezier curve. | - | y2 | number | Yes | Vertical coordinate of the second point on the Bezier curve. | + | x1 | number | Yes | Horizontal coordinate of the first point on the Bezier curve. | + | y1 | number | Yes | Vertical coordinate of the first point on the Bezier curve. | + | x2 | number | Yes | Horizontal coordinate of the second point on the Bezier curve. | + | y2 | number | Yes | Vertical coordinate of the second point on the Bezier curve. | -- Return values +- Return value + Curve object. @@ -82,20 +84,21 @@ Constructs a spring curve object. - Parameters - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | velocity | number | Yes | Initial velocity. | - | mass | number | Yes | Mass. | - | stiffness | number | Yes | Stiffness. | - | damping | number | Yes | Damping. | + | velocity | number | Yes | Initial velocity. | + | mass | number | Yes | Mass. | + | stiffness | number | Yes | Stiffness. | + | damping | number | Yes | Damping. | -- Return values +- Return value + Curve object. ## Example - + ``` import Curves from '@ohos.curves' let curve1 = Curves.init() // Create a default linear interpolation curve. @@ -106,13 +109,13 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // Create a third-order Bezi Curve objects can be created only by the preceding APIs. - | API | Description | +| API | Description | | -------- | -------- | -| interpolate(time: number): number | Calculation function of the interpolation curve. Passing a normalized time parameter to this function returns the current interpolation.
**time**: indicates the current normalized time. The value ranges from 0 to 1.
The curve interpolation corresponding to the normalized time point is returned. | +| interpolate(time: number): number | Calculation function of the interpolation curve. Passing a normalized time parameter to this function returns the current interpolation.
**time**: indicates the current normalized time. The value ranges from 0 to 1.
The curve interpolation corresponding to the normalized time point is returned. | - Example - + ``` import Curves from '@ohos.curves' let curve = Curves.init(Curve.EaseIn) // Create an interpolation curve which is slow and then fast by default. @@ -122,7 +125,7 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // Create a third-order Bezi ## Example - + ``` import Curves from '@ohos.curves' @Entry diff --git a/en/application-dev/reference/arkui-ts/ts-matrix-transformation.md b/en/application-dev/reference/arkui-ts/ts-matrix-transformation.md index a6f5c1c5d0e300331f5b927fdfd1c69473938a9d..0eded3f87db1c32ab188901e7d9f68e62ef17ddc 100644 --- a/en/application-dev/reference/arkui-ts/ts-matrix-transformation.md +++ b/en/application-dev/reference/arkui-ts/ts-matrix-transformation.md @@ -1,7 +1,7 @@ # Matrix Transformation -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE**
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. @@ -31,30 +31,30 @@ Matrix constructor, which is used to create a 4x4 matrix by using the input para | -------- | -------- | -------- | -------- | -------- | | array | Array<number> | Yes | [1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1] | A number array whose length is 16 (4 x 4). For details, see the parameter description. | -- Return values - | Type | Description | +- Return value + | Type | Description | | -------- | -------- | - | Object | 4x4 matrix object created based on the input parameter. | + | Object | 4x4 matrix object created based on the input parameter. | - Parameter description - | Name | Type | Mandatory | Description | + | Name | Type | Mandatory | Description | | -------- | -------- | -------- | -------- | - | m00 | number | Yes | Scaling value of the x-axis. Defaults to **1** for the unit matrix. | - | m01 | number | Yes | The second value, which is affected by the rotation of the x, y, and z axes. | - | m02 | number | Yes | The third value, which is affected by the rotation of the x, y, and z axes. | - | m03 | number | Yes | Meaningless. | - | m10 | number | Yes | The fifth value, which is affected by the rotation of the x, y, and z axes. | - | m11 | number | Yes | Scaling value of the y-axis. Defaults to **1** for the unit matrix. | - | m12 | number | Yes | The seventh value, which is affected by the rotation of the x, y, and z axes. | - | m13 | number | Yes | Meaningless. | - | m20 | number | Yes | The ninth value, which is affected by the rotation of the x, y, and z axes. | - | m21 | number | Yes | The tenth value, which is affected by the rotation of the x, y, and z axes. | - | m22 | number | Yes | Scaling value of the z-axis. Defaults to **1** for the unit matrix. | - | m23 | number | Yes | Meaningless. | - | m30 | number | Yes | Translation value of the x-axis, in px. Defaults to **0** for the unit matrix. | - | m31 | number | Yes | Translation value of the y-axis, in px. Defaults to **0** for the unit matrix. | - | m32 | number | Yes | Translation value of the z-axis, in px. Defaults to **0** for the unit matrix. | - | m33 | number | Yes | Valid in homogeneous coordinates, presenting the perspective projection effect. | + | m00 | number | Yes | Scaling value of the x-axis. Defaults to **1** for the unit matrix. | + | m01 | number | Yes | The second value, which is affected by the rotation of the x, y, and z axes. | + | m02 | number | Yes | The third value, which is affected by the rotation of the x, y, and z axes. | + | m03 | number | Yes | Meaningless. | + | m10 | number | Yes | The fifth value, which is affected by the rotation of the x, y, and z axes. | + | m11 | number | Yes | Scaling value of the y-axis. Defaults to **1** for the unit matrix. | + | m12 | number | Yes | The seventh value, which is affected by the rotation of the x, y, and z axes. | + | m13 | number | Yes | Meaningless. | + | m20 | number | Yes | The ninth value, which is affected by the rotation of the x, y, and z axes. | + | m21 | number | Yes | The tenth value, which is affected by the rotation of the x, y, and z axes. | + | m22 | number | Yes | Scaling value of the z-axis. Defaults to **1** for the unit matrix. | + | m23 | number | Yes | Meaningless. | + | m30 | number | Yes | Translation value of the x-axis, in px. Defaults to **0** for the unit matrix. | + | m31 | number | Yes | Translation value of the y-axis, in px. Defaults to **0** for the unit matrix. | + | m32 | number | Yes | Translation value of the z-axis, in px. Defaults to **0** for the unit matrix. | + | m33 | number | Yes | Valid in homogeneous coordinates, presenting the perspective projection effect. | - Example @@ -76,10 +76,10 @@ identity(): Object Matrix initialization function. Can return a unit matrix object. -- Return values - | Type | Description | +- Return value + | Type | Description | | -------- | -------- | - | Object | Unit matrix object. | + | Object | Unit matrix object. | - Example @@ -102,10 +102,10 @@ copy(): Object Matrix copy function, which is used to copy the current matrix object. -- Return values - | Type | Description | +- Return value + | Type | Description | | -------- | -------- | - | Object | Copy object of the current matrix. | + | Object | Copy object of the current matrix. | - Example @@ -147,14 +147,14 @@ Matrix overlay function, which is used to overlay the effects of two matrices to - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | matrix | Matrix4 | Yes | - | Matrix object to be overlaid. | + | matrix | Matrix4 | Yes | - | Matrix object to be overlaid. | -- Return values - | Type | Description | +- Return value + | Type | Description | | -------- | -------- | - | Object | Object after matrix overlay. | + | Object | Object after matrix overlay. | - Example @@ -188,10 +188,10 @@ invert(): Object Matrix inverse function. Can return an inverse matrix of the current matrix object, that is, get an opposite effect. -- Return values - | Type | Description | +- Return value + | Type | Description | | -------- | -------- | - | Object | Inverse matrix object of the current matrix. | + | Object | Inverse matrix object of the current matrix. | - Example @@ -212,17 +212,17 @@ Matrix translation function, which is used to add the translation effect to the - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | x | number | No | 0 | Translation distance of the x-axis, in px. | - | y | number | No | 0 | Translation distance of the y-axis, in px. | - | z | number | No | 0 | Translation distance of the z-axis, in px. | + | x | number | No | 0 | Translation distance of the x-axis, in px. | + | y | number | No | 0 | Translation distance of the y-axis, in px. | + | z | number | No | 0 | Translation distance of the z-axis, in px. | -- Return values - | Type | Description | +- Return value + | Type | Description | | -------- | -------- | - | Object | Matrix object after the translation effect is added. | + | Object | Matrix object after the translation effect is added. | - Example @@ -254,19 +254,19 @@ Matrix scaling function, which is used to add the scaling effect to the x, y, an - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | x | number | No | 1 | Scaling multiple of the x-axis. | - | y | number | No | 1 | Scaling multiple of the y-axis. | - | z | number | No | 1 | Scaling multiple of the z-axis. | - | centerX | number | No | 0 | X coordinate of the center point. | - | centerY | number | No | 0 | Y coordinate of the center point. | + | x | number | No | 1 | Scaling multiple of the x-axis. | + | y | number | No | 1 | Scaling multiple of the y-axis. | + | z | number | No | 1 | Scaling multiple of the z-axis. | + | centerX | number | No | 0 | X coordinate of the center point. | + | centerY | number | No | 0 | Y coordinate of the center point. | -- Return values - | Type | Description | +- Return value + | Type | Description | | -------- | -------- | - | Object | Matrix object after the scaling effect is added. | + | Object | Matrix object after the scaling effect is added. | - Example @@ -298,20 +298,20 @@ Matrix rotation function, which is used to add the rotation effect to the x, y, - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | x | number | No | 1 | X coordinate of the rotation axis vector. | - | y | number | No | 1 | Y coordinate of the rotation axis vector. | - | z | number | No | 1 | Z coordinate of the rotation axis vector. | - | angle | number | No | 0 | Rotation angle. | - | centerX | number | No | 0 | X coordinate of the center point. | - | centerY | number | No | 0 | Y coordinate of the center point. | + | x | number | No | 1 | X coordinate of the rotation axis vector. | + | y | number | No | 1 | Y coordinate of the rotation axis vector. | + | z | number | No | 1 | Z coordinate of the rotation axis vector. | + | angle | number | No | 0 | Rotation angle. | + | centerX | number | No | 0 | X coordinate of the center point. | + | centerY | number | No | 0 | Y coordinate of the center point. | -- Return values - | Type | Description | +- Return value + | Type | Description | | -------- | -------- | - | Object | Matrix object after the rotation effect is added. | + | Object | Matrix object after the rotation effect is added. | - Example @@ -343,15 +343,15 @@ Matrix point transformation function, which is used to apply the current transfo - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | point | Point | Yes | - | Point to be transformed. | + | point | Point | Yes | - | Point to be transformed. | -- Return values - | Type | Description | +- Return value + | Type | Description | | -------- | -------- | - | Point | Point object after matrix transformation | + | Point | Point object after matrix transformation | - Example diff --git a/en/application-dev/reference/arkui-ts/ts-media-components-video.md b/en/application-dev/reference/arkui-ts/ts-media-components-video.md index 461eac8e5042ffc2594879c11fde7d426124a7ba..e580461c27b429aa007a5f117e919036ffabd5b3 100644 --- a/en/application-dev/reference/arkui-ts/ts-media-components-video.md +++ b/en/application-dev/reference/arkui-ts/ts-media-components-video.md @@ -1,16 +1,28 @@ # Video - -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +The **\